Runtime API

Everything the client runtime exports from @krate/runtime.

Reactive primitives

createSignal

const [getValue, setValue] = createSignal(initialValue)
getValue()           // read current value
setValue(next)        // set value (triggers subscribers)
setValue(prev => ...) // functional update

createEffect

const dispose = createEffect(() => { /* re-runs when deps change */ })
dispose()            // remove the effect entirely

createMemo

const value = createMemo(() => expensiveCalc(input()))
value()              // read memoized value

onCleanup

onCleanup(() => { /* runs before effect re-execution and on dispose */ })

onMount

onMount(() => { /* runs once after the initial render */ })

forwardRef

const FancyInput = forwardRef((props, ref) => {
  ref((el: Element) => el.focus());
  return h('input', props);
});

Forwards a ref callback through to the underlying DOM element.

disposeAll

disposeAll()

Disposes every live effect (used internally on SPA navigation and in test harnesses).

DOM helpers

h — hyperscript

const el = h('div', { class: 'foo', onClick: () => {} }, child1, child2)
// Functions as children become effects:
//   h('span', null, () => signal())

mount

mount(() => h(App, null), '#root')

hydrate

hydrate(() => h(App, null), '#root')

Hydrates SSR content, binding effects to existing DOM via data-k/data-kh attributes.

insert / clearNodes

insert(parent, value, startMarker)   // replace content between two <!--k--> markers
clearNodes(start, end)               // clear nodes between two markers

Low-level helpers used by the compiled hydration code to manage dynamic regions delimited by <!--k--> comment markers.

JSX runtime

import { jsx, jsxs, Fragment } from '@krate/runtime/jsx-runtime'

Automatic JSX transform — use <div> syntax in TSX files.

SPA router

import { initRouter } from '@krate/runtime'
initRouter()

Call once to enable client-side navigation via data-krate-link anchors and <Link>. Handles pushState, popstate, stylesheet diffing, and tree reconciliation. On navigation the router diffs the live content root against the parsed new page via reconcileTrees — unchanged nodes (keyed by <!--k:--> comment markers, data-k attributes, and id anchors) are kept in place so their state (focus, scroll, media, CSS animations) survives. Effects are disposed before the diff and stale __krate_* handler props are stripped; the new page's hydration JS then rebinds the kept nodes. Emits a krate:navigate CustomEvent after each navigation.

reinitRouter() tears down and re-registers the router listeners — useful after a full page replacement or for HMR in dev.

Context

import { createContext } from '@krate/runtime'

const ThemeCtx = createContext('light')
// ThemeCtx.Provider — wraps children with a context value
// ThemeCtx.useContext() — reads nearest Provider value
// ThemeCtx.defaultValue — fallback when no Provider

Resources

import { createResource } from '@krate/runtime'

const [user, { mutate, refetch }] = createResource(
  () => userId(),                          // reactive source
  async (id) => fetch(\`/api/user/\${id}\`).then(r => r.json())  // fetcher
)

user()          // current data (or undefined)
user.loading    // boolean
user.error      // error or undefined
user.state      // 'unresolved' | 'loading' | 'ready' | 'error' | 'refreshing'
mutate(prev => ({ ...prev, name: 'new' }))  // optimistic update
refetch()       // trigger re-fetch

Type exports

import type {
  Component, PropsWithChildren, ComponentProps,
  RefCallback, Context, ResourceReturn, ResourceActions,
} from '@krate/runtime'