Skip to content
Vue Remote logo Vue Remote logo Vue Remote

Worker Kanban Sandbox

How this example is built

Section titled “How this example is built”

This page shows a full worker-based setup without mocks. The docs page owns the host DOM and pointer hit-testing, while the remote Vue app and kanban board state run inside a dedicated Web Worker.

The example has three parts:

  • a host runtime that mounts HostedTree into the preview area;
  • a remote worker app that renders lanes, cards, and handles RemoteSortableEvent;
  • a live snapshot below the board that shows the current remote state after each drop.

How to use it

Section titled “How to use it”
  • Grab cards only by the Drag handle.
  • Move between cards in a lane to reorder, or into another lane to transfer a card.
  • Use Reset board to return the demo to its initial state.

Sortable kanban board running in a dedicated Worker

Drag cards by their handle, reorder them inside a lane, move them across lanes, and reset the example whenever you want to start over.

Booting dedicated Worker runtime...

This board is wired through the same host/worker transport model used by the library's public runtime APIs.

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


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


import {
  HostedTree,
  createProvider,
  createReceiver,
} from '@omnicajs/vue-remote/host'


interface SandboxWorkerApi {
  release (): void;
  run (channel: Channel, labels: SortableKanbanSandboxLabels): Promise<void>;
}


export interface SortableKanbanSandboxLabels {
  booting: string;
  failed: string;
  ready: string;
  resetLabel: string;
  snapshotLabel: string;
  snapshotUnavailable?: string;
  unsupported: string;
}


export interface SortableKanbanSandboxElements {
  rootElement: HTMLElement;
}


export interface SortableKanbanSandboxHandle {
  destroy (): Promise<void>;
}


export const mountSortableKanbanSandbox = async (
  elements: SortableKanbanSandboxElements,
  labels: SortableKanbanSandboxLabels
): Promise<SortableKanbanSandboxHandle> => {
  const { rootElement } = elements


  if (typeof Worker === 'undefined') {
    rootElement.textContent = labels.unsupported


    return {
      async destroy () {},
    }
  }


  rootElement.textContent = labels.booting


  const receiver = createReceiver()
  const provider = createProvider()
  const host = createApp({
    render: () => h(HostedTree, { provider, receiver }),
  })
  const worker = new Worker(new URL('./remote.worker.ts', import.meta.url), {
    type: 'module',
  })
  const endpoint = createEndpoint<SandboxWorkerApi>(fromWebWorker(worker))
  let destroyed = false


  const destroy = async () => {
    if (destroyed) {
      return
    }


    destroyed = true


    try {
      await endpoint.call.release()
    } catch {
      // Worker teardown should not block page cleanup.
    } finally {
      endpoint.terminate()
      worker.terminate()
      host.unmount()
      rootElement.innerHTML = ''
    }
  }


  try {
    host.mount(rootElement)
    await endpoint.call.run(receiver.receive, labels)
  } catch (error) {
    await destroy()
    rootElement.textContent = `${labels.failed}: ${error instanceof Error ? error.message : String(error)}`
  }


  return {
    destroy,
  }
}
Section titled “Related pages”