marko 6.3.42 → 6.3.43

package/cheatsheet.md

@@ -7,17 +7,17 @@ Marko 6 = HTML superset, not JSX and not Marko 4/5 syntax. `.marko` files are co
 1. Text interpolation: `${expr}` inside tag bodies. A bare line at the template root parses as a tag (concise mode): `Welcome aboard` fails to compile, but `p is a tag` compiles **silently** to `<p is a tag></p>`, since any line starting with a real tag name loses its words to attributes. Wrap text in an element (`<p>Welcome aboard</p>`) or prefix the line with `--` and a space (`-- Welcome ${name}`). Attributes take raw JS after `=` with no braces or quotes: `<div title=user.name data-n=1 + 1>`.
 2. A top-level `>` hugging its operand in an attribute value **ends the tag** silently: `<button disabled=count>=8 onClick() {…}>More</button>` is `disabled=count` plus the text `=8 onClick() {…}>`, so the handler never binds. Space a `>=` (`disabled=count >= 8`), and parenthesize a bare `>` comparison (`hidden=(a > b)`) and a TS type argument `<let/s=(new Set<string>())>`. Do not move the type onto the tag variable instead: `<let/s:Set<string>=new Set()>` compiles but fails type-check with TS2322 (the annotation does not flow into the initializer). A `>` nested inside `(…)`/`{…}`/`[…]` is safe (`class={ big: n > 1 }`). `<` never closes a tag (`disabled=count<=1` is fine).
 3. State: `<let/name=initial>` (slash then var name!). Update by plain assignment in an event handler: `count++`, `text = "hi"`. No setState, no hooks.
-4. Derived values: `<const/total=items.length * price>` auto-recomputes. Never use an effect to derive state. `<let>` is deliberately different: its value is an _initial_ value, so `<let/draft=input.text>` seeds from a reactive value and then de-syncs; that de-sync is the point of an editable copy. So pick by intent: recomputes → `<const>`, seeds then diverges → `<let>`. A `<let>` you never assign is just a frozen `<const>`. Updates batch: mid-handler a reassigned `<let>` reads current but its derived `<const>` reads stale, so recompute from the `<let>`.
+4. Derived values: `<const/total=items.length * price>` auto-recomputes. Never use an effect to derive state. A tag variable is whatever the tag returns, not the attribute you passed. `<let/draft=input.text>` re-runs on every `input.text` change but returns state it controls, so `draft` keeps your edits. Pick by intent: recomputes → `<const>`, seeds then diverges → `<let>`. A `<let>` you never assign is just a frozen `<const>`. Updates batch: mid-handler a reassigned `<let>` reads current but its derived `<const>` reads stale, so recompute from the `<let>`.
 5. Never mutate state in place: `items.push(x)` does not update the UI. Always reassign:
    - add: `items = items.concat(x)`
    - remove: `items = items.toSpliced(i, 1)`
    - update: `items = items.toSpliced(i, 1, { ...item, done: true })`
    - object: `user = { ...user, name }`
 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.)
+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.) `:=` differs by operand: on an identifier (`value:=text`) it assigns that variable; on a member expression (`<let/count:=input.count>` in a child) it wires `input.countChange`, so the child is controlled when the parent passes that handler and keeps its own state when it doesn't.
 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.
+10. Module-level values, helpers and type aliases need `static`: `static const LIMIT = 10`, `static function fmt(n) {…}`, `static type Row = {…}`. 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. `server`/`client` narrow `static` to one platform (`client import { Chart } from "chart"`); the binding is `undefined` on the other, so read a `client` one only from `<script>`/handlers/`<lifecycle>` — reading it while rendering throws `is not a function` during SSR.
 
 ## Canonical component
 
