Compiler

Compiler is optional#

Zidom's browser runtime can bind signals and getters without any compile-time transformation. The experimental @zidomjs/compiler can rewrite selected local .value expressions into reactive getters and optionally optimize conservative DOM templates.

const count = signal(0);const once = <p>{count.value}</p>;            // setup-time snapshotconst live = <p>{() => count.value}</p>;      // reactive getterconst direct = <p>{count}</p>;                // reactive signal child

Compile TSX source#

import { compileJsx } from '@zidomjs/compiler';const source = `  import { signal } from '@zidomjs/core';  const count = signal(0);  export const View = () => <p>Count: {count.value}</p>;`;const { code, diagnostics } = compileJsx(source, 'View.tsx');if (diagnostics.length) console.error(diagnostics);console.log(code);

Conservative local tracking#

reactiveReads: 'tracked' recognizes directly declared const signals and computed values imported from @zidomjs/core. It understands common aliases but does not do arbitrary type-aware signal inference. Signal props and imported instances should use explicit getters.

function UserCount(props: { count: { readonly value: number } }) {  return <p>{() => props.count.value}</p>;}

Template optimizations#

Enable static or dynamic templates explicitly and test the generated output. They work only on conservative safe HTML subtree patterns and can add helper bytes.

compileJsx(source, 'View.tsx', {  reactiveReads: 'tracked',  staticTemplates: true,  dynamicTemplates: true});

Read Vite integration and the upstream compiler guide.

Run the example#

See the Zidom compiler example and inspect the exact source next to the result.