@shapeshift-labs/frontier-virtual

DOM-neutral Frontier virtualization, layout providers, materialized ranges, spatial culling, frustum culling, and serializable layout state.

This package owns range math, layout providers, grid/tree/spatial/frustum visibility, serializable layout state, and structural data-window contracts that can be implemented by IDB, SQL, cache, CRDT, or app-specific storage adapters.

• npm: @shapeshift-labs/frontier-virtual
• source: siliconjungle/-shapeshift-labs-frontier-virtual
• license: MIT

Related Packages

The published Frontier package family is generated from one shared package catalog so READMEs stay in sync across packages:

• @shapeshift-labs/frontier: Core JSON diff/apply, compact patch tuples, JSON Pointer, equality, clone, validation, Unicode helpers.
• @shapeshift-labs/frontier-query: Shared query-key, selector path, condition, entity identity, and table-shape primitives.
• @shapeshift-labs/frontier-codec: Patch serialization, binary frames, canonical JSON, and patch-history codecs.
• @shapeshift-labs/frontier-engine: Stateful planned diff engine, adaptive profiles, schema plans, and engine-level history helpers.
• @shapeshift-labs/frontier-state: Patch-routed app-state subscriptions, owned commits, maintained views, and path mapping.
• @shapeshift-labs/frontier-state-cache: Normalized query-result cache with entity/query watchers, persistence, change logs, optimistic layers, and mutation bridge.
• @shapeshift-labs/frontier-state-cache-idb: IndexedDB persistence adapter for Frontier state-cache snapshots.
• @shapeshift-labs/frontier-state-cache-file: Structured file persistence adapter for Frontier state-cache snapshots and change logs.
• @shapeshift-labs/frontier-state-cache-sql: SQL persistence adapter for Frontier state-cache snapshots and change logs.
• @shapeshift-labs/frontier-schema: JSON Schema validation, Frontier profile generation, CloudEvent envelopes, and query/table schema helpers.
• @shapeshift-labs/frontier-event-log: Bounded event logs, replay cursors, consumer acknowledgements, keyed compaction, checkpoints, and Frontier patch event records.
• @shapeshift-labs/frontier-scheduler: Deterministic work scheduling, lanes, cancellation, backpressure, frame policies, replay snapshots, and work graphs.
• @shapeshift-labs/frontier-logging: Opt-in structured logging, browser telemetry, file sinks, exporters, benchmark traces, and Frontier patch/update summaries.
• @shapeshift-labs/frontier-mutation: Explicit mutation and selector plans compiled to Frontier patches or CRDT operations.
• @shapeshift-labs/frontier-dom: Patch-native DOM and host renderer bindings, manifest hydration, JSX runtime/compiler helpers, SSR, devtools, and logging bridges.
• @shapeshift-labs/frontier-crdt: Native CRDT documents, update tooling, awareness, branches, conflict introspection, version frames, and undo.
• @shapeshift-labs/frontier-crdt-sync: CRDT sync endpoints, repo/storage/provider contracts, document URLs, local networks, model checking, forensics, and text binding contracts.
• @shapeshift-labs/frontier-crdt-websocket: WebSocket client/server transports for Frontier CRDT sync providers.
• @shapeshift-labs/frontier-react: React external-store hooks and adapters for Frontier state, cache, and CRDT surfaces.
• @shapeshift-labs/frontier-richtext: Rich text Delta normalization/application, marks, embeds, ranges, and cursor/selection transforms for local editor integrations.
• @shapeshift-labs/frontier-realtime: Shared realtime command, tick, snapshot, prediction, reconciliation, interpolation, rollback, message, and delta primitives.
• @shapeshift-labs/frontier-realtime-server: Authoritative realtime room, tick, command validation, rate-limit, session, and snapshot-history runtime.
• @shapeshift-labs/frontier-realtime-websocket: WebSocket client, wire, and Node room-server transport for Frontier realtime.
• @shapeshift-labs/frontier-game: Game-facing entity, component, player, room, ownership, spatial interest, rollback, physics, and replication helpers above realtime.

Package source repositories:

• siliconjungle/-shapeshift-labs-frontier
• siliconjungle/-shapeshift-labs-frontier-query
• siliconjungle/-shapeshift-labs-frontier-codec
• siliconjungle/-shapeshift-labs-frontier-engine
• siliconjungle/-shapeshift-labs-frontier-state
• siliconjungle/-shapeshift-labs-frontier-state-cache
• siliconjungle/-shapeshift-labs-frontier-state-cache-idb
• siliconjungle/-shapeshift-labs-frontier-state-cache-file
• siliconjungle/-shapeshift-labs-frontier-state-cache-sql
• siliconjungle/-shapeshift-labs-frontier-schema
• siliconjungle/-shapeshift-labs-frontier-event-log
• siliconjungle/-shapeshift-labs-frontier-scheduler
• siliconjungle/-shapeshift-labs-frontier-logging
• siliconjungle/-shapeshift-labs-frontier-mutation
• siliconjungle/-shapeshift-labs-frontier-virtual
• siliconjungle/-shapeshift-labs-frontier-dom
• siliconjungle/-shapeshift-labs-frontier-crdt
• siliconjungle/-shapeshift-labs-frontier-crdt-sync
• siliconjungle/-shapeshift-labs-frontier-crdt-websocket
• siliconjungle/-shapeshift-labs-frontier-react
• siliconjungle/-shapeshift-labs-frontier-richtext
• siliconjungle/-shapeshift-labs-frontier-realtime
• siliconjungle/-shapeshift-labs-frontier-realtime-server
• siliconjungle/-shapeshift-labs-frontier-realtime-websocket
• siliconjungle/-shapeshift-labs-frontier-game

Install

npm install @shapeshift-labs/frontier-virtual

Current Surface

import {
  createFixedLayout,
  createTextLayout,
  materializeWindowSource,
  virtualize,
  virtualizeFrustum
} from '@shapeshift-labs/frontier-virtual';

const range = virtualize({
  items: messages,
  keyBy: 'id',
  viewport: { offset: scrollTop, size: viewportHeight, crossSize: width },
  layout: createTextLayout({ field: 'body', font: '14px Inter', lineHeight: 20 }),
  overscan: 8
});

const window = await materializeWindowSource(range, {
  readWindow: (start, end) => table.readRange(start, end),
  count: () => table.count()
});

const visibleObjects = virtualizeFrustum(sceneAabbs, cameraFrustum);

frontier-virtual does not import DOM, React, frontier-dom, storage adapters, or game engines. Renderers and adapters consume the range result and decide how to materialize it.

Scheduled helpers such as scheduleVirtualize(), scheduleVirtualizeGrid(), scheduleVirtualizeSpatial(), scheduleVirtualizeFrustum(), and scheduleMaterializeWindowSource() route the same work through any structural scheduler. This keeps camera culling, range math, and remote window materialization usable outside DOM renderers.

Benchmarks

These are Frontier-only package measurements, not competitor comparisons.

Run package-local measurements:

npm run bench