Reactive text and attributes#
Signals and getters create bindings. Without the optional compiler, using a .value expression directly in JSX evaluates only during setup.
import { signal } from '@zidomjs/core';const status = signal<'open' | 'closed'>('open');const view = <div className={() => status.value === 'open' ? 'active' : 'inactive'} title={() => `Current status: ${status.value}`}> <strong>{status}</strong> <span>{() => status.value.toUpperCase()}</span></div>;Conditions#
Getters can return different elements when their dependencies change. Zidom disposes the previous branch and creates the new one as needed.
const signedIn = signal(false);const view = <section> {() => signedIn.value ? <p>Welcome back</p> : <button onClick={() => signedIn.value = true}>Sign in</button>}</section>;Keyed lists#
Use For with a stable key to reorder rows while preserving existing node identity. Its render function receives reactive item and index signals.
import { For } from '@zidomjs/dom';const people = signal([ { id: 'a', name: 'Amina' }, { id: 'b', name: 'Zidane' }]);const view = <ul> <For each={people} by={person => person.id}> {(person, index) => <li> {() => `${index.value + 1}. ${person.value.name}`} </li>} </For></ul>;people.value = [...people.value].reverse();Duplicate keys are errors. Do not use array indexes for movable rows. Structural updates are not zero-cost; they can move, create or remove real nodes.
Portals and refs#
import { Portal } from '@zidomjs/dom';const overlay = document.getElementById('overlays')!;const shown = signal(false);const notice = <Portal to={overlay}> <div> {() => shown.value ? <p role="status">Saved</p> : null} </div></Portal>;// Update shown.value from a button or application event.const fieldRef: { current: HTMLInputElement | null } = { current: null };const field = <input aria-label="Search" ref={fieldRef} />;For changing portal content, keep an element mounted inside the portal and put the reactive getter inside that element, as above. Portal's top-level children are evaluated when the portal is created; a top-level conditional returning nothing initially will not later add a portal node. A portal is not an accessible dialog system. Accessible modals need focus management, Escape handling and focus restoration. Refs are assigned before insertion, so avoid measuring layout at ref assignment time.
SVG support#
Zidom supports an SVG subset with namespace-aware creation. Ambiguous tags may require svg:title or svg:a.
const label = signal('Ready');const icon = <svg role="img" aria-labelledby="state-title" viewBox="0 0 16 16"> <svg:title id="state-title">{label}</svg:title> <circle cx="8" cy="8" r="6" strokeWidth={2} /></svg>;Full SVG coverage, compiler lowering and accessibility reviews are not finished. See the original renderer guide.
Run the example#
See the Zidom lists example and inspect the exact source next to the result.