zero-query 1.0.9 → 1.1.1

package/src/router.js

@@ -47,6 +47,9 @@ class Router {
     const isFile = typeof location !== 'undefined' && location.protocol === 'file:';
     this._mode = isFile ? 'hash' : (config.mode || 'history');
 
+    // Keep-alive cache: component name → { container, instance }
+    this._keepAliveCache = new Map();
+
     // Base path for sub-path deployments
     // Priority: explicit config.base → window.__ZQ_BASE → <base href> tag
     let rawBase = config.base;
@@ -604,34 +607,96 @@ class Router {
         await prefetch(matched.component);
       }
 
-      // Destroy previous
-      if (this._instance) {
+      const isKeepAlive = !!matched.keepAlive;
+      const componentName = typeof matched.component === 'string' ? matched.component : null;
+
+      // Deactivate previous keep-alive instance (hide instead of destroy)
+      if (this._instance && this._currentKeepAlive && this._currentComponentName) {
+        const cached = this._keepAliveCache.get(this._currentComponentName);
+        if (cached) {
+          cached.container.style.display = 'none';
+          // Call deactivated() lifecycle hook
+          if (cached.instance._def.deactivated) {
+            try { cached.instance._def.deactivated.call(cached.instance); }
+            catch (err) { reportError(ErrorCode.COMP_LIFECYCLE, `Component "${this._currentComponentName}" deactivated() threw`, { component: this._currentComponentName }, err); }
+          }
+        }
+        this._instance = null;
+      } else if (this._instance) {
+        // Destroy previous non-keepAlive instance
         this._instance.destroy();
         this._instance = null;
       }
 
-      // Create container
       const _routeStart = typeof window !== 'undefined' && window.__zqRenderHook ? performance.now() : 0;
-      this._el.innerHTML = '';
 
       // Pass route params and query as props
       const props = { ...params, $route: to, $query: query, $params: params };
 
+      // Keep-alive: reuse cached instance
+      if (isKeepAlive && componentName && this._keepAliveCache.has(componentName)) {
+        const cached = this._keepAliveCache.get(componentName);
+        // Hide all children, show the cached one
+        [...this._el.children].forEach(c => { c.style.display = 'none'; });
+        cached.container.style.display = '';
+        this._instance = cached.instance;
+        this._currentKeepAlive = true;
+        this._currentComponentName = componentName;
+        // Call activated() lifecycle hook
+        if (cached.instance._def.activated) {
+          try { cached.instance._def.activated.call(cached.instance); }
+          catch (err) { reportError(ErrorCode.COMP_LIFECYCLE, `Component "${componentName}" activated() threw`, { component: componentName }, err); }
+        }
+        if (_routeStart) window.__zqRenderHook(this._el, performance.now() - _routeStart, 'route', componentName);
+      }
       // If component is a string (registered name), mount it
-      if (typeof matched.component === 'string') {
-        const container = document.createElement(matched.component);
+      else if (componentName) {
+        // Hide all keep-alive cached children (don't destroy)
+        [...this._el.children].forEach(c => {
+          if (c.dataset.zqKeepAlive) {
+            c.style.display = 'none';
+          }
+        });
+        // Remove non-keep-alive children
+        [...this._el.children].forEach(c => {
+          if (!c.dataset.zqKeepAlive) c.remove();
+        });
+
+        const container = document.createElement(componentName);
+        if (isKeepAlive) container.dataset.zqKeepAlive = componentName;
         this._el.appendChild(container);
         try {
-          this._instance = mount(container, matched.component, props);
+          this._instance = mount(container, componentName, props);
         } catch (err) {
           reportError(ErrorCode.COMP_NOT_FOUND, `Failed to mount component for route "${matched.path}"`, { component: matched.component, path: matched.path }, err);
           return;
         }
-        if (_routeStart) window.__zqRenderHook(this._el, performance.now() - _routeStart, 'route', matched.component);
+
+        if (isKeepAlive) {
+          this._keepAliveCache.set(componentName, { container, instance: this._instance });
+          // Call activated() on first mount
+          if (this._instance._def.activated) {
+            try { this._instance._def.activated.call(this._instance); }
+            catch (err) { reportError(ErrorCode.COMP_LIFECYCLE, `Component "${componentName}" activated() threw`, { component: componentName }, err); }
+          }
+        }
+
+        this._currentKeepAlive = isKeepAlive;
+        this._currentComponentName = componentName;
+        if (_routeStart) window.__zqRenderHook(this._el, performance.now() - _routeStart, 'route', componentName);
       }
       // If component is a render function
       else if (typeof matched.component === 'function') {
-        this._el.innerHTML = matched.component(to);
+        // Clear non-keepAlive content
+        [...this._el.children].forEach(c => {
+          if (c.dataset.zqKeepAlive) c.style.display = 'none';
+          else c.remove();
+        });
+        const wrapper = document.createElement('div');
+        wrapper.innerHTML = matched.component(to);
+        while (wrapper.firstChild) this._el.appendChild(wrapper.firstChild);
+        this._currentKeepAlive = false;
+        this._currentComponentName = null;
         if (_routeStart) window.__zqRenderHook(this._el, performance.now() - _routeStart, 'route', to);
       }
     }
@@ -690,6 +755,11 @@ class Router {
       document.removeEventListener('click', this._onLinkClick);
       this._onLinkClick = null;
     }
+    // Destroy all keep-alive cached instances
+    for (const [, cached] of this._keepAliveCache) {
+      cached.instance.destroy();
+    }
+    this._keepAliveCache.clear();
     if (this._instance) this._instance.destroy();
     this._listeners.clear();
     this._substateListeners = [];

package/src/store.js

@@ -86,8 +86,9 @@ class Store {
   batch(fn) {
     this._batching = true;
     this._batchQueue = [];
+    let result;
     try {
-      fn(this.state);
+      result = fn(this.state);
     } finally {
       this._batching = false;
       // Deduplicate: keep only the last change per key
@@ -100,6 +101,7 @@ class Store {
         this._notifySubscribers(key, value, old);
       }
     }
+    return result;
   }
 
   /**
@@ -187,8 +189,14 @@ class Store {
   }
 
   /**
-   * Subscribe to changes on a specific state key
-   * @param {string|Function} keyOrFn - state key, or function for all changes
+   * Subscribe to changes on a specific state key, multiple keys, or all changes.
+   *
+   * Signatures:
+   *   subscribe(callback)             → wildcard, fires on every change
+   *   subscribe('key', callback)      → fires when 'key' changes
+   *   subscribe(['a','b'], callback)  → fires when any listed key changes
+   *
+   * @param {string|string[]|Function} keyOrFn - state key, array of keys, or function for all changes
    * @param {Function} [fn] - callback (key, value, oldValue)
    * @returns {Function} - unsubscribe
    */
@@ -199,6 +207,16 @@ class Store {
       return () => this._wildcards.delete(keyOrFn);
     }
 
+    // Multi-key subscription: subscribe(['files', 'isProcessing'], callback)
+    if (Array.isArray(keyOrFn)) {
+      const keys = keyOrFn;
+      const handler = (key, value, old) => {
+        if (keys.includes(key)) fn(key, value, old);
+      };
+      this._wildcards.add(handler);
+      return () => this._wildcards.delete(handler);
+    }
+
     if (!this._subscribers.has(keyOrFn)) {
       this._subscribers.set(keyOrFn, new Set());
     }
@@ -270,3 +288,31 @@ export function createStore(name, config) {
 export function getStore(name = 'default') {
   return _stores.get(name) || null;
 }
+
+
+// ---------------------------------------------------------------------------
+// Store-Component Connector
+// ---------------------------------------------------------------------------
+
+/**
+ * Create a store connector descriptor for use in component definitions.
+ * When used in a component's `stores` config, auto-subscribes to the
+ * listed keys on mount and cleans up on destroy.
+ *
+ * Usage:
+ *   $.component('my-comp', {
+ *     stores: {
+ *       app: connectStore(appStore, ['files', 'isProcessing']),
+ *     },
+ *     render() {
+ *       return `<div>${this.stores.app.files.length} files</div>`;
+ *     }
+ *   });
+ *
+ * @param {Store} store - the store instance to connect
+ * @param {string[]} keys - state keys to sync
+ * @returns {{ _zqConnector: true, store: Store, keys: string[] }}
+ */
+export function connectStore(store, keys) {
+  return { _zqConnector: true, store, keys };
+}

package/tests/cli.test.js

@@ -1021,3 +1021,83 @@ describe('CLI - createProject', () => {
     spy.mockRestore();
   });
 });
+
+
+// ===========================================================================
+// minifyTemplateLiterals - regex literal awareness
+// ===========================================================================
+
+describe('CLI - minifyTemplateLiterals regex handling', () => {
+  let minifyTemplateLiterals;
+
+  beforeEach(async () => {
+    const mod = await import('../cli/commands/bundle.js');
+    minifyTemplateLiterals = mod.minifyTemplateLiterals;
+  });
+
+  it('preserves code after regex containing backtick characters', () => {
+    // Simulates: h = h.replace(/`([^`]+)`/g, '<code>$1</code>');
+    // The backtick inside the regex must not be mistaken for a template literal.
+    const input = "h = h.replace(/\x60([^\x60]+)\x60/g, '<code>$1</code>');\nreturn h;";
+    const result = minifyTemplateLiterals(input);
+    expect(result).toContain('return h');
+    expect(result).toContain('<code>$1</code>');
+  });
+
+  it('does not eat closing braces after backtick-in-regex', () => {
+    const input = [
+      "var fmt = {",
+      "  md(raw) {",
+      "    let h = raw;",
+      "    h = h.replace(/\x60([^\x60]+)\x60/g, '<code>$1</code>');",
+      "    h = h.replace(/^[\\-\\*] (.+)$/gm, '<li>$1</li>');",
+      "    return h;",
+      "  }",
+      "};",
+      "var canvas = document.getElementById('bg-canvas');",
+    ].join('\n');
+    const result = minifyTemplateLiterals(input);
+    expect(result).toContain('return h;');
+    expect(result).toContain('};');
+    expect(result).toContain("getElementById('bg-canvas')");
+  });
+
+  it('handles regex with single backtick', () => {
+    const input = "x.replace(/\x60/g, \"'\");\nvar y = 1;";
+    const result = minifyTemplateLiterals(input);
+    expect(result).toContain('var y = 1');
+  });
+
+  it('handles regex backtick in character class', () => {
+    const input = "x.match(/[\x60'\"]/g);\nvar z = 2;";
+    const result = minifyTemplateLiterals(input);
+    expect(result).toContain('var z = 2');
+  });
+
+  it('does not confuse division operator with regex', () => {
+    // After a number or identifier, / is division, not regex start
+    const input = "var x = a / b;\nvar t = \x60hello\x60;";
+    const result = minifyTemplateLiterals(input);
+    expect(result).toContain('a / b');
+    expect(result).toContain('\x60hello\x60');
+  });
+
+  it('still minifies real template literals correctly', () => {
+    const input = "var html = \x60<div>  <span>  text  </span>  </div>\x60;";
+    const result = minifyTemplateLiterals(input);
+    // Template whitespace should be collapsed
+    expect(result).not.toContain('  <span>  ');
+  });
+
+  it('handles regex after return keyword', () => {
+    const input = "return /\x60test\x60/g;\nvar after = 1;";
+    const result = minifyTemplateLiterals(input);
+    expect(result).toContain('var after = 1');
+  });
+
+  it('handles regex after assignment operator', () => {
+    const input = "var re = /\x60([^\x60]+)\x60/gi;\nvar next = true;";
+    const result = minifyTemplateLiterals(input);
+    expect(result).toContain('var next = true');
+  });
+});