marko 6.3.34 → 6.3.35

package/cheatsheet.md

@@ -13,8 +13,8 @@ Marko 6 = HTML superset, not JSX and not Marko 4/5 syntax. `.marko` files are co
    - remove: `items = items.toSpliced(i, 1)`
    - update: `items = items.toSpliced(i, 1, { ...item, done: true })`
    - object: `user = { ...user, name }`
-6. Events: method shorthand `onClick() { ... }` or `onClick=fn`. Handlers receive `(event, element)`; delegation means the element is the second parameter, not `event.currentTarget`: `onSubmit(e) { e.preventDefault(); save() }`, `onClick(e, el) { el.focus() }`. Don't sync input values through `onInput`/`onChange`; that's what the change handlers below are for.
-7. 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.)
+6. Events: method shorthand `onClick() { ... }` or `onClick=fn`. Handlers receive `(event, element)`; delegation means the element is the second parameter, not `event.currentTarget`: `onSubmit(e) { e.preventDefault(); save() }`, `onClick(e, el) { el.focus() }`. Don't sync input values through `onInput`/`onChange`; that's what the change handlers below are for. Prefix with `async` to `await` in the body: `async onClick() { await save() }`.
+7. Native inputs are uncontrolled by default: `value=` sets the default value — later writes update what `form.reset()` restores, never a dirty field's display. 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.)
 8. Transform in the handler when needed; number inputs give strings: `<input type="number" value=n valueChange(v) { n = +v }>`, or `value:parseFloat:=n`.
 9. Radio/checkbox groups: `checkedValue:=picked` on each input (shared var, distinct `value=`); the match is checked; array var for multi-checkbox. Dropdown: `<select value:=picked>`.
 10. Module-level values and helpers need `static`: `static const LIMIT = 10`, `static function fmt(n) {…}`. Without it `function fmt(n) {` parses as a tag: ``Unable to find entry point for custom tag `<function>` ``, an error that never says `static`. Prefer it to `<const>` for anything that never changes: `<const/LIMIT=10>` emits a per-instance signal plus a `$setup` call.

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

@@ -8,6 +8,7 @@ export declare const ControlledType = "F";
 export declare const ControlledValue = "G";
 export declare const DynamicHTMLLastChild = "H";
 export declare const EventAttributes = "I";
+export declare const IdFallback = "J";
 export declare const KeyedScopes = "O";
 export declare const Lifecycle = "K";
 export declare const Promise = "L";

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

@@ -8,6 +8,7 @@ export declare const ControlledType = "ControlledType:";
 export declare const ControlledValue = "ControlledValue:";
 export declare const DynamicHTMLLastChild = "DynamicHTMLLastChild:";
 export declare const EventAttributes = "EventAttributes:";
+export declare const IdFallback = "IdFallback:";
 export declare const KeyedScopes = "KeyedScopes:";
 export declare const Lifecycle = "Lifecycle:";
 export declare const Promise = "Promise:";

package/dist/common/errors.d.ts

@@ -9,6 +9,7 @@ export declare function _el_read_error(): void;
 export declare function _hoist_read_error(): void;
 export declare function _assert_hoist(value: unknown): void;
 export declare function assertExclusiveAttrs(attrs: Record<string, unknown> | undefined, onError?: typeof throwErr): void;
+export declare function assertNoValueBindingOnCheckable(type: unknown, valueChange: unknown): void;
 export declare function assertHandlerIsFunction(name: string, value: unknown): void;
 export declare function assertValidTagName(tagName: string): void;
 declare function throwErr(msg: string): void;

package/dist/common/types.d.ts

@@ -73,6 +73,16 @@ export interface MountedTemplate {
 }
 export type RenderedTemplate = PromiseLike<string> & AsyncIterable<string> & {
     toReadable(): ReadableStream<Uint8Array<ArrayBufferLike>>;
+    pipe(stream: {
+        write(chunk: string): unknown;
+        end(): unknown;
+        flush?(): void;
+        destroy?(): void;
+        emit?(name: PropertyKey, ...args: unknown[]): unknown;
+    }): void;
+    toString(): string;
+    catch<T = never>(onrejected?: ((reason: unknown) => T | PromiseLike<T>) | undefined | null): Promise<string | T>;
+    finally(onfinally?: (() => void) | undefined | null): Promise<string>;
 };
 type ControlledType = ControlledType.Value;
 export { ControlledType };

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

