@retikz/plot-vanilla

Framework-free plain authoring, Kernel Vanilla Tier 2 embedding, and SSR runtime for @retikz/plot.

@retikz/plot remains the source of truth for Plot IR, shared authoring normalization, extension contracts, and lowerPlots. This package adds three host-facing paths without copying Plot semantics:

• plot(input) creates a schema-valid, method-free PlotSpec. Axis, facet, and scaffold binding sugar is removed before the function returns.
• embedPlot(id, spec) and createPlotAdapter(datasets, options?) compose Plot inside Kernel Vanilla figure() / layer() specs.
• renderPlot(spec, datasets, options?) remains the direct DOM-free SSR entry. It returns an SVG string, or { svg, lineage } when lineage is an object.

Datasets and functions stay outside PlotSpec. The Tier 2 adapter keeps them in its runtime closure, while renderPlot receives them as arguments. The current runtime still rerenders the complete figure on update; incremental lowering, cache invalidation, and renderer diffing are not part of this API.

Install

pnpm add @retikz/plot-vanilla

This package is ESM-only and requires Node.js 24 or newer. 本包仅发布 ES modules，要求 Node.js 24 或更高版本。

import { plot, renderPlot } from '@retikz/plot-vanilla';

const sales = [
  { month: 'Jan', revenue: 12 },
  { month: 'Feb', revenue: 18 },
];

const spec = plot({
  id: 'sales',
  data: { reference: 'sales' },
  scales: [
    { type: 'band', name: 'x' },
    { type: 'linear', name: 'y' },
  ],
  coordinate: { type: 'cartesian2D', x: 'x', y: 'y' },
  marks: [
    {
      type: 'interval',
      id: 'bars',
      encoding: { x: { field: 'month' }, y: { field: 'revenue' } },
    },
  ],
});

const svg = renderPlot(spec, { sales }, { width: 360, height: 200 });

Compose the same spec with other Kernel Vanilla content:

import { createPlotAdapter, embedPlot } from '@retikz/plot-vanilla';
import { figure, layer, renderToSvgString } from '@retikz/vanilla';

const drawing = figure({ layers: [layer('charts', [embedPlot('sales-panel', spec)])] });

const svg = renderToSvgString(drawing, {
  adapters: [createPlotAdapter({ sales }, { width: 360, height: 200 })],
  output: { width: 360, height: 200 },
});

See the retikz docs site for usage.