Frontend target

Entry: src/frontend/index.ts → сборка в dist/frontend/index.js.

defineExtension

import { defineExtension, getExtensionRegistry } from '@artiroute/extension-sdk/extension';

export default defineExtension(() => {
  // register entries in host registries
});

setup() выполняется один раз при bootstrap. extensionId подставляется автоматически в scope register.

Vue SFC

Компоненты в src/frontend/components/*.vue поддерживаются. Vite config:

import { ahExtensionFrontendViteConfig } from '@artiroute/extension-build';
import { extensionManifest } from './extension.manifest.mjs';

export default ahExtensionFrontendViteConfig({ root, manifest: extensionManifest });

Импорты PrimeVue

Оба стиля работают через host shims:

import { Tag } from 'primevue';
import Card from 'primevue/card';
import Tag from 'primevue/tag';

Не импортируйте CSS PrimeVue в extension — стили идут от хоста.

Реестры frontend

Задача	Registry
Пункт sidebar	app.sidebar + app.routes
Виджет проекта	app.widgets
Виджет дашборда	app.dashboardWidgets
Вкладка проекта	app.projectTabs
Вкладка settings	app.settingsTabs
Тип артефакта	app.artifactTypes
UI в экранах	app.uiSlots
Диалог	app.dialogs

Каталог: Итерируемые реестры, UI-слоты.

Host modules

Vue, PrimeVue, axios и SDK не бандлятся — резолвятся в runtime хоста. Whitelist: Host-модули.

HTTP к backend

Расширения не импортируют @/shared/... хоста напрямую. Для вызовов API из браузера:

• Auth routes (/api/auth/ext/...) — @artiroute/host/auth: getProviderLoginUrl, completeLogin, exchangeCodeAndLogin
• GraphQL, REST extension API, uploads — @artiroute/host/api: getGraphqlUrl, fetchGraphql, getExtensionApiUrl, resolvePublicFileUrl, withAppBase

import { getExtensionApiUrl, fetchGraphql } from '@artiroute/host/api';

const commentsUrl = getExtensionApiUrl('@artiroute/my-ext', '/items');
const data = await fetchGraphql<{ items: Item[] }>(QUERY, { projectId });

Запрещено в frontend extension: литералы '/api/...' и window.location.href = '/...' без withAppBase — на стендах с BASE_URL=/demo запросы уйдут в корень домена.

Навигация через vue-router (router.push('/projects/...')) учитывает base автоматически.

Стили

Tailwind-классы из CSS хоста. Свой Tailwind в extension не нужен: Стили и UI.

peerDependencies

Объявите host-библиотеки как peer (не bundle):

"peerDependencies": {
  "@artiroute/extension-sdk": "workspace:*",
  "primevue": "^4.4.1",
  "vue": "^3.5.22",
  "vue-router": "^4.6.0"
}

Dev workflow

cd packages/extensions/my-ext
pnpm dev          # extension-build --no-pack, быстрая сборка
pnpm build        # dist + zip

После pnpm install:extensions перезагрузите frontend или дождитесь hotplug (если включён).