Module · Level 1

Targets & observable equivalence

One source, many backends. Every generator lowers the same HTML Next source to a different target, and a single equivalence contract defines when two of those outputs are considered the same program.

Level 1 · reference implementation in progress

What every generator must do

Whatever the target, a generator turns one HTML Next source into that target's idiom while keeping the same observable behaviour. Concretely, every generator must:

  • use the contract's PascalCase name for the exported component;
  • preserve the native root element;
  • pass through native consumer attributes;
  • apply the contract's declared defaults;
  • serialize each prop to its target per the contract;
  • project children into the default slot;
  • import or reference the generated CSS exactly once; and
  • produce deterministic output for deterministic input.
Vanilla DOMESM factory + .d.ts
ReactTSX, typed ref, no forwardRef
Vue<script setup> SFC
Svelterunes + svelte/elements
CSSscoped component styles
DocsMarkdown API reference

The equivalence contract

This is what makes "many backends" trustworthy: pick any two targets and their output must be the same program, observably. Two executions are equivalent when their lowered native roots share:

  • the same namespace and tag name;
  • the same effective attributes (order-independent);
  • the same assigned property values for explicit property bindings;
  • equivalent child order, text, and identity;
  • the same native focus, form, and accessibility semantics; and
  • the same validation failures for invalid source.

Hydration markers and development-only attributes are excluded from the comparison, but an adapter must not add semantic wrapper elements.

CLI
html-next build button.html --out-dir dist

Next: see a full source in Examples, or how targets fit the module model in the Overview.