pulse-js-framework 1.4.10 → 1.5.0

package/compiler/transformer.js

@@ -1,1316 +1,23 @@
 /**
  * Pulse Transformer - Code generator
  *
- * Transforms AST into JavaScript code
+ * This file re-exports from the modular transformer structure.
+ * The transformer has been split into separate modules for better maintainability:
  *
- * Features:
- * - Import statement support
- * - Slot-based component composition
- * - CSS scoping with unique class prefixes
- * - Source map generation
- */
-
-import { NodeType } from './parser.js';
-import { SourceMapGenerator } from './sourcemap.js';
-
-/** Generate a unique scope ID for CSS scoping */
-const generateScopeId = () => 'p' + Math.random().toString(36).substring(2, 8);
-
-// Token spacing constants (shared across methods)
-const NO_SPACE_AFTER = new Set(['DOT', 'LPAREN', 'LBRACKET', 'LBRACE', 'NOT', 'SPREAD', '.', '(', '[', '{', '!', '~', '...']);
-const NO_SPACE_BEFORE = new Set(['DOT', 'RPAREN', 'RBRACKET', 'RBRACE', 'SEMICOLON', 'COMMA', 'INCREMENT', 'DECREMENT', 'LPAREN', 'LBRACKET', '.', ')', ']', '}', ';', ',', '++', '--', '(', '[']);
-const PUNCT_NO_SPACE_BEFORE = ['DOT', 'LPAREN', 'RPAREN', 'LBRACKET', 'RBRACKET', 'SEMICOLON', 'COMMA', 'COLON'];
-const PUNCT_NO_SPACE_AFTER = ['DOT', 'LPAREN', 'LBRACKET', 'NOT', 'COLON'];
-const STATEMENT_KEYWORDS = new Set(['let', 'const', 'var', 'return', 'if', 'else', 'for', 'while', 'switch', 'throw', 'try', 'catch', 'finally']);
-const BUILTIN_FUNCTIONS = new Set(['setTimeout', 'setInterval', 'clearTimeout', 'clearInterval', 'alert', 'confirm', 'prompt', 'console', 'document', 'window', 'Math', 'JSON', 'Date', 'Array', 'Object', 'String', 'Number', 'Boolean', 'Promise', 'fetch']);
-const STATEMENT_TOKEN_TYPES = new Set(['IF', 'FOR', 'EACH']);
-
-/**
- * Transformer class
- */
-export class Transformer {
-  constructor(ast, options = {}) {
-    this.ast = ast;
-    this.options = {
-      runtime: 'pulse-js-framework/runtime',
-      minify: false,
-      scopeStyles: true,
-      sourceMap: false,        // Enable source map generation
-      sourceFileName: null,    // Original .pulse file name
-      sourceContent: null,     // Original source content (for inline source maps)
-      ...options
-    };
-    this.stateVars = new Set();
-    this.propVars = new Set();
-    this.propDefaults = new Map();
-    this.actionNames = new Set();
-    this.importedComponents = new Map();
-    this.scopeId = this.options.scopeStyles ? generateScopeId() : null;
-
-    // Source map tracking
-    this.sourceMap = null;
-    this._currentLine = 0;
-    this._currentColumn = 0;
-
-    // Initialize source map generator if enabled
-    if (this.options.sourceMap) {
-      this.sourceMap = new SourceMapGenerator({
-        file: this.options.sourceFileName?.replace('.pulse', '.js') || 'output.js'
-      });
-      if (this.options.sourceFileName) {
-        this.sourceMap.addSource(
-          this.options.sourceFileName,
-          this.options.sourceContent
-        );
-      }
-    }
-  }
-
-  /**
-   * Add a mapping to the source map
-   * @param {Object} original - Original position {line, column} (1-based)
-   * @param {string} name - Optional identifier name
-   */
-  _addMapping(original, name = null) {
-    if (!this.sourceMap || !original) return;
-
-    this.sourceMap.addMapping({
-      generated: {
-        line: this._currentLine,
-        column: this._currentColumn
-      },
-      original: {
-        line: original.line - 1, // Convert to 0-based
-        column: original.column - 1
-      },
-      source: this.options.sourceFileName,
-      name
-    });
-  }
-
-  /**
-   * Track output position when writing code
-   * @param {string} code - Generated code
-   * @returns {string} The same code (for chaining)
-   */
-  _trackCode(code) {
-    for (const char of code) {
-      if (char === '\n') {
-        this._currentLine++;
-        this._currentColumn = 0;
-      } else {
-        this._currentColumn++;
-      }
-    }
-    return code;
-  }
-
-  /**
-   * Write code with optional source mapping
-   * @param {string} code - Code to write
-   * @param {Object} original - Original position {line, column}
-   * @param {string} name - Optional identifier name
-   * @returns {string} The code
-   */
-  _emit(code, original = null, name = null) {
-    if (original) {
-      this._addMapping(original, name);
-    }
-    return this._trackCode(code);
-  }
-
-  /**
-   * Transform AST to JavaScript code
-   */
-  transform() {
-    const parts = [];
-
-    // Extract imported components first
-    if (this.ast.imports) {
-      this.extractImportedComponents(this.ast.imports);
-    }
-
-    // Imports (runtime + user imports)
-    parts.push(this.generateImports());
-
-    // Extract prop variables
-    if (this.ast.props) {
-      this.extractPropVars(this.ast.props);
-    }
-
-    // Extract state variables
-    if (this.ast.state) {
-      this.extractStateVars(this.ast.state);
-    }
-
-    // Extract action names
-    if (this.ast.actions) {
-      this.extractActionNames(this.ast.actions);
-    }
-
-    // Store (must come before router so $store is available to guards)
-    if (this.ast.store) {
-      parts.push(this.transformStore(this.ast.store));
-    }
-
-    // Router (after store so guards can access $store)
-    if (this.ast.router) {
-      parts.push(this.transformRouter(this.ast.router));
-    }
-
-    // State
-    if (this.ast.state) {
-      parts.push(this.transformState(this.ast.state));
-    }
-
-    // Actions
-    if (this.ast.actions) {
-      parts.push(this.transformActions(this.ast.actions));
-    }
-
-    // View
-    if (this.ast.view) {
-      parts.push(this.transformView(this.ast.view));
-    }
-
-    // Style
-    if (this.ast.style) {
-      parts.push(this.transformStyle(this.ast.style));
-    }
-
-    // Component export
-    parts.push(this.generateExport());
-
-    const code = parts.filter(Boolean).join('\n\n');
-
-    // Track the generated code for source map positions
-    if (this.sourceMap) {
-      this._trackCode(code);
-    }
-
-    return code;
-  }
-
-  /**
-   * Transform AST and return result with optional source map
-   * @returns {Object} Result with code and optional sourceMap
-   */
-  transformWithSourceMap() {
-    const code = this.transform();
-
-    if (!this.sourceMap) {
-      return { code, sourceMap: null };
-    }
-
-    return {
-      code,
-      sourceMap: this.sourceMap.toJSON(),
-      sourceMapComment: this.sourceMap.toComment()
-    };
-  }
-
-  /**
-   * Extract imported component names
-   */
-  extractImportedComponents(imports) {
-    for (const imp of imports) {
-      for (const spec of imp.specifiers) {
-        this.importedComponents.set(spec.local, {
-          source: imp.source,
-          type: spec.type,
-          imported: spec.imported
-        });
-      }
-    }
-  }
-
-  /**
-   * Generate imports (runtime + user imports)
-   */
-  generateImports() {
-    const lines = [];
-
-    // Runtime imports
-    const runtimeImports = [
-      'pulse',
-      'computed',
-      'effect',
-      'batch',
-      'el',
-      'text',
-      'on',
-      'list',
-      'when',
-      'mount',
-      'model'
-    ];
-
-    lines.push(`import { ${runtimeImports.join(', ')} } from '${this.options.runtime}';`);
-
-    // Router imports (if router block exists)
-    if (this.ast.router) {
-      lines.push(`import { createRouter } from '${this.options.runtime}/router';`);
-    }
-
-    // Store imports (if store block exists)
-    if (this.ast.store) {
-      const storeImports = ['createStore', 'createActions', 'createGetters'];
-      lines.push(`import { ${storeImports.join(', ')} } from '${this.options.runtime}/store';`);
-    }
-
-    // User imports from .pulse files
-    if (this.ast.imports && this.ast.imports.length > 0) {
-      lines.push('');
-      lines.push('// Component imports');
-
-      for (const imp of this.ast.imports) {
-        // Handle default + named imports
-        const defaultSpec = imp.specifiers.find(s => s.type === 'default');
-        const namedSpecs = imp.specifiers.filter(s => s.type === 'named');
-        const namespaceSpec = imp.specifiers.find(s => s.type === 'namespace');
-
-        let importStr = 'import ';
-        if (defaultSpec) {
-          importStr += defaultSpec.local;
-          if (namedSpecs.length > 0) {
-            importStr += ', ';
-          }
-        }
-        if (namespaceSpec) {
-          importStr += `* as ${namespaceSpec.local}`;
-        }
-        if (namedSpecs.length > 0) {
-          const named = namedSpecs.map(s =>
-            s.local !== s.imported ? `${s.imported} as ${s.local}` : s.local
-          );
-          importStr += `{ ${named.join(', ')} }`;
-        }
-
-        // Convert .pulse extension to .js
-        let source = imp.source;
-        if (source.endsWith('.pulse')) {
-          source = source.replace('.pulse', '.js');
-        }
-
-        importStr += ` from '${source}';`;
-        lines.push(importStr);
-      }
-    }
-
-    return lines.join('\n');
-  }
-
-  /**
-   * Extract prop variable names and defaults
-   */
-  extractPropVars(propsBlock) {
-    for (const prop of propsBlock.properties) {
-      this.propVars.add(prop.name);
-      this.propDefaults.set(prop.name, prop.value);
-    }
-  }
-
-  /**
-   * Extract state variable names
-   */
-  extractStateVars(stateBlock) {
-    for (const prop of stateBlock.properties) {
-      this.stateVars.add(prop.name);
-    }
-  }
-
-  /**
-   * Extract action names
-   */
-  extractActionNames(actionsBlock) {
-    for (const fn of actionsBlock.functions) {
-      this.actionNames.add(fn.name);
-    }
-  }
-
-  /**
-   * Transform state block
-   */
-  transformState(stateBlock) {
-    const lines = ['// State'];
-
-    for (const prop of stateBlock.properties) {
-      const value = this.transformValue(prop.value);
-      lines.push(`const ${prop.name} = pulse(${value});`);
-    }
-
-    return lines.join('\n');
-  }
-
-  // =============================================================================
-  // Router Transformation
-  // =============================================================================
-
-  /**
-   * Transform router block to createRouter() call
-   */
-  transformRouter(routerBlock) {
-    const lines = ['// Router'];
-
-    // Build routes object
-    const routesCode = [];
-    for (const route of routerBlock.routes) {
-      routesCode.push(`    '${route.path}': ${route.handler}`);
-    }
-
-    lines.push('const router = createRouter({');
-    lines.push(`  mode: '${routerBlock.mode}',`);
-    if (routerBlock.base) {
-      lines.push(`  base: '${routerBlock.base}',`);
-    }
-    lines.push('  routes: {');
-    lines.push(routesCode.join(',\n'));
-    lines.push('  }');
-    lines.push('});');
-    lines.push('');
-
-    // Add global guards
-    if (routerBlock.beforeEach) {
-      const params = routerBlock.beforeEach.params.join(', ');
-      const body = this.transformRouterGuardBody(routerBlock.beforeEach.body);
-      lines.push(`router.beforeEach((${params}) => { ${body} });`);
-    }
-
-    if (routerBlock.afterEach) {
-      const params = routerBlock.afterEach.params.join(', ');
-      const body = this.transformRouterGuardBody(routerBlock.afterEach.body);
-      lines.push(`router.afterEach((${params}) => { ${body} });`);
-    }
-
-    lines.push('');
-    lines.push('// Start router');
-    lines.push('router.start();');
-
-    return lines.join('\n');
-  }
-
-  /** Helper to emit token value with proper string/template handling */
-  emitToken(token) {
-    if (token.type === 'STRING') return token.raw || JSON.stringify(token.value);
-    if (token.type === 'TEMPLATE') return token.raw || ('`' + token.value + '`');
-    return token.value;
-  }
-
-  /** Helper to check if space needed between tokens */
-  needsSpace(token, nextToken) {
-    if (!nextToken) return false;
-    return !PUNCT_NO_SPACE_BEFORE.includes(nextToken.type) && !PUNCT_NO_SPACE_AFTER.includes(token.type);
-  }
-
-  /** Transform router guard body - handles store references */
-  transformRouterGuardBody(tokens) {
-    let code = '';
-    for (let i = 0; i < tokens.length; i++) {
-      const token = tokens[i];
-      if (token.value === 'store' && tokens[i + 1]?.type === 'DOT') {
-        code += '$store';
-      } else {
-        code += this.emitToken(token);
-      }
-      if (this.needsSpace(token, tokens[i + 1])) code += ' ';
-    }
-    return code.trim();
-  }
-
-  // =============================================================================
-  // Store Transformation
-  // =============================================================================
-
-  /**
-   * Transform store block to createStore(), createActions(), createGetters() calls
-   */
-  transformStore(storeBlock) {
-    const lines = ['// Store'];
-
-    // Transform state
-    if (storeBlock.state) {
-      const stateProps = storeBlock.state.properties.map(p =>
-        `  ${p.name}: ${this.transformValue(p.value)}`
-      ).join(',\n');
-
-      lines.push('const store = createStore({');
-      lines.push(stateProps);
-      lines.push('}, {');
-      lines.push(`  persist: ${storeBlock.persist},`);
-      lines.push(`  storageKey: '${storeBlock.storageKey}'`);
-      lines.push('});');
-      lines.push('');
-    }
-
-    // Transform actions
-    if (storeBlock.actions) {
-      lines.push('const storeActions = createActions(store, {');
-      for (const fn of storeBlock.actions.functions) {
-        const params = fn.params.length > 0 ? ', ' + fn.params.join(', ') : '';
-        const body = this.transformStoreActionBody(fn.body);
-        lines.push(`  ${fn.name}: (store${params}) => { ${body} },`);
-      }
-      lines.push('});');
-      lines.push('');
-    }
-
-    // Transform getters
-    if (storeBlock.getters) {
-      lines.push('const storeGetters = createGetters(store, {');
-      for (const getter of storeBlock.getters.getters) {
-        const body = this.transformStoreGetterBody(getter.body);
-        lines.push(`  ${getter.name}: (store) => { ${body} },`);
-      }
-      lines.push('});');
-      lines.push('');
-    }
-
-    // Create combined $store object for easy access
-    lines.push('// Combined store with actions and getters');
-    lines.push('const $store = {');
-    lines.push('  ...store,');
-    if (storeBlock.actions) {
-      lines.push('  ...storeActions,');
-    }
-    if (storeBlock.getters) {
-      lines.push('  ...storeGetters,');
-    }
-    lines.push('};');
-
-    return lines.join('\n');
-  }
-
-  /** Transform store action body (this.x = y -> store.x.set(y)) */
-  transformStoreActionBody(tokens) {
-    let code = '';
-    for (let i = 0; i < tokens.length; i++) {
-      const token = tokens[i];
-      if (token.value === 'this') code += 'store';
-      else if (token.type === 'COLON') code += ' : ';
-      else code += this.emitToken(token);
-      if (this.needsSpace(token, tokens[i + 1])) code += ' ';
-    }
-    return code.replace(/store\.(\w+)\s*=\s*([^;]+)/g, 'store.$1.set($2)').trim();
-  }
-
-  /** Transform store getter body (this.x -> store.x.get()) */
-  transformStoreGetterBody(tokens) {
-    return this.transformStoreActionBody(tokens).replace(/store\.(\w+)(?!\.(?:get|set)\()/g, 'store.$1.get()');
-  }
-
-  /**
-   * Transform value
-   */
-  transformValue(node) {
-    if (!node) return 'undefined';
-
-    switch (node.type) {
-      case NodeType.Literal:
-        if (typeof node.value === 'string') {
-          return JSON.stringify(node.value);
-        }
-        return String(node.value);
-
-      case NodeType.ObjectLiteral: {
-        const props = node.properties.map(p =>
-          `${p.name}: ${this.transformValue(p.value)}`
-        );
-        return `{ ${props.join(', ')} }`;
-      }
-
-      case NodeType.ArrayLiteral: {
-        const elements = node.elements.map(e => this.transformValue(e));
-        return `[${elements.join(', ')}]`;
-      }
-
-      case NodeType.Identifier:
-        return node.name;
-
-      default:
-        return 'undefined';
-    }
-  }
-
-  /**
-   * Transform actions block
-   */
-  transformActions(actionsBlock) {
-    const lines = ['// Actions'];
-
-    for (const fn of actionsBlock.functions) {
-      const asyncKeyword = fn.async ? 'async ' : '';
-      const params = fn.params.join(', ');
-      const body = this.transformFunctionBody(fn.body);
-
-      lines.push(`${asyncKeyword}function ${fn.name}(${params}) {`);
-      lines.push(`  ${body}`);
-      lines.push('}');
-      lines.push('');
-    }
-
-    return lines.join('\n');
-  }
-
-  /**
-   * Transform function body tokens back to code
-   */
-  transformFunctionBody(tokens) {
-    let code = '';
-    let lastToken = null;
-    let lastNonSpaceToken = null;
-
-    const needsManualSemicolon = (token, nextToken, lastNonSpace) => {
-      if (!token || lastNonSpace?.value === 'new') return false;
-      if (STATEMENT_TOKEN_TYPES.has(token.type)) return true;
-      if (token.type !== 'IDENT') return false;
-      if (STATEMENT_KEYWORDS.has(token.value)) return true;
-      if (this.stateVars.has(token.value) && nextToken?.type === 'EQ') return true;
-      if (nextToken?.type === 'LPAREN' && (BUILTIN_FUNCTIONS.has(token.value) || this.actionNames.has(token.value))) return true;
-      if (nextToken?.type === 'DOT' && BUILTIN_FUNCTIONS.has(token.value)) return true;
-      return false;
-    };
-
-    const STATEMENT_END_TYPES = new Set(['RBRACE', 'RPAREN', 'RBRACKET', 'SEMICOLON', 'STRING', 'NUMBER', 'TRUE', 'FALSE', 'NULL', 'IDENT']);
-    const afterStatementEnd = (t) => t && STATEMENT_END_TYPES.has(t.type);
-
-    let afterIfCondition = false;  // Track if we just closed an if(...) condition
-
-    for (let i = 0; i < tokens.length; i++) {
-      const token = tokens[i];
-      const nextToken = tokens[i + 1];
-
-      // Track if we're exiting an if condition (if followed by ( ... ))
-      if (token.type === 'RPAREN' && lastNonSpaceToken?.type === 'IF') {
-        // This isn't quite right - we need to track the if keyword before the paren
-      }
-
-      // Detect if we just closed an if/for/while condition
-      // Look back to find if there was an if/for/while before this )
-      if (token.type === 'RPAREN') {
-        // Check if this ) closes an if/for/while condition
-        // by looking for the matching ( and what's before it
-        let parenDepth = 1;
-        for (let j = i - 1; j >= 0 && parenDepth > 0; j--) {
-          if (tokens[j].type === 'RPAREN') parenDepth++;
-          else if (tokens[j].type === 'LPAREN') parenDepth--;
-          if (parenDepth === 0) {
-            // Found matching (, check what's before it
-            if (j > 0 && (tokens[j - 1].type === 'IF' || tokens[j - 1].type === 'FOR' ||
-                         tokens[j - 1].type === 'EACH' || tokens[j - 1].value === 'while')) {
-              afterIfCondition = true;
-            }
-            break;
-          }
-        }
-      }
-
-      // Add semicolon before statement starters (only for non-state-var cases)
-      // But NOT immediately after an if/for/while condition (the next statement is the body)
-      if (needsManualSemicolon(token, nextToken, lastNonSpaceToken) && afterStatementEnd(lastNonSpaceToken)) {
-        if (!afterIfCondition && lastToken && lastToken.value !== ';' && lastToken.value !== '{') {
-          code += '; ';
-        }
-      }
-
-      // Reset afterIfCondition after processing the token following the condition
-      if (afterIfCondition && token.type !== 'RPAREN') {
-        afterIfCondition = false;
-      }
-
-      // Emit the token value
-      if (token.type === 'STRING') {
-        code += token.raw || JSON.stringify(token.value);
-      } else if (token.type === 'TEMPLATE') {
-        code += token.raw || ('`' + token.value + '`');
-      } else {
-        code += token.value;
-      }
-
-      // Decide whether to add space after this token
-      const noSpaceAfter = NO_SPACE_AFTER.has(token.type) || NO_SPACE_AFTER.has(token.value);
-      const noSpaceBefore = nextToken && (NO_SPACE_BEFORE.has(nextToken.type) || NO_SPACE_BEFORE.has(nextToken.value));
-      if (!noSpaceAfter && !noSpaceBefore && nextToken) code += ' ';
-
-      lastToken = token;
-      lastNonSpaceToken = token;
-    }
-
-    // Build patterns for state variable transformation
-    const stateVarPattern = [...this.stateVars].join('|');
-    const funcPattern = [...this.actionNames, ...BUILTIN_FUNCTIONS].join('|');
-    const keywordsPattern = [...STATEMENT_KEYWORDS].join('|');
-
-    // Transform state var assignments: stateVar = value -> stateVar.set(value)
-    for (const stateVar of this.stateVars) {
-      const boundaryPattern = `\\s+(?:${stateVarPattern})(?:\\s*=(?!=)|\\s*\\.set\\()|\\s+(?:${funcPattern})\\s*\\(|\\s+(?:${keywordsPattern})\\b|;|$`;
-      const assignPattern = new RegExp(`\\b${stateVar}\\s*=(?!=)\\s*(.+?)(?=${boundaryPattern})`, 'g');
-      code = code.replace(assignPattern, (_, value) => `${stateVar}.set(${value.trim()});`);
-    }
-
-    // Clean up any double semicolons
-    code = code.replace(/;+/g, ';');
-    code = code.replace(/; ;/g, ';');
-
-    // Then, replace state var reads:
-    // - Not preceded by . (avoid transforming obj.stateVar property access)
-    // - Not followed by = (assignment), ( (function call), .get/.set (already transformed)
-    // - Allow method calls like stateVar.toLowerCase() -> stateVar.get().toLowerCase()
-    for (const stateVar of this.stateVars) {
-      code = code.replace(
-        new RegExp(`(?<!\\.\\s*)\\b${stateVar}\\b(?!\\s*=(?!=)|\\s*\\(|\\s*\\.(?:get|set))`, 'g'),
-        `${stateVar}.get()`
-      );
-    }
-
-    return code.trim();
-  }
-
-  /**
-   * Transform view block
-   */
-  transformView(viewBlock) {
-    const lines = ['// View'];
-
-    // Generate render function with props parameter
-    lines.push('function render({ props = {}, slots = {} } = {}) {');
-
-    // Destructure props with defaults if component has props
-    if (this.propVars.size > 0) {
-      const propsDestructure = [...this.propVars].map(name => {
-        const defaultValue = this.propDefaults.get(name);
-        const defaultCode = defaultValue ? this.transformValue(defaultValue) : 'undefined';
-        return `${name} = ${defaultCode}`;
-      }).join(', ');
-      lines.push(`  const { ${propsDestructure} } = props;`);
-    }
-
-    lines.push('  return (');
-
-    const children = viewBlock.children.map(child =>
-      this.transformViewNode(child, 4)
-    );
-
-    if (children.length === 1) {
-      lines.push(children[0]);
-    } else {
-      lines.push('    [');
-      lines.push(children.map(c => '      ' + c.trim()).join(',\n'));
-      lines.push('    ]');
-    }
-
-    lines.push('  );');
-    lines.push('}');
-
-    return lines.join('\n');
-  }
-
-  /** View node transformers lookup table */
-  static VIEW_NODE_HANDLERS = {
-    [NodeType.Element]: 'transformElement',
-    [NodeType.TextNode]: 'transformTextNode',
-    [NodeType.IfDirective]: 'transformIfDirective',
-    [NodeType.EachDirective]: 'transformEachDirective',
-    [NodeType.EventDirective]: 'transformEventDirective',
-    [NodeType.SlotElement]: 'transformSlot',
-    [NodeType.LinkDirective]: 'transformLinkDirective',
-    [NodeType.OutletDirective]: 'transformOutletDirective',
-    [NodeType.NavigateDirective]: 'transformNavigateDirective'
-  };
-
-  /** Transform a view node (element, directive, slot, text) */
-  transformViewNode(node, indent = 0) {
-    const handler = Transformer.VIEW_NODE_HANDLERS[node.type];
-    if (handler) return this[handler](node, indent);
-    return `${' '.repeat(indent)}/* unknown node: ${node.type} */`;
-  }
-
-  /**
-   * Transform slot element
-   */
-  transformSlot(node, indent) {
-    const pad = ' '.repeat(indent);
-    const slotName = node.name || 'default';
-
-    // If there's fallback content
-    if (node.fallback && node.fallback.length > 0) {
-      const fallbackCode = node.fallback.map(child =>
-        this.transformViewNode(child, indent + 2)
-      ).join(',\n');
-
-      return `${pad}(slots?.${slotName} ? slots.${slotName}() : (\n${fallbackCode}\n${pad}))`;
-    }
-
-    // Simple slot reference
-    return `${pad}(slots?.${slotName} ? slots.${slotName}() : null)`;
-  }
-
-  // =============================================================================
-  // Router Directive Transformations
-  // =============================================================================
-
-  /**
-   * Transform @link directive
-   */
-  transformLinkDirective(node, indent) {
-    const pad = ' '.repeat(indent);
-    const path = this.transformExpression(node.path);
-
-    let content;
-    if (Array.isArray(node.content)) {
-      content = node.content.map(c => this.transformViewNode(c, 0)).join(', ');
-    } else if (node.content) {
-      content = this.transformTextNode(node.content, 0).trim();
-    } else {
-      content = '""';
-    }
-
-    let options = '{}';
-    if (node.options) {
-      options = this.transformExpression(node.options);
-    }
-
-    return `${pad}router.link(${path}, ${content}, ${options})`;
-  }
-
-  /**
-   * Transform @outlet directive
-   */
-  transformOutletDirective(node, indent) {
-    const pad = ' '.repeat(indent);
-    const container = node.container ? `'${node.container}'` : "'#app'";
-    return `${pad}router.outlet(${container})`;
-  }
-
-  /**
-   * Transform @navigate directive (used in event handlers)
-   */
-  transformNavigateDirective(node, indent) {
-    const pad = ' '.repeat(indent);
-
-    // Handle @back and @forward
-    if (node.action === 'back') {
-      return `${pad}router.back()`;
-    }
-    if (node.action === 'forward') {
-      return `${pad}router.forward()`;
-    }
-
-    // Regular @navigate(path)
-    const path = this.transformExpression(node.path);
-    let options = '';
-    if (node.options) {
-      options = ', ' + this.transformExpression(node.options);
-    }
-    return `${pad}router.navigate(${path}${options})`;
-  }
-
-  /**
-   * Transform element
-   */
-  transformElement(node, indent) {
-    const pad = ' '.repeat(indent);
-    const parts = [];
-
-    // Check if this is a component (starts with uppercase)
-    const selectorParts = node.selector.match(/^([a-zA-Z][a-zA-Z0-9]*)/);
-    const tagName = selectorParts ? selectorParts[1] : '';
-    const isComponent = tagName && /^[A-Z]/.test(tagName) && this.importedComponents.has(tagName);
-
-    if (isComponent) {
-      // Render as component call
-      return this.transformComponentCall(node, indent);
-    }
-
-    // Add scoped class to selector if CSS scoping is enabled
-    let selector = node.selector;
-    if (this.scopeId && selector) {
-      // Add scope class to the selector
-      selector = this.addScopeToSelector(selector);
-    }
-
-    // Start with el() call
-    parts.push(`${pad}el('${selector}'`);
-
-    // Add event handlers as on() chain
-    const eventHandlers = node.directives.filter(d => d.type === NodeType.EventDirective);
-
-    // Add text content
-    if (node.textContent.length > 0) {
-      for (const text of node.textContent) {
-        const textCode = this.transformTextNode(text, 0);
-        parts.push(`,\n${pad}  ${textCode.trim()}`);
-      }
-    }
-
-    // Add children
-    if (node.children.length > 0) {
-      for (const child of node.children) {
-        const childCode = this.transformViewNode(child, indent + 2);
-        parts.push(`,\n${childCode}`);
-      }
-    }
-
-    parts.push(')');
-
-    // Chain event handlers
-    let result = parts.join('');
-    for (const handler of eventHandlers) {
-      const handlerCode = this.transformExpression(handler.handler);
-      result = `on(${result}, '${handler.event}', () => { ${handlerCode}; })`;
-    }
-
-    return result;
-  }
-
-  /**
-   * Add scope class to a CSS selector
-   */
-  addScopeToSelector(selector) {
-    // If selector has classes, add scope class after the first class
-    // Otherwise add it at the end
-    if (selector.includes('.')) {
-      // Add scope after tag name and before first class
-      return selector.replace(/^([a-zA-Z0-9-]*)/, `$1.${this.scopeId}`);
-    }
-    // Just a tag name, add scope class
-    return `${selector}.${this.scopeId}`;
-  }
-
-  /**
-   * Transform a component call (imported component)
-   */
-  transformComponentCall(node, indent) {
-    const pad = ' '.repeat(indent);
-    const selectorParts = node.selector.match(/^([a-zA-Z][a-zA-Z0-9]*)/);
-    const componentName = selectorParts[1];
-
-    // Extract slots from children
-    const slots = {};
-
-    // Children become the default slot
-    if (node.children.length > 0 || node.textContent.length > 0) {
-      const slotContent = [];
-      for (const text of node.textContent) {
-        slotContent.push(this.transformTextNode(text, 0).trim());
-      }
-      for (const child of node.children) {
-        slotContent.push(this.transformViewNode(child, 0).trim());
-      }
-      slots['default'] = slotContent;
-    }
-
-    // Build component call
-    let code = `${pad}${componentName}.render({ `;
-
-    const renderArgs = [];
-
-    // Add props if any
-    if (node.props && node.props.length > 0) {
-      const propsCode = node.props.map(prop => {
-        const valueCode = this.transformExpression(prop.value);
-        return `${prop.name}: ${valueCode}`;
-      }).join(', ');
-      renderArgs.push(`props: { ${propsCode} }`);
-    }
-
-    // Add slots if any
-    if (Object.keys(slots).length > 0) {
-      const slotCode = Object.entries(slots).map(([name, content]) => {
-        return `${name}: () => ${content.length === 1 ? content[0] : `[${content.join(', ')}]`}`;
-      }).join(', ');
-      renderArgs.push(`slots: { ${slotCode} }`);
-    }
-
-    code += renderArgs.join(', ');
-    code += ' })';
-    return code;
-  }
-
-  /**
-   * Transform text node
-   */
-  transformTextNode(node, indent) {
-    const pad = ' '.repeat(indent);
-    const parts = node.parts;
-
-    if (parts.length === 1 && typeof parts[0] === 'string') {
-      // Simple static text
-      return `${pad}${JSON.stringify(parts[0])}`;
-    }
-
-    // Has interpolations - use text() with a function
-    const textParts = parts.map(part => {
-      if (typeof part === 'string') {
-        return JSON.stringify(part);
-      }
-      // Interpolation
-      const expr = this.transformExpressionString(part.expression);
-      return `\${${expr}}`;
-    });
-
-    return `${pad}text(() => \`${textParts.join('')}\`)`;
-  }
-
-  /**
-   * Transform @if directive
-   */
-  transformIfDirective(node, indent) {
-    const pad = ' '.repeat(indent);
-    const condition = this.transformExpression(node.condition);
-
-    const consequent = node.consequent.map(c =>
-      this.transformViewNode(c, indent + 2)
-    ).join(',\n');
-
-    let code = `${pad}when(\n`;
-    code += `${pad}  () => ${condition},\n`;
-    code += `${pad}  () => (\n${consequent}\n${pad}  )`;
-
-    if (node.alternate) {
-      const alternate = node.alternate.map(c =>
-        this.transformViewNode(c, indent + 2)
-      ).join(',\n');
-      code += `,\n${pad}  () => (\n${alternate}\n${pad}  )`;
-    }
-
-    code += `\n${pad})`;
-    return code;
-  }
-
-  /**
-   * Transform @each directive
-   */
-  transformEachDirective(node, indent) {
-    const pad = ' '.repeat(indent);
-    const iterable = this.transformExpression(node.iterable);
-
-    const template = node.template.map(t =>
-      this.transformViewNode(t, indent + 2)
-    ).join(',\n');
-
-    return `${pad}list(\n` +
-           `${pad}  () => ${iterable},\n` +
-           `${pad}  (${node.itemName}, _index) => (\n${template}\n${pad}  )\n` +
-           `${pad})`;
-  }
-
-  /**
-   * Transform event directive
-   */
-  transformEventDirective(node, indent) {
-    const pad = ' '.repeat(indent);
-    const handler = this.transformExpression(node.handler);
-
-    if (node.children && node.children.length > 0) {
-      const children = node.children.map(c =>
-        this.transformViewNode(c, indent + 2)
-      ).join(',\n');
-
-      return `${pad}on(el('div',\n${children}\n${pad}), '${node.event}', () => { ${handler}; })`;
-    }
-
-    return `/* event: ${node.event} -> ${handler} */`;
-  }
-
-  /**
-   * Transform AST expression to JS code
-   */
-  transformExpression(node) {
-    if (!node) return '';
-
-    switch (node.type) {
-      case NodeType.Identifier:
-        if (this.stateVars.has(node.name)) {
-          return `${node.name}.get()`;
-        }
-        // Props are accessed directly (already destructured)
-        return node.name;
-
-      case NodeType.Literal:
-        if (typeof node.value === 'string') {
-          return JSON.stringify(node.value);
-        }
-        return String(node.value);
-
-      case NodeType.TemplateLiteral:
-        // Transform state vars in template literal
-        return '`' + this.transformExpressionString(node.value) + '`';
-
-      case NodeType.MemberExpression: {
-        const obj = this.transformExpression(node.object);
-        // Use optional chaining when accessing properties on function call results
-        // This prevents "Cannot read property X of null" when the function returns null
-        const isCallResult = node.object.type === NodeType.CallExpression;
-        const accessor = isCallResult ? '?.' : '.';
-        if (node.computed) {
-          const prop = this.transformExpression(node.property);
-          return isCallResult ? `${obj}?.[${prop}]` : `${obj}[${prop}]`;
-        }
-        return `${obj}${accessor}${node.property}`;
-      }
-
-      case NodeType.CallExpression: {
-        const callee = this.transformExpression(node.callee);
-        const args = node.arguments.map(a => this.transformExpression(a)).join(', ');
-        return `${callee}(${args})`;
-      }
-
-      case NodeType.BinaryExpression: {
-        const left = this.transformExpression(node.left);
-        const right = this.transformExpression(node.right);
-        return `(${left} ${node.operator} ${right})`;
-      }
-
-      case NodeType.UnaryExpression: {
-        const argument = this.transformExpression(node.argument);
-        return `${node.operator}${argument}`;
-      }
-
-      case NodeType.UpdateExpression: {
-        const argument = this.transformExpression(node.argument);
-        // For state variables, convert x++ to x.set(x.get() + 1)
-        if (node.argument.type === NodeType.Identifier &&
-            this.stateVars.has(node.argument.name)) {
-          const name = node.argument.name;
-          const delta = node.operator === '++' ? 1 : -1;
-          return `${name}.set(${name}.get() + ${delta})`;
-        }
-        return node.prefix
-          ? `${node.operator}${argument}`
-          : `${argument}${node.operator}`;
-      }
-
-      case NodeType.ConditionalExpression: {
-        const test = this.transformExpression(node.test);
-        const consequent = this.transformExpression(node.consequent);
-        const alternate = this.transformExpression(node.alternate);
-        return `(${test} ? ${consequent} : ${alternate})`;
-      }
-
-      case NodeType.ArrowFunction: {
-        const params = node.params.join(', ');
-        if (node.block) {
-          // Block body - transform tokens
-          const body = this.transformFunctionBody(node.body);
-          return `(${params}) => { ${body} }`;
-        } else {
-          // Expression body
-          const body = this.transformExpression(node.body);
-          return `(${params}) => ${body}`;
-        }
-      }
-
-      case NodeType.AssignmentExpression: {
-        const left = this.transformExpression(node.left);
-        const right = this.transformExpression(node.right);
-        // For state variables, convert to .set()
-        if (node.left.type === NodeType.Identifier &&
-            this.stateVars.has(node.left.name)) {
-          return `${node.left.name}.set(${right})`;
-        }
-        return `(${left} = ${right})`;
-      }
-
-      case NodeType.ArrayLiteral: {
-        const elements = node.elements.map(e => this.transformExpression(e)).join(', ');
-        return `[${elements}]`;
-      }
-
-      case NodeType.ObjectLiteral: {
-        const props = node.properties.map(p => {
-          if (p.type === NodeType.SpreadElement) {
-            return `...${this.transformExpression(p.argument)}`;
-          }
-          if (p.shorthand) {
-            // Check if it's a state var
-            if (this.stateVars.has(p.name)) {
-              return `${p.name}: ${p.name}.get()`;
-            }
-            return p.name;
-          }
-          return `${p.name}: ${this.transformExpression(p.value)}`;
-        }).join(', ');
-        return `{ ${props} }`;
-      }
-
-      case NodeType.SpreadElement:
-        return `...${this.transformExpression(node.argument)}`;
-
-      default:
-        return '/* unknown expression */';
-    }
-  }
-
-  /**
-   * Transform expression string (from interpolation)
-   */
-  transformExpressionString(exprStr) {
-    // Simple transformation: wrap state vars with .get()
-    let result = exprStr;
-    for (const stateVar of this.stateVars) {
-      result = result.replace(
-        new RegExp(`\\b${stateVar}\\b`, 'g'),
-        `${stateVar}.get()`
-      );
-    }
-    // Add optional chaining after function calls followed by property access
-    // This prevents "Cannot read property X of null" errors
-    // Pattern: functionName(...).property -> functionName(...)?.property
-    result = result.replace(/(\w+\([^)]*\))\.(\w)/g, '$1?.$2');
-    return result;
-  }
-
-  /**
-   * Transform style block with optional scoping
-   */
-  transformStyle(styleBlock) {
-    const lines = ['// Styles'];
-
-    if (this.scopeId) {
-      lines.push(`const SCOPE_ID = '${this.scopeId}';`);
-    }
-
-    lines.push('const styles = `');
-
-    for (const rule of styleBlock.rules) {
-      lines.push(this.transformStyleRule(rule, 0));
-    }
-
-    lines.push('`;');
-    lines.push('');
-    lines.push('// Inject styles');
-    lines.push('const styleEl = document.createElement("style");');
-
-    if (this.scopeId) {
-      lines.push(`styleEl.setAttribute('data-p-scope', SCOPE_ID);`);
-    }
-
-    lines.push('styleEl.textContent = styles;');
-    lines.push('document.head.appendChild(styleEl);');
-
-    return lines.join('\n');
-  }
-
-  /**
-   * Transform style rule with optional scoping
-   */
-  transformStyleRule(rule, indent) {
-    const pad = '  '.repeat(indent);
-    const lines = [];
-
-    // Apply scope to selector if enabled
-    let selector = rule.selector;
-    if (this.scopeId) {
-      selector = this.scopeStyleSelector(selector);
-    }
-
-    lines.push(`${pad}${selector} {`);
-
-    for (const prop of rule.properties) {
-      lines.push(`${pad}  ${prop.name}: ${prop.value};`);
-    }
-
-    for (const nested of rule.nestedRules) {
-      // For nested rules, combine selectors (simplified nesting)
-      const nestedLines = this.transformStyleRule(nested, indent + 1);
-      lines.push(nestedLines);
-    }
-
-    lines.push(`${pad}}`);
-    return lines.join('\n');
-  }
-
-  /**
-   * Add scope to CSS selector
-   * .container -> .container.p123abc
-   * div -> div.p123abc
-   * .a .b -> .a.p123abc .b.p123abc
-   * @media (max-width: 900px) -> @media (max-width: 900px) (unchanged)
-   * :root, body, *, html -> unchanged (global selectors)
-   */
-  scopeStyleSelector(selector) {
-    if (!this.scopeId) return selector;
-
-    // Don't scope at-rules (media queries, keyframes, etc.)
-    if (selector.startsWith('@')) {
-      return selector;
-    }
-
-    // Global selectors that should not be scoped
-    const globalSelectors = new Set([':root', 'body', 'html', '*']);
-
-    // Check if entire selector is a global selector (possibly with classes like body.dark)
-    const trimmed = selector.trim();
-    const baseSelector = trimmed.split(/[.#\[:\s]/)[0];
-    if (globalSelectors.has(baseSelector) || globalSelectors.has(trimmed)) {
-      return selector;
-    }
-
-    // Split by comma for multiple selectors
-    return selector.split(',').map(part => {
-      part = part.trim();
-
-      // Split by space for descendant selectors
-      return part.split(/\s+/).map(segment => {
-        // Check if this segment is a global selector
-        const segmentBase = segment.split(/[.#\[]/)[0];
-        if (globalSelectors.has(segmentBase) || globalSelectors.has(segment)) {
-          return segment;
-        }
-
-        // Skip pseudo-elements and pseudo-classes at the end
-        const pseudoMatch = segment.match(/^([^:]+)(:.+)?$/);
-        if (pseudoMatch) {
-          const base = pseudoMatch[1];
-          const pseudo = pseudoMatch[2] || '';
-
-          // Skip if it's just a pseudo selector (like :root)
-          if (!base || globalSelectors.has(`:${pseudo.slice(1)}`)) return segment;
-
-          // Add scope class
-          return `${base}.${this.scopeId}${pseudo}`;
-        }
-        return `${segment}.${this.scopeId}`;
-      }).join(' ');
-    }).join(', ');
-  }
-
-  /**
-   * Generate component export
-   */
-  generateExport() {
-    const pageName = this.ast.page?.name || 'Component';
-    const routePath = this.ast.route?.path || null;
-
-    const lines = ['// Export'];
-    lines.push(`export const ${pageName} = {`);
-    lines.push('  render,');
-
-    if (routePath) {
-      lines.push(`  route: ${JSON.stringify(routePath)},`);
-    }
-
-    lines.push('  mount: (target) => {');
-    lines.push('    const el = render();');
-    lines.push('    return mount(target, el);');
-    lines.push('  }');
-    lines.push('};');
-    lines.push('');
-    lines.push(`export default ${pageName};`);
-
-    return lines.join('\n');
-  }
-}
-
-/**
- * Transform AST to JavaScript code
+ * - transformer/index.js      - Main Transformer class
+ * - transformer/constants.js  - Shared constants
+ * - transformer/imports.js    - Import generation
+ * - transformer/state.js      - State/props transformation
+ * - transformer/router.js     - Router transformation
+ * - transformer/store.js      - Store transformation
+ * - transformer/expressions.js - Expression transformation
+ * - transformer/view.js       - View/element transformation
+ * - transformer/style.js      - Style transformation
+ * - transformer/export.js     - Export generation
+ *
+ * @module pulse-js-framework/compiler/transformer
  */
-export function transform(ast, options = {}) {
-  const transformer = new Transformer(ast, options);
-  return transformer.transform();
-}
 
-export default {
-  Transformer,
-  transform
-};
+// Re-export everything from the modular implementation
+export { Transformer, transform } from './transformer/index.js';
+export { default } from './transformer/index.js';