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

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

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

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

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

Установка

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

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.