@jxsuite/compiler 0.22.1 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/compiler",
-  "version": "0.22.1",
+  "version": "0.23.0",
   "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.0",
+    "@jxsuite/runtime": "^0.23.0",
     "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/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;
@@ -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}; }}"`);
     }
   }