@constela/compiler 0.6.1 → 0.7.1

package/README.md

@@ -0,0 +1,278 @@
+# @constela/compiler
+
+Compiler for the Constela UI framework - transforms AST to optimized runtime programs.
+
+## Installation
+
+```bash
+npm install @constela/compiler
+```
+
+## Overview
+
+This package transforms validated Constela AST into optimized `CompiledProgram` structures for runtime execution. It implements a three-pass compiler pipeline:
+
+1. **Validate Pass** - Schema and syntax validation
+2. **Analyze Pass** - Semantic analysis and context collection
+3. **Transform Pass** - AST-to-Program transformation
+
+## API Reference
+
+### compile
+
+Main compilation function that orchestrates the entire pipeline.
+
+```typescript
+import { compile } from '@constela/compiler';
+
+const result = compile(input);
+
+if (result.ok) {
+  // Success
+  console.log(result.program);
+} else {
+  // Failure - array of errors
+  console.error(result.errors);
+}
+```
+
+**Parameters:**
+- `input: unknown` - Raw program input (typically parsed JSON)
+
+**Returns:** `CompileResult`
+- Success: `{ ok: true, program: CompiledProgram }`
+- Failure: `{ ok: false, errors: ConstelaError[] }`
+
+### Individual Passes
+
+#### validatePass
+
+```typescript
+import { validatePass } from '@constela/compiler';
+
+const result = validatePass(input);
+if (result.ok) {
+  // result.program is a validated Program
+}
+```
+
+#### analyzePass
+
+```typescript
+import { analyzePass } from '@constela/compiler';
+
+const result = analyzePass(validatedProgram);
+if (result.ok) {
+  // result.context contains analysis results
+  console.log(result.context.stateNames);
+  console.log(result.context.actionNames);
+}
+```
+
+**AnalysisContext:**
+- `stateNames: Set<string>` - State field identifiers
+- `actionNames: Set<string>` - Action names
+- `componentNames: Set<string>` - Component identifiers
+- `routeParams: Set<string>` - Route parameter names
+- `importNames: Set<string>` - External import names
+- `dataNames: Set<string>` - Data source names
+- `refNames: Set<string>` - DOM element reference names
+
+#### transformPass
+
+```typescript
+import { transformPass } from '@constela/compiler';
+
+const compiledProgram = transformPass(program, analysisContext);
+```
+
+## Layout Compilation
+
+Layouts have a separate compilation path with additional validation.
+
+### analyzeLayoutPass
+
+```typescript
+import { analyzeLayoutPass } from '@constela/compiler';
+
+const result = analyzeLayoutPass(layoutProgram);
+if (result.ok) {
+  // result.context contains layout-specific analysis
+}
+```
+
+**Layout Validations:**
+- At least one slot exists
+- No duplicate named slots
+- No duplicate default slots
+- Slots not inside loops
+
+### transformLayoutPass
+
+```typescript
+import { transformLayoutPass } from '@constela/compiler';
+
+const compiledLayout = transformLayoutPass(layoutProgram, layoutContext);
+```
+
+### composeLayoutWithPage
+
+Composes a compiled layout with a page program.
+
+```typescript
+import { composeLayoutWithPage } from '@constela/compiler';
+
+const composedProgram = composeLayoutWithPage(compiledLayout, compiledPage);
+```
+
+**Composition Process:**
+- Merges state from both layout and page
+- Merges actions from both
+- Replaces slot nodes with page content
+- Named slots match by name
+
+## CompiledProgram Structure
+
+```typescript
+interface CompiledProgram {
+  version: '1.0';
+  route?: {
+    path: string;
+    params: string[];
+    title?: CompiledExpression;
+    layout?: string;
+    layoutParams?: Record<string, CompiledExpression>;
+    meta?: Record<string, CompiledExpression>;
+  };
+  lifecycle?: {
+    onMount?: string;
+    onUnmount?: string;
+    onRouteEnter?: string;
+    onRouteLeave?: string;
+  };
+  state: Record<string, {
+    type: 'number' | 'string' | 'list' | 'boolean' | 'object';
+    initial: unknown;
+  }>;
+  actions: Record<string, CompiledAction>;
+  view: CompiledNode;
+  importData?: Record<string, unknown>;
+}
+```
+
+## Compiled Types
+
+### CompiledExpression (13 types)
+
+All expression types are preserved with optimizations:
+
+```typescript
+type CompiledExpression =
+  | CompiledLitExpr
+  | CompiledStateExpr
+  | CompiledVarExpr
+  | CompiledBinExpr
+  | CompiledNotExpr
+  | CompiledCondExpr
+  | CompiledGetExpr
+  | CompiledRouteExpr
+  | CompiledImportExpr
+  | CompiledDataExpr
+  | CompiledRefExpr
+  | CompiledIndexExpr
+  | CompiledParamExpr;
+```
+
+### CompiledNode (7 types)
+
+```typescript
+type CompiledNode =
+  | CompiledElementNode
+  | CompiledTextNode
+  | CompiledIfNode
+  | CompiledEachNode
+  | CompiledMarkdownNode
+  | CompiledCodeNode
+  | CompiledSlotNode;
+```
+
+### CompiledAction
+
+```typescript
+interface CompiledAction {
+  name: string;
+  params?: Record<string, { type: string }>;
+  steps: CompiledStep[];
+}
+```
+
+### CompiledStep (12 types)
+
+```typescript
+type CompiledStep =
+  | CompiledSetStep
+  | CompiledUpdateStep
+  | CompiledFetchStep
+  | CompiledStorageStep
+  | CompiledClipboardStep
+  | CompiledNavigateStep
+  | CompiledImportStep
+  | CompiledCallStep
+  | CompiledSubscribeStep
+  | CompiledDisposeStep
+  | CompiledDomStep
+  | CompiledIfStep;
+```
+
+## Error Handling
+
+The compiler collects multiple errors during the analyze pass:
+
+```typescript
+const result = compile(input);
+
+if (!result.ok) {
+  for (const error of result.errors) {
+    console.log(`[${error.code}] ${error.message}`);
+    console.log(`  at ${error.path}`);
+  }
+}
+```
+
+Errors include JSON Pointer paths for precise location reporting.
+
+## Example
+
+```typescript
+import { compile } from '@constela/compiler';
+
+const program = {
+  version: '1.0',
+  state: {
+    count: { type: 'number', initial: 0 }
+  },
+  actions: [
+    {
+      name: 'increment',
+      steps: [{ do: 'update', target: 'count', operation: 'increment' }]
+    }
+  ],
+  view: {
+    kind: 'element',
+    tag: 'button',
+    props: { onClick: { event: 'click', action: 'increment' } },
+    children: [{ kind: 'text', value: { expr: 'state', name: 'count' } }]
+  }
+};
+
+const result = compile(program);
+
+if (result.ok) {
+  // result.program is ready for runtime
+  console.log(result.program.actions.increment);
+}
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Program, ConstelaError, LayoutProgram, ComponentDef, ViewNode } from '@constela/core';
+import { Program, ConstelaError, Expression, LayoutProgram, ComponentDef, ViewNode } from '@constela/core';
 export { createUndefinedVarError } from '@constela/core';
 
 /**
@@ -63,6 +63,7 @@ interface CompiledRouteDefinition {
     params: string[];
     title?: CompiledExpression;
     layout?: string;
+    layoutParams?: Record<string, Expression>;
     meta?: Record<string, CompiledExpression>;
 }
 interface CompiledLifecycleHooks {
@@ -87,7 +88,7 @@ interface CompiledAction {
     name: string;
     steps: CompiledActionStep[];
 }
-type CompiledActionStep = CompiledSetStep | CompiledUpdateStep | CompiledFetchStep | CompiledStorageStep | CompiledClipboardStep | CompiledNavigateStep | CompiledImportStep | CompiledCallStep | CompiledSubscribeStep | CompiledDisposeStep;
+type CompiledActionStep = CompiledSetStep | CompiledUpdateStep | CompiledFetchStep | CompiledStorageStep | CompiledClipboardStep | CompiledNavigateStep | CompiledImportStep | CompiledCallStep | CompiledSubscribeStep | CompiledDisposeStep | CompiledDomStep | CompiledIfStep;
 interface CompiledSetStep {
     do: 'set';
     target: string;
@@ -178,7 +179,23 @@ interface CompiledDisposeStep {
     do: 'dispose';
     target: CompiledExpression;
 }
-type CompiledNode = CompiledElementNode | CompiledTextNode | CompiledIfNode | CompiledEachNode | CompiledMarkdownNode | CompiledCodeNode;
+/**
+ * Compiled DOM manipulation step
+ */
+interface CompiledDomStep {
+    do: 'dom';
+    operation: 'addClass' | 'removeClass' | 'toggleClass' | 'setAttribute' | 'removeAttribute';
+    selector: CompiledExpression;
+    value?: CompiledExpression;
+    attribute?: string;
+}
+interface CompiledIfStep {
+    do: 'if';
+    condition: CompiledExpression;
+    then: CompiledActionStep[];
+    else?: CompiledActionStep[];
+}
+type CompiledNode = CompiledElementNode | CompiledTextNode | CompiledIfNode | CompiledEachNode | CompiledMarkdownNode | CompiledCodeNode | CompiledSlotNode;
 interface CompiledElementNode {
     kind: 'element';
     tag: string;
@@ -213,7 +230,11 @@ interface CompiledCodeNode {
     language: CompiledExpression;
     content: CompiledExpression;
 }
-type CompiledExpression = CompiledLitExpr | CompiledStateExpr | CompiledVarExpr | CompiledBinExpr | CompiledNotExpr | CompiledCondExpr | CompiledGetExpr | CompiledRouteExpr | CompiledImportExpr | CompiledRefExpr;
+interface CompiledSlotNode {
+    kind: 'slot';
+    name?: string;
+}
+type CompiledExpression = CompiledLitExpr | CompiledStateExpr | CompiledVarExpr | CompiledBinExpr | CompiledNotExpr | CompiledCondExpr | CompiledGetExpr | CompiledRouteExpr | CompiledImportExpr | CompiledDataExpr | CompiledRefExpr | CompiledIndexExpr | CompiledParamExpr;
 interface CompiledLitExpr {
     expr: 'lit';
     value: string | number | boolean | null | unknown[];
@@ -221,6 +242,7 @@ interface CompiledLitExpr {
 interface CompiledStateExpr {
     expr: 'state';
     name: string;
+    path?: string;
 }
 interface CompiledVarExpr {
     expr: 'var';
@@ -258,6 +280,21 @@ interface CompiledImportExpr {
     name: string;
     path?: string;
 }
+interface CompiledDataExpr {
+    expr: 'data';
+    name: string;
+    path?: string;
+}
+interface CompiledIndexExpr {
+    expr: 'index';
+    base: CompiledExpression;
+    key: CompiledExpression;
+}
+interface CompiledParamExpr {
+    expr: 'param';
+    name: string;
+    path?: string;
+}
 interface CompiledEventHandler {
     event: string;
     action: string;
@@ -380,6 +417,7 @@ interface CompiledLayoutProgram {
     actions: CompiledAction[];
     view: CompiledNode;
     components?: Record<string, ComponentDef> | undefined;
+    importData?: Record<string, unknown>;
 }
 /**
  * Transforms a layout program into a compiled layout
@@ -388,6 +426,6 @@ declare function transformLayoutPass(layout: LayoutProgram, _context: LayoutAnal
 /**
  * Composes a layout with a page, inserting page content into slots
  */
-declare function composeLayoutWithPage(layout: CompiledProgram, page: CompiledProgram, slots?: Record<string, ViewNode>): CompiledProgram;
+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 CompiledCallStep, type CompiledClipboardStep, type CompiledCodeNode, type CompiledDisposeStep, type CompiledEachNode, type CompiledElementNode, type CompiledEventHandler, type CompiledExpression, type CompiledFetchStep, type CompiledIfNode, type CompiledImportExpr, type CompiledImportStep, type CompiledLayoutProgram, type CompiledLifecycleHooks, type CompiledMarkdownNode, type CompiledNavigateStep, type CompiledNode, type CompiledProgram, type CompiledRefExpr, type CompiledRouteDefinition, type CompiledRouteExpr, type CompiledSetStep, type CompiledStorageStep, type CompiledSubscribeStep, type CompiledTextNode, type CompiledUpdateStep, 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 CompiledBinExpr, type CompiledCallStep, type CompiledClipboardStep, type CompiledCodeNode, type CompiledCondExpr, type CompiledDataExpr, type CompiledDisposeStep, type CompiledDomStep, type CompiledEachNode, type CompiledElementNode, type CompiledEventHandler, type CompiledExpression, type CompiledFetchStep, type CompiledGetExpr, type CompiledIfNode, type CompiledIfStep, type CompiledImportExpr, type CompiledImportStep, type CompiledIndexExpr, type CompiledLayoutProgram, type CompiledLifecycleHooks, type CompiledLitExpr, type CompiledMarkdownNode, type CompiledNavigateStep, type CompiledNode, type CompiledNotExpr, type CompiledProgram, type CompiledRefExpr, type CompiledRouteDefinition, type CompiledRouteExpr, type CompiledSetStep, type CompiledSlotNode, type CompiledStateExpr, type CompiledStorageStep, type CompiledSubscribeStep, type CompiledTextNode, type CompiledUpdateStep, 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

@@ -958,11 +958,16 @@ function transformExpression(expr, ctx) {
         expr: "lit",
         value: expr.value
       };
-    case "state":
-      return {
+    case "state": {
+      const stateExpr = {
         expr: "state",
         name: expr.name
       };
+      if (expr.path) {
+        stateExpr.path = expr.path;
+      }
+      return stateExpr;
+    }
     case "var": {
       const varExpr = {
         expr: "var",
@@ -1052,6 +1057,12 @@ function transformExpression(expr, ctx) {
     }
     case "ref":
       return { expr: "ref", name: expr.name };
+    case "index":
+      return {
+        expr: "index",
+        base: transformExpression(expr.base, ctx),
+        key: transformExpression(expr.key, ctx)
+      };
   }
 }
 function transformEventHandler(handler, ctx) {
@@ -1219,6 +1230,16 @@ function transformActionStep(step) {
         target: transformExpression(disposeStep.target, emptyContext)
       };
     }
+    case "dom": {
+      const domStep = step;
+      return {
+        do: "dom",
+        operation: domStep.operation,
+        selector: transformExpression(domStep.selector, emptyContext),
+        ...domStep.value && { value: transformExpression(domStep.value, emptyContext) },
+        ...domStep.attribute && { attribute: domStep.attribute }
+      };
+    }
   }
 }
 function flattenSlotChildren(children, ctx) {
@@ -1385,6 +1406,9 @@ function transformRouteDefinition(route, ctx) {
   if (route.layout) {
     compiled.layout = route.layout;
   }
+  if (route.layoutParams) {
+    compiled.layoutParams = route.layoutParams;
+  }
   if (route.meta) {
     compiled.meta = {};
     for (const [key, value] of Object.entries(route.meta)) {
@@ -1685,31 +1709,254 @@ function transformState2(state) {
   }
   return result;
 }
-function transformActions2(actions) {
-  if (!actions) return [];
-  return actions.map((action) => ({
-    name: action.name,
-    steps: action.steps.map((step) => {
-      if (step.do === "set") {
-        return {
-          do: "set",
-          target: step.target,
-          value: { expr: "lit", value: null }
-          // Simplified for now
-        };
+function transformExpression2(expr) {
+  switch (expr.expr) {
+    case "lit":
+      return { expr: "lit", value: expr.value };
+    case "state":
+      return { expr: "state", name: expr.name };
+    case "var": {
+      const varExpr = { expr: "var", name: expr.name };
+      if (expr.path) {
+        varExpr.path = expr.path;
       }
-      if (step.do === "update") {
-        return {
-          do: "update",
-          target: step.target,
-          operation: step.operation
-        };
+      return varExpr;
+    }
+    case "bin":
+      return {
+        expr: "bin",
+        op: expr.op,
+        left: transformExpression2(expr.left),
+        right: transformExpression2(expr.right)
+      };
+    case "not":
+      return {
+        expr: "not",
+        operand: transformExpression2(expr.operand)
+      };
+    case "cond":
+      return {
+        expr: "cond",
+        if: transformExpression2(expr.if),
+        then: transformExpression2(expr.then),
+        else: transformExpression2(expr.else)
+      };
+    case "get":
+      return {
+        expr: "get",
+        base: transformExpression2(expr.base),
+        path: expr.path
+      };
+    case "route":
+      return {
+        expr: "route",
+        name: expr.name,
+        source: expr.source ?? "param"
+      };
+    case "import": {
+      const importExpr = { expr: "import", name: expr.name };
+      if (expr.path) {
+        importExpr.path = expr.path;
+      }
+      return importExpr;
+    }
+    case "data": {
+      const dataExpr = { expr: "import", name: expr.name };
+      if (expr.path) {
+        dataExpr.path = expr.path;
+      }
+      return dataExpr;
+    }
+    case "param": {
+      const paramExpr = { expr: "param", name: expr.name };
+      if (expr.path) {
+        paramExpr.path = expr.path;
       }
+      return paramExpr;
+    }
+    case "ref":
+      return { expr: "ref", name: expr.name };
+    default:
+      return { expr: "lit", value: null };
+  }
+}
+function transformActionStep2(step) {
+  switch (step.do) {
+    case "set":
       return {
+        do: "set",
+        target: step.target,
+        value: transformExpression2(step.value)
+      };
+    case "update": {
+      const updateStep = {
+        do: "update",
+        target: step.target,
+        operation: step.operation
+      };
+      if (step.value) {
+        updateStep.value = transformExpression2(step.value);
+      }
+      if (step.index) {
+        updateStep.index = transformExpression2(step.index);
+      }
+      if (step.deleteCount) {
+        updateStep.deleteCount = transformExpression2(step.deleteCount);
+      }
+      return updateStep;
+    }
+    case "fetch": {
+      const fetchStep = {
         do: "fetch",
-        url: { expr: "lit", value: "" }
+        url: transformExpression2(step.url)
       };
-    })
+      if (step.method) {
+        fetchStep.method = step.method;
+      }
+      if (step.body) {
+        fetchStep.body = transformExpression2(step.body);
+      }
+      if (step.result) {
+        fetchStep.result = step.result;
+      }
+      if (step.onSuccess) {
+        fetchStep.onSuccess = step.onSuccess.map(transformActionStep2);
+      }
+      if (step.onError) {
+        fetchStep.onError = step.onError.map(transformActionStep2);
+      }
+      return fetchStep;
+    }
+    case "storage": {
+      const storageStep = step;
+      const compiledStorageStep = {
+        do: "storage",
+        operation: storageStep.operation,
+        key: transformExpression2(storageStep.key),
+        storage: storageStep.storage
+      };
+      if (storageStep.value) {
+        compiledStorageStep.value = transformExpression2(storageStep.value);
+      }
+      if (storageStep.result) {
+        compiledStorageStep.result = storageStep.result;
+      }
+      if (storageStep.onSuccess) {
+        compiledStorageStep.onSuccess = storageStep.onSuccess.map(transformActionStep2);
+      }
+      if (storageStep.onError) {
+        compiledStorageStep.onError = storageStep.onError.map(transformActionStep2);
+      }
+      return compiledStorageStep;
+    }
+    case "clipboard": {
+      const clipboardStep = step;
+      const compiledClipboardStep = {
+        do: "clipboard",
+        operation: clipboardStep.operation
+      };
+      if (clipboardStep.value) {
+        compiledClipboardStep.value = transformExpression2(clipboardStep.value);
+      }
+      if (clipboardStep.result) {
+        compiledClipboardStep.result = clipboardStep.result;
+      }
+      if (clipboardStep.onSuccess) {
+        compiledClipboardStep.onSuccess = clipboardStep.onSuccess.map(transformActionStep2);
+      }
+      if (clipboardStep.onError) {
+        compiledClipboardStep.onError = clipboardStep.onError.map(transformActionStep2);
+      }
+      return compiledClipboardStep;
+    }
+    case "navigate": {
+      const navigateStep = step;
+      const compiledNavigateStep = {
+        do: "navigate",
+        url: transformExpression2(navigateStep.url)
+      };
+      if (navigateStep.target) {
+        compiledNavigateStep.target = navigateStep.target;
+      }
+      if (navigateStep.replace !== void 0) {
+        compiledNavigateStep.replace = navigateStep.replace;
+      }
+      return compiledNavigateStep;
+    }
+    case "import": {
+      const importStep = step;
+      const compiledImportStep = {
+        do: "import",
+        module: importStep.module,
+        result: importStep.result
+      };
+      if (importStep.onSuccess) {
+        compiledImportStep.onSuccess = importStep.onSuccess.map(transformActionStep2);
+      }
+      if (importStep.onError) {
+        compiledImportStep.onError = importStep.onError.map(transformActionStep2);
+      }
+      return compiledImportStep;
+    }
+    case "call": {
+      const callStep = step;
+      const compiledCallStep = {
+        do: "call",
+        target: transformExpression2(callStep.target)
+      };
+      if (callStep.args) {
+        compiledCallStep.args = callStep.args.map((arg) => transformExpression2(arg));
+      }
+      if (callStep.result) {
+        compiledCallStep.result = callStep.result;
+      }
+      if (callStep.onSuccess) {
+        compiledCallStep.onSuccess = callStep.onSuccess.map(transformActionStep2);
+      }
+      if (callStep.onError) {
+        compiledCallStep.onError = callStep.onError.map(transformActionStep2);
+      }
+      return compiledCallStep;
+    }
+    case "subscribe": {
+      const subscribeStep = step;
+      return {
+        do: "subscribe",
+        target: transformExpression2(subscribeStep.target),
+        event: subscribeStep.event,
+        action: subscribeStep.action
+      };
+    }
+    case "dispose": {
+      const disposeStep = step;
+      return {
+        do: "dispose",
+        target: transformExpression2(disposeStep.target)
+      };
+    }
+    case "dom": {
+      const domStep = step;
+      return {
+        do: "dom",
+        operation: domStep.operation,
+        selector: transformExpression2(domStep.selector),
+        ...domStep.value && { value: transformExpression2(domStep.value) },
+        ...domStep.attribute && { attribute: domStep.attribute }
+      };
+    }
+    default:
+      return {
+        do: "set",
+        target: "_unknown",
+        value: { expr: "lit", value: null }
+      };
+  }
+}
+function transformActions2(actions) {
+  if (!actions) return [];
+  return actions.map((action) => ({
+    name: action.name,
+    steps: action.steps.map(transformActionStep2)
   }));
 }
 function transformViewNode2(node, ctx) {
@@ -1791,7 +2038,7 @@ function transformLayoutPass(layout, _context) {
   const ctx = {
     components: layout.components || {}
   };
-  return {
+  const result = {
     version: "1.0",
     type: "layout",
     state: transformState2(layout.state),
@@ -1799,17 +2046,161 @@ function transformLayoutPass(layout, _context) {
     view: transformViewNode2(layout.view, ctx),
     components: layout.components
   };
+  if (layout.importData && Object.keys(layout.importData).length > 0) {
+    result.importData = layout.importData;
+  }
+  return result;
 }
 function deepCloneNode(node) {
   return JSON.parse(JSON.stringify(node));
 }
+function isParamExpression(value) {
+  return typeof value === "object" && value !== null && value.expr === "param" && typeof value.name === "string";
+}
+function resolveParamExpression(paramExpr, layoutParams) {
+  const resolvedValue = layoutParams[paramExpr.name];
+  if (!resolvedValue) {
+    return { expr: "lit", value: null };
+  }
+  if (paramExpr.path) {
+    return {
+      expr: "get",
+      base: resolvedValue,
+      path: paramExpr.path
+    };
+  }
+  return resolvedValue;
+}
+function resolveExpressionValue(value, layoutParams) {
+  if (!value || typeof value !== "object") {
+    return value;
+  }
+  if (isParamExpression(value)) {
+    return resolveParamExpression(value, layoutParams);
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => resolveExpressionValue(item, layoutParams));
+  }
+  const obj = value;
+  const result = {};
+  for (const [key, val] of Object.entries(obj)) {
+    result[key] = resolveExpressionValue(val, layoutParams);
+  }
+  return result;
+}
+function resolvePropsParams(props, layoutParams) {
+  const result = {};
+  for (const [key, value] of Object.entries(props)) {
+    result[key] = resolveExpressionValue(value, layoutParams);
+  }
+  return result;
+}
+function resolveParamExpressions(node, layoutParams) {
+  switch (node.kind) {
+    case "element": {
+      const elementNode = node;
+      const result = {
+        kind: "element",
+        tag: elementNode.tag
+      };
+      if (elementNode.props) {
+        result.props = resolvePropsParams(
+          elementNode.props,
+          layoutParams
+        );
+      }
+      if (elementNode.children && elementNode.children.length > 0) {
+        result.children = elementNode.children.map(
+          (child) => resolveParamExpressions(child, layoutParams)
+        );
+      }
+      return result;
+    }
+    case "text": {
+      const textNode = node;
+      return {
+        kind: "text",
+        value: resolveExpressionValue(textNode.value, layoutParams)
+      };
+    }
+    case "if": {
+      const ifNode = node;
+      const result = {
+        kind: "if",
+        condition: resolveExpressionValue(ifNode.condition, layoutParams),
+        then: resolveParamExpressions(ifNode.then, layoutParams)
+      };
+      if (ifNode.else) {
+        result.else = resolveParamExpressions(
+          ifNode.else,
+          layoutParams
+        );
+      }
+      return result;
+    }
+    case "each": {
+      const eachNode = node;
+      return {
+        kind: "each",
+        items: resolveExpressionValue(eachNode.items, layoutParams),
+        as: eachNode.as,
+        body: resolveParamExpressions(eachNode.body, layoutParams)
+      };
+    }
+    default:
+      return node;
+  }
+}
+function processNamedSlotsOnly(node, namedContent) {
+  if (node.kind === "slot") {
+    const slotName = node.name;
+    if (slotName && namedContent[slotName]) {
+      return deepCloneNode(namedContent[slotName]);
+    }
+    return node;
+  }
+  if (node.kind === "element") {
+    const children = node.children;
+    if (children && children.length > 0) {
+      const newChildren = children.map((child) => processNamedSlotsOnly(child, namedContent));
+      return {
+        ...node,
+        children: newChildren
+      };
+    }
+    return node;
+  }
+  if (node.kind === "if") {
+    const ifNode = node;
+    const result = {
+      ...node,
+      then: processNamedSlotsOnly(ifNode.then, namedContent)
+    };
+    if (ifNode.else) {
+      result.else = processNamedSlotsOnly(ifNode.else, namedContent);
+    }
+    return result;
+  }
+  if (node.kind === "each") {
+    const eachNode = node;
+    return {
+      ...node,
+      body: processNamedSlotsOnly(eachNode.body, namedContent)
+    };
+  }
+  return node;
+}
 function replaceSlots(node, defaultContent, namedContent) {
   if (node.kind === "slot") {
     const slotName = node.name;
     if (slotName && namedContent?.[slotName]) {
       return deepCloneNode(namedContent[slotName]);
     }
-    return deepCloneNode(defaultContent);
+    const clonedDefault = deepCloneNode(defaultContent);
+    if (namedContent && Object.keys(namedContent).length > 0) {
+      return processNamedSlotsOnly(clonedDefault, namedContent);
+    }
+    return clonedDefault;
   }
   if (node.kind === "element") {
     const children = node.children;
@@ -1842,11 +2233,31 @@ function replaceSlots(node, defaultContent, namedContent) {
   }
   return node;
 }
-function composeLayoutWithPage(layout, page, slots) {
-  const layoutView = deepCloneNode(layout.view);
-  const namedContent = slots ? Object.fromEntries(
-    Object.entries(slots).map(([name, node]) => [name, node])
-  ) : void 0;
+function extractMdxSlotsFromImportData(importData) {
+  if (!importData) return void 0;
+  for (const [, dataSource] of Object.entries(importData)) {
+    if (!Array.isArray(dataSource)) continue;
+    for (const item of dataSource) {
+      if (typeof item === "object" && item !== null && "content" in item && typeof item.content === "object") {
+        const content = item.content;
+        return { "mdx-content": content };
+      }
+    }
+  }
+  return void 0;
+}
+function composeLayoutWithPage(layout, page, layoutParams, slots) {
+  let layoutView = deepCloneNode(layout.view);
+  const resolvedParams = layoutParams ?? {};
+  layoutView = resolveParamExpressions(layoutView, resolvedParams);
+  let namedContent;
+  if (slots) {
+    namedContent = Object.fromEntries(
+      Object.entries(slots).map(([name, node]) => [name, node])
+    );
+  } else {
+    namedContent = extractMdxSlotsFromImportData(page.importData);
+  }
   const composedView = replaceSlots(layoutView, page.view, namedContent);
   const mergedState = {};
   for (const [name, field] of Object.entries(page.state)) {
@@ -1897,6 +2308,16 @@ function composeLayoutWithPage(layout, page, slots) {
   if (Object.keys(mergedComponents).length > 0) {
     result.components = mergedComponents;
   }
+  const mergedImportData = {
+    ...layout.importData || {},
+    ...page.importData || {}
+  };
+  if (Object.keys(mergedImportData).length > 0) {
+    result.importData = mergedImportData;
+  }
+  if (page.lifecycle) {
+    result.lifecycle = page.lifecycle;
+  }
   return result;
 }
 export {

package/package.json

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