marko 6.4.1 → 6.4.2

package/dist/debug/html.js

@@ -164,6 +164,16 @@ function assertValidAttrValue(name, value) {
 	const unrenderable = describeUnrenderable(value);
 	if (unrenderable) throw new Error(`The \`${name}\` attribute cannot be ${unrenderable}.`);
 }
+function _assert_class_toggles(classes, toggles) {
+	{
+		const written = new Set(classes.split(" "));
+		for (const toggle of toggles) {
+			const names = new Set(toggle.split(" "));
+			for (const name of names) if (written.has(name)) throw new Error(`The toggled class \`${name}\` is also written by another part of the \`class\` value; a toggled class may appear only once.`);
+			for (const name of names) written.add(name);
+		}
+	}
+}
 function assertValidTextValue(value) {
 	const unrenderable = describeUnrenderable(value);
 	if (unrenderable) throw new Error(`Text content cannot be ${unrenderable}.`);
@@ -296,6 +306,13 @@ function forUntil(until, from, step, cb) {
 }
 //#endregion
 //#region src/common/opt.ts
+function reduce(opt, cb, acc) {
+	if (opt) {
+		if (Array.isArray(opt)) for (const item of opt) acc = cb(acc, item);
+		else acc = cb(acc, opt);
+	}
+	return acc;
+}
 function push(opt, item) {
 	return opt ? Array.isArray(opt) ? (opt.push(item), opt) : [opt, item] : item;
 }
@@ -644,6 +661,17 @@ var Serializer = class {
 			channel
 		});
 	}
