marko 6.3.23 → 6.3.25

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

@@ -2,6 +2,7 @@ export declare const BranchScopes = "A";
 export declare const ClosureScopes = "B";
 export declare const ClosureSignalIndex = "C";
 export declare const ConditionalRenderer = "D";
+export declare const ControlledObserver = "N";
 export declare const ControlledHandler = "E";
 export declare const ControlledType = "F";
 export declare const ControlledValue = "G";

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

@@ -2,6 +2,7 @@ export declare const BranchScopes = "BranchScopes:";
 export declare const ClosureScopes = "ClosureScopes:";
 export declare const ClosureSignalIndex = "ClosureSignalIndex:";
 export declare const ConditionalRenderer = "ConditionalRenderer:";
+export declare const ControlledObserver = "ControlledObserver:";
 export declare const ControlledHandler = "ControlledHandler:";
 export declare const ControlledType = "ControlledType:";
 export declare const ControlledValue = "ControlledValue:";

package/dist/common/constants/walk-range-size.d.ts

@@ -1,4 +1,4 @@
-export declare const Next = 20;
+export declare const Next = 25;
 export declare const Over = 10;
 export declare const Out = 10;
 export declare const Multiplier = 10;

package/dist/debug/dom.js

@@ -26,6 +26,7 @@ const BranchScopes$1 = "BranchScopes:";
 const ClosureScopes = "ClosureScopes:";
 const ClosureSignalIndex = "ClosureSignalIndex:";
 const ConditionalRenderer = "ConditionalRenderer:";
+const ControlledObserver = "ControlledObserver:";
 const ControlledHandler = "ControlledHandler:";
 const ControlledType = "ControlledType:";
 const ControlledValue = "ControlledValue:";
@@ -687,7 +688,7 @@ const walkInternal = function walkInternal(currentWalkIndex, walkCodes, scope) {
 			currentWalkIndex = walkInternal(currentWalkIndex, walkCodes, scope[getDebugKey(currentScopeIndex++, "#childScope")] = createScope(scope[Global], scope[ClosestBranch]));
 			if (value === 48) scope[getDebugKey(currentScopeIndex++, "#scopeOffset")] = skipScope();
 		} else if (value < 92) {
-			value = 20 * currentMultiplier + value - 67;
+			value = 25 * currentMultiplier + value - 67;
 			while (value--) walker.nextNode();
 		} else if (value < 107) {
 			value = 10 * currentMultiplier + value - 97;
@@ -1011,6 +1012,36 @@ function _attr_input_checked_default(scope, nodeAccessor, checked) {
 		if (restoreValue !== normalizedChecked) el.checked = restoreValue;
 	}
 }
+/** Filled by the latches a compiled page emits, so a page carries only the
+* control kinds its tags can be (`_attrs_script` resolves the kind at run time). */
+const controllableScripts = {};
+/** The render pass equivalent, for a tag whose name is only known at run time;
+* a statically named tag passes its claim to `_attrs` instead. */
+const controllableRenders = {};
+function _enable_controllable_input() {
+	controllableScripts[0] = _attr_input_checked_script;
+	controllableScripts[1] = _attr_input_checkedValue_script;
+	controllableScripts[2] = _attr_input_value_script;
+}
+function _enable_controllable_textarea() {
+	controllableScripts[2] = _attr_input_value_script;
+}
+function _enable_controllable_select() {
+	controllableScripts[3] = _attr_select_value_script;
+}
+function _enable_controllable_open() {
+	controllableScripts[4] = _attr_details_or_dialog_open_script;
+}
+/** A run-time tag name can be any controllable, so its page enables them all. */
+function _enable_controllable() {
+	_enable_controllable_input();
+	_enable_controllable_select();
+	_enable_controllable_open();
+	controllableRenders.INPUT = _controllable_input;
+	controllableRenders.TEXTAREA = _controllable_textarea;
+	controllableRenders.SELECT = _controllable_select;
+	controllableRenders.DETAILS = controllableRenders.DIALOG = _controllable_open;
+}
 function _attr_input_checked(scope, nodeAccessor, checked, checkedChange) {
 	const el = scope[nodeAccessor];
 	const normalizedChecked = isNotVoid(checked);
@@ -1172,12 +1203,12 @@ function _attr_select_value_script(scope, nodeAccessor) {
 		}
 	}
 	syncControllableFormInput(el, hasSelectChanged, onChange);
