@jxsuite/compiler 1.3.0 → 1.5.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,
@@ -47,7 +52,6 @@ import type {
   JxDocument,
   JxMappedArray,
   JxMutableNode,
-  JxPrototypeDef,
   JxStyle,
 } from "@jxsuite/schema/types";
 
@@ -161,11 +165,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 +204,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;
       }
 
@@ -335,6 +339,8 @@ function buildClientNode(
   );
 
   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;
 
@@ -530,9 +536,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 +562,7 @@ function buildClientNode(
           counter,
         );
       })
-      .join("\n  ");
+      .join(childSeparator(nextContext.preformatted));
   }
 
   // Self-closing tags
@@ -570,13 +581,16 @@ 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 "";
   }
   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 +600,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 +702,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 +718,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 +731,7 @@ function emitChildLit(c: JxMutableNode | string): string {
   if (isMappedArray(c)) {
     return emitArrayHole(c);
   }
-  return emitLitMapTemplate(c);
+  return emitLitMapTemplate(c, preformatted);
 }
 
 /**
@@ -888,61 +918,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,6 +972,25 @@ function emitCookieInit(key: string, cookieName: string, defaultVal: unknown) {
  * @param {string} ref
  * @returns {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/")) {
+    return ref.slice("$map/".length).replaceAll("/", ".");
+  }
+  if (ref.startsWith("#/state/")) {
+    return `state.${ref.slice("#/state/".length).replaceAll("/", ".")}`;
+  }
+  return `state.${ref.replaceAll("/", ".")}`;
+}
+
 function refToBindingKey(ref: string) {
   if (ref.startsWith("#/state/")) {
     return ref.slice("#/state/".length).replaceAll("/", "_");