pulse-js-framework 1.7.9 → 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/cli/lint.js

@@ -20,6 +20,18 @@ export const LintRules = {
   // Security rules (warnings)
   'xss-vulnerability': { severity: 'warning', fixable: false },
 
+  // Accessibility rules (warnings)
+  'a11y-img-alt': { severity: 'warning', fixable: true },  // Can add alt=""
+  'a11y-button-text': { severity: 'warning', fixable: false },
+  'a11y-link-text': { severity: 'warning', fixable: false },
+  'a11y-input-label': { severity: 'warning', fixable: false },
+  'a11y-click-key': { severity: 'warning', fixable: false },
+  'a11y-no-autofocus': { severity: 'warning', fixable: true },  // Can remove autofocus
+  'a11y-no-positive-tabindex': { severity: 'warning', fixable: true },  // Can change to 0
+  'a11y-heading-order': { severity: 'warning', fixable: false },
+  'a11y-aria-props': { severity: 'warning', fixable: false },
+  'a11y-role-props': { severity: 'warning', fixable: false },
+
   // Usage rules (warnings)
   'unused-import': { severity: 'warning', fixable: true },
   'unused-state': { severity: 'warning', fixable: false },
@@ -136,6 +148,9 @@ export class SemanticAnalyzer {
     // Phase 5: Security checks (XSS detection)
     this.checkSecurity();
 
+    // Phase 6: Accessibility checks
+    this.checkAccessibility();
+
     return this.diagnostics;
   }
 
@@ -639,17 +654,374 @@ export class SemanticAnalyzer {
     }
   }
 