@@ -69,7 +69,7 @@ Marko 6 = HTML superset, not JSX and not Marko 4/5 syntax. `.marko` files are co
 <show=open> stays mounted, keeps state (form drafts) when hidden </show>
 ```
 
-`<if>` destroys/rebuilds its content; `<show>` just hides it (use for toggles that must keep state).
+`<if>` destroys/rebuilds its content; `<show>` renders it and hides it, on the server too (use for toggles that must keep state).
 
 ## Async (`<await>`)
 
@@ -202,6 +202,7 @@ Each left-hand habit is an error or silently wrong.
 | `$ const y = x * 2;` (scriptlets are removed)               | `<const/y=x * 2>`                                                                    |
 | `<let/n=a + b>` for a value that should recompute           | `<const/n=a + b>`; `<let>` seeds an initial value, then de-syncs by design           |
 | `function fmt(n) {…}` / `const LIMIT = 10` at module level  | `static function fmt(n) {…}` / `static const LIMIT = 10`                             |
+| `type Row = {…}` at module level                            | `static type Row = {…}`                                                              |
 | `<let x=0>`                                                 | `<let/x=0>`                                                                          |
 | `<if(cond)>`                                                | `<if=cond>`                                                                          |
 | `items.push(x)`                                             | `items = items.concat(x)`                                                            |

package/dist/dom/catch.feat.js

@@ -1,4 +1,4 @@
-let require_control_flow = require("../dom-BfloYt04.js"), handlePendingTry = (fn, scope, branch) => {
+let require_control_flow = require("../dom-CKak9Qet.js"), handlePendingTry = (fn, scope, branch) => {
 	for (; branch;) {
 		if (branch.O?.i) return (branch.J ||= []).push(fn, scope);
 		branch = branch.N;

package/dist/dom/catch.feat.mjs

@@ -4,7 +4,7 @@ let handlePendingTry = (fn, scope, branch) => {
 		branch = branch.N;
 	}
 };
-import { $t as placeholderShown, Qt as installCatch, Zt as caughtError, g as renderCatch } from "../dom-BVNolGe1.mjs";
+import { $t as placeholderShown, Qt as installCatch, Zt as caughtError, g as renderCatch } from "../dom-HMfNm7KC.mjs";
 //#region src/dom/catch.feat.ts
 installCatch((runEffects) => (effects, checkPending = placeholderShown.has(effects)) => {
 	if (checkPending || caughtError.has(effects)) {

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

@@ -1,3 +1,3 @@
-let require_control_flow = require("../dom-BfloYt04.js");
+let require_control_flow = require("../dom-CKak9Qet.js");
 require_control_flow.z[0] = require_control_flow.T, require_control_flow.z[1] = require_control_flow.C, require_control_flow.z[2] = require_control_flow.A;
 //#endregion

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

@@ -1,3 +1,3 @@
-import { A as _attr_input_value_script, C as _attr_input_checkedValue_script, T as _attr_input_checked_script, z as controllableScripts } from "../dom-BVNolGe1.mjs";
+import { A as _attr_input_value_script, C as _attr_input_checkedValue_script, T as _attr_input_checked_script, z as controllableScripts } from "../dom-HMfNm7KC.mjs";
 controllableScripts[0] = _attr_input_checked_script, controllableScripts[1] = _attr_input_checkedValue_script, controllableScripts[2] = _attr_input_value_script;
 //#endregion

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

@@ -1,4 +1,4 @@
-let require_control_flow = require("../dom-BfloYt04.js");
+let require_control_flow = require("../dom-CKak9Qet.js");
 //#region src/dom/controllable-open.feat.ts
 require_control_flow.z[4] = require_control_flow.y;
 //#endregion

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

@@ -1,4 +1,4 @@
-import { y as _attr_details_or_dialog_open_script, z as controllableScripts } from "../dom-BVNolGe1.mjs";
+import { y as _attr_details_or_dialog_open_script, z as controllableScripts } from "../dom-HMfNm7KC.mjs";
 //#region src/dom/controllable-open.feat.ts
 controllableScripts[4] = _attr_details_or_dialog_open_script;
 //#endregion

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

@@ -1,4 +1,4 @@
-let require_control_flow = require("../dom-BfloYt04.js");
+let require_control_flow = require("../dom-CKak9Qet.js");
 //#region src/dom/controllable-select.feat.ts
 require_control_flow.z[3] = require_control_flow.N;
 //#endregion

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

@@ -1,4 +1,4 @@
-import { N as _attr_select_value_script, z as controllableScripts } from "../dom-BVNolGe1.mjs";
+import { N as _attr_select_value_script, z as controllableScripts } from "../dom-HMfNm7KC.mjs";
 //#region src/dom/controllable-select.feat.ts
 controllableScripts[3] = _attr_select_value_script;
 //#endregion

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

@@ -1,4 +1,4 @@
-let require_control_flow = require("../dom-BfloYt04.js");
+let require_control_flow = require("../dom-CKak9Qet.js");
 //#region src/dom/controllable-textarea.feat.ts
 require_control_flow.z[2] = require_control_flow.A;
 //#endregion

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

@@ -1,4 +1,4 @@
-import { A as _attr_input_value_script, z as controllableScripts } from "../dom-BVNolGe1.mjs";
+import { A as _attr_input_value_script, z as controllableScripts } from "../dom-HMfNm7KC.mjs";
 //#region src/dom/controllable-textarea.feat.ts
 controllableScripts[2] = _attr_input_value_script;
 //#endregion

package/dist/dom/controllable.feat.js

@@ -1,3 +1,3 @@
-let require_control_flow = require("../dom-BfloYt04.js");
+let require_control_flow = require("../dom-CKak9Qet.js");
 require("./controllable-input.feat.js"), require("./controllable-open.feat.js"), require("./controllable-select.feat.js"), require_control_flow.R.INPUT = require_control_flow.P, require_control_flow.R.TEXTAREA = require_control_flow.L, require_control_flow.R.SELECT = require_control_flow.I, require_control_flow.R.DETAILS = require_control_flow.R.DIALOG = require_control_flow.F;
 //#endregion

package/dist/dom/controllable.feat.mjs

@@ -1,4 +1,4 @@
-import { F as _controllable_open, I as _controllable_select, L as _controllable_textarea, P as _controllable_input, R as controllableRenders } from "../dom-BVNolGe1.mjs";
+import { F as _controllable_open, I as _controllable_select, L as _controllable_textarea, P as _controllable_input, R as controllableRenders } from "../dom-HMfNm7KC.mjs";
 import "./controllable-input.feat.mjs";
 import "./controllable-open.feat.mjs";
 import "./controllable-select.feat.mjs";

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

@@ -1,3 +1,3 @@
-let require_control_flow = require("../dom-BfloYt04.js"), elementGetter = (branch) => () => branch.S;
-require_control_flow.m((branch) => branch.T(elementGetter(branch))), require_control_flow.gt("e", elementGetter);
+let require_control_flow = require("../dom-CKak9Qet.js"), elementGetter = (branch) => () => branch.S;
+require_control_flow.m((branch) => branch.T(elementGetter(branch))), require_control_flow.gt("_e", elementGetter);
 //#endregion

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

@@ -1,4 +1,4 @@
 let elementGetter = (branch) => () => branch.S;
-import { gt as _resume, m as installDynamicTagVar } from "../dom-BVNolGe1.mjs";
-installDynamicTagVar((branch) => branch.T(elementGetter(branch))), _resume("e", elementGetter);
+import { gt as _resume, m as installDynamicTagVar } from "../dom-HMfNm7KC.mjs";
+installDynamicTagVar((branch) => branch.T(elementGetter(branch))), _resume("_e", elementGetter);
 //#endregion

package/dist/dom/placeholder.feat.js

@@ -1,6 +1,6 @@
-let require_control_flow = require("../dom-BfloYt04.js");
+let require_control_flow = require("../dom-CKak9Qet.js");
 //#region src/dom/placeholder.feat.ts
-require_control_flow.St.f = (tryBranch) => {
+require_control_flow.St._f = (tryBranch) => {
 	tryBranch.P &&= (require_control_flow.Wt(tryBranch.P), 0);
 };
 //#endregion

package/dist/dom/placeholder.feat.mjs

@@ -1,6 +1,6 @@
-import { St as registeredValues, Wt as destroyBranch } from "../dom-BVNolGe1.mjs";
+import { St as registeredValues, Wt as destroyBranch } from "../dom-HMfNm7KC.mjs";
 //#region src/dom/placeholder.feat.ts
-registeredValues.f = (tryBranch) => {
+registeredValues._f = (tryBranch) => {
 	tryBranch.P &&= (destroyBranch(tryBranch.P), 0);
 };
 //#endregion

package/dist/{dom-BfloYt04.js → dom-CKak9Qet.js}

@@ -80,7 +80,7 @@ let unsafeStyleAttrReg = /[\\;]/g, replaceUnsafeStyleAttr = (c) => c === ";" ? "
 	return (scope, renderer) => {
 		if (scope[rendererAccessor] !== (scope[rendererAccessor] = rendererKey(renderer)) && (setConditionalRenderer(scope, nodeAccessor, renderer, createAndSetupBranch), renderer?.f && subscribeToScopeSet(renderer.e, renderer.f, scope[childScopeAccessor])), renderer) for (let accessor in renderer.g) renderer.g[accessor](scope[childScopeAccessor], renderer.h[accessor]);
 	};
-}), bindNativeTagVar, _resume_dynamic_tag = /*@__PURE__*/ withBranches(() => _resume("d", dynamicTagScript)), loop = /*@__PURE__*/ withBranches((forEach) => (nodeAccessor, template, walks, setup, params) => {
+}), bindNativeTagVar, _resume_dynamic_tag = /*@__PURE__*/ withBranches(() => _resume("_d", dynamicTagScript)), loop = /*@__PURE__*/ withBranches((forEach) => (nodeAccessor, template, walks, setup, params) => {
 	nodeAccessor = decodeAccessor(nodeAccessor);
 	let scopesAccessor = "A" + nodeAccessor, keyedScopesAccessor = "O" + nodeAccessor, renderer = _content("", template, walks, setup)();
 	return (scope, value) => {

package/dist/{dom-BVNolGe1.mjs → dom-HMfNm7KC.mjs}

@@ -80,7 +80,7 @@ let unsafeStyleAttrReg = /[\\;]/g, replaceUnsafeStyleAttr = (c) => c === ";" ? "
 	return (scope, renderer) => {
 		if (scope[rendererAccessor] !== (scope[rendererAccessor] = rendererKey(renderer)) && (setConditionalRenderer(scope, nodeAccessor, renderer, createAndSetupBranch), renderer?.f && subscribeToScopeSet(renderer.e, renderer.f, scope[childScopeAccessor])), renderer) for (let accessor in renderer.g) renderer.g[accessor](scope[childScopeAccessor], renderer.h[accessor]);
 	};
-}), bindNativeTagVar, _resume_dynamic_tag = /*@__PURE__*/ withBranches(() => _resume("d", dynamicTagScript)), loop = /*@__PURE__*/ withBranches((forEach) => (nodeAccessor, template, walks, setup, params) => {
+}), bindNativeTagVar, _resume_dynamic_tag = /*@__PURE__*/ withBranches(() => _resume("_d", dynamicTagScript)), loop = /*@__PURE__*/ withBranches((forEach) => (nodeAccessor, template, walks, setup, params) => {
 	nodeAccessor = decodeAccessor(nodeAccessor);
 	let scopesAccessor = "A" + nodeAccessor, keyedScopesAccessor = "O" + nodeAccessor, renderer = _content("", template, walks, setup)();
 	return (scope, value) => {

package/dist/dom.js

@@ -1,4 +1,4 @@
-let require_control_flow = require("./dom-BfloYt04.js"), empty = [], rest = Symbol(), classIdToBranch = /* @__PURE__ */ new Map(), classEventResolver, scopesByRender = /* @__PURE__ */ new WeakMap(), getRenderScopes = ($global) => {
+let require_control_flow = require("./dom-CKak9Qet.js"), empty = [], rest = Symbol(), classIdToBranch = /* @__PURE__ */ new Map(), classEventResolver, scopesByRender = /* @__PURE__ */ new WeakMap(), getRenderScopes = ($global) => {
 	require_control_flow.yt($global.runtimeId);
 	let render = self[$global.runtimeId]?.[$global.renderId], scopes = render && scopesByRender.get(render);
 	return render && !scopes && scopesByRender.set(render, scopes = {}), scopes;

package/dist/dom.mjs

@@ -94,7 +94,7 @@ let empty = [], rest = Symbol(), classIdToBranch = /* @__PURE__ */ new Map(), cl
 		pending ||= load(), scope.X || !("X" in scope) && scope.H === runId ? (scope.X ||= /* @__PURE__ */ new Map()).set(pending, { a: value }) : signal ? signal(scope, value) : pending.then((mod) => queueAsyncRender(scope, signal = mod._, value), () => 0);
 	};
 });
-import { $ as _attrs_script, A as _attr_input_value_script, At as _for_selector, B as _attr, Bt as _script, C as _attr_input_checkedValue_script, Ct as withLazy, D as _attr_input_value_attribute_default, Dt as _const, E as _attr_input_value, Et as _closure_get, F as _controllable_open, Ft as _let, G as _attr_nonce, Gt as insertBranchBefore, H as _attr_class_item, Ht as _var_change, I as _controllable_select, It as _let_change, J as _attr_style_items, Jt as _on, K as _attr_style, Kt as removeAndDestroyBranch, L as _controllable_textarea, Lt as _or, M as _attr_select_value_default, Mt as _hoist_resume, N as _attr_select_value_script, Nt as _id, O as _attr_input_value_default, Ot as _el_read, P as _controllable_input, Pt as _if_closure, Q as _attrs_partial_content, Rt as _return, S as _attr_input_checkedValue_default, T as _attr_input_checked_script, Tt as _closure, U as _attr_class_items, Ut as _assert_init, V as _attr_class, Vt as _var, W as _attr_content, Wt as destroyBranch, X as _attrs_content, Xt as $signalReset, Y as _attrs, Yt as $signal, Z as _attrs_partial, _ as _attr_details_or_dialog_open, _t as _var_resume, a as _for_in, an as runId, at as _text_content, b as _attr_input_checked, bt as initEmbedded, c as _for_until, cn as forTo, ct as toInsertNode, d as _show, dn as _hoist_read_error, dt as _content_resume, en as prepareEffects, et as _html, f as _try, fn as _call, ft as createAndSetupBranch, g as renderCatch, gt as _resume, h as patchDynamicTag, ht as _el, i as _dynamic_tag_content, in as runEffects, it as _text, j as _attr_select_value, jt as _hoist, k as _attr_input_value_dynamic_default, kt as _for_closure, l as _if, ln as forUntil, lt as _content, mt as setupBranch, n as _await_promise, nn as queueEffect, nt as _style_rule_item, o as _for_of, on as forIn, ot as _to_text, p as addAwaitCounter, pn as decodeAccessor, pt as createBranch, q as _attr_style_item, qt as syncGen, r as _dynamic_tag, rn as run, rt as _style_shell, s as _for_to, sn as forOf, st as insertChildNodes, t as _await_content, tn as queueAsyncRender, tt as _lifecycle, u as _resume_dynamic_tag, un as _assert_hoist, ut as _content_closures, v as _attr_details_or_dialog_open_default, vt as getRegisteredWithScope, w as _attr_input_checked_default, wt as _child_setup, x as _attr_input_checkedValue, xt as ready, y as _attr_details_or_dialog_open_script, yt as init, zt as _return_change } from "./dom-BVNolGe1.mjs";
+import { $ as _attrs_script, A as _attr_input_value_script, At as _for_selector, B as _attr, Bt as _script, C as _attr_input_checkedValue_script, Ct as withLazy, D as _attr_input_value_attribute_default, Dt as _const, E as _attr_input_value, Et as _closure_get, F as _controllable_open, Ft as _let, G as _attr_nonce, Gt as insertBranchBefore, H as _attr_class_item, Ht as _var_change, I as _controllable_select, It as _let_change, J as _attr_style_items, Jt as _on, K as _attr_style, Kt as removeAndDestroyBranch, L as _controllable_textarea, Lt as _or, M as _attr_select_value_default, Mt as _hoist_resume, N as _attr_select_value_script, Nt as _id, O as _attr_input_value_default, Ot as _el_read, P as _controllable_input, Pt as _if_closure, Q as _attrs_partial_content, Rt as _return, S as _attr_input_checkedValue_default, T as _attr_input_checked_script, Tt as _closure, U as _attr_class_items, Ut as _assert_init, V as _attr_class, Vt as _var, W as _attr_content, Wt as destroyBranch, X as _attrs_content, Xt as $signalReset, Y as _attrs, Yt as $signal, Z as _attrs_partial, _ as _attr_details_or_dialog_open, _t as _var_resume, a as _for_in, an as runId, at as _text_content, b as _attr_input_checked, bt as initEmbedded, c as _for_until, cn as forTo, ct as toInsertNode, d as _show, dn as _hoist_read_error, dt as _content_resume, en as prepareEffects, et as _html, f as _try, fn as _call, ft as createAndSetupBranch, g as renderCatch, gt as _resume, h as patchDynamicTag, ht as _el, i as _dynamic_tag_content, in as runEffects, it as _text, j as _attr_select_value, jt as _hoist, k as _attr_input_value_dynamic_default, kt as _for_closure, l as _if, ln as forUntil, lt as _content, mt as setupBranch, n as _await_promise, nn as queueEffect, nt as _style_rule_item, o as _for_of, on as forIn, ot as _to_text, p as addAwaitCounter, pn as decodeAccessor, pt as createBranch, q as _attr_style_item, qt as syncGen, r as _dynamic_tag, rn as run, rt as _style_shell, s as _for_to, sn as forOf, st as insertChildNodes, t as _await_content, tn as queueAsyncRender, tt as _lifecycle, u as _resume_dynamic_tag, un as _assert_hoist, ut as _content_closures, v as _attr_details_or_dialog_open_default, vt as getRegisteredWithScope, w as _attr_input_checked_default, wt as _child_setup, x as _attr_input_checkedValue, xt as ready, y as _attr_details_or_dialog_open_script, yt as init, zt as _return_change } from "./dom-HMfNm7KC.mjs";
 //#region src/common/attr-tag.ts
 function attrTag(attrs) {
 	return attrs[Symbol.iterator] = attrTagIterator, attrs[rest] = empty, attrs;

package/dist/html.js

@@ -262,8 +262,8 @@ let empty = [], rest = Symbol(), unsafeStyleAttrReg = /[\\;]/g, replaceUnsafeSty
 				_html(`</${renderer}>`);
 			}
 			let childScope = getScopeById(branchId), needsScript = childScope && (childScope.Ia || childScope.Ea);
-			needsScript && _script(branchId, "d"), (shouldResume || needsScript) && _html(state.mark("'", scopeId + " " + accessor + " " + branchId));
-		})(), result = _el(branchId, "e");
+			needsScript && _script(branchId, "_d"), (shouldResume || needsScript) && _html(state.mark("'", scopeId + " " + accessor + " " + branchId));
+		})(), result = _el(branchId, "_e");
 	} else {
 		let chunk = getChunk(), beforeBranch = shouldResume ? deferBranchStart(chunk) : void 0, render = () => {
 			if (renderer) try {
@@ -1686,7 +1686,7 @@ var State = class {
 				let { state } = this.boundary, { branchId, scopeId, placeholderBranchId } = placeholder, reorderId = body.reorderId = branchId ? branchId + "" : state.nextReorderId();
 				this.writeHTML(state.mark("!^", reorderId));
 				let { effects } = this, beforeBranch = deferBranchStart(this), after = this.render(() => withBranchId(placeholderBranchId, placeholder.render)), stateful = after === this && this.effects !== effects;
-				applyBranchStart(this, beforeBranch, stateful), after === this ? stateful && (this.render(() => writeScope(branchId, { P: scopeWithId(state, placeholderBranchId) })), this.writeHTML(state.mark("]", scopeId + " " + ("P" + branchId) + " " + placeholderBranchId)), body.writeEffect(branchId, "f")) : this.boundary.abort(/* @__PURE__ */ Error("An @placeholder cannot contain async content.")), this.writeHTML(state.mark("!", reorderId)), state.reorder(body);
+				applyBranchStart(this, beforeBranch, stateful), after === this ? stateful && (this.render(() => writeScope(branchId, { P: scopeWithId(state, placeholderBranchId) })), this.writeHTML(state.mark("]", scopeId + " " + ("P" + branchId) + " " + placeholderBranchId)), body.writeEffect(branchId, "_f")) : this.boundary.abort(/* @__PURE__ */ Error("An @placeholder cannot contain async content.")), this.writeHTML(state.mark("!", reorderId)), state.reorder(body);
 			} else body.next = this.next, this.next = body;
 			this.placeholder = null;
 		}

package/dist/html.mjs

@@ -262,8 +262,8 @@ let empty = [], rest = Symbol(), unsafeStyleAttrReg = /[\\;]/g, replaceUnsafeSty
 				_html(`</${renderer}>`);
 			}
 			let childScope = getScopeById(branchId), needsScript = childScope && (childScope.Ia || childScope.Ea);
-			needsScript && _script(branchId, "d"), (shouldResume || needsScript) && _html(state.mark("'", scopeId + " " + accessor + " " + branchId));
-		})(), result = _el(branchId, "e");
+			needsScript && _script(branchId, "_d"), (shouldResume || needsScript) && _html(state.mark("'", scopeId + " " + accessor + " " + branchId));
+		})(), result = _el(branchId, "_e");
 	} else {
 		let chunk = getChunk(), beforeBranch = shouldResume ? deferBranchStart(chunk) : void 0, render = () => {
 			if (renderer) try {
@@ -1685,7 +1685,7 @@ var State = class {
 				let { state } = this.boundary, { branchId, scopeId, placeholderBranchId } = placeholder, reorderId = body.reorderId = branchId ? branchId + "" : state.nextReorderId();
 				this.writeHTML(state.mark("!^", reorderId));
 				let { effects } = this, beforeBranch = deferBranchStart(this), after = this.render(() => withBranchId(placeholderBranchId, placeholder.render)), stateful = after === this && this.effects !== effects;
-				applyBranchStart(this, beforeBranch, stateful), after === this ? stateful && (this.render(() => writeScope(branchId, { P: scopeWithId(state, placeholderBranchId) })), this.writeHTML(state.mark("]", scopeId + " " + ("P" + branchId) + " " + placeholderBranchId)), body.writeEffect(branchId, "f")) : this.boundary.abort(/* @__PURE__ */ Error("An @placeholder cannot contain async content.")), this.writeHTML(state.mark("!", reorderId)), state.reorder(body);
+				applyBranchStart(this, beforeBranch, stateful), after === this ? stateful && (this.render(() => writeScope(branchId, { P: scopeWithId(state, placeholderBranchId) })), this.writeHTML(state.mark("]", scopeId + " " + ("P" + branchId) + " " + placeholderBranchId)), body.writeEffect(branchId, "_f")) : this.boundary.abort(/* @__PURE__ */ Error("An @placeholder cannot contain async content.")), this.writeHTML(state.mark("!", reorderId)), state.reorder(body);
 			} else body.next = this.next, this.next = body;
 			this.placeholder = null;
 		}

package/dist/translator/index.js

@@ -784,6 +784,7 @@ function isInvokedFunction(expr) {
 //#endregion
 //#region src/translator/util/constants/structure-kind.ts
 const Visit = "visit";
+const Text = "text";
 const Child = "child";
 const SectionRef = "sectionRef";
 const ExportRef = "exportRef";
@@ -2373,11 +2374,11 @@ let _dynamic_tag = (scopeId, accessor, tag, inputOrArgs, content, inputIsArgs, s
 			}
 			const childScope = getScopeById(branchId);
 			const needsScript = childScope && (childScope["EventAttributes:a"] || childScope["ControlledHandler:a"]);
-			if (needsScript) _script(branchId, "d");
+			if (needsScript) _script(branchId, "_d");
 			if (shouldResume || needsScript) _html(state.mark("'", scopeId + " " + accessor + " " + branchId));
 		};
 		renderNative();
-		result = _el(branchId, "e");
+		result = _el(branchId, "_e");
 	} else {
 		const chunk = void 0;
 		const beforeBranch = shouldResume ? deferBranchStart(chunk) : void 0;
@@ -3898,6 +3899,12 @@ function writeTo(path) {
 		}
 	};
 }
+function writeTextTo(path, value) {
+	if (value) getSection(path).structure?.push({
+		kind: Text,
+		value
+	});
+}
 function pushMarkup(structure, str) {
 	if (!str) return;
 	const last = structure.length - 1;
@@ -3923,17 +3930,31 @@ function resolveStructure(section) {
 		walkComment: [],
 		steps: startDynamic ? [0, 1] : []
 	};
-	for (const op of section.structure) if (typeof op === "string") appendLiteral(resolved.writes, op);
-	else if (typeof op === "number") resolved.steps.push(op);
+	let textEdge;
+	for (const op of section.structure) if (typeof op === "string") {
+		appendLiteral(resolved.writes, op);
+		textEdge = void 0;
+	} else if (typeof op === "number") resolved.steps.push(op);
 	else switch (op.kind) {
+		case Text:
+			if (textEdge === "child") separate(resolved);
+			appendLiteral(resolved.writes, op.value);
+			textEdge = "own";
+			break;
 		case Visit:
 			if (!op.claimed) continue;
 			flushSteps(resolved);
 			resolved.walkComment.push(walkCodeToName[op.code]);
 			appendLiteral(resolved.walks, String.fromCharCode(op.code));
-			if (op.code !== 32) appendLiteral(resolved.writes, "<!>");
+			if (op.code !== 32) {
+				appendLiteral(resolved.writes, "<!>");
+				textEdge = void 0;
+			}
 			break;
 		case Child: {
+			const content = refContent(op.renderer);
+			if (textEdge && content?.startType === 4) separate(resolved);
+			textEdge = content?.endType === 4 ? "child" : void 0;
 			flushSteps(resolved);
 			const template = op.renderer && resolveRef(op.renderer, "template");
 			if (template) resolved.writes.push(template, "");
@@ -3952,6 +3973,13 @@ function resolveStructure(section) {
 	flushSteps(resolved);
 	return resolved;
 }
+function separate(resolved) {
+	appendLiteral(resolved.writes, "<!>");
+	resolved.steps.push(0, 1);
+}
+function refContent(ref) {
+	return (ref && (ref.kind === "sectionRef" ? ref.section : ref.program.section))?.content;
+}
 function resolveRef(ref, part) {
 	if (ref.kind === "sectionRef") return getSectionMetaIdentifiers(ref.section)[part === "template" ? "writes" : "walks"];
 	const name = ref.program.domExports[part];
@@ -9942,12 +9970,12 @@ var placeholder_default = {
 			const staticText = confident ? getHTMLRuntime()[node.escape ? "_escape" : "_unescaped"](computed) : void 0;
 			if (staticText === "") return;
 			const extra = node.extra || {};
-			if (confident && node.escape) writeTo(placeholder)`${staticText}`;
+			if (confident && node.escape) writeTextTo(placeholder, staticText);
 			else {
 				const siblingText = extra[kSiblingText];
 				if (siblingText === 1 || siblingText === 2) visit(placeholder, 37);
 				else {
-					writeTo(placeholder)` `;
+					writeTextTo(placeholder, " ");
 					visit(placeholder, 32);
 				}
 			}
@@ -10659,7 +10687,7 @@ var tag_default = {
 var text_default = {
 	analyze: { exit(text) {
 		if (isNonHTMLText(text)) return;
-		writeTo(text)`${text.node.value}`;
+		writeTextTo(text, text.node.value);
 		if (!isStaticText(getPrevStaticSibling(text))) enterShallow(text);
 	} },
 	translate: { exit(text) {

package/dist/translator/util/constants/structure-kind.d.ts

@@ -1,4 +1,5 @@
 export declare const Visit = "visit";
+export declare const Text = "text";
 export declare const Child = "child";
 export declare const SectionRef = "sectionRef";
 export declare const ExportRef = "exportRef";

package/dist/translator/util/sections.d.ts

@@ -28,7 +28,11 @@ export interface StructureExportRef {
     path: string;
     hint: string;
 }
-export type StructureOp = string | Step.Value | StructureVisit | StructureChild;
+export type StructureOp = string | Step.Value | StructureText | StructureVisit | StructureChild;
+export interface StructureText {
+    kind: typeof StructureKind.Text;
+    value: string;
+}
 export interface StructureVisit {
     kind: typeof StructureKind.Visit;
     code: typeof WalkCode.Get | typeof WalkCode.Replace | typeof WalkCode.DynamicTagWithVar;

package/dist/translator/util/structure.d.ts

@@ -6,6 +6,7 @@ export declare function exit(path: t.NodePath<any>): void;
 export declare function enterShallow(path: t.NodePath<any>): void;
 export declare function child(tag: t.NodePath<t.MarkoTag>, name: string, renderer?: StructureRef): void;
 export declare function writeTo(path: t.NodePath<any>): (strs: TemplateStringsArray, ...exprs: string[]) => void;
+export declare function writeTextTo(path: t.NodePath<any>, value: string): void;
 export declare function visit(path: t.NodePath<t.MarkoTag | t.MarkoPlaceholder | t.Program>, code: StructureVisit["code"], claimed?: boolean): StructureVisit | undefined;
 type ResolvedPart = string | t.Expression;
 interface ResolvedStructure {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "marko",
-  "version": "6.3.42",
+  "version": "6.3.43",
   "description": "Optimized runtime for Marko templates.",
   "keywords": [
     "api",
@@ -57,7 +57,7 @@
     "magic-string": "^0.30.21"
   },
   "devDependencies": {
-    "@marko/runtime-tags": "npm:marko@6.3.42",
+    "@marko/runtime-tags": "npm:marko@6.3.43",
     "marko": "5.39.35"
   },
   "engines": {