Быстрый старт

Что покрывает это руководство

Это руководство помогает быстро поднять слой render sync между:

• host-продуктом, который контролирует разрешенные UI-компоненты;
• независимым remote-runtime расширения.

@omnicajs/vue-remote отвечает за синхронизированный рендеринг. Business APIs, auth, discovery и marketplace-логика остаются в соседнем tooling.

Установка

yarn add @omnicajs/vue-remote @remote-ui/rpc

IDE tooling

Чтобы native template refs в remote SFC типизировались как remote element proxies, добавьте Vue tooling plugin:

{
  "vueCompilerOptions": {
    "plugins": [
      "@omnicajs/vue-remote/tooling"
    ]
  }
}

Что это дает:

• <div ref="panel" /> внутри *.remote.vue или SFC с <script setup remote> выводится как remote proxy из @omnicajs/vue-remote/remote, а не как HTMLDivElement.
• useTemplateRef(...), ref(null) и shallowRef(null) следуют той же remote boundary-модели для native refs.
• refs на host-компоненты сохраняют типизацию component instance.

Рекомендации по IDE:

• VS Code: используйте расширение Vue - Official.
• PhpStorm / WebStorm: используйте Vue Language Server (Volar) и по возможности включайте service-powered type engine для более точной типизации.
• Другие IDE: если они работают поверх @vue/language-server или другого Volar-compatible Vue language client, они тоже должны читать vueCompilerOptions.plugins.

Если вы разрабатываете библиотеку прямо в этом репозитории, а не подключаете опубликованный пакет, используйте ./tooling.cjs в vueCompilerOptions.plugins.

1. Запуск host-runtime

На стороне host:

1. Зарегистрируйте host-компоненты через createProvider(...).
2. Создайте receiver render-channel через createReceiver().
3. Отрендерите HostedTree и передайте provider + receiver.
4. Запустите remote-runtime (iframe/worker) и передайте receiver.receive в run(...).

См.: Компоненты хоста и Обзор.

2. Запуск remote-runtime

На стороне remote:

1. Создайте remote-root через createRemoteRoot(channel, options).
2. Создайте приложение через createRemoteRenderer(root).createApp(...).
3. Опишите host-exposed компоненты через defineRemoteComponent(...).
4. Монтируйте root и app в run(...), очищайте ресурсы в release().

См.: Компоненты remote и Обзор.

3. Соединение host и remote

Используйте channel transport (обычно @remote-ui/rpc) и поддерживайте стабильный handshake:

1. Host загружает URL remote-runtime.
2. Remote экспортирует run/release.
3. Host вызывает run(channel, hostBridge).
4. Remote монтирует UI через канал.
5. Сессия завершается через release().

Если вместо iframe нужен dedicated worker-runtime, см. Web Worker Runtime. Для iframe-специфичного сценария см. Интеграция через iframe. Для явного channel-handshake между кастомными контейнерами см. MessagePort Transport. Для process-separated runtime в Electron/Tauri см. Desktop IPC Transport. Для cross-process или cross-machine сессий см. Socket Transport. Для локальных стендов и тестов можно запускать host + remote в одном runtime через In-Memory Transport (только dev/test). Для выбора режима в одном месте см. Сравнение транспортов.

4. Проверка границ

Перед дальнейшим расширением убедитесь, что:

• host контролирует список разрешенных компонентов;
• props/events, проходящие между runtime, сериализуемы;
• remote-runtime не зависит от прямых browser DOM APIs.

Далее

• Спроектировать безопасные host-контракты: Компоненты хоста.
• Смоделировать remote UI и границы: Компоненты remote.
• Посмотреть транспорт-независимую runtime-модель: Обзор.
• Посмотреть iframe-специфичное подключение: Интеграция через iframe.
• Сравнить режимы side-by-side: Сравнение транспортов.
• Посмотреть worker-специфичную топологию и lifecycle: Web Worker Runtime.
• Посмотреть режим явного channel wiring: MessagePort Transport.
• Посмотреть desktop межпроцессный bridge режим: Desktop IPC Transport.
• Посмотреть сетевую/session bridge модель: Socket Transport.
• Посмотреть dev/test режим одного runtime: In-Memory Transport.
• Посмотреть поддержку модификаторов событий и настройку сборки: Модификаторы событий.