@constela/compiler 0.14.3 → 0.14.5

package/README.md

@@ -54,6 +54,37 @@ The compiler transforms JSON programs through three passes:
 - **Object payloads** - Supports object-shaped event handler payloads with expression fields
 - **call/lambda expressions** - Compiles method calls and anonymous functions for array/string/Math/Date operations
 - **array expression** - Compiles dynamic array construction from expressions
+- **localState/localActions** - Component-scoped state with instance isolation
+
+## Component Local State
+
+Components can define `localState` and `localActions` for instance-scoped state:
+
+```json
+{
+  "components": {
+    "Accordion": {
+      "params": { "title": { "type": "string" } },
+      "localState": {
+        "isExpanded": { "type": "boolean", "initial": false }
+      },
+      "localActions": [
+        {
+          "name": "toggle",
+          "steps": [{ "do": "update", "target": "isExpanded", "operation": "toggle" }]
+        }
+      ],
+      "view": { ... }
+    }
+  }
+}
+```
+
+The compiler:
+1. Validates local state types and initial values
+2. Wraps component views with `localState` nodes
+3. Transforms local actions with instance-scoped store references
+4. Handles param substitution within component views
 
 ## CompiledProgram Structure
 

package/dist/index.d.ts

@@ -102,7 +102,7 @@ interface CompiledAction {
     name: string;
     steps: CompiledActionStep[];
 }
