@jxsuite/compiler 1.5.0 → 2.0.2

package/src/targets/compile-element.ts

@@ -7,15 +7,16 @@
 
 import { RESERVED_KEYS, camelToKebab } from "@jxsuite/runtime";
 import {
+  PREFORMATTED_TAGS,
   collectStyles,
   compileExpression,
+  compileOperandSource,
   compileStatements,
   emitFormulaFn,
   emitRequestFetch,
   escapeHtml,
   isMutating,
   isSchemaOnly,
-  PREFORMATTED_TAGS,
   srcImportBinding,
   tagNameToClassName,
 } from "../shared.ts";
@@ -27,11 +28,15 @@ import {
   isMappedArray,
   isNamedFormulaDef,
   isRef,
+  isTagExpression,
   paramNames,
 } from "@jxsuite/schema/guards";
 import { parseJxDocument } from "@jxsuite/schema/parse";
 import type { ExpressionNode } from "../shared.ts";
+import { resolveShadowMode } from "../shadow.ts";
+import type { ShadowMode } from "../shadow.ts";
 import type { FormatRegistry } from "@jxsuite/schema/format-registry";
+import { escapeToken, objectKey, refAccessor, refSegments } from "@jxsuite/runtime/pointer";
 import type {
   JxDocument,
   JxExpressionDef,
@@ -40,6 +45,7 @@ import type {
   JxMutableNode,
   JxPrototypeDef,
   JxStyle,
+  ProjectConfig,
 } from "@jxsuite/schema/types";
 
 /** Options accepted by compileElement. */
@@ -55,6 +61,8 @@ export interface CompileElementOptions {
   $media?: Record<string, string>;
   formats?: FormatRegistry;
   basePath?: string | null;
+  /** Project `defaults`, read for `defaults.shadow` (spec.md §16.6). */
+  defaults?: ProjectConfig["defaults"];
   [key: string]: unknown;
 }
 
@@ -152,6 +160,7 @@ export async function compileElement(
       className,
       elementImports,
       rewriteSrc ? (spec: string) => rewriteSrc(spec, currentDir) : undefined,
+      resolveShadowMode(doc, opts.defaults),
     );
     const outputPath = filePath ? filePath.replace(/\.json$/, ".js") : `${tagName}.js`;
     files.push({ content: jsContent, path: outputPath, tagName });
@@ -328,6 +337,7 @@ export function emitElementModule(
   className: string,
   elementImports: string[],
   rewriteSrc?: (specifier: string) => string,
+  shadow: ShadowMode | null = null,
 ) {
   const lines: string[] = ["// Generated by @jxsuite/compiler — do not edit manually"];
 
@@ -377,6 +387,7 @@ export function emitElementModule(
     // And a single list keeps every effect on the same lifecycle instead of leaking the ones nobody
     // Held a handle to.
     "  #effects = [];",
+    ...(shadow === null ? [] : ["  #root = null;"]),
     "",
     // Constructor: build reactive state
     "  constructor() {",
@@ -388,6 +399,8 @@ export function emitElementModule(
   const functionEntries: [string, JxExpressionDef | JxFunctionDef][] = [];
 
   const formulaEntries: [string, JxExpressionDef][] = [];
+  /** `"${…}"` state entries — computed, exactly as the runtime treats them. */
+  const templateEntries: [string, string][] = [];
   const callableRefs = collectCallableRefs(doc);
   for (const [key, def] of Object.entries(defs)) {
     const d = def as JxMutableNode;
@@ -415,6 +428,20 @@ export function emitElementModule(
       } else {
         functionEntries.push([key, d]);
       }
+    } else if (typeof def === "string" && def.includes("${")) {
+      /* A TEMPLATE STRING IS A COMPUTED, and the runtime has always said so — `runtime.ts`'s
+         second state pass is `if (typeof def === "string" && def.includes("${")) state[key] =
+         computed(() => evaluateTemplate(def, state))`, and `StateEntry`'s own schema description
+         reads "string with ${} → computed". This branch did not exist, so the compiler fell
+         through to `extractInitialValue` and emitted the template as a LITERAL.
+
+         The consequence is the worst shape a bug can take: the same component behaved one way in
+         Studio's canvas, which runs the runtime, and another way on the deployed site, which runs
+         this. A real site's `$switch` discriminant (`imageKey: "${state.image ? 'set' : ''}"`)
+         evaluated correctly in the editor and shipped as the literal text of its own expression,
+         so the case never matched and the image silently never rendered in production. Found by
+         building that site and reading the emitted component. */
+      templateEntries.push([key, def]);
     } else {
       // Use extractInitialValue to get the correct initial value
       const initVal = extractInitialValue(d);
@@ -427,7 +454,11 @@ export function emitElementModule(
   // Emit reactive({...}) with initial state values
   lines.push("    this.state = reactive({");
   for (const [key, initVal] of stateEntries) {
-    lines.push(`      ${key}: ${initVal},`);
+    /*
+     * A state key is author data, not an identifier: `{"user.name": 1}` is a legal document, and
+     * pasting it raw emitted `user.name: 1,` — a SyntaxError this build reported as a success.
+     */
+    lines.push(`      ${objectKey(key)}: ${initVal},`);
   }
   lines.push("    });");
 
@@ -439,7 +470,9 @@ export function emitElementModule(
         eventParam: "e",
         statePrefix: "s",
       });
-      lines.push(`    this.state.${key} = (s, e) => { ${compiled}; };`);
+      lines.push(
+        `    ${refAccessor("this.state", escapeToken(key))} = (s, e) => { ${compiled}; };`,
+      );
     } else if (hasStructuredBody(def)) {
       // Structured body (spec §20) — statements compiled against this.state; dispatch target is
       // The component instance itself (WHATWG dispatchEvent on the custom element).
@@ -449,7 +482,11 @@ export function emitElementModule(
         indent: "      ",
         statePrefix: "this.state",
       });
-      lines.push(`    this.state.${key} = (s, e) => {`, compiled, "    };");
+      lines.push(
+        `    ${refAccessor("this.state", escapeToken(key))} = (s, e) => {`,
+        compiled,
+        "    };",
+      );
     } else {
       const args = def.parameters ? paramNames(def.parameters) : (def.arguments ?? ["state"]);
       const paramList = args.join(", ");
@@ -464,17 +501,25 @@ export function emitElementModule(
       if (args[0] === "state") {
         if (def.$src) {
           // $src function — wrap imported function so it receives state
-          lines.push(`    this.state.${key} = (${paramList}) => ${key}(${paramList});`);
+          lines.push(
+            `    ${refAccessor("this.state", escapeToken(key))} = (${paramList}) => ${key}(${paramList});`,
+          );
         } else {
-          lines.push(`    this.state.${key} = (${paramList}) => {`, `      ${body}`, "    };");
+          lines.push(
+            `    ${refAccessor("this.state", escapeToken(key))} = (${paramList}) => {`,
+            `      ${body}`,
+            "    };",
+          );
         }
       } else {
         const callArgs = args.map((a: string) => (a === "state" ? "state" : "e")).join(", ");
         if (def.$src) {
-          lines.push(`    this.state.${key} = (state, e) => ${key}(${callArgs});`);
+          lines.push(
+            `    ${refAccessor("this.state", escapeToken(key))} = (state, e) => ${key}(${callArgs});`,
+          );
         } else {
           lines.push(
-            `    this.state.${key} = (state, e) => {`,
+            `    ${refAccessor("this.state", escapeToken(key))} = (state, e) => {`,
             `      const _fn = (${paramList}) => {`,
             `        ${body}`,
             "      };",
@@ -493,7 +538,19 @@ export function emitElementModule(
       eventParam: "e",
       statePrefix: "this.state",
     });
-    lines.push(`    this.state.${key} = ${emitFormulaFn(def, compiled)};`);
+    lines.push(
+      `    ${refAccessor("this.state", escapeToken(key))} = ${emitFormulaFn(def, compiled)};`,
+    );
+  }
+
+  /* Emitted with the same `state.` → `this.state.` rewrite the inline-body path below uses, into a
+     template literal — which is what `evaluateTemplate` is, so the result is a string on both
+     sides rather than a string here and a raw value there. */
+  for (const [key, template] of templateEntries) {
+    lines.push(
+      "",
+      `    ${refAccessor("this.state", escapeToken(key))} = computed(() => \`${template.replaceAll("state.", "this.state.")}\`);`,
+    );
   }
 
   // Emit computed signals — $src or inline body
@@ -504,11 +561,15 @@ export function emitElementModule(
         eventParam: "e",
         statePrefix: "this.state",
       });
-      lines.push(`    this.state.${key} = computed(() => ${compiled});`);
+      lines.push(
+        `    ${refAccessor("this.state", escapeToken(key))} = computed(() => ${compiled});`,
+      );
     } else if (def.$src) {
-      lines.push(`    this.state.${key} = computed(() => ${key}(this.state));`);
+      lines.push(
+        `    ${refAccessor("this.state", escapeToken(key))} = computed(() => ${key}(this.state));`,
+      );
     } else {
-      lines.push(`    this.state.${key} = computed(() => {`);
+      lines.push(`    ${refAccessor("this.state", escapeToken(key))} = computed(() => {`);
       const body = (typeof def.body === "string" ? def.body : "").replaceAll(
         "state.",
         "this.state.",
@@ -528,23 +589,61 @@ export function emitElementModule(
     }
   }
 
+  // Subtrees a branching construct would otherwise repeat are lifted into `const _cN = html`…``
+  // Declarations emitted inside `template()`, above the `return` — inside it, so they are rebuilt
+  // Per render and read the same `s` the template does.
+  const hoistScope = createHoistScope();
+  const templateBody = emitLitChildren(doc.children, doc.style, "      ", false, false, hoistScope);
+
   lines.push(
     // Template method
     "  template() {",
     "    const s = this.state;",
+    ...hoistScope.decls,
     "    return html`",
-    emitLitChildren(doc.children, doc.style, "      "),
+    templateBody,
     "    `;",
     "  }",
     "",
+    ...(shadow === null
+      ? []
+      : [
+          /*
+           * The hydration contract. A declarative shadow root the parser already materialized
+           * MUST be adopted rather than replaced — calling `attachShadow` over one throws, and
+           * even where it did not, replacing it would discard the server-rendered markup this
+           * whole feature exists to ship.
+           *
+           * An `open` root is on the element. A `closed` one is not, by definition, and
+           * `ElementInternals` is the standard's only way back to it — which is why the two modes
+           * need different code rather than a mode string in one call.
+           */
+          "  #renderRoot() {",
+          "    if (this.#root) return this.#root;",
+          shadow === "closed"
+            ? "    this.#root = this.attachInternals().shadowRoot ?? this.attachShadow({ mode: 'closed' });"
+            : "    this.#root = this.shadowRoot ?? this.attachShadow({ mode: 'open' });",
+          "    return this.#root;",
+          "  }",
+          "",
+        ]),
     // ConnectedCallback
     "  connectedCallback() {",
+    /*
+     * Each of the three absorption paths below skips a `#`-prefixed key: private state is not part
+     * of the component's interface and is never settable through $props (spec.md §5.6). Emitted as
+     * a runtime check rather than resolved at build time because all three read keys that arrive
+     * with the instance — an attribute payload, an attribute name, a property a parent set — none
+     * of which the compiler can see. The interpreter enforces the same rule in `runtime.ts`; the
+     * two tiers agreeing is the point, since a document is authored against whichever runs.
+     */
     // Read $props from data-jx-props attribute (set by compiler for pre-rendered instances)
     "    const _pa = this.getAttribute('data-jx-props');",
     "    if (_pa) {",
     "      try {",
     "        const _p = JSON.parse(_pa);",
     "        for (const [k, v] of Object.entries(_p)) {",
+    "          if (k.startsWith('#')) continue;",
     "          if (k in this.state) this.state[k] = v;",
     "        }",
     "      } catch {}",
@@ -556,6 +655,7 @@ export function emitElementModule(
     "    const _pn = this.getAttributeNames().filter(n => n.startsWith('props.') && n.length > 6);",
     "    for (const _n of _pn) {",
     "      const _k = _n.slice(6);",
+    "      if (_k.startsWith('#')) { this.removeAttribute(_n); continue; }",
     "      if (_k in this.state) {",
     "        this.state[_k] = this.getAttribute(_n);",
     "        this.removeAttribute(_n);",
@@ -564,6 +664,7 @@ export function emitElementModule(
     // Merge JS properties set before connection (by parent runtime).
     // Only check own properties to avoid inherited DOM properties like `title`.
     "    for (const key of Object.keys(this.state)) {",
+    "      if (key.startsWith('#')) continue;",
     "      if (this.hasOwnProperty(key) && this[key] !== undefined) {",
     "        this.state[key] = this[key];",
     "      }",
@@ -616,7 +717,14 @@ export function emitElementModule(
     }
   }
   const hasSlot = treeHasSlot(doc.children);
-  if (hasSlot) {
+  /*
+   * The slot emulation is a light-DOM construction: save the host's children, render over them,
+   * then splice them back where the literal `<slot>` element landed. Inside a shadow root that
+   * would be actively wrong — the light children ARE the slotted content and must stay in the
+   * light tree, where a real `<slot>` distributes them. This is the single largest behavioural
+   * difference between the two modes, and the reason shadow cannot be the default.
+   */
+  if (hasSlot && shadow === null) {
     // Save light DOM children (slotted content) before clearing
     lines.push(
       "    const _slotted = Array.from(this.childNodes).filter(n => n.nodeType === 1 || (n.nodeType === 3 && n.textContent.trim()));",
@@ -626,10 +734,42 @@ export function emitElementModule(
     "    if (this.hasAttribute('data-jx-prerendered')) {",
     "      this.removeAttribute('data-jx-prerendered');",
     "    }",
-    "    this.innerHTML = '';",
-    "    this.#effects.push(effect(() => render(this.template(), this)));",
   );
-  if (hasSlot) {
+  if (shadow === null) {
+    lines.push(
+      /*
+       * `replaceChildren()`, not `innerHTML = ''`: identical semantics for clearing an element, and
+       * it is not a DOM injection sink. The runtime made the same change for the same reason — a
+       * write that was never injecting anything still costs a page a Trusted Types policy under
+       * `require-trusted-types-for 'script'`, and this one is emitted into every light-DOM element
+       * module a site ships.
+       */
+      "    this.replaceChildren();",
+      "    this.#effects.push(effect(() => render(this.template(), this)));",
+    );
+  } else {
+    /*
+     * Nothing clears the LIGHT DOM here: those children are the slotted content, and a real
+     * `<slot>` distributes them.
+     *
+     * The shadow root is cleared, and for the same reason light mode clears `innerHTML`: lit
+     * renders into a container by appending its own tree, so leaving the declarative markup in
+     * place shows the component twice. A declarative shadow root is a first paint, not a
+     * hydration target — Jx does not use lit-ssr's `hydrate`, and the light path discards its
+     * prerender too.
+     *
+     * The stylesheet link is the one thing that survives: it is what styles this root, the
+     * document's head cannot reach in here, and re-adding it would refetch it.
+     */
+    lines.push(
+      "    const _root = this.#renderRoot();",
+      "    for (const _n of [..._root.childNodes]) {",
+      "      if (!(_n.nodeType === 1 && _n.tagName === 'LINK')) _n.remove();",
+      "    }",
+      "    this.#effects.push(effect(() => render(this.template(), _root)));",
+    );
+  }
+  if (hasSlot && shadow === null) {
     // Replace <slot> placeholder with saved slotted content
     lines.push(
       "    const _slot = this.querySelector('slot');",
@@ -661,6 +801,46 @@ export function emitElementModule(
   return lines.join("\n");
 }
 
+/**
+ * Declarations that must be emitted _beside_ a lit template rather than inside it.
+ *
+ * `emitLitNode` writes one template string, so a construct with N branches recursed once per branch
+ * and wrote the whole subtree N times into the bundle — the authored document contains it once. A
+ * scope collects `const _cN = html`…`;` declarations for subtrees that would otherwise repeat, and
+ * the branches reference those instead.
+ *
+ * One scope per template body: `template()` has its own, and each map callback gets a fresh one
+ * because its declarations close over that callback's `item`/`index`.
+ */
+interface HoistScope {
+  decls: string[];
+  byText: Map<string, string>;
+}
+
+function createHoistScope(): HoistScope {
+  return { byText: new Map(), decls: [] };
+}
+
+/**
+ * Hoist an emitted subtree into a `const` and return the `${_cN}` expression referencing it.
+ * Identical subtrees collapse onto a single declaration.
+ *
+ * @param {HoistScope} scope
+ * @param {string} text
+ * @returns {string}
+ */
+function hoistSubtree(scope: HoistScope, text: string): string {
+  const existing = scope.byText.get(text);
+  if (existing) {
+    return existing;
+  }
+  const name = `_c${scope.decls.length}`;
+  scope.decls.push(`    const ${name} = html\`\n${text}\n    \`;`);
+  const ref = `\${${name}}`;
+  scope.byText.set(text, ref);
+  return ref;
+}
+
 /**
  * Convert Jx children to lit-html template content.
  *
@@ -676,6 +856,7 @@ function emitLitChildren(
   indent: string,
   preformatted = false,
   inMap = false,
+  scope: HoistScope | null = null,
 ) {
   if (!children) {
     return "";
@@ -695,7 +876,7 @@ function emitLitChildren(
     .map((child: JxMutableNode | string) =>
       isMappedArray(child)
         ? emitMappedArray(child, indent)
-        : emitLitNode(child, preformatted ? "" : indent, preformatted, inMap),
+        : emitLitNode(child, preformatted ? "" : indent, preformatted, inMap, scope),
     )
     .join(preformatted ? "" : "\n");
 }
@@ -711,7 +892,10 @@ function emitLitNode(
   indent: string,
   preformatted = false,
   inMap = false,
-) {
+  scope: HoistScope | null = null,
+  /** Pre-emitted inner content, so a branching construct can share one subtree across branches. */
+  innerOverride: string | null = null,
+): string {
   // String children are text nodes
   if (typeof def === "string") {
     if (def.includes("${")) {
@@ -726,6 +910,67 @@ function emitLitNode(
     return "";
   }
 
+  /* A CHOSEN TAG BECOMES ONE TEMPLATE PER CANDIDATE, keyed by the discriminant — the same shape
+     this function already emits for `$switch` twenty lines down, because it is the same problem:
+     lit cannot bind a tag name, and the alternative (`lit-html/static.js`'s `unsafeStatic`) is an
+     HTML-injection primitive with an unbounded template cache, deliberately avoided in this repo.
+
+     The candidates are literal `TagName`s by schema, so this terminates and every branch is a legal
+     element. The subtree is written once in the DOCUMENT, and — since the hoist scope below lifts it
+     into a single `const` the branches share — once in the BUNDLE too. */
+  if (isTagExpression(def.tagName)) {
+    const expression = def.tagName.$expression;
+    // The same two shapes `$switch` accepts: a pointer, or an expression node.
+    // `compileOperandSource` — the compiler's counterpart to the runtime's `evaluateOperand`, so
+    // Both sides read the discriminant the same way.
+    const discriminant = compileOperandSource(expression.target, {
+      eventParam: "e",
+      statePrefix: "s",
+    });
+    const branches =
+      expression.operator === "?:"
+        ? [
+            [true, expression.value],
+            [false, expression.initial],
+          ]
+        : [...Object.entries(expression.cases), ["__default__", expression.default]];
+    // The inner content is identical across candidates — only the tag differs — so it is emitted
+    // Once and every branch references it. Skipped when the candidates disagree about being
+    // Preformatted, because `white-space` decides how the subtree itself is indented.
+    const candidateTags = branches.map(([, candidate]) => String(candidate));
+    const sharedPre = candidateTags.map((t) => preformatted || PREFORMATTED_TAGS.has(t));
+    let innerRef: string | null = null;
+    if (scope && sharedPre.every((p) => p === sharedPre[0])) {
+      const sharedInner = emitNodeInner(def, `${indent}  `, sharedPre[0] === true, inMap, scope);
+      if (sharedInner.trim() !== "") {
+        innerRef = hoistSubtree(scope, sharedInner);
+      }
+    }
+    const rendered: [string | boolean | undefined, string][] = branches.map(([key, candidate]) => {
+      const asLiteral = { ...def, tagName: candidate as string };
+      return [key, emitLitNode(asLiteral, `${indent}  `, preformatted, inMap, scope, innerRef)];
+    });
+    if (expression.operator === "?:") {
+      const [, yes] = rendered[0]!;
+      const [, no] = rendered[1]!;
+      return `${indent}\${${discriminant}
+  ? html\`
+${yes}
+  \`
+  : html\`
+${no}
+  \`}`;
+    }
+    const entries = rendered
+      .filter(([key]) => key !== "__default__")
+      .map(([key, text]) => `  ${JSON.stringify(key)}: html\`\n${text}\n  \``);
+    const [, fallback] = rendered.at(-1)!;
+    return (
+      `${indent}${"$"}{{\n${entries.join(",\n")}\n}` +
+      `[String(${discriminant})] ?? html\`\n${fallback}\n\`}`
+    );
+  }
+
   const tag = def.tagName ?? "div";
   // `white-space` inherits, so once inside a <pre> the whole subtree stays whitespace-significant.
   const inPre = preformatted || PREFORMATTED_TAGS.has(tag);
@@ -775,6 +1020,12 @@ function emitLitNode(
       parts.push(`.${key}="\${${refToExpr((val as JxMutableNode).$ref as string)}}"`);
     } else if (typeof val === "string" && val.includes("${")) {
       parts.push(`.${key}="${toLitExpr(val)}"`);
+    } else {
+      // A literal IDL value (`value: "a"`, `checked: true`) is still a property the author asked
+      // For. Without this branch it was dropped outright — including every `${…}` a build-time map
+      // Expansion had already resolved to a constant, which is how an unrolled `<option>` lost its
+      // Value and fell back to using its own label as its key.
+      parts.push(`.${key}="\${${JSON.stringify(val)}}"`);
     }
   }
 
@@ -834,34 +1085,70 @@ function emitLitNode(
     return `${indent}<${tag}${attrsStr}\n${indent}>`;
   }
 
-  let inner = "";
+  const inner = innerOverride ?? emitNodeInner(def, indent, inPre, inMap, scope);
+
+  // Inside a <pre>, the newline before `>` would land in the element's own text.
+  return inPre
+    ? `<${tag}${attrsStr}>${inner}</${tag}>`
+    : `${indent}<${tag}${attrsStr}\n${indent}>${inner}</${tag}>`;
+}
+
+/**
+ * Emit an element's inner content — the `$switch` lookup, text, raw HTML, or children.
+ *
+ * Split out of `emitLitNode` so a chosen `tagName` can emit it once and share it across candidates
+ * instead of recursing into the same subtree per branch.
+ *
+ * @param {JxMutableNode} def
+ * @param {string} indent
+ * @param {boolean} inPre
+ * @param {boolean} inMap
+ * @param {HoistScope | null} scope
+ * @returns {string}
+ */
+function emitNodeInner(
+  def: JxMutableNode,
+  indent: string,
+  inPre: boolean,
+  inMap: boolean,
+  scope: HoistScope | null,
+): string {
   if (def.$switch) {
     const switchRef = isRef(def.$switch) ? def.$switch.$ref : (def.$switch as string);
     const switchExpr = refToExpr(switchRef);
     const cases = (def.cases ?? {}) as Record<string, JxMutableNode>;
-    const caseEntries: string[] = [];
+    const rendered: [string, string][] = [];
     for (const [key, caseDef] of Object.entries(cases)) {
       if (!caseDef || isRef(caseDef)) {
         continue;
       }
-      const renderedCase = emitLitNode(caseDef, `${indent}  `, false, inMap);
-      caseEntries.push(`  ${JSON.stringify(key)}: html\`\n${renderedCase}\n  \``);
+      rendered.push([key, emitLitNode(caseDef, `${indent}  `, false, inMap, scope)]);
     }
-    inner = `\${{\n${caseEntries.join(",\n")}\n}[${switchExpr}]}`;
-  } else if (def.textContent !== undefined) {
-    inner = toLitTextContent(def.textContent);
-  } else if (def.innerHTML !== undefined) {
-    inner = def.innerHTML;
-  } else if (def.children) {
-    inner = inPre
-      ? emitLitChildren(def.children, def.style, "", true, inMap)
-      : `\n${emitLitChildren(def.children, def.style, `${indent}  `, false, inMap)}\n${indent}`;
+    // Cases that emit byte-identical subtrees share one hoisted `const` rather than repeating it
+    // Once per case — the authored document names the subtree once (#126).
+    const repeated = new Set(
+      rendered
+        .map(([, text]) => text)
+        .filter((text, i, all) => all.indexOf(text) !== i && text.trim() !== ""),
+    );
+    const caseEntries = rendered.map(([key, text]) => {
+      const body = scope && repeated.has(text) ? hoistSubtree(scope, text) : text;
+      return `  ${JSON.stringify(key)}: html\`\n${body}\n  \``;
+    });
+    return `\${{\n${caseEntries.join(",\n")}\n}[${switchExpr}]}`;
   }
-
-  // Inside a <pre>, the newline before `>` would land in the element's own text.
-  return inPre
-    ? `<${tag}${attrsStr}>${inner}</${tag}>`
-    : `${indent}<${tag}${attrsStr}\n${indent}>${inner}</${tag}>`;
+  if (def.textContent !== undefined) {
+    return toLitTextContent(def.textContent);
+  }
+  if (def.innerHTML !== undefined) {
+    return def.innerHTML;
+  }
+  if (def.children) {
+    return inPre
+      ? emitLitChildren(def.children, def.style, "", true, inMap, scope)
+      : `\n${emitLitChildren(def.children, def.style, `${indent}  `, false, inMap, scope)}\n${indent}`;
+  }
+  return "";
 }
 
 /**
@@ -901,6 +1188,36 @@ function emitMappedArray(arrayDef: JxMappedArray, indent: string) {
     parts.push(`class="${toLitExpr(String(mapDef.className))}"`);
   }
 
+  // IDL properties (`value`, `checked`, `selected`, …) go straight on the element, exactly as they
+  // Do outside a map (emitLitNode above). Without this loop the map body silently dropped them, so
+  // An `<option value="${$map.item.v}">` emitted no value at all and every option fell back to its
+  // Own label — a change handler then received a display string instead of the key.
+  for (const [key, val] of Object.entries(mapDef)) {
+    if (
+      RESERVED_KEYS.has(key) ||
+      key.startsWith("$") ||
+      key.startsWith("on") ||
+      key === "tagName" ||
+      key === "id" ||
+      key === "className" ||
+      key === "style" ||
+      key === "children" ||
+      key === "textContent" ||
+      key === "innerHTML" ||
+      key === "attributes"
+    ) {
+      continue;
+    }
+
+    if (val && typeof val === "object" && (val as JxMutableNode).$ref) {
+      parts.push(`.${key}="\${${mapRefToExpr((val as JxMutableNode).$ref as string)}}"`);
+    } else if (typeof val === "string" && val.includes("${")) {
+      parts.push(`.${key}="${toLitExpr(val)}"`);
+    } else {
+      parts.push(`.${key}="\${${JSON.stringify(val)}}"`);
+    }
+  }
+
   if (mapDef.$props) {
     for (const [key, val] of Object.entries(mapDef.$props)) {
       if (isRef(val)) {
@@ -938,11 +1255,14 @@ function emitMappedArray(arrayDef: JxMappedArray, indent: string) {
 
   const attrsStr = parts.length > 0 ? `\n${indent}    ${parts.join(`\n${indent}    `)}` : "";
 
+  // The map body gets its own hoist scope: a subtree lifted out of a branch here closes over this
+  // Callback's `item`/`index`, so its declaration belongs inside the callback, not in `template()`.
+  const mapScope = createHoistScope();
   let inner = "";
   if (mapDef.textContent !== undefined) {
     inner = toLitTextContent(mapDef.textContent);
   } else if (mapDef.children) {
-    inner = `\n${emitLitChildren(mapDef.children, null, `${indent}      `, false, true)}\n${indent}    `;
+    inner = `\n${emitLitChildren(mapDef.children, null, `${indent}      `, false, true, mapScope)}\n${indent}    `;
   }
 
   const body = `html\`\n${indent}  <${tag}${attrsStr}\n${indent}  >${inner}</${tag}>\n${indent}\``;
@@ -955,8 +1275,11 @@ function emitMappedArray(arrayDef: JxMappedArray, indent: string) {
   // `$map["item"]` — and nests correctly, since an inner map shadows the outer binding exactly as
   // The interpreter's child scope does. Emitted only when referenced, so output is otherwise
   // Unchanged.
-  const callback = body.includes("$map")
-    ? `(item, index) => { const $map = { item, index }; return ${body}; }`
+  const prelude =
+    (body.includes("$map") ? `const $map = { item, index }; ` : "") +
+    mapScope.decls.map((d) => `${d.trim()} `).join("");
+  const callback = prelude
+    ? `(item, index) => { ${prelude}return ${body}; }`
     : `(item, index) => ${body}`;
 
   return `${indent}\${${itemsExpr}.map(${callback})}`;
@@ -970,14 +1293,38 @@ function emitMappedArray(arrayDef: JxMappedArray, indent: string) {
  */
 function refToExpr(ref: string) {
   if (ref.startsWith("#/state/")) {
-    const path = ref.slice("#/state/".length);
-    return `s.${path.replaceAll("/", ".")}`;
+    return refAccessor("s", ref.slice("#/state/".length));
   }
   if (ref.startsWith("$map/")) {
-    const path = ref.slice("$map/".length);
-    return path.replaceAll("/", ".");
+    return mapVarAccessor(ref.slice("$map/".length));
+  }
+  /*
+   * The remaining schemes, mirroring `compileRef` in @jxsuite/runtime. They used to fall through to
+   * the state branch, so `parent#/user` emitted `s.parent#/user` — a syntax error. A prop reaches
+   * this element through `state`, so `parent#/` reads from `s` exactly as `#/state/` does.
+   */
+  if (ref.startsWith("parent#/")) {
+    return refAccessor("s", ref.slice("parent#/".length));
+  }
+  if (ref.startsWith("window#/")) {
+    return refAccessor("window", ref.slice("window#/".length));
   }
-  return `s.${ref}`;
+  if (ref.startsWith("document#/")) {
+    return refAccessor("document", ref.slice("document#/".length));
+  }
+  return refAccessor("s", ref);
+}
+
+/**
+ * `$map/item/title` reads the loop variable `item`, so its first segment is an emitted identifier
+ * rather than a member of some receiver — the one ref form whose base is not fixed.
+ *
+ * @param {string} path
+ * @returns {string}
+ */
+function mapVarAccessor(path: string) {
+  const [head, ...rest] = refSegments(path);
+  return refAccessor(head ?? "", rest.map((seg) => escapeToken(seg)).join("/"));
 }
 
 /**
@@ -986,7 +1333,7 @@ function refToExpr(ref: string) {
  */
 function mapRefToExpr(ref: string) {
   if (ref.startsWith("$map/")) {
-    return ref.slice("$map/".length).replaceAll("/", ".");
+    return mapVarAccessor(ref.slice("$map/".length));
   }
   return refToExpr(ref);
 }