pulse-js-framework 1.7.10 → 1.7.12

package/README.md

@@ -1,9 +1,10 @@
 # Pulse Framework
 
 [![CI](https://github.com/vincenthirtz/pulse-js-framework/actions/workflows/ci.yml/badge.svg)](https://github.com/vincenthirtz/pulse-js-framework/actions/workflows/ci.yml)
+[![codecov](https://codecov.io/gh/vincenthirtz/pulse-js-framework/graph/badge.svg)](https://codecov.io/gh/vincenthirtz/pulse-js-framework)
 [![Netlify Status](https://api.netlify.com/api/v1/badges/2597dac2-228a-4d3e-bea8-4e7ef8ac5c53/deploy-status)](https://app.netlify.com/projects/pulse-js/deploys)
 
-A declarative DOM framework with CSS selector-based structure and reactive pulsations.
+No build. No dependencies. Just JavaScript.
 
 ## Features
 
@@ -249,6 +250,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',