+  /**
+   * Check for accessibility issues
+   */
+  checkAccessibility() {
+    if (!this.ast.view) return;
+
+    this.lastHeadingLevel = 0;
+    this.checkViewAccessibility(this.ast.view);
+  }
+
+  /**
+   * Recursively check view nodes for accessibility
+   */
+  checkViewAccessibility(node) {
+    if (!node) return;
+
+    const children = node.children || [];
+    for (const child of children) {
+      if (!child) continue;
+      this.checkNodeAccessibility(child);
+      this.checkViewAccessibility(child);
+    }
+  }
+
+  /**
+   * Check a single node for accessibility issues
+   */
+  checkNodeAccessibility(node) {
+    if (!node || node.type !== 'Element') return;
+
+    const selector = node.selector || node.tag || '';
+    const tagMatch = selector.match(/^([a-z][a-z0-9]*)/i);
+    const tagName = tagMatch ? tagMatch[1].toLowerCase() : '';
+
+    // Skip custom components (PascalCase)
+    if (/^[A-Z]/.test(tagMatch?.[1] || '')) return;
+
+    const line = node.line || 1;
+    const column = node.column || 1;
+
+    // Extract attributes from selector and directives
+    const attrs = this.extractAttributes(node);
+
+    // Rule: img-alt - Images must have alt attribute
+    if (tagName === 'img') {
+      if (!attrs.has('alt') && !attrs.has('aria-label') && !attrs.has('aria-labelledby')) {
+        const selector = node.selector || 'img';
+        this.addDiagnostic('warning', 'a11y-img-alt',
+          'Image missing alt attribute. Add alt="" for decorative images or descriptive text for informative images.',
+          line, column, {
+            type: 'replace',
+            oldText: selector,
+            newText: selector + '[alt=""]',
+            description: 'Add empty alt attribute for decorative image'
+          });
+      }
+    }
+
+    // Rule: button-text - Buttons must have accessible name
+    if (tagName === 'button') {
+      const hasText = this.hasTextContent(node);
+      const hasAriaLabel = attrs.has('aria-label') || attrs.has('aria-labelledby') || attrs.has('title');
+      if (!hasText && !hasAriaLabel) {
+        this.addDiagnostic('warning', 'a11y-button-text',
+          'Button has no accessible name. Add text content, aria-label, or aria-labelledby.',
+          line, column);
+      }
+    }
+
+    // Rule: link-text - Links must have accessible name
+    if (tagName === 'a') {
+      const hasText = this.hasTextContent(node);
+      const hasAriaLabel = attrs.has('aria-label') || attrs.has('aria-labelledby');
+      const hasImgAlt = this.hasChildWithAlt(node);
+      if (!hasText && !hasAriaLabel && !hasImgAlt) {
+        this.addDiagnostic('warning', 'a11y-link-text',
+          'Link has no accessible name. Add text content, aria-label, or an image with alt.',
+          line, column);
+      }
+    }
+
+    // Rule: input-label - Form inputs must have labels
+    if (['input', 'select', 'textarea'].includes(tagName)) {
+      const inputType = attrs.get('type') || 'text';
+      if (!['hidden', 'submit', 'button', 'reset', 'image'].includes(inputType)) {
+        const hasLabel = attrs.has('aria-label') || attrs.has('aria-labelledby') || attrs.has('id');
+        const hasPlaceholder = attrs.has('placeholder');
+        if (!hasLabel) {
+          const msg = hasPlaceholder
+            ? 'Input uses placeholder but missing label. Placeholder is not a substitute for label.'
+            : 'Form input missing label. Add aria-label, aria-labelledby, or associate with <label>.';
+          this.addDiagnostic('warning', 'a11y-input-label', msg, line, column);
+        }
+      }
+    }
+
+    // Rule: click-key - Click handlers on non-interactive elements need keyboard support
+    if (['div', 'span', 'section', 'article', 'aside', 'main', 'nav', 'header', 'footer', 'p', 'li'].includes(tagName)) {
+      const hasClick = this.hasDirective(node, 'click');
+      const hasKeyHandler = this.hasDirective(node, 'keydown') || this.hasDirective(node, 'keyup') || this.hasDirective(node, 'keypress');
+      const hasRole = attrs.has('role');
+      const hasTabindex = attrs.has('tabindex');
+
+      if (hasClick && !hasKeyHandler && !hasRole) {
+        this.addDiagnostic('warning', 'a11y-click-key',
+          `Click handler on <${tagName}> requires keyboard support. Add role="button", tabindex="0", and onKeyDown handler, or use <button>.`,
+          line, column);
+      }
+    }
+
+    // Rule: no-autofocus - Avoid autofocus as it can disorient screen readers
+    if (attrs.has('autofocus')) {
+      const selector = node.selector || '';
+      // Create fix to remove [autofocus] from selector
+      const fixedSelector = selector.replace(/\[autofocus\]/gi, '');
+      this.addDiagnostic('warning', 'a11y-no-autofocus',
+        'Avoid autofocus - it can disorient screen reader users and cause accessibility issues.',
+        line, column, {
+          type: 'replace',
+          oldText: selector,
+          newText: fixedSelector,
+          description: 'Remove autofocus attribute'
+        });
+    }
+
+    // Rule: no-positive-tabindex - Avoid positive tabindex
+    const tabindex = attrs.get('tabindex');
+    if (tabindex && parseInt(tabindex, 10) > 0) {
+      const selector = node.selector || '';
+      // Create fix to change tabindex to 0
+      const fixedSelector = selector.replace(/\[tabindex=["']?\d+["']?\]/gi, '[tabindex="0"]');
+      this.addDiagnostic('warning', 'a11y-no-positive-tabindex',
+        'Avoid positive tabindex values. Use tabindex="0" or "-1" and rely on DOM order.',
+        line, column, {
+          type: 'replace',
+          oldText: selector,
+          newText: fixedSelector,
+          description: 'Change tabindex to 0'
+        });
+    }
+
+    // Rule: heading-order - Headings should follow hierarchy
+    const headingMatch = tagName.match(/^h([1-6])$/);
+    if (headingMatch) {
+      const level = parseInt(headingMatch[1], 10);
+      if (this.lastHeadingLevel > 0 && level > this.lastHeadingLevel + 1) {
+        this.addDiagnostic('warning', 'a11y-heading-order',
+          `Heading level skipped: <h${this.lastHeadingLevel}> to <h${level}>. Use sequential heading levels.`,
+          line, column);
+      }
+      this.lastHeadingLevel = level;
+    }
+
+    // Rule: aria-props - Check ARIA attribute validity
+    this.checkAriaProps(node, attrs, line, column);
+
+    // Rule: role-props - Check role requirements
+    this.checkRoleProps(node, attrs, tagName, line, column);
+  }
+
+  /**
+   * Extract attributes from node selector and directives
+   */
+  extractAttributes(node) {
+    const attrs = new Map();
+    const selector = node.selector || '';
+
+    // Parse attributes from selector [attr=value] or [attr]
+    const attrRegex = /\[([a-z][a-z0-9-]*)(?:=["']?([^"'\]]+)["']?)?\]/gi;
+    let match;
+    while ((match = attrRegex.exec(selector)) !== null) {
+      attrs.set(match[1].toLowerCase(), match[2] || true);
+    }
+
+    // Check directives for attributes
+    for (const directive of node.directives || []) {
+      if (directive.name === 'attr' || directive.name === 'bind') {
+        const attrName = directive.arg || directive.attribute;
+        if (attrName) {
+          attrs.set(attrName.toLowerCase(), directive.value || true);
+        }
+      }
+    }
+
+    // Check props for component-like attribute passing
+    if (node.props) {
+      for (const prop of Object.keys(node.props)) {
+        attrs.set(prop.toLowerCase(), node.props[prop]);
+      }
+    }
+
+    return attrs;
+  }
+
+  /**
+   * Check if node has text content
+   */
+  hasTextContent(node) {
+    if (node.textContent && node.textContent.length > 0) {
+      return node.textContent.some(t => {
+        // Direct string
+        if (typeof t === 'string' && t.trim().length > 0) return true;
+        // Interpolation
+        if (typeof t === 'object' && t.type === 'Interpolation') return true;
+        // TextNode with parts
+        if (typeof t === 'object' && t.type === 'TextNode' && t.parts) {
+          return t.parts.some(part =>
+            (typeof part === 'string' && part.trim().length > 0) ||
+            (typeof part === 'object')
+          );
+        }
+        return false;
+      });
+    }
+    // Check children for text nodes
+    if (node.children) {
+      return node.children.some(child =>
+        child && (child.type === 'TextNode' || this.hasTextContent(child))
+      );
+    }
+    return false;
+  }
+
+  /**
+   * Check if node has child with alt attribute
+   */
+  hasChildWithAlt(node) {
+    if (!node.children) return false;
+    return node.children.some(child => {
+      if (!child) return false;
+      const selector = child.selector || child.tag || '';
+      if (/^img/i.test(selector) && /\[alt/.test(selector)) {
+        return true;
+      }
+      return this.hasChildWithAlt(child);
+    });
+  }
+
+  /**
+   * Check if node has a specific directive
+   */
+  hasDirective(node, name) {
+    if (!node.directives) return false;
+    return node.directives.some(d =>
+      d.name === name ||
+      d.event === name ||
+      (d.type === 'EventDirective' && d.event === name)
+    );
+  }
+
+  /**
+   * Check ARIA attribute validity
+   */
+  checkAriaProps(node, attrs, line, column) {
+    const validAriaAttrs = new Set([
+      'aria-activedescendant', 'aria-atomic', 'aria-autocomplete', 'aria-braillelabel',
+      'aria-brailleroledescription', 'aria-busy', 'aria-checked', 'aria-colcount',
+      'aria-colindex', 'aria-colindextext', 'aria-colspan', 'aria-controls',
+      'aria-current', 'aria-describedby', 'aria-description', 'aria-details',
+      'aria-disabled', 'aria-dropeffect', 'aria-errormessage', 'aria-expanded',
+      'aria-flowto', 'aria-grabbed', 'aria-haspopup', 'aria-hidden', 'aria-invalid',
+      'aria-keyshortcuts', 'aria-label', 'aria-labelledby', 'aria-level', 'aria-live',
+      'aria-modal', 'aria-multiline', 'aria-multiselectable', 'aria-orientation',
+      'aria-owns', 'aria-placeholder', 'aria-posinset', 'aria-pressed', 'aria-readonly',
+      'aria-relevant', 'aria-required', 'aria-roledescription', 'aria-rowcount',
+      'aria-rowindex', 'aria-rowindextext', 'aria-rowspan', 'aria-selected',
+      'aria-setsize', 'aria-sort', 'aria-valuemax', 'aria-valuemin', 'aria-valuenow',
+      'aria-valuetext'
+    ]);
+
+    for (const [attr] of attrs) {
+      if (attr.startsWith('aria-') && !validAriaAttrs.has(attr)) {
+        this.addDiagnostic('warning', 'a11y-aria-props',
+          `Invalid ARIA attribute: ${attr}`,
+          line, column);
+      }
+    }
+  }
+
+  /**
+   * Check role-specific required attributes
+   */
+  checkRoleProps(node, attrs, tagName, line, column) {
+    const role = attrs.get('role');
+    if (!role) return;
+
+    const roleRequirements = {
+      'checkbox': ['aria-checked'],
+      'combobox': ['aria-expanded'],
+      'heading': ['aria-level'],
+      'meter': ['aria-valuenow'],
+      'option': [],
+      'progressbar': [],
+      'radio': ['aria-checked'],
+      'scrollbar': ['aria-controls', 'aria-valuenow'],
+      'separator': [],
+      'slider': ['aria-valuenow'],
+      'spinbutton': [],
+      'switch': ['aria-checked'],
+      'tab': [],
+      'tabpanel': [],
+      'treeitem': []
+    };
+
+    const required = roleRequirements[role];
+    if (required && required.length > 0) {
+      for (const reqAttr of required) {
+        if (!attrs.has(reqAttr)) {
+          this.addDiagnostic('warning', 'a11y-role-props',
+            `Role "${role}" requires ${reqAttr} attribute`,
+            line, column);
+        }
+      }
+    }
+
+    // Check for redundant roles on semantic elements
+    const implicitRoles = {
+      'button': 'button',
+      'a': 'link',
+      'input': 'textbox',
+      'img': 'img',
+      'nav': 'navigation',
+      'main': 'main',
+      'header': 'banner',
+      'footer': 'contentinfo',
+      'aside': 'complementary',
+      'form': 'form',
+      'table': 'table',
+      'ul': 'list',
+      'ol': 'list',
+      'li': 'listitem'
+    };
+
+    if (implicitRoles[tagName] === role) {
+      this.addDiagnostic('warning', 'a11y-role-props',
+        `Redundant role="${role}" on <${tagName}> - element has implicit role`,
+        line, column);
+    }
+  }
+
   /**
    * Add a diagnostic message
+   * @param {string} severity - 'error' | 'warning' | 'info'
+   * @param {string} code - Rule code
+   * @param {string} message - Diagnostic message
+   * @param {number} line - Line number
+   * @param {number} column - Column number
+   * @param {Object} [fix] - Optional fix information
+   * @param {string} [fix.type] - Fix type: 'replace' | 'insert' | 'delete'
+   * @param {string} [fix.oldText] - Text to replace (for 'replace')
+   * @param {string} [fix.newText] - Replacement text
+   * @param {number} [fix.start] - Start position in source
+   * @param {number} [fix.end] - End position in source
    */
-  addDiagnostic(severity, code, message, line, column) {
-    this.diagnostics.push({
+  addDiagnostic(severity, code, message, line, column, fix = null) {
+    const diag = {
       severity,
       code,
       message,
       line: line || 1,
       column: column || 1
-    });
+    };
+
+    if (fix && LintRules[code]?.fixable) {
+      diag.fix = fix;
+    }
+
+    this.diagnostics.push(diag);
   }
 }
 
@@ -702,6 +1074,47 @@ export async function lintFile(filePath, options = {}) {
   };
 }
 
+/**
+ * Apply fixes to a source file
+ * @param {string} source - Original source code
+ * @param {Array} diagnostics - Diagnostics with fixes
+ * @returns {{fixed: string, count: number}} Fixed source and fix count
+ */
+export function applyFixes(source, diagnostics) {
+  // Get fixable diagnostics, sorted by line in reverse order to avoid offset issues
+  const fixable = diagnostics
+    .filter(d => d.fix && d.fix.oldText && d.fix.newText)
+    .sort((a, b) => b.line - a.line);
+
+  if (fixable.length === 0) {
+    return { fixed: source, count: 0 };
+  }
+
+  let fixed = source;
+  let count = 0;
+
+  for (const diag of fixable) {
+    const { fix } = diag;
+
+    // Find and replace the old text with new text
+    // We do line-by-line replacement to be more precise
+    const lines = fixed.split('\n');
+    const lineIndex = diag.line - 1;
+
+    if (lineIndex >= 0 && lineIndex < lines.length) {
+      const line = lines[lineIndex];
+      if (line.includes(fix.oldText)) {
+        lines[lineIndex] = line.replace(fix.oldText, fix.newText);
+        count++;
+      }
+    }
+
+    fixed = lines.join('\n');
+  }
+
+  return { fixed, count };
+}
+
 /**
  * Lint files and return summary
  * @param {string[]} files - Files to lint
@@ -718,11 +1131,36 @@ async function lintFiles(files, options = {}) {
   let totalErrors = 0;
   let totalWarnings = 0;
   let totalInfo = 0;
+  let totalFixed = 0;
 
   for (const file of files) {
     const result = await lintFile(file, { fix });
     const relPath = relativePath(file);
 
+    // Apply fixes if requested
+    if (fix && result.diagnostics.some(d => d.fix)) {
+      const source = readFileSync(file, 'utf-8');
+      const { fixed, count } = applyFixes(source, result.diagnostics);
+
+      if (count > 0) {
+        if (dryRun) {
+          if (!quiet) {
+            log.info(`\n${relPath} - ${count} fix(es) available (dry run)`);
+          }
+        } else {
+          writeFileSync(file, fixed, 'utf-8');
+          if (!quiet) {
+            log.success(`\n${relPath} - ${count} fix(es) applied`);
+          }
+        }
+        totalFixed += count;
+
+        // Re-lint to show remaining issues
+        const recheck = await lintFile(file, {});
+        result.diagnostics = recheck.diagnostics;
+      }
+    }
+
     if (result.diagnostics.length > 0 && !quiet) {
       log.info(`\n${relPath}`);
 
@@ -742,6 +1180,7 @@ async function lintFiles(files, options = {}) {
     errors: totalErrors,
     warnings: totalWarnings,
     info: totalInfo,
+    fixed: totalFixed,
     elapsed: timer.elapsed()
   };
 }

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;
       }
 
@@ -697,6 +719,12 @@ export class Lexer {
     let inView = false;
     let parenDepth = 0;
 
+    // After @ token, next word is directive name (not selector)
+    const lastToken = this.tokens[this.tokens.length - 1];
+    if (lastToken && lastToken.type === TokenType.AT) {
+      return false;
+    }
+
     for (let i = this.tokens.length - 1; i >= 0; i--) {
       const token = this.tokens[i];