Saltar al contenido principal
Vue Remote logo Vue Remote logo Vue Remote

Tablero kanban en Worker

Cómo está construido este ejemplo

Enlace al encabezado

Esta página muestra un flujo completo basado en Worker sin mocks. La página de docs conserva el DOM host y el pointer hit-testing, mientras la aplicación Vue remota y el estado del tablero kanban se ejecutan dentro de un Web Worker dedicado.

El ejemplo tiene tres partes:

  • un host runtime que monta HostedTree dentro del área de preview;
  • una app remota en Worker que renderiza columnas, tarjetas y procesa RemoteSortableEvent;
  • un snapshot en vivo bajo el tablero que muestra el estado remoto actual después de cada drop.

Cómo interactuar

Enlace al encabezado
  • Toma las tarjetas solo desde el handle Drag.
  • Muévelas entre tarjetas de una columna para reordenar o hacia otra columna para transferirlas.
  • Usa Reiniciar tablero para volver al estado inicial del demo.

Tablero kanban sortable en un Worker dedicado

Arrastra las tarjetas desde su handle, reordénalas dentro de una columna, muévelas entre columnas y reinicia el ejemplo cuando quieras volver al estado inicial.

Iniciando runtime dedicado en Worker...

Este tablero está conectado mediante el mismo modelo de transporte host/worker que usan los runtime API públicos de la librería.

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,
  }
}

Páginas relacionadas

Enlace al encabezado