API Reference
Everything an application needs is exported from the dziry package:
import { signal, computed, cn, Window, Outlet, useRouter } from "dziry";
Deep import paths (dziry/runtime/signal.ts and similar) resolve because the
compiler writes them into generated modules, but they are not public API. The
supported surface is what the package's root export provides.
Build-time and run-time APIs
The exports split into two groups that run at different times, and the split explains most errors you can hit:
- Build time.
Window,Outlet,cn,bind,useRouteanduseRouterrun inside the compiler and do not exist in the shipped app. - Run time.
signal,computed,batch,isSignaland$are the runtime.
They are exported together because they are written together — a page imports
cn and the signal it conditions on from the same place. But the split is why
a signal created inside a component has nowhere to live, and why an inline
style with a non-static value is a build error rather than a silent drop.
Pages
- Signals —
signal,computed,effect,batch,source,resource, and the rest of the runtime. - Markup —
cn,bind,Fragment, props, inline styles, lists. - Window —
Window,Outlet, and window configuration. - Routing —
useRoute,useRouter,Href. - CLI —
dziry compile,dziry dev,dziry build.
API status
Each API below is marked done, partial or planned. The badges are
generated at build time from the project's tracking table (API.md), so this
page cannot disagree with it.
| Surface | Status |
|---|---|
signal computed batch isSignal | done |
cn(...) conditional classes | done |
.map(fn, { key }) keyed lists | done |
inline style= (string + object) | done |
per-row conditional classes — cn({ done: t.done }) | done |
| text runs follow their element's predicates | done |
checked={t.done} in list rows | done |
ref() | partial |
bind:value | done |
form controls — <Checkbox> <Switch> <Radio> <Toggle> <Tabs> <Input> | planned |
<form> — payload by name, onSubmit, validate, onInvalid | done |
alert() — the platform's modal message box | done |
confirm() / prompt() | planned |
effect untrack peek cleanup, createScope disposal scopes | done |
Show | done |
source | done |
resource / <Suspense> / error boundaries | done |
token() (context) | planned |
onFrame(dt) | planned |
<Overlay> | planned |
route table from windows/*/pages/** | done |
Href union codegen | done |
useRoute typing + path check | done |
useRouter().path | done |
bare signal reads — {count * 2}, computed(() => count === 7) | done |
signal.set(value | fn) | done |
useRouter().matches(path) | done |
<Window> / <Outlet> | done |
one table set per window, inactive routes hidden | done |
navigate / back | done |
useRoute params as bindings | done |
href checked against the route table | done |
route loader — sync fn | async fn | Effect; exits drive navigation | done |
<Window layer={…}> — Effect Layer as the window's DI root | done |
handlers may return an Effect — run on the window's runtime | done |
Redirect / Cancel navigation tags | done |
defineQuery / defineMutation | planned |
<table> — table layout and elements | planned |
import "./app.css" from a window module | done |
| Tailwind as an ordinary project dependency | done |
<style> in an .html document | done |
| default stylesheet | planned |
<Checkbox> <Switch> <Radio> <Toggle> <Tabs> | planned |
:checked / :disabled variants | done |
| checkbox and radio activation, radio groups, label forwarding | done |
:indeterminate | planned |
::before / ::after + content | done |
::picker(select) | done |
::picker-icon ::checkmark ::marker | planned |
attribute selectors — [a] = ~= |= ^= $= *=, i flag | done |
<input> <select> <option> <textarea> <label> … as real tags | done |
<select> closed, with UA-supplied <button> + <selectedcontent> | done |
select > option, option:first-child | done |
<select> picker (open state) | done |
| the overlay layer — paint after, hit-test before | done |
| opening a picker costs no relayout | done |
:open | done |
| anchor positioning, collision handling | done |
| a picker as wide as its select | done |
| keyboard: which keys open a closed select | done |
| keyboard: reaching a select at all | done |
<optgroup> | done |
| scroll-outside dismissal, type-to-select | planned |
accent-color caret-color appearance | done |
<Input> | planned |
onSubmit receives the form's payload | done |
a named field with no bind:value | done |
validate={schema} — Zod, Valibot, ArkType, Effect | done |
onInvalid | done |
field="…" — nesting by wrapper | done |
errorClassName + <span error /> | done |
<span error="city" /> — a named message inside a group | done |
validateOn="submit|change|blur" | done |
the submitter's own name/value entry | done |
form="id" association | done |
a field wrapper holding a map() — repeating rows | done |
a row's own error message — <span error /> in the template | done |
a row's own error **styling** — :invalid | done |
a submit button switched off by disabled={signal} | done |
an alert() raised from a handler shows the frame that caused it | done |
onChange vs onInput | planned |
| a click focusing a bound field | done |
| an empty field is still one line high | done |
::placeholder | done |
| a disabled field refuses focus | done |
<input type=number|range> is typeable | done |
a field's **width** from size | planned |
caret — position, blink, caret-color | done |
| arrow keys, Home/End | done |
| insert and delete *at* the caret | done |
box-shadow — the ring subset | done |
currentcolor | done |
outline / outline-offset | planned |
| selection — drag, Shift+Arrow, Shift+click | done |
| double click for a word, triple click / Ctrl+A for all | done |
| editing over a selection | done |
::selection | done |
| clipboard — Ctrl+C/X/V, ⌘ on macOS | done |
| IME, double-click-then-drag by word | planned |
a <label> click focusing a text field | planned |
| the caret, selection and open picker as ledger entries | done |
opacity | done |
transform — translate* rotate scale* skew* | done |
translate / rotate / scale as their own properties | done |
transform-origin | done |
| hit-testing a transformed node | done |
a transform in a variant — hover:scale-110 | done |
transition-* — property, duration, delay, timing function | done |
@keyframes and the animation shorthand | done |
per-keyframe animation-timing-function | done |
easing — keywords, cubic-bezier(), steps() | done |
| interrupting a transition | done |
prefers-reduced-motion | planned |
| persistent handles (timer, socket, watcher) | planned |
| writes (fs, network, db) | planned |