@jxsuite/compiler 1.0.0 → 1.1.0

package/src/targets/compile-client.ts

@@ -17,8 +17,10 @@ import {
   DEFAULT_REACTIVITY_SRC,
   buildAttrs,
   compileExpression,
+  compileStatements,
   compileStyles,
   createCompileContext,
+  emitFormulaFn,
   escapeHtml,
   isMutating,
   isRefObject,
@@ -27,10 +29,12 @@ import {
   resolveStaticValue,
 } from "../shared.ts";
 import {
+  hasStructuredBody,
   isExpandedSignal,
   isExpressionDef,
   isFunctionDef,
   isMappedArray,
+  isNamedFormulaDef,
   isPrototypeDef,
   paramNames,
 } from "@jxsuite/schema/guards";
@@ -124,7 +128,11 @@ export function compileClient(
         eventParam: "e",
         statePrefix: "state",
       });
-      if (isMutating(node.operator)) {
+      if (isNamedFormulaDef(def)) {
+        // Named formula → a scope callable mapping positional args onto declared parameters.
+        // Call sites stay positional, matching the interpreter.
+        initBlocks.push(`state[${JSON.stringify(key)}] = ${emitFormulaFn(def, compiled)};`);
+      } else if (isMutating(node.operator)) {
         onEntries.push([key, { args: ["state", "e"], body: compiled }]);
       } else {
         computedEntries.push([key, `() => ${compiled}`]);
@@ -135,7 +143,18 @@ export function compileClient(
     // $prototype: "Function"
     if (isFunctionDef(def)) {
       const args = def.parameters ? paramNames(def.parameters) : def.arguments;
-      if (def.$src) {
+      if (hasStructuredBody(def)) {
+        // Structured body (spec §20) → an event handler compiled from statements.
+        // With parameters, a positional callable like a named formula.
+        const compiled = compileStatements(def.body, { eventParam: "e", statePrefix: "state" });
+        if (def.parameters && def.parameters.length > 0) {
+          initBlocks.push(
+            `state[${JSON.stringify(key)}] = ${emitFormulaFn(def, `(() => {\n${compiled}\n})()`)};`,
+          );
+        } else {
+          onEntries.push([key, { args: ["state", "e"], body: compiled }]);
+        }
+      } else if (def.$src) {
         if (!srcImportMap.has(def.$src)) {
           srcImportMap.set(def.$src, new Set());
         }
@@ -143,12 +162,12 @@ export function compileClient(
 
         // $src functions always produce computed entries (they return values)
         computedEntries.push([key, `() => { return ${key}(state); }`]);
-      } else if (def.body && def.body.includes("return")) {
+      } else if (typeof def.body === "string" && def.body.includes("return")) {
         // Body contains return → computed
         computedEntries.push([key, `() => { ${def.body} }`]);
       } else {
         // No return → event handler
-        onEntries.push([key, { args: args ?? ["state"], body: def.body }]);
+        onEntries.push([key, { args: args ?? ["state"], body: def.body as string | undefined }]);
       }
       continue;
     }
@@ -335,13 +354,22 @@ function buildClientNode(
       const key = refToBindingKey(val.$ref);
       bindAttrs.push(`@${eventName}="${key}"`);
       needsBind = true;
+    } else if (hasStructuredBody(val)) {
+      const key = `_h${counter.h}`;
+      counter.h += 1;
+      bindAttrs.push(`@${eventName}="${key}"`);
+      handlers.set(key, {
+        args: ["state", "e"],
+        body: compileStatements(val.body, { eventParam: "e", statePrefix: "state" }),
+      });
+      needsBind = true;
     } else if (isFunctionDef(val)) {
       const key = `_h${counter.h}`;
       counter.h += 1;
       bindAttrs.push(`@${eventName}="${key}"`);
       handlers.set(key, {
         args: val.parameters ? paramNames(val.parameters) : (val.arguments ?? ["state", "event"]),
-        body: val.body,
+        body: val.body as string | undefined,
       });
       needsBind = true;
     } else if (isExpressionDef(val)) {
@@ -594,6 +622,9 @@ function emitLitMapTemplate(def: JxMutableNode | undefined) {
     if (isRefObject(val)) {
       const key = refToBindingKey((val as JxMutableNode).$ref as string);
       attrs += ` @${eventName}=\${(e) => { state.$map = { item, index }; on.${key}(e); }}`;
+    } else if (hasStructuredBody(val)) {
+      const compiled = compileStatements(val.body, { eventParam: "e", statePrefix: "state" });
+      attrs += ` @${eventName}=\${(e) => { state.$map = { item, index }; ${compiled} }}`;
     } else if (val && typeof val === "object" && (val as JxMutableNode).$prototype === "Function") {
       const body = mapRefsToLit((val as JxMutableNode).body as string);
       attrs += ` @${eventName}=\${(e) => { ${body} }}`;

package/src/targets/compile-element.ts

@@ -9,15 +9,19 @@ import { RESERVED_KEYS, camelToKebab } from "@jxsuite/runtime";
 import {
   collectStyles,
   compileExpression,
+  compileStatements,
+  emitFormulaFn,
   escapeHtml,
   isMutating,
   isSchemaOnly,
   tagNameToClassName,
 } from "../shared.ts";
 import {
+  hasStructuredBody,
   isExpressionDef,
   isFunctionDef,
   isMappedArray,
+  isNamedFormulaDef,
   isRef,
   paramNames,
 } from "@jxsuite/schema/guards";
@@ -284,11 +288,14 @@ export function emitElementModule(doc: JxDocument, className: string, elementImp
   const computedEntries: [string, JxExpressionDef | JxFunctionDef][] = [];
   const functionEntries: [string, JxExpressionDef | JxFunctionDef][] = [];
 
+  const formulaEntries: [string, JxExpressionDef][] = [];
   for (const [key, def] of Object.entries(defs)) {
     const d = def as JxMutableNode;
     if (isExpressionDef(d)) {
       const node = d.$expression as ExpressionNode;
-      if (isMutating(node.operator)) {
+      if (isNamedFormulaDef(d)) {
+        formulaEntries.push([key, d]);
+      } else if (isMutating(node.operator)) {
         functionEntries.push([key, d]);
       } else {
         computedEntries.push([key, d]);
@@ -324,6 +331,16 @@ export function emitElementModule(doc: JxDocument, className: string, elementImp
         statePrefix: "s",
       });
       lines.push(`    this.state.${key} = (s, e) => { ${compiled}; };`);
+    } else if (hasStructuredBody(def)) {
+      // Structured body (spec §20) — statements compiled against this.state; dispatch target is
+      // The component instance itself (WHATWG dispatchEvent on the custom element).
+      const compiled = compileStatements(def.body, {
+        dispatchTarget: "this",
+        eventParam: "e",
+        indent: "      ",
+        statePrefix: "this.state",
+      });
+      lines.push(`    this.state.${key} = (s, e) => {`, compiled, "    };");
     } else {
       const args = def.parameters ? paramNames(def.parameters) : (def.arguments ?? ["state"]);
       const paramList = args.join(", ");
@@ -333,13 +350,23 @@ export function emitElementModule(doc: JxDocument, className: string, elementImp
       } else {
         lines.push(
           `    this.state.${key} = (${paramList}) => {`,
-          `      ${def.body ?? ""}`,
+          `      ${typeof def.body === "string" ? def.body : ""}`,
           "    };",
         );
       }
     }
   }
 
+  // Emit named formulas — scope callables mapping positional args onto declared parameters
+  for (const [key, def] of formulaEntries) {
+    lines.push("");
+    const compiled = compileExpression(def.$expression as ExpressionNode, {
+      eventParam: "e",
+      statePrefix: "this.state",
+    });
+    lines.push(`    this.state.${key} = ${emitFormulaFn(def, compiled)};`);
+  }
+
   // Emit computed signals — $src or inline body
   for (const [key, def] of computedEntries) {
     lines.push("");
@@ -353,7 +380,10 @@ export function emitElementModule(doc: JxDocument, className: string, elementImp
       lines.push(`    this.state.${key} = computed(() => ${key}(this.state));`);
     } else {
       lines.push(`    this.state.${key} = computed(() => {`);
-      const body = (def.body ?? "").replaceAll("state.", "this.state.");
+      const body = (typeof def.body === "string" ? def.body : "").replaceAll(
+        "state.",
+        "this.state.",
+      );
       lines.push(`      ${body}`, "    });");
     }
   }
@@ -765,7 +795,14 @@ function toLitTextContent(value: unknown) {
  * @returns {string}
  */
 function inlineHandlerBody(def: JxFunctionDef) {
-  const body = def.body ?? "";
+  if (hasStructuredBody(def)) {
+    return compileStatements(def.body, {
+      dispatchTarget: "e.currentTarget",
+      eventParam: "e",
+      statePrefix: "s",
+    });
+  }
+  const body = typeof def.body === "string" ? def.body : "";
   return body.replaceAll(/(?<!this\.)state\./g, "s.").replaceAll(/(?<!this\.)state(?!\.)/g, "s");
 }