-type CompiledActionStep = CompiledSetStep | CompiledUpdateStep | CompiledSetPathStep | CompiledFetchStep | CompiledStorageStep | CompiledClipboardStep | CompiledNavigateStep | CompiledImportStep | CompiledCallStep | CompiledSubscribeStep | CompiledDisposeStep | CompiledDomStep | CompiledIfStep | CompiledSendStep | CompiledCloseStep | CompiledDelayStep | CompiledIntervalStep | CompiledClearTimerStep | CompiledFocusStep;
+type CompiledActionStep = CompiledSetStep | CompiledUpdateStep | CompiledSetPathStep | CompiledFetchStep | CompiledStorageStep | CompiledClipboardStep | CompiledNavigateStep | CompiledImportStep | CompiledCallStep | CompiledSubscribeStep | CompiledDisposeStep | CompiledDomStep | CompiledIfStep | CompiledSendStep | CompiledCloseStep | CompiledDelayStep | CompiledIntervalStep | CompiledClearTimerStep | CompiledFocusStep | CompiledGenerateStep;
 interface CompiledSetStep {
     do: 'set';
     target: string;
@@ -265,6 +265,19 @@ interface CompiledFocusStep {
     onSuccess?: CompiledActionStep[];
     onError?: CompiledActionStep[];
 }
+/**
+ * Compiled generate step for AI generation
+ */
+interface CompiledGenerateStep {
+    do: 'generate';
+    provider: 'anthropic' | 'openai';
+    prompt: CompiledExpression;
+    output: 'component' | 'view';
+    result: string;
+    model?: string;
+    onSuccess?: CompiledActionStep[];
+    onError?: CompiledActionStep[];
+}
 /**
  * Compiled local action
  */
@@ -563,4 +576,4 @@ declare function transformLayoutPass(layout: LayoutProgram, _context: LayoutAnal
  */
 declare function composeLayoutWithPage(layout: CompiledProgram, page: CompiledProgram, layoutParams?: Record<string, Expression>, slots?: Record<string, ViewNode>): CompiledProgram;
 
-export { type AnalysisContext, type AnalyzePassFailure, type AnalyzePassResult, type AnalyzePassSuccess, type CompileFailure, type CompileResult, type CompileSuccess, type CompiledAction, type CompiledActionStep, type CompiledArrayExpr, type CompiledBinExpr, type CompiledCallExpr, type CompiledCallStep, type CompiledClearTimerStep, type CompiledClipboardStep, type CompiledCloseStep, type CompiledCodeNode, type CompiledConcatExpr, type CompiledCondExpr, type CompiledDataExpr, type CompiledDelayStep, type CompiledDisposeStep, type CompiledDomStep, type CompiledEachNode, type CompiledElementNode, type CompiledEventHandler, type CompiledEventHandlerOptions, type CompiledExpression, type CompiledFetchStep, type CompiledFocusStep, type CompiledGetExpr, type CompiledIfNode, type CompiledIfStep, type CompiledImportExpr, type CompiledImportStep, type CompiledIndexExpr, type CompiledIntervalStep, type CompiledLambdaExpr, type CompiledLayoutProgram, type CompiledLifecycleHooks, type CompiledLitExpr, type CompiledLocalAction, type CompiledLocalStateNode, type CompiledMarkdownNode, type CompiledNavigateStep, type CompiledNode, type CompiledNotExpr, type CompiledParamExpr, type CompiledPortalNode, type CompiledProgram, type CompiledRefExpr, type CompiledRouteDefinition, type CompiledRouteExpr, type CompiledSendStep, type CompiledSetPathStep, type CompiledSetStep, type CompiledSlotNode, type CompiledStateExpr, type CompiledStorageStep, type CompiledStyleExpr, type CompiledSubscribeStep, type CompiledTextNode, type CompiledUpdateStep, type CompiledValidityExpr, type CompiledVarExpr, type LayoutAnalysisContext, type LayoutAnalysisFailure, type LayoutAnalysisResult, type LayoutAnalysisSuccess, type ValidatePassFailure, type ValidatePassResult, type ValidatePassSuccess, analyzeLayoutPass, analyzePass, compile, composeLayoutWithPage, transformLayoutPass, transformPass, validatePass };
+export { type AnalysisContext, type AnalyzePassFailure, type AnalyzePassResult, type AnalyzePassSuccess, type CompileFailure, type CompileResult, type CompileSuccess, type CompiledAction, type CompiledActionStep, type CompiledArrayExpr, type CompiledBinExpr, type CompiledCallExpr, type CompiledCallStep, type CompiledClearTimerStep, type CompiledClipboardStep, type CompiledCloseStep, type CompiledCodeNode, type CompiledConcatExpr, type CompiledCondExpr, type CompiledDataExpr, type CompiledDelayStep, type CompiledDisposeStep, type CompiledDomStep, type CompiledEachNode, type CompiledElementNode, type CompiledEventHandler, type CompiledEventHandlerOptions, type CompiledExpression, type CompiledFetchStep, type CompiledFocusStep, type CompiledGenerateStep, type CompiledGetExpr, type CompiledIfNode, type CompiledIfStep, type CompiledImportExpr, type CompiledImportStep, type CompiledIndexExpr, type CompiledIntervalStep, type CompiledLambdaExpr, type CompiledLayoutProgram, type CompiledLifecycleHooks, type CompiledLitExpr, type CompiledLocalAction, type CompiledLocalStateNode, type CompiledMarkdownNode, type CompiledNavigateStep, type CompiledNode, type CompiledNotExpr, type CompiledParamExpr, type CompiledPortalNode, type CompiledProgram, type CompiledRefExpr, type CompiledRouteDefinition, type CompiledRouteExpr, type CompiledSendStep, type CompiledSetPathStep, type CompiledSetStep, type CompiledSlotNode, type CompiledStateExpr, type CompiledStorageStep, type CompiledStyleExpr, type CompiledSubscribeStep, type CompiledTextNode, type CompiledUpdateStep, type CompiledValidityExpr, type CompiledVarExpr, type LayoutAnalysisContext, type LayoutAnalysisFailure, type LayoutAnalysisResult, type LayoutAnalysisSuccess, type ValidatePassFailure, type ValidatePassResult, type ValidatePassSuccess, analyzeLayoutPass, analyzePass, compile, composeLayoutWithPage, transformLayoutPass, transformPass, validatePass };

package/dist/index.js

@@ -1667,6 +1667,26 @@ function transformActionStep(step) {
       }
       return compiledIfStep;
     }
+    case "generate": {
+      const generateStep = step;
+      const compiledGenerateStep = {
+        do: "generate",
+        provider: generateStep.provider,
+        prompt: transformExpression(generateStep.prompt, emptyContext),
+        output: generateStep.output,
+        result: generateStep.result
+      };
+      if (generateStep.model) {
+        compiledGenerateStep.model = generateStep.model;
+      }
+      if (generateStep.onSuccess) {
+        compiledGenerateStep.onSuccess = generateStep.onSuccess.map(transformActionStep);
+      }
+      if (generateStep.onError) {
+        compiledGenerateStep.onError = generateStep.onError.map(transformActionStep);
+      }
+      return compiledGenerateStep;
+    }
   }
 }
 function flattenSlotChildren(children, ctx) {
@@ -2187,12 +2207,17 @@ function transformState2(state) {
   }
   return result;
 }
