marko 6.4.1 → 6.4.3

package/cheatsheet.md

@@ -130,7 +130,7 @@ Don't fetch while rendering: start data loads early, pass the promise through th
 - Repeated attr tags (many `<@tab ...>`) arrive as the singular prop `input.tab`: the first tab's attrs, made iterable, 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>`.
 - Text: `0` renders; `false`/`null`/`undefined`/`""`/`NaN` render nothing. `$!{html}` inserts raw HTML; it must be a balanced fragment (no truncated excerpts), or updating it after SSR removes the wrong nodes.
 - 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). `style=` keys are kebab-case CSS names (`{ "background-color": c }`); camelCase keys are written verbatim. `...input` spreads attrs onto a tag; `content=` passes body content as an attr.
+- `class=` / `style=` accept strings, objects, arrays: `class=["btn", { active }]`, `style={ color }` (single braces). A toggled class may not repeat another name in its `class=` value (`["a", { a: on }]` is an error). `style=` keys are kebab-case CSS names (`{ "background-color": c }`); camelCase keys are written verbatim. `...input` spreads attrs onto a tag; `content=` passes body content as an attr.
 - `<define/Panel|input|>` declares a local tag inline; `<${Toolbar.Undo}/>` renders a dynamic tag (falsy name → content only).
 - `<select value:=picked>`: every `<option>` needs `value=`; `multiple` binds an array.
 - `<id/x>` mints a collision-free id for label/input wiring (`<label for=x>`/`<input id=x>`); don't hardcode ids in reusable tags; `<id/x=input.id>` reuses a caller's.

package/dist/common/constants/accessor-prop.d.ts

@@ -4,6 +4,7 @@ export declare const AbortControllers = "A";
 export declare const AbortScopes = "B";
 export declare const AwaitCounter = "O";
 export declare const BranchAccessor = "C";
+export declare const BranchRenders = "BR";
 export declare const BranchScopes = "D";
 export declare const CatchContent = "E";
 export declare const ClosestBranch = "F";

package/dist/common/constants/accessor-prop.debug.d.ts

@@ -4,6 +4,7 @@ export declare const AbortControllers = "#AbortControllers";
 export declare const AbortScopes = "#AbortScopes";
 export declare const AwaitCounter = "#AwaitCounter";
 export declare const BranchAccessor = "#BranchAccessor";
+export declare const BranchRenders = "#BranchRenders";
 export declare const BranchScopes = "#BranchScopes";
 export declare const CatchContent = "#CatchContent";
 export declare const ClosestBranch = "#ClosestBranch";

package/dist/common/errors.d.ts

@@ -1,4 +1,5 @@
 export declare function assertValidAttrValue(name: string, value: unknown): void;
+export declare function _assert_class_toggles(classes: string, toggles: string[]): void;
 export declare function assertValidTextValue(value: unknown): void;
 export declare function assertValidLoopKey(key: unknown, seenKeys?: Set<unknown>): void;
 export declare function assertValidList(value: unknown): void;

package/dist/common/opt.d.ts

@@ -3,6 +3,7 @@ export type Opt<T> = OneMany<T> | undefined | null;
 export declare function toArray<T>(oneMany: OneMany<T>): [T, ...T[]];
 export declare function toArray<T>(opt: Opt<T>): T[];
 export declare function forEach<T>(opt: Opt<T>, cb: (item: T) => void): void;
+export declare function reduce<T, R>(opt: Opt<T>, cb: (acc: R, item: T) => R, acc: R): R;
 export declare function push<T>(opt: Opt<T>, item: T): OneMany<T>;
 export declare function push<T>(oneMany: OneMany<T>, item: T): T[];
 export declare function concat<T>(opt: Opt<T>, other: Opt<T>): Opt<T>;

package/dist/common/types.d.ts

@@ -21,6 +21,7 @@ export interface BranchScope extends Scope {
     [AccessorProp.PlaceholderBranch]: BranchScope | undefined | 0;
     [AccessorProp.TryBranch]: BranchScope | undefined;
     [AccessorProp.PendingRenders]: PendingRender[] | 0 | undefined;
+    [AccessorProp.BranchRenders]: PendingRender | undefined;
     [AccessorProp.DetachedAwait]: Renderer | 0 | undefined;
     [AccessorProp.PendingScopes]: Scope[] | void;
 }

