{"slug":"utilities","title":"Utilities","headings":["ref","innerHTML","Conditional classes","portal","errorBoundary","resource","store","context","router"],"contentHtml":"

Utilities

Batteries included alongside the core runtime - all tree-shakeable imports from ruri.

ref

Imperative access to a created element:

import { tags } from \"ruri\"\n\nconst { input } = tags\nlet inputElement\n\noutput.append(\n    input({\n      ref: (el) => {\n        inputElement = el\n        el.focus()\n      },\n      placeholder: \"focused on mount\",\n    }),\n)
running...

Refs are replayed during hydration and mark their element as bound, so row updates swap rather than patch through them.

innerHTML

Escape hatch for pre-rendered HTML:

div({ innerHTML: \"<b>trusted</b> markup\" })

Server-side the string is emitted verbatim (ServerRaw); client-side it is assigned to element.innerHTML. Only use trusted content.

Conditional classes

div({ class: { active: isActive.value, muted: !isActive.value } })

Truthy keys become classes. Objects, arrays and strings can all be wrapped in a Signal for reactive class lists.

portal

Render children into another container (modals, toolbars). Content is removed when the surrounding tree unmounts:

import { portal, tags } from \"ruri\"\n\nconst { div, p } = tags\noutput.append(\n    div({},\n        p({}, \"stays here\"),\n        portal(output, p({}, \"also rendered into output\")),\n    ),\n)
running...

On the server portals render inline at their call site.

errorBoundary

Catch failures while building a subtree:

import { errorBoundary } from \"ruri\"\n\nerrorBoundary(() => riskyRender(), (error) => errorMessage(error))

resource

Wrap an async fetcher into reactive state:

import { createResource, tags } from \"ruri\"\n\nconst { div, span } = tags\nconst todos = createResource(() => Promise.resolve([\"one\", \"two\"]))\n\nconst view = div({},\n    todos.loading ? span({}, \"loading...\") : span({}, todos.data.join(\", \")),\n)\noutput.append(view)\ntodos.refetch()
running...

loading, data and error are plain signals - bind them anywhere.

store

Shallow reactive objects with per-property tracking:

import { createStore, effect, tags } from \"ruri\"\n\nconst { div } = tags\nconst state = createStore({ count: 0 })\n\neffect(() => console.log(state.count))\nstate.count++ // triggers exactly this effect\n\noutput.append(div({}, state.count))
running...

Nested objects stay plain - replace arrays wholesale instead of mutating them.

context

Build-time value injection without prop drilling:

import { consume, createContext, provide } from \"ruri\"\n\nconst Theme = createContext(\"light\")\n\nprovide([[Theme, \"dark\"]], () => {\n  panel(consume(Theme)) // \"dark\"\n})

Values are captured while the subtree is created.

router

A minimal history-based client router:

import { createRouter, tags } from \"ruri\"\n\nconst { div } = tags\nconst app = document.getElementById(\"playground-root\") ?? output\n\nconst router = createRouter({\n  \"/\": () => div({}, \"home\"),\n  \"/hello/:name\": ({ params }) => div({}, `hello ${params.name}`),\n}, { mode: \"hash\" })\n\nrouter.mount(app)\nrouter.navigate(\"/hello/ruri\") // lives in #/hello/ruri - the page URL is untouched
running...

Routes with :param segments receive typed params; navigation works through router.navigate() and browser back/forward.

"}