pulse-js-framework 1.7.24 → 1.7.25

package/compiler/transformer/expressions.js

@@ -25,10 +25,14 @@ export function transformExpression(transformer, node) {
 
   switch (node.type) {
     case NodeType.Identifier:
+      // Props take precedence over state (props are destructured in render scope)
+      if (transformer.propVars.has(node.name)) {
+        return node.name;
+      }
       if (transformer.stateVars.has(node.name)) {
         return `${node.name}.get()`;
       }
-      // Props are accessed directly (already destructured)
+      // Other identifiers (actions, imports, etc.) accessed directly
       return node.name;
 
     case NodeType.Literal:
@@ -153,8 +157,13 @@ export function transformExpression(transformer, node) {
  */
 export function transformExpressionString(transformer, exprStr) {
   // Simple transformation: wrap state vars with .get()
+  // Props take precedence - don't wrap props with .get()
   let result = exprStr;
   for (const stateVar of transformer.stateVars) {
+    // Skip if this var name is also a prop (props shadow state in render scope)
+    if (transformer.propVars.has(stateVar)) {
+      continue;
+    }
     result = result.replace(
       new RegExp(`\\b${stateVar}\\b`, 'g'),
       `${stateVar}.get()`

package/compiler/transformer/view.js

@@ -298,32 +298,127 @@ export function transformFocusTrapDirective(transformer, node, indent) {
   return `{ ${optionsCode} }`;
 }
 
+/**
+ * Parse a balanced expression starting from an opening brace
+ * Handles nested braces and string literals correctly
+ * @param {string} str - The string to parse
+ * @param {number} start - Index of the opening brace
+ * @returns {Object} { expr: string, end: number } or null if invalid
+ */
+function parseBalancedExpression(str, start) {
+  if (str[start] !== '{') return null;
+
+  let depth = 0;
+  let inString = false;
+  let stringChar = '';
+  let i = start;
+
+  while (i < str.length) {
+    const char = str[i];
+    const prevChar = i > 0 ? str[i - 1] : '';
+
+    // Handle string literals
+    if (!inString && (char === '"' || char === "'" || char === '`')) {
+      inString = true;
+      stringChar = char;
+    } else if (inString && char === stringChar && prevChar !== '\\') {
+      inString = false;
+      stringChar = '';
+    }
+
+    // Count braces only outside strings
+    if (!inString) {
+      if (char === '{') {
+        depth++;
+      } else if (char === '}') {
+        depth--;
+        if (depth === 0) {
+          // Found the matching closing brace
+          return {
+            expr: str.slice(start + 1, i),
+            end: i
+          };
+        }
+      }
+    }
+
+    i++;
+  }
+
+  return null; // Unbalanced braces
+}
+
 /**
  * Extract dynamic attributes from a selector
  * Returns { cleanSelector, dynamicAttrs } where dynamicAttrs is an array of { name, expr }
+ * Handles complex expressions including ternaries, nested braces, and string literals
  * @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 = '';
+  let i = 0;
+
+  while (i < selector.length) {
+    // Look for attribute start: [
+    if (selector[i] === '[') {
+      i++; // Skip [
+
+      // Parse attribute name
+      let attrName = '';
+      while (i < selector.length && /[a-zA-Z0-9-]/.test(selector[i])) {
+        attrName += selector[i];
+        i++;
+      }
 
-  let cleanSelector = selector;
+      // Skip whitespace
+      while (i < selector.length && /\s/.test(selector[i])) i++;
 
-  // 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, '');
+      // Check for =
+      if (i < selector.length && selector[i] === '=') {
+        i++; // Skip =
+
+        // Skip whitespace
+        while (i < selector.length && /\s/.test(selector[i])) i++;
 
-  // Extract quoted dynamic attributes: [value="{expr}"]
-  while ((match = attrPatternQuoted.exec(selector)) !== null) {
-    dynamicAttrs.push({ name: match[1], expr: match[2] });
+        // Check for optional quote
+        const hasQuote = selector[i] === '"';
+        if (hasQuote) i++;
+
+        // Check for dynamic expression {
+        if (selector[i] === '{') {
+          const result = parseBalancedExpression(selector, i);
+          if (result) {
+            dynamicAttrs.push({ name: attrName, expr: result.expr });
+            i = result.end + 1; // Skip past closing }
+
+            // Skip optional closing quote
+            if (hasQuote && selector[i] === '"') i++;
+
+            // Skip closing ]
+            if (selector[i] === ']') i++;
+
+            // Don't add this attribute to cleanSelector
+            continue;
+          }
+        }
+      }
+
+      // Not a dynamic attribute, copy everything from [ to ]
+      let bracketDepth = 1;
+      cleanSelector += '[';
+      while (i < selector.length && bracketDepth > 0) {
+        if (selector[i] === '[') bracketDepth++;
+        else if (selector[i] === ']') bracketDepth--;
+        cleanSelector += selector[i];
+        i++;
+      }
+    } else {
+      cleanSelector += selector[i];
+      i++;
+    }
   }
-  cleanSelector = cleanSelector.replace(attrPatternQuoted, '');
 
   return { cleanSelector, dynamicAttrs };
 }
@@ -577,6 +672,18 @@ export function transformComponentCall(transformer, node, indent) {
  * @param {number} indent - Indentation level
  * @returns {string} JavaScript code
  */
+/**
+ * Escape a string for use in a template literal
+ * @param {string} str - String to escape
+ * @returns {string} Escaped string
+ */
+function escapeTemplateString(str) {
+  return str
+    .replace(/\\/g, '\\\\')  // Escape backslashes first
+    .replace(/`/g, '\\`')    // Escape backticks
+    .replace(/\$/g, '\\$');  // Escape dollar signs to prevent ${} interpretation
+}
+
 export function transformTextNode(transformer, node, indent) {
   const pad = ' '.repeat(indent);
   const parts = node.parts;
@@ -589,7 +696,8 @@ export function transformTextNode(transformer, node, indent) {
   // Has interpolations - use text() with a function
   const textParts = parts.map(part => {
     if (typeof part === 'string') {
-      return JSON.stringify(part);
+      // Escape for template literal (not JSON.stringify which adds quotes)
+      return escapeTemplateString(part);
     }
     // Interpolation
     const expr = transformExpressionString(transformer, part.expression);

package/package.json

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