package/dist/debug/dom/catch.feat.js

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-ClV4kVOO.js");
+const require_control_flow = require("../dom-C7F3yZTh.js");
 //#region src/dom/catch.feat.ts
 const handlePendingTry = (fn, scope, branch) => {
 	while (branch) {

package/dist/debug/dom/catch.feat.mjs

@@ -1,4 +1,4 @@
-import { Dn as Scope, En as Pending, Fn as PendingEffectScopes, In as PendingEffects, Ln as PendingRenders, Pn as ParentBranch, an as installCatch, b as runPendingEffects, cn as queueEffect, kn as ClosestBranch, sn as queueAsyncRender, y as renderCatch } from "../dom-LFrKxOk5.mjs";
+import { Hn as PendingEffectScopes, In as ClosestBranch, Mn as Pending, Nn as Scope, Un as PendingEffects, Vn as ParentBranch, Wn as PendingRenders, b as renderCatch, fn as queueAsyncRender, pn as queueEffect, un as installCatch, x as runPendingEffects } from "../dom-uEY0J_H9.mjs";
 //#region src/dom/catch.feat.ts
 const handlePendingTry = (fn, scope, branch) => {
 	while (branch) {

package/dist/debug/dom/controllable-input.feat.js

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-ClV4kVOO.js");
+const require_control_flow = require("../dom-C7F3yZTh.js");
 //#region src/dom/controllable-input.feat.ts
 require_control_flow.controllableScripts[0] = require_control_flow._attr_input_checked_script;
 require_control_flow.controllableScripts[1] = require_control_flow._attr_input_checkedValue_script;

package/dist/debug/dom/controllable-input.feat.mjs

@@ -1,4 +1,4 @@
-import { D as _attr_input_checkedValue_script, P as _attr_input_value_script, U as controllableScripts, k as _attr_input_checked_script } from "../dom-LFrKxOk5.mjs";
+import { A as _attr_input_checked_script, F as _attr_input_value_script, O as _attr_input_checkedValue_script, W as controllableScripts } from "../dom-uEY0J_H9.mjs";
 //#region src/dom/controllable-input.feat.ts
 controllableScripts[0] = _attr_input_checked_script;
 controllableScripts[1] = _attr_input_checkedValue_script;

package/dist/debug/dom/controllable-open.feat.js

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-ClV4kVOO.js");
+const require_control_flow = require("../dom-C7F3yZTh.js");
 //#region src/dom/controllable-open.feat.ts
 require_control_flow.controllableScripts[4] = require_control_flow._attr_details_or_dialog_open_script;
 //#endregion

package/dist/debug/dom/controllable-open.feat.mjs

@@ -1,4 +1,4 @@
-import { C as _attr_details_or_dialog_open_script, U as controllableScripts } from "../dom-LFrKxOk5.mjs";
+import { W as controllableScripts, w as _attr_details_or_dialog_open_script } from "../dom-uEY0J_H9.mjs";
 //#region src/dom/controllable-open.feat.ts
 controllableScripts[4] = _attr_details_or_dialog_open_script;
 //#endregion

package/dist/debug/dom/controllable-select.feat.js

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-ClV4kVOO.js");
+const require_control_flow = require("../dom-C7F3yZTh.js");
 //#region src/dom/controllable-select.feat.ts
 require_control_flow.controllableScripts[3] = require_control_flow._attr_select_value_script;
 //#endregion

package/dist/debug/dom/controllable-select.feat.mjs

@@ -1,4 +1,4 @@
-import { L as _attr_select_value_script, U as controllableScripts } from "../dom-LFrKxOk5.mjs";
+import { R as _attr_select_value_script, W as controllableScripts } from "../dom-uEY0J_H9.mjs";
 //#region src/dom/controllable-select.feat.ts
 controllableScripts[3] = _attr_select_value_script;
 //#endregion

package/dist/debug/dom/controllable-textarea.feat.js

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-ClV4kVOO.js");
+const require_control_flow = require("../dom-C7F3yZTh.js");
 //#region src/dom/controllable-textarea.feat.ts
 require_control_flow.controllableScripts[2] = require_control_flow._attr_input_value_script;
 //#endregion

package/dist/debug/dom/controllable-textarea.feat.mjs

@@ -1,4 +1,4 @@
-import { P as _attr_input_value_script, U as controllableScripts } from "../dom-LFrKxOk5.mjs";
+import { F as _attr_input_value_script, W as controllableScripts } from "../dom-uEY0J_H9.mjs";
 //#region src/dom/controllable-textarea.feat.ts
 controllableScripts[2] = _attr_input_value_script;
 //#endregion

package/dist/debug/dom/controllable.feat.js

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-ClV4kVOO.js");
+const require_control_flow = require("../dom-C7F3yZTh.js");
 require("./controllable-input.feat.js");
 require("./controllable-open.feat.js");
 require("./controllable-select.feat.js");

package/dist/debug/dom/controllable.feat.mjs

@@ -1,4 +1,4 @@
-import { B as _controllable_select, H as controllableRenders, R as _controllable_input, V as _controllable_textarea, z as _controllable_open } from "../dom-LFrKxOk5.mjs";
+import { B as _controllable_open, H as _controllable_textarea, U as controllableRenders, V as _controllable_select, z as _controllable_input } from "../dom-uEY0J_H9.mjs";
 import "./controllable-input.feat.mjs";
 import "./controllable-open.feat.mjs";
 import "./controllable-select.feat.mjs";

package/dist/debug/dom/dynamic-tag-script.feat.js

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-ClV4kVOO.js");
+const require_control_flow = require("../dom-C7F3yZTh.js");
 //#region src/dom/dynamic-tag-script.feat.ts
 require_control_flow._resumed[require_control_flow.DYNAMIC_TAG_SCRIPT_REGISTER_ID] = require_control_flow.withBranches(require_control_flow.dynamicTagScript);
 //#endregion

package/dist/debug/dom/dynamic-tag-script.feat.mjs

@@ -1,4 +1,4 @@
-import { en as DYNAMIC_TAG_SCRIPT_REGISTER_ID, g as dynamicTagScript, xn as withBranches, xt as _resumed } from "../dom-LFrKxOk5.mjs";
+import { Dn as withBranches, _ as dynamicTagScript, rn as DYNAMIC_TAG_SCRIPT_REGISTER_ID, wt as _resumed } from "../dom-uEY0J_H9.mjs";
 //#region src/dom/dynamic-tag-script.feat.ts
 _resumed[DYNAMIC_TAG_SCRIPT_REGISTER_ID] = withBranches(dynamicTagScript);
 //#endregion

package/dist/debug/dom/dynamic-tag-var.feat.js

@@ -1,5 +1,9 @@
 "use strict";
-const require_control_flow = require("../dom-ClV4kVOO.js");
+const require_control_flow = require("../dom-C7F3yZTh.js");
 //#region src/dom/dynamic-tag-var.feat.ts
-require_control_flow.installDynamicTagVar((branch) => branch[require_control_flow.TagVariable](() => require_control_flow._el_read(branch[require_control_flow.StartNode])));
+require_control_flow.installBranchRenders();
+require_control_flow.installDynamicTagVar((scope, branch, scopeKey, renderer) => {
+	branch[require_control_flow.BranchRenders] = require_control_flow.createBranchRenders(scope, scopeKey);
+	if (typeof renderer === "string") branch[require_control_flow.TagVariable](() => require_control_flow._el_read(branch[require_control_flow.StartNode]));
+});
 //#endregion

package/dist/debug/dom/dynamic-tag-var.feat.mjs

@@ -1,4 +1,8 @@
-import { Bn as TagVariable, Nt as _el_read, _ as installDynamicTagVar, zn as StartNode } from "../dom-LFrKxOk5.mjs";
+import { Fn as BranchRenders, It as _el_read, Kn as StartNode, cn as createBranchRenders, ln as installBranchRenders, qn as TagVariable, v as installDynamicTagVar } from "../dom-uEY0J_H9.mjs";
 //#region src/dom/dynamic-tag-var.feat.ts
-installDynamicTagVar((branch) => branch[TagVariable](() => _el_read(branch[StartNode])));
+installBranchRenders();
+installDynamicTagVar((scope, branch, scopeKey, renderer) => {
+	branch[BranchRenders] = createBranchRenders(scope, scopeKey);
+	if (typeof renderer === "string") branch[TagVariable](() => _el_read(branch[StartNode]));
+});
 //#endregion

package/dist/debug/dom/lazy.feat.js

@@ -1,4 +1,4 @@
 "use strict";
 //#region src/dom/lazy.feat.ts
-require("../dom-ClV4kVOO.js").withLazy();
+require("../dom-C7F3yZTh.js").withLazy();
 //#endregion

package/dist/debug/dom/lazy.feat.mjs

@@ -1,4 +1,4 @@
-import { Ot as withLazy } from "../dom-LFrKxOk5.mjs";
+import { jt as withLazy } from "../dom-uEY0J_H9.mjs";
 //#region src/dom/lazy.feat.ts
 withLazy();
 //#endregion

package/dist/debug/dom/placeholder.feat.js

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-ClV4kVOO.js");
+const require_control_flow = require("../dom-C7F3yZTh.js");
 //#region src/dom/placeholder.feat.ts
 require_control_flow._resumed[require_control_flow.PLACEHOLDER_DISMISS_REGISTER_ID] = (tryBranch) => {
 	if (tryBranch["#PlaceholderBranch"]) {

package/dist/debug/dom/placeholder.feat.mjs

@@ -1,4 +1,4 @@
-import { Rn as PlaceholderBranch, Xt as destroyBranch, tn as PLACEHOLDER_DISMISS_REGISTER_ID, xt as _resumed } from "../dom-LFrKxOk5.mjs";
+import { $t as destroyBranch, Gn as PlaceholderBranch, in as PLACEHOLDER_DISMISS_REGISTER_ID, wt as _resumed } from "../dom-uEY0J_H9.mjs";
 //#region src/dom/placeholder.feat.ts
 _resumed[PLACEHOLDER_DISMISS_REGISTER_ID] = (tryBranch) => {
 	if (tryBranch["#PlaceholderBranch"]) {

package/dist/debug/{dom-ClV4kVOO.js → dom-C7F3yZTh.js}

@@ -23,6 +23,7 @@ const AbortControllers = "#AbortControllers";
 const AbortScopes = "#AbortScopes";
 const AwaitCounter = "#AwaitCounter";
 const BranchAccessor = "#BranchAccessor";
+const BranchRenders = "#BranchRenders";
 const BranchScopes = "#BranchScopes";
 const CatchContent = "#CatchContent";
 const ClosestBranch = "#ClosestBranch";
@@ -201,6 +202,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}.`);
@@ -332,16 +343,19 @@ let rendering;
 let runId = 2;
 let pendingEffects = [];
 let pendingRenders = [];
-const scopeKeyOffset = 1e6;
+const ranRenders = /*@__PURE__*/ new WeakMap();
 function queueRender(scope, signal, signalKey, value, scopeKey = scope["#Id"]) {
 	let render;
 	if (signalKey >= 0 && (render = scope[signalKey])) {
 		render[Value] = value;
-		if (render["gen"] === runId || catchEnabled && render["pending"]) return;
+		if (render["gen"] === runId || catchEnabled && render["pending"]) {
+			if (!render["pending"] && ranRenders.get(render) === runId) console.error("A render was queued again after it ran in this update, so its latest value is dropped. This is a bug in Marko.");
+			return;
+		}
 		render["gen"] = runId;
 	} else {
 		render = {
-			["key"]: scopeKey * scopeKeyOffset + signalKey,
+			["key"]: scopeKey * 1e6 + signalKey,
 			[Scope]: scope,
 			[Signal]: signal,
 			[Value]: value,
@@ -351,7 +365,7 @@ function queueRender(scope, signal, signalKey, value, scopeKey = scope["#Id"]) {
 	}
 	queuePendingRender(render);
 }
-function queuePendingRender(render) {
+let queuePendingRender = (render) => {
 	let i = pendingRenders.push(render) - 1;
 	while (i) {
 		const parentIndex = i - 1 >> 1;
@@ -361,6 +375,34 @@ function queuePendingRender(render) {
 		i = parentIndex;
 	}
 	pendingRenders[i] = render;
+};
+function createBranchRenders(scope, scopeKey) {
+	return {
+		["key"]: scopeKey * 1e6 - 1,
+		[Scope]: scope,
+		[Signal]: runBranchRenders,
+		[Value]: [],
+		["gen"]: 0
+	};
+}
+function installBranchRenders() {
+	const queue = queuePendingRender;
+	queuePendingRender = (render) => {
+		const branchRenders = render[Scope][ClosestBranch]?.[BranchRenders];
+		if (branchRenders) {
+			if (branchRenders["gen"] !== runId && !branchRenders["pending"]) branchRenders[Value] = [];
+			branchRenders["gen"] = runId;
+			const renders = branchRenders[Value];
+			if (!renders.length) queuePendingRender(branchRenders);
+			const prev = pendingRenders;
+			pendingRenders = renders;
+			queue(render);
+			pendingRenders = prev;
+		} else queue(render);
+	};
+}
+function runBranchRenders(_scope, renders) {
+	runRenders(renders);
 }
 function queueEffect(scope, fn) {
 	pendingEffects.push(fn, scope);
@@ -412,26 +454,27 @@ function installCatch(catchEffects, wrapRender) {
 	runEffects = catchEffects;
 	runRender = wrapRender(runRender);
 }
-function runRenders() {
-	while (pendingRenders.length) {
-		const render = pendingRenders[0];
-		const item = pendingRenders.pop();
+function runRenders(renders = pendingRenders) {
+	while (renders.length) {
+		const render = renders[0];
+		const item = renders.pop();
 		if (render !== item) {
 			let i = 0;
-			const mid = pendingRenders.length >> 1;
-			const key = (pendingRenders[0] = item)["key"];
+			const mid = renders.length >> 1;
+			const key = (renders[0] = item)["key"];
 			while (i < mid) {
 				let bestChild = (i << 1) + 1;
 				const right = bestChild + 1;
-				if (right < pendingRenders.length && pendingRenders[right]["key"] - pendingRenders[bestChild]["key"] < 0) bestChild = right;
-				if (pendingRenders[bestChild]["key"] - key >= 0) break;
+				if (right < renders.length && renders[right]["key"] - renders[bestChild]["key"] < 0) bestChild = right;
+				if (renders[bestChild]["key"] - key >= 0) break;
 				else {
-					pendingRenders[i] = pendingRenders[bestChild];
+					renders[i] = renders[bestChild];
 					i = bestChild;
 				}
 			}
-			pendingRenders[i] = item;
+			renders[i] = item;
 		}
+		ranRenders.set(render, runId);
 		runRender(render);
 	}
 }
@@ -675,9 +718,9 @@ function _for_closure(ownerLoopNodeAccessor, fn) {
 	const scopeAccessor = BranchScopes$1 + ownerLoopNodeAccessor;
 	const ownerSignal = (ownerScope) => {
 		const scopes = toArray(ownerScope[scopeAccessor]);
-		if (scopes.length) queueRender(ownerScope, () => {
+		queueRender(ownerScope, () => {
 			for (const scope of scopes) if (scope["#Gen"] > 0 && scope["#Gen"] < runId) fn(scope);
-		}, -1, 0, scopes[0]["#Id"]);
+		}, -1);
 	};
 	ownerSignal._ = fn;
 	return ownerSignal;
@@ -687,8 +730,7 @@ function _for_selector(ownerLoopNodeAccessor, ownerValueAccessor, keyValueAccess
 	const mapAccessor = KeyedScopes + ownerLoopNodeAccessor;
 	const prevKeyProp = `${PreviousKey}${ownerValueAccessor}`;
 	const ownerSignal = (ownerScope) => {
-		const scopes = toArray(ownerScope[scopeAccessor]);
-		if (ownerScope["#Gen"] < runId && scopes.length) {
+		if (ownerScope["#Gen"] < runId) {
 			const nextKey = ownerScope[ownerValueAccessor];
 			queueRender(ownerScope, () => {
 				const map = keyedScopes(ownerScope, scopeAccessor, mapAccessor, keyValueAccessor);
@@ -701,7 +743,7 @@ function _for_selector(ownerLoopNodeAccessor, ownerValueAccessor, keyValueAccess
 					}
 				} else for (const scope of toArray(ownerScope[scopeAccessor])) runLiveBranch(scope, fn);
 				if (map) map[prevKeyProp] = nextKey;
-			}, -1, 0, scopes[0]["#Id"]);
+			}, -1);
 		}
 	};
 	ownerSignal._ = fn;
@@ -1232,6 +1274,14 @@ function _attr_class_items(element, items) {
 function _attr_class_item(element, name, value) {
 	element.classList.toggle(name, !!value);
 }
+function _attr_class_names(element, names, value) {
+	let start = 0;
+	let end;
+	do {
+		end = names.indexOf(" ", start);
+		element.classList.toggle(names.slice(start, end >>> 0), !!value);
+	} while (start = end + 1);
+}
 function _attr_style(element, value) {
 	setAttribute(element, "style", toDelimitedString(value, ";", stringifyStyleObject) || void 0);
 }
@@ -1975,6 +2025,7 @@ function patchDynamicTag(fn) {
 	_dynamic_tag = fn(_dynamic_tag);
 }
 let _dynamic_tag = /*@__PURE__*/ withBranches((nodeAccessor, getContent, getTagVar, inputIsArgs) => {
+	const scopeOffsetAccessor = getTagVar && getDebugKey(+nodeAccessor.slice(nodeAccessor.lastIndexOf("/") + 1) + 1, "#scopeOffset");
 	const childScopeAccessor = BranchScopes$1 + nodeAccessor;
 	const rendererAccessor = ConditionalRenderer + nodeAccessor;
 	return (scope, newRenderer, getInput) => {
@@ -1985,7 +2036,7 @@ let _dynamic_tag = /*@__PURE__*/ withBranches((nodeAccessor, getContent, getTagV
 			if (getTagVar) {
 				if (scope[childScopeAccessor]) {
 					scope[childScopeAccessor][TagVariable] = (value) => getTagVar()(scope, value);
-					if (typeof normalizedRenderer === "string") bindNativeTagVar?.(scope[childScopeAccessor]);
+					bindTagVar(scope, scope[childScopeAccessor], scope[scopeOffsetAccessor], normalizedRenderer);
 				} else getTagVar()(scope, void 0);
 			}
 			if (typeof renderer === "string") {
@@ -1994,7 +2045,10 @@ let _dynamic_tag = /*@__PURE__*/ withBranches((nodeAccessor, getContent, getTagV
 					setConditionalRenderer(scope[childScopeAccessor], `#${renderer.toLowerCase()}/0`, content, createAndSetupBranch);
 					if (content["accessor"]) subscribeToScopeSet(content[Owner], content[Accessor], scope[childScopeAccessor][`BranchScopes:#${renderer.toLowerCase()}/0`]);
 				}
-			} else if (renderer?.["accessor"]) subscribeToScopeSet(renderer[Owner], renderer[Accessor], scope[childScopeAccessor]);
+			} else if (renderer) {
+				setupBranch(renderer, scope[childScopeAccessor]);
+				if (renderer["accessor"]) subscribeToScopeSet(renderer[Owner], renderer[Accessor], scope[childScopeAccessor]);
+			}
 		}
 		if (normalizedRenderer) {
 			const childScope = scope[childScopeAccessor];
@@ -2030,9 +2084,9 @@ const _dynamic_tag_content = /*@__PURE__*/ withBranches((nodeAccessor) => {
 		renderer?.[LocalClosures]?.(scope[childScopeAccessor]);
 	};
 });
-let bindNativeTagVar;
+let bindTagVar;
 function installDynamicTagVar(bind) {
-	bindNativeTagVar = bind;
+	bindTagVar = bind;
 }
 function dynamicTagScript(branch) {
 	_attrs_script(branch, `#${branch[Renderer].toLowerCase()}/0`);
@@ -2185,7 +2239,6 @@ function createBranchWithTagNameOrRenderer($global, tagNameOrRenderer, parentSco
 	if (typeof tagNameOrRenderer === "string") assertValidTagName(tagNameOrRenderer);
 	const branch = createBranch($global, tagNameOrRenderer, parentScope, parentNode);
 	if (typeof tagNameOrRenderer === "string") branch[`#${tagNameOrRenderer.toLowerCase()}/0`] = branch[StartNode] = branch[EndNode] = document.createElementNS(tagNameOrRenderer === "svg" ? "http://www.w3.org/2000/svg" : tagNameOrRenderer === "math" ? "http://www.w3.org/1998/Math/MathML" : parentNode.namespaceURI, tagNameOrRenderer);
-	else setupBranch(tagNameOrRenderer, branch);
 	return branch;
 }
 function bySecondArg(_item, index) {
@@ -2213,6 +2266,12 @@ Object.defineProperty(exports, "AwaitCounter", {
 		return AwaitCounter;
 	}
 });
+Object.defineProperty(exports, "BranchRenders", {
+	enumerable: true,
+	get: function() {
+		return BranchRenders;
+	}
+});
 Object.defineProperty(exports, "Clone", {
 	enumerable: true,
 	get: function() {
@@ -2333,6 +2392,12 @@ Object.defineProperty(exports, "TagVariable", {
 		return TagVariable;
 	}
 });
+Object.defineProperty(exports, "_assert_class_toggles", {
+	enumerable: true,
+	get: function() {
+		return _assert_class_toggles;
+	}
+});
 Object.defineProperty(exports, "_assert_hoist", {
 	enumerable: true,
 	get: function() {
@@ -2369,6 +2434,12 @@ Object.defineProperty(exports, "_attr_class_items", {
 		return _attr_class_items;
 	}
 });
+Object.defineProperty(exports, "_attr_class_names", {
+	enumerable: true,
+	get: function() {
+		return _attr_class_names;
+	}
+});
 Object.defineProperty(exports, "_attr_content", {
 	enumerable: true,
 	get: function() {
@@ -2867,6 +2938,12 @@ Object.defineProperty(exports, "addAwaitCounter", {
 		return addAwaitCounter;
 	}
 });
+Object.defineProperty(exports, "bindTagVar", {
+	enumerable: true,
+	get: function() {
+		return bindTagVar;
+	}
+});
 Object.defineProperty(exports, "controllableRenders", {
 	enumerable: true,
 	get: function() {
@@ -2891,6 +2968,12 @@ Object.defineProperty(exports, "createBranch", {
 		return createBranch;
 	}
 });
+Object.defineProperty(exports, "createBranchRenders", {
+	enumerable: true,
+	get: function() {
+		return createBranchRenders;
+	}
+});
 Object.defineProperty(exports, "destroyBranch", {
 	enumerable: true,
 	get: function() {
@@ -2957,6 +3040,12 @@ Object.defineProperty(exports, "insertChildNodes", {
 		return insertChildNodes;
 	}
 });
+Object.defineProperty(exports, "installBranchRenders", {
+	enumerable: true,
+	get: function() {
+		return installBranchRenders;
+	}
+});
 Object.defineProperty(exports, "installCatch", {
 	enumerable: true,
 	get: function() {
@@ -3053,6 +3142,12 @@ Object.defineProperty(exports, "runPendingEffects", {
 		return runPendingEffects;
 	}
 });
+Object.defineProperty(exports, "setParentBranch", {
+	enumerable: true,
+	get: function() {
+		return setParentBranch;
+	}
+});
 Object.defineProperty(exports, "setupBranch", {
 	enumerable: true,
 	get: function() {