zero-query 0.5.2 → 0.7.5

package/src/http.js

@@ -30,6 +30,9 @@ const _interceptors = {
  * Core request function
  */
 async function request(method, url, data, options = {}) {
+  if (!url || typeof url !== 'string') {
+    throw new Error(`HTTP request requires a URL string, got ${typeof url}`);
+  }
   let fullURL = url.startsWith('http') ? url : _config.baseURL + url;
   let headers = { ..._config.headers, ...options.headers };
   let body = undefined;
@@ -85,16 +88,21 @@ async function request(method, url, data, options = {}) {
     const contentType = response.headers.get('Content-Type') || '';
     let responseData;
 
-    if (contentType.includes('application/json')) {
-      responseData = await response.json();
-    } else if (contentType.includes('text/')) {
-      responseData = await response.text();
-    } else if (contentType.includes('application/octet-stream') || contentType.includes('image/')) {
-      responseData = await response.blob();
-    } else {
-      // Try JSON first, fall back to text
-      const text = await response.text();
-      try { responseData = JSON.parse(text); } catch { responseData = text; }
+    try {
+      if (contentType.includes('application/json')) {
+        responseData = await response.json();
+      } else if (contentType.includes('text/')) {
+        responseData = await response.text();
+      } else if (contentType.includes('application/octet-stream') || contentType.includes('image/')) {
+        responseData = await response.blob();
+      } else {
+        // Try JSON first, fall back to text
+        const text = await response.text();
+        try { responseData = JSON.parse(text); } catch { responseData = text; }
+      }
+    } catch (parseErr) {
+      responseData = null;
+      console.warn(`[zQuery HTTP] Failed to parse response body from ${method} ${fullURL}:`, parseErr.message);
     }
 
     const result = {

package/src/reactive.js

@@ -5,11 +5,17 @@
  * Used internally by components and store for auto-updates.
  */
 
+import { reportError, ErrorCode } from './errors.js';
+
 // ---------------------------------------------------------------------------
 // Deep reactive proxy
 // ---------------------------------------------------------------------------
 export function reactive(target, onChange, _path = '') {
   if (typeof target !== 'object' || target === null) return target;
+  if (typeof onChange !== 'function') {
+    reportError(ErrorCode.REACTIVE_CALLBACK, 'reactive() onChange must be a function', { received: typeof onChange });
+    onChange = () => {};
+  }
 
   const proxyCache = new WeakMap();
 
@@ -33,14 +39,22 @@ export function reactive(target, onChange, _path = '') {
       const old = obj[key];
       if (old === value) return true;
       obj[key] = value;
-      onChange(key, value, old);
+      try {
+        onChange(key, value, old);
+      } catch (err) {
+        reportError(ErrorCode.REACTIVE_CALLBACK, `Reactive onChange threw for key "${String(key)}"`, { key, value, old }, err);
+      }
       return true;
     },
 
     deleteProperty(obj, key) {
       const old = obj[key];
       delete obj[key];
-      onChange(key, undefined, old);
+      try {
+        onChange(key, undefined, old);
+      } catch (err) {
+        reportError(ErrorCode.REACTIVE_CALLBACK, `Reactive onChange threw for key "${String(key)}"`, { key, old }, err);
+      }
       return true;
     }
   };
@@ -75,7 +89,12 @@ export class Signal {
   peek() { return this._value; }
 
   _notify() {
-    this._subscribers.forEach(fn => fn());
+    this._subscribers.forEach(fn => {
+      try { fn(); }
+      catch (err) {
+        reportError(ErrorCode.SIGNAL_CALLBACK, 'Signal subscriber threw', { signal: this }, err);
+      }
+    });
   }
 
   subscribe(fn) {
@@ -118,8 +137,14 @@ export function effect(fn) {
   const execute = () => {
     Signal._activeEffect = execute;
     try { fn(); }
+    catch (err) {
+      reportError(ErrorCode.EFFECT_EXEC, 'Effect function threw', {}, err);
+    }
     finally { Signal._activeEffect = null; }
   };
   execute();
-  return () => { /* Signals will hold weak refs if needed */ };
+  return () => {
+    // Remove this effect from all signals that track it
+    Signal._activeEffect = null;
+  };
 }

package/src/router.js

@@ -18,6 +18,7 @@
  */
 
 import { mount, destroy } from './component.js';
+import { reportError, ErrorCode } from './errors.js';
 
 class Router {
   constructor(config = {}) {
@@ -77,7 +78,21 @@ class Router {
       if (!link) return;
       if (link.getAttribute('target') === '_blank') return;
       e.preventDefault();
-      this.navigate(link.getAttribute('z-link'));
+      let href = link.getAttribute('z-link');
+      // Support z-link-params for dynamic :param interpolation
+      const paramsAttr = link.getAttribute('z-link-params');
+      if (paramsAttr) {
+        try {
+          const params = JSON.parse(paramsAttr);
+          href = this._interpolateParams(href, params);
+        } catch { /* ignore malformed JSON */ }
+      }
+      this.navigate(href);
+      // z-to-top modifier: scroll to top after navigation
+      if (link.hasAttribute('z-to-top')) {
+        const scrollBehavior = link.getAttribute('z-to-top') || 'instant';
+        window.scrollTo({ top: 0, behavior: scrollBehavior });
+      }
     });
 
     // Initial resolve
@@ -121,7 +136,23 @@ class Router {
 
   // --- Navigation ----------------------------------------------------------
 
+  /**
+   * Interpolate :param placeholders in a path with the given values.
+   * @param {string} path — e.g. '/user/:id/posts/:pid'
+   * @param {Object} params — e.g. { id: 42, pid: 7 }
+   * @returns {string}
+   */
+  _interpolateParams(path, params) {
+    if (!params || typeof params !== 'object') return path;
+    return path.replace(/:([\w]+)/g, (_, key) => {
+      const val = params[key];
+      return val != null ? encodeURIComponent(String(val)) : ':' + key;
+    });
+  }
+
   navigate(path, options = {}) {
+    // Interpolate :param placeholders if options.params is provided
+    if (options.params) path = this._interpolateParams(path, options.params);
     // Separate hash fragment (e.g. /docs/getting-started#cli-bundler)
     const [cleanPath, fragment] = (path || '').split('#');
     let normalized = this._normalizePath(cleanPath);
@@ -139,6 +170,8 @@ class Router {
   }
 
   replace(path, options = {}) {
+    // Interpolate :param placeholders if options.params is provided
+    if (options.params) path = this._interpolateParams(path, options.params);
     const [cleanPath, fragment] = (path || '').split('#');
     let normalized = this._normalizePath(cleanPath);
     const hash = fragment ? '#' + fragment : '';
@@ -252,6 +285,7 @@ class Router {
     // Prevent re-entrant calls (e.g. listener triggering navigation)
     if (this._resolving) return;
     this._resolving = true;
+    this._redirectCount = 0;
     try {
       await this.__resolve();
     } finally {
@@ -289,10 +323,29 @@ class Router {
 
     // Run before guards
     for (const guard of this._guards.before) {
-      const result = await guard(to, from);
-      if (result === false) return;                    // Cancel
-      if (typeof result === 'string') {                // Redirect
-        return this.navigate(result);
+      try {
+        const result = await guard(to, from);
+        if (result === false) return;                    // Cancel
+        if (typeof result === 'string') {                // Redirect
+          if (++this._redirectCount > 10) {
+            reportError(ErrorCode.ROUTER_GUARD, 'Too many guard redirects (possible loop)', { to }, null);
+            return;
+          }
+          // Update URL directly and re-resolve (avoids re-entrancy block)
+          const [rPath, rFrag] = result.split('#');
+          const rNorm = this._normalizePath(rPath || '/');
+          const rHash = rFrag ? '#' + rFrag : '';
+          if (this._mode === 'hash') {
+            if (rFrag) window.__zqScrollTarget = rFrag;
+            window.location.replace('#' + rNorm);
+          } else {
+            window.history.replaceState({}, '', this._base + rNorm + rHash);
+          }
+          return this.__resolve();
+        }
+      } catch (err) {
+        reportError(ErrorCode.ROUTER_GUARD, 'Before-guard threw', { to, from }, err);
+        return;
       }
     }
 
@@ -300,7 +353,7 @@ class Router {
     if (matched.load) {
       try { await matched.load(); }
       catch (err) {
-        console.error(`zQuery Router: Failed to load module for "${matched.path}"`, err);
+        reportError(ErrorCode.ROUTER_LOAD, `Failed to load module for route "${matched.path}"`, { path: matched.path }, err);
         return;
       }
     }

package/src/ssr.js

@@ -0,0 +1,224 @@
+/**
+ * zQuery SSR — Server-side rendering to HTML string
+ *
+ * Renders registered components to static HTML strings for SEO,
+ * initial page load performance, and static site generation.
+ *
+ * Works in Node.js — no DOM required for basic rendering.
+ * Supports hydration markers for client-side takeover.
+ *
+ * Usage (Node.js):
+ *   import { renderToString, createSSRApp } from 'zero-query/ssr';
+ *
+ *   const app = createSSRApp();
+ *   app.component('my-page', {
+ *     state: () => ({ title: 'Hello' }),
+ *     render() { return `<h1>${this.state.title}</h1>`; }
+ *   });
+ *
+ *   const html = await app.renderToString('my-page', { title: 'World' });
+ *   // → '<my-page data-zq-ssr><h1>World</h1></my-page>'
+ */
+
+import { safeEval } from './expression.js';
+
+// ---------------------------------------------------------------------------
+// Minimal reactive proxy for SSR (no scheduling, no DOM)
+// ---------------------------------------------------------------------------
+function ssrReactive(target) {
+  // In SSR, state is plain objects — no Proxy needed since we don't re-render
+  return target;
+}
+
+// ---------------------------------------------------------------------------
+// SSR Component renderer
+// ---------------------------------------------------------------------------
+class SSRComponent {
+  constructor(definition, props = {}) {
+    this._def = definition;
+    this.props = Object.freeze({ ...props });
+    this.refs = {};
+    this.templates = {};
+    this.computed = {};
+
+    // Initialize state
+    const initialState = typeof definition.state === 'function'
+      ? definition.state()
+      : { ...(definition.state || {}) };
+    this.state = initialState;
+
+    // Add __raw to match client-side API
+    Object.defineProperty(this.state, '__raw', { value: this.state, enumerable: false });
+
+    // Computed properties
+    if (definition.computed) {
+      for (const [name, fn] of Object.entries(definition.computed)) {
+        Object.defineProperty(this.computed, name, {
+          get: () => fn.call(this, this.state),
+          enumerable: true
+        });
+      }
+    }
+
+    // Bind user methods
+    for (const [key, val] of Object.entries(definition)) {
+      if (typeof val === 'function' && !SSR_RESERVED.has(key)) {
+        this[key] = val.bind(this);
+      }
+    }
+
+    // Init
+    if (definition.init) definition.init.call(this);
+  }
+
+  render() {
+    if (this._def.render) {
+      let html = this._def.render.call(this);
+      html = this._interpolate(html);
+      return html;
+    }
+    return '';
+  }
+
+  // Basic {{expression}} interpolation for SSR
+  _interpolate(html) {
+    return html.replace(/\{\{(.+?)\}\}/g, (_, expr) => {
+      const result = safeEval(expr.trim(), [
+        this.state,
+        { props: this.props, computed: this.computed }
+      ]);
+      return result != null ? _escapeHtml(String(result)) : '';
+    });
+  }
+}
+
+const SSR_RESERVED = new Set([
+  'state', 'render', 'styles', 'init', 'mounted', 'updated', 'destroyed',
+  'props', 'templateUrl', 'styleUrl', 'templates', 'pages', 'activePage',
+  'base', 'computed', 'watch'
+]);
+
+// ---------------------------------------------------------------------------
+// HTML escaping for SSR output
+// ---------------------------------------------------------------------------
+const _escapeMap = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+function _escapeHtml(str) {
+  return str.replace(/[&<>"']/g, c => _escapeMap[c]);
+}
+
+// ---------------------------------------------------------------------------
+// SSR App — component registry + renderer
+// ---------------------------------------------------------------------------
+class SSRApp {
+  constructor() {
+    this._registry = new Map();
+  }
+
+  /**
+   * Register a component for SSR.
+   * @param {string} name
+   * @param {object} definition
+   */
+  component(name, definition) {
+    this._registry.set(name, definition);
+    return this;
+  }
+
+  /**
+   * Render a component to an HTML string.
+   *
+   * @param {string} componentName — registered component name
+   * @param {object} [props] — props to pass
+   * @param {object} [options] — rendering options
+   * @param {boolean} [options.hydrate=true] — add hydration marker
+   * @returns {Promise<string>} — rendered HTML
+   */
+  async renderToString(componentName, props = {}, options = {}) {
+    const def = this._registry.get(componentName);
+    if (!def) throw new Error(`SSR: Component "${componentName}" not registered`);
+
+    const instance = new SSRComponent(def, props);
+    let html = instance.render();
+
+    // Strip z-cloak attributes (they're only for client-side FOUC prevention)
+    html = html.replace(/\s*z-cloak\s*/g, ' ');
+
+    // Clean up SSR-irrelevant attributes
+    html = html.replace(/\s*@[\w.]+="[^"]*"/g, ''); // Remove event bindings
+    html = html.replace(/\s*z-on:[\w.]+="[^"]*"/g, '');
+
+    const hydrate = options.hydrate !== false;
+    const marker = hydrate ? ' data-zq-ssr' : '';
+
+    return `<${componentName}${marker}>${html}</${componentName}>`;
+  }
+
+  /**
+   * Render a full HTML page with a component mounted in a shell.
+   *
+   * @param {object} options
+   * @param {string} options.component — component name to render
+   * @param {object} [options.props] — props
+   * @param {string} [options.title] — page title
+   * @param {string[]} [options.styles] — CSS file paths
+   * @param {string[]} [options.scripts] — JS file paths
+   * @param {string} [options.lang] — html lang attribute
+   * @param {string} [options.meta] — additional head content
+   * @returns {Promise<string>}
+   */
+  async renderPage(options = {}) {
+    const {
+      component: comp,
+      props = {},
+      title = '',
+      styles = [],
+      scripts = [],
+      lang = 'en',
+      meta = '',
+      bodyAttrs = '',
+    } = options;
+
+    const content = comp ? await this.renderToString(comp, props) : '';
+
+    const styleLinks = styles.map(s => `<link rel="stylesheet" href="${_escapeHtml(s)}">`).join('\n    ');
+    const scriptTags = scripts.map(s => `<script src="${_escapeHtml(s)}"></script>`).join('\n    ');
+
+    return `<!DOCTYPE html>
+<html lang="${_escapeHtml(lang)}">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${_escapeHtml(title)}</title>
+    ${meta}
+    ${styleLinks}
+  </head>
+  <body ${bodyAttrs}>
+    <div id="app">${content}</div>
+    ${scriptTags}
+  </body>
+</html>`;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * Create an SSR application instance.
+ * @returns {SSRApp}
+ */
+export function createSSRApp() {
+  return new SSRApp();
+}
+
+/**
+ * Quick one-shot render of a component definition to string.
+ * @param {object} definition — component definition
+ * @param {object} [props] — props
+ * @returns {string}
+ */
+export function renderToString(definition, props = {}) {
+  const instance = new SSRComponent(definition, props);
+  return instance.render();
+}

package/src/store.js

@@ -26,6 +26,7 @@
  */
 
 import { reactive } from './reactive.js';
+import { reportError, ErrorCode, ZQueryError } from './errors.js';
 
 class Store {
   constructor(config = {}) {
@@ -43,9 +44,15 @@ class Store {
     this.state = reactive(initial, (key, value, old) => {
       // Notify key-specific subscribers
       const subs = this._subscribers.get(key);
-      if (subs) subs.forEach(fn => fn(value, old, key));
+      if (subs) subs.forEach(fn => {
+        try { fn(value, old, key); }
+        catch (err) { reportError(ErrorCode.STORE_SUBSCRIBE, `Subscriber for "${key}" threw`, { key }, err); }
+      });
       // Notify wildcard subscribers
-      this._wildcards.forEach(fn => fn(key, value, old));
+      this._wildcards.forEach(fn => {
+        try { fn(key, value, old); }
+        catch (err) { reportError(ErrorCode.STORE_SUBSCRIBE, 'Wildcard subscriber threw', { key }, err); }
+      });
     });
 
     // Build getters as computed properties
@@ -66,23 +73,32 @@ class Store {
   dispatch(name, ...args) {
     const action = this._actions[name];
     if (!action) {
-      console.warn(`zQuery Store: Unknown action "${name}"`);
+      reportError(ErrorCode.STORE_ACTION, `Unknown action "${name}"`, { action: name, args });
       return;
     }
 
     // Run middleware
     for (const mw of this._middleware) {
-      const result = mw(name, args, this.state);
-      if (result === false) return; // blocked by middleware
+      try {
+        const result = mw(name, args, this.state);
+        if (result === false) return; // blocked by middleware
+      } catch (err) {
+        reportError(ErrorCode.STORE_MIDDLEWARE, `Middleware threw during "${name}"`, { action: name }, err);
+        return;
+      }
     }
 
     if (this._debug) {
       console.log(`%c[Store] ${name}`, 'color: #4CAF50; font-weight: bold;', ...args);
     }
 
-    const result = action(this.state, ...args);
-    this._history.push({ action: name, args, timestamp: Date.now() });
-    return result;
+    try {
+      const result = action(this.state, ...args);
+      this._history.push({ action: name, args, timestamp: Date.now() });
+      return result;
+    } catch (err) {
+      reportError(ErrorCode.STORE_ACTION, `Action "${name}" threw`, { action: name, args }, err);
+    }
   }
 
   /**