@constela/compiler 0.14.2 → 0.14.4

package/dist/index.js

@@ -2187,12 +2187,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 +2209,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 +2251,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 +2313,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 +2363,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 +2400,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 +2424,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 +2441,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 +2459,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 +2470,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 +2490,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 +2499,7 @@ function transformActionStep2(step) {
       const disposeStep = step;
       return {
         do: "dispose",
-        target: transformExpression2(disposeStep.target)
+        target: transformExpression2(disposeStep.target, ctx)
       };
     }
     case "dom": {
@@ -2417,8 +2507,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 }
       };
     }
@@ -2430,11 +2520,28 @@ function transformActionStep2(step) {
       };
   }
 }
+function transformLocalState2(localState) {
+  const result = {};
+  for (const [name, field] of Object.entries(localState)) {
+    result[name] = { type: field.type, initial: field.initial };
+  }
+  return result;
+}
+function transformLocalActions2(localActions, ctx) {
+  const result = {};
+  for (const action of localActions) {
+    result[action.name] = {
+      name: action.name,
+      steps: action.steps.map((s) => transformActionStep2(s, ctx))
+    };
+  }
+  return result;
+}
 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) {
@@ -2453,7 +2560,7 @@ function transformViewNode2(node, ctx) {
               action: value.action
             };
           } else {
-            result.props[key] = value;
+            result.props[key] = transformExpression2(value, ctx);
           }
         }
       }
@@ -2467,12 +2574,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) {
@@ -2483,7 +2590,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)
       };
@@ -2493,11 +2600,38 @@ function transformViewNode2(node, ctx) {
         name: node.name
       };
     case "component": {
-      const def = ctx.components[node.name];
-      if (def) {
-        return transformViewNode2(def.view, ctx);
+      const componentNode = node;
+      const def = ctx.components[componentNode.name];
+      if (!def) {
+        return { kind: "element", tag: "div" };
+      }
+      const params = {};
+      if (componentNode.props) {
+        for (const [name, expr] of Object.entries(componentNode.props)) {
+          params[name] = transformExpression2(expr, ctx);
+        }
       }
-      return { kind: "element", tag: "div" };
+      const children = [];
+      if (componentNode.children && componentNode.children.length > 0) {
+        for (const child of componentNode.children) {
+          children.push(transformViewNode2(child, ctx));
+        }
+      }
+      const newCtx = {
+        ...ctx,
+        currentParams: params,
+        currentChildren: children
+      };
+      const expandedView = transformViewNode2(def.view, newCtx);
+      if (def.localState && Object.keys(def.localState).length > 0) {
+        return {
+          kind: "localState",
+          state: transformLocalState2(def.localState),
+          actions: transformLocalActions2(def.localActions ?? [], newCtx),
+          child: expandedView
+        };
+      }
+      return expandedView;
     }
     case "markdown":
       return {
@@ -2676,7 +2810,44 @@ function processNamedSlotsOnly(node, namedContent) {
   }
   return node;
 }
-function replaceSlots(node, 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, baseCtx);
+    }
+  }
+  const children = [];
+  if (componentNode.children && componentNode.children.length > 0) {
+    for (const child of componentNode.children) {
+      const transformedChild = transformViewNode2(child, baseCtx);
+      children.push(replaceSlots(transformedChild, defaultContent, namedContent, components));
+    }
+  }
+  const newCtx = {
+    components,
+    currentParams: params,
+    currentChildren: children
+  };
+  const expandedView = transformViewNode2(def.view, newCtx);
+  const processedView = replaceSlots(expandedView, defaultContent, namedContent, components);
+  if (def.localState && Object.keys(def.localState).length > 0) {
+    return {
+      kind: "localState",
+      state: transformLocalState2(def.localState),
+      actions: transformLocalActions2(def.localActions ?? [], newCtx),
+      child: processedView
+    };
+  }
+  return processedView;
+}
+function replaceSlots(node, defaultContent, namedContent, components) {
   if (node.kind === "slot") {
     const slotName = node.name;
     if (slotName && namedContent?.[slotName]) {
@@ -2688,10 +2859,13 @@ function replaceSlots(node, defaultContent, namedContent) {
     }
     return clonedDefault;
   }
+  if (node.kind === "component" && components) {
+    return expandComponentNode(node, components, defaultContent, namedContent);
+  }
   if (node.kind === "element") {
     const children = node.children;
     if (children && children.length > 0) {
-      const newChildren = children.map((child) => replaceSlots(child, defaultContent, namedContent));
+      const newChildren = children.map((child) => replaceSlots(child, defaultContent, namedContent, components));
       return {
         ...node,
         children: newChildren
@@ -2703,10 +2877,10 @@ function replaceSlots(node, defaultContent, namedContent) {
     const ifNode = node;
     const result = {
       ...node,
-      then: replaceSlots(ifNode.then, defaultContent, namedContent)
+      then: replaceSlots(ifNode.then, defaultContent, namedContent, components)
     };
     if (ifNode.else) {
-      result.else = replaceSlots(ifNode.else, defaultContent, namedContent);
+      result.else = replaceSlots(ifNode.else, defaultContent, namedContent, components);
     }
     return result;
   }
@@ -2714,7 +2888,7 @@ function replaceSlots(node, defaultContent, namedContent) {
     const eachNode = node;
     return {
       ...node,
-      body: replaceSlots(eachNode.body, defaultContent, namedContent)
+      body: replaceSlots(eachNode.body, defaultContent, namedContent, components)
     };
   }
   return node;
@@ -2744,7 +2918,11 @@ function composeLayoutWithPage(layout, page, layoutParams, slots) {
   } else {
     namedContent = extractMdxSlotsFromImportData(page.importData);
   }
-  const composedView = replaceSlots(layoutView, page.view, namedContent);
+  const mergedComponents = {
+    ...layout.components || {},
+    ...page.components || {}
+  };
+  const composedView = replaceSlots(layoutView, page.view, namedContent, mergedComponents);
   const mergedState = {};
   for (const [name, field] of Object.entries(page.state)) {
     mergedState[name] = field;
@@ -2778,10 +2956,6 @@ function composeLayoutWithPage(layout, page, layoutParams, slots) {
       mergedActions[action.name] = action;
     }
   }
-  const mergedComponents = {
-    ...layout.components || {},
-    ...page.components || {}
-  };
   const result = {
     version: "1.0",
     state: mergedState,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/compiler",
-  "version": "0.14.2",
+  "version": "0.14.4",
   "description": "Compiler for Constela UI framework - AST to Program transformation",
   "type": "module",
   "main": "./dist/index.js",