@madenowhere/phaze-directives

Canonical Phaze JSX use: directives — drop-in companions to the Phaze runtime + phaze-compile build pipeline.

Install

pnpm add @madenowhere/phaze-directives

Phaze + phaze-compile must be wired in your build (Vite plugin, Astro integration, etc.) for the JSX use: namespace to be transformed. See phaze docs.

Directives

| Name | Value type | Behavior | |---|---|---| | autofocus | boolean (or signal) | Focuses the element while truthy | | tooltip | string | Shows a positioned tooltip on hover/focus | | longpress | () => void | Fires the callback after a 500ms hold | | clickOutside | () => void | Fires the callback on clicks outside the element |

For viewport-intersection state, use the inView directive (or the useInView hook) from @madenowhere/phaze-directives/in-view — a subpath (not the main entry) so the IntersectionObserver code tree-shakes away when unused. Text-scramble: useScramble from @madenowhere/phaze-directives/scramble.

Usage

import { autofocus, tooltip, longpress, clickOutside } from '@madenowhere/phaze-directives'
import { s } from '@madenowhere/phaze/dsl'

const open = s(true)

<menu use:clickOutside={() => open.set(false)}>
  <input use:autofocus={open} />
  <button
    use:tooltip={"Reset (long-press)"}
    use:longpress={() => app.reset()}
    on:click={app.confirm}
  >
    Done
  </button>
</menu>

The use:NAME={value} JSX namespace is rewritten by phaze-compile to a post-creation IIFE that calls NAME(el, () => value) against the freshly mounted element — see docs/decisions/dsl_directive.md for the full contract.

Custom directives

Directives are plain functions. Write your own with the same shape:

import { listen, cleanup } from '@madenowhere/phaze'

export const focusRing = (el: HTMLElement, value: () => string) => {
  const apply = () => el.style.outline = `2px solid ${value()}`
  apply()
  listen(el, 'focus', apply)
  listen(el, 'blur',  () => el.style.outline = '')
}

Place in src/directives/focus-ring.ts, import locally, use as use:focusRing={"#03e6ff"}. No registration step.

Tooltip styling

The tooltip directive injects a tiny <style> tag once per page with sensible defaults (.phaze-tooltip { … }). Override globally in your own stylesheet — the directive doesn't fight you for specificity.

License

MIT