@@ -1,5 +1,5 @@
 "use strict";
-const require_control_flow = require("../dom-Bj58jt8y.js");
+const require_control_flow = require("../dom-Bt4OoZ-j.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 { Cn as PendingRenders, Jt as caughtError, Sn as PendingEffects, Xt as placeholderShown, Yt as installCatch, gn as ClosestBranch, h as renderCatch, mn as Scope, pn as Pending, xn as ParentBranch } from "../dom-klf8Ec_o.mjs";
+import { Cn as PendingRenders, Jt as caughtError, Sn as PendingEffects, Xt as placeholderShown, Yt as installCatch, gn as ClosestBranch, h as renderCatch, mn as Scope, pn as Pending, xn as ParentBranch } from "../dom-B57LrRnX.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-Bj58jt8y.js");
+const require_control_flow = require("../dom-Bt4OoZ-j.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 { R as controllableScripts, S as _attr_input_checkedValue_script, k as _attr_input_value_script, w as _attr_input_checked_script } from "../dom-klf8Ec_o.mjs";
+import { R as controllableScripts, S as _attr_input_checkedValue_script, k as _attr_input_value_script, w as _attr_input_checked_script } from "../dom-B57LrRnX.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-Bj58jt8y.js");
+const require_control_flow = require("../dom-Bt4OoZ-j.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 { R as controllableScripts, v as _attr_details_or_dialog_open_script } from "../dom-klf8Ec_o.mjs";
+import { R as controllableScripts, v as _attr_details_or_dialog_open_script } from "../dom-B57LrRnX.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-Bj58jt8y.js");
+const require_control_flow = require("../dom-Bt4OoZ-j.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 { M as _attr_select_value_script, R as controllableScripts } from "../dom-klf8Ec_o.mjs";
+import { M as _attr_select_value_script, R as controllableScripts } from "../dom-B57LrRnX.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-Bj58jt8y.js");
+const require_control_flow = require("../dom-Bt4OoZ-j.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 { R as controllableScripts, k as _attr_input_value_script } from "../dom-klf8Ec_o.mjs";
+import { R as controllableScripts, k as _attr_input_value_script } from "../dom-B57LrRnX.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-Bj58jt8y.js");
+const require_control_flow = require("../dom-Bt4OoZ-j.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 { F as _controllable_select, I as _controllable_textarea, L as controllableRenders, N as _controllable_input, P as _controllable_open } from "../dom-klf8Ec_o.mjs";
+import { F as _controllable_select, I as _controllable_textarea, L as controllableRenders, N as _controllable_input, P as _controllable_open } from "../dom-B57LrRnX.mjs";
 import "./controllable-input.feat.mjs";
 import "./controllable-open.feat.mjs";
 import "./controllable-select.feat.mjs";

package/dist/debug/{dom-klf8Ec_o.mjs → dom-B57LrRnX.mjs}

@@ -253,10 +253,16 @@ function assertExclusiveAttrs(attrs, onError = throwErr) {
 			(exclusiveAttrs ||= []).push("checkedValueChange");
 			if ("checked" in attrs) exclusiveAttrs.push("checked");
 		}
-		if (attrs.valueChange) (exclusiveAttrs ||= []).push("valueChange");
+		if (attrs.valueChange) {
+			(exclusiveAttrs ||= []).push("valueChange");
+			if ("checked" in attrs && !exclusiveAttrs.includes("checked")) exclusiveAttrs.push("checked");
+		}
 		if (exclusiveAttrs && exclusiveAttrs.length > 1) onError(`The attributes ${joinWithAnd(exclusiveAttrs)} are mutually exclusive.`);
 	}
 }
+function assertNoValueBindingOnCheckable(type, valueChange) {
+	if (valueChange && /^(?:button|checkbox|hidden|image|radio|reset|submit)$/i.test(type)) console.error(`\`valueChange\` cannot be used on a \`type="${type}"\` \`<input>\` — user interaction can never change its \`value\`.` + (/^[cr]/i.test(type) ? " Bind `checked` or `checkedValue` instead." : ""));
+}
 function assertHandlerIsFunction(name, value) {
 	if (value && typeof value !== "function") throw new Error(`The \`${name}\` handler must be a function or a falsey value (\`null\`, \`undefined\`, \`false\`, \`0\`, …), but received type "${typeof value}".`);
 }
