pulse-js-framework 1.7.10 → 1.7.11

package/README.md

@@ -249,6 +249,7 @@ const count: Pulse<number> = pulse(0);
 | [HMR Demo](examples/hmr) | Hot module replacement |
 | [Router Demo](examples/router) | SPA routing |
 | [Store Demo](examples/store) | State with undo/redo |
+| [Electron App](examples/electron) | Desktop notes app |
 
 ## Documentation
 

package/compiler/lexer.js

@@ -33,6 +33,7 @@ export const TokenType = {
 
   // Directives
   AT: 'AT',           // @
+  DIRECTIVE_MOD: 'DIRECTIVE_MOD', // .modifier after @directive (e.g., @click.prevent)
   PAGE: 'PAGE',
   ROUTE: 'ROUTE',
   IF: 'IF',
@@ -499,10 +500,31 @@ export class Lexer {
         continue;
       }
 
-      // At-sign for directives
+      // At-sign for directives with optional modifiers
       if (char === '@') {
         this.advance();
         this.tokens.push(new Token(TokenType.AT, '@', startLine, startColumn));
+
+        // After @, read directive name (if identifier follows)
+        if (/[a-zA-Z]/.test(this.current())) {
+          // Read the directive name
+          const nameToken = this.readIdentifier();
+          this.tokens.push(nameToken);
+
+          // Read modifiers: .prevent, .stop, .enter, etc.
+          while (!this.isEOF() && this.current() === '.' && /[a-zA-Z]/.test(this.peek())) {
+            this.advance(); // skip '.'
+            const modStartLine = this.line;
+            const modStartColumn = this.column;
+            let modName = '';
+            while (!this.isEOF() && /[a-zA-Z0-9]/.test(this.current())) {
+              modName += this.advance();
+            }
+            if (modName) {
+              this.tokens.push(new Token(TokenType.DIRECTIVE_MOD, modName, modStartLine, modStartColumn));
+            }
+          }
+        }
         continue;
       }
 

package/compiler/parser.js

@@ -27,6 +27,7 @@ export const NodeType = {
   IfDirective: 'IfDirective',
   EachDirective: 'EachDirective',
   EventDirective: 'EventDirective',
+  ModelDirective: 'ModelDirective',
 
   // Accessibility directives
   A11yDirective: 'A11yDirective',
@@ -769,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();
     }
@@ -790,8 +797,13 @@ export class Parser {
       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);
   }
 
   /**
@@ -801,6 +813,12 @@ export class Parser {
     this.expect(TokenType.AT);
     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);
+    }
+
     // Check for a11y directives
     if (name === 'a11y') {
       return this.parseA11yDirective();
@@ -815,16 +833,22 @@ export class Parser {
       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);
@@ -838,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);
@@ -870,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)) {
@@ -877,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);
@@ -897,7 +985,20 @@ 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 });
   }
 
   /**

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',

package/compiler/transformer/view.js

@@ -15,6 +15,7 @@ export const VIEW_NODE_HANDLERS = {
   [NodeType.IfDirective]: 'transformIfDirective',
   [NodeType.EachDirective]: 'transformEachDirective',
   [NodeType.EventDirective]: 'transformEventDirective',
+  [NodeType.ModelDirective]: 'transformModelDirective',
   [NodeType.SlotElement]: 'transformSlot',
   [NodeType.LinkDirective]: 'transformLinkDirective',
   [NodeType.OutletDirective]: 'transformOutletDirective',
@@ -89,6 +90,8 @@ export function transformViewNode(transformer, node, indent = 0) {
         return transformEachDirective(transformer, node, indent);
       case NodeType.EventDirective:
         return transformEventDirective(transformer, node, indent);
+      case NodeType.ModelDirective:
+        return transformModelDirective(transformer, node, indent);
       case NodeType.SlotElement:
         return transformSlot(transformer, node, indent);
       case NodeType.LinkDirective:
@@ -295,6 +298,36 @@ export function transformFocusTrapDirective(transformer, node, indent) {
   return `{ ${optionsCode} }`;
 }
 
+/**
+ * Extract dynamic attributes from a selector
+ * Returns { cleanSelector, dynamicAttrs } where dynamicAttrs is an array of { name, expr }
+ * @param {string} selector - CSS selector with potential dynamic attributes
+ * @returns {Object} { cleanSelector, dynamicAttrs }
+ */
+function extractDynamicAttributes(selector) {
+  const dynamicAttrs = [];
+  // Match attributes with {expression} values: [name={expr}] or [name="{expr}"]
+  const attrPattern = /\[([a-zA-Z][a-zA-Z0-9-]*)\s*=\s*\{([^}]+)\}\]/g;
+  const attrPatternQuoted = /\[([a-zA-Z][a-zA-Z0-9-]*)\s*=\s*"\{([^}]+)\}"\]/g;
+
+  let cleanSelector = selector;
+
+  // Extract unquoted dynamic attributes: [value={expr}]
+  let match;
+  while ((match = attrPattern.exec(selector)) !== null) {
+    dynamicAttrs.push({ name: match[1], expr: match[2] });
+  }
+  cleanSelector = cleanSelector.replace(attrPattern, '');
+
+  // Extract quoted dynamic attributes: [value="{expr}"]
+  while ((match = attrPatternQuoted.exec(selector)) !== null) {
+    dynamicAttrs.push({ name: match[1], expr: match[2] });
+  }
+  cleanSelector = cleanSelector.replace(attrPatternQuoted, '');
+
+  return { cleanSelector, dynamicAttrs };
+}
+
 /**
  * Transform element
  * @param {Object} transformer - Transformer instance
@@ -317,14 +350,18 @@ export function transformElement(transformer, node, indent) {
     return transformComponentCall(transformer, node, indent);
   }
 
+  // Extract dynamic attributes from selector (e.g., [value={searchQuery}])
+  let { cleanSelector, dynamicAttrs } = extractDynamicAttributes(node.selector);
+
   // Add scoped class to selector if CSS scoping is enabled
-  let selector = node.selector;
+  let selector = cleanSelector;
   if (transformer.scopeId && selector) {
     selector = addScopeToSelector(transformer, selector);
   }
 
   // Extract directives by type
   const eventHandlers = node.directives.filter(d => d.type === NodeType.EventDirective);
+  const modelDirectives = node.directives.filter(d => d.type === NodeType.ModelDirective);
   const a11yDirectives = node.directives.filter(d => d.type === NodeType.A11yDirective);
   const liveDirectives = node.directives.filter(d => d.type === NodeType.LiveDirective);
   const focusTrapDirectives = node.directives.filter(d => d.type === NodeType.FocusTrapDirective);
@@ -392,8 +429,9 @@ export function transformElement(transformer, node, indent) {
     enhancedSelector = selector + staticAttrs.join('');
   }
 
-  // Start with el() call
-  parts.push(`${pad}el('${enhancedSelector}'`);
+  // Start with el() call - escape single quotes in selector
+  const escapedSelector = enhancedSelector.replace(/'/g, "\\'");
+  parts.push(`${pad}el('${escapedSelector}'`);
 
   // Add text content
   if (node.textContent.length > 0) {
@@ -413,11 +451,37 @@ export function transformElement(transformer, node, indent) {
 
   parts.push(')');
 
-  // Chain event handlers
+  // Chain event handlers with modifiers support
   let result = parts.join('');
   for (const handler of eventHandlers) {
     const handlerCode = transformExpression(transformer, handler.handler);
-    result = `on(${result}, '${handler.event}', () => { ${handlerCode}; })`;
+    const modifiers = handler.modifiers || [];
+
+    if (modifiers.length === 0) {
+      // Always pass event parameter since handlers commonly use event.target, etc.
+      result = `on(${result}, '${handler.event}', (event) => { ${handlerCode}; })`;
+    } else {
+      const modifiedHandler = generateModifiedHandler(handler.event, handlerCode, modifiers);
+      result = `on(${result}, '${handler.event}', ${modifiedHandler})`;
+    }
+  }
+
+  // Chain model directives for two-way binding
+  for (const directive of modelDirectives) {
+    const binding = transformExpression(transformer, directive.binding);
+    const modifiers = directive.modifiers || [];
+
+    // Build options from modifiers
+    const options = [];
+    if (modifiers.includes('lazy')) options.push('lazy: true');
+    if (modifiers.includes('trim')) options.push('trim: true');
+    if (modifiers.includes('number')) options.push('number: true');
+
+    if (options.length > 0) {
+      result = `model(${result}, ${binding}, { ${options.join(', ')} })`;
+    } else {
+      result = `model(${result}, ${binding})`;
+    }
   }
 
   // Chain focus trap if present
@@ -426,6 +490,12 @@ export function transformElement(transformer, node, indent) {
     result = `trapFocus(${result}, ${optionsCode})`;
   }
 
+  // Chain dynamic attribute bindings (e.g., [value={searchQuery}])
+  for (const attr of dynamicAttrs) {
+    const exprCode = transformExpressionString(transformer, attr.expr);
+    result = `bind(${result}, '${attr.name}', () => ${exprCode})`;
+  }
+
   return result;
 }
 
@@ -538,25 +608,59 @@ export function transformTextNode(transformer, node, indent) {
  */
 export function transformIfDirective(transformer, node, indent) {
   const pad = ' '.repeat(indent);
-  const condition = transformExpression(transformer, node.condition);
-
-  const consequent = node.consequent.map(c =>
-    transformViewNode(transformer, c, indent + 2)
-  ).join(',\n');
 
-  let code = `${pad}when(\n`;
-  code += `${pad}  () => ${condition},\n`;
-  code += `${pad}  () => (\n${consequent}\n${pad}  )`;
+  // Helper to build nested when() calls for else-if chains
+  function buildConditionChain(condition, consequent, elseIfBranches, alternate, depth = 0) {
+    const innerPad = ' '.repeat(indent + depth * 2);
+    const conditionCode = transformExpression(transformer, condition);
+
+    // Wrap multiple children in array, single child returns directly
+    const consequentItems = consequent.map(c =>
+      transformViewNode(transformer, c, indent + depth * 2 + 4)
+    );
+    const consequentCode = consequentItems.length === 1
+      ? consequentItems[0]
+      : `[\n${consequentItems.join(',\n')}\n${innerPad}    ]`;
+
+    let code = `${innerPad}when(\n`;
+    code += `${innerPad}  () => ${conditionCode},\n`;
+    code += `${innerPad}  () => ${consequentCode}`;
+
+    // Handle else-if branches
+    if (elseIfBranches && elseIfBranches.length > 0) {
+      const nextBranch = elseIfBranches[0];
+      const remainingBranches = elseIfBranches.slice(1);
+
+      code += `,\n${innerPad}  () => (\n`;
+      code += buildConditionChain(
+        nextBranch.condition,
+        nextBranch.consequent,
+        remainingBranches,
+        alternate,
+        depth + 2
+      );
+      code += `\n${innerPad}  )`;
+    } else if (alternate) {
+      // Final else branch - wrap multiple children in array
+      const alternateItems = alternate.map(c =>
+        transformViewNode(transformer, c, indent + depth * 2 + 4)
+      );
+      const alternateCode = alternateItems.length === 1
+        ? alternateItems[0]
+        : `[\n${alternateItems.join(',\n')}\n${innerPad}    ]`;
+      code += `,\n${innerPad}  () => ${alternateCode}`;
+    }
 
-  if (node.alternate) {
-    const alternate = node.alternate.map(c =>
-      transformViewNode(transformer, c, indent + 2)
-    ).join(',\n');
-    code += `,\n${pad}  () => (\n${alternate}\n${pad}  )`;
+    code += `\n${innerPad})`;
+    return code;
   }
 
-  code += `\n${pad})`;
-  return code;
+  return buildConditionChain(
+    node.condition,
+    node.consequent,
+    node.elseIfBranches || [],
+    node.alternate
+  );
 }
 
 /**
@@ -574,10 +678,19 @@ export function transformEachDirective(transformer, node, indent) {
     transformViewNode(transformer, t, indent + 2)
   ).join(',\n');
 
-  return `${pad}list(\n` +
-         `${pad}  () => ${iterable},\n` +
-         `${pad}  (${node.itemName}, _index) => (\n${template}\n${pad}  )\n` +
-         `${pad})`;
+  // Build list() call with optional key function
+  let code = `${pad}list(\n` +
+             `${pad}  () => ${iterable},\n` +
+             `${pad}  (${node.itemName}, _index) => (\n${template}\n${pad}  )`;
+
+  // Add key function if provided
+  if (node.keyExpr) {
+    const keyExprCode = transformExpression(transformer, node.keyExpr);
+    code += `,\n${pad}  (${node.itemName}) => ${keyExprCode}`;
+  }
+
+  code += `\n${pad})`;
+  return code;
 }
 
 /**
@@ -601,3 +714,85 @@ export function transformEventDirective(transformer, node, indent) {
 
   return `/* event: ${node.event} -> ${handler} */`;
 }
+
+/**
+ * Transform @model directive for two-way binding
+ * @param {Object} transformer - Transformer instance
+ * @param {Object} node - Model directive node
+ * @param {number} indent - Indentation level
+ * @returns {string} JavaScript code
+ */
+export function transformModelDirective(transformer, node, indent) {
+  const pad = ' '.repeat(indent);
+  const binding = transformExpression(transformer, node.binding);
+  const modifiers = node.modifiers || [];
+
+  // Build options from modifiers
+  const options = [];
+  if (modifiers.includes('lazy')) options.push('lazy: true');
+  if (modifiers.includes('trim')) options.push('trim: true');
+  if (modifiers.includes('number')) options.push('number: true');
+
+  if (options.length > 0) {
+    return `${pad}/* model: ${binding} { ${options.join(', ')} } */`;
+  }
+
+  return `${pad}/* model: ${binding} */`;
+}
+
+/**
+ * Generate event handler code with modifiers applied
+ * @param {string} event - Event name
+ * @param {string} handlerCode - Handler expression code
+ * @param {string[]} modifiers - Array of modifier names
+ * @returns {string} JavaScript handler code
+ */
+function generateModifiedHandler(event, handlerCode, modifiers) {
+  // Key modifiers map
+  const keyMap = {
+    enter: 'Enter', tab: 'Tab', delete: 'Delete', esc: 'Escape', escape: 'Escape',
+    space: ' ', up: 'ArrowUp', down: 'ArrowDown', left: 'ArrowLeft', right: 'ArrowRight'
+  };
+
+  // System key modifiers
+  const systemModifiers = ['ctrl', 'alt', 'shift', 'meta'];
+
+  // Build handler code with checks
+  const checks = [];
+  let hasEventParam = false;
+
+  for (const mod of modifiers) {
+    if (mod === 'prevent') {
+      checks.push('event.preventDefault();');
+      hasEventParam = true;
+    } else if (mod === 'stop') {
+      checks.push('event.stopPropagation();');
+      hasEventParam = true;
+    } else if (mod === 'self') {
+      checks.push('if (event.target !== event.currentTarget) return;');
+      hasEventParam = true;
+    } else if (keyMap[mod]) {
+      checks.push(`if (event.key !== '${keyMap[mod]}') return;`);
+      hasEventParam = true;
+    } else if (systemModifiers.includes(mod)) {
+      checks.push(`if (!event.${mod}Key) return;`);
+      hasEventParam = true;
+    }
+  }
+
+  // Build options for addEventListener
+  const options = [];
+  if (modifiers.includes('capture')) options.push('capture: true');
+  if (modifiers.includes('once')) options.push('once: true');
+  if (modifiers.includes('passive')) options.push('passive: true');
+
+  const checksCode = checks.join(' ');
+  // Always pass event parameter since handler code commonly uses event.target, etc.
+  const handler = `(event) => { ${checksCode} ${handlerCode}; }`;
+
+  if (options.length > 0) {
+    return `${handler}, { ${options.join(', ')} }`;
+  }
+
+  return handler;
+}

package/loader/vite-plugin.js

@@ -5,6 +5,8 @@
  */
 
 import { compile } from '../compiler/index.js';
+import { existsSync } from 'fs';
+import { resolve, dirname } from 'path';
 
 /**
  * Create Pulse Vite plugin
@@ -18,14 +20,35 @@ export default function pulsePlugin(options = {}) {
 
   return {
     name: 'vite-plugin-pulse',
+    enforce: 'pre',
 
     /**
-     * Resolve .pulse files
+     * Resolve .pulse files and .js imports that map to .pulse files
+     * The compiler transforms .pulse imports to .js, so we need to
+     * resolve them back to .pulse for Vite to process them
      */
-    resolveId(id) {
-      if (id.endsWith('.pulse')) {
-        return id;
+    resolveId(id, importer) {
+      // Direct .pulse imports - resolve to absolute path
+      if (id.endsWith('.pulse') && importer) {
+        const importerDir = dirname(importer);
+        const absolutePath = resolve(importerDir, id);
+        if (existsSync(absolutePath)) {
+          return absolutePath;
+        }
+      }
+
+      // Check if a .js import has a corresponding .pulse file
+      // This handles the compiler's transformation of .pulse -> .js imports
+      if (id.endsWith('.js') && importer) {
+        const pulseId = id.replace(/\.js$/, '.pulse');
+        const importerDir = dirname(importer);
+        const absolutePulsePath = resolve(importerDir, pulseId);
+
+        if (existsSync(absolutePulsePath)) {
+          return absolutePulsePath;
+        }
       }
+
       return null;
     },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-js-framework",
-  "version": "1.7.10",
+  "version": "1.7.11",
   "description": "A declarative DOM framework with CSS selector-based structure and reactive pulsations",
   "type": "module",
   "main": "index.js",

package/runtime/dom-binding.js

@@ -29,6 +29,19 @@ const BIND_URL_ATTRIBUTES = new Set([
 // REACTIVE BINDINGS
 // =============================================================================
 
+/**
+ * Attributes that should be set as properties (not attributes) on form elements
+ * because the attribute doesn't reflect the current value after user input
+ * @private
+ */
+const BIND_PROPERTY_ATTRIBUTES = new Set(['value', 'checked', 'selected']);
+
+/**
+ * Tags where certain attributes should be set as properties
+ * @private
+ */
+const FORM_ELEMENT_TAGS = new Set(['input', 'textarea', 'select', 'option']);
+
 /**
  * Bind an attribute reactively with XSS protection
  *
@@ -44,9 +57,22 @@ export function bind(element, attr, getValue) {
   const lowerAttr = attr.toLowerCase();
   const isUrlAttr = BIND_URL_ATTRIBUTES.has(lowerAttr);
 
+  // For form elements, certain attributes need to be set as properties
+  const tagName = dom.getTagName(element);
+  const useProperty = BIND_PROPERTY_ATTRIBUTES.has(lowerAttr) && FORM_ELEMENT_TAGS.has(tagName);
+
   if (typeof getValue === 'function') {
     effect(() => {
       const value = getValue();
+
+      // For form element properties (value, checked, selected), use setProperty
+      if (useProperty) {
+        if (dom.getProperty(element, attr) !== value) {
+          dom.setProperty(element, attr, value ?? '');
+        }
+        return;
+      }
+
       if (value == null || value === false) {
         dom.removeAttribute(element, attr);
       } else if (value === true) {
@@ -69,6 +95,12 @@ export function bind(element, attr, getValue) {
       }
     });
   } else {
+    // For form element properties, use setProperty
+    if (useProperty) {
+      dom.setProperty(element, attr, getValue ?? '');
+      return element;
+    }
+
     // Sanitize URL attributes for static values too
     if (isUrlAttr) {
       const sanitized = sanitizeUrl(String(getValue));