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

Tabla sortable en Worker

Cómo está construido este ejemplo

Enlace al encabezado

Esta página muestra una tabla sortable basada en Worker sin mocks. La página de docs conserva el DOM host y el pointer hit-testing, mientras la app Vue remota y el orden de las filas 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 filas de tabla y procesa RemoteSortableEvent;
  • un snapshot en vivo bajo la tabla que muestra el orden remoto actual después de cada drop.

Cómo interactuar

Enlace al encabezado
  • Toma las filas solo desde el handle Drag de la primera columna.
  • Mueve una fila por encima o por debajo de otra para cambiar el orden.
  • Usa Reiniciar tabla para volver a la cola inicial.

Tabla sortable en un Worker dedicado

Arrastra filas desde su handle, reordena la cola dentro de la misma tabla y reinicia el ejemplo cuando quieras volver al estado inicial.

Iniciando runtime dedicado en Worker...

Esta tabla está conectada 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: SortableTableSandboxLabels): Promise<void>;
}


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


export interface SortableTableSandboxElements {
  rootElement: HTMLElement;
}


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


export const mountSortableTableSandbox = async (
  elements: SortableTableSandboxElements,
  labels: SortableTableSandboxLabels
): Promise<SortableTableSandboxHandle> => {
  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