pulse-js-framework 1.7.9 → 1.7.11

package/compiler/parser.js

@@ -27,6 +27,13 @@ export const NodeType = {
   IfDirective: 'IfDirective',
   EachDirective: 'EachDirective',
   EventDirective: 'EventDirective',
+  ModelDirective: 'ModelDirective',
+
+  // Accessibility directives
+  A11yDirective: 'A11yDirective',
+  LiveDirective: 'LiveDirective',
+  FocusTrapDirective: 'FocusTrapDirective',
+
   Property: 'Property',
   ObjectLiteral: 'ObjectLiteral',
   ArrayLiteral: 'ArrayLiteral',
@@ -763,6 +770,12 @@ export class Parser {
 
     const name = this.expect(TokenType.IDENT).value;
 
+    // Collect modifiers (.prevent, .stop, .enter, .lazy, etc.)
+    const modifiers = [];
+    while (this.is(TokenType.DIRECTIVE_MOD)) {
+      modifiers.push(this.advance().value);
+    }
+
     if (name === 'if') {
       return this.parseIfDirective();
     }
@@ -770,8 +783,27 @@ export class Parser {
       return this.parseEachDirective();
     }
 
+    // Accessibility directives
+    if (name === 'a11y') {
+      return this.parseA11yDirective();
+    }
+    if (name === 'live') {
+      return this.parseLiveDirective();
+    }
+    if (name === 'focusTrap') {
+      return this.parseFocusTrapDirective();
+    }
+    if (name === 'srOnly') {
+      return this.parseSrOnlyDirective();
+    }
+
+    // @model directive for two-way binding
+    if (name === 'model') {
+      return this.parseModelDirective(modifiers);
+    }
+
     // Event directive like @click
-    return this.parseEventDirective(name);
+    return this.parseEventDirective(name, modifiers);
   }
 
   /**
@@ -781,16 +813,42 @@ export class Parser {
     this.expect(TokenType.AT);
     const name = this.expect(TokenType.IDENT).value;
 
-    // Event directive
+    // Collect modifiers (.prevent, .stop, .enter, .lazy, etc.)
+    const modifiers = [];
+    while (this.is(TokenType.DIRECTIVE_MOD)) {
+      modifiers.push(this.advance().value);
+    }
+
+    // Check for a11y directives
+    if (name === 'a11y') {
+      return this.parseA11yDirective();
+    }
+    if (name === 'live') {
+      return this.parseLiveDirective();
+    }
+    if (name === 'focusTrap') {
+      return this.parseFocusTrapDirective();
+    }
+    if (name === 'srOnly') {
+      return this.parseSrOnlyDirective();
+    }
+
+    // @model directive for two-way binding
+    if (name === 'model') {
+      return this.parseModelDirective(modifiers);
+    }
+
+    // Event directive (click, submit, etc.)
     this.expect(TokenType.LPAREN);
     const expression = this.parseExpression();
     this.expect(TokenType.RPAREN);
 
-    return new ASTNode(NodeType.EventDirective, { event: name, handler: expression });
+    return new ASTNode(NodeType.EventDirective, { event: name, handler: expression, modifiers });
   }
 
   /**
-   * Parse @if directive
+   * Parse @if directive with @else-if/@else chains
+   * Syntax: @if (cond) { } @else-if (cond) { } @else { }
    */
   parseIfDirective() {
     this.expect(TokenType.LPAREN);
@@ -804,23 +862,76 @@ export class Parser {
     }
     this.expect(TokenType.RBRACE);
 
+    const elseIfBranches = [];
     let alternate = null;
-    if (this.is(TokenType.AT) && this.peek()?.value === 'else') {
-      this.advance(); // @
-      this.advance(); // else
-      this.expect(TokenType.LBRACE);
-      alternate = [];
-      while (!this.is(TokenType.RBRACE) && !this.is(TokenType.EOF)) {
-        alternate.push(this.parseViewChild());
+
+    // Parse @else-if and @else chains
+    while (this.is(TokenType.AT)) {
+      const nextToken = this.peek();
+
+      // Check for @else or @else-if
+      if (nextToken?.value === 'else') {
+        this.advance(); // @
+        this.advance(); // else
+
+        // Check if followed by @if or -if (making @else @if or @else-if)
+        if (this.is(TokenType.AT) && (this.peek()?.type === TokenType.IF || this.peek()?.value === 'if')) {
+          // @else @if pattern
+          this.advance(); // @
+          this.advance(); // if
+
+          this.expect(TokenType.LPAREN);
+          const elseIfCondition = this.parseExpression();
+          this.expect(TokenType.RPAREN);
+
+          this.expect(TokenType.LBRACE);
+          const elseIfConsequent = [];
+          while (!this.is(TokenType.RBRACE) && !this.is(TokenType.EOF)) {
+            elseIfConsequent.push(this.parseViewChild());
+          }
+          this.expect(TokenType.RBRACE);
+
+          elseIfBranches.push({ condition: elseIfCondition, consequent: elseIfConsequent });
+        }
+        // Check for -if pattern (@else-if as hyphenated)
+        else if (this.is(TokenType.MINUS) && (this.peek()?.type === TokenType.IF || this.peek()?.value === 'if')) {
+          this.advance(); // -
+          this.advance(); // if
+
+          this.expect(TokenType.LPAREN);
+          const elseIfCondition = this.parseExpression();
+          this.expect(TokenType.RPAREN);
+
+          this.expect(TokenType.LBRACE);
+          const elseIfConsequent = [];
+          while (!this.is(TokenType.RBRACE) && !this.is(TokenType.EOF)) {
+            elseIfConsequent.push(this.parseViewChild());
+          }
+          this.expect(TokenType.RBRACE);
+
+          elseIfBranches.push({ condition: elseIfCondition, consequent: elseIfConsequent });
+        }
+        // Plain @else
+        else {
+          this.expect(TokenType.LBRACE);
+          alternate = [];
+          while (!this.is(TokenType.RBRACE) && !this.is(TokenType.EOF)) {
+            alternate.push(this.parseViewChild());
+          }
+          this.expect(TokenType.RBRACE);
+          break; // @else terminates the chain
+        }
+      } else {
+        break; // Not an @else variant
       }
-      this.expect(TokenType.RBRACE);
     }
 
-    return new ASTNode(NodeType.IfDirective, { condition, consequent, alternate });
+    return new ASTNode(NodeType.IfDirective, { condition, consequent, elseIfBranches, alternate });
   }
 
   /**
-   * Parse @each/@for directive
+   * Parse @each/@for directive with optional key function
+   * Syntax: @for (item of items) key(item.id) { ... }
    */
   parseEachDirective() {
     this.expect(TokenType.LPAREN);
@@ -836,6 +947,15 @@ export class Parser {
     const iterable = this.parseExpression();
     this.expect(TokenType.RPAREN);
 
+    // Parse optional key function: key(item.id)
+    let keyExpr = null;
+    if (this.is(TokenType.IDENT) && this.current().value === 'key') {
+      this.advance(); // consume 'key'
+      this.expect(TokenType.LPAREN);
+      keyExpr = this.parseExpression();
+      this.expect(TokenType.RPAREN);
+    }
+
     this.expect(TokenType.LBRACE);
     const template = [];
     while (!this.is(TokenType.RBRACE) && !this.is(TokenType.EOF)) {
@@ -843,13 +963,15 @@ export class Parser {
     }
     this.expect(TokenType.RBRACE);
 
-    return new ASTNode(NodeType.EachDirective, { itemName, iterable, template });
+    return new ASTNode(NodeType.EachDirective, { itemName, iterable, template, keyExpr });
   }
 
   /**
-   * Parse event directive
+   * Parse event directive with optional modifiers
+   * @param {string} event - Event name (click, keydown, etc.)
+   * @param {string[]} modifiers - Array of modifier names (prevent, stop, enter, etc.)
    */
-  parseEventDirective(event) {
+  parseEventDirective(event, modifiers = []) {
     this.expect(TokenType.LPAREN);
     const handler = this.parseExpression();
     this.expect(TokenType.RPAREN);
@@ -863,7 +985,129 @@ export class Parser {
       this.expect(TokenType.RBRACE);
     }
 
-    return new ASTNode(NodeType.EventDirective, { event, handler, children });
+    return new ASTNode(NodeType.EventDirective, { event, handler, children, modifiers });
+  }
+
+  /**
+   * Parse @model directive for two-way binding
+   * @model(name) or @model.lazy(name) or @model.lazy.trim(name)
+   * @param {string[]} modifiers - Array of modifier names (lazy, trim, number)
+   */
+  parseModelDirective(modifiers = []) {
+    this.expect(TokenType.LPAREN);
+    const binding = this.parseExpression();
+    this.expect(TokenType.RPAREN);
+
+    return new ASTNode(NodeType.ModelDirective, { binding, modifiers });
+  }
+
+  /**
+   * Parse @a11y directive - sets aria attributes
+   * @a11y(label="Close menu") or @a11y(label="Close", describedby="desc")
+   */
+  parseA11yDirective() {
+    this.expect(TokenType.LPAREN);
+
+    const attrs = {};
+
+    // Parse key=value pairs
+    while (!this.is(TokenType.RPAREN) && !this.is(TokenType.EOF)) {
+      const key = this.expect(TokenType.IDENT).value;
+      this.expect(TokenType.EQ);
+
+      let value;
+      if (this.is(TokenType.STRING)) {
+        value = this.advance().value;
+      } else if (this.is(TokenType.TRUE)) {
+        value = true;
+        this.advance();
+      } else if (this.is(TokenType.FALSE)) {
+        value = false;
+        this.advance();
+      } else if (this.is(TokenType.IDENT)) {
+        // Treat unquoted identifier as a string (e.g., role=dialog -> "dialog")
+        value = this.advance().value;
+      } else {
+        value = this.parseExpression();
+      }
+
+      attrs[key] = value;
+
+      if (this.is(TokenType.COMMA)) {
+        this.advance();
+      }
+    }
+
+    this.expect(TokenType.RPAREN);
+
+    return new ASTNode(NodeType.A11yDirective, { attrs });
+  }
+
+  /**
+   * Parse @live directive - creates live region for screen readers
+   * @live(polite) or @live(assertive)
+   */
+  parseLiveDirective() {
+    this.expect(TokenType.LPAREN);
+
+    let priority = 'polite';
+    if (this.is(TokenType.IDENT)) {
+      priority = this.advance().value;
+    }
+
+    this.expect(TokenType.RPAREN);
+
+    return new ASTNode(NodeType.LiveDirective, { priority });
+  }
+
+  /**
+   * Parse @focusTrap directive - traps focus within element
+   * @focusTrap or @focusTrap(autoFocus=true)
+   */
+  parseFocusTrapDirective() {
+    const options = {};
+
+    if (this.is(TokenType.LPAREN)) {
+      this.advance();
+
+      while (!this.is(TokenType.RPAREN) && !this.is(TokenType.EOF)) {
+        const key = this.expect(TokenType.IDENT).value;
+
+        if (this.is(TokenType.EQ)) {
+          this.advance();
+          if (this.is(TokenType.TRUE)) {
+            options[key] = true;
+            this.advance();
+          } else if (this.is(TokenType.FALSE)) {
+            options[key] = false;
+            this.advance();
+          } else if (this.is(TokenType.STRING)) {
+            options[key] = this.advance().value;
+          } else {
+            options[key] = this.parseExpression();
+          }
+        } else {
+          options[key] = true;
+        }
+
+        if (this.is(TokenType.COMMA)) {
+          this.advance();
+        }
+      }
+
+      this.expect(TokenType.RPAREN);
+    }
+
+    return new ASTNode(NodeType.FocusTrapDirective, { options });
+  }
+
+  /**
+   * Parse @srOnly directive - visually hidden but accessible text
+   */
+  parseSrOnlyDirective() {
+    return new ASTNode(NodeType.A11yDirective, {
+      attrs: { srOnly: true }
+    });
   }
 
   /**

package/compiler/transformer/export.js

@@ -12,6 +12,7 @@
 export function generateExport(transformer) {
   const pageName = transformer.ast.page?.name || 'Component';
   const routePath = transformer.ast.route?.path || null;
+  const hasInit = transformer.actionNames.has('init');
 
   const lines = ['// Export'];
   lines.push(`export const ${pageName} = {`);
@@ -21,9 +22,47 @@ export function generateExport(transformer) {
     lines.push(`  route: ${JSON.stringify(routePath)},`);
   }
 
+  // Mount with reactive re-rendering (preserves focus)
   lines.push('  mount: (target) => {');
-  lines.push('    const el = render();');
-  lines.push('    return mount(target, el);');
+  lines.push('    const container = typeof target === "string" ? document.querySelector(target) : target;');
+  lines.push('    let currentEl = null;');
+  lines.push('    effect(() => {');
+  lines.push('      // Save focus state before re-render');
+  lines.push('      const activeEl = document.activeElement;');
+  lines.push('      const isInput = activeEl && (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA");');
+  lines.push('      const focusInfo = isInput ? {');
+  lines.push('        tag: activeEl.tagName.toLowerCase(),');
+  lines.push('        type: activeEl.type || "",');
+  lines.push('        placeholder: activeEl.placeholder || "",');
+  lines.push('        ariaLabel: activeEl.getAttribute("aria-label") || "",');
+  lines.push('        start: activeEl.selectionStart,');
+  lines.push('        end: activeEl.selectionEnd');
+  lines.push('      } : null;');
+  lines.push('      const newEl = render();');
+  lines.push('      if (currentEl) {');
+  lines.push('        container.replaceChild(newEl, currentEl);');
+  lines.push('      } else {');
+  lines.push('        container.appendChild(newEl);');
+  lines.push('      }');
+  lines.push('      currentEl = newEl;');
+  lines.push('      // Restore focus after re-render');
+  lines.push('      if (focusInfo) {');
+  lines.push('        let selector = focusInfo.tag;');
+  lines.push('        if (focusInfo.ariaLabel) selector += `[aria-label="${focusInfo.ariaLabel}"]`;');
+  lines.push('        else if (focusInfo.placeholder) selector += `[placeholder="${focusInfo.placeholder}"]`;');
+  lines.push('        const newActive = newEl.querySelector(selector);');
+  lines.push('        if (newActive) {');
+  lines.push('          newActive.focus();');
+  lines.push('          if (typeof focusInfo.start === "number") {');
+  lines.push('            try { newActive.setSelectionRange(focusInfo.start, focusInfo.end); } catch(e) {}');
+  lines.push('          }');
+  lines.push('        }');
+  lines.push('      }');
+  lines.push('    });');
+  if (hasInit) {
+    lines.push('    init();');
+  }
+  lines.push('    return { unmount: () => currentEl?.remove() };');
   lines.push('  }');
   lines.push('};');
   lines.push('');

package/compiler/transformer/expressions.js

@@ -177,8 +177,22 @@ export function transformFunctionBody(transformer, tokens) {
   let lastToken = null;
   let lastNonSpaceToken = null;
 
+  // Tokens that must follow } directly without semicolon
+  const NO_SEMI_BEFORE = new Set(['catch', 'finally', 'else']);
+
   const needsManualSemicolon = (token, nextToken, lastNonSpace) => {
     if (!token || lastNonSpace?.value === 'new') return false;
+    // Don't add semicolon after 'await' - it always needs its expression
+    if (lastNonSpace?.value === 'await') return false;
+    // For 'return': bare return followed by statement keyword needs semicolon
+    if (lastNonSpace?.value === 'return') {
+      // If followed by a statement keyword, it's a bare return - needs semicolon
+      if (token.type === 'IDENT' && STATEMENT_KEYWORDS.has(token.value)) return true;
+      if (STATEMENT_TOKEN_TYPES.has(token.type)) return true;
+      return false;  // return expression - no semicolon
+    }
+    // Don't add semicolon before catch/finally/else after }
+    if (lastNonSpace?.type === 'RBRACE' && NO_SEMI_BEFORE.has(token.value)) 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;
@@ -245,29 +259,158 @@ export function transformFunctionBody(transformer, tokens) {
     lastNonSpaceToken = token;
   }
 
+  // Protect string literals from state var replacement
+  const stringPlaceholders = [];
+  const protectStrings = (str) => {
+    // Match strings and template literals, handling escapes
+    return str.replace(/(["'`])(?:\\.|(?!\1)[^\\])*\1/g, (match) => {
+      const index = stringPlaceholders.length;
+      stringPlaceholders.push(match);
+      return `__STRING_${index}__`;
+    });
+  };
+  const restoreStrings = (str) => {
+    return str.replace(/__STRING_(\d+)__/g, (_, index) => stringPlaceholders[parseInt(index)]);
+  };
+
+  // Protect strings before transformations
+  code = protectStrings(code);
+
   // Build patterns for state variable transformation
   const stateVarPattern = [...stateVars].join('|');
   const funcPattern = [...actionNames, ...BUILTIN_FUNCTIONS].join('|');
   const keywordsPattern = [...STATEMENT_KEYWORDS].join('|');
 
   // Transform state var assignments: stateVar = value -> stateVar.set(value)
+  // Match assignment and find end by tracking balanced brackets
   for (const stateVar of 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()});`);
+    const pattern = new RegExp(`\\b${stateVar}\\s*=(?!=)`, 'g');
+    let match;
+    const replacements = [];
+
+    while ((match = pattern.exec(code)) !== null) {
+      const startIdx = match.index + match[0].length;
+
+      // Skip whitespace
+      let exprStart = startIdx;
+      while (exprStart < code.length && /\s/.test(code[exprStart])) exprStart++;
+
+      // Find end of expression with bracket balancing
+      let depth = 0;
+      let endIdx = exprStart;
+      let inString = false;
+      let stringChar = '';
+
+      for (let i = exprStart; i < code.length; i++) {
+        const ch = code[i];
+        const prevCh = i > 0 ? code[i-1] : '';
+
+        // Handle string literals
+        if (!inString && (ch === '"' || ch === "'" || ch === '`')) {
+          inString = true;
+          stringChar = ch;
+          endIdx = i + 1;
+          continue;
+        }
+        if (inString) {
+          if (ch === stringChar && prevCh !== '\\') {
+            inString = false;
+          }
+          endIdx = i + 1;
+          continue;
+        }
+
+        // Track bracket depth
+        if (ch === '(' || ch === '[' || ch === '{') {
+          depth++;
+          endIdx = i + 1;
+          continue;
+        }
+        if (ch === ')' || ch === ']' || ch === '}') {
+          if (depth > 0) {
+            depth--;
+            endIdx = i + 1;
+            continue;
+          }
+          // depth would go negative - this is a boundary (e.g., closing brace of if block)
+          break;
+        }
+
+        // At depth 0, check for statement boundaries
+        if (depth === 0) {
+          // Semicolon ends the expression
+          if (ch === ';') {
+            break;
+          }
+          // Check for whitespace followed by keyword/identifier that starts a new statement
+          if (/\s/.test(ch)) {
+            const rest = code.slice(i);
+            const keywordBoundary = new RegExp(`^\\s+(?:(?:${stateVarPattern})\\s*=(?!=)|(?:${keywordsPattern}|await|return)\\b|(?:${funcPattern})\\s*\\()`);
+            if (keywordBoundary.test(rest)) {
+              break;
+            }
+          }
+        }
+
+        endIdx = i + 1;
+      }
+
+      const value = code.slice(exprStart, endIdx).trim();
+      if (value) {
+        replacements.push({
+          start: match.index,
+          end: endIdx,
+          replacement: `${stateVar}.set(${value});`
+        });
+      }
+    }
+
+    // Apply replacements in reverse order
+    for (let i = replacements.length - 1; i >= 0; i--) {
+      const r = replacements[i];
+      code = code.slice(0, r.start) + r.replacement + code.slice(r.end);
+    }
   }
 
   // Clean up any double semicolons
   code = code.replace(/;+/g, ';');
   code = code.replace(/; ;/g, ';');
 
-  // Replace state var reads
+  // Handle post-increment/decrement on state vars: stateVar++ -> ((v) => (stateVar.set(v + 1), v))(stateVar.get())
+  for (const stateVar of stateVars) {
+    // Post-increment: stateVar++ (returns old value)
+    code = code.replace(
+      new RegExp(`\\b${stateVar}\\s*\\+\\+`, 'g'),
+      `((v) => (${stateVar}.set(v + 1), v))(${stateVar}.get())`
+    );
+    // Post-decrement: stateVar-- (returns old value)
+    code = code.replace(
+      new RegExp(`\\b${stateVar}\\s*--`, 'g'),
+      `((v) => (${stateVar}.set(v - 1), v))(${stateVar}.get())`
+    );
+    // Pre-increment: ++stateVar (returns new value)
+    code = code.replace(
+      new RegExp(`\\+\\+\\s*${stateVar}\\b`, 'g'),
+      `(${stateVar}.set(${stateVar}.get() + 1), ${stateVar}.get())`
+    );
+    // Pre-decrement: --stateVar (returns new value)
+    code = code.replace(
+      new RegExp(`--\\s*${stateVar}\\b`, 'g'),
+      `(${stateVar}.set(${stateVar}.get() - 1), ${stateVar}.get())`
+    );
+  }
+
+  // Replace state var reads (not in assignments, not already with .get/.set)
+  // Allow spread operators (...stateVar) but block member access (obj.stateVar)
   for (const stateVar of stateVars) {
     code = code.replace(
-      new RegExp(`(?<!\\.\\s*)\\b${stateVar}\\b(?!\\s*=(?!=)|\\s*\\(|\\s*\\.(?:get|set))`, 'g'),
+      new RegExp(`(?:(?<=\\.\\.\\.)|(?<!\\.))\\b${stateVar}\\b(?!\\s*=(?!=)|\\s*\\(|\\s*\\.(?:get|set))`, 'g'),
       `${stateVar}.get()`
     );
   }
 
+  // Restore protected strings
+  code = restoreStrings(code);
+
   return code.trim();
 }

package/compiler/transformer/imports.js

@@ -39,6 +39,7 @@ export function generateImports(transformer) {
     'el',
     'text',
     'on',
+    'bind',
     'list',
     'when',
     'mount',
@@ -47,6 +48,21 @@ export function generateImports(transformer) {
 
   lines.push(`import { ${runtimeImports.join(', ')} } from '${options.runtime}';`);
 
+  // A11y imports (if a11y features are used)
+  const a11yImports = [];
+  if (transformer.usesA11y.srOnly) {
+    a11yImports.push('srOnly');
+  }
+  if (transformer.usesA11y.trapFocus) {
+    a11yImports.push('trapFocus');
+  }
+  if (transformer.usesA11y.announce) {
+    a11yImports.push('announce');
+  }
+  if (a11yImports.length > 0) {
+    lines.push(`import { ${a11yImports.join(', ')} } from '${options.runtime}/a11y';`);
+  }
+
   // Router imports (if router block exists)
   if (ast.router) {
     lines.push(`import { createRouter } from '${options.runtime}/router';`);

package/compiler/transformer/index.js

@@ -54,6 +54,13 @@ export class Transformer {
     this.importedComponents = new Map();
     this.scopeId = this.options.scopeStyles ? generateScopeId() : null;
 
+    // Track a11y feature usage for conditional imports
+    this.usesA11y = {
+      srOnly: false,
+      trapFocus: false,
+      announce: false
+    };
+
     // Source map tracking
     this.sourceMap = null;
     this._currentLine = 0;
@@ -126,6 +133,40 @@ export class Transformer {
     return this._trackCode(code);
   }
 
+  /**
+   * Pre-scan AST for a11y directive usage
+   */
+  _scanA11yUsage(node) {
+    if (!node) return;
+
+    // Check directives for a11y usage
+    if (node.directives) {
+      for (const directive of node.directives) {
+        if (directive.type === 'A11yDirective') {
+          if (directive.attrs && directive.attrs.srOnly) {
+            this.usesA11y.srOnly = true;
+          }
+        } else if (directive.type === 'FocusTrapDirective') {
+          this.usesA11y.trapFocus = true;
+        }
+      }
+    }
+
+    // Recursively scan children
+    if (node.children) {
+      for (const child of node.children) {
+        this._scanA11yUsage(child);
+      }
+    }
+
+    // Scan view block children
+    if (node.type === 'ViewBlock' && node.children) {
+      for (const child of node.children) {
+        this._scanA11yUsage(child);
+      }
+    }
+  }
+
   /**
    * Transform AST to JavaScript code
    */
@@ -137,6 +178,11 @@ export class Transformer {
       extractImportedComponents(this, this.ast.imports);
     }
 
+    // Pre-scan for a11y usage to determine imports
+    if (this.ast.view) {
+      this._scanA11yUsage(this.ast.view);
+    }
+
     // Imports (runtime + user imports)
     parts.push(generateImports(this));