Web Worker Runtime

Зачем нужен этот режим

@omnicajs/vue-remote не ограничен только iframe-интеграцией. Если вашей extension-модели не нужен визуальный remote-document, dedicated Web Worker может хостить remote-рендеринг и при этом управлять host UI через тот же channel-контракт.

Этот режим полезен, когда вам нужны:

• изоляция от execution context основного потока host;
• более предсказуемая runtime-топология без hidden iframe lifecycle;
• transport, который позже можно эволюционировать в process/socket bridge.

Топология runtime

Host Vue App (main thread)
  -> createReceiver()
  -> HostedTree(provider, receiver)
  -> Endpoint(fromWebWorker(worker))
  -> call.run(receiver.receive, hostBridge)

Remote Vue App (dedicated worker)
  -> createEndpoint(self-as-MessageEndpoint)
  -> expose run/release
  -> createRemoteRoot(channel)
  -> createRemoteRenderer(root).createApp(...)

Пример на стороне host

import type { Channel } from '@omnicajs/vue-remote/host'
import type { Endpoint } from '@remote-ui/rpc'

import { createApp, defineComponent, h, onBeforeUnmount, onMounted } from 'vue'
import { HostedTree, createProvider, createReceiver } from '@omnicajs/vue-remote/host'
import { createEndpoint, fromWebWorker } from '@remote-ui/rpc'

import VSignalBadge from './components/VSignalBadge.vue'

type HostBridge = {
  acknowledge(id: string): void;
}

type WorkerApi = {
  run(channel: Channel, bridge: HostBridge): Promise<void>;
  release(): void;
}

const provider = createProvider({
  VSignalBadge,
})

export function mountWorkerRemote() {
  return createApp(defineComponent({
    setup() {
      const receiver = createReceiver()
      const worker = new Worker(new URL('./remote.worker.ts', import.meta.url), { type: 'module' })

      let endpoint: Endpoint<WorkerApi> | null = null

      onMounted(() => {
        endpoint = createEndpoint<WorkerApi>(fromWebWorker(worker))
        endpoint.call.run(receiver.receive, {
          acknowledge(id: string) {
            console.info('Signal acknowledged', id)
          },
        })
      })

      onBeforeUnmount(() => {
        endpoint?.call.release()
        endpoint?.terminate()
      })

      return () => h(HostedTree, { provider, receiver })
    },
  }))
}

Пример на стороне worker

remote.worker.ts:

import type { MessageEndpoint } from '@remote-ui/rpc'
import type { Channel } from '@omnicajs/vue-remote/host'

import { createEndpoint, release, retain } from '@remote-ui/rpc'
import { createRemoteRenderer, createRemoteRoot, defineRemoteComponent } from '@omnicajs/vue-remote/remote'
import { defineComponent, h, ref } from 'vue'

type HostBridge = {
  acknowledge(id: string): void;
}

const endpoint = createEndpoint(self as unknown as MessageEndpoint)

const VSignalBadge = defineRemoteComponent<'VSignalBadge', {
  tone: 'neutral' | 'success' | 'warning';
  label: string;
}>('VSignalBadge', [
  'dismiss',
] as unknown as {
  dismiss: (id: string) => true;
})

let onRelease = () => {}

endpoint.expose({
  async run(channel: Channel, bridge: HostBridge) {
    retain(channel)
    retain(bridge)

    const root = createRemoteRoot(channel, {
      components: ['VSignalBadge'],
    })
    await root.mount()

    const app = createRemoteRenderer(root).createApp(defineComponent({
      setup() {
        const signalId = ref('signal-42')
        const visible = ref(true)

        return () => visible.value
          ? h(VSignalBadge, {
            tone: 'warning',
            label: 'Background sync is delayed',
            onDismiss: (id: string) => {
              visible.value = false
              bridge.acknowledge(id || signalId.value)
            },
          })
          : h('p', 'All clear')
      },
    }))

    app.mount(root)

    onRelease = () => {
      release(channel)
      release(bridge)
      app.unmount()
    }
  },

  release() {
    onRelease()
  },
})

Загрузка собранного расширения по HTTP URL

Если расширение уже собрано и опубликовано как статические ассеты, worker-код можно грузить по URL.

Same-origin URL (прямой worker script)

Используйте этот вариант, когда host-приложение и ассеты расширения находятся на одном origin.

const worker = new Worker('/extensions/acme/remote.worker.js', {
  type: 'module',
})

const endpoint = createEndpoint<WorkerApi>(fromWebWorker(worker))
await endpoint.call.run(receiver.receive, hostBridge)

Это самый простой и обычно самый стабильный вариант для production.

Cross-origin URL (same-origin bootstrap + dynamic import)

Для cross-origin ассетов поднимайте локальный bootstrap worker, который импортирует удаленный модуль через CORS.

На стороне host:

import { createEndpoint, fromWebWorker } from '@remote-ui/rpc'

type WorkerApi = {
  ready(): boolean;
  run(channel: Channel, bridge: HostBridge): Promise<void>;
  release(): void;
}

const extensionUrl = encodeURIComponent('https://extensions.example-cdn.com/acme/remote.worker.js')
const worker = new Worker(`/workers/remote-bootstrap.worker.js?extension=${extensionUrl}`, {
  type: 'module',
})

const endpoint = createEndpoint<WorkerApi>(fromWebWorker(worker))
await endpoint.call.ready()
await endpoint.call.run(receiver.receive, hostBridge)

/workers/remote-bootstrap.worker.js:

import type { MessageEndpoint } from '@remote-ui/rpc'
import type { Channel } from '@omnicajs/vue-remote/host'
import { createEndpoint } from '@remote-ui/rpc'

type HostBridge = {
  acknowledge(id: string): void;
}

type ExtensionApi = {
  run(channel: Channel, bridge: HostBridge): Promise<void>;
  release(): void;
}

const extensionUrl = new URL(self.location.href).searchParams.get('extension')
if (!extensionUrl) {
  throw new Error('Missing extension URL')
}

const mod = await import(/* @vite-ignore */ extensionUrl) as ExtensionApi

const endpoint = createEndpoint<{
  ready(): boolean;
  run(channel: Channel, bridge: HostBridge): Promise<void>;
  release(): void;
}>(self as unknown as MessageEndpoint)

endpoint.expose({
  ready: () => true,
  run: mod.run,
  release: mod.release,
})

Требования для cross-origin варианта:

• worker bootstrap должен быть same-origin с host;
• удаленный URL должен отдавать CORS-заголовки для module loading;
• CSP должна разрешать нужные worker-src и script-src;
• URL расширения нужно валидировать (allowlist/подпись) до запуска.

Ограничения дизайна для worker-режима

1. В remote runtime нет прямого browser DOM. Код worker должен быть декларативным и передавать намерения через props/events/methods.
2. Boundary payloads должны быть сериализуемыми. Любое несериализуемое значение на границе host/remote считается проблемой контракта.
3. Render transport и business transport нужно разделять. channel нужен для sync UI-дерева, hostBridge для поведения продукта.

Практические заметки

• Для SharedWorker или custom multi-peer схем лучше использовать handshake на MessagePort и строить endpoint поверх порта.
• Держите run/release симметричными и идемпотентными: это упрощает lifecycle и будущую интеграцию отладчика.
• Если потом выносите worker-логику в socket/runtime сервис, сначала сохраните семантику channel-контракта, и только потом оптимизируйте transport-детали.

Связанные разделы

• Обзор
• Быстрый старт
• Интеграция через iframe
• Компоненты remote