@constela/compiler 0.1.0 → 0.2.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

package/dist/index.js

@@ -20,21 +20,29 @@ import {
   createUndefinedActionError,
   createUndefinedVarError,
   createDuplicateActionError,
+  createComponentNotFoundError,
+  createComponentPropMissingError,
+  createComponentCycleError,
+  createUndefinedParamError,
+  createSchemaError,
   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 +51,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,12 +64,17 @@ 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;
@@ -177,8 +190,9 @@ function validateExpressionInEventPayload(expr, path, context, scope) {
   }
   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 +213,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 +222,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);
+        }
+      }
+      break;
+    case "each":
+      for (const call of collectComponentCalls(node.body)) {
+        calls.add(call);
       }
-      errors.push(...validateViewNode(node.body, buildPath(path, "body"), context, bodyScope));
       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 validateActions(ast, context) {
+function validateComponents(programAst, context) {
   const errors = [];
-  for (let i = 0; i < ast.actions.length; i++) {
-    const action = ast.actions[i];
+  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(programAst, context) {
+  const errors = [];
+  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 +419,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 +440,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 +473,60 @@ 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 };
+    }
   }
 }
-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 +535,20 @@ function transformActionStep(step) {
         operation: step.operation
       };
       if (step.value) {
-        updateStep.value = transformExpression(step.value);
+        updateStep.value = transformExpression(step.value, 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 +563,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 +587,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 +692,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.2.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.2.0"
   },
   "devDependencies": {
     "@types/node": "^20.10.0",