@constela/compiler 0.14.1 → 0.14.3

package/dist/index.js

@@ -2430,6 +2430,23 @@ 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) {
+  const result = {};
+  for (const action of localActions) {
+    result[action.name] = {
+      name: action.name,
+      steps: action.steps.map(transformActionStep2)
+    };
+  }
+  return result;
+}
 function transformActions2(actions) {
   if (!actions) return [];
   return actions.map((action) => ({
@@ -2493,11 +2510,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);
+        }
+      }
+      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 ?? []),
+          child: expandedView
+        };
       }
-      return { kind: "element", tag: "div" };
+      return expandedView;
     }
     case "markdown":
       return {
@@ -2676,7 +2720,43 @@ function processNamedSlotsOnly(node, namedContent) {
   }
   return node;
 }
-function replaceSlots(node, defaultContent, namedContent) {
+function expandComponentNode(node, components, defaultContent, namedContent) {
+  const componentNode = node;
+  const def = 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);
+    }
+  }
+  const children = [];
+  if (componentNode.children && componentNode.children.length > 0) {
+    for (const child of componentNode.children) {
+      const transformedChild = transformViewNode2(child, { components });
+      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 ?? []),
+      child: processedView
+    };
+  }
+  return processedView;
+}
+function replaceSlots(node, defaultContent, namedContent, components) {
   if (node.kind === "slot") {
     const slotName = node.name;
     if (slotName && namedContent?.[slotName]) {
@@ -2688,10 +2768,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 +2786,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 +2797,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 +2827,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 +2865,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.1",
+  "version": "0.14.3",
   "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.1"
+    "@constela/core": "0.15.2"
   },
   "devDependencies": {
     "@types/node": "^20.10.0",