@constela/compiler 0.1.0 → 0.3.0

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { createUndefinedVarError } from '@constela/core';
 interface AnalysisContext {
     stateNames: Set<string>;
     actionNames: Set<string>;
+    componentNames: Set<string>;
 }
 interface AnalyzePassSuccess {
     ok: true;
@@ -32,14 +33,18 @@ type AnalyzePassResult = AnalyzePassSuccess | AnalyzePassFailure;
  *
  * - Collects state names
  * - Collects action names
+ * - Collects component names
  * - Validates state references
  * - Validates action references
  * - Validates variable scopes
+ * - Validates component references and props
+ * - Detects component cycles
+ * - Validates param references in component definitions
  *
- * @param ast - Validated AST from validate pass
+ * @param programAst - Validated AST from validate pass
  * @returns AnalyzePassResult
  */
-declare function analyzePass(ast: Program): AnalyzePassResult;
+declare function analyzePass(programAst: Program): AnalyzePassResult;
 
 /**
  * Transform Pass - AST to CompiledProgram transformation
@@ -72,6 +77,8 @@ interface CompiledUpdateStep {
     target: string;
     operation: string;
     value?: CompiledExpression;
+    index?: CompiledExpression;
+    deleteCount?: CompiledExpression;
 }
 interface CompiledFetchStep {
     do: 'fetch';
@@ -107,7 +114,7 @@ interface CompiledEachNode {
     key?: CompiledExpression;
     body: CompiledNode;
 }
-type CompiledExpression = CompiledLitExpr | CompiledStateExpr | CompiledVarExpr | CompiledBinExpr | CompiledNotExpr;
+type CompiledExpression = CompiledLitExpr | CompiledStateExpr | CompiledVarExpr | CompiledBinExpr | CompiledNotExpr | CompiledCondExpr | CompiledGetExpr;
 interface CompiledLitExpr {
     expr: 'lit';
     value: string | number | boolean | null | unknown[];
@@ -131,6 +138,17 @@ interface CompiledNotExpr {
     expr: 'not';
     operand: CompiledExpression;
 }
+interface CompiledCondExpr {
+    expr: 'cond';
+    if: CompiledExpression;
+    then: CompiledExpression;
+    else: CompiledExpression;
+}
+interface CompiledGetExpr {
+    expr: 'get';
+    base: CompiledExpression;
+    path: string;
+}
 interface CompiledEventHandler {
     event: string;
     action: string;
@@ -195,4 +213,4 @@ type ValidatePassResult = ValidatePassSuccess | ValidatePassFailure;
  */
 declare function validatePass(input: unknown): ValidatePassResult;
 
-export { type AnalysisContext, type AnalyzePassFailure, type AnalyzePassResult, type AnalyzePassSuccess, type CompileFailure, type CompileResult, type CompileSuccess, type CompiledAction, type CompiledActionStep, type CompiledEachNode, type CompiledElementNode, type CompiledEventHandler, type CompiledExpression, type CompiledIfNode, type CompiledNode, type CompiledProgram, type CompiledTextNode, type ValidatePassFailure, type ValidatePassResult, type ValidatePassSuccess, analyzePass, compile, transformPass, validatePass };
+export { type AnalysisContext, type AnalyzePassFailure, type AnalyzePassResult, type AnalyzePassSuccess, type CompileFailure, type CompileResult, type CompileSuccess, type CompiledAction, type CompiledActionStep, type CompiledEachNode, type CompiledElementNode, type CompiledEventHandler, type CompiledExpression, type CompiledFetchStep, type CompiledIfNode, type CompiledNode, type CompiledProgram, type CompiledSetStep, type CompiledTextNode, type CompiledUpdateStep, type ValidatePassFailure, type ValidatePassResult, type ValidatePassSuccess, analyzePass, compile, transformPass, validatePass };

package/dist/index.js

@@ -20,21 +20,31 @@ import {
   createUndefinedActionError,
   createUndefinedVarError,
   createDuplicateActionError,
+  createComponentNotFoundError,
+  createComponentPropMissingError,
+  createComponentCycleError,
+  createUndefinedParamError,
+  createSchemaError,
+  createOperationInvalidForTypeError,
+  createOperationMissingFieldError,
   isEventHandler
 } from "@constela/core";
 function buildPath(base, ...segments) {
   return segments.reduce((p, s) => `${p}/${s}`, base);
 }
-function collectContext(ast) {
-  const stateNames = new Set(Object.keys(ast.state));
-  const actionNames = new Set(ast.actions.map((a) => a.name));
-  return { stateNames, actionNames };
+function collectContext(ast2) {
+  const stateNames = new Set(Object.keys(ast2.state));
+  const actionNames = new Set(ast2.actions.map((a) => a.name));
+  const componentNames = new Set(
+    ast2.components ? Object.keys(ast2.components) : []
+  );
+  return { stateNames, actionNames, componentNames };
 }
-function checkDuplicateActions(ast) {
+function checkDuplicateActions(ast2) {
   const errors = [];
   const seenNames = /* @__PURE__ */ new Set();
-  for (let i = 0; i < ast.actions.length; i++) {
-    const action = ast.actions[i];
+  for (let i = 0; i < ast2.actions.length; i++) {
+    const action = ast2.actions[i];
     if (action === void 0) continue;
     if (seenNames.has(action.name)) {
       errors.push(createDuplicateActionError(action.name, `/actions/${i}`));
@@ -43,7 +53,7 @@ function checkDuplicateActions(ast) {
   }
   return errors;
 }
-function validateExpression(expr, path, context, scope) {
+function validateExpression(expr, path, context, scope, paramScope) {
   const errors = [];
   switch (expr.expr) {
     case "state":
@@ -56,15 +66,28 @@ function validateExpression(expr, path, context, scope) {
         errors.push(createUndefinedVarError(expr.name, path));
       }
       break;
+    case "param":
+      if (!paramScope || !paramScope.params.has(expr.name)) {
+        errors.push(createUndefinedParamError(expr.name, path));
+      }
+      break;
     case "bin":
-      errors.push(...validateExpression(expr.left, buildPath(path, "left"), context, scope));
-      errors.push(...validateExpression(expr.right, buildPath(path, "right"), context, scope));
+      errors.push(...validateExpression(expr.left, buildPath(path, "left"), context, scope, paramScope));
+      errors.push(...validateExpression(expr.right, buildPath(path, "right"), context, scope, paramScope));
       break;
     case "not":
-      errors.push(...validateExpression(expr.operand, buildPath(path, "operand"), context, scope));
+      errors.push(...validateExpression(expr.operand, buildPath(path, "operand"), context, scope, paramScope));
       break;
     case "lit":
       break;
+    case "cond":
+      errors.push(...validateExpression(expr.if, buildPath(path, "if"), context, scope, paramScope));
+      errors.push(...validateExpression(expr.then, buildPath(path, "then"), context, scope, paramScope));
+      errors.push(...validateExpression(expr.else, buildPath(path, "else"), context, scope, paramScope));
+      break;
+    case "get":
+      errors.push(...validateExpression(expr.base, buildPath(path, "base"), context, scope, paramScope));
+      break;
   }
   return errors;
 }
@@ -79,16 +102,50 @@ function validateActionStep(step, path, context) {
         ...validateExpressionStateOnly(step.value, buildPath(path, "value"), context)
       );
       break;
-    case "update":
+    case "update": {
       if (!context.stateNames.has(step.target)) {
         errors.push(createUndefinedStateError(step.target, buildPath(path, "target")));
+      } else {
+        const stateField = ast.state[step.target];
+        if (stateField) {
+          const stateType = stateField.type;
+          const op = step.operation;
+          if (op === "toggle" && stateType !== "boolean") {
+            errors.push(createOperationInvalidForTypeError(op, stateType, buildPath(path, "operation")));
+          }
+          if (op === "merge" && stateType !== "object") {
+            errors.push(createOperationInvalidForTypeError(op, stateType, buildPath(path, "operation")));
+          }
+          if ((op === "increment" || op === "decrement") && stateType !== "number") {
+            errors.push(createOperationInvalidForTypeError(op, stateType, buildPath(path, "operation")));
+          }
+          if ((op === "push" || op === "pop" || op === "remove" || op === "replaceAt" || op === "insertAt" || op === "splice") && stateType !== "list") {
+            errors.push(createOperationInvalidForTypeError(op, stateType, buildPath(path, "operation")));
+          }
+          if (op === "merge" && !step.value) {
+            errors.push(createOperationMissingFieldError(op, "value", path));
+          }
+          if ((op === "replaceAt" || op === "insertAt") && (!step.index || !step.value)) {
+            if (!step.index) errors.push(createOperationMissingFieldError(op, "index", path));
+            if (!step.value) errors.push(createOperationMissingFieldError(op, "value", path));
+          }
+          if (op === "splice" && (!step.index || !step.deleteCount)) {
+            if (!step.index) errors.push(createOperationMissingFieldError(op, "index", path));
+            if (!step.deleteCount) errors.push(createOperationMissingFieldError(op, "deleteCount", path));
+          }
+        }
       }
       if (step.value) {
-        errors.push(
-          ...validateExpressionStateOnly(step.value, buildPath(path, "value"), context)
-        );
+        errors.push(...validateExpressionStateOnly(step.value, buildPath(path, "value"), context));
+      }
+      if (step.index) {
+        errors.push(...validateExpressionStateOnly(step.index, buildPath(path, "index"), context));
+      }
+      if (step.deleteCount) {
+        errors.push(...validateExpressionStateOnly(step.deleteCount, buildPath(path, "deleteCount"), context));
       }
       break;
+    }
     case "fetch":
       errors.push(
         ...validateExpressionStateOnly(step.url, buildPath(path, "url"), context)
@@ -141,6 +198,14 @@ function validateExpressionStateOnly(expr, path, context) {
       break;
     case "lit":
       break;
+    case "cond":
+      errors.push(...validateExpressionStateOnly(expr.if, buildPath(path, "if"), context));
+      errors.push(...validateExpressionStateOnly(expr.then, buildPath(path, "then"), context));
+      errors.push(...validateExpressionStateOnly(expr.else, buildPath(path, "else"), context));
+      break;
+    case "get":
+      errors.push(...validateExpressionStateOnly(expr.base, buildPath(path, "base"), context));
+      break;
   }
   return errors;
 }
@@ -174,11 +239,28 @@ function validateExpressionInEventPayload(expr, path, context, scope) {
       break;
     case "lit":
       break;
+    case "cond":
+      errors.push(
+        ...validateExpressionInEventPayload(expr.if, buildPath(path, "if"), context, scope)
+      );
+      errors.push(
+        ...validateExpressionInEventPayload(expr.then, buildPath(path, "then"), context, scope)
+      );
+      errors.push(
+        ...validateExpressionInEventPayload(expr.else, buildPath(path, "else"), context, scope)
+      );
+      break;
+    case "get":
+      errors.push(
+        ...validateExpressionInEventPayload(expr.base, buildPath(path, "base"), context, scope)
+      );
+      break;
   }
   return errors;
 }
-function validateViewNode(node, path, context, scope) {
+function validateViewNode(node, path, context, scope, options = { insideComponent: false }) {
   const errors = [];
+  const { insideComponent, paramScope } = options;
   switch (node.kind) {
     case "element":
       if (node.props) {
@@ -199,7 +281,7 @@ function validateViewNode(node, path, context, scope) {
               );
             }
           } else {
-            errors.push(...validateExpression(propValue, propPath, context, scope));
+            errors.push(...validateExpression(propValue, propPath, context, scope, paramScope));
           }
         }
       }
@@ -208,42 +290,192 @@ function validateViewNode(node, path, context, scope) {
           const child = node.children[i];
           if (child === void 0) continue;
           errors.push(
-            ...validateViewNode(child, buildPath(path, "children", i), context, scope)
+            ...validateViewNode(child, buildPath(path, "children", i), context, scope, options)
           );
         }
       }
       break;
     case "text":
-      errors.push(...validateExpression(node.value, buildPath(path, "value"), context, scope));
+      errors.push(...validateExpression(node.value, buildPath(path, "value"), context, scope, paramScope));
       break;
     case "if":
       errors.push(
-        ...validateExpression(node.condition, buildPath(path, "condition"), context, scope)
+        ...validateExpression(node.condition, buildPath(path, "condition"), context, scope, paramScope)
       );
-      errors.push(...validateViewNode(node.then, buildPath(path, "then"), context, scope));
+      errors.push(...validateViewNode(node.then, buildPath(path, "then"), context, scope, options));
       if (node.else) {
-        errors.push(...validateViewNode(node.else, buildPath(path, "else"), context, scope));
+        errors.push(...validateViewNode(node.else, buildPath(path, "else"), context, scope, options));
       }
       break;
-    case "each":
-      errors.push(...validateExpression(node.items, buildPath(path, "items"), context, scope));
+    case "each": {
+      errors.push(...validateExpression(node.items, buildPath(path, "items"), context, scope, paramScope));
       const bodyScope = new Set(scope);
       bodyScope.add(node.as);
       if (node.index) {
         bodyScope.add(node.index);
       }
       if (node.key) {
-        errors.push(...validateExpression(node.key, buildPath(path, "key"), context, bodyScope));
+        errors.push(...validateExpression(node.key, buildPath(path, "key"), context, bodyScope, paramScope));
+      }
+      errors.push(...validateViewNode(node.body, buildPath(path, "body"), context, bodyScope, options));
+      break;
+    }
+    case "component": {
+      if (!context.componentNames.has(node.name)) {
+        errors.push(createComponentNotFoundError(node.name, path));
+      } else {
+        const componentDef = ast.components?.[node.name];
+        if (componentDef) {
+          errors.push(
+            ...validateComponentProps(node, componentDef, path, context, scope, paramScope)
+          );
+        }
+      }
+      if (node.children) {
+        for (let i = 0; i < node.children.length; i++) {
+          const child = node.children[i];
+          if (child === void 0) continue;
+          errors.push(
+            ...validateViewNode(child, buildPath(path, "children", i), context, scope, options)
+          );
+        }
+      }
+      break;
+    }
+    case "slot":
+      if (!insideComponent) {
+        errors.push(
+          createSchemaError(`Slot can only be used inside component definitions`, path)
+        );
+      }
+      break;
+  }
+  return errors;
+}
+function validateComponentProps(node, componentDef, path, context, scope, paramScope) {
+  const errors = [];
+  const params = componentDef.params ?? {};
+  const providedProps = node.props ?? {};
+  for (const [paramName, paramDef] of Object.entries(params)) {
+    const isRequired = paramDef.required !== false;
+    if (isRequired && !(paramName in providedProps)) {
+      errors.push(
+        createComponentPropMissingError(node.name, paramName, buildPath(path, "props"))
+      );
+    }
+  }
+  for (const [propName, propValue] of Object.entries(providedProps)) {
+    errors.push(
+      ...validateExpression(propValue, buildPath(path, "props", propName), context, scope, paramScope)
+    );
+  }
+  return errors;
+}
+var ast;
+function collectComponentCalls(node) {
+  const calls = /* @__PURE__ */ new Set();
+  switch (node.kind) {
+    case "component":
+      calls.add(node.name);
+      if (node.children) {
+        for (const child of node.children) {
+          for (const call of collectComponentCalls(child)) {
+            calls.add(call);
+          }
+        }
+      }
+      break;
+    case "element":
+      if (node.children) {
+        for (const child of node.children) {
+          for (const call of collectComponentCalls(child)) {
+            calls.add(call);
+          }
+        }
+      }
+      break;
+    case "if":
+      for (const call of collectComponentCalls(node.then)) {
+        calls.add(call);
+      }
+      if (node.else) {
+        for (const call of collectComponentCalls(node.else)) {
+          calls.add(call);
+        }
       }
-      errors.push(...validateViewNode(node.body, buildPath(path, "body"), context, bodyScope));
       break;
+    case "each":
+      for (const call of collectComponentCalls(node.body)) {
+        calls.add(call);
+      }
+      break;
+    case "text":
+    case "slot":
+      break;
+  }
+  return calls;
+}
+function detectComponentCycles(programAst, context) {
+  if (!programAst.components) return [];
+  const errors = [];
+  const callGraph = /* @__PURE__ */ new Map();
+  for (const [name, def] of Object.entries(programAst.components)) {
+    const calls = collectComponentCalls(def.view);
+    callGraph.set(name, calls);
+  }
+  const visited = /* @__PURE__ */ new Set();
+  const recStack = /* @__PURE__ */ new Set();
+  function dfs(name, path) {
+    visited.add(name);
+    recStack.add(name);
+    const calls = callGraph.get(name) || /* @__PURE__ */ new Set();
+    for (const callee of calls) {
+      if (!visited.has(callee)) {
+        if (dfs(callee, [...path, callee])) return true;
+      } else if (recStack.has(callee)) {
+        const cycleStart = path.indexOf(callee);
+        const cycle = cycleStart >= 0 ? [...path.slice(cycleStart), callee] : [...path, callee];
+        errors.push(createComponentCycleError(cycle, `/components/${path[0]}`));
+        return true;
+      }
+    }
+    recStack.delete(name);
+    return false;
+  }
+  for (const name of context.componentNames) {
+    if (!visited.has(name)) {
+      dfs(name, [name]);
+    }
+  }
+  return errors;
+}
+function validateComponents(programAst, context) {
+  const errors = [];
+  if (!programAst.components) return errors;
+  for (const [name, def] of Object.entries(programAst.components)) {
+    const paramNames = new Set(
+      def.params ? Object.keys(def.params) : []
+    );
+    const paramScope = {
+      params: paramNames,
+      componentName: name
+    };
+    errors.push(
+      ...validateViewNode(
+        def.view,
+        buildPath("", "components", name, "view"),
+        context,
+        /* @__PURE__ */ new Set(),
+        { insideComponent: true, paramScope }
+      )
+    );
   }
   return errors;
 }
-function validateActions(ast, context) {
+function validateActions(programAst, context) {
   const errors = [];
-  for (let i = 0; i < ast.actions.length; i++) {
-    const action = ast.actions[i];
+  for (let i = 0; i < programAst.actions.length; i++) {
+    const action = programAst.actions[i];
     if (action === void 0) continue;
     for (let j = 0; j < action.steps.length; j++) {
       const step = action.steps[j];
@@ -255,12 +487,19 @@ function validateActions(ast, context) {
   }
   return errors;
 }
-function analyzePass(ast) {
-  const context = collectContext(ast);
+function analyzePass(programAst) {
+  ast = programAst;
+  const context = collectContext(programAst);
   const errors = [];
-  errors.push(...checkDuplicateActions(ast));
-  errors.push(...validateActions(ast, context));
-  errors.push(...validateViewNode(ast.view, "/view", context, /* @__PURE__ */ new Set()));
+  errors.push(...checkDuplicateActions(programAst));
+  errors.push(...validateActions(programAst, context));
+  errors.push(...detectComponentCycles(programAst, context));
+  errors.push(...validateComponents(programAst, context));
+  errors.push(
+    ...validateViewNode(programAst.view, "/view", context, /* @__PURE__ */ new Set(), {
+      insideComponent: false
+    })
+  );
   if (errors.length > 0) {
     return {
       ok: false,
@@ -269,14 +508,14 @@ function analyzePass(ast) {
   }
   return {
     ok: true,
-    ast,
+    ast: programAst,
     context
   };
 }
 
 // src/passes/transform.ts
 import { isEventHandler as isEventHandler2 } from "@constela/core";
-function transformExpression(expr) {
+function transformExpression(expr, ctx) {
   switch (expr.expr) {
     case "lit":
       return {
@@ -302,33 +541,73 @@ function transformExpression(expr) {
       return {
         expr: "bin",
         op: expr.op,
-        left: transformExpression(expr.left),
-        right: transformExpression(expr.right)
+        left: transformExpression(expr.left, ctx),
+        right: transformExpression(expr.right, ctx)
       };
     case "not":
       return {
         expr: "not",
-        operand: transformExpression(expr.operand)
+        operand: transformExpression(expr.operand, ctx)
+      };
+    case "param": {
+      const paramValue = ctx.currentParams?.[expr.name];
+      if (paramValue !== void 0) {
+        if (expr.path) {
+          if (paramValue.expr === "var") {
+            const existingPath = paramValue.path;
+            const resultPath = existingPath ? `${existingPath}.${expr.path}` : expr.path;
+            return {
+              expr: "var",
+              name: paramValue.name,
+              path: resultPath
+            };
+          }
+          if (paramValue.expr === "state") {
+            return {
+              expr: "var",
+              name: paramValue.name,
+              path: expr.path
+            };
+          }
+          return paramValue;
+        }
+        return paramValue;
+      }
+      return { expr: "lit", value: null };
+    }
+    case "cond":
+      return {
+        expr: "cond",
+        if: transformExpression(expr.if, ctx),
+        then: transformExpression(expr.then, ctx),
+        else: transformExpression(expr.else, ctx)
+      };
+    case "get":
+      return {
+        expr: "get",
+        base: transformExpression(expr.base, ctx),
+        path: expr.path
       };
   }
 }
-function transformEventHandler(handler) {
+function transformEventHandler(handler, ctx) {
   const result = {
     event: handler.event,
     action: handler.action
   };
   if (handler.payload) {
-    result.payload = transformExpression(handler.payload);
+    result.payload = transformExpression(handler.payload, ctx);
   }
   return result;
 }
+var emptyContext = { components: {} };
 function transformActionStep(step) {
   switch (step.do) {
     case "set":
       return {
         do: "set",
         target: step.target,
-        value: transformExpression(step.value)
+        value: transformExpression(step.value, emptyContext)
       };
     case "update": {
       const updateStep = {
@@ -337,20 +616,26 @@ function transformActionStep(step) {
         operation: step.operation
       };
       if (step.value) {
-        updateStep.value = transformExpression(step.value);
+        updateStep.value = transformExpression(step.value, emptyContext);
+      }
+      if (step.index) {
+        updateStep.index = transformExpression(step.index, emptyContext);
+      }
+      if (step.deleteCount) {
+        updateStep.deleteCount = transformExpression(step.deleteCount, emptyContext);
       }
       return updateStep;
     }
     case "fetch": {
       const fetchStep = {
         do: "fetch",
-        url: transformExpression(step.url)
+        url: transformExpression(step.url, emptyContext)
       };
       if (step.method) {
         fetchStep.method = step.method;
       }
       if (step.body) {
-        fetchStep.body = transformExpression(step.body);
+        fetchStep.body = transformExpression(step.body, emptyContext);
       }
       if (step.result) {
         fetchStep.result = step.result;
@@ -365,7 +650,20 @@ function transformActionStep(step) {
     }
   }
 }
-function transformViewNode(node) {
+function flattenSlotChildren(children, ctx) {
+  const result = [];
+  for (const child of children) {
+    if (child.kind === "slot") {
+      if (ctx.currentChildren && ctx.currentChildren.length > 0) {
+        result.push(...ctx.currentChildren);
+      }
+    } else {
+      result.push(transformViewNode(child, ctx));
+    }
+  }
+  return result;
+}
+function transformViewNode(node, ctx) {
   switch (node.kind) {
     case "element": {
       const compiledElement = {
@@ -376,48 +674,89 @@ function transformViewNode(node) {
         compiledElement.props = {};
         for (const [propName, propValue] of Object.entries(node.props)) {
           if (isEventHandler2(propValue)) {
-            compiledElement.props[propName] = transformEventHandler(propValue);
+            compiledElement.props[propName] = transformEventHandler(propValue, ctx);
           } else {
-            compiledElement.props[propName] = transformExpression(propValue);
+            compiledElement.props[propName] = transformExpression(propValue, ctx);
           }
         }
       }
       if (node.children && node.children.length > 0) {
-        compiledElement.children = node.children.map(transformViewNode);
+        const flattenedChildren = flattenSlotChildren(node.children, ctx);
+        if (flattenedChildren.length > 0) {
+          compiledElement.children = flattenedChildren;
+        }
       }
       return compiledElement;
     }
     case "text":
       return {
         kind: "text",
-        value: transformExpression(node.value)
+        value: transformExpression(node.value, ctx)
       };
     case "if": {
       const compiledIf = {
         kind: "if",
-        condition: transformExpression(node.condition),
-        then: transformViewNode(node.then)
+        condition: transformExpression(node.condition, ctx),
+        then: transformViewNode(node.then, ctx)
       };
       if (node.else) {
-        compiledIf.else = transformViewNode(node.else);
+        compiledIf.else = transformViewNode(node.else, ctx);
       }
       return compiledIf;
     }
     case "each": {
       const compiledEach = {
         kind: "each",
-        items: transformExpression(node.items),
+        items: transformExpression(node.items, ctx),
         as: node.as,
-        body: transformViewNode(node.body)
+        body: transformViewNode(node.body, ctx)
       };
       if (node.index) {
         compiledEach.index = node.index;
       }
       if (node.key) {
-        compiledEach.key = transformExpression(node.key);
+        compiledEach.key = transformExpression(node.key, ctx);
       }
       return compiledEach;
     }
+    case "component": {
+      const def = ctx.components[node.name];
+      if (!def) {
+        return { kind: "element", tag: "div" };
+      }
+      const params = {};
+      if (node.props) {
+        for (const [name, expr] of Object.entries(node.props)) {
+          params[name] = transformExpression(expr, ctx);
+        }
+      }
+      const children = [];
+      if (node.children && node.children.length > 0) {
+        for (const child of node.children) {
+          children.push(transformViewNode(child, ctx));
+        }
+      }
+      const newCtx = {
+        ...ctx,
+        currentParams: params,
+        currentChildren: children
+      };
+      return transformViewNode(def.view, newCtx);
+    }
+    case "slot": {
+      if (ctx.currentChildren && ctx.currentChildren.length > 0) {
+        if (ctx.currentChildren.length === 1) {
+          const child = ctx.currentChildren[0];
+          if (child) return child;
+        }
+        return {
+          kind: "element",
+          tag: "span",
+          children: ctx.currentChildren
+        };
+      }
+      return { kind: "text", value: { expr: "lit", value: "" } };
+    }
   }
 }
 function transformState(state) {
@@ -440,12 +779,15 @@ function transformActions(actions) {
   }
   return compiledActions;
 }
-function transformPass(ast, _context) {
+function transformPass(ast2, _context) {
+  const ctx = {
+    components: ast2.components || {}
+  };
   return {
     version: "1.0",
-    state: transformState(ast.state),
-    actions: transformActions(ast.actions),
-    view: transformViewNode(ast.view)
+    state: transformState(ast2.state),
+    actions: transformActions(ast2.actions),
+    view: transformViewNode(ast2.view, ctx)
   };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/compiler",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "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.1.0"
+    "@constela/core": "0.3.0"
   },
   "devDependencies": {
     "@types/node": "^20.10.0",