@wasl-flow/vanilla

Vanilla DOM renderer for wasl-flow. It renders content models into DOM nodes.

Install

npm install wasl-flow @wasl-flow/vanilla
# or
pnpm add wasl-flow @wasl-flow/vanilla

Quick Start

import { VanillaRenderer } from '@wasl-flow/vanilla';

type ButtonModel = { type: 'button'; text: string };

const renderer = new VanillaRenderer({ showValidationErrors: true });

renderer.register({
  type: 'button',
  parse: model => ({ data: model as ButtonModel }),
  factory: ({ model }) => {
    const button = document.createElement('button');
    button.textContent = model.text;
    return button;
  },
});

const node = renderer.render({ type: 'button', text: 'Click me' }) as Node;
document.body.appendChild(node);

Renderer Behavior

• render returns a DOM Node (or a DocumentFragment when aggregating).
• renderArray aggregates outputs into a DocumentFragment and filters out non-node values.
• Default nullValue is an empty DocumentFragment for DOM interoperability.
• When showValidationErrors is enabled, errors are rendered as styled DOM elements with sanitized details.
• In non-DOM environments, error rendering falls back to a lightweight element-like object.

Configuration

All RendererConfiguration options from the core package are supported. This renderer only changes the default nullValue to an empty DocumentFragment.

For details on registration, parsing, and safety limits, see the core package README.