@marko/runtime-tags 6.3.2 → 6.3.4

package/cheatsheet.md

@@ -0,0 +1,146 @@
+# Marko 6 cheat sheet
+
+Marko 6 = HTML superset. NOT JSX, NOT old Marko 4/5. `.marko` files are components; the filename is the tag name.
+
+## Golden rules
+
+1. Text interpolation: `${expr}` inside tag bodies. A bare line like `Welcome aboard` at the root of the template parses as a TAG named `Welcome` (concise mode) and fails to compile. Wrap it in an element (`<p>Welcome aboard</p>`) or prefix the line with `-- ` to mark it as text (`-- Welcome ${name}` works at the top level). Attributes take raw JS after `=` with NO braces/quotes needed: `<div title=user.name data-n=1 + 1>` (parenthesize if the value contains `>`).
+2. State: `<let/name=initial>` (slash then var name!). Update by plain assignment in an event handler: `count++`, `text = "hi"`. No setState, no hooks.
+3. Derived values: `<const/total=items.length * price>` — auto-recomputes. Never use an effect to derive state.
+4. NEVER mutate state in place. `items.push(x)` will NOT update the UI. Always reassign:
+   - add: `items = items.concat(x)`
+   - remove: `items = items.toSpliced(i, 1)`
+   - update: `items = items.toSpliced(i, 1, { ...item, done: true })`
+   - object: `user = { ...user, name }`
+5. Events: method shorthand `onClick() { ... }` or `onClick=fn`. Handler gets the DOM event: `onSubmit(e) { e.preventDefault(); save() }`. Don't sync input values through `onInput`/`onChange` listeners — that's what change handlers (next rule) are for, and they make the data's owner explicit.
+6. Native inputs are UNCONTROLLED by default: `value=` only sets the initial value. Adding the matching `*Change` handler is what makes them controlled — `valueChange` on `<input>`/`<textarea>`/`<select>`, `checkedChange` on checkboxes/radios, `openChange` on `<details>`/`<dialog>`. `value:=text` is the shorthand for `value=text valueChange(v) { text = v }`. (`<textarea value:=text/>` — value attribute, not body.)
+7. Write the change handler yourself when updates need transforming — number inputs give STRINGS: `<input type="number" value=n valueChange(v) { n = +v }>`.
+
+## Canonical component (copy this shape)
+
+```marko
+<let/items=[]>
+<let/draft="">
+<const/remaining=items.filter(t => !t.done).length>
+
+<input value:=draft placeholder="What next?">
+<button onClick() {
+  const text = draft.trim();
+  if (text) {
+    items = items.concat({ id: items.length + 1, text, done: false });
+    draft = "";
+  }
+}>Add</button>
+
+<if=items.length>
+  <ul>
+    <for|item, i| of=items by="id">
+      <li class={ done: item.done }>
+        <input
+          type="checkbox"
+          checked=item.done
+          checkedChange(v) { items = items.toSpliced(i, 1, { ...item, done: v }) }
+        >
+        ${item.text}
+      </li>
+    </for>
+  </ul>
+  <p>${remaining} left</p>
+</if>
+<else>
+  <p>Nothing yet</p>
+</else>
+```
+
+## Control flow
+
+```marko
+<if=cond> A </if>
+<else if=other> B </else>
+<else> C </else>
+
+<for|item, index| of=list by="id"> ${item.name} </for>   // by keys the loop (no key= attr!)
+<for|city| of=cities by=(city) => city> ${city} </for>    // primitives: by takes a FUNCTION — by=city would be an undefined variable (the loop param is not in scope in by=)
+<for|i| from=0 until=5> ${i} </for>                       // 0..4
+
+<show=open> stays mounted, keeps state (form drafts) when hidden </show>
+```
+
+`<if>` destroys/rebuilds its content; `<show>` just hides it (use for toggles that must keep state).
+
+## Async (`<await>`)
+
+```marko
+import { getUser } from "../data.js";
+
+<try>
+  <await|user|=getUser()>
+    <h2>${user.name}</h2>
+  </await>
+
+  <@placeholder>Loading...</@placeholder>
+  <@catch|err|>${err.message}</@catch>
+</try>
+```
+
+`@placeholder`/`@catch` go on `<try>`, never on `<await>`. On the server this streams (placeholder flushes first, content follows). It works in the browser too: hand `<await>` a new promise (e.g. a `<const>` derived from state) and it shows the placeholder again, then the new result.
+
+Don't fetch while rendering: start data loads early, pass the PROMISE through the template, and `<await>` it where the data is rendered. Fetching inside each component that renders the data serializes the requests (waterfalls). Under @marko/run, load in the route handler — `return next({ user: getUser() })`, no await — and render with `<await|user|=$global.data.user>`.
+
+## Components
+
+- File `src/tags/product-card.marko` is auto-discovered as `<product-card>` from any template (no import needed). Attributes arrive as `input`: `${input.title}`.
+- Body content passed by the parent renders with `<${input.content}/>`.
+- Named sections use attribute tags:
+
+```marko
+/* parent */
+<my-card>
+  <@header>Hello</@header>
+  body text
+</my-card>
+
+/* src/tags/my-card.marko */
+<div class="card">
+  <header><${input.header.content}/></header>
+  <${input.content}/>
+</div>
+```
+
+- Repeated attr tags (many `<@tab ...>`) arrive as the SINGULAR prop `input.tab`, which is iterable but NOT an array: `input.tab[i]` and `input.tab.length` are undefined. To index or count, spread first: `<const/tabs=[...input.tab ?? []]>` then `tabs[active]`/`tabs.length`. Looping directly is fine: `<for|tab| of=input.tab>`.
+- Conditional attrs: `false`/`null` attrs are omitted from HTML. `aria-selected` etc. want strings: `aria-selected=(i === active && "true")`.
+- `class=` / `style=` accept strings, objects, arrays: `class=["btn", { active }]`, `style={ color }` (single braces).
+
+## Client-side effects (rare — prefer state/const)
+
+```marko
+<div/el/>
+<script>
+  // Browser-only. Runs after mount and re-runs when referenced state changes.
+  el().focus();                                  // element refs are getter FUNCTIONS
+  const id = setInterval(tick, 1000);
+  $signal.onabort = () => clearInterval(id);     // cleanup
+</script>
+```
+
+`<style>` = real CSS, extracted & global. `<script>` = reactive effect, NOT an HTML script tag.
+
+## DON'T (these are errors or silently wrong)
+
+| Wrong (React/Vue/Marko5 habit)                              | Right                                                                                |
+| ----------------------------------------------------------- | ------------------------------------------------------------------------------------ |
+| `{expr}` in markup, `className`, `key=`, `style={{...}}`    | `${expr}`, `class`, `by=` on `<for>`, `style={...}`                                  |
+| `onClick={() => ...}` / `@click` / `on-click("name")`       | `onClick() { ... }`                                                                  |
+| `const [x, setX] = useState()` / `state` / `class {}` block | `<let/x=0>` then `x = 1`                                                             |
+| `$ const y = x * 2;` (scriptlets are removed)               | `<const/y=x * 2>`                                                                    |
+| `<let x=0>`                                                 | `<let/x=0>`                                                                          |
+| `<if(cond)>`                                                | `<if=cond>`                                                                          |
+| `items.push(x)`                                             | `items = items.concat(x)`                                                            |
+| `input.renderBody`                                          | `input.content`                                                                      |
+| `<await>` with `@placeholder`/`@catch`                      | wrap in `<try>`                                                                      |
+| `el.focus()` on a ref                                       | `el().focus()` inside `<script>`/handler                                             |
+| `input.tab[0]` / `input.tab.length`                         | `[...input.tab ?? []]` first (attr tags are iterables, not arrays)                   |
+| bare text on its own line at template root                  | wrap in an element (`<p>...`), or prefix the line with `-- `                         |
+| `by=item` using the loop variable                           | `by="propName"` or `by=(item) => key` — `by=` is evaluated outside the loop          |
+| `onInput(e) { q = e.target.value }` to sync an input        | `value:=q` — the change handler owns the value                                       |
+| fetching inside the component that renders the data         | start the promise early (route handler / top of template), pass it down to `<await>` |

package/dist/common/accessor.d.ts

@@ -8,7 +8,6 @@ export declare enum AccessorPrefix {
     ControlledValue = "G",
     DynamicHTMLLastChild = "H",
     EventAttributes = "I",
-    Getter = "J",
     KeyedScopes = "O",
     Lifecycle = "K",
     Promise = "L",

package/dist/common/accessor.debug.d.ts

@@ -8,7 +8,6 @@ export declare enum AccessorPrefix {
     ControlledValue = "ControlledValue:",
     DynamicHTMLLastChild = "DynamicHTMLLastChild:",
     EventAttributes = "EventAttributes:",
-    Getter = "Getter:",
     KeyedScopes = "KeyedScopes:",
     Lifecycle = "Lifecycle:",
     Promise = "Promise:",

package/dist/debug/dom.js

@@ -1974,6 +1974,7 @@ const RENDER_BODY_ID = "$compat_renderBody";
 //#endregion
 //#region src/dom/compat.ts
 const classIdToBranch = /* @__PURE__ */ new Map();
+let classEventResolver;
 const scopesByRender = /* @__PURE__ */ new WeakMap();
 const getRenderScopes = ($global) => {
 	const render = self[$global.runtimeId]?.[$global.renderId];
@@ -1988,9 +1989,16 @@ const compat = {
 		_resume(SET_SCOPE_REGISTER_ID, (scope) => {
 			getRenderScopes(scope["$global"])[scope["#Id"]] = scope;
 			if (scope.m5c) classIdToBranch.set(scope.m5c, scope);
+			if (classEventResolver) for (const key in scope) {
+				const resolved = classEventResolver(scope[key], scope);
+				if (resolved !== scope[key]) scope[key] = resolved;
+			}
 		});
 		_resume(RENDER_BODY_ID, warp10Noop);
 	},
+	setClassEventResolver(fn) {
+		classEventResolver = fn;
+	},
 	getScope($global, scopeId) {
 		return getRenderScopes($global)?.[scopeId];
 	},

package/dist/debug/dom.mjs

@@ -1972,6 +1972,7 @@ const RENDER_BODY_ID = "$compat_renderBody";
 //#endregion
 //#region src/dom/compat.ts
 const classIdToBranch = /* @__PURE__ */ new Map();
+let classEventResolver;
 const scopesByRender = /* @__PURE__ */ new WeakMap();
 const getRenderScopes = ($global) => {
 	const render = self[$global.runtimeId]?.[$global.renderId];
@@ -1986,9 +1987,16 @@ const compat = {
 		_resume(SET_SCOPE_REGISTER_ID, (scope) => {
 			getRenderScopes(scope["$global"])[scope["#Id"]] = scope;
 			if (scope.m5c) classIdToBranch.set(scope.m5c, scope);
+			if (classEventResolver) for (const key in scope) {
+				const resolved = classEventResolver(scope[key], scope);
+				if (resolved !== scope[key]) scope[key] = resolved;
+			}
 		});
 		_resume(RENDER_BODY_ID, warp10Noop);
 	},
+	setClassEventResolver(fn) {
+		classEventResolver = fn;
+	},
 	getScope($global, scopeId) {
 		return getRenderScopes($global)?.[scopeId];
 	},

package/dist/debug/html.js

@@ -247,6 +247,8 @@ function _escape_comment(val) {
 const K_SCOPE_ID = Symbol("Scope ID");
 const kTouchedIterator = Symbol.for("marko.touchedIterator");
 const { hasOwnProperty: hasOwnProperty$1 } = {};
+const objectProto = Object.prototype;
+const arrayProto = Array.prototype;
 const Generator = (function* () {})().constructor;
 const AsyncGenerator = (async function* () {})().constructor;
 patchIteratorNext(Generator.prototype);
@@ -685,12 +687,6 @@ function writeProp(state, val, parent, accessor) {
 	}
 }
 function writeReferenceOr(state, write, val, parent, accessor) {
-	const scopeId = val[K_SCOPE_ID];
-	if (scopeId !== void 0) {
-		trackScope(state, val, scopeId);
-		state.buf.push("_(" + scopeId + ")");
-		return true;
-	}
 	let ref = state.refs.get(val);
 	if (ref) {
 		if (!trackChannel(state, ref)) {
@@ -811,6 +807,12 @@ function writeNull(state) {
 }
 function writeObject(state, val, parent, accessor) {
 	if (val === null) return writeNull(state);
+	const scopeId = val[K_SCOPE_ID];
+	if (scopeId !== void 0) {
+		trackScope(state, val, scopeId);
+		state.buf.push("_(" + scopeId + ")");
+		return true;
+	}
 	const wellKnownObject = KNOWN_OBJECTS.get(val);
 	if (wellKnownObject) {
 		state.buf.push(wellKnownObject);
@@ -819,7 +821,10 @@ function writeObject(state, val, parent, accessor) {
 	return writeReferenceOr(state, writeUnknownObject, val, parent, accessor);
 }
 function writeUnknownObject(state, val, ref) {
-	switch (Object.getPrototypeOf(val)?.constructor) {
+	const proto = Object.getPrototypeOf(val);
+	if (proto === objectProto) return writePlainObject(state, val, ref);
+	if (proto === arrayProto) return writeArray(state, val, ref);
+	switch (proto?.constructor) {
 		case void 0: return writeNullObject(state, val, ref);
 		case Object: return writePlainObject(state, val, ref);
 		case Array: return writeArray(state, val, ref);
@@ -863,7 +868,7 @@ function writeUnknownObject(state, val, ref) {
 }
 function writePlainObject(state, val, ref) {
 	state.buf.push("{");
-	writeObjectProps(state, val, ref);
+	writeMaybeIterableProps(state, val, ref);
 	state.buf.push("}");
 	return true;
 }
@@ -1212,7 +1217,7 @@ function writeAsyncGenerator(state, iter, ref) {
 }
 function writeNullObject(state, val, ref) {
 	state.buf.push("{");
-	state.buf.push(writeObjectProps(state, val, ref) + "__proto__:null}");
+	state.buf.push(writeMaybeIterableProps(state, val, ref) + "__proto__:null}");
 	return true;
 }
 function writeObjectProps(state, val, ref) {
@@ -1223,6 +1228,10 @@ function writeObjectProps(state, val, ref) {
 		if (writeProp(state, val[key], ref, escapedKey)) sep = ",";
 		else state.buf.pop();
 	}
+	return sep;
+}
+function writeMaybeIterableProps(state, val, ref) {
+	let sep = writeObjectProps(state, val, ref);
 	if (hasSymbolIterator(val)) {
 		let yieldSelf = "";
 		const iterArr = [];
@@ -1309,14 +1318,19 @@ function isCircular(parent, ref) {
 function toObjectKey(name) {
 	if (name === "") return "\"\"";
 	if (name === "__proto__") return "[\"__proto__\"]";
-	const startChar = name[0];
-	if (isDigit(startChar)) {
-		if (startChar === "0") {
-			if (name !== "0") return quote(name, 1);
-		} else for (let i = 1; i < name.length; i++) if (!isDigit(name[i])) return quote(name, i);
-	} else if (isWord(startChar)) {
-		for (let i = 1; i < name.length; i++) if (!isWordOrDigit(name[i])) return quote(name, i);
-	} else return quote(name, 0);
+	const len = name.length;
+	const c0 = name.charCodeAt(0);
+	if (c0 >= 48 && c0 <= 57) if (c0 === 48) {
+		if (len !== 1) return quote(name, 1);
+	} else for (let i = 1; i < len; i++) {
+		const c = name.charCodeAt(i);
+		if (c < 48 || c > 57) return quote(name, i);
+	}
+	else if (c0 >= 97 && c0 <= 122 || c0 >= 65 && c0 <= 90 || c0 === 95 || c0 === 36) for (let i = 1; i < len; i++) {
+		const c = name.charCodeAt(i);
+		if (!(c >= 97 && c <= 122 || c >= 65 && c <= 90 || c >= 48 && c <= 57 || c === 95 || c === 36)) return quote(name, i);
+	}
+	else return quote(name, 0);
 	return name;
 }
 function toAccess(accessor) {
@@ -1459,15 +1473,6 @@ function hasOnlyZeros(typedArray) {
 	for (let i = 0; i < typedArray.length; i++) if (typedArray[i] !== 0) return false;
 	return true;
 }
-function isWordOrDigit(char) {
-	return isWord(char) || isDigit(char);
-}
-function isDigit(char) {
-	return char >= "0" && char <= "9";
-}
-function isWord(char) {
-	return char >= "a" && char <= "z" || char >= "A" && char <= "Z" || char === "_" || char === "$";
-}
 function patchIteratorNext(proto) {
 	if (proto.next[kTouchedIterator]) return;
 	const { next } = proto;
@@ -2900,6 +2905,7 @@ var ServerRendered = class {
 	pipe(stream) {
 		this.#read((html) => {
 			stream.write(html);
+			stream.flush?.();
 		}, (err) => {
 			const socket = "socket" in stream && stream.socket;
 			if (socket && typeof socket.destroySoon === "function") socket.destroySoon();
@@ -2910,10 +2916,13 @@ var ServerRendered = class {
 	}
 	toReadable() {
 		let cancelled = false;
+		let started = false;
 		let boundary;
 		const encoder = new TextEncoder();
 		return new ReadableStream({
-			start: (ctrl) => {
+			pull: (ctrl) => {
+				if (started) return;
+				started = true;
 				boundary = this.#read((html) => {
 					ctrl.enqueue(encoder.encode(html));
 				}, (err) => {
@@ -2928,7 +2937,7 @@ var ServerRendered = class {
 				cancelled = true;
 				boundary?.abort(reason);
 			}
-		});
+		}, { highWaterMark: 0 });
 	}
 	then(onfulfilled, onrejected) {
 		return this.#promise().then(onfulfilled, onrejected);
@@ -3153,7 +3162,7 @@ const compat = {
 		if (boundary.flush() === 1) throw new Error("Cannot serialize promise across tags/class compat layer.");
 		return new Chunk(boundary, null, null, state).flushScript().scripts;
 	},
-	render(renderer, willRerender, classAPIOut, component, input, completeChunks) {
+	render(renderer, willRerender, classAPIOut, component, input, completeChunks, registerChildScope) {
 		const state = this.ensureState(classAPIOut.global);
 		const boundary = new Boundary(state);
 		let head = new Chunk(boundary, null, null, state);
@@ -3163,7 +3172,7 @@ const compat = {
 			for (const key in input) normalizedInput[key === "renderBody" ? "content" : key] = input[key];
 		}
 		head.render(() => {
-			if (willRerender) {
+			if (willRerender || registerChildScope) {
 				const scopeId = _peek_scope_id();
 				writeScope(scopeId, { m5c: component.id });
 				_script(scopeId, SET_SCOPE_REGISTER_ID);

package/dist/debug/html.mjs

@@ -245,6 +245,8 @@ function _escape_comment(val) {
 const K_SCOPE_ID = Symbol("Scope ID");
 const kTouchedIterator = Symbol.for("marko.touchedIterator");
 const { hasOwnProperty: hasOwnProperty$1 } = {};
+const objectProto = Object.prototype;
+const arrayProto = Array.prototype;
 const Generator = (function* () {})().constructor;
 const AsyncGenerator = (async function* () {})().constructor;
 patchIteratorNext(Generator.prototype);
@@ -683,12 +685,6 @@ function writeProp(state, val, parent, accessor) {
 	}
 }
 function writeReferenceOr(state, write, val, parent, accessor) {
-	const scopeId = val[K_SCOPE_ID];
-	if (scopeId !== void 0) {
-		trackScope(state, val, scopeId);
-		state.buf.push("_(" + scopeId + ")");
-		return true;
-	}
 	let ref = state.refs.get(val);
 	if (ref) {
 		if (!trackChannel(state, ref)) {
@@ -809,6 +805,12 @@ function writeNull(state) {
 }
 function writeObject(state, val, parent, accessor) {
 	if (val === null) return writeNull(state);
+	const scopeId = val[K_SCOPE_ID];
+	if (scopeId !== void 0) {
+		trackScope(state, val, scopeId);
+		state.buf.push("_(" + scopeId + ")");
+		return true;
+	}
 	const wellKnownObject = KNOWN_OBJECTS.get(val);
 	if (wellKnownObject) {
 		state.buf.push(wellKnownObject);
@@ -817,7 +819,10 @@ function writeObject(state, val, parent, accessor) {
 	return writeReferenceOr(state, writeUnknownObject, val, parent, accessor);
 }
 function writeUnknownObject(state, val, ref) {
-	switch (Object.getPrototypeOf(val)?.constructor) {
+	const proto = Object.getPrototypeOf(val);
+	if (proto === objectProto) return writePlainObject(state, val, ref);
+	if (proto === arrayProto) return writeArray(state, val, ref);
+	switch (proto?.constructor) {
 		case void 0: return writeNullObject(state, val, ref);
 		case Object: return writePlainObject(state, val, ref);
 		case Array: return writeArray(state, val, ref);
@@ -861,7 +866,7 @@ function writeUnknownObject(state, val, ref) {
 }
 function writePlainObject(state, val, ref) {
 	state.buf.push("{");
-	writeObjectProps(state, val, ref);
+	writeMaybeIterableProps(state, val, ref);
 	state.buf.push("}");
 	return true;
 }
@@ -1210,7 +1215,7 @@ function writeAsyncGenerator(state, iter, ref) {
 }
 function writeNullObject(state, val, ref) {
 	state.buf.push("{");
-	state.buf.push(writeObjectProps(state, val, ref) + "__proto__:null}");
+	state.buf.push(writeMaybeIterableProps(state, val, ref) + "__proto__:null}");
 	return true;
 }
 function writeObjectProps(state, val, ref) {
@@ -1221,6 +1226,10 @@ function writeObjectProps(state, val, ref) {
 		if (writeProp(state, val[key], ref, escapedKey)) sep = ",";
 		else state.buf.pop();
 	}
+	return sep;
+}
+function writeMaybeIterableProps(state, val, ref) {
+	let sep = writeObjectProps(state, val, ref);
 	if (hasSymbolIterator(val)) {
 		let yieldSelf = "";
 		const iterArr = [];
@@ -1307,14 +1316,19 @@ function isCircular(parent, ref) {
 function toObjectKey(name) {
 	if (name === "") return "\"\"";
 	if (name === "__proto__") return "[\"__proto__\"]";
-	const startChar = name[0];
-	if (isDigit(startChar)) {
-		if (startChar === "0") {
-			if (name !== "0") return quote(name, 1);
-		} else for (let i = 1; i < name.length; i++) if (!isDigit(name[i])) return quote(name, i);
-	} else if (isWord(startChar)) {
-		for (let i = 1; i < name.length; i++) if (!isWordOrDigit(name[i])) return quote(name, i);
-	} else return quote(name, 0);
+	const len = name.length;
+	const c0 = name.charCodeAt(0);
+	if (c0 >= 48 && c0 <= 57) if (c0 === 48) {
+		if (len !== 1) return quote(name, 1);
+	} else for (let i = 1; i < len; i++) {
+		const c = name.charCodeAt(i);
+		if (c < 48 || c > 57) return quote(name, i);
+	}
+	else if (c0 >= 97 && c0 <= 122 || c0 >= 65 && c0 <= 90 || c0 === 95 || c0 === 36) for (let i = 1; i < len; i++) {
+		const c = name.charCodeAt(i);
+		if (!(c >= 97 && c <= 122 || c >= 65 && c <= 90 || c >= 48 && c <= 57 || c === 95 || c === 36)) return quote(name, i);
+	}
+	else return quote(name, 0);
 	return name;
 }
 function toAccess(accessor) {
@@ -1457,15 +1471,6 @@ function hasOnlyZeros(typedArray) {
 	for (let i = 0; i < typedArray.length; i++) if (typedArray[i] !== 0) return false;
 	return true;
 }
-function isWordOrDigit(char) {
-	return isWord(char) || isDigit(char);
-}
-function isDigit(char) {
-	return char >= "0" && char <= "9";
-}
-function isWord(char) {
-	return char >= "a" && char <= "z" || char >= "A" && char <= "Z" || char === "_" || char === "$";
-}
 function patchIteratorNext(proto) {
 	if (proto.next[kTouchedIterator]) return;
 	const { next } = proto;
@@ -2898,6 +2903,7 @@ var ServerRendered = class {
 	pipe(stream) {
 		this.#read((html) => {
 			stream.write(html);
+			stream.flush?.();
 		}, (err) => {
 			const socket = "socket" in stream && stream.socket;
 			if (socket && typeof socket.destroySoon === "function") socket.destroySoon();
@@ -2908,10 +2914,13 @@ var ServerRendered = class {
 	}
 	toReadable() {
 		let cancelled = false;
+		let started = false;
 		let boundary;
 		const encoder = new TextEncoder();
 		return new ReadableStream({
-			start: (ctrl) => {
+			pull: (ctrl) => {
+				if (started) return;
+				started = true;
 				boundary = this.#read((html) => {
 					ctrl.enqueue(encoder.encode(html));
 				}, (err) => {
@@ -2926,7 +2935,7 @@ var ServerRendered = class {
 				cancelled = true;
 				boundary?.abort(reason);
 			}
-		});
+		}, { highWaterMark: 0 });
 	}
 	then(onfulfilled, onrejected) {
 		return this.#promise().then(onfulfilled, onrejected);
@@ -3151,7 +3160,7 @@ const compat = {
 		if (boundary.flush() === 1) throw new Error("Cannot serialize promise across tags/class compat layer.");
 		return new Chunk(boundary, null, null, state).flushScript().scripts;
 	},
-	render(renderer, willRerender, classAPIOut, component, input, completeChunks) {
+	render(renderer, willRerender, classAPIOut, component, input, completeChunks, registerChildScope) {
 		const state = this.ensureState(classAPIOut.global);
 		const boundary = new Boundary(state);
 		let head = new Chunk(boundary, null, null, state);
@@ -3161,7 +3170,7 @@ const compat = {
 			for (const key in input) normalizedInput[key === "renderBody" ? "content" : key] = input[key];
 		}
 		head.render(() => {
-			if (willRerender) {
+			if (willRerender || registerChildScope) {
 				const scopeId = _peek_scope_id();
 				writeScope(scopeId, { m5c: component.id });
 				_script(scopeId, SET_SCOPE_REGISTER_ID);

package/dist/dom/compat.d.ts

@@ -6,6 +6,7 @@ export declare const compat: {
     patchDynamicTag: typeof patchDynamicTag;
     queueEffect: typeof queueEffect;
     init(warp10Noop: any): void;
+    setClassEventResolver(fn: (value: unknown, scope: Scope) => unknown): void;
     getScope($global: Record<string, unknown>, scopeId: unknown): Scope | undefined;
     setRendererId(renderer: any, id: unknown): void;
     isRenderer(renderer: any): any;

package/dist/dom.js

@@ -51,7 +51,7 @@ let empty = [], rest = Symbol(), toDelimitedString = function toDelimitedString(
 	typeof by == "string" ? forOf(all, (item, i) => cb(item[by], [item, i])) : forOf(all, (item, i) => cb(by(item, i), [item, i]));
 }), _for_in = /* @__PURE__ */ loop(([obj, by = byFirstArg], cb) => forIn(obj, (key, value) => cb(by(key, value), [key, value]))), _for_to = /* @__PURE__ */ loop(([to, from, step, by = byFirstArg], cb) => forTo(to, from, step, (v) => cb(by(v), [v]))), _for_until = /* @__PURE__ */ loop(([until, from, step, by = byFirstArg], cb) => forUntil(until, from, step, (v) => cb(by(v), [v]))), rendering, runId = 2, caughtError = /* @__PURE__ */ new WeakSet(), placeholderShown = /* @__PURE__ */ new WeakSet(), pendingEffects = [], pendingRenders = [], runEffects = ((effects) => {
 	for (let i = 0; i < effects.length;) effects[i++](effects[i++]);
-}), runRender = (render) => render.c(render.b, render.d), catchEnabled, classIdToBranch = /* @__PURE__ */ new Map(), scopesByRender = /* @__PURE__ */ new WeakMap(), getRenderScopes = ($global) => {
+}), runRender = (render) => render.c(render.b, render.d), catchEnabled, classIdToBranch = /* @__PURE__ */ new Map(), classEventResolver, scopesByRender = /* @__PURE__ */ new WeakMap(), getRenderScopes = ($global) => {
 	let render = self[$global.runtimeId]?.[$global.renderId], scopes = render && scopesByRender.get(render);
 	return render && !scopes && scopesByRender.set(render, scopes = {}), scopes;
 }, compat = {
@@ -59,9 +59,15 @@ let empty = [], rest = Symbol(), toDelimitedString = function toDelimitedString(
 	queueEffect,
 	init(warp10Noop) {
 		_resume("$C_s", (scope) => {
-			getRenderScopes(scope.$)[scope.L] = scope, scope.m5c && classIdToBranch.set(scope.m5c, scope);
+			if (getRenderScopes(scope.$)[scope.L] = scope, scope.m5c && classIdToBranch.set(scope.m5c, scope), classEventResolver) for (let key in scope) {
+				let resolved = classEventResolver(scope[key], scope);
+				resolved !== scope[key] && (scope[key] = resolved);
+			}
 		}), _resume("$C_b", warp10Noop);
 	},
+	setClassEventResolver(fn) {
+		classEventResolver = fn;
+	},
 	getScope($global, scopeId) {
 		return getRenderScopes($global)?.[scopeId];
 	},

package/dist/dom.mjs

@@ -51,7 +51,7 @@ let empty = [], rest = Symbol(), toDelimitedString = function toDelimitedString(
 	typeof by == "string" ? forOf(all, (item, i) => cb(item[by], [item, i])) : forOf(all, (item, i) => cb(by(item, i), [item, i]));
 }), _for_in = /* @__PURE__ */ loop(([obj, by = byFirstArg], cb) => forIn(obj, (key, value) => cb(by(key, value), [key, value]))), _for_to = /* @__PURE__ */ loop(([to, from, step, by = byFirstArg], cb) => forTo(to, from, step, (v) => cb(by(v), [v]))), _for_until = /* @__PURE__ */ loop(([until, from, step, by = byFirstArg], cb) => forUntil(until, from, step, (v) => cb(by(v), [v]))), rendering, runId = 2, caughtError = /* @__PURE__ */ new WeakSet(), placeholderShown = /* @__PURE__ */ new WeakSet(), pendingEffects = [], pendingRenders = [], runEffects = ((effects) => {
 	for (let i = 0; i < effects.length;) effects[i++](effects[i++]);
-}), runRender = (render) => render.c(render.b, render.d), catchEnabled, classIdToBranch = /* @__PURE__ */ new Map(), scopesByRender = /* @__PURE__ */ new WeakMap(), getRenderScopes = ($global) => {
+}), runRender = (render) => render.c(render.b, render.d), catchEnabled, classIdToBranch = /* @__PURE__ */ new Map(), classEventResolver, scopesByRender = /* @__PURE__ */ new WeakMap(), getRenderScopes = ($global) => {
 	let render = self[$global.runtimeId]?.[$global.renderId], scopes = render && scopesByRender.get(render);
 	return render && !scopes && scopesByRender.set(render, scopes = {}), scopes;
 }, compat = {
@@ -59,9 +59,15 @@ let empty = [], rest = Symbol(), toDelimitedString = function toDelimitedString(
 	queueEffect,
 	init(warp10Noop) {
 		_resume("$C_s", (scope) => {
-			getRenderScopes(scope.$)[scope.L] = scope, scope.m5c && classIdToBranch.set(scope.m5c, scope);
+			if (getRenderScopes(scope.$)[scope.L] = scope, scope.m5c && classIdToBranch.set(scope.m5c, scope), classEventResolver) for (let key in scope) {
+				let resolved = classEventResolver(scope[key], scope);
+				resolved !== scope[key] && (scope[key] = resolved);
+			}
 		}), _resume("$C_b", warp10Noop);
 	},
+	setClassEventResolver(fn) {
+		classEventResolver = fn;
+	},
 	getScope($global, scopeId) {
 		return getRenderScopes($global)?.[scopeId];
 	},

package/dist/html/compat.d.ts

@@ -16,7 +16,7 @@ export declare const compat: {
     writeSetScopeForComponent(branchId: number, m5c: string, m5i: unknown): void;
     toJSON(): (this: WeakKey) => [registryId: string, scopeId: unknown] | undefined;
     flushScript($global: any): string;
-    render(renderer: ServerRenderer, willRerender: boolean, classAPIOut: any, component: any, input: any, completeChunks: Chunk[]): void;
+    render(renderer: ServerRenderer, willRerender: boolean, classAPIOut: any, component: any, input: any, completeChunks: Chunk[], registerChildScope?: boolean): void;
     register: typeof register;
     registerRenderBody(fn: any): void;
 };