@jxsuite/compiler 0.22.1 → 0.23.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/compiler",
-  "version": "0.22.1",
+  "version": "0.23.1",
   "description": "Jx static HTML compiler, island detector, and site builder",
   "license": "MIT",
   "repository": {
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "^15.3.5",
-    "@jxsuite/parser": "^0.22.1",
-    "@jxsuite/runtime": "^0.22.1",
+    "@jxsuite/parser": "^0.23.1",
+    "@jxsuite/runtime": "^0.23.1",
     "remark-gfm": "^4.0.1",
     "remark-stringify": "^11.0.0",
     "sharp": "^0.34.5",

package/src/shared.js

@@ -6,9 +6,17 @@
  */
 
 import { camelToKebab, toCSSText, RESERVED_KEYS } from "@jxsuite/runtime";
+import { compileExpression, isMutating, evaluateExpression } from "@jxsuite/runtime/expression";
 
 // Re-export runtime utilities used by submodules
-export { camelToKebab, toCSSText, RESERVED_KEYS };
+export {
+  camelToKebab,
+  toCSSText,
+  RESERVED_KEYS,
+  compileExpression,
+  isMutating,
+  evaluateExpression,
+};
 
 // CDN defaults
 export const DEFAULT_REACTIVITY_SRC = "https://esm.sh/@vue/reactivity@3.5.32";
@@ -231,7 +239,7 @@ export function buildInitialScope(defs = {}, parentScope = null) {
       setOwnScopeValue(scope, key, cloneValue(d.default));
       continue;
     }
-    if (!d.$prototype && !isSchemaOnly(d)) {
+    if (!d.$prototype && !("$expression" in d) && !isSchemaOnly(d)) {
       setOwnScopeValue(scope, key, cloneValue(d));
     }
   }
@@ -243,6 +251,17 @@ export function buildInitialScope(defs = {}, parentScope = null) {
     }
     if (!def || typeof def !== "object") continue;
     const d = /** @type {JxStateObject & JxPrototypeDef} */ (def);
+    if ("$expression" in d) {
+      const node = /** @type {any} */ (d).$expression;
+      if (isMutating(node.operator)) {
+        setOwnScopeValue(scope, key, (/** @type {any} */ s, /** @type {any} */ event) =>
+          evaluateExpression(node, s, event),
+        );
+      } else {
+        defineLazyScopeValue(scope, key, () => evaluateExpression(node, scope, null));
+      }
+      continue;
+    }
     if (d.$prototype === "Function") {
       if (d.body) {
         const fn = new Function("state", ...(d.parameters ?? d.arguments ?? []), d.body);

package/src/site/site-build.js

@@ -37,6 +37,7 @@ import {
   collectServerEntries,
   renderStaticNode,
   resolveStaticValue,
+  resolveRefValue,
   DEFAULT_REACTIVITY_SRC,
   DEFAULT_LIT_HTML_SRC,
 } from "../shared.js";
@@ -435,7 +436,9 @@ async function compilePage(
   expandComponents(layoutDoc, componentDefs);
 
   // Strip resolved timing: "compiler" state entries — they're now baked into the tree
-  // and keeping them would cause isDynamic() to misclassify the page as dynamic
+  // and keeping them would cause isDynamic() to misclassify the page as dynamic.
+  // Also strip resolved content arrays (from ContentCollection) that have been
+  // baked into unrolled map templates.
   if (layoutDoc.state) {
     for (const [key, def] of Object.entries(layoutDoc.state)) {
       if (key === "$site" || key === "$page") continue;
@@ -446,6 +449,8 @@ async function compilePage(
         /** @type {JxMutableNode} */ (def).timing === "compiler"
       ) {
         delete layoutDoc.state[key];
+      } else if (Array.isArray(def)) {
+        delete layoutDoc.state[key];
       }
     }
   }
@@ -576,6 +581,69 @@ function isBareSpecifier(s) {
   );
 }
 
+/**
+ * Deep-clone a map template, resolving template strings and $ref values against the given scope.
+ *
+ * @param {JxMutableNode} template
+ * @param {Record<string, unknown>} scope
+ * @returns {JxMutableNode}
+ */
+function expandMapTemplate(template, scope) {
+  if (!template || typeof template !== "object") return template;
+  const node = /** @type {JxMutableNode} */ ({});
+  for (const [k, v] of Object.entries(template)) {
+    if (k === "children" && Array.isArray(v)) {
+      node.children = v.map((child) => {
+        if (typeof child === "string") return child;
+        return expandMapTemplate(/** @type {JxMutableNode} */ (child), scope);
+      });
+    } else if (k === "style" && v && typeof v === "object") {
+      node.style = { ...v };
+      for (const [sk, sv] of Object.entries(node.style)) {
+        if (typeof sv === "string" && isTemplateString(sv)) {
+          node.style[sk] = evaluateMapTemplate(sv, scope) ?? sv;
+        }
+      }
+    } else if (k === "attributes" && v && typeof v === "object") {
+      node.attributes = { ...v };
+      for (const [ak, av] of Object.entries(node.attributes)) {
+        if (typeof av === "string" && isTemplateString(av)) {
+          node.attributes[ak] = evaluateMapTemplate(av, scope) ?? av;
+        }
+      }
+    } else if (typeof v === "string" && isTemplateString(v)) {
+      node[k] = evaluateMapTemplate(v, scope) ?? v;
+    } else {
+      node[k] = v;
+    }
+  }
+  return node;
+}
+
+/**
+ * Evaluate a template string in the context of a mapped array item. Exposes `item`, `index`,
+ * `state`, and `$map` as local variables.
+ *
+ * @param {string} str
+ * @param {Record<string, unknown>} scope
+ * @returns {unknown}
+ */
+function evaluateMapTemplate(str, scope) {
+  try {
+    const item = /** @type {Record<string, unknown>} */ (scope.$map)?.item;
+    const index = /** @type {Record<string, unknown>} */ (scope.$map)?.index;
+    const singleExprMatch = str.match(/^\$\{(.+)\}$/s);
+    if (singleExprMatch) {
+      const fn = new Function("state", "$map", "item", "index", `return (${singleExprMatch[1]})`);
+      return fn(scope, scope.$map, item, index);
+    }
+    const fn = new Function("state", "$map", "item", "index", `return \`${str}\``);
+    return fn(scope, scope.$map, item, index);
+  } catch {
+    return null;
+  }
+}
+
 /**
  * Recursively resolve template strings in a document tree against a scope. Mutates the document in
  * place — evaluates ${...} in innerHTML, textContent, style values, and attribute values.
@@ -617,6 +685,34 @@ function resolveDocTemplates(node, scope) {
     }
   }
   const rawChildren = /** @type {unknown} */ (node.children);
+  if (
+    rawChildren &&
+    typeof rawChildren === "object" &&
+    !Array.isArray(rawChildren) &&
+    /** @type {JxMutableNode} */ (rawChildren).$prototype === "Array"
+  ) {
+    const arrayDef = /** @type {JxMutableNode} */ (rawChildren);
+    const itemsSrc = arrayDef.items;
+    let items = null;
+    if (itemsSrc && typeof itemsSrc === "object" && /** @type {JxMutableNode} */ (itemsSrc).$ref) {
+      const ref = /** @type {string} */ (/** @type {JxMutableNode} */ (itemsSrc).$ref);
+      items = resolveRefValue(ref, scope);
+    } else if (Array.isArray(itemsSrc)) {
+      items = itemsSrc;
+    }
+    if (Array.isArray(items) && arrayDef.map) {
+      node.children = items.map((item, index) => {
+        const childScope = Object.create(scope);
+        childScope.$map = { item, index };
+        childScope["$map/item"] = item;
+        childScope["$map/index"] = index;
+        const expanded = expandMapTemplate(arrayDef.map, childScope);
+        resolveDocTemplates(expanded, childScope);
+        return expanded;
+      });
+      return;
+    }
+  }
   if (typeof rawChildren === "string" && isTemplateString(rawChildren)) {
     const resolved = evaluateStaticTemplate(rawChildren, scope);
     if (Array.isArray(resolved)) {

package/src/targets/compile-client.js

@@ -23,6 +23,8 @@ import {
   escapeHtml,
   DEFAULT_REACTIVITY_SRC,
   DEFAULT_LIT_HTML_SRC,
+  compileExpression,
+  isMutating,
 } from "../shared.js";
 
 /**
@@ -85,6 +87,19 @@ export function compileClient(raw, opts) {
 
     const d = /** @type {JxMutableNode} */ (def);
 
+    // $expression: Shape 5
+    if ("$expression" in d) {
+      const node = /** @type {any} */ (d).$expression;
+      if (isMutating(node.operator)) {
+        const compiled = compileExpression(node, { statePrefix: "state", eventParam: "e" });
+        onEntries.push([key, { args: ["state", "e"], body: compiled }]);
+      } else {
+        const compiled = compileExpression(node, { statePrefix: "state", eventParam: "e" });
+        computedEntries.push([key, `() => ${compiled}`]);
+      }
+      continue;
+    }
+
     // $prototype: "Function"
     if (d.$prototype === "Function") {
       const args = d.parameters ?? d.arguments;
@@ -188,7 +203,7 @@ ${importmapEntries.join(",\n")}
   }
   </script>
   ${styleBlock}
-  <script type="module" src="/${modulePath}"></script>
+  <script type="module" src="./${modulePath}"></script>
 </head>
 <body>
   ${bodyContent}
@@ -274,6 +289,15 @@ function buildClientNode(def, raw, context, bindings, handlers, counter) {
       bindAttrs.push(`@${eventName}="${key}"`);
       handlers.set(key, { args: v.parameters ?? v.arguments ?? ["state", "event"], body: v.body });
       needsBind = true;
+    } else if (val && typeof val === "object" && "$expression" in /** @type {any} */ (val)) {
+      const key = `_h${counter.h++}`;
+      bindAttrs.push(`@${eventName}="${key}"`);
+      const compiled = compileExpression(/** @type {any} */ (val).$expression, {
+        statePrefix: "state",
+        eventParam: "e",
+      });
+      handlers.set(key, { args: ["state", "e"], body: compiled });
+      needsBind = true;
     }
   }
 
@@ -500,6 +524,12 @@ function emitLitMapTemplate(def) {
     ) {
       const body = mapRefsToLit(/** @type {string} */ (/** @type {JxMutableNode} */ (val).body));
       attrs += " @" + eventName + "=${(e) => { " + body + " }}";
+    } else if (val && typeof val === "object" && "$expression" in /** @type {any} */ (val)) {
+      const compiled = compileExpression(/** @type {any} */ (val).$expression, {
+        statePrefix: "state",
+        eventParam: "e",
+      });
+      attrs += " @" + eventName + "=${(e) => { state.$map = { item, index }; " + compiled + "; }}";
     }
   }
 

package/src/targets/compile-element.js

@@ -6,7 +6,14 @@
  */
 
 import { camelToKebab, RESERVED_KEYS } from "@jxsuite/runtime";
-import { escapeHtml, tagNameToClassName, isSchemaOnly, collectStyles } from "../shared.js";
+import {
+  escapeHtml,
+  tagNameToClassName,
+  isSchemaOnly,
+  collectStyles,
+  compileExpression,
+  isMutating,
+} from "../shared.js";
 
 /**
  * Compile a Jx custom element document to a JS module string.
@@ -230,7 +237,14 @@ export function emitElementModule(doc, className, elementImports) {
 
   for (const [key, def] of Object.entries(defs)) {
     const d = /** @type {JxMutableNode} */ (def);
-    if (d && typeof d === "object" && !Array.isArray(d) && d.$prototype === "Function") {
+    if (d && typeof d === "object" && !Array.isArray(d) && "$expression" in d) {
+      const node = /** @type {any} */ (d).$expression;
+      if (isMutating(node.operator)) {
+        functionEntries.push([key, d]);
+      } else {
+        computedEntries.push([key, d]);
+      }
+    } else if (d && typeof d === "object" && !Array.isArray(d) && d.$prototype === "Function") {
       if (typeof d.body === "string" && d.body.includes("return")) {
         computedEntries.push([key, d]);
       } else {
@@ -255,7 +269,10 @@ export function emitElementModule(doc, className, elementImports) {
   // Emit functions: this.state.fnName = (state) => { body } or imported $src function
   for (const [key, def] of functionEntries) {
     lines.push("");
-    if (def.$src) {
+    if ("$expression" in def) {
+      const compiled = compileExpression(def.$expression, { statePrefix: "s", eventParam: "e" });
+      lines.push(`    this.state.${key} = (s, e) => { ${compiled}; };`);
+    } else if (def.$src) {
       // $src function — wrap imported function so it receives state
       const args = def.parameters ?? def.arguments ?? ["state"];
       const paramList = args.join(", ");
@@ -272,7 +289,13 @@ export function emitElementModule(doc, className, elementImports) {
   // Emit computed signals — $src or inline body
   for (const [key, def] of computedEntries) {
     lines.push("");
-    if (def.$src) {
+    if ("$expression" in def) {
+      const compiled = compileExpression(def.$expression, {
+        statePrefix: "this.state",
+        eventParam: "e",
+      });
+      lines.push(`    this.state.${key} = computed(() => ${compiled});`);
+    } else if (def.$src) {
       lines.push(`    this.state.${key} = computed(() => ${key}(this.state));`);
     } else {
       lines.push(`    this.state.${key} = computed(() => {`);
@@ -491,6 +514,12 @@ function emitLitNode(def, indent) {
       parts.push(
         `@${eventName}="\${(e) => ${refToExpr(/** @type {string} */ (/** @type {JxMutableNode} */ (val).$ref))}(s, e)}"`,
       );
+    } else if (val && typeof val === "object" && "$expression" in /** @type {any} */ (val)) {
+      const compiled = compileExpression(/** @type {any} */ (val).$expression, {
+        statePrefix: "s",
+        eventParam: "e",
+      });
+      parts.push(`@${eventName}="\${(e) => { ${compiled}; }}"`);
     } else if (
       val &&
       typeof val === "object" &&
@@ -561,6 +590,12 @@ function emitMappedArray(arrayDef, indent) {
       parts.push(
         `@${eventName}="\${(e) => ${refToExpr(/** @type {string} */ (/** @type {JxMutableNode} */ (val).$ref))}(s, e)}"`,
       );
+    } else if (val && typeof val === "object" && "$expression" in /** @type {any} */ (val)) {
+      const compiled = compileExpression(/** @type {any} */ (val).$expression, {
+        statePrefix: "s",
+        eventParam: "e",
+      });
+      parts.push(`@${eventName}="\${(e) => { ${compiled}; }}"`);
     }
   }