@@ -741,10 +747,16 @@ const _var_change = (scope, value, name = "This") => {
 	scope[TagVariableChange](value);
 };
 const tagIdsByGlobal = /* @__PURE__ */ new WeakMap();
-function _id({ [Global]: $global }) {
-	const id = tagIdsByGlobal.get($global) || 0;
-	tagIdsByGlobal.set($global, id + 1);
-	return "c" + $global.runtimeId + $global.renderId + id.toString(36);
+function _id(scope, accessor) {
+	let id = accessor !== void 0 && scope[accessor];
+	if (!id) {
+		const $global = scope[Global];
+		const n = tagIdsByGlobal.get($global) || 0;
+		tagIdsByGlobal.set($global, n + 1);
+		id = "c" + $global.runtimeId + $global.renderId + n.toString(36);
+		if (accessor !== void 0) scope[accessor] = id;
+	}
+	return id;
 }
 function _script(id, fn) {
 	_resume(id, fn);
@@ -756,19 +768,19 @@ function _el_read(value) {
 	if (rendering) _el_read_error();
 	return value;
 }
-function* traverse(scope, path, i = path.length - 1) {
+function* traverse(scope, path, args, i = path.length - 1) {
 	if (rendering) _hoist_read_error();
-	if (scope) if (Symbol.iterator in scope) for (const childScope of scope.values()) yield* traverse(childScope, path, i);
+	if (scope) if (Symbol.iterator in scope) for (const childScope of scope.values()) yield* traverse(childScope, path, args, i);
 	else {
 		const item = scope[path[i]];
-		if (i) yield* traverse(item, path, i - 1);
-		else yield typeof item === "function" ? item() : item;
+		if (i) yield* traverse(item, path, args, i - 1);
+		else yield typeof item === "function" ? item(...args) : item;
 	}
 }
 function _hoist(...path) {
 	return (scope) => {
-		const fn = () => traverse(scope, path).next().value;
-		fn[Symbol.iterator] = () => traverse(scope, path);
+		const fn = (...args) => traverse(scope, path, args).next().value;
+		fn[Symbol.iterator] = () => traverse(scope, path, []);
 		return fn;
 	};
 }
@@ -1235,7 +1247,7 @@ function attrsInternal(scope, nodeAccessor, nextAttrs, controllable) {
 }
 function _attr_content(scope, nodeAccessor, value) {
 	const content = normalizeClientRender(value);
-	if (scope["ConditionalRenderer:" + nodeAccessor] !== (scope["ConditionalRenderer:" + nodeAccessor] = content?.["id"])) {
+	if (scope["ConditionalRenderer:" + nodeAccessor] !== (scope["ConditionalRenderer:" + nodeAccessor] = rendererKey(content))) {
 		setConditionalRenderer(scope, nodeAccessor, content, createAndSetupBranch);
 		if (content?.["accessor"]) subscribeToScopeSet(content[Owner], content[Accessor], scope[BranchScopes$1 + nodeAccessor]);
 	}
@@ -1415,17 +1427,19 @@ function _attr_input_value(scope, nodeAccessor, value, valueChange, setDefault =
 	const el = scope[nodeAccessor];
 	const normalizedValue = normalizeAttrValue(value) || "";
 	assertHandlerIsFunction("valueChange", valueChange);
+	assertNoValueBindingOnCheckable(el.type, valueChange);
 	scope[ControlledHandler + nodeAccessor] = valueChange;
 	scope[ControlledValue + nodeAccessor] = normalizedValue;
 	scope[ControlledType + nodeAccessor] = valueChange ? 2 : 5;
 	if (valueChange && scope["#Gen"] < runId) setInputValue(el, normalizedValue);
-	else setDefault(scope, nodeAccessor, normalizedValue);
+	else setDefault(scope, nodeAccessor, value);
 }
 function _attr_input_value_attribute_default(scope, nodeAccessor, value) {
 	_attr(scope[nodeAccessor], "value", value);
 }
 function _attr_input_value_script(scope, nodeAccessor) {
 	const el = scope[nodeAccessor];
+	assertNoValueBindingOnCheckable(el.type, scope[ControlledHandler + nodeAccessor]);
 	if (isResuming) scope[ControlledValue + nodeAccessor] = el.defaultValue;
 	syncControllableFormInput(el, hasValueChanged, (ev) => {
 		const valueChange = scope[ControlledHandler + nodeAccessor];
@@ -1833,6 +1847,9 @@ const _show = /*@__PURE__*/ withBranches((nodeAccessor, startNodeAccessor, endNo
 		}
 	};
 });
+function rendererKey(renderer) {
+	return renderer?.["owner"] ? renderer["id"] + " " + renderer[Owner]["#Id"] : renderer?.["id"] || renderer;
+}
 function patchDynamicTag(fn) {
 	_dynamic_tag = fn(_dynamic_tag);
 }
@@ -1841,9 +1858,10 @@ let _dynamic_tag = /*@__PURE__*/ withBranches((nodeAccessor, getContent, getTagV
 	const rendererAccessor = ConditionalRenderer + nodeAccessor;
 	return (scope, newRenderer, getInput) => {
 		const normalizedRenderer = normalizeDynamicRenderer(newRenderer);
-		if (scope[rendererAccessor] !== (scope[rendererAccessor] = normalizedRenderer?.["id"] || normalizedRenderer) || getContent && !(normalizedRenderer || scope[childScopeAccessor])) {
+		if (scope[rendererAccessor] !== (scope[rendererAccessor] = rendererKey(normalizedRenderer)) || getContent && !(normalizedRenderer || scope[childScopeAccessor])) {
 			setConditionalRenderer(scope, nodeAccessor, normalizedRenderer || (getContent ? getContent(scope) : void 0), createBranchWithTagNameOrRenderer);
-			if (getTagVar) scope[childScopeAccessor][TagVariable] = (value) => getTagVar()(scope, value);
+			if (getTagVar) if (scope[childScopeAccessor]) scope[childScopeAccessor][TagVariable] = (value) => getTagVar()(scope, value);
+			else getTagVar()(scope, void 0);
 			if (typeof normalizedRenderer === "string") {
 				if (getContent) {
 					const content = getContent(scope);
@@ -1877,7 +1895,7 @@ const _dynamic_tag_content = /*@__PURE__*/ withBranches((nodeAccessor) => {
 	const childScopeAccessor = BranchScopes$1 + nodeAccessor;
 	const rendererAccessor = ConditionalRenderer + nodeAccessor;
 	return (scope, renderer) => {
-		if (scope[rendererAccessor] !== (scope[rendererAccessor] = renderer?.["id"] || renderer)) {
+		if (scope[rendererAccessor] !== (scope[rendererAccessor] = rendererKey(renderer))) {
 			setConditionalRenderer(scope, nodeAccessor, renderer, createAndSetupBranch);
 			if (renderer?.["accessor"]) subscribeToScopeSet(renderer[Owner], renderer[Accessor], scope[childScopeAccessor]);
 		}

package/dist/debug/{dom-Bj58jt8y.js → dom-Bt4OoZ-j.js}

@@ -254,10 +254,16 @@ function assertExclusiveAttrs(attrs, onError = throwErr) {
 			(exclusiveAttrs ||= []).push("checkedValueChange");
 			if ("checked" in attrs) exclusiveAttrs.push("checked");
 		}
-		if (attrs.valueChange) (exclusiveAttrs ||= []).push("valueChange");
+		if (attrs.valueChange) {
+			(exclusiveAttrs ||= []).push("valueChange");
+			if ("checked" in attrs && !exclusiveAttrs.includes("checked")) exclusiveAttrs.push("checked");
+		}
 		if (exclusiveAttrs && exclusiveAttrs.length > 1) onError(`The attributes ${joinWithAnd(exclusiveAttrs)} are mutually exclusive.`);
 	}
 }
+function assertNoValueBindingOnCheckable(type, valueChange) {
+	if (valueChange && /^(?:button|checkbox|hidden|image|radio|reset|submit)$/i.test(type)) console.error(`\`valueChange\` cannot be used on a \`type="${type}"\` \`<input>\` — user interaction can never change its \`value\`.` + (/^[cr]/i.test(type) ? " Bind `checked` or `checkedValue` instead." : ""));
+}
 function assertHandlerIsFunction(name, value) {
 	if (value && typeof value !== "function") throw new Error(`The \`${name}\` handler must be a function or a falsey value (\`null\`, \`undefined\`, \`false\`, \`0\`, …), but received type "${typeof value}".`);
 }
@@ -742,10 +748,16 @@ const _var_change = (scope, value, name = "This") => {
 	scope[TagVariableChange](value);
 };
 const tagIdsByGlobal = /* @__PURE__ */ new WeakMap();
-function _id({ [Global]: $global }) {
-	const id = tagIdsByGlobal.get($global) || 0;
-	tagIdsByGlobal.set($global, id + 1);
-	return "c" + $global.runtimeId + $global.renderId + id.toString(36);
+function _id(scope, accessor) {
+	let id = accessor !== void 0 && scope[accessor];
+	if (!id) {
+		const $global = scope[Global];
+		const n = tagIdsByGlobal.get($global) || 0;
+		tagIdsByGlobal.set($global, n + 1);
+		id = "c" + $global.runtimeId + $global.renderId + n.toString(36);
+		if (accessor !== void 0) scope[accessor] = id;
+	}
+	return id;
 }
 function _script(id, fn) {
 	_resume(id, fn);
@@ -757,19 +769,19 @@ function _el_read(value) {
 	if (rendering) _el_read_error();
 	return value;
 }
-function* traverse(scope, path, i = path.length - 1) {
+function* traverse(scope, path, args, i = path.length - 1) {
 	if (rendering) _hoist_read_error();
-	if (scope) if (Symbol.iterator in scope) for (const childScope of scope.values()) yield* traverse(childScope, path, i);
+	if (scope) if (Symbol.iterator in scope) for (const childScope of scope.values()) yield* traverse(childScope, path, args, i);
 	else {
 		const item = scope[path[i]];
-		if (i) yield* traverse(item, path, i - 1);
-		else yield typeof item === "function" ? item() : item;
+		if (i) yield* traverse(item, path, args, i - 1);
+		else yield typeof item === "function" ? item(...args) : item;
 	}
 }
 function _hoist(...path) {
 	return (scope) => {
-		const fn = () => traverse(scope, path).next().value;
-		fn[Symbol.iterator] = () => traverse(scope, path);
+		const fn = (...args) => traverse(scope, path, args).next().value;
+		fn[Symbol.iterator] = () => traverse(scope, path, []);
 		return fn;
 	};
 }
@@ -1236,7 +1248,7 @@ function attrsInternal(scope, nodeAccessor, nextAttrs, controllable) {
 }
 function _attr_content(scope, nodeAccessor, value) {
 	const content = normalizeClientRender(value);
-	if (scope["ConditionalRenderer:" + nodeAccessor] !== (scope["ConditionalRenderer:" + nodeAccessor] = content?.["id"])) {
+	if (scope["ConditionalRenderer:" + nodeAccessor] !== (scope["ConditionalRenderer:" + nodeAccessor] = rendererKey(content))) {
 		setConditionalRenderer(scope, nodeAccessor, content, createAndSetupBranch);
 		if (content?.["accessor"]) subscribeToScopeSet(content[Owner], content[Accessor], scope[BranchScopes$1 + nodeAccessor]);
 	}
@@ -1416,17 +1428,19 @@ function _attr_input_value(scope, nodeAccessor, value, valueChange, setDefault =
 	const el = scope[nodeAccessor];
 	const normalizedValue = normalizeAttrValue(value) || "";
 	assertHandlerIsFunction("valueChange", valueChange);
+	assertNoValueBindingOnCheckable(el.type, valueChange);
 	scope[ControlledHandler + nodeAccessor] = valueChange;
 	scope[ControlledValue + nodeAccessor] = normalizedValue;
 	scope[ControlledType + nodeAccessor] = valueChange ? 2 : 5;
 	if (valueChange && scope["#Gen"] < runId) setInputValue(el, normalizedValue);
-	else setDefault(scope, nodeAccessor, normalizedValue);
+	else setDefault(scope, nodeAccessor, value);
 }
 function _attr_input_value_attribute_default(scope, nodeAccessor, value) {
 	_attr(scope[nodeAccessor], "value", value);
 }
 function _attr_input_value_script(scope, nodeAccessor) {
 	const el = scope[nodeAccessor];
+	assertNoValueBindingOnCheckable(el.type, scope[ControlledHandler + nodeAccessor]);
 	if (isResuming) scope[ControlledValue + nodeAccessor] = el.defaultValue;
 	syncControllableFormInput(el, hasValueChanged, (ev) => {
 		const valueChange = scope[ControlledHandler + nodeAccessor];
@@ -1834,6 +1848,9 @@ const _show = /*@__PURE__*/ withBranches((nodeAccessor, startNodeAccessor, endNo
 		}
 	};
 });
+function rendererKey(renderer) {
+	return renderer?.["owner"] ? renderer["id"] + " " + renderer[Owner]["#Id"] : renderer?.["id"] || renderer;
+}
 function patchDynamicTag(fn) {
 	_dynamic_tag = fn(_dynamic_tag);
 }
@@ -1842,9 +1859,10 @@ let _dynamic_tag = /*@__PURE__*/ withBranches((nodeAccessor, getContent, getTagV
 	const rendererAccessor = ConditionalRenderer + nodeAccessor;
 	return (scope, newRenderer, getInput) => {
 		const normalizedRenderer = normalizeDynamicRenderer(newRenderer);
-		if (scope[rendererAccessor] !== (scope[rendererAccessor] = normalizedRenderer?.["id"] || normalizedRenderer) || getContent && !(normalizedRenderer || scope[childScopeAccessor])) {
+		if (scope[rendererAccessor] !== (scope[rendererAccessor] = rendererKey(normalizedRenderer)) || getContent && !(normalizedRenderer || scope[childScopeAccessor])) {
 			setConditionalRenderer(scope, nodeAccessor, normalizedRenderer || (getContent ? getContent(scope) : void 0), createBranchWithTagNameOrRenderer);
-			if (getTagVar) scope[childScopeAccessor][TagVariable] = (value) => getTagVar()(scope, value);
+			if (getTagVar) if (scope[childScopeAccessor]) scope[childScopeAccessor][TagVariable] = (value) => getTagVar()(scope, value);
+			else getTagVar()(scope, void 0);
 			if (typeof normalizedRenderer === "string") {
 				if (getContent) {
 					const content = getContent(scope);
@@ -1878,7 +1896,7 @@ const _dynamic_tag_content = /*@__PURE__*/ withBranches((nodeAccessor) => {
 	const childScopeAccessor = BranchScopes$1 + nodeAccessor;
 	const rendererAccessor = ConditionalRenderer + nodeAccessor;
 	return (scope, renderer) => {
-		if (scope[rendererAccessor] !== (scope[rendererAccessor] = renderer?.["id"] || renderer)) {
+		if (scope[rendererAccessor] !== (scope[rendererAccessor] = rendererKey(renderer))) {
 			setConditionalRenderer(scope, nodeAccessor, renderer, createAndSetupBranch);
 			if (renderer?.["accessor"]) subscribeToScopeSet(renderer[Owner], renderer[Accessor], scope[childScopeAccessor]);
 		}

package/dist/debug/dom.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_control_flow = require("./dom-Bj58jt8y.js");
+const require_control_flow = require("./dom-Bt4OoZ-j.js");
 //#region src/common/attr-tag.ts
 const empty = [];
 const rest = Symbol("Attribute Tag");

package/dist/debug/dom.mjs

@@ -1,4 +1,4 @@
-import { $ as _html, $t as queueEffect, A as _attr_select_value, At as _id, B as _attr_class, Bt as _assert_init, C as _attr_input_checked_default, Ct as _closure_get, D as _attr_input_value_default, Dt as _for_selector, E as _attr_input_value_attribute_default, Et as _for_closure, F as _controllable_select, Ft as _return, G as _attr_style, Gt as _on, H as _attr_class_items, Ht as insertBranchBefore, I as _controllable_textarea, It as _return_change, J as _attrs, K as _attr_style_item, Kt as $signal, Lt as _script, M as _attr_select_value_script, Mt as _let, N as _controllable_input, Nt as _let_change, O as _attr_input_value_dynamic_default, Ot as _hoist, P as _controllable_open, Pt as _or, Q as _attrs_script, Qt as queueAsyncRender, Rt as _var, S as _attr_input_checkedValue_script, St as _closure, T as _attr_input_value, Tn as TagVariable, Tt as _el_read, U as _attr_content, Ut as removeAndDestroyBranch, V as _attr_class_item, Vt as destroyBranch, W as _attr_nonce, Wt as syncGen, X as _attrs_partial, Y as _attrs_content, Z as _attrs_partial_content, Zt as prepareEffects, _ as _attr_details_or_dialog_open_default, _n as EndNode, _t as getRegisteredWithScope, a as _for_in, an as forTo, at as _to_text, b as _attr_input_checkedValue, bn as Load, bt as ready, c as _for_until, cn as _call, ct as _content, d as _show, dn as Params, dt as createAndSetupBranch, en as run, et as _lifecycle, f as _try, fn as Setup, ft as createBranch, g as _attr_details_or_dialog_open, gt as _var_resume, h as renderCatch, ht as _resume, i as _dynamic_tag_content, in as forOf, it as _text_content, j as _attr_select_value_default, jt as _if_closure, k as _attr_input_value_script, kt as _hoist_resume, l as _if, ln as Clone, lt as _content_closures, m as patchDynamicTag, mt as _el, n as _await_promise, nn as runId, nt as _style_shell, o as _for_of, on as forUntil, ot as insertChildNodes, p as addAwaitCounter, pt as setupBranch, q as _attr_style_items, qt as $signalReset, r as _dynamic_tag, rn as forIn, rt as _text, s as _for_to, sn as _assert_hoist, st as toInsertNode, t as _await_content, tn as runEffects, tt as _style_rule_item, u as _resume_dynamic_tag, un as Owner, ut as _content_resume, v as _attr_details_or_dialog_open_script, vt as init, w as _attr_input_checked_script, wn as StartNode, wt as _const, x as _attr_input_checkedValue_default, xt as _child_setup, y as _attr_input_checked, yn as Global, yt as initEmbedded, z as _attr, zt as _var_change } from "./dom-klf8Ec_o.mjs";
+import { $ as _html, $t as queueEffect, A as _attr_select_value, At as _id, B as _attr_class, Bt as _assert_init, C as _attr_input_checked_default, Ct as _closure_get, D as _attr_input_value_default, Dt as _for_selector, E as _attr_input_value_attribute_default, Et as _for_closure, F as _controllable_select, Ft as _return, G as _attr_style, Gt as _on, H as _attr_class_items, Ht as insertBranchBefore, I as _controllable_textarea, It as _return_change, J as _attrs, K as _attr_style_item, Kt as $signal, Lt as _script, M as _attr_select_value_script, Mt as _let, N as _controllable_input, Nt as _let_change, O as _attr_input_value_dynamic_default, Ot as _hoist, P as _controllable_open, Pt as _or, Q as _attrs_script, Qt as queueAsyncRender, Rt as _var, S as _attr_input_checkedValue_script, St as _closure, T as _attr_input_value, Tn as TagVariable, Tt as _el_read, U as _attr_content, Ut as removeAndDestroyBranch, V as _attr_class_item, Vt as destroyBranch, W as _attr_nonce, Wt as syncGen, X as _attrs_partial, Y as _attrs_content, Z as _attrs_partial_content, Zt as prepareEffects, _ as _attr_details_or_dialog_open_default, _n as EndNode, _t as getRegisteredWithScope, a as _for_in, an as forTo, at as _to_text, b as _attr_input_checkedValue, bn as Load, bt as ready, c as _for_until, cn as _call, ct as _content, d as _show, dn as Params, dt as createAndSetupBranch, en as run, et as _lifecycle, f as _try, fn as Setup, ft as createBranch, g as _attr_details_or_dialog_open, gt as _var_resume, h as renderCatch, ht as _resume, i as _dynamic_tag_content, in as forOf, it as _text_content, j as _attr_select_value_default, jt as _if_closure, k as _attr_input_value_script, kt as _hoist_resume, l as _if, ln as Clone, lt as _content_closures, m as patchDynamicTag, mt as _el, n as _await_promise, nn as runId, nt as _style_shell, o as _for_of, on as forUntil, ot as insertChildNodes, p as addAwaitCounter, pt as setupBranch, q as _attr_style_items, qt as $signalReset, r as _dynamic_tag, rn as forIn, rt as _text, s as _for_to, sn as _assert_hoist, st as toInsertNode, t as _await_content, tn as runEffects, tt as _style_rule_item, u as _resume_dynamic_tag, un as Owner, ut as _content_resume, v as _attr_details_or_dialog_open_script, vt as init, w as _attr_input_checked_script, wn as StartNode, wt as _const, x as _attr_input_checkedValue_default, xt as _child_setup, y as _attr_input_checked, yn as Global, yt as initEmbedded, z as _attr, zt as _var_change } from "./dom-B57LrRnX.mjs";
 //#region src/common/attr-tag.ts
 const empty = [];
 const rest = Symbol("Attribute Tag");