pulse-js-framework 1.7.10 → 1.7.12

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.12",
   "description": "A declarative DOM framework with CSS selector-based structure and reactive pulsations",
   "type": "module",
   "main": "index.js",
@@ -73,6 +73,14 @@
       "default": "./runtime/a11y.js"
     },
     "./runtime/devtools": "./runtime/devtools.js",
+    "./runtime/websocket": {
+      "types": "./types/websocket.d.ts",
+      "default": "./runtime/websocket.js"
+    },
+    "./runtime/graphql": {
+      "types": "./types/graphql.d.ts",
+      "default": "./runtime/graphql.js"
+    },
     "./compiler": {
       "types": "./types/index.d.ts",
       "default": "./compiler/index.js"
@@ -101,7 +109,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 && npm run test:a11y && npm run test:logger && npm run test:errors",
+    "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:cli && npm run test:cli-ui && 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 && npm run test:security && npm run test:websocket && npm run test:graphql",
     "test:compiler": "node test/compiler.test.js",
     "test:sourcemap": "node test/sourcemap.test.js",
     "test:pulse": "node test/pulse.test.js",
@@ -113,6 +121,8 @@
     "test:lint": "node test/lint.test.js",
     "test:format": "node test/format.test.js",
     "test:analyze": "node test/analyze.test.js",
+    "test:cli": "node test/cli.test.js",
+    "test:cli-ui": "node test/cli-ui.test.js",
     "test:lru-cache": "node test/lru-cache.test.js",
     "test:utils": "node test/utils.test.js",
     "test:docs": "node test/docs.test.js",
@@ -124,6 +134,9 @@
     "test:a11y": "node test/a11y.test.js",
     "test:logger": "node test/logger.test.js",
     "test:errors": "node test/errors.test.js",
+    "test:security": "node test/security.test.js",
+    "test:websocket": "node test/websocket.test.js",
+    "test:graphql": "node test/graphql.test.js",
     "build:netlify": "node scripts/build-netlify.js",
     "version": "node scripts/sync-version.js",
     "docs": "node cli/index.js dev docs"