API: Rendering

render(component, container)

Mount component() into container. Returns a dispose function that tears down the rendered tree, all bindings, and any effects.

hydrate(component, container)

Imported from the phaze/hydrate subpath:

import { hydrate } from '@madenowhere/phaze/hydrate'

Same as render, but adopts pre-existing DOM (e.g. SSR’d HTML) instead of creating fresh nodes. Used by @madenowhere/phaze-astro/client when the host element already has children. The hydrate machinery ships in every phaze-astro app’s bundle (the client picks between render and hydrate at runtime), so flipping an island from client:only to client:load costs zero bytes — see SSR & hydration for the full picture.

Fragment

JSX fragment placeholder. Supplied by phaze/jsx-runtime; the automatic JSX transform imports it for you.

Refs

The JSX ref attribute on intrinsic elements accepts four shapes — phaze’s runtime fans them all out:

shape	behavior
(el: Element) => void	classic ref callback — invoked once with the element
{ current: T | null }	ref-shaped store — current is set to the element
Signal<T | undefined>	phaze signal of element — signal.set(el) is called automatically
Array<…> of any of the above	fans out — every entry receives the element

// 1. Function ref (classic)
<div ref={(el) => console.log(el)} />

// 2. Object ref (React-style)
const ref = { current: null as HTMLDivElement | null }
<div ref={ref} />

// 3. Signal-as-ref (the typical phaze idiom)
const box = signal<HTMLDivElement>()
<div ref={box} />              // box.set(el) on mount

// 4. Array — multiple consumers on the same element
<div ref={[box.set, anotherRef, (el) => doThing(el)]} />

The signal-as-ref form pairs naturally with directives that take a target signal — photonProp(box, …), warp(box, …), etc. The array form replaces the cross-framework composeRefs helper: when one element needs multiple behaviors wired to it, just list every target.

There is no forwardRef. Phaze components don’t have an implicit second arg for refs — if a component wants to forward a ref to its inner element, accept ref as a normal prop and apply it.

function Card({ ref, ...rest }) {
  return <div ref={ref} {...rest} />
}

DOM primitives — phaze/dom

Low-level helpers used by the JSX runtime + compiler-emitted code. App authors don’t need these — listen / listenOn / abortSignal (the only DOM helpers most apps use directly) live on the main entry. Use phaze/dom only when you’re driving the DOM yourself.

import { setText, setAttribute, setClass, setStyle, template, placeNode, hasMoveBefore, abortNode } from '@madenowhere/phaze/dom'

• setText(node, fn) — bind a text node to a reactive function
• setAttribute(el, name, value) — set an attribute (reactive if value is a function)
• setClass(el, value) / setStyle(el, value) — class and style bindings
• template(html) — compile-time-friendly DOM template clone
• placeNode(parent, node, anchor) — moveBefore-aware insert (state-preserving when supported)
• hasMoveBefore — boolean: true when the browser supports Element.moveBefore()
• abortNode(node) — abort all listeners attached via listen