pulse-js-framework 1.7.23 → 1.7.25

package/cli/release.js

@@ -508,6 +508,46 @@ function buildCommitMessage(newVersion, title, changes) {
   return message;
 }
 
+/**
+ * Verify that a git tag exists locally
+ */
+function verifyTagExists(version) {
+  try {
+    const tags = execSync('git tag -l', { cwd: root, encoding: 'utf-8' });
+    return tags.split('\n').includes(`v${version}`);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Verify that a git tag exists on remote
+ */
+function verifyTagOnRemote(version) {
+  try {
+    const remoteTags = execSync('git ls-remote --tags origin', { cwd: root, encoding: 'utf-8' });
+    return remoteTags.includes(`refs/tags/v${version}`);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Execute a git command with error handling
+ */
+function execGitCommand(command, description) {
+  log.info(`  Running: ${description}...`);
+  try {
+    execSync(command, { cwd: root, stdio: 'inherit' });
+    return { success: true };
+  } catch (error) {
+    log.error(`  Failed: ${description}`);
+    log.error(`  Command: ${command}`);
+    log.error(`  Error: ${error.message}`);
+    return { success: false, error };
+  }
+}
+
 /**
  * Execute git commands
  */
@@ -521,33 +561,142 @@ function gitCommitTagPush(newVersion, title, changes, dryRun = false) {
     log.info(`  [dry-run] git tag -a v${newVersion} -m "Release v${newVersion}"`);
     log.info('  [dry-run] git push');
     log.info('  [dry-run] git push --tags');
-    return;
+    return { success: true };
   }
 
   // git add
-  log.info('  Running: git add -A...');
-  execSync('git add -A', { cwd: root, stdio: 'inherit' });
+  let result = execGitCommand('git add -A', 'git add -A');
+  if (!result.success) {
+    return { success: false, stage: 'add', error: result.error };
+  }
 
   // git commit using temp file for cross-platform compatibility
-  log.info('  Running: git commit...');
   const tempFile = join(tmpdir(), `pulse-release-${Date.now()}.txt`);
   writeFileSync(tempFile, commitMessage, 'utf-8');
   try {
-    execSync(`git commit -F "${tempFile}"`, { cwd: root, stdio: 'inherit' });
+    result = execGitCommand(`git commit -F "${tempFile}"`, 'git commit');
+    if (!result.success) {
+      return { success: false, stage: 'commit', error: result.error };
+    }
   } finally {
-    unlinkSync(tempFile);
+    try {
+      unlinkSync(tempFile);
+    } catch {
+      // Ignore cleanup errors
+    }
   }
 
   // git tag
-  log.info(`  Running: git tag v${newVersion}...`);
-  execSync(`git tag -a v${newVersion} -m "Release v${newVersion}"`, { cwd: root, stdio: 'inherit' });
+  result = execGitCommand(
+    `git tag -a v${newVersion} -m "Release v${newVersion}"`,
+    `git tag v${newVersion}`
+  );
+  if (!result.success) {
+    log.error('');
+    log.error('Tag creation failed. The commit was created but not tagged.');
+    log.error('You can manually create the tag with:');
+    log.error(`  git tag -a v${newVersion} -m "Release v${newVersion}"`);
+    return { success: false, stage: 'tag', error: result.error };
+  }
+
+  // Verify tag was created
+  if (!verifyTagExists(newVersion)) {
+    log.error('');
+    log.error('Tag creation appeared to succeed but tag not found locally.');
+    log.error('You can manually create the tag with:');
+    log.error(`  git tag -a v${newVersion} -m "Release v${newVersion}"`);
+    return { success: false, stage: 'tag-verify', error: new Error('Tag not found after creation') };
+  }
+  log.info(`  Verified: tag v${newVersion} exists locally`);
 
   // git push
-  log.info('  Running: git push...');
-  execSync('git push', { cwd: root, stdio: 'inherit' });
+  result = execGitCommand('git push', 'git push');
+  if (!result.success) {
+    log.error('');
+    log.error('Push failed. Commit and tag were created locally.');
+    log.error('You can manually push with:');
+    log.error('  git push && git push --tags');
+    return { success: false, stage: 'push', error: result.error };
+  }
+
+  // git push --tags
+  result = execGitCommand('git push --tags', 'git push --tags');
+  if (!result.success) {
+    log.error('');
+    log.error('Tag push failed. The tag exists locally but not on remote.');
+    log.error('You can manually push tags with:');
+    log.error('  git push --tags');
+    return { success: false, stage: 'push-tags', error: result.error };
+  }
+
+  // Verify tag was pushed to remote
+  if (!verifyTagOnRemote(newVersion)) {
+    log.warn('');
+    log.warn('Tag push appeared to succeed but tag not found on remote.');
+    log.warn('You may need to manually verify or push with:');
+    log.warn('  git push --tags');
+  } else {
+    log.info(`  Verified: tag v${newVersion} exists on remote`);
+  }
 
-  log.info('  Running: git push --tags...');
-  execSync('git push --tags', { cwd: root, stdio: 'inherit' });
+  return { success: true };
+}
+
+/**
+ * Execute git commands without pushing (--no-push mode)
+ */
+function gitCommitTagNoPush(newVersion, title, changes) {
+  const commitMessage = buildCommitMessage(newVersion, title, changes);
+
+  // git add
+  let result = execGitCommand('git add -A', 'git add -A');
+  if (!result.success) {
+    return { success: false, stage: 'add', error: result.error };
+  }
+
+  // git commit using temp file for cross-platform compatibility
+  const tempFile = join(tmpdir(), `pulse-release-${Date.now()}.txt`);
+  writeFileSync(tempFile, commitMessage, 'utf-8');
+  try {
+    result = execGitCommand(`git commit -F "${tempFile}"`, 'git commit');
+    if (!result.success) {
+      return { success: false, stage: 'commit', error: result.error };
+    }
+  } finally {
+    try {
+      unlinkSync(tempFile);
+    } catch {
+      // Ignore cleanup errors
+    }
+  }
+
+  // git tag
+  result = execGitCommand(
+    `git tag -a v${newVersion} -m "Release v${newVersion}"`,
+    `git tag v${newVersion}`
+  );
+  if (!result.success) {
+    log.error('');
+    log.error('Tag creation failed. The commit was created but not tagged.');
+    log.error('You can manually create the tag with:');
+    log.error(`  git tag -a v${newVersion} -m "Release v${newVersion}"`);
+    return { success: false, stage: 'tag', error: result.error };
+  }
+
+  // Verify tag was created
+  if (!verifyTagExists(newVersion)) {
+    log.error('');
+    log.error('Tag creation appeared to succeed but tag not found locally.');
+    log.error('You can manually create the tag with:');
+    log.error(`  git tag -a v${newVersion} -m "Release v${newVersion}"`);
+    return { success: false, stage: 'tag-verify', error: new Error('Tag not found after creation') };
+  }
+
+  log.info(`  Verified: tag v${newVersion} exists locally`);
+  log.info('  Created commit and tag (--no-push specified)');
+  log.info('  To push later, run: git push && git push --tags');
+
+  return { success: true };
 }
 
 /**
@@ -811,25 +960,24 @@ export async function runRelease(args) {
   log.info('');
   log.info('Git operations...');
 
+  let gitResult = { success: true };
+
   if (!dryRun) {
     if (noPush) {
       // Only commit and tag, no push
-      const commitMessage = buildCommitMessage(newVersion, title, changes);
-      execSync('git add -A', { cwd: root, stdio: 'inherit' });
-      const tempFile = join(tmpdir(), `pulse-release-${Date.now()}.txt`);
-      writeFileSync(tempFile, commitMessage, 'utf-8');
-      try {
-        execSync(`git commit -F "${tempFile}"`, { cwd: root, stdio: 'inherit' });
-      } finally {
-        unlinkSync(tempFile);
-      }
-      execSync(`git tag -a v${newVersion} -m "Release v${newVersion}"`, { cwd: root, stdio: 'inherit' });
-      log.info('  Created commit and tag (--no-push specified)');
+      gitResult = gitCommitTagNoPush(newVersion, title, changes);
     } else {
-      gitCommitTagPush(newVersion, title, changes, false);
+      gitResult = gitCommitTagPush(newVersion, title, changes, false);
     }
   } else {
-    gitCommitTagPush(newVersion, title, changes, true);
+    gitResult = gitCommitTagPush(newVersion, title, changes, true);
+  }
+
+  if (!gitResult.success) {
+    log.error('');
+    log.error(`Release failed at stage: ${gitResult.stage}`);
+    log.error('Please fix the issue and retry, or complete the release manually.');
+    process.exit(1);
   }
 
   log.info('');

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/loader/vite-plugin.js

@@ -2,32 +2,42 @@
  * Pulse Vite Plugin
  *
  * Enables .pulse file support in Vite projects
+ * Extracts CSS to virtual .css modules so Vite's CSS pipeline handles them
+ * (prevents JS minifier from corrupting CSS in template literals)
  */
 
 import { compile } from '../compiler/index.js';
 import { existsSync } from 'fs';
 import { resolve, dirname } from 'path';
 
+// Virtual module ID for extracted CSS (uses .css extension so Vite treats it as CSS)
+const VIRTUAL_CSS_SUFFIX = '.pulse.css';
+
 /**
  * Create Pulse Vite plugin
  */
 export default function pulsePlugin(options = {}) {
   const {
-    include = /\.pulse$/,
     exclude = /node_modules/,
     sourceMap = true
   } = options;
 
+  // Store extracted CSS for each .pulse module
+  const cssMap = new Map();
+
   return {
     name: 'vite-plugin-pulse',
     enforce: 'pre',
 
     /**
-     * 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
+     * Resolve .pulse files and virtual CSS modules
      */
     resolveId(id, importer) {
+      // Handle virtual CSS module resolution
+      if (id.endsWith(VIRTUAL_CSS_SUFFIX)) {
+        return '\0' + id;
+      }
+
       // Direct .pulse imports - resolve to absolute path
       if (id.endsWith('.pulse') && importer) {
         const importerDir = dirname(importer);
@@ -38,7 +48,6 @@ export default function pulsePlugin(options = {}) {
       }
 
       // 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);
@@ -52,8 +61,22 @@ export default function pulsePlugin(options = {}) {
       return null;
     },
 
+    /**
+     * Load virtual CSS modules
+     */
+    load(id) {
+      // Virtual modules start with \0
+      if (id.startsWith('\0') && id.endsWith(VIRTUAL_CSS_SUFFIX)) {
+        const pulseId = id.slice(1, -VIRTUAL_CSS_SUFFIX.length + '.pulse'.length);
+        const css = cssMap.get(pulseId);
+        return css || '';
+      }
+      return null;
+    },
+
     /**
      * Transform .pulse files to JavaScript
+     * CSS is extracted to a virtual .css module that Vite processes separately
      */
     transform(code, id) {
       if (!id.endsWith('.pulse')) {
@@ -79,8 +102,27 @@ export default function pulsePlugin(options = {}) {
           return null;
         }
 
+        let outputCode = result.code;
+
+        // Extract CSS from compiled output and move to virtual CSS module
+        const stylesMatch = outputCode.match(/const styles = `([\s\S]*?)`;/);
+        if (stylesMatch) {
+          const css = stylesMatch[1];
+          const virtualCssId = id + '.css';
+
+          // Store CSS for the virtual module loader
+          cssMap.set(id, css);
+
+          // Replace inline style injection with CSS import
+          // Vite will process this through its CSS pipeline (not JS minifier)
+          outputCode = outputCode.replace(
+            /\/\/ Styles\nconst styles = `[\s\S]*?`;\n\/\/ Inject styles\nconst styleEl = document\.createElement\("style"\);\nstyleEl\.textContent = styles;\ndocument\.head\.appendChild\(styleEl\);/,
+            `// Styles extracted to virtual CSS module\nimport "${virtualCssId}";`
+          );
+        }
+
         return {
-          code: result.code,
+          code: outputCode,
           map: result.map || null
         };
       } catch (error) {
@@ -92,7 +134,7 @@ export default function pulsePlugin(options = {}) {
     /**
      * Handle hot module replacement
      */
-    handleHotUpdate({ file, server, modules }) {
+    handleHotUpdate({ file, server }) {
       if (file.endsWith('.pulse')) {
         console.log(`[Pulse] HMR update: ${file}`);
 
@@ -102,8 +144,14 @@ export default function pulsePlugin(options = {}) {
           server.moduleGraph.invalidateModule(module);
         }
 
+        // Also invalidate the associated virtual CSS module
+        const virtualCssId = '\0' + file + '.css';
+        const cssModule = server.moduleGraph.getModuleById(virtualCssId);
+        if (cssModule) {
+          server.moduleGraph.invalidateModule(cssModule);
+        }
+
         // Send HMR update instead of full reload
-        // The module will handle its own state preservation via hmrRuntime
         server.ws.send({
           type: 'update',
           updates: [{
@@ -123,7 +171,7 @@ export default function pulsePlugin(options = {}) {
      * Configure dev server
      */
     configureServer(server) {
-      server.middlewares.use((req, res, next) => {
+      server.middlewares.use((_req, _res, next) => {
         // Add any custom middleware here
         next();
       });
@@ -133,11 +181,8 @@ export default function pulsePlugin(options = {}) {
      * Build hooks
      */
     buildStart() {
-      console.log('[Pulse] Build started');
-    },
-
-    buildEnd() {
-      console.log('[Pulse] Build completed');
+      // Clear CSS map on new build
+      cssMap.clear();
     }
   };
 }
@@ -191,9 +236,9 @@ export const utils = {
   },
 
   /**
-   * Create a virtual module ID
+   * Get the virtual CSS module ID for a Pulse file
    */
-  createVirtualId(id) {
-    return `\0${id}`;
+  getVirtualCssId(id) {
+    return id + '.css';
   }
 };

package/package.json

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