@jxsuite/compiler 0.22.0 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/compiler",
-  "version": "0.22.0",
+  "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.0",
-    "@jxsuite/runtime": "^0.22.0",
+    "@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);
@@ -518,11 +537,11 @@ export function compileStyles(doc, mediaQueries = {}, projectStyle = null) {
       for (const [key, val] of Object.entries(obj)) {
         if (val === null || typeof val !== "object" || Array.isArray(val)) continue;
         if (key.startsWith("@")) {
-          const query = key.startsWith("@--")
-            ? (mediaQueries[key.slice(1)] ?? key.slice(1))
-            : key.slice(1);
+          const atRule = key.startsWith("@--")
+            ? `@media ${mediaQueries[key.slice(1)] ?? key.slice(1)}`
+            : key;
           const mProps = toCSSText(val);
-          if (mProps) rules.push(`@media ${query} { ${selector} { ${mProps} } }`);
+          if (mProps) rules.push(`${atRule} { ${selector} { ${mProps} } }`);
           for (const [sel, sub] of Object.entries(/** @type {Record<string, unknown>} */ (val))) {
             if (sub === null || typeof sub !== "object" || Array.isArray(sub)) continue;
             if (sel.startsWith("@")) continue;
@@ -532,7 +551,7 @@ export function compileStyles(doc, mediaQueries = {}, projectStyle = null) {
                 ? `${selector}${sel}`
                 : `${selector} ${sel}`;
             const subProps = toCSSText(sub);
-            if (subProps) rules.push(`@media ${query} { ${resolved} { ${subProps} } }`);
+            if (subProps) rules.push(`${atRule} { ${resolved} { ${subProps} } }`);
           }
           continue;
         }
@@ -558,10 +577,12 @@ export function compileStyles(doc, mediaQueries = {}, projectStyle = null) {
         emitProjectRules(key, val);
       } else if (key.startsWith("@")) {
         // @media block at top level
-        const query = key.startsWith("@--")
-          ? (mediaQueries[key.slice(1)] ?? key.slice(1))
-          : key.slice(1);
-        rules.push(`@media ${query} { body { ${toCSSText(/** @type {object} */ (val))} } }`);
+        const atRule = key.startsWith("@--")
+          ? `@media ${mediaQueries[key.slice(1)] ?? key.slice(1)}`
+          : key.startsWith("@(")
+            ? `@media ${key.slice(1)}`
+            : key;
+        rules.push(`${atRule} { body { ${toCSSText(/** @type {object} */ (val))} } }`);
       }
     }
     // Collect CSS custom properties into :root {}
@@ -610,11 +631,13 @@ function emitNestedElement(selector, obj, rules, mediaQueries) {
   for (const [key, val] of Object.entries(obj)) {
     if (val === null || typeof val !== "object" || Array.isArray(val)) continue;
     if (key.startsWith("@")) {
-      const query = key.startsWith("@--")
-        ? (mediaQueries[key.slice(1)] ?? key.slice(1))
-        : key.slice(1);
+      const atRule = key.startsWith("@--")
+        ? `@media ${mediaQueries[key.slice(1)] ?? key.slice(1)}`
+        : key.startsWith("@(")
+          ? `@media ${key.slice(1)}`
+          : key;
       const mProps = toCSSText(val);
-      if (mProps) rules.push(`@media ${query} { ${selector} { ${mProps} } }`);
+      if (mProps) rules.push(`${atRule} { ${selector} { ${mProps} } }`);
       for (const [sel, sub] of Object.entries(/** @type {Record<string, unknown>} */ (val))) {
         if (sub === null || typeof sub !== "object" || Array.isArray(sub)) continue;
         if (sel.startsWith("@")) continue;
@@ -624,7 +647,7 @@ function emitNestedElement(selector, obj, rules, mediaQueries) {
             ? `${selector}${sel}`
             : `${selector} ${sel}`;
         const subProps = toCSSText(sub);
-        if (subProps) rules.push(`@media ${query} { ${resolved} { ${subProps} } }`);
+        if (subProps) rules.push(`${atRule} { ${resolved} { ${subProps} } }`);
       }
       continue;
     }
@@ -688,10 +711,13 @@ export function collectStyles(
     for (const [prop, val] of Object.entries(def.style)) {
       if (val === null || typeof val !== "object" || Array.isArray(val)) continue;
       if (prop.startsWith("@")) {
-        const query = prop.startsWith("@--")
-          ? (mediaQueries[prop.slice(1)] ?? prop.slice(1))
-          : prop.slice(1);
-        rules.push(`@media ${query} { ${selector} { ${toCSSText(val)} } }`);
+        const atRule = prop.startsWith("@--")
+          ? `@media ${mediaQueries[prop.slice(1)] ?? prop.slice(1)}`
+          : prop.startsWith("@(")
+            ? `@media ${prop.slice(1)}`
+            : prop;
+        const atBaseProps = toCSSText(val);
+        if (atBaseProps) rules.push(`${atRule} { ${selector} { ${atBaseProps} } }`);
         for (const [sel, nestedRules] of Object.entries(
           /** @type {Record<string, unknown>} */ (val),
         )) {
@@ -703,7 +729,7 @@ export function collectStyles(
             : sel.startsWith(":") || sel.startsWith(".") || sel.startsWith("[")
               ? `${selector}${sel}`
               : `${selector} ${sel}`;
-          rules.push(`@media ${query} { ${resolved} { ${toCSSText(nestedRules)} } }`);
+          rules.push(`${atRule} { ${resolved} { ${toCSSText(nestedRules)} } }`);
         }
       } else {
         const resolved = prop.startsWith("&")
@@ -1038,10 +1064,12 @@ export function buildComponentCSS(tagName, styleDef, doc = null, mediaQueries =
 
     for (const [prop, val] of Object.entries(styleDef)) {
       if (prop.startsWith("@")) {
-        const query = prop.startsWith("@--")
-          ? (mediaQueries[prop.slice(1)] ?? prop.slice(1))
-          : prop.slice(1);
-        rules.push(`@media ${query} { ${tagName} { ${toCSSText(/** @type {object} */ (val))} } }`);
+        const atRule = prop.startsWith("@--")
+          ? `@media ${mediaQueries[prop.slice(1)] ?? prop.slice(1)}`
+          : prop.startsWith("@(")
+            ? `@media ${prop.slice(1)}`
+            : prop;
+        rules.push(`${atRule} { ${tagName} { ${toCSSText(/** @type {object} */ (val))} } }`);
       } else if (
         prop.startsWith(":") ||
         prop.startsWith(".") ||

package/src/site/site-build.js

@@ -134,7 +134,7 @@ export async function buildSite(projectRoot, options = {}) {
     for (const file of componentFiles) {
       try {
         const componentPath = resolve(componentsDir, file);
-        const result = await compileElement(componentPath);
+        const result = await compileElement(componentPath, { $media: projectConfig.$media });
         for (const f of result.files) {
           const outName = f.path.includes("/")
             ? /** @type {string} */ (f.path.split("/").pop())

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.
@@ -16,7 +23,7 @@ import { escapeHtml, tagNameToClassName, isSchemaOnly, collectStyles } from "../
  * @returns {Promise<{ files: { path: string; content: string; tagName: string }[] }>}
  */
 export async function compileElement(sourcePath, opts = {}) {
-  const { resolveElementPath } = /** @type {JxMutableNode} */ (opts);
+  const { resolveElementPath, $media: optsMedia } = /** @type {JxMutableNode} */ (opts);
   /** @type {{ path: string; content: string; tagName: string }[]} */
   const files = [];
   /** @type {Set<string>} */
@@ -82,6 +89,9 @@ export async function compileElement(sourcePath, opts = {}) {
     }
 
     const className = tagNameToClassName(tagName);
+    if (optsMedia) {
+      doc.$media = { ...optsMedia, ...doc.$media };
+    }
     const jsContent = emitElementModule(doc, className, elementImports);
     const outputPath = filePath ? filePath.replace(/\.json$/, ".js") : `${tagName}.js`;
     files.push({ path: outputPath, content: jsContent, tagName });
@@ -227,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 {
@@ -252,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(", ");
@@ -269,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(() => {`);
@@ -488,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" &&
@@ -558,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}; }}"`);
     }
   }