@jxsuite/compiler 1.4.0 → 2.0.0

package/src/targets/compile-client.ts

@@ -16,21 +16,26 @@ import {
   DEFAULT_LIT_HTML_SRC,
   DEFAULT_REACTIVITY_SRC,
   buildAttrs,
+  childSeparator,
   colorSchemePrePaintScript,
   compileExpression,
   compileStatements,
   compileStyles,
   createCompileContext,
   emitFormulaFn,
+  emitRequestFetch,
   escapeHtml,
   isMutating,
   isRefObject,
   isSchemaOnly,
   isTemplateString,
+  PREFORMATTED_TAGS,
   pureSchemeOf,
   resolveStaticValue,
+  srcImportBinding,
 } from "../shared.ts";
 import {
+  bodyReturnsValue,
   hasStructuredBody,
   isExpandedSignal,
   isExpressionDef,
@@ -38,16 +43,24 @@ import {
   isMappedArray,
   isNamedFormulaDef,
   isPrototypeDef,
+  isTagExpression,
   paramNames,
+  tagNameCandidates,
 } from "@jxsuite/schema/guards";
 import type { CompileContext, ExpressionNode } from "../shared.ts";
+import {
+  escapeToken,
+  objectKey,
+  refAccessor,
+  refBindingKey,
+  refSegments,
+} from "@jxsuite/runtime/pointer";
 import type {
   JsonObject,
   JsonValue,
   JxDocument,
   JxMappedArray,
   JxMutableNode,
-  JxPrototypeDef,
   JxStyle,
 } from "@jxsuite/schema/types";
 
@@ -161,11 +174,11 @@ export function compileClient(
         if (!srcImportMap.has(def.$src)) {
           srcImportMap.set(def.$src, new Set());
         }
-        (srcImportMap.get(def.$src) as Set<string>).add(key);
+        (srcImportMap.get(def.$src) as Set<string>).add(srcImportBinding(key, def));
 
         // $src functions always produce computed entries (they return values)
         computedEntries.push([key, `() => { return ${key}(state); }`]);
-      } else if (typeof def.body === "string" && def.body.includes("return")) {
+      } else if (typeof def.body === "string" && bodyReturnsValue(def.body)) {
         // Body contains return → computed
         computedEntries.push([key, `() => { ${def.body} }`]);
       } else {
@@ -200,7 +213,7 @@ export function compileClient(
       // $prototype: "Request"
       if (def.$prototype === "Request") {
         stateEntries.push([key, null]);
-        initBlocks.push(emitRequestInit(key, def));
+        initBlocks.push(emitRequestFetch(key, def));
         continue;
       }
 
@@ -334,7 +347,22 @@ function buildClientNode(
     raw?.$media ?? context.media,
   );
 
+  /* REFUSED, LOUDLY. A chosen tag has no implementation in this target: the element's identity is
+     fixed in the prerendered markup, so there is nothing here to re-choose at hydration the way the
+     `$switch` binding below re-chooses a subtree. Emitting a silently wrong element would be an
+     instance of the class the tagName pattern was added to end, so a dynamic page that needs a
+     chosen tag is told to put the element in a component (which compiles through `compile-element`,
+     where the construct is implemented) rather than shipping markup with the wrong tag. */
+  if (isTagExpression(def.tagName)) {
+    throw new Error(
+      "A tag chosen at creation is not supported on a dynamic page yet (candidates: " +
+        `${tagNameCandidates(def.tagName).join(", ")}). Move the element into a component, or ` +
+        "give it a literal tagName.",
+    );
+  }
   const tag = def.tagName ?? "div";
+  // `white-space` inherits, so once inside a <pre> the whole subtree stays whitespace-significant.
+  nextContext.preformatted = context.preformatted === true || PREFORMATTED_TAGS.has(tag);
   const bindAttrs = [];
   let needsBind = false;
 
@@ -478,6 +506,33 @@ function buildClientNode(
   // Inner content
   let inner = "";
   const source = raw ?? def;
+  if (source.$switch) {
+    // ─── $switch → lit-html render binding ───
+    // Without this branch the node fell through to the generic element path, which emitted a
+    // Container and then looked for `children` to recurse into — `cases` is not `children`, so the
+    // Subtree was never visited and the page shipped with the content missing, no error (#127).
+    // The container is emitted empty for the same reason the mapped-array branch below is: lit's
+    // `render` appends into the container rather than replacing its existing children, so any
+    // Prerendered branch would survive alongside the rendered one.
+    counter.needsLit = true;
+    const swKey = `_sw${counter.sw}`;
+    counter.sw += 1;
+    const discriminant = isRefObject(source.$switch)
+      ? `state.${refToBindingKey((source.$switch as { $ref: string }).$ref)}`
+      : `\`${String(source.$switch)}\``;
+    const cases = (source.cases ?? {}) as Record<string, JxMutableNode>;
+    const caseEntries = Object.entries(cases)
+      // An external `$ref` case cannot be fetched at compile time, exactly as in the static target.
+      .filter(([, caseDef]) => caseDef && !isRefObject(caseDef))
+      .map(
+        ([key, caseDef]) =>
+          `${JSON.stringify(key)}: html\`${emitChildLit(caseDef, nextContext.preformatted)}\``,
+      );
+    bindings.set(swKey, `() => ({${caseEntries.join(", ")}})[String(${discriminant})] ?? html\`\``);
+    bindAttrs.push(`:render="${swKey}"`);
+    const bindAttrStrSwitch = ` ${bindAttrs.join(" ")}`;
+    return `<${tag}${staticAttrs} data-bind${bindAttrStrSwitch}></${tag}>`;
+  }
   if (source.textContent !== undefined && !needsBind) {
     const value = resolveStaticValue(source.textContent, nextContext.scope);
     inner = value == null ? "" : escapeHtml(String(value));
@@ -530,9 +585,14 @@ function buildClientNode(
     const listKey = `_children${counter.l}`;
     counter.l += 1;
     const childrenTpl = source.children
-      .map((c) => emitChildLit(c as JxMutableNode))
-      .join("\n      ");
-    bindings.set(listKey, `() => html\`\n      ${childrenTpl}\n    \``);
+      .map((c) => emitChildLit(c as JxMutableNode, nextContext.preformatted))
+      .join(childSeparator(nextContext.preformatted, "      "));
+    bindings.set(
+      listKey,
+      nextContext.preformatted
+        ? `() => html\`${childrenTpl}\``
+        : `() => html\`\n      ${childrenTpl}\n    \``,
+    );
     bindAttrs.push(`:render="${listKey}"`);
     needsBind = true;
     const bindAttrStr2 = ` ${bindAttrs.join(" ")}`;
@@ -551,7 +611,7 @@ function buildClientNode(
           counter,
         );
       })
-      .join("\n  ");
+      .join(childSeparator(nextContext.preformatted));
   }
 
   // Self-closing tags
@@ -570,13 +630,25 @@ function buildClientNode(
  * index.
  *
  * @param {JxMutableNode} def
+ * @param {boolean} [preformatted]
  * @returns {string}
  */
-function emitLitMapTemplate(def: JxMutableNode | undefined) {
+function emitLitMapTemplate(def: JxMutableNode | undefined, preformatted = false) {
   if (!def) {
     return "";
   }
+  // Same refusal as `buildClientNode` above, for the repeater's item template — this target has no
+  // Branch construct, and a silently wrong element is what the tagName pattern exists to prevent.
+  if (isTagExpression(def.tagName)) {
+    throw new Error(
+      "A tag chosen at creation is not supported inside a dynamic page's repeater yet " +
+        `(candidates: ${tagNameCandidates(def.tagName).join(", ")}). Move the item into a ` +
+        "component, or give it a literal tagName.",
+    );
+  }
   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);
   let attrs = "";
 
   if (def.id) {
@@ -586,6 +658,20 @@ function emitLitMapTemplate(def: JxMutableNode | undefined) {
     attrs += ` class="${mapRefsToLit(def.className)}"`;
   }
 
+  // $props → lit property bindings. The element target emits these; the client target emitted
+  // Nothing, so a component in a list silently received none of its per-item props.
+  if (def.$props && typeof def.$props === "object") {
+    for (const [k, v] of Object.entries(def.$props)) {
+      if (isRefObject(v)) {
+        attrs += ` .${k}="\${${mapRefToClientExpr((v as { $ref: string }).$ref)}}"`;
+      } else if (typeof v === "string" && isTemplateString(v)) {
+        attrs += ` .${k}="${mapRefsToLit(v)}"`;
+      } else {
+        attrs += ` .${k}="\${${JSON.stringify(v)}}"`;
+      }
+    }
+  }
+
   // Attributes object
   if (def.attributes && typeof def.attributes === "object") {
     for (const [k, v] of Object.entries(def.attributes)) {
@@ -674,7 +760,8 @@ function emitLitMapTemplate(def: JxMutableNode | undefined) {
     // Legacy whole-children repeater nested inside a map template.
     inner = `\n      ${emitArrayHole(def.children)}\n    `;
   } else if (Array.isArray(def.children)) {
-    inner = `\n      ${def.children.map((c) => emitChildLit(c)).join("\n      ")}\n    `;
+    const rendered = def.children.map((c) => emitChildLit(c, inPre));
+    inner = inPre ? rendered.join("") : `\n      ${rendered.join("\n      ")}\n    `;
   }
 
   const voidTags = new Set(["input", "br", "hr", "img", "meta", "link"]);
@@ -689,9 +776,10 @@ function emitLitMapTemplate(def: JxMutableNode | undefined) {
  * via a `.map()` hole), or a nested element.
  *
  * @param {JxMutableNode | string} c
+ * @param {boolean} [preformatted]
  * @returns {string}
  */
-function emitChildLit(c: JxMutableNode | string): string {
+function emitChildLit(c: JxMutableNode | string, preformatted = false): string {
   if (typeof c === "string") {
     return isTemplateString(c) ? mapRefsToLit(c) : escapeHtml(c);
   }
@@ -701,7 +789,7 @@ function emitChildLit(c: JxMutableNode | string): string {
   if (isMappedArray(c)) {
     return emitArrayHole(c);
   }
-  return emitLitMapTemplate(c);
+  return emitLitMapTemplate(c, preformatted);
 }
 
 /**
@@ -798,7 +886,11 @@ function emitClientModule(
   // State — reactive state
   lines.push("", "const state = reactive({");
   for (const [key, val] of stateEntries) {
-    lines.push(`  ${key}: ${JSON.stringify(val)},`);
+    /*
+     * State keys come from the document, so `{"user.name": 1}` is legal input. Pasting one raw as
+     * an identifier emitted `user.name: 1,` — a SyntaxError the build reported as a success.
+     */
+    lines.push(`  ${objectKey(key)}: ${JSON.stringify(val)},`);
   }
   lines.push("});", "");
 
@@ -813,7 +905,7 @@ function emitClientModule(
   // Computed signals on state
   if (computedEntries.length > 0) {
     for (const [key, expr] of computedEntries) {
-      lines.push(`state.${key} = computed(${expr});`);
+      lines.push(`${refAccessor("state", escapeToken(key))} = computed(${expr});`);
     }
     lines.push("");
   }
@@ -822,7 +914,7 @@ function emitClientModule(
   if (bindEntries.length > 0) {
     lines.push("const bind = {");
     for (const [key, expr] of bindEntries) {
-      lines.push(`  ${key}: ${expr},`);
+      lines.push(`  ${objectKey(key)}: ${expr},`);
     }
     lines.push("};");
   } else {
@@ -837,7 +929,7 @@ function emitClientModule(
       const argNames = def.args ?? ["state"];
       const callArgs = argNames.map((a: string) => (a === "state" ? "state" : "e")).join(", ");
       lines.push(
-        `  ${key}: (e) => { const fn = (${argNames.join(", ")}) => { ${def.body} }; fn(${
+        `  ${objectKey(key)}: (e) => { const fn = (${argNames.join(", ")}) => { ${def.body} }; fn(${
           callArgs
         }); },`,
       );
@@ -888,61 +980,8 @@ function emitClientModule(
 }
 
 // ─── Prototype init emitters ─────────────────────────────────────────────────
-
-/**
- * @param {string} key
- * @param {JxMutableNode} def
- * @returns {string}
- */
-function emitRequestInit(key: string, def: JxPrototypeDef) {
-  const { url } = def;
-  const method = def.method ?? "GET";
-  const isTemplateUrl = isTemplateString(url);
-
-  if (def.manual) {
-    return `// ${key}: manual Request — fetch triggered by user action`;
-  }
-
-  const lines: string[] = [
-    `// ${key}: auto-fetch from ${isTemplateUrl ? "(dynamic URL)" : url}`,
-    "effect(() => {",
-  ];
-
-  if (isTemplateUrl) {
-    lines.push(
-      `  const url = \`${url}\`;`,
-      '  if (!url || url === "undefined" || url.includes("undefined")) return;',
-    );
-  } else {
-    lines.push(`  const url = ${JSON.stringify(url)};`);
-  }
-
-  const fetchOpts: string[] = [];
-  if (method !== "GET") {
-    fetchOpts.push(`method: ${JSON.stringify(method)}`);
-  }
-  if (def.headers) {
-    fetchOpts.push(`headers: ${JSON.stringify(def.headers)}`);
-  }
-  if (def.body) {
-    const bodyStr =
-      typeof def.body === "object"
-        ? JSON.stringify(JSON.stringify(def.body))
-        : JSON.stringify(def.body);
-    fetchOpts.push(`body: ${bodyStr}`);
-  }
-
-  const optsStr = fetchOpts.length > 0 ? `, { ${fetchOpts.join(", ")} }` : "";
-  lines.push(
-    `  fetch(url${optsStr})`,
-    "    .then(r => r.ok ? r.json() : Promise.reject(r.statusText))",
-    `    .then(d => { state.${key} = d; })`,
-    `    .catch(e => { state.${key} = { error: String(e) }; });`,
-    "});",
-  );
-
-  return lines.join("\n");
-}
+// Request auto-fetch lives in shared.ts (`emitRequestFetch`) so the element target emits the same
+// Effect against `this.state`.
 
 /**
  * @param {string} key
@@ -995,11 +1034,38 @@ function emitCookieInit(key: string, cookieName: string, defaultVal: unknown) {
  * @param {string} ref
  * @returns {string}
  */
-function refToBindingKey(ref: string) {
+/**
+ * Lower a `$ref` to the JS expression that reads it inside a map callback — the mirror of the
+ * element target's `refToExpr`/`mapRefToExpr`. Distinct from `refToBindingKey` below, which
+ * flattens `/` to `_` to name a binding and would produce nonsense (`state.$map_item`) as an
+ * expression.
+ *
+ * @param {string} ref
+ * @returns {string}
+ */
+function mapRefToClientExpr(ref: string) {
+  if (ref.startsWith("$map/")) {
+    // The loop variable is an emitted identifier, so its first segment is the base, not a member.
+    const [head, ...rest] = refSegments(ref.slice("$map/".length));
+    return refAccessor(head ?? "", rest.map((seg) => escapeToken(seg)).join("/"));
+  }
   if (ref.startsWith("#/state/")) {
-    return ref.slice("#/state/".length).replaceAll("/", "_");
+    return refAccessor("state", ref.slice("#/state/".length));
   }
-  return ref.replaceAll("/", "_");
+  return refAccessor("state", ref);
+}
+
+/**
+ * The `bind`/`on` map key for a ref. It is emitted both as an object-literal key and as a
+ * `data-bind` attribute value, so it has to survive being a JavaScript identifier and an HTML
+ * attribute at once. Stripping the `#/state/` prefix first keeps every pure-slash ref on the key it
+ * already had — `#/state/user/name` is still `user_name` — so this fix changes no shipped output.
+ *
+ * @param {string} ref
+ * @returns {string}
+ */
+function refToBindingKey(ref: string) {
+  return refBindingKey(ref.startsWith("#/state/") ? ref.slice("#/state/".length) : ref);
 }
 
 /**
@@ -1011,11 +1077,8 @@ function addRefBinding(bindings: Map<string, string>, key: string, ref: string)
   if (bindings.has(key)) {
     return;
   }
-  if (ref.startsWith("#/state/")) {
-    const path = ref.slice("#/state/".length);
-    const parts = path.split("/");
-    bindings.set(key, `() => state.${parts.join(".")}`);
-  } else {
-    bindings.set(key, `() => state.${ref}`);
-  }
+  bindings.set(
+    key,
+    `() => ${refAccessor("state", ref.startsWith("#/state/") ? ref.slice("#/state/".length) : ref)}`,
+  );
 }