-function transformExpression2(expr) {
+function transformExpression2(expr, ctx) {
   switch (expr.expr) {
     case "lit":
       return { expr: "lit", value: expr.value };
-    case "state":
-      return { expr: "state", name: expr.name };
+    case "state": {
+      const stateExpr = { expr: "state", name: expr.name };
+      if (expr.path) {
+        stateExpr.path = expr.path;
+      }
+      return stateExpr;
+    }
     case "var": {
       const varExpr = { expr: "var", name: expr.name };
       if (expr.path) {
@@ -2204,25 +2229,25 @@ function transformExpression2(expr) {
       return {
         expr: "bin",
         op: expr.op,
-        left: transformExpression2(expr.left),
-        right: transformExpression2(expr.right)
+        left: transformExpression2(expr.left, ctx),
+        right: transformExpression2(expr.right, ctx)
       };
     case "not":
       return {
         expr: "not",
-        operand: transformExpression2(expr.operand)
+        operand: transformExpression2(expr.operand, ctx)
       };
     case "cond":
       return {
         expr: "cond",
-        if: transformExpression2(expr.if),
-        then: transformExpression2(expr.then),
-        else: transformExpression2(expr.else)
+        if: transformExpression2(expr.if, ctx),
+        then: transformExpression2(expr.then, ctx),
+        else: transformExpression2(expr.else, ctx)
       };
     case "get":
       return {
         expr: "get",
-        base: transformExpression2(expr.base),
+        base: transformExpression2(expr.base, ctx),
         path: expr.path
       };
     case "route":
@@ -2246,6 +2271,60 @@ function transformExpression2(expr) {
       return dataExpr;
     }
     case "param": {
+      if (ctx?.currentParams !== void 0) {
+        const paramValue = ctx.currentParams[expr.name];
+        if (paramValue !== void 0) {
+          if (expr.path) {
+            if (paramValue.expr === "var") {
+              const varExpr = paramValue;
+              const existingPath = varExpr.path;
+              const resultPath = existingPath ? `${existingPath}.${expr.path}` : expr.path;
+              return {
+                expr: "var",
+                name: varExpr.name,
+                path: resultPath
+              };
+            }
+            if (paramValue.expr === "state") {
+              const stateExpr = paramValue;
+              const existingPath = stateExpr.path;
+              const resultPath = existingPath ? `${existingPath}.${expr.path}` : expr.path;
+              return {
+                expr: "state",
+                name: stateExpr.name,
+                path: resultPath
+              };
+            }
+            if (paramValue.expr === "import") {
+              const importExpr = paramValue;
+              const existingPath = importExpr.path;
+              const resultPath = existingPath ? `${existingPath}.${expr.path}` : expr.path;
+              return {
+                expr: "import",
+                name: importExpr.name,
+                path: resultPath
+              };
+            }
+            if (paramValue.expr === "data") {
+              const dataExpr = paramValue;
+              const existingPath = dataExpr.path;
+              const resultPath = existingPath ? `${existingPath}.${expr.path}` : expr.path;
+              return {
+                expr: "data",
+                name: dataExpr.name,
+                path: resultPath
+              };
+            }
+            return {
+              expr: "get",
+              base: paramValue,
+              path: expr.path
+            };
+          }
+          return paramValue;
+        }
+        return { expr: "lit", value: null };
+      }
       const paramExpr = { expr: "param", name: expr.name };
       if (expr.path) {
         paramExpr.path = expr.path;
@@ -2254,17 +2333,48 @@ function transformExpression2(expr) {
     }
     case "ref":
       return { expr: "ref", name: expr.name };
+    case "call": {
+      const callExpr = expr;
+      const result = {
+        expr: "call",
+        target: transformExpression2(callExpr.target, ctx),
+        method: callExpr.method
+      };
+      if (callExpr.args && callExpr.args.length > 0) {
+        result.args = callExpr.args.map((arg) => transformExpression2(arg, ctx));
+      }
+      return result;
+    }
+    case "lambda": {
+      const lambdaExpr = expr;
+      const result = {
+        expr: "lambda",
+        param: lambdaExpr.param,
+        body: transformExpression2(lambdaExpr.body, ctx)
+      };
+      if (lambdaExpr.index) {
+        result.index = lambdaExpr.index;
+      }
+      return result;
+    }
+    case "array": {
+      const arrayExpr = expr;
+      return {
+        expr: "array",
+        elements: arrayExpr.elements.map((elem) => transformExpression2(elem, ctx))
+      };
+    }
     default:
       return { expr: "lit", value: null };
   }
 }
-function transformActionStep2(step) {
+function transformActionStep2(step, ctx) {
   switch (step.do) {
     case "set":
       return {
         do: "set",
         target: step.target,
-        value: transformExpression2(step.value)
+        value: transformExpression2(step.value, ctx)
       };
     case "update": {
       const updateStep = {
@@ -2273,35 +2383,35 @@ function transformActionStep2(step) {
         operation: step.operation
       };
       if (step.value) {
-        updateStep.value = transformExpression2(step.value);
+        updateStep.value = transformExpression2(step.value, ctx);
       }
       if (step.index) {
-        updateStep.index = transformExpression2(step.index);
+        updateStep.index = transformExpression2(step.index, ctx);
       }
       if (step.deleteCount) {
-        updateStep.deleteCount = transformExpression2(step.deleteCount);
+        updateStep.deleteCount = transformExpression2(step.deleteCount, ctx);
       }
       return updateStep;
     }
     case "fetch": {
       const fetchStep = {
         do: "fetch",
-        url: transformExpression2(step.url)
+        url: transformExpression2(step.url, ctx)
       };
       if (step.method) {
         fetchStep.method = step.method;
       }
       if (step.body) {
-        fetchStep.body = transformExpression2(step.body);
+        fetchStep.body = transformExpression2(step.body, ctx);
       }
       if (step.result) {
         fetchStep.result = step.result;
       }
       if (step.onSuccess) {
-        fetchStep.onSuccess = step.onSuccess.map(transformActionStep2);
+        fetchStep.onSuccess = step.onSuccess.map((s) => transformActionStep2(s, ctx));
       }
       if (step.onError) {
-        fetchStep.onError = step.onError.map(transformActionStep2);
+        fetchStep.onError = step.onError.map((s) => transformActionStep2(s, ctx));
       }
       return fetchStep;
     }
@@ -2310,20 +2420,20 @@ function transformActionStep2(step) {
       const compiledStorageStep = {
         do: "storage",
         operation: storageStep.operation,
-        key: transformExpression2(storageStep.key),
+        key: transformExpression2(storageStep.key, ctx),
         storage: storageStep.storage
       };
       if (storageStep.value) {
-        compiledStorageStep.value = transformExpression2(storageStep.value);
+        compiledStorageStep.value = transformExpression2(storageStep.value, ctx);
       }
       if (storageStep.result) {
         compiledStorageStep.result = storageStep.result;
       }
       if (storageStep.onSuccess) {
-        compiledStorageStep.onSuccess = storageStep.onSuccess.map(transformActionStep2);
+        compiledStorageStep.onSuccess = storageStep.onSuccess.map((s) => transformActionStep2(s, ctx));
       }
       if (storageStep.onError) {
-        compiledStorageStep.onError = storageStep.onError.map(transformActionStep2);
+        compiledStorageStep.onError = storageStep.onError.map((s) => transformActionStep2(s, ctx));
       }
       return compiledStorageStep;
     }
@@ -2334,16 +2444,16 @@ function transformActionStep2(step) {
         operation: clipboardStep.operation
       };
       if (clipboardStep.value) {
-        compiledClipboardStep.value = transformExpression2(clipboardStep.value);
+        compiledClipboardStep.value = transformExpression2(clipboardStep.value, ctx);
       }
       if (clipboardStep.result) {
         compiledClipboardStep.result = clipboardStep.result;
       }
       if (clipboardStep.onSuccess) {
-        compiledClipboardStep.onSuccess = clipboardStep.onSuccess.map(transformActionStep2);
+        compiledClipboardStep.onSuccess = clipboardStep.onSuccess.map((s) => transformActionStep2(s, ctx));
       }
       if (clipboardStep.onError) {
-        compiledClipboardStep.onError = clipboardStep.onError.map(transformActionStep2);
+        compiledClipboardStep.onError = clipboardStep.onError.map((s) => transformActionStep2(s, ctx));
       }
       return compiledClipboardStep;
     }
@@ -2351,7 +2461,7 @@ function transformActionStep2(step) {
       const navigateStep = step;
       const compiledNavigateStep = {
         do: "navigate",
-        url: transformExpression2(navigateStep.url)
+        url: transformExpression2(navigateStep.url, ctx)
       };
       if (navigateStep.target) {
         compiledNavigateStep.target = navigateStep.target;
@@ -2369,10 +2479,10 @@ function transformActionStep2(step) {
         result: importStep.result
       };
       if (importStep.onSuccess) {
-        compiledImportStep.onSuccess = importStep.onSuccess.map(transformActionStep2);
+        compiledImportStep.onSuccess = importStep.onSuccess.map((s) => transformActionStep2(s, ctx));
       }
       if (importStep.onError) {
-        compiledImportStep.onError = importStep.onError.map(transformActionStep2);
+        compiledImportStep.onError = importStep.onError.map((s) => transformActionStep2(s, ctx));
       }
       return compiledImportStep;
     }
@@ -2380,19 +2490,19 @@ function transformActionStep2(step) {
       const callStep = step;
       const compiledCallStep = {
         do: "call",
-        target: transformExpression2(callStep.target)
+        target: transformExpression2(callStep.target, ctx)
       };
       if (callStep.args) {
-        compiledCallStep.args = callStep.args.map((arg) => transformExpression2(arg));
+        compiledCallStep.args = callStep.args.map((arg) => transformExpression2(arg, ctx));
       }
       if (callStep.result) {
         compiledCallStep.result = callStep.result;
       }
       if (callStep.onSuccess) {
-        compiledCallStep.onSuccess = callStep.onSuccess.map(transformActionStep2);
+        compiledCallStep.onSuccess = callStep.onSuccess.map((s) => transformActionStep2(s, ctx));
       }
       if (callStep.onError) {
-        compiledCallStep.onError = callStep.onError.map(transformActionStep2);
+        compiledCallStep.onError = callStep.onError.map((s) => transformActionStep2(s, ctx));
       }
       return compiledCallStep;
     }
@@ -2400,7 +2510,7 @@ function transformActionStep2(step) {
       const subscribeStep = step;
       return {
         do: "subscribe",
-        target: transformExpression2(subscribeStep.target),
+        target: transformExpression2(subscribeStep.target, ctx),
         event: subscribeStep.event,
         action: subscribeStep.action
       };
@@ -2409,7 +2519,7 @@ function transformActionStep2(step) {
       const disposeStep = step;
       return {
         do: "dispose",
-        target: transformExpression2(disposeStep.target)
+        target: transformExpression2(disposeStep.target, ctx)
       };
     }
     case "dom": {
@@ -2417,8 +2527,8 @@ function transformActionStep2(step) {
       return {
         do: "dom",
         operation: domStep.operation,
-        selector: transformExpression2(domStep.selector),
-        ...domStep.value && { value: transformExpression2(domStep.value) },
+        selector: transformExpression2(domStep.selector, ctx),
+        ...domStep.value && { value: transformExpression2(domStep.value, ctx) },
         ...domStep.attribute && { attribute: domStep.attribute }
       };
     }
@@ -2437,12 +2547,12 @@ function transformLocalState2(localState) {
   }
   return result;
 }
-function transformLocalActions2(localActions) {
+function transformLocalActions2(localActions, ctx) {
   const result = {};
   for (const action of localActions) {
     result[action.name] = {
       name: action.name,
-      steps: action.steps.map(transformActionStep2)
+      steps: action.steps.map((s) => transformActionStep2(s, ctx))
     };
   }
   return result;
@@ -2451,7 +2561,7 @@ function transformActions2(actions) {
   if (!actions) return [];
   return actions.map((action) => ({
     name: action.name,
-    steps: action.steps.map(transformActionStep2)
+    steps: action.steps.map((s) => transformActionStep2(s))
   }));
 }
 function transformViewNode2(node, ctx) {
@@ -2470,7 +2580,7 @@ function transformViewNode2(node, ctx) {
               action: value.action
             };
           } else {
-            result.props[key] = value;
+            result.props[key] = transformExpression2(value, ctx);
           }
         }
       }
@@ -2484,12 +2594,12 @@ function transformViewNode2(node, ctx) {
     case "text":
       return {
         kind: "text",
-        value: node.value
+        value: transformExpression2(node.value, ctx)
       };
     case "if": {
       const result = {
         kind: "if",
-        condition: node.condition,
+        condition: transformExpression2(node.condition, ctx),
         then: transformViewNode2(node.then, ctx)
       };
       if (node.else) {
@@ -2500,7 +2610,7 @@ function transformViewNode2(node, ctx) {
     case "each":
       return {
         kind: "each",
-        items: node.items,
+        items: transformExpression2(node.items, ctx),
         as: node.as,
         body: transformViewNode2(node.body, ctx)
       };
@@ -2518,7 +2628,7 @@ function transformViewNode2(node, ctx) {
       const params = {};
       if (componentNode.props) {
         for (const [name, expr] of Object.entries(componentNode.props)) {
-          params[name] = transformExpression2(expr);
+          params[name] = transformExpression2(expr, ctx);
         }
       }
       const children = [];
@@ -2537,7 +2647,7 @@ function transformViewNode2(node, ctx) {
         return {
           kind: "localState",
           state: transformLocalState2(def.localState),
-          actions: transformLocalActions2(def.localActions ?? []),
+          actions: transformLocalActions2(def.localActions ?? [], newCtx),
           child: expandedView
         };
       }
@@ -2720,22 +2830,23 @@ function processNamedSlotsOnly(node, namedContent) {
   }
   return node;
 }
-function expandComponentNode(node, components, defaultContent, namedContent) {
+function expandComponentNode(node, components, defaultContent, namedContent, parentCtx) {
   const componentNode = node;
   const def = components[componentNode.name];
   if (!def) {
     return { kind: "element", tag: "div" };
   }
+  const baseCtx = parentCtx ?? { components };
   const params = {};
   if (componentNode.props) {
     for (const [name, expr] of Object.entries(componentNode.props)) {
-      params[name] = transformExpression2(expr);
+      params[name] = transformExpression2(expr, baseCtx);
     }
   }
   const children = [];
   if (componentNode.children && componentNode.children.length > 0) {
     for (const child of componentNode.children) {
-      const transformedChild = transformViewNode2(child, { components });
+      const transformedChild = transformViewNode2(child, baseCtx);
       children.push(replaceSlots(transformedChild, defaultContent, namedContent, components));
     }
   }
@@ -2750,7 +2861,7 @@ function expandComponentNode(node, components, defaultContent, namedContent) {
     return {
       kind: "localState",
       state: transformLocalState2(def.localState),
-      actions: transformLocalActions2(def.localActions ?? []),
+      actions: transformLocalActions2(def.localActions ?? [], newCtx),
       child: processedView
     };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/compiler",
-  "version": "0.14.3",
+  "version": "0.14.5",
   "description": "Compiler for Constela UI framework - AST to Program transformation",
   "type": "module",
   "main": "./dist/index.js",
@@ -15,7 +15,7 @@
     "dist"
   ],
   "dependencies": {
-    "@constela/core": "0.15.2"
+    "@constela/core": "0.16.0"
   },
   "devDependencies": {
     "@types/node": "^20.10.0",