pulse-js-framework 1.7.9 → 1.7.11

package/compiler/transformer/view.js

@@ -15,10 +15,15 @@ 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',
-  [NodeType.NavigateDirective]: 'transformNavigateDirective'
+  [NodeType.NavigateDirective]: 'transformNavigateDirective',
+  // Accessibility directives
+  [NodeType.A11yDirective]: 'transformA11yDirective',
+  [NodeType.LiveDirective]: 'transformLiveDirective',
+  [NodeType.FocusTrapDirective]: 'transformFocusTrapDirective'
 };
 
 /**
@@ -85,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:
@@ -93,6 +100,12 @@ export function transformViewNode(transformer, node, indent = 0) {
         return transformOutletDirective(transformer, node, indent);
       case NodeType.NavigateDirective:
         return transformNavigateDirective(transformer, node, indent);
+      case NodeType.A11yDirective:
+        return transformA11yDirective(transformer, node, indent);
+      case NodeType.LiveDirective:
+        return transformLiveDirective(transformer, node, indent);
+      case NodeType.FocusTrapDirective:
+        return transformFocusTrapDirective(transformer, node, indent);
       default:
         return `${' '.repeat(indent)}/* unknown node: ${node.type} */`;
     }
@@ -192,6 +205,129 @@ export function transformNavigateDirective(transformer, node, indent) {
   return `${pad}router.navigate(${path}${options})`;
 }
 
+/**
+ * Transform @a11y directive - sets ARIA attributes
+ * @param {Object} transformer - Transformer instance
+ * @param {Object} node - A11y directive node
+ * @param {number} indent - Indentation level
+ * @returns {string} JavaScript code
+ */
+export function transformA11yDirective(transformer, node, indent) {
+  const pad = ' '.repeat(indent);
+  const attrs = node.attrs || {};
+
+  // Handle @srOnly - create visually hidden element
+  if (attrs.srOnly) {
+    return `${pad}srOnly(/* content */)`;
+  }
+
+  // Build ARIA attributes object
+  const ariaAttrs = Object.entries(attrs).map(([key, value]) => {
+    // Map short names to aria- attributes (role is not prefixed)
+    const ariaKey = key === 'role' ? key : (key.startsWith('aria-') ? key : `aria-${key}`);
+    const valueCode = typeof value === 'string' ? `'${value}'` : transformExpression(transformer, value);
+    return `'${ariaKey}': ${valueCode}`;
+  }).join(', ');
+
+  return `{ ${ariaAttrs} }`;
+}
+
+/**
+ * Build ARIA attributes object from a11y directive
+ * @param {Object} transformer - Transformer instance
+ * @param {Object} directive - A11y directive node
+ * @returns {Object} Object with key-value pairs for ARIA attributes
+ */
+export function buildA11yAttributes(transformer, directive) {
+  const attrs = directive.attrs || {};
+  const result = {};
+
+  for (const [key, value] of Object.entries(attrs)) {
+    if (key === 'srOnly') continue;
+    // Map short names to aria- attributes (role is not prefixed)
+    const ariaKey = key === 'role' ? key : (key.startsWith('aria-') ? key : `aria-${key}`);
+
+    // Handle different value types
+    if (typeof value === 'string') {
+      result[ariaKey] = value;
+    } else if (typeof value === 'boolean') {
+      result[ariaKey] = String(value);  // Convert true/false to "true"/"false"
+    } else if (typeof value === 'number') {
+      result[ariaKey] = String(value);
+    } else {
+      result[ariaKey] = transformExpression(transformer, value);
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Transform @live directive - creates live region
+ * @param {Object} transformer - Transformer instance
+ * @param {Object} node - Live directive node
+ * @param {number} indent - Indentation level
+ * @returns {string} JavaScript code
+ */
+export function transformLiveDirective(transformer, node, indent) {
+  const priority = node.priority || 'polite';
+  return `'${priority}'`;
+}
+
+/**
+ * Transform @focusTrap directive
+ * @param {Object} transformer - Transformer instance
+ * @param {Object} node - Focus trap directive node
+ * @param {number} indent - Indentation level
+ * @returns {string} JavaScript code
+ */
+export function transformFocusTrapDirective(transformer, node, indent) {
+  const options = node.options || {};
+
+  if (Object.keys(options).length === 0) {
+    return '{}';
+  }
+
+  const optionsCode = Object.entries(options).map(([key, value]) => {
+    const valueCode = typeof value === 'boolean' ? String(value) :
+                      typeof value === 'string' ? `'${value}'` :
+                      transformExpression(transformer, value);
+    return `${key}: ${valueCode}`;
+  }).join(', ');
+
+  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
@@ -214,17 +350,88 @@ 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);
   }
 
-  // Start with el() call
-  parts.push(`${pad}el('${selector}'`);
-
-  // Add event handlers as on() chain
+  // 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);
+
+  // Check for @srOnly directive
+  const srOnlyDirective = a11yDirectives.find(d => d.attrs && d.attrs.srOnly);
+
+  // If @srOnly, wrap entire content
+  if (srOnlyDirective) {
+    transformer.usesA11y.srOnly = true;
+    const content = [];
+    for (const text of node.textContent) {
+      content.push(transformTextNode(transformer, text, 0).trim());
+    }
+    for (const child of node.children) {
+      content.push(transformViewNode(transformer, child, 0).trim());
+    }
+    const contentCode = content.length === 1 ? content[0] : `[${content.join(', ')}]`;
+    return `${pad}srOnly(${contentCode})`;
+  }
+
+  // Track focusTrap usage
+  if (focusTrapDirectives.length > 0) {
+    transformer.usesA11y.trapFocus = true;
+  }
+
+  // Build ARIA attributes from directives
+  const ariaAttrs = [];
+
+  // Process @a11y directives
+  for (const directive of a11yDirectives) {
+    const attrs = buildA11yAttributes(transformer, directive);
+    for (const [key, value] of Object.entries(attrs)) {
+      const valueCode = typeof value === 'string' ? `'${value}'` : value;
+      ariaAttrs.push(`'${key}': ${valueCode}`);
+    }
+  }
+
+  // Process @live directives (add aria-live and aria-atomic)
+  for (const directive of liveDirectives) {
+    const priority = directive.priority || 'polite';
+    ariaAttrs.push(`'aria-live': '${priority}'`);
+    ariaAttrs.push(`'aria-atomic': 'true'`);
+  }
+
+  // Build selector with inline ARIA attributes
+  let enhancedSelector = selector;
+  if (ariaAttrs.length > 0) {
+    // Convert ARIA attrs to selector attribute syntax where possible
+    // For dynamic values, we'll need to use setAriaAttributes
+    const staticAttrs = [];
+    const dynamicAttrs = [];
+
+    for (const attr of ariaAttrs) {
+      const match = attr.match(/^'([^']+)':\s*'([^']+)'$/);
+      if (match) {
+        // Static attribute - can embed in selector
+        staticAttrs.push(`[${match[1]}=${match[2]}]`);
+      } else {
+        dynamicAttrs.push(attr);
+      }
+    }
+
+    // Add static ARIA attributes to selector
+    enhancedSelector = selector + staticAttrs.join('');
+  }
+
+  // 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) {
@@ -244,11 +451,49 @@ 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
+  for (const directive of focusTrapDirectives) {
+    const optionsCode = transformFocusTrapDirective(transformer, directive, 0);
+    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;
@@ -363,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
+  );
 }
 
 /**
@@ -399,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;
 }
 
 /**
@@ -426,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.9",
+  "version": "1.7.11",
   "description": "A declarative DOM framework with CSS selector-based structure and reactive pulsations",
   "type": "module",
   "main": "index.js",
@@ -68,6 +68,10 @@
       "types": "./types/http.d.ts",
       "default": "./runtime/http.js"
     },
+    "./runtime/a11y": {
+      "types": "./types/a11y.d.ts",
+      "default": "./runtime/a11y.js"
+    },
     "./runtime/devtools": "./runtime/devtools.js",
     "./compiler": {
       "types": "./types/index.d.ts",
@@ -97,7 +101,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "test": "npm run test:compiler && npm run test:sourcemap && npm run test:pulse && npm run test:dom && npm run test:dom-adapter && npm run test:router && npm run test:store && npm run test:hmr && npm run test:lint && npm run test:format && npm run test:analyze && npm run test:lru-cache && npm run test:utils && npm run test:docs && npm run test:async && npm run test:form && npm run test:http && npm run test:devtools && npm run test:native",
+    "test": "npm run test:compiler && npm run test:sourcemap && npm run test:pulse && npm run test:dom && npm run test:dom-adapter && npm run test:router && npm run test:store && npm run test:hmr && npm run test:lint && npm run test:format && npm run test:analyze && npm run test:lru-cache && npm run test:utils && npm run test:docs && npm run test:async && npm run test:form && npm run test:http && npm run test:devtools && npm run test:native && npm run test:a11y && npm run test:logger && npm run test:errors",
     "test:compiler": "node test/compiler.test.js",
     "test:sourcemap": "node test/sourcemap.test.js",
     "test:pulse": "node test/pulse.test.js",
@@ -117,6 +121,9 @@
     "test:http": "node test/http.test.js",
     "test:devtools": "node test/devtools.test.js",
     "test:native": "node test/native.test.js",
+    "test:a11y": "node test/a11y.test.js",
+    "test:logger": "node test/logger.test.js",
+    "test:errors": "node test/errors.test.js",
     "build:netlify": "node scripts/build-netlify.js",
     "version": "node scripts/sync-version.js",
     "docs": "node cli/index.js dev docs"