@jxsuite/compiler 0.28.5 → 0.30.1

package/src/site/site-build.ts

@@ -17,7 +17,7 @@ import {
   rmSync,
   writeFileSync,
 } from "node:fs";
-import { dirname, join, resolve } from "node:path";
+import { basename, dirname, join, resolve } from "node:path";
 import { isMappedArray, isRef } from "@jxsuite/schema/guards";
 import { loadProjectConfig } from "./site-loader.ts";
 import { discoverPages, expandDynamicRoutes, readPageDocument } from "./pages-discovery.ts";
@@ -54,6 +54,7 @@ import type {
   JxAttributeValue,
   JxElement,
   JxHeadEntry,
+  JxMappedArray,
   JxMutableNode,
   JxStateDefinition,
   JxStyle,
@@ -157,7 +158,11 @@ export async function buildSite(
           formats: formatRegistry,
         });
         for (const f of result.files) {
-          const outName = f.path.includes("/") ? (f.path.split("/").pop() as string) : f.path;
+          // Reduce the emitted path (an absolute source path with .json swapped to .js) to a bare
+          // Filename for the dist/components/ output. basename handles both / and \ — a
+          // Forward-slash-only split left the full drive path on Windows, so resolve() then wrote
+          // The sidecar back into the source tree instead of dist.
+          const outName = basename(f.path);
           writeFileSync(resolve(componentOutDir, outName), f.content, "utf8");
           if (f.tagName) {
             compiledComponentTags.push(f.tagName);
@@ -188,8 +193,7 @@ export async function buildSite(
   }
 
   // ── 5b. Collect server entries from components (for site-wide bundling) ──
-  /** @type {{ exportName: string; src: string }[]} */
-  const siteServerEntries = [];
+  const siteServerEntries: { exportName: string; src: string }[] = [];
   if (projectConfig.build.adapter) {
     for (const [, doc] of componentDefs) {
       const entries = collectServerEntries(doc);
@@ -207,8 +211,7 @@ export async function buildSite(
 
   const cfImages = projectConfig.images.optimize && projectConfig.images.service === "cloudflare";
   const imageCache = projectConfig.images.optimize && !cfImages ? loadCache(projectRoot) : null;
-  /** @type {import("./image-transform.ts").ImageMetaCache | null} */
-  const imageMetaCache = cfImages ? new Map() : null;
+  const imageMetaCache: ImageMetaCache | null = cfImages ? new Map() : null;
   if (cfImages) {
     console.log(
       `images.service is "cloudflare" — srcsets use /cdn-cgi/image transform URLs. ` +
@@ -274,7 +277,7 @@ export async function buildSite(
             mode: "export",
           })) as string;
           if (content) {
-            const sidecarPath = outPath.replace(/\.html$/, fmt.extensions[0]);
+            const sidecarPath = outPath.replace(/\.html$/, fmt.extensions[0]!);
             writeFileSync(sidecarPath, content, "utf8");
             fileCount += 1;
           }
@@ -326,7 +329,7 @@ export async function buildSite(
     const { adapter } = projectConfig.build;
     log("Generating site-wide server worker...");
 
-    const deduped = new Map();
+    const deduped = new Map<string, { exportName: string; src: string }>();
     for (const entry of siteServerEntries) {
       if (!deduped.has(entry.exportName)) {
         deduped.set(entry.exportName, entry);
@@ -460,7 +463,7 @@ async function compilePage(
   // Determine the page title — resolve template strings against the scope
   let title = pageTitle ?? projectConfig.name ?? "Jx Site";
   if (typeof title === "string" && isTemplateString(title)) {
-    title = evaluateStaticTemplate(title, scope) ?? (title as string);
+    title = (evaluateStaticTemplate(title, scope) as string | null) ?? (title as string);
   }
 
   // Resolve template strings in $head entries
@@ -595,14 +598,16 @@ function resolveHeadTemplates(headEntries: JxHeadEntry[], scope: Record<string,
       resolved.attributes = { ...resolved.attributes };
       for (const [k, v] of Object.entries(resolved.attributes)) {
         if (typeof v === "string" && isTemplateString(v)) {
-          resolved.attributes[k] = evaluateStaticTemplate(v, scope) ?? (v as string | boolean);
+          resolved.attributes[k] =
+            (evaluateStaticTemplate(v, scope) as string | boolean | null) ??
+            (v as string | boolean);
         }
       }
     }
     if (typeof resolved.textContent === "string" && isTemplateString(resolved.textContent)) {
       resolved.textContent =
-        evaluateStaticTemplate(resolved.textContent, scope) ??
-        (resolved.textContent as string | undefined);
+        (evaluateStaticTemplate(resolved.textContent, scope) as string | null) ??
+        resolved.textContent;
     }
     return resolved;
   });
@@ -662,11 +667,11 @@ function expandMapTemplate(template: JxElement, scope: Record<string, unknown>):
   const node = {} as JxElement;
   for (const [k, v] of Object.entries(template)) {
     if (k === "children" && Array.isArray(v)) {
-      node.children = v.map((child) => {
+      node.children = (v as (string | JxElement)[]).map((child) => {
         if (typeof child === "string") {
           return child;
         }
-        return expandMapTemplate(/** @type {JxMutableNode} */ child, scope);
+        return expandMapTemplate(child, scope);
       });
     } else if (k === "style" && v && typeof v === "object") {
       const style: JxStyle = { ...(v as JxStyle) };
@@ -718,10 +723,26 @@ function evaluateMapTemplate(str: string, scope: Record<string, unknown>) {
     const index = (scope.$map as Record<string, unknown>)?.index;
     const singleExprMatch = str.match(/^\$\{(.+)\}$/s);
     if (singleExprMatch) {
-      const fn = new Function("state", "$map", "item", "index", `return (${singleExprMatch[1]})`);
+      const fn = new Function(
+        "state",
+        "$map",
+        "item",
+        "index",
+        `return (${singleExprMatch[1]})`,
+      ) as (
+        state: Record<string, unknown>,
+        $map: unknown,
+        item: unknown,
+        index: unknown,
+      ) => unknown;
       return fn(scope, scope.$map, item, index);
     }
-    const fn = new Function("state", "$map", "item", "index", `return \`${str}\``);
+    const fn = new Function("state", "$map", "item", "index", `return \`${str}\``) as (
+      state: Record<string, unknown>,
+      $map: unknown,
+      item: unknown,
+      index: unknown,
+    ) => unknown;
     return fn(scope, scope.$map, item, index);
   } catch {
     return null;
@@ -751,49 +772,38 @@ function resolveDocTemplates(node: JxElement | string, scope: Record<string, unk
   }
   if (typeof node.textContent === "string" && isTemplateString(node.textContent)) {
     node.textContent =
-      evaluateStaticTemplate(node.textContent, scope) ?? (node.textContent as string | null);
+      (evaluateStaticTemplate(node.textContent, scope) as string | null) ??
+      (node.textContent as string | null);
   }
   if (node.style && typeof node.style === "object") {
     for (const [k, v] of Object.entries(node.style)) {
       if (typeof v === "string" && isTemplateString(v)) {
-        node.style[k] = evaluateStaticTemplate(v, scope) ?? (v as string | number | JxStyle);
+        node.style[k] =
+          (evaluateStaticTemplate(v, scope) as string | number | JxStyle | undefined) ??
+          (v as string | number | JxStyle);
       }
     }
   }
   if (node.attributes && typeof node.attributes === "object") {
     for (const [k, v] of Object.entries(node.attributes)) {
       if (typeof v === "string" && isTemplateString(v)) {
-        node.attributes[k] = evaluateStaticTemplate(v, scope) ?? v;
+        node.attributes[k] = (evaluateStaticTemplate(v, scope) as JxAttributeValue | null) ?? v;
       }
     }
   }
   if (node.$props && typeof node.$props === "object") {
     for (const [k, v] of Object.entries(node.$props)) {
       if (typeof v === "string" && isTemplateString(v)) {
-        node.$props[k] = evaluateStaticTemplate(v, scope) ?? v;
+        node.$props[k] = (evaluateStaticTemplate(v, scope) as JsonValue | null) ?? v;
       }
     }
   }
   const rawChildren = node.children;
+  // Legacy whole-children repeater: expand the items into the node's static children.
   if (isMappedArray(rawChildren)) {
-    const itemsSrc = rawChildren.items;
-    let items = null;
-    if (isRef(itemsSrc)) {
-      items = resolveRefValue(itemsSrc.$ref, scope);
-    } else if (Array.isArray(itemsSrc)) {
-      items = itemsSrc;
-    }
-    const mapTemplate = rawChildren.map;
-    if (Array.isArray(items) && mapTemplate) {
-      node.children = items.map((item, index) => {
-        const childScope = Object.create(scope);
-        childScope.$map = { index, item };
-        childScope["$map/item"] = item;
-        childScope["$map/index"] = index;
-        const expanded = expandMapTemplate(mapTemplate, childScope);
-        resolveDocTemplates(expanded, childScope);
-        return expanded;
-      });
+    const expanded = expandMappedArrayStatic(rawChildren, scope);
+    if (expanded) {
+      node.children = expanded;
       return;
     }
   }
@@ -809,7 +819,7 @@ function resolveDocTemplates(node: JxElement | string, scope: Record<string, unk
   } else if (Array.isArray(node.children)) {
     let i = 0;
     while (i < node.children.length) {
-      const child = node.children[i];
+      const child = node.children[i]!;
       if (typeof child === "string" && isTemplateString(child)) {
         const resolved = evaluateStaticTemplate(child, scope);
         if (Array.isArray(resolved)) {
@@ -822,12 +832,55 @@ function resolveDocTemplates(node: JxElement | string, scope: Record<string, unk
           continue;
         }
       }
+      // Array pseudo-element among siblings: expand its items in place.
+      if (isMappedArray(child)) {
+        const expanded = expandMappedArrayStatic(child, scope);
+        if (expanded) {
+          node.children.splice(i, 1, ...expanded);
+          i += expanded.length;
+          continue;
+        }
+      }
       resolveDocTemplates(child, scope);
       i += 1;
     }
   }
 }
 
+/**
+ * Statically expand a mapped array to its resolved item nodes when `items` resolves to an array at
+ * build time, or null otherwise (leave the array node for client-side rendering).
+ *
+ * @param {JxMappedArray} arrayDef
+ * @param {Record<string, unknown>} scope
+ * @returns {(JxElement | string)[] | null}
+ */
+function expandMappedArrayStatic(
+  arrayDef: JxMappedArray,
+  scope: Record<string, unknown>,
+): (JxElement | string)[] | null {
+  const itemsSrc = arrayDef.items;
+  let items: unknown = null;
+  if (isRef(itemsSrc)) {
+    items = resolveRefValue(itemsSrc.$ref, scope);
+  } else if (Array.isArray(itemsSrc)) {
+    items = itemsSrc;
+  }
+  const mapTemplate = arrayDef.map;
+  if (!Array.isArray(items) || !mapTemplate) {
+    return null;
+  }
+  return (items as unknown[]).map((item: unknown, index) => {
+    const childScope = Object.create(scope) as Record<string, unknown>;
+    childScope.$map = { index, item };
+    childScope["$map/item"] = item;
+    childScope["$map/index"] = index;
+    const expanded = expandMapTemplate(mapTemplate, childScope);
+    resolveDocTemplates(expanded, childScope);
+    return expanded;
+  });
+}
+
 /** Collector for CSS rules extracted from component slot content during expansion. */
 interface SlotCssCollector {
   rules: string[];
@@ -853,7 +906,7 @@ function expandComponents(
     return;
   }
   if (Array.isArray(node)) {
-    for (const n of node) {
+    for (const n of node as (JxElement | string)[]) {
       expandComponents(n, componentDefs, slotCss);
     }
     return;
@@ -1012,11 +1065,11 @@ function injectHead(html: string, headEntries: JxHeadEntry[], lang: string) {
   const existingMatch = html.match(headPattern);
   let preservedBlocks = "";
   if (existingMatch) {
-    const styles = existingMatch[1].match(/<style>[\s\S]*?<\/style>/gi);
+    const styles = existingMatch[1]!.match(/<style>[\s\S]*?<\/style>/gi);
     if (styles) {
       preservedBlocks += `\n  ${styles.join("\n  ")}`;
     }
-    const scripts = existingMatch[1].match(/<script[\s\S]*?<\/script>/gi);
+    const scripts = existingMatch[1]!.match(/<script[\s\S]*?<\/script>/gi);
     if (scripts) {
       preservedBlocks += `\n  ${scripts.join("\n  ")}`;
     }

package/src/targets/compile-class.ts

@@ -128,16 +128,16 @@ export function compileClassJson(classDef: JxClassDef, _opts: Record<string, unk
     if (m.role === "accessor") {
       // Getter
       if (m.getter) {
-        lines.push(`  ${staticPrefix}get ${prefix}${name}() {`);
-        lines.push(`    ${m.getter.body}`);
-        lines.push("  }");
+        lines.push(`  ${staticPrefix}get ${prefix}${name}() {`, `    ${m.getter.body}`, "  }");
       }
       // Setter
       if (m.setter) {
         const setterParams = resolveParams(m.setter.parameters ?? []);
-        lines.push(`  ${staticPrefix}set ${prefix}${name}(${setterParams}) {`);
-        lines.push(`    ${m.setter.body}`);
-        lines.push("  }");
+        lines.push(
+          `  ${staticPrefix}set ${prefix}${name}(${setterParams}) {`,
+          `    ${m.setter.body}`,
+          "  }",
+        );
       }
     } else {
       lines.push(`  ${staticPrefix}${asyncPrefix}${prefix}${name}(${params}) {`);
@@ -148,11 +148,7 @@ export function compileClassJson(classDef: JxClassDef, _opts: Record<string, unk
     }
   }
 
-  lines.push("}");
-  lines.push("");
-  lines.push(`export { ${className} };`);
-  lines.push(`export default ${className};`);
-  lines.push("");
+  lines.push("}", "", `export { ${className} };`, `export default ${className};`, "");
 
   return lines.join("\n");
 }

package/src/targets/compile-client.ts

@@ -39,6 +39,7 @@ import type {
   JsonObject,
   JsonValue,
   JxDocument,
+  JxMappedArray,
   JxMutableNode,
   JxPrototypeDef,
   JxStyle,
@@ -481,6 +482,22 @@ function buildClientNode(
       return `<${tag}${staticAttrs}${dataBindAttr2}${bindAttrStr2}>`;
     }
     return `<${tag}${staticAttrs}${dataBindAttr2}${bindAttrStr2}></${tag}>`;
+  } else if (Array.isArray(source.children) && source.children.some((c) => isMappedArray(c))) {
+    // ─── Children mix static nodes with array pseudo-elements ───
+    // Render the whole children region via one lit binding on this element (wrapper-less, one
+    // Lit part per element so multiple arrays among siblings don't collide), with each array
+    // Member expanded inline as a `.map()` hole.
+    counter.needsLit = true;
+    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    \``);
+    bindAttrs.push(`:render="${listKey}"`);
+    needsBind = true;
+    const bindAttrStr2 = ` ${bindAttrs.join(" ")}`;
+    return `<${tag}${staticAttrs} data-bind${bindAttrStr2}></${tag}>`;
   } else if (Array.isArray(source.children)) {
     const rawChildren = Array.isArray(raw?.children) ? raw.children : undefined;
     inner = source.children
@@ -611,10 +628,11 @@ function emitLitMapTemplate(def: JxMutableNode | undefined) {
     }
   } else if (def.innerHTML) {
     inner = mapRefsToLit(String(def.innerHTML));
+  } else if (isMappedArray(def.children)) {
+    // 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) => emitLitMapTemplate(c as JxMutableNode))
-      .join("\n      ")}\n    `;
+    inner = `\n      ${def.children.map((c) => emitChildLit(c)).join("\n      ")}\n    `;
   }
 
   const voidTags = new Set(["input", "br", "hr", "img", "meta", "link"]);
@@ -624,6 +642,42 @@ function emitLitMapTemplate(def: JxMutableNode | undefined) {
   return `<${tag}${attrs}>${inner}</${tag}>`;
 }
 
+/**
+ * Emit one child of a lit template: a string text node, an array pseudo-element (expanded inline
+ * via a `.map()` hole), or a nested element.
+ *
+ * @param {JxMutableNode | string} c
+ * @returns {string}
+ */
+function emitChildLit(c: JxMutableNode | string): string {
+  if (typeof c === "string") {
+    return isTemplateString(c) ? mapRefsToLit(c) : escapeHtml(c);
+  }
+  if (typeof c === "number" || typeof c === "boolean") {
+    return escapeHtml(String(c));
+  }
+  if (isMappedArray(c)) {
+    return emitArrayHole(c);
+  }
+  return emitLitMapTemplate(c);
+}
+
+/**
+ * Emit a lit-html `${(items ?? []).map(...)}` hole for a mapped array, expanding its template
+ * inline among sibling nodes (wrapper-less).
+ *
+ * @param {JxMappedArray} arrayDef
+ * @returns {string}
+ */
+function emitArrayHole(arrayDef: JxMappedArray): string {
+  const { items } = arrayDef;
+  const itemsExpr = isRefObject(items)
+    ? `state.${refToBindingKey((items as { $ref: string }).$ref)}`
+    : JSON.stringify(items ?? []);
+  const tpl = emitLitMapTemplate(arrayDef.map);
+  return `\${(${itemsExpr} ?? []).map((item, index) => html\`${tpl}\`)}`;
+}
+
 /**
  * Replace $map references: $map.item → item, $map.index → index
  *
@@ -696,15 +750,12 @@ function emitClientModule(
     lines.push(`import { ${[...names].join(", ")} } from '${src}';`);
   }
 
-  lines.push("");
-
   // State — reactive state
-  lines.push("const state = reactive({");
+  lines.push("", "const state = reactive({");
   for (const [key, val] of stateEntries) {
     lines.push(`  ${key}: ${JSON.stringify(val)},`);
   }
-  lines.push("});");
-  lines.push("");
+  lines.push("});", "");
 
   // Prototype init blocks (Request fetch, LocalStorage read, etc.)
   if (initBlocks.length > 0) {
@@ -750,38 +801,43 @@ function emitClientModule(
   } else {
     lines.push("const on = {};");
   }
-  lines.push("");
-
   // Hydration function
-  lines.push("function hydrate(root) {");
-  lines.push("  root.querySelectorAll('[data-bind]').forEach(el => {");
-  lines.push("    [...el.attributes].forEach(a => {");
-  lines.push("      if (a.name.startsWith(':')) {");
-  lines.push("        const parts = a.name.slice(1).split('.');");
-  lines.push("        const key = a.value;");
+  lines.push(
+    "",
+    "function hydrate(root) {",
+    "  root.querySelectorAll('[data-bind]').forEach(el => {",
+    "    [...el.attributes].forEach(a => {",
+    "      if (a.name.startsWith(':')) {",
+    "        const parts = a.name.slice(1).split('.');",
+    "        const key = a.value;",
+  );
   if (needsLit) {
-    lines.push("        if (parts[0] === 'render') {");
-    lines.push("          effect(() => { render(bind[key](), el); });");
-    lines.push("        } else if (parts[0] === 'style' && parts.length > 1) {");
+    lines.push(
+      "        if (parts[0] === 'render') {",
+      "          effect(() => { render(bind[key](), el); });",
+      "        } else if (parts[0] === 'style' && parts.length > 1) {",
+    );
   } else {
     lines.push("        if (parts[0] === 'style' && parts.length > 1) {");
   }
-  lines.push("          effect(() => { el.style[parts[1]] = bind[key](); });");
-  lines.push("        } else if (parts[0] === 'attr' && parts.length > 1) {");
-  lines.push("          effect(() => { el.setAttribute(parts[1], bind[key]()); });");
-  lines.push("        } else {");
-  lines.push("          const prop = parts[0].replace(/-([a-z])/g, (_, c) => c.toUpperCase());");
-  lines.push("          effect(() => { el[prop] = bind[key](); });");
-  lines.push("        }");
-  lines.push("      } else if (a.name.startsWith('@')) {");
-  lines.push("        el.addEventListener(a.name.slice(1), on[a.value]);");
-  lines.push("      }");
-  lines.push("    });");
-  lines.push("  });");
-  lines.push("}");
-  lines.push("");
-  lines.push("hydrate(document);");
-  lines.push("");
+  lines.push(
+    "          effect(() => { el.style[parts[1]] = bind[key](); });",
+    "        } else if (parts[0] === 'attr' && parts.length > 1) {",
+    "          effect(() => { el.setAttribute(parts[1], bind[key]()); });",
+    "        } else {",
+    "          const prop = parts[0].replace(/-([a-z])/g, (_, c) => c.toUpperCase());",
+    "          effect(() => { el[prop] = bind[key](); });",
+    "        }",
+    "      } else if (a.name.startsWith('@')) {",
+    "        el.addEventListener(a.name.slice(1), on[a.value]);",
+    "      }",
+    "    });",
+    "  });",
+    "}",
+    "",
+    "hydrate(document);",
+    "",
+  );
 
   return lines.join("\n");
 }
@@ -808,8 +864,10 @@ function emitRequestInit(key: string, def: JxPrototypeDef) {
   ];
 
   if (isTemplateUrl) {
-    lines.push(`  const url = \`${url}\`;`);
-    lines.push('  if (!url || url === "undefined" || url.includes("undefined")) return;');
+    lines.push(
+      `  const url = \`${url}\`;`,
+      '  if (!url || url === "undefined" || url.includes("undefined")) return;',
+    );
   } else {
     lines.push(`  const url = ${JSON.stringify(url)};`);
   }
@@ -830,11 +888,13 @@ function emitRequestInit(key: string, def: JxPrototypeDef) {
   }
 
   const optsStr = fetchOpts.length > 0 ? `, { ${fetchOpts.join(", ")} }` : "";
-  lines.push(`  fetch(url${optsStr})`);
-  lines.push("    .then(r => r.ok ? r.json() : Promise.reject(r.statusText))");
-  lines.push(`    .then(d => { state.${key} = d; })`);
-  lines.push(`    .catch(e => { state.${key} = { error: String(e) }; });`);
-  lines.push("});");
+  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");
 }