-	new MutationObserver(() => {
-		const value = scope[ControlledValue + nodeAccessor];
-		if (Array.isArray(value) ? value.length !== el.selectedOptions.length || value.some((_, i) => !value.includes(el.selectedOptions[i].value)) : el.value !== value) onChange();
-	}).observe(el, {
+	observeOnce(scope, nodeAccessor, {
 		childList: true,
 		subtree: true
+	}, () => {
+		const value = scope[ControlledValue + nodeAccessor];
+		if (Array.isArray(value) ? value.length !== el.selectedOptions.length || value.some((_, i) => !value.includes(el.selectedOptions[i].value)) : el.value !== value) onChange();
 	});
 }
 function setSelectValue(el, value, multiple) {
@@ -1207,7 +1238,10 @@ function _attr_details_or_dialog_open(scope, nodeAccessor, open, openChange) {
 }
 function _attr_details_or_dialog_open_script(scope, nodeAccessor) {
 	const el = scope[nodeAccessor];
-	new MutationObserver(() => {
+	observeOnce(scope, nodeAccessor, {
+		attributes: true,
+		attributeFilter: ["open"]
+	}, () => {
 		const openChange = scope[ControlledHandler + nodeAccessor];
 		if (openChange && el.open === !scope["ControlledValue:" + nodeAccessor]) {
 			const newValue = el.open;
@@ -1215,11 +1249,11 @@ function _attr_details_or_dialog_open_script(scope, nodeAccessor) {
 			openChange(newValue);
 			run();
 		}
-	}).observe(el, {
-		attributes: true,
-		attributeFilter: ["open"]
 	});
 }
+function observeOnce(scope, nodeAccessor, init, callback) {
+	(scope[ControlledObserver + nodeAccessor] ||= new MutationObserver(callback)).observe(scope[nodeAccessor], init);
+}
 function syncControllableFormInput(el, hasChanged, onChange) {
 	el._ = onChange;
 	delegate("input", handleChange);
@@ -1255,6 +1289,35 @@ function updateList(arr, val, push) {
 	const index = arr.indexOf(val);
 	return (push ? !~index && [...arr, val] : ~index && arr.slice(0, index).concat(arr.slice(index + 1))) || arr;
 }
+function _controllable_input(scope, nodeAccessor, nextAttrs) {
+	if ("checked" in nextAttrs || "checkedChange" in nextAttrs) {
+		_attr_input_checked(scope, nodeAccessor, nextAttrs.checked, nextAttrs.checkedChange);
+		return /^checked(?:Value)?(?:Change)?$/;
+	}
+	if ("checkedValue" in nextAttrs || "checkedValueChange" in nextAttrs) {
+		_attr_input_checkedValue(scope, nodeAccessor, nextAttrs.checkedValue, nextAttrs.checkedValueChange, nextAttrs.value);
+		return /^(?:value|checked(?:Value)?)(?:Change)?$/;
+	}
+	return _controllable_textarea(scope, nodeAccessor, nextAttrs, _attr_input_value_dynamic_default);
+}
+function _controllable_textarea(scope, nodeAccessor, nextAttrs, dynamicDefault) {
+	if ("value" in nextAttrs || "valueChange" in nextAttrs) {
+		_attr_input_value(scope, nodeAccessor, nextAttrs.value, nextAttrs.valueChange, dynamicDefault);
+		return /^value(?:Change)?$/;
+	}
+}
+function _controllable_select(scope, nodeAccessor, nextAttrs) {
+	if ("value" in nextAttrs || "valueChange" in nextAttrs) {
+		_attr_select_value(scope, nodeAccessor, nextAttrs.value, nextAttrs.valueChange);
+		return /^value(?:Change)?$/;
+	}
+}
+function _controllable_open(scope, nodeAccessor, nextAttrs) {
+	if ("open" in nextAttrs || "openChange" in nextAttrs) {
+		_attr_details_or_dialog_open(scope, nodeAccessor, nextAttrs.open, nextAttrs.openChange);
+		return /^open(?:Change)?$/;
+	}
+}
 //#endregion
 //#region src/dom/dom.ts
 function _to_text(value) {
@@ -1312,23 +1375,23 @@ function _text_content(node, value) {
 	const normalizedValue = _to_text(value);
 	if (node.textContent !== normalizedValue) node.textContent = normalizedValue;
 }
-function _attrs(scope, nodeAccessor, nextAttrs) {
+function _attrs(scope, nodeAccessor, nextAttrs, controllable) {
 	const el = scope[nodeAccessor];
 	for (let i = el.attributes.length; i--;) {
 		const { name } = el.attributes.item(i);
 		if (!(nextAttrs && (name in nextAttrs || hasAttrAlias(el, name, nextAttrs)))) el.removeAttribute(name);
 	}
 	assertExclusiveAttrs(nextAttrs);
-	attrsInternal(scope, nodeAccessor, nextAttrs);
+	attrsInternal(scope, nodeAccessor, nextAttrs, controllable);
 }
-function _attrs_content(scope, nodeAccessor, nextAttrs) {
-	_attrs(scope, nodeAccessor, nextAttrs);
+function _attrs_content(scope, nodeAccessor, nextAttrs, controllable) {
+	_attrs(scope, nodeAccessor, nextAttrs, controllable);
 	_attr_content(scope, nodeAccessor, nextAttrs?.content);
 }
 function hasAttrAlias(element, attr, nextAttrs) {
 	return attr === "checked" && element.tagName === "INPUT" && "checkedValue" in nextAttrs;
 }
-function _attrs_partial(scope, nodeAccessor, nextAttrs, skip) {
+function _attrs_partial(scope, nodeAccessor, nextAttrs, skip, controllable) {
 	const el = scope[nodeAccessor];
 	const partial = {};
 	for (let i = el.attributes.length; i--;) {
@@ -1343,52 +1406,19 @@ function _attrs_partial(scope, nodeAccessor, nextAttrs, skip) {
 		...nextAttrs,
 		...skip
 	});
-	attrsInternal(scope, nodeAccessor, partial);
+	attrsInternal(scope, nodeAccessor, partial, controllable);
 }
-function _attrs_partial_content(scope, nodeAccessor, nextAttrs, skip) {
-	_attrs_partial(scope, nodeAccessor, nextAttrs, skip);
+function _attrs_partial_content(scope, nodeAccessor, nextAttrs, skip, controllable) {
+	_attrs_partial(scope, nodeAccessor, nextAttrs, skip, controllable);
 	_attr_content(scope, nodeAccessor, nextAttrs?.content);
 }
-function attrsInternal(scope, nodeAccessor, nextAttrs) {
+function attrsInternal(scope, nodeAccessor, nextAttrs, controllable) {
 	const el = scope[nodeAccessor];
 	let events = scope[EventAttributes + nodeAccessor];
-	let skip;
 	for (const name in events) events[name] = 0;
 	scope[ControlledType + nodeAccessor] = 5;
 	scope[ControlledHandler + nodeAccessor] = 0;
-	switch (nextAttrs && el.tagName) {
-		case "INPUT":
-			if ("checked" in nextAttrs || "checkedChange" in nextAttrs) {
-				_attr_input_checked(scope, nodeAccessor, nextAttrs.checked, nextAttrs.checkedChange);
-				skip = /^checked(?:Value)?(?:Change)?$/;
-			} else if ("checkedValue" in nextAttrs || "checkedValueChange" in nextAttrs) {
-				_attr_input_checkedValue(scope, nodeAccessor, nextAttrs.checkedValue, nextAttrs.checkedValueChange, nextAttrs.value);
-				skip = /^(?:value|checked(?:Value)?)(?:Change)?$/;
-			} else if ("value" in nextAttrs || "valueChange" in nextAttrs) {
-				_attr_input_value(scope, nodeAccessor, nextAttrs.value, nextAttrs.valueChange, _attr_input_value_dynamic_default);
-				skip = /^value(?:Change)?$/;
-			}
-			break;
-		case "SELECT":
-			if ("value" in nextAttrs || "valueChange" in nextAttrs) {
-				_attr_select_value(scope, nodeAccessor, nextAttrs.value, nextAttrs.valueChange);
-				skip = /^value(?:Change)?$/;
-			}
-			break;
-		case "TEXTAREA":
-			if ("value" in nextAttrs || "valueChange" in nextAttrs) {
-				_attr_input_value(scope, nodeAccessor, nextAttrs.value, nextAttrs.valueChange);
-				skip = /^value(?:Change)?$/;
-			}
-			break;
-		case "DETAILS":
-		case "DIALOG":
-			if ("open" in nextAttrs || "openChange" in nextAttrs) {
-				_attr_details_or_dialog_open(scope, nodeAccessor, nextAttrs.open, nextAttrs.openChange);
-				skip = /^open(?:Change)?$/;
-			}
-			break;
-	}
+	const skip = nextAttrs && (controllable || controllableRenders[el.tagName])?.(scope, nodeAccessor, nextAttrs);
 	for (const name in nextAttrs) {
 		const value = nextAttrs[name];
 		switch (name) {
@@ -1417,23 +1447,7 @@ function _attr_content(scope, nodeAccessor, value) {
 function _attrs_script(scope, nodeAccessor) {
 	const el = scope[nodeAccessor];
 	const events = scope[EventAttributes + nodeAccessor];
-	switch (scope[ControlledType + nodeAccessor]) {
-		case 0:
-			_attr_input_checked_script(scope, nodeAccessor);
-			break;
-		case 1:
-			_attr_input_checkedValue_script(scope, nodeAccessor);
-			break;
-		case 2:
-			_attr_input_value_script(scope, nodeAccessor);
-			break;
-		case 3:
-			_attr_select_value_script(scope, nodeAccessor);
-			break;
-		case 4:
-			_attr_details_or_dialog_open_script(scope, nodeAccessor);
-			break;
-	}
+	controllableScripts[scope[ControlledType + nodeAccessor]]?.(scope, nodeAccessor);
 	for (const name in events) _on(el, name, events[name]);
 }
 function _html(scope, value, accessor) {
@@ -1496,58 +1510,64 @@ function _await_promise(nodeAccessor, params) {
 	const promiseAccessor = Promise$1 + nodeAccessor;
 	const branchAccessor = BranchScopes$1 + nodeAccessor;
 	_enable_catch();
-	return (scope, promise) => {
-		if (!isPromise(promise)) {
-			if (!scope[promiseAccessor]) {
-				const resolve = () => resolveAwait(scope, branchAccessor, nodeAccessor, scope[nodeAccessor], params, promise);
-				if (scope[branchAccessor]) resolve();
-				else scope[promiseAccessor] = resolve;
-				return;
-			}
-			promise = Promise.resolve(promise);
+	const resolveAwait = (scope, referenceNode, value) => {
+		const awaitBranch = scope[branchAccessor];
+		if (awaitBranch["#DetachedAwait"]) {
+			awaitBranch[PendingScopes] = awaitBranch[PendingScopes]?.forEach(syncGen);
+			setupBranch(awaitBranch[DetachedAwait], awaitBranch);
+			awaitBranch[DetachedAwait] = 0;
+			insertBranchBefore(awaitBranch, scope[nodeAccessor].parentNode, scope[nodeAccessor]);
+			referenceNode.remove();
 		}
+		params?.(awaitBranch, [value]);
+		return awaitBranch;
+	};
+	const awaitPromise = (scope, promise) => {
+		if (!isPromise(promise) && scope[promiseAccessor]) promise = Promise.resolve(promise);
 		let awaitBranch = scope[branchAccessor];
 		const tryPlaceholder = findBranchWithKey(scope, PlaceholderContent);
 		const tryBranch = tryPlaceholder || awaitBranch;
+		if (!(isPromise(promise) ? tryBranch : awaitBranch)) {
+			scope[promiseAccessor] = () => awaitPromise(scope, promise);
+			return;
+		}
+		if (!isPromise(promise)) {
+			resolveAwait(scope, scope[nodeAccessor], promise);
+			return;
+		}
 		let awaitCounter = tryBranch[AwaitCounter];
 		placeholderShown.add(pendingEffects);
-		if (tryPlaceholder) {
-			if (!scope[promiseAccessor]) {
-				if (awaitBranch) awaitBranch[PendingRenders] ||= [];
-				awaitCounter = addAwaitCounter(scope, tryPlaceholder);
-			}
-		} else {
-			if (!awaitCounter?.i) awaitCounter = tryBranch[AwaitCounter] = {
-				i: 0,
-				c() {
-					if (--awaitCounter.i) return 1;
-					if (tryBranch === scope[branchAccessor]) {
-						const anchor = scope[nodeAccessor];
-						if (anchor.parentNode) {
-							const detachedParent = scope[branchAccessor][StartNode].parentNode;
-							if (detachedParent === anchor.parentNode) anchor.remove();
-							else anchor.replaceWith(detachedParent);
-						}
-					} else dismissPlaceholder(tryBranch);
-					queueEffect(tryBranch, runPendingEffects);
+		if (!tryPlaceholder && !awaitCounter?.i) awaitCounter = createAwaitCounter(tryBranch, () => {
+			if (tryBranch === scope[branchAccessor]) {
+				const anchor = scope[nodeAccessor];
+				if (anchor.parentNode) {
+					const detachedParent = scope[branchAccessor][StartNode].parentNode;
+					if (detachedParent === anchor.parentNode) anchor.remove();
+					else anchor.replaceWith(detachedParent);
 				}
-			};
-			if (!scope[promiseAccessor]) {
-				if (awaitBranch) awaitBranch[PendingRenders] ||= [];
-				if (!awaitCounter.i++) requestAnimationFrame(() => awaitCounter.i && runEffects(prepareEffects(() => queueRender(scope, () => {
-					if (!awaitBranch["#DetachedAwait"]) {
-						awaitBranch["#StartNode"].parentNode.insertBefore(scope[nodeAccessor], awaitBranch["#StartNode"]);
-						tempDetachBranch(tryBranch);
-					}
-				}, -1))));
-			}
+			} else dismissPlaceholder(tryBranch);
+		});
+		if (!scope[promiseAccessor]) {
+			if (awaitBranch) awaitBranch[PendingRenders] ||= [];
+			if (tryPlaceholder) awaitCounter = addAwaitCounter(scope, tryPlaceholder);
+			else if (!awaitCounter.i++) requestAnimationFrame(() => awaitCounter.i && runEffects(prepareEffects(() => queueRender(scope, () => {
+				if (!awaitBranch["#DetachedAwait"]) {
+					awaitBranch["#StartNode"].parentNode.insertBefore(scope[nodeAccessor], awaitBranch["#StartNode"]);
+					tempDetachBranch(tryBranch);
+				}
+			}, -1))));
 		}
 		const thisPromise = scope[promiseAccessor] = promise.then((data) => {
 			if (thisPromise === scope[promiseAccessor]) {
 				const referenceNode = scope[nodeAccessor];
 				scope[promiseAccessor] = 0;
+				if (scope["#ClosestBranch"]?.["#Gen"] === 0) {
+					awaitCounter.c();
+					run();
+					return;
+				}
 				queueAsyncRender(scope, () => {
-					awaitBranch = resolveAwait(scope, branchAccessor, nodeAccessor, referenceNode, params, data);
+					awaitBranch = resolveAwait(scope, referenceNode, data);
 					const pendingRenders = awaitBranch[PendingRenders];
 					awaitBranch[PendingRenders] = 0;
 					pendingRenders?.forEach(queuePendingRender);
@@ -1579,18 +1599,7 @@ function _await_promise(nodeAccessor, params) {
 			}
 		});
 	};
-}
-function resolveAwait(scope, branchAccessor, nodeAccessor, referenceNode, params, value) {
-	const awaitBranch = scope[branchAccessor];
-	if (awaitBranch["#DetachedAwait"]) {
-		awaitBranch[PendingScopes] = awaitBranch[PendingScopes]?.forEach(syncGen);
-		setupBranch(awaitBranch[DetachedAwait], awaitBranch);
-		awaitBranch[DetachedAwait] = 0;
-		insertBranchBefore(awaitBranch, scope[nodeAccessor].parentNode, scope[nodeAccessor]);
-		referenceNode.remove();
-	}
-	params?.(awaitBranch, [value]);
-	return awaitBranch;
+	return awaitPromise;
 }
 function _await_content(nodeAccessor, template, walks, setup) {
 	const branchAccessor = BranchScopes$1 + nodeAccessor;
@@ -1609,19 +1618,23 @@ function _await_content(nodeAccessor, template, walks, setup) {
 function addAwaitCounter(scope, tryBranch = findBranchWithKey(scope, PlaceholderContent)) {
 	if (!tryBranch) return;
 	let awaitCounter = tryBranch[AwaitCounter];
-	if (!awaitCounter?.i) awaitCounter = tryBranch[AwaitCounter] = {
+	if (!awaitCounter?.i) awaitCounter = createAwaitCounter(tryBranch, () => dismissPlaceholder(tryBranch));
+	placeholderShown.add(pendingEffects);
+	if (!awaitCounter.i++) requestAnimationFrame(() => awaitCounter.i && runEffects(prepareEffects(() => queueRender(tryBranch, () => {
+		insertBranchBefore(tryBranch["#PlaceholderBranch"] = createAndSetupBranch(tryBranch["$global"], tryBranch["#PlaceholderContent"], tryBranch["_"], tryBranch["#StartNode"].parentNode), tryBranch["#StartNode"].parentNode, tryBranch["#StartNode"]);
+		tempDetachBranch(tryBranch);
+	}, -1))));
+	return awaitCounter;
+}
+function createAwaitCounter(tryBranch, done) {
+	const awaitCounter = tryBranch[AwaitCounter] = {
 		i: 0,
 		c() {
 			if (--awaitCounter.i) return 1;
-			dismissPlaceholder(tryBranch);
+			done();
 			queueEffect(tryBranch, runPendingEffects);
 		}
 	};
-	placeholderShown.add(pendingEffects);
-	if (!awaitCounter.i++) requestAnimationFrame(() => awaitCounter.i && runEffects(prepareEffects(() => queueRender(tryBranch, () => {
-		insertBranchBefore(tryBranch["#PlaceholderBranch"] = createAndSetupBranch(tryBranch["$global"], tryBranch["#PlaceholderContent"], tryBranch["_"], tryBranch["#StartNode"].parentNode), tryBranch["#StartNode"].parentNode, tryBranch["#StartNode"]);
-		tempDetachBranch(tryBranch);
-	}, -1))));
 	return awaitCounter;
 }
 function runPendingEffects(scope) {
@@ -2388,6 +2401,10 @@ exports._const = _const;
 exports._content = _content;
 exports._content_closures = _content_closures;
 exports._content_resume = _content_resume;
+exports._controllable_input = _controllable_input;
+exports._controllable_open = _controllable_open;
+exports._controllable_select = _controllable_select;
+exports._controllable_textarea = _controllable_textarea;
 Object.defineProperty(exports, "_dynamic_tag", {
 	enumerable: true,
 	get: function() {
@@ -2398,6 +2415,11 @@ exports._dynamic_tag_content = _dynamic_tag_content;
 exports._el = _el;
 exports._el_read = _el_read;
 exports._enable_catch = _enable_catch;
+exports._enable_controllable = _enable_controllable;
+exports._enable_controllable_input = _enable_controllable_input;
+exports._enable_controllable_open = _enable_controllable_open;
+exports._enable_controllable_select = _enable_controllable_select;
+exports._enable_controllable_textarea = _enable_controllable_textarea;
 exports._for_closure = _for_closure;
 exports._for_in = _for_in;
 exports._for_of = _for_of;