+	dropCall(value, object, property) {
+		const { mutated } = this.#state;
+		for (let i = 0; i < mutated.length; i++) {
+			const mutation = mutated[i];
+			if (mutation.value === value && mutation.object === object && mutation.property === property) {
+				mutated.splice(i, 1);
+				return true;
+			}
+		}
+		return false;
+	}
 };
 function register(id, val, scope, locals) {
 	REGISTRY.set(val, {
@@ -2235,6 +2263,15 @@ function _html(html) {
 function writeScript(script) {
 	$chunk.writeScript(script);
 }
+function catchableBoundary() {
+	const { boundary } = $chunk;
+	return boundary.withinCatch ? boundary : null;
+}
+function mayDrop(written) {
+	const { boundary } = $chunk;
+	for (let cur = written; cur && !isWithin(boundary, cur); cur = cur.parent) if (cur.aborted || cur.count) return true;
+	return false;
+}
 function _script(scopeId, registryId, markerGuard) {
 	if (markerGuard === 0 && ($chunk.serializeState.readyId || $chunk.context?.[kIsAsync])) _resume_branch(scopeId);
 	$chunk.boundary.state.needsMainRuntime = true;
@@ -2464,10 +2501,12 @@ function scopeWithId(state, scopeId) {
 }
 function _subscribe(subscribers, scope, resumeId, markerGuard) {
 	if (subscribers) {
-		const { serializer } = $chunk.boundary.state;
-		if (!$chunk.serializeState.readyId && !serializer.written(subscribers)) subscribers.add(scope);
+		const { boundary, serializeState } = $chunk;
+		const { serializer } = boundary.state;
+		if (!serializeState.readyId && !serializer.written(subscribers)) subscribers.add(scope);
 		else if (resumeId) _script(scope[K_SCOPE_ID], resumeId, markerGuard);
-		else serializer.writeCall(scope, subscribers, "add", $chunk.serializeState);
+		else serializer.writeCall(scope, subscribers, "add", serializeState);
+		if (boundary.withinCatch) (boundary.subscribed ||= []).push(subscribers, scope, serializeState);
 	}
 	return scope;
 }
@@ -2596,6 +2635,7 @@ function tryBoundary(content, catchContent, branchId, renderers) {
 	const { boundary } = chunk;
 	const { state } = boundary;
 	const catchBoundary = new Boundary(state, void 0, boundary);
+	if (catchContent) catchBoundary.withinCatch = true;
 	const body = chunk.fork(catchBoundary, null);
 	const bodyEnd = body.render(() => withBranchId(branchId, content));
 	if (catchBoundary.aborted) {
@@ -2629,8 +2669,10 @@ function tryBoundary(content, catchContent, branchId, renderers) {
 			const streamed = !chunk.catchRange;
 			const catchChunk = chunk.fork(boundary, null);
 			chunk.catchRange = null;
+			if (!renderersAtSettle) catchChunk.render(clearTryRenderers, branchId);
 			const inOrder = catchChunk === catchChunk.render(catchContent, catchBoundary.reason);
 			if (boundary.aborted) return;
+			if (bodyEnd.consumed || !inOrder) catchChunk.reorderStart = state.mark("*", branchId + "");
 			if (bodyEnd.consumed) {
 				catchChunk.reorderId = reorderId;
 				state.reorder(catchChunk);
@@ -2659,6 +2701,20 @@ function tryBoundary(content, catchContent, branchId, renderers) {
 	};
 	return renderersAtSettle;
 }
+function unsubscribe(subscribed, serializer) {
+	for (let i = 0; i < subscribed.length; i += 3) {
+		const subscribers = subscribed[i];
+		const scope = subscribed[i + 1];
+		if (!serializer.written(subscribers)) subscribers.delete(scope);
+		else if (!serializer.dropCall(scope, subscribers, "add")) serializer.writeCall(scope, subscribers, "delete", subscribed[i + 2]);
+	}
+}
+function clearTryRenderers(branchId) {
+	writeScope(branchId, {
+		[CatchContent]: 0,
+		[PlaceholderContent]: _scope_with_id(branchId)["#PlaceholderContent"] && 0
+	});
+}
 function writeTryRenderers(branchId, catchContent, placeholderContent) {
 	writeScope(branchId, {
 		[CatchContent]: catchContent,
@@ -2767,12 +2823,15 @@ var Boundary = class {
 	parent;
 	aborted = false;
 	reason;
+	subscribed;
 	pendingReorders;
 	children;
+	withinCatch = false;
 	constructor(state, signal, parent) {
 		this.state = state;
 		this.parent = parent;
 		if (parent) {
+			this.withinCatch = parent.withinCatch;
 			if (parent.aborted) this.abort(parent.reason);
 			else (parent.children ||= []).push(this);
 		} else if (signal) {
@@ -2785,6 +2844,7 @@ var Boundary = class {
 		const { state } = this;
 		this.aborted = true;
 		this.reason = reason;
+		if (this.subscribed) unsubscribe(this.subscribed, state.serializer);
 		if (this.pendingReorders) {
 			for (const reorder of this.pendingReorders) state.reorder(reorder);
 			this.pendingReorders = void 0;
@@ -2820,7 +2880,9 @@ var Chunk = class Chunk {
 	async = false;
 	consumed = false;
 	reorderId = null;
+	reorderStart = "";
 	deferredReady = null;
+	heldEffects = null;
 	deferredReorder = null;
 	catchRange = null;
 	placeholder = null;
@@ -2842,7 +2904,7 @@ var Chunk = class Chunk {
 	}
 	writeEffect(scopeId, registryId) {
 		countResumeWrite(this);
-		if (this.lastEffect === registryId) this.effects += " " + scopeId;
+		if (this.lastEffect === registryId) this.effects = concatEffects(this.effects, scopeId + "");
 		else {
 			this.lastEffect = registryId;
 			this.effects = concatEffects(this.effects, registryId + " " + scopeId);
@@ -2858,6 +2920,11 @@ var Chunk = class Chunk {
 		this.lastEffect = chunk.lastEffect || this.lastEffect;
 		this.deferredReady = concat(this.deferredReady, chunk.takeDeferredReady());
 	}
+	takeHeldEffects() {
+		const { heldEffects } = this;
+		this.heldEffects = null;
+		return heldEffects;
+	}
 	takeDeferredReady() {
 		const { deferredReady } = this;
 		this.deferredReady = null;
@@ -2910,7 +2977,7 @@ var Chunk = class Chunk {
 			return false;
 		}
 		const { branchId, scopeId, placeholderBranchId } = placeholder;
-		const reorderId = body.reorderId = branchId ? branchId + "" : state.nextReorderId();
+		const reorderId = body.reorderId = branchId + "";
 		this.writeHTML(state.mark("!^", reorderId));
 		const { effects } = this;
 		const beforeBranch = deferBranchStart(this);
@@ -2921,7 +2988,7 @@ var Chunk = class Chunk {
 		if (stateful) {
 			this.render(() => writeScope(branchId, { [PlaceholderBranch]: scopeWithId(state, placeholderBranchId) }));
 			this.writeHTML(state.mark("]", scopeId + " " + (PlaceholderBranch + branchId) + " " + placeholderBranchId));
-			end.writeEffect(branchId, PLACEHOLDER_DISMISS_REGISTER_ID);
+			dismissChunk(end, body).writeEffect(branchId, PLACEHOLDER_DISMISS_REGISTER_ID);
 		}
 		this.writeHTML(state.mark("!", reorderId));
 		this.deferredReorder = body;
@@ -2949,28 +3016,46 @@ var Chunk = class Chunk {
 		let html = "";
 		let effects = "";
 		let scripts = "";
-		let lastEffect = "";
+		let effectsEnd;
+		let heldEffects = this.heldEffects;
 		let deferredReady;
+		this.heldEffects = null;
+		if (this.serializeState.readyId && this.effects) followHeldEffects(this);
 		while (cur.next && !cur.async) {
 			cur.markCatchRange();
 			cur.queueDeferredReorder();
 			html += cur.html;
 			if (cur.serializeState.readyId) deferredReady = push(deferredReady, cur);
 			else {
-				effects = concatEffects(effects, cur.effects);
+				if (cur.effects) {
+					if (effectsEnd && effectsEnd.boundary !== cur.boundary) {
+						heldEffects = holdEffectsOn(heldEffects, effectsEnd, effects);
+						effects = "";
+					}
+					effectsEnd = cur;
+					effects = concatEffects(effects, cur.effects);
+				}
 				scripts = concatScripts(scripts, cur.scripts);
-				lastEffect = cur.lastEffect || lastEffect;
 			}
 			deferredReady = concat(deferredReady, cur.takeDeferredReady());
 			cur.consumed = true;
 			cur = cur.next;
 		}
 		cur.deferOwnReady();
+		if (effects) {
+			if (cur.serializeState.readyId) heldEffects = holdEffectsOn(heldEffects, effectsEnd, effects);
+			else if (effectsEnd.boundary !== cur.boundary) {
+				heldEffects = holdEffectsOn(heldEffects, effectsEnd, effects);
+				if (isWithin(cur.boundary, effectsEnd.boundary)) cur.lastEffect ||= effectsEnd.lastEffect;
+			} else {
+				cur.effects = concatEffects(effects, cur.effects);
+				cur.lastEffect ||= effectsEnd.lastEffect;
+			}
+		}
+		cur.heldEffects = heldEffects;
 		cur.deferredReady = concat(deferredReady, cur.deferredReady);
 		cur.html = html + cur.html;
-		cur.effects = concatEffects(effects, cur.effects);
 		cur.scripts = concatScripts(scripts, cur.scripts);
-		cur.lastEffect ||= lastEffect;
 		return cur;
 	}
 	render(content, val) {
@@ -3023,6 +3108,7 @@ var Chunk = class Chunk {
 		const { $global, runtimePrefix } = state;
 		let needsWalk = state.walkOnNextFlush;
 		if (needsWalk) state.walkOnNextFlush = false;
+		flushSerializer(boundary, state);
 		let readyResumeScripts = this.flushReadyScripts(boundary, void 0, this.async);
 		for (let channel; !boundary.aborted && (channel = state.serializer.pendingReadyChannel());) {
 			const resumes = state.serializer.stringifyScopes([], boundary, channel);
@@ -3031,8 +3117,9 @@ var Chunk = class Chunk {
 			readyResumeScripts = concatScripts(readyResumeScripts, state.writeReady(channel.readyId, concatSequence(depsMarker(deps), resumes)));
 		}
 		if (readyResumeScripts) needsWalk = true;
-		const effects = this.async ? "" : this.effects;
+		const effects = this.async ? "" : joinHeldEffects(this.takeHeldEffects(), this.effects);
 		let { html, scripts } = this;
+		if (html && state.hasReorderRuntime) html = state.mark("*", "") + html;
 		if (state.needsMainRuntime && !state.hasMainRuntime) {
 			state.hasMainRuntime = true;
 			scripts = concatScripts(scripts, WALKER_RUNTIME_CODE + "(\"" + $global.runtimeId + "\")(\"" + $global.renderId + "\")");
@@ -3051,10 +3138,11 @@ var Chunk = class Chunk {
 					state.hasReorderRuntime = true;
 					scripts = concatScripts(scripts, REORDER_RUNTIME_CODE + "(" + runtimePrefix + ")");
 				}
-				const { reorderId } = reorderedChunk;
+				const { reorderId, reorderStart } = reorderedChunk;
 				const readyReservations = [];
 				let reorderHTML = "";
 				let reorderEffects = "";
+				let effectsBoundary = reorderedChunk.boundary;
 				let reorderScripts = "";
 				let cur = reorderedChunk.boundary.aborted ? null : reorderedChunk;
 				reorderedChunk.reorderId = null;
@@ -3067,10 +3155,18 @@ var Chunk = class Chunk {
 					this.deferredReady = concat(this.deferredReady, cur.takeDeferredReady());
 					cur.consumed = true;
 					reorderHTML += cur.html;
+					if (this.async && cur.effects && cur.boundary !== effectsBoundary) {
+						if (reorderEffects) {
+							holdReorderEffects(this, effectsBoundary, reorderEffects);
+							reorderEffects = "";
+						}
+						effectsBoundary = cur.boundary;
+					}
 					reorderEffects = concatEffects(reorderEffects, cur.effects);
 					reorderScripts = concatScripts(reorderScripts, concatScripts(readyResumeScripts, cur.scripts));
 					if (cur.async) {
 						reorderHTML += state.mark("#", cur.reorderId = state.nextReorderId());
+						cur.reorderStart = reorderStart;
 						(cur.boundary.pendingReorders ||= /* @__PURE__ */ new Set()).add(cur);
 						cur.html = cur.effects = cur.scripts = cur.lastEffect = "";
 						cur.next = null;
@@ -3078,21 +3174,18 @@ var Chunk = class Chunk {
 					cur = next;
 				}
 				if (reorderEffects) {
-					if (this.async) {
-						this.effects = concatEffects(this.effects, reorderEffects);
-						this.lastEffect = "";
-					} else {
+					if (this.async) holdReorderEffects(this, effectsBoundary, reorderEffects);
+					else {
 						needsResumeArray = true;
 						reorderScripts = concatScripts(reorderScripts, "_.push(\"" + reorderEffects + "\")");
 					}
 				}
 				for (const reservation of readyReservations) reordered = concatScripts(reordered, reservation);
 				reordered = concatScripts(reordered, reorderScripts && runtimePrefix + ".j" + toAccess(reorderId) + "=_=>{" + reorderScripts + "}");
-				html += "<t hidden " + state.commentPrefix + "=" + reorderId + ">" + reorderHTML + "</t>";
+				html += "<t hidden " + state.commentPrefix + "=" + reorderId + ">" + reorderStart + reorderHTML + "</t>";
 			}
 			state.writeReorders = null;
 		}
-		flushSerializer(boundary, state);
 		if (state.resumes || needsResumeArray && !state.hasWrittenResume) scripts = concatScripts(scripts, state.resumeScript(state.resumes));
 		scripts = concatScripts(scripts, reordered);
 		if (needsWalk) scripts = concatScripts(scripts, state.walkScript());
@@ -3117,6 +3210,41 @@ function renderReorderPlaceholders(reorder, reorders) {
 	}
 	return reorders;
 }
+function dismissChunk(end, body) {
+	if (end.boundary !== body.boundary) while (end.next) end = end.next;
+	return end;
+}
+function followHeldEffects(chunk) {
+	const held = reduce(chunk.deferredReady, lastHeldOf, chunk);
+	if (held !== chunk) {
+		held.effects = concatEffects(held.effects, chunk.effects);
+		chunk.effects = "";
+	}
+}
+function lastHeldOf(held, cur) {
+	return cur.serializeState === held.serializeState && cur.boundary === held.boundary ? cur : held;
+}
+function holdEffectsOn(heldEffects, chunk, effects) {
+	chunk.effects = effects;
+	return push(heldEffects, chunk);
+}
+function isWithin(boundary, outer) {
+	while (boundary && boundary !== outer) boundary = boundary.parent;
+	return !!boundary;
+}
+function holdReorderEffects(head, boundary, effects) {
+	if (!head.serializeState.readyId) {
+		if (head.effects) head.heldEffects = holdEffectsOn(head.heldEffects, head.fork(head.boundary, null), head.effects);
+		head.effects = head.lastEffect = "";
+	}
+	head.heldEffects = holdEffectsOn(head.heldEffects, head.fork(boundary, null), effects);
+}
+function joinHeldEffects(heldEffects, effects) {
+	return concatEffects(reduce(heldEffects, joinUncaught, ""), effects);
+}
+function joinUncaught(joined, held) {
+	return held.boundary.aborted ? joined : concatEffects(joined, held.effects);
+}
 function flushSerializer(boundary, serializeState) {
 	const { state } = boundary;
 	const { serializer } = state;
@@ -3624,19 +3752,18 @@ function NOOP$1() {}
 //#endregion
 //#region src/html/assets.ts
 const kAssets = Symbol();
-const kBlockIndex = Symbol();
-const kDeferIndex = Symbol();
-let assetFlush;
-function withLoadAssets(renderer, assetId, triggers) {
+const kHead = Symbol();
+function withLoadAssets(renderer, flush, assetId, triggers) {
 	return Object.assign((input) => {
-		const g = $global();
-		addAsset(g, assetId, triggers);
-		_html(flush(g, ""));
+		writeLoadAsset(assetId, flush, triggers);
 		return writeWaitReady(assetId, renderer, input);
 	}, renderer);
 }
+function writeLoadAsset(assetId, flush, triggers) {
+	const g = $global();
+	writeAsset(g, addAsset(g, assetId, flush, triggers));
+}
 function withPageAssets(template, runtime, assetId, runtimeId) {
-	assetFlush = runtime;
 	return Object.assign((input) => {
 		const g = $global();
 		if (runtimeId) {
@@ -3645,57 +3772,78 @@ function withPageAssets(template, runtime, assetId, runtimeId) {
 				g.runtimeId = runtimeId;
 			} else if (g.runtimeId !== runtimeId) console.error(`A page entry compiled with runtimeId "${runtimeId}" is nested in a render using runtimeId "${g.runtimeId}", so its content cannot resume.`);
 		}
-		addAsset(g, assetId);
+		const asset = addAsset(g, assetId, runtime);
 		if (g.__flush__) {
-			_html(flush(g, ""));
+			writeAsset(g, asset);
 			return writeWaitReady(assetId, template, input);
 		}
-		g.__flush__ = flush;
+		g.__flush__ = flushPage;
 		return template(input);
 	}, template);
 }
 function _flush_head() {
 	const g = $global();
-	return g[kAssets] ? flush(g, "") : "";
+	if (!g[kAssets]) return "";
+	g[kHead] = true;
+	return takeAssets(g, catchableBoundary());
+}
+function flushPage(g, html) {
+	return takeAssets(g, null) + html;
+}
+function takeAssets(g, at) {
+	let block = "";
+	let defer = "";
+	for (const asset of g[kAssets]) if (asset.htmlAt === void 0) {
+		asset.htmlAt = at;
+		block += blockHTML(g, asset);
+		if (!asset.triggers) defer += deferHTML(g, asset);
+	}
+	return block + defer;
+}
+function writeAsset(g, asset) {
+	if (needsWrite(asset.htmlAt)) {
+		asset.htmlAt = void 0;
+		if (g[kHead] || g.__flush__ !== flushPage) {
+			const block = blockHTML(g, asset);
+			_html(block + (asset.triggers ? "" : deferHTML(g, asset)));
+			if (block && isInResumedBranch()) writeScript(`document.head.insertAdjacentHTML("beforeend",${_escape_script(JSON.stringify(block))})`);
+			asset.htmlAt = catchableBoundary();
+		}
+	}
+	if (asset.triggers && needsWrite(asset.scriptAt)) {
+		const defer = deferHTML(g, asset);
+		if (defer) writeScript(asset.script ||= triggerScript(asset.id, defer, asset.triggers));
+		asset.scriptAt = catchableBoundary();
+	}
 }
-function flush(g, html) {
-	let result = "";
-	const assets = g[kAssets];
-	const { length } = assets;
-	let bi = g[kBlockIndex];
-	let di = g[kDeferIndex];
-	for (; bi < length; bi++) result += assetFlush(g, "block", assets[bi].id);
-	for (; di < length; di++) {
-		const { id, triggers } = assets[di];
-		const deferHTML = assetFlush(g, "defer", id);
-		if (triggers) {
-			if (deferHTML) writeTriggerScript(id, deferHTML, triggers);
-		} else result += deferHTML;
-	}
-	g[kBlockIndex] = bi;
-	g[kDeferIndex] = di;
-	return result + html;
-}
-function addAsset(g, id, triggers) {
-	const assets = g[kAssets];
-	if (!assets) {
-		g[kAssets] = [{
-			id,
-			triggers
-		}];
-		g[kBlockIndex] = g[kDeferIndex] = 0;
-	} else if (!assets.find((a) => a.id === id)) assets.push({
+function needsWrite(at) {
+	return at === void 0 || at !== null && mayDrop(at);
+}
+function blockHTML(g, asset) {
+	return asset.block ??= asset.flush(g, "block", asset.id);
+}
+function deferHTML(g, asset) {
+	return asset.defer ??= asset.flush(g, "defer", asset.id);
+}
+function addAsset(g, id, flush, triggers) {
+	const assets = g[kAssets] ||= [];
+	let asset = assets.find((a) => a.id === id);
+	if (!asset) assets.push(asset = {
 		id,
-		triggers
+		flush,
+		triggers,
+		block: void 0,
+		defer: void 0,
+		script: void 0,
+		htmlAt: void 0,
+		scriptAt: void 0
 	});
-	else {
-		const existing = assets.find((a) => a.id === id);
-		if (JSON.stringify(existing.triggers) !== JSON.stringify(triggers)) console.error(`The lazy asset "${id}" is imported with different \`load\` triggers; an asset must use one consistent trigger.`);
-	}
+	else if (JSON.stringify(asset.triggers) !== JSON.stringify(triggers)) console.error(`The lazy asset "${id}" is imported with different \`load\` triggers; an asset must use one consistent trigger.`);
+	return asset;
 }
-function writeTriggerScript(id, html, triggers) {
+function triggerScript(id, html, triggers) {
 	const htmlStr = _escape_script(JSON.stringify(html));
-	const insert = `(d=new Range().createContextualFragment(h),d.querySelectorAll("script").forEach(s=>s.onerror=()=>console.error(${_escape_script(JSON.stringify(`The lazy module for "${id}" failed to load; its server-rendered content cannot become interactive.`))})),p.after(d))`;
+	const insert = `(d=new Range().createContextualFragment(h),d.querySelectorAll("script").forEach(s=>s.onerror=()=>console.error(${_escape_script(JSON.stringify(`The lazy module for "${id}" failed to load; its server-rendered content cannot become interactive.`))})),document.head.append(d))`;
 	const exprs = triggers.map((trigger) => {
 		const options = trigger.options && toObjectExpression(trigger.options);
 		switch (trigger.type) {
@@ -3705,7 +3853,7 @@ function writeTriggerScript(id, html, triggers) {
 			default: return `(e=>e?.addEventListener("${trigger.type.slice(3)}",l,{once:1}))(${querySelectorOrLoad(trigger.selector)})`;
 		}
 	});
-	writeScript(`((p,h,d,l=$=>{d||${insert}})=>${exprs.length > 1 ? `{${exprs.join(";")}}` : exprs[0]})(document.currentScript,${htmlStr})`);
+	return `((h,d,l=$=>{d||${insert}})=>${exprs.length > 1 ? `{${exprs.join(";")}}` : exprs[0]})(${htmlStr})`;
 }
 function querySelectorOrLoad(selector) {
 	return `document.querySelector(${JSON.stringify(selector)})||${`(console.warn(${JSON.stringify(`A lazy load trigger could not find an element matching "${selector}". The module was loaded immediately.`)}),l())`}`;
@@ -3729,6 +3877,7 @@ const K_TAGS_API_STATE = Symbol();
 const COMPAT_REGISTRY = /* @__PURE__ */ new WeakMap();
 const compat = {
 	$global,
+	writeLoadAsset,
 	fork: _await,
 	write: _html,
 	writeScript,
@@ -3752,7 +3901,10 @@ const compat = {
 	onFlush(fn) {
 		const { flushHTML } = Chunk.prototype;
 		Chunk.prototype.flushHTML = function(boundary) {
+			const { state } = boundary;
+			const reorders = swapReorders(state, null);
 			fn(this);
+			swapReorders(state, reorders);
 			return flushHTML.call(this, boundary);
 		};
 	},
@@ -3778,21 +3930,52 @@ const compat = {
 			return compatRegistered;
 		};
 	},
+	joinChunks(chunks) {
+		let joined;
+		for (const chunk of chunks) {
+			if (chunk.boundary.aborted) continue;
+			if (joined) joined.append(chunk);
+			else joined = chunk;
+		}
+		return joined;
+	},
+	appendChunks(chunks) {
+		const chunk = getChunk();
+		for (const part of chunks) {
+			chunk.append(part);
+			if (part.effects) chunk.lastEffect = part.lastEffect;
+		}
+	},
+	deferReorders(reorders) {
+		const chunk = getChunk();
+		for (let i = reorders.length; i--;) {
+			const carrier = chunk.fork(chunk.boundary, chunk.next);
+			carrier.deferredReorder = reorders[i];
+			chunk.next = carrier;
+		}
+	},
 	createChunk($global) {
 		const state = this.ensureState($global);
 		return new Chunk(new Boundary(state), null, null, state);
 	},
-	flushScript($global, chunk) {
-		chunk ||= this.createChunk($global);
+	flushScript(chunk, reorders) {
 		const { boundary } = chunk;
-		const scripts = boundary.flush() === 0 ? chunk.flushScript(boundary).scripts : "";
+		const { state } = boundary;
+		let html = "";
+		let scripts = "";
+		if (reorders) for (const reorder of reorders) state.reorder(reorder);
+		if (boundary.flush() === 0) ({html, scripts} = chunk.flushScript(boundary));
 		if (boundary.aborted) throw boundary.reason;
 		if (boundary.count) throw new Error("Cannot serialize promise across tags/class compat layer.");
-		return scripts;
+		return {
+			html,
+			scripts
+		};
 	},
-	render(renderer, willRerender, classAPIOut, component, input, completeChunks, registerChildScope) {
+	render(renderer, willRerender, classAPIOut, component, input, componentScopes, registerChildScope, parentChunk) {
+		if (parentChunk?.boundary.aborted) return;
 		const state = this.ensureState(classAPIOut.global);
-		const boundary = new Boundary(state);
+		const boundary = new Boundary(state, void 0, parentChunk?.boundary);
 		const context = getChunk()?.context ?? null;
 		let head = new Chunk(boundary, new Chunk(boundary, null, context, state), context, state);
 		let normalizedInput = input;
@@ -3800,7 +3983,8 @@ const compat = {
 			normalizedInput = {};
 			for (const key in input) normalizedInput[key === "renderBody" ? "content" : key] = input[key];
 		}
-		head.render(() => {
+		const componentScope = new Chunk(boundary, null, context, state);
+		componentScope.render(() => {
 			if (this.hasPendingClassFunctions(classAPIOut.global)) drainClassFunctions(classAPIOut.global, (hostId) => {
 				const fnScopeId = _scope_id();
 				const scope = writeScope(fnScopeId, {
@@ -3815,6 +3999,8 @@ const compat = {
 				writeScope(scopeId, { m5c: component.id });
 				_script(scopeId, SET_SCOPE_REGISTER_ID);
 			}
+		});
+		head.render(() => {
 			_set_scope_reason(willRerender ? CLIENT_ALL : 0);
 			try {
 				renderer(normalizedInput);
@@ -3828,16 +4014,28 @@ const compat = {
 			classAPIOut.onLast((next) => {
 				(boundary.onNext = () => {
 					if (boundary.aborted) {
-						asyncOut.error(boundary.reason);
 						boundary.onNext = NOOP;
+						if (parentChunk?.boundary.aborted) {
+							asyncOut.end();
+							next();
+						} else asyncOut.error(boundary.reason);
 					} else if (!boundary.count) {
 						boundary.onNext = NOOP;
+						const queued = swapReorders(state, null);
 						head = head.consume(boundary);
+						const reorders = swapReorders(state, queued);
+						if (reorders) asyncOut.writer.get("reorders").push(...reorders);
+						const heldEffects = head.takeHeldEffects();
+						if (heldEffects) {
+							head.effects = joinHeldEffects(heldEffects, head.effects);
+							head.lastEffect = "";
+						}
 						asyncOut.write(head.html);
 						asyncOut.script(head.scripts);
-						asyncOut.end();
 						head.html = head.scripts = "";
-						completeChunks.push(head);
+						asyncOut.writer.get("chunks").push(head);
+						asyncOut.end();
+						componentScopes.push(componentScope);
 						next();
 					}
 				})();
@@ -3875,9 +4073,15 @@ function drainClassFunctions($global, writeScope) {
 	for (const [id, fn, hostId] of pending) register(id, fn, scopeByHost[hostId] ||= writeScope(hostId));
 	pending.length = 0;
 }
+function swapReorders(state, reorders) {
+	const { writeReorders } = state;
+	state.writeReorders = reorders;
+	return writeReorders;
+}
 function NOOP() {}
 //#endregion
 exports.$global = $global;
+exports._assert_class_toggles = _assert_class_toggles;
 exports._assert_hoist = _assert_hoist;
 exports._attr = _attr;
 exports._attr_and = _attr_and;