Process runtime fragments

Mount reactive bindings on HTML inserted after page load with process().

The problem

Hypermedia swaps and client innerHTML insert new markup after the initial mount. That HTML is not wired to the page signal store unless you manually re-run binding setup.

How Aero helps

process(element) scans a DOM subtree for data-aero-* directives and attaches the same binding handlers used at initial mount. Hypermedia swaps call process automatically when both flags are on. See Using hypermedia with reactivity.

Hypermedia (automatic)

When both reactivity: true and hypermedia: true are set, swapped fragment HTML is processed into the shared page store. Compiled regions go through destroy → swap → remount/process so bindings stay consistent.

No extra client code is required for standard action targets.

Manual process from client scripts

Insert HTML with data-aero-* attributes, then process:

<script is:state>
	let note = 'Hello from the page store'
	let showNote = true
</script>

<div id="host"></div>

<script>
	import aero from '@aero-js/core'

	document.getElementById('insert')?.addEventListener('click', () => {
		const host = document.getElementById('host')
		host.innerHTML =
			'<p data-aero-show="$showNote"><span data-aero-text="$note"></span></p>'
		aero.getReactivityRuntime?.()?.process(host)
	})
</script>

In runtime fragments, prefix signal paths with $ to read from the page store ($note, $showNote).

Restricted grammar (default)

process() is eval-free. Supported attribute values:

• Store refs: $note, $items, $auth.state
• Structural: $status or string literals (loading, "error")
• Events: hypermedia action grammar only (GET('/path')) — wired by hypermedia process() before reactivity runs

Arbitrary JavaScript in attributes (e.g. { count + 1 }) is rejected. Use <script is:state> for compiled bindings, or unsafeProcessFragment() from @aero-js/reactivity for trusted dynamic HTML only. See CSP and eval-free reactivity.

Structural fragments

Runtime HTML can include structural directives:

<div data-aero-switch="$status">
	<template data-aero-case="loading"><p>Loading…</p></template>
	<template data-aero-case="error"><p>Error</p></template>
	<template data-aero-default><p>Ready</p></template>
</div>

Call process(host) after inserting the markup.

Package API

Lower-level helpers live in @aero-js/reactivity:

import { processFragment, unsafeProcessFragment, createReactivityRuntime } from '@aero-js/reactivity'

const runtime = createReactivityRuntime({ initialState: { count: 0 } })
processFragment({ element: host, store: runtime.store })

// Trusted content only — requires unsafe-eval CSP:
unsafeProcessFragment({ element: trustedHost, store: runtime.store })

Most apps use the composed runtime from @aero-js/core rather than calling these directly. unsafeProcessFragment is not re-exported from @aero-js/core.