pulse-js-framework 1.7.33 → 1.7.38

package/cli/utils/file-utils.js

@@ -80,6 +80,9 @@ function globMatch(base, pattern, extensions) {
         match(dir, partIndex + 1);
         try {
           for (const entry of readdirSync(dir)) {
+            // Skip hidden files and node_modules
+            if (entry.startsWith('.') || entry === 'node_modules') continue;
+
             const full = join(dir, entry);
             try {
               if (statSync(full).isDirectory()) {
@@ -153,6 +156,9 @@ function matchFilesInDirRecursive(dir, pattern, extensions, results) {
   function walk(currentDir) {
     try {
       for (const entry of readdirSync(currentDir)) {
+        // Skip hidden files and node_modules
+        if (entry.startsWith('.') || entry === 'node_modules') continue;
+
         const full = join(currentDir, entry);
         try {
           const stat = statSync(full);

package/compiler/parser.js

@@ -100,7 +100,9 @@ export class Parser {
    * Peek at token at offset
    */
   peek(offset = 1) {
-    return this.tokens[this.pos + offset];
+    const index = this.pos + offset;
+    if (index < 0 || index >= this.tokens.length) return undefined;
+    return this.tokens[index];
   }
 
   /**

package/compiler/transformer/constants.js

@@ -5,7 +5,7 @@
  */
 
 /** Generate a unique scope ID for CSS scoping */
-export const generateScopeId = () => 'p' + Math.random().toString(36).substring(2, 8);
+export const generateScopeId = () => 'p' + Math.random().toString(36).substring(2, 12);
 
 /** Token types that should not have space after them */
 export const NO_SPACE_AFTER = new Set([

package/compiler/transformer/expressions.js

@@ -182,14 +182,54 @@ export function transformExpression(transformer, node) {
  * @returns {string} Transformed expression string
  */
 export function transformExpressionString(transformer, exprStr) {
-  // Simple transformation: wrap state and prop vars with .get()
+  // Transform state and prop vars in expression strings (interpolations, attribute bindings)
   // Both are now reactive (useProp returns computed for uniform interface)
   let result = exprStr;
 
-  // Transform state vars
+  // First, handle assignments to state vars: stateVar = expr -> stateVar.set(expr)
+  // This must happen before the generic .get() replacement to avoid generating
+  // invalid code like stateVar.get() = expr (LHS of assignment is not a reference)
   for (const stateVar of transformer.stateVars) {
+    // Compound assignment: stateVar += expr -> stateVar.update(_v => _v + expr)
     result = result.replace(
-      new RegExp(`\\b${stateVar}\\b`, 'g'),
+      new RegExp(`\\b${stateVar}\\s*(\\+=|-=|\\*=|\\/=|&&=|\\|\\|=|\\?\\?=)\\s*`, 'g'),
+      (_match, op) => {
+        const baseOp = op.slice(0, -1); // Remove trailing '='
+        return `${stateVar}.update(_v => _v ${baseOp} `;
+      }
+    );
+    // Close the .update() call - find the end of the expression after the replacement
+    // This is handled by the fact that the expression continues after the replacement text
+    // and the closing paren is added by wrapping logic below.
+
+    // Simple assignment: stateVar = expr -> stateVar.set(expr)
+    // Use negative lookbehind to skip compound assignments (already handled)
+    // Use negative lookahead to skip == and ===
+    result = result.replace(
+      new RegExp(`\\b${stateVar}\\s*=(?!=)`, 'g'),
+      `${stateVar}.set(`
+    );
+  }
+
+  // If we inserted .set( or .update(, we need to close the parenthesis
+  // Find unclosed .set( and .update( calls and close them at end of expression
+  if (result.includes('.set(') || result.includes('.update(_v =>')) {
+    // For .update(_v => _v op expr), close with )
+    result = result.replace(
+      /\.update\(_v => _v [^\)]*$/,
+      (m) => m + ')'
+    );
+    // For .set(expr), close with )
+    result = result.replace(
+      /\.set\(([^)]*$)/,
+      (_m, expr) => `.set(${expr})`
+    );
+  }
+
+  // Transform state var reads (not already transformed to .get/.set/.update)
+  for (const stateVar of transformer.stateVars) {
+    result = result.replace(
+      new RegExp(`\\b${stateVar}\\b(?!\\.(?:get|set|update))`, 'g'),
       `${stateVar}.get()`
     );
   }

package/loader/vite-plugin.js

@@ -146,7 +146,7 @@ export default function pulsePlugin(options = {}) {
                 compressed: sassOptions.compressed || false
               });
 
-              if (preprocessed.wasSass) {
+              if (preprocessed.preprocessor !== 'none') {
                 css = preprocessed.css;
               }
             } catch (sassError) {

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "pulse-js-framework",
-  "version": "1.7.33",
+  "version": "1.7.38",
   "description": "A declarative DOM framework with CSS selector-based structure and reactive pulsations",
   "type": "module",
+  "sideEffects": false,
   "main": "index.js",
   "types": "types/index.d.ts",
   "bin": {
@@ -178,6 +179,11 @@
     "test:esbuild-plugin": "node test/esbuild-plugin.test.js",
     "test:parcel-plugin": "node test/parcel-plugin.test.js",
     "test:swc-plugin": "node test/swc-plugin.test.js",
+    "test:dom-binding": "node test/dom-binding.test.js",
+    "test:interceptor-manager": "node test/interceptor-manager.test.js",
+    "test:vite-plugin": "node --test test/vite-plugin.test.js",
+    "test:memory-cleanup": "node --test test/memory-cleanup.test.js",
+    "test:dev-server": "node --test test/dev-server.test.js",
     "build:netlify": "node scripts/build-netlify.js",
     "version": "node scripts/sync-version.js",
     "docs": "node cli/index.js dev docs"

package/runtime/a11y.js

@@ -523,44 +523,39 @@ export function createPreferences() {
   const forcedColors = pulse(forcedColorsMode());
   const contrast = pulse(prefersContrast());
 
-  if (typeof window !== 'undefined') {
-    // Listen for preference changes
-    window.matchMedia('(prefers-reduced-motion: reduce)').addEventListener('change', (e) => {
-      reducedMotion.set(e.matches);
-    });
-
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-      colorScheme.set(e.matches ? 'dark' : 'light');
-    });
-
-    window.matchMedia('(prefers-contrast: more)').addEventListener('change', (e) => {
-      highContrast.set(e.matches);
-    });
+  const listeners = [];
 
-    window.matchMedia('(prefers-reduced-transparency: reduce)').addEventListener('change', (e) => {
-      reducedTransparency.set(e.matches);
-    });
-
-    window.matchMedia('(forced-colors: active)').addEventListener('change', (e) => {
-      forcedColors.set(e.matches ? 'active' : 'none');
-    });
-
-    // More granular contrast detection
-    window.matchMedia('(prefers-contrast: more)').addEventListener('change', () => {
-      contrast.set(prefersContrast());
-    });
-    window.matchMedia('(prefers-contrast: less)').addEventListener('change', () => {
-      contrast.set(prefersContrast());
-    });
+  if (typeof window !== 'undefined') {
+    const track = (query, handler) => {
+      const mql = window.matchMedia(query);
+      mql.addEventListener('change', handler);
+      listeners.push({ mql, handler });
+    };
+
+    track('(prefers-reduced-motion: reduce)', (e) => reducedMotion.set(e.matches));
+    track('(prefers-color-scheme: dark)', (e) => colorScheme.set(e.matches ? 'dark' : 'light'));
+    track('(prefers-contrast: more)', (e) => highContrast.set(e.matches));
+    track('(prefers-reduced-transparency: reduce)', (e) => reducedTransparency.set(e.matches));
+    track('(forced-colors: active)', (e) => forcedColors.set(e.matches ? 'active' : 'none'));
+    track('(prefers-contrast: more)', () => contrast.set(prefersContrast()));
+    track('(prefers-contrast: less)', () => contrast.set(prefersContrast()));
   }
 
+  const cleanup = () => {
+    for (const { mql, handler } of listeners) {
+      mql.removeEventListener('change', handler);
+    }
+    listeners.length = 0;
+  };
+
   return {
     reducedMotion,
     colorScheme,
     highContrast,
     reducedTransparency,
     forcedColors,
-    contrast
+    contrast,
+    cleanup
   };
 }
 
@@ -1570,27 +1565,43 @@ export function createAnnouncementQueue(options = {}) {
 
   const queue = [];
   let isProcessing = false;
+  let currentTimerId = null;
+  let aborted = false;
   const queueLength = pulse(0);
 
   const processQueue = async () => {
-    if (isProcessing || queue.length === 0) return;
+    if (isProcessing || queue.length === 0 || aborted) return;
 
     isProcessing = true;
 
-    while (queue.length > 0) {
+    while (queue.length > 0 && !aborted) {
       const { message, priority, clearAfter } = queue.shift();
       queueLength.set(queue.length);
 
       announce(message, { priority, clearAfter });
 
       // Wait for announcement to be read
-      await new Promise(resolve => setTimeout(resolve,
-        Math.max(minDelay, clearAfter || 1000)));
+      await new Promise(resolve => {
+        currentTimerId = setTimeout(resolve,
+          Math.max(minDelay, clearAfter || 1000));
+      });
+      currentTimerId = null;
     }
 
     isProcessing = false;
   };
 
+  const dispose = () => {
+    aborted = true;
+    if (currentTimerId !== null) {
+      clearTimeout(currentTimerId);
+      currentTimerId = null;
+    }
+    queue.length = 0;
+    queueLength.set(0);
+    isProcessing = false;
+  };
+
   return {
     queueLength,
     /**
@@ -1599,6 +1610,7 @@ export function createAnnouncementQueue(options = {}) {
      * @param {object} options - Announcement options (priority, clearAfter)
      */
     add: (message, opts = {}) => {
+      if (aborted) return;
       queue.push({ message, ...opts });
       queueLength.set(queue.length);
       processQueue();
@@ -1614,7 +1626,11 @@ export function createAnnouncementQueue(options = {}) {
      * Check if queue is being processed
      * @returns {boolean}
      */
-    isProcessing: () => isProcessing
+    isProcessing: () => isProcessing,
+    /**
+     * Dispose the queue, cancelling any pending timers
+     */
+    dispose
   };
 }
 

package/runtime/async.js

@@ -462,6 +462,11 @@ export function useAsync(asyncFn, options = {}) {
     }
   }
 
+  const dispose = () => {
+    versionController.cleanup();
+  };
+  onCleanup(dispose);
+
   // Execute immediately if requested
   if (immediate) {
     execute();
@@ -474,7 +479,8 @@ export function useAsync(asyncFn, options = {}) {
     status,
     execute,
     reset,
-    abort
+    abort,
+    dispose
   };
 }
 
@@ -727,6 +733,13 @@ export function useResource(key, fetcher, options = {}) {
     fetch();
   }
 
+  const dispose = () => {
+    if (intervalId) {
+      clearInterval(intervalId);
+      intervalId = null;
+    }
+  };
+
   return {
     data,
     error,
@@ -737,7 +750,8 @@ export function useResource(key, fetcher, options = {}) {
     fetch,
     refresh,
     mutate,
-    invalidate
+    invalidate,
+    dispose
   };
 }
 

package/runtime/form.js

@@ -6,7 +6,7 @@
  * and touched state tracking.
  */
 
-import { pulse, effect, computed, batch } from './pulse.js';
+import { pulse, effect, computed, batch, onCleanup } from './pulse.js';
 
 /**
  * @typedef {Object} FieldState
@@ -698,6 +698,19 @@ export function useForm(initialValues, validationSchema = {}, options = {}) {
     });
   }
 
+  const dispose = () => {
+    for (const name of fieldNames) {
+      const timers = debounceTimers[name];
+      if (timers) {
+        for (const timerId of timers.values()) {
+          clearTimeout(timerId);
+        }
+        timers.clear();
+      }
+    }
+  };
+  onCleanup(dispose);
+
   return {
     fields,
     isValid,
@@ -715,7 +728,8 @@ export function useForm(initialValues, validationSchema = {}, options = {}) {
     reset,
     handleSubmit,
     setErrors,
-    clearErrors
+    clearErrors,
+    dispose
   };
 }
 
@@ -905,6 +919,14 @@ export function useField(initialValue, rules = [], options = {}) {
     });
   };
 
+  const dispose = () => {
+    for (const timerId of debounceTimers.values()) {
+      clearTimeout(timerId);
+    }
+    debounceTimers.clear();
+  };
+  onCleanup(dispose);
+
   return {
     value,
     error,
@@ -918,7 +940,8 @@ export function useField(initialValue, rules = [], options = {}) {
     onBlur,
     reset,
     setError: (msg) => error.set(msg),
-    clearError: () => error.set(null)
+    clearError: () => error.set(null),
+    dispose
   };
 }
 
@@ -1028,6 +1051,13 @@ export function useFieldArray(initialValues = [], itemRules = []) {
     return asyncResults.every(r => r === true);
   };
 
+  const dispose = () => {
+    for (const field of fieldsArray.get()) {
+      field.dispose?.();
+    }
+  };
+  onCleanup(dispose);
+
   return {
     fields: fieldsArray,
     values,
@@ -1042,7 +1072,8 @@ export function useFieldArray(initialValues = [], itemRules = []) {
     replace,
     reset,
     validateAll,
-    validateAllSync
+    validateAllSync,
+    dispose
   };
 }
 

package/runtime/router.js

@@ -878,16 +878,18 @@ export function createRouter(options = {}) {
     const a = el('a', content);
     a.href = href;
 
-    a.addEventListener('click', (e) => {
+    const handleClick = (e) => {
       // Allow ctrl/cmd+click for new tab
       if (e.ctrlKey || e.metaKey) return;
 
       e.preventDefault();
       navigate(path, options);
-    });
+    };
+
+    a.addEventListener('click', handleClick);
 
     // Add active class when route matches
-    effect(() => {
+    const disposeEffect = effect(() => {
       const current = currentPath.get();
       if (current === path || (options.exact === false && current.startsWith(path))) {
         a.classList.add(options.activeClass || 'active');
@@ -896,6 +898,11 @@ export function createRouter(options = {}) {
       }
     });
 
+    a.cleanup = () => {
+      a.removeEventListener('click', handleClick);
+      disposeEffect();
+    };
+
     return a;
   }
 

package/runtime/security.js

@@ -321,6 +321,27 @@ export function sanitizeHtml(html, options = {}) {
         attrValue = sanitized;
       }
 
+      // Sanitize style attribute to prevent CSS injection
+      if (attrName === 'style') {
+        const parts = attrValue.split(';').filter(Boolean);
+        const safeParts = [];
+        for (const part of parts) {
+          const colonIndex = part.indexOf(':');
+          if (colonIndex === -1) continue;
+          const cssProp = part.slice(0, colonIndex).trim();
+          const cssVal = part.slice(colonIndex + 1).trim();
+          if (/url\s*\(/i.test(cssVal) || /expression\s*\(/i.test(cssVal) ||
+              /javascript:/i.test(cssVal) || /behavior\s*:/i.test(cssVal) ||
+              /-moz-binding/i.test(cssVal)) {
+            log.warn(`Blocked dangerous CSS in style attribute: ${cssProp}`);
+            continue;
+          }
+          safeParts.push(`${cssProp}: ${cssVal}`);
+        }
+        attrValue = safeParts.join('; ');
+        if (!attrValue) continue;
+      }
+
       result += ` ${attrName}="${escapeHtml(attrValue)}"`;
     }
 

package/runtime/ssr.js

@@ -408,12 +408,16 @@ export function deserializeState(data) {
  * // Default implementation just stores in global
  * restoreState(window.__PULSE_STATE__);
  */
+// Module-scoped state store (avoids globalThis collision between multiple SSR instances)
+let _ssrState = null;
+
 export function restoreState(state) {
   const deserialized = typeof state === 'string'
     ? deserializeState(state)
     : state;
 
-  // Store in global for access by components
+  // Store in module scope and global for backward compatibility
+  _ssrState = deserialized;
   if (typeof globalThis !== 'undefined') {
     globalThis.__PULSE_SSR_STATE__ = deserialized;
   }
@@ -430,10 +434,20 @@ export function restoreState(state) {
  * const userData = getSSRState('user');
  */
 export function getSSRState(key) {
-  const state = globalThis?.__PULSE_SSR_STATE__ || {};
+  const state = _ssrState || globalThis?.__PULSE_SSR_STATE__ || {};
   return key ? state[key] : state;
 }
 
+/**
+ * Clear the SSR state. Use in tests or when cleaning up SSR context.
+ */
+export function clearSSRState() {
+  _ssrState = null;
+  if (typeof globalThis !== 'undefined') {
+    delete globalThis.__PULSE_SSR_STATE__;
+  }
+}
+
 // ============================================================================
 // Re-exports for convenience
 // ============================================================================
@@ -456,6 +470,7 @@ export default {
   deserializeState,
   restoreState,
   getSSRState,
+  clearSSRState,
 
   // Mode checks
   isSSR,