zero-query 0.9.0 → 0.9.1

package/tests/ssr.test.js

@@ -0,0 +1,261 @@
+import { describe, it, expect } from 'vitest';
+import { createSSRApp, renderToString } from '../src/ssr.js';
+
+
+// ---------------------------------------------------------------------------
+// createSSRApp
+// ---------------------------------------------------------------------------
+
+describe('createSSRApp', () => {
+  it('returns an SSRApp instance', () => {
+    const app = createSSRApp();
+    expect(app).toBeDefined();
+    expect(typeof app.component).toBe('function');
+    expect(typeof app.renderToString).toBe('function');
+    expect(typeof app.renderPage).toBe('function');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// component registration
+// ---------------------------------------------------------------------------
+
+describe('SSRApp — component', () => {
+  it('registers a component and returns self for chaining', () => {
+    const app = createSSRApp();
+    const result = app.component('my-comp', {
+      render() { return '<div>hello</div>'; }
+    });
+    expect(result).toBe(app);
+  });
+
+  it('throws when rendering unregistered component', async () => {
+    const app = createSSRApp();
+    await expect(app.renderToString('nonexistent')).rejects.toThrow('not registered');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// renderToString (app method)
+// ---------------------------------------------------------------------------
+
+describe('SSRApp — renderToString', () => {
+  it('renders basic component', async () => {
+    const app = createSSRApp();
+    app.component('my-page', {
+      state: () => ({ title: 'Hello' }),
+      render() { return `<h1>${this.state.title}</h1>`; }
+    });
+    const html = await app.renderToString('my-page');
+    expect(html).toContain('<h1>Hello</h1>');
+  });
+
+  it('adds hydration marker by default', async () => {
+    const app = createSSRApp();
+    app.component('my-comp', { render() { return '<p>test</p>'; } });
+    const html = await app.renderToString('my-comp');
+    expect(html).toContain('data-zq-ssr');
+  });
+
+  it('omits hydration marker when hydrate=false', async () => {
+    const app = createSSRApp();
+    app.component('my-comp', { render() { return '<p>test</p>'; } });
+    const html = await app.renderToString('my-comp', {}, { hydrate: false });
+    expect(html).not.toContain('data-zq-ssr');
+  });
+
+  it('wraps output in component tag', async () => {
+    const app = createSSRApp();
+    app.component('custom-tag', { render() { return '<span>ok</span>'; } });
+    const html = await app.renderToString('custom-tag');
+    expect(html).toMatch(/^<custom-tag[^>]*>.*<\/custom-tag>$/);
+  });
+
+  it('passes props to component', async () => {
+    const app = createSSRApp();
+    app.component('greet', {
+      render() { return `<span>${this.props.name}</span>`; }
+    });
+    const html = await app.renderToString('greet', { name: 'World' });
+    expect(html).toContain('World');
+  });
+
+  it('strips z-cloak attributes', async () => {
+    const app = createSSRApp();
+    app.component('my-comp', {
+      render() { return '<div z-cloak>content</div>'; }
+    });
+    const html = await app.renderToString('my-comp');
+    expect(html).not.toContain('z-cloak');
+    expect(html).toContain('content');
+  });
+
+  it('strips event bindings (@click, z-on:click)', async () => {
+    const app = createSSRApp();
+    app.component('my-comp', {
+      render() { return '<button @click="handle">Click</button>'; }
+    });
+    const html = await app.renderToString('my-comp');
+    expect(html).not.toContain('@click');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// renderToString (standalone function)
+// ---------------------------------------------------------------------------
+
+describe('renderToString (standalone)', () => {
+  it('renders a definition directly', () => {
+    const html = renderToString({
+      state: () => ({ msg: 'hi' }),
+      render() { return `<p>${this.state.msg}</p>`; }
+    });
+    expect(html).toContain('<p>hi</p>');
+  });
+
+  it('returns empty string when no render function', () => {
+    const html = renderToString({ state: {} });
+    expect(html).toBe('');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// State factory
+// ---------------------------------------------------------------------------
+
+describe('SSR — state factory', () => {
+  it('calls state function for initial state', async () => {
+    const app = createSSRApp();
+    let callCount = 0;
+    app.component('comp', {
+      state: () => { callCount++; return { x: 1 }; },
+      render() { return `<div>${this.state.x}</div>`; }
+    });
+    await app.renderToString('comp');
+    expect(callCount).toBe(1);
+  });
+
+  it('supports state as object (copied)', async () => {
+    const app = createSSRApp();
+    const shared = { x: 1 };
+    app.component('comp', {
+      state: shared,
+      render() { return `<div>${this.state.x}</div>`; }
+    });
+    const html = await app.renderToString('comp');
+    expect(html).toContain('1');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Computed properties
+// ---------------------------------------------------------------------------
+
+describe('SSR — computed', () => {
+  it('computes derived values', async () => {
+    const app = createSSRApp();
+    app.component('comp', {
+      state: () => ({ first: 'Jane', last: 'Doe' }),
+      computed: {
+        full(state) { return `${state.first} ${state.last}`; }
+      },
+      render() { return `<span>${this.computed.full}</span>`; }
+    });
+    const html = await app.renderToString('comp');
+    expect(html).toContain('Jane Doe');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Init lifecycle
+// ---------------------------------------------------------------------------
+
+describe('SSR — init lifecycle', () => {
+  it('calls init() during construction', () => {
+    let initCalled = false;
+    renderToString({
+      init() { initCalled = true; },
+      render() { return '<div></div>'; }
+    });
+    expect(initCalled).toBe(true);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// XSS sanitization via _escapeHtml
+// ---------------------------------------------------------------------------
+
+describe('SSR — XSS sanitization', () => {
+  it('escapes HTML in renderPage title', async () => {
+    const app = createSSRApp();
+    const html = await app.renderPage({ title: '<script>alert("xss")</script>' });
+    expect(html).not.toContain('<script>alert("xss")</script>');
+    expect(html).toContain('&lt;script&gt;');
+  });
+
+  it('escapes script paths in renderPage', async () => {
+    const app = createSSRApp();
+    const html = await app.renderPage({ scripts: ['"><script>alert(1)</script>'] });
+    expect(html).toContain('&quot;');
+  });
+
+  it('strips onXxx attributes from bodyAttrs', async () => {
+    const app = createSSRApp();
+    const html = await app.renderPage({ bodyAttrs: 'onclick="alert(1)"' });
+    expect(html).not.toContain('onclick');
+  });
+
+  it('strips javascript: from bodyAttrs', async () => {
+    const app = createSSRApp();
+    const html = await app.renderPage({ bodyAttrs: 'data-x="javascript:void(0)"' });
+    expect(html).not.toContain('javascript:');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// renderPage
+// ---------------------------------------------------------------------------
+
+describe('SSRApp — renderPage', () => {
+  it('renders a full HTML page', async () => {
+    const app = createSSRApp();
+    app.component('page', { render() { return '<h1>Home</h1>'; } });
+    const html = await app.renderPage({
+      component: 'page',
+      title: 'My App',
+      lang: 'en'
+    });
+    expect(html).toContain('<!DOCTYPE html>');
+    expect(html).toContain('<title>My App</title>');
+    expect(html).toContain('<h1>Home</h1>');
+    expect(html).toContain('lang="en"');
+  });
+
+  it('renders without component', async () => {
+    const app = createSSRApp();
+    const html = await app.renderPage({ title: 'Empty' });
+    expect(html).toContain('<title>Empty</title>');
+    expect(html).toContain('<div id="app"></div>');
+  });
+
+  it('includes style links', async () => {
+    const app = createSSRApp();
+    const html = await app.renderPage({ styles: ['style.css', 'theme.css'] });
+    expect(html).toContain('href="style.css"');
+    expect(html).toContain('href="theme.css"');
+  });
+
+  it('includes script tags', async () => {
+    const app = createSSRApp();
+    const html = await app.renderPage({ scripts: ['app.js'] });
+    expect(html).toContain('src="app.js"');
+  });
+});

package/tests/store.test.js

@@ -377,3 +377,213 @@ describe('Store — complex getters', () => {
     expect(store.getters.doubled).toBe(20);
   });
 });
+
+
+// ---------------------------------------------------------------------------
+// PERF: history trim uses splice (in-place) instead of slice (copy)
+// ---------------------------------------------------------------------------
+
+describe('Store — history trim in-place', () => {
+  it('trims history to maxHistory without exceeding', () => {
+    const store = createStore('hist-trim', {
+      state: { n: 0 },
+      actions: { inc(s) { s.n++; } },
+      maxHistory: 5,
+    });
+    for (let i = 0; i < 10; i++) store.dispatch('inc');
+    expect(store.history.length).toBe(5);
+    // Newest actions should survive
+    expect(store.state.n).toBe(10);
+  });
+
+  it('maintains same array identity (splice, not slice)', () => {
+    const store = createStore('hist-identity', {
+      state: { n: 0 },
+      actions: { inc(s) { s.n++; } },
+      maxHistory: 3,
+    });
+    const ref = store._history;
+    for (let i = 0; i < 10; i++) store.dispatch('inc');
+    // splice modifies in-place so the array reference stays the same
+    expect(store._history).toBe(ref);
+    expect(store._history.length).toBe(3);
+  });
+});
+
+
+// ===========================================================================
+// use() — middleware chaining
+// ===========================================================================
+
+describe('Store — use() chaining', () => {
+  it('returns the store for chaining', () => {
+    const store = createStore({
+      state: { x: 0 },
+      actions: { inc(state) { state.x++; } }
+    });
+    const result = store.use(() => {}).use(() => {});
+    expect(result).toBe(store);
+  });
+
+  it('multiple middleware run in order', () => {
+    const order = [];
+    const store = createStore({
+      state: { x: 0 },
+      actions: { inc(state) { state.x++; } }
+    });
+    store.use(() => { order.push('a'); });
+    store.use(() => { order.push('b'); });
+    store.dispatch('inc');
+    expect(order).toEqual(['a', 'b']);
+  });
+
+  it('middleware returning false blocks action', () => {
+    const store = createStore({
+      state: { x: 0 },
+      actions: { inc(state) { state.x++; } }
+    });
+    store.use(() => false);
+    store.dispatch('inc');
+    expect(store.state.x).toBe(0);
+  });
+});
+
+
+// ===========================================================================
+// debug mode
+// ===========================================================================
+
+describe('Store — debug mode', () => {
+  it('logs when debug is true', () => {
+    const spy = vi.spyOn(console, 'log').mockImplementation(() => {});
+    const store = createStore({
+      state: { x: 0 },
+      actions: { inc(state) { state.x++; } },
+      debug: true
+    });
+    store.dispatch('inc');
+    expect(spy).toHaveBeenCalled();
+    const logStr = spy.mock.calls[0].join(' ');
+    expect(logStr).toContain('inc');
+    spy.mockRestore();
+  });
+});
+
+
+// ===========================================================================
+// replaceState
+// ===========================================================================
+
+describe('Store — replaceState', () => {
+  it('replaces all keys', () => {
+    const store = createStore({
+      state: { a: 1, b: 2 }
+    });
+    store.replaceState({ c: 3 });
+    const snap = store.snapshot();
+    expect(snap).not.toHaveProperty('a');
+    expect(snap).not.toHaveProperty('b');
+    expect(snap.c).toBe(3);
+  });
+});
+
+
+// ===========================================================================
+// wildcard subscription
+// ===========================================================================
+
+describe('Store — wildcard subscription', () => {
+  it('fires on any state change', () => {
+    const store = createStore({
+      state: { a: 1, b: 2 },
+      actions: {
+        setA(state, v) { state.a = v; },
+        setB(state, v) { state.b = v; }
+      }
+    });
+    const calls = [];
+    store.subscribe((key, val, old) => calls.push([key, val, old]));
+    store.dispatch('setA', 10);
+    store.dispatch('setB', 20);
+    expect(calls).toEqual([['a', 10, 1], ['b', 20, 2]]);
+  });
+
+  it('unsubscribes wildcard', () => {
+    const store = createStore({
+      state: { a: 1 },
+      actions: { setA(state, v) { state.a = v; } }
+    });
+    const fn = vi.fn();
+    const unsub = store.subscribe(fn);
+    store.dispatch('setA', 2);
+    expect(fn).toHaveBeenCalledTimes(1);
+    unsub();
+    store.dispatch('setA', 3);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+});
+
+
+// ===========================================================================
+// state as factory function
+// ===========================================================================
+
+describe('Store — state factory', () => {
+  it('calls state function for initial state', () => {
+    const store = createStore({
+      state: () => ({ count: 0 })
+    });
+    expect(store.state.count).toBe(0);
+  });
+});
+
+
+// ===========================================================================
+// createStore — named stores
+// ===========================================================================
+
+describe('createStore — named stores', () => {
+  it('creates default store when no name given', () => {
+    const store = createStore({ state: { x: 1 } });
+    expect(store.state.x).toBe(1);
+  });
+
+  it('dispatch unknown action does not throw', () => {
+    const store = createStore({ state: { x: 1 }, actions: {} });
+    expect(() => store.dispatch('nope')).not.toThrow();
+  });
+});
+
+
+// ===========================================================================
+// reset
+// ===========================================================================
+
+describe('Store — reset', () => {
+  it('resets state and clears history', () => {
+    const store = createStore({
+      state: { x: 0 },
+      actions: { inc(state) { state.x++; } }
+    });
+    store.dispatch('inc');
+    store.dispatch('inc');
+    expect(store.state.x).toBe(2);
+    expect(store.history.length).toBe(2);
+    store.reset({ x: 0 });
+    expect(store.state.x).toBe(0);
+    expect(store.history.length).toBe(0);
+  });
+});
+
+
+// ===========================================================================
+// empty config
+// ===========================================================================
+
+describe('Store — empty config', () => {
+  it('creates store with no config', () => {
+    const store = createStore({});
+    expect(store.snapshot()).toEqual({});
+    expect(store.history).toEqual([]);
+  });
+});

package/tests/utils.test.js

@@ -265,6 +265,35 @@ describe('isEqual', () => {
     expect(isEqual(null, {})).toBe(false);
     expect(isEqual({}, null)).toBe(false);
   });
+
+  it('distinguishes arrays from plain objects with same indices', () => {
+    expect(isEqual([1, 2], { 0: 1, 1: 2 })).toBe(false);
+    expect(isEqual({ 0: 'a' }, ['a'])).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// deepMerge — circular reference safety
+// ---------------------------------------------------------------------------
+
+describe('deepMerge — circular reference safety', () => {
+  it('does not infinite-loop on circular source', () => {
+    const a = { x: 1 };
+    const b = { y: 2 };
+    b.self = b; // circular
+    const result = deepMerge(a, b);
+    expect(result.x).toBe(1);
+    expect(result.y).toBe(2);
+    // circular ref is simply not followed again
+  });
+
+  it('does not infinite-loop on circular target', () => {
+    const a = { x: 1 };
+    a.self = a;
+    const b = { y: 2 };
+    const result = deepMerge(a, b);
+    expect(result.y).toBe(2);
+  });
 });
 
 
@@ -510,3 +539,160 @@ describe('bus (EventBus)', () => {
     expect(() => bus.emit('nonexistent')).not.toThrow();
   });
 });
+
+
+// ===========================================================================
+// throttle — window reset
+// ===========================================================================
+
+describe('throttle — edge cases', () => {
+  it('fires trailing call after wait period', async () => {
+    vi.useFakeTimers();
+    const fn = vi.fn();
+    const throttled = throttle(fn, 100);
+
+    throttled('a');             // immediate
+    throttled('b');             // queued
+    expect(fn).toHaveBeenCalledTimes(1);
+
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledTimes(2);
+    expect(fn).toHaveBeenLastCalledWith('b');
+    vi.useRealTimers();
+  });
+});
+
+
+// ===========================================================================
+// deepClone — edge cases
+// ===========================================================================
+
+describe('deepClone — edge cases', () => {
+  it('clones nested arrays', () => {
+    const arr = [[1, 2], [3, 4]];
+    const clone = deepClone(arr);
+    expect(clone).toEqual(arr);
+    clone[0][0] = 99;
+    expect(arr[0][0]).toBe(1);
+  });
+
+  it('handles null values', () => {
+    expect(deepClone({ a: null })).toEqual({ a: null });
+  });
+});
+
+
+// ===========================================================================
+// deepMerge — multiple sources
+// ===========================================================================
+
+describe('deepMerge — edge cases', () => {
+  it('merges from multiple sources', () => {
+    const result = deepMerge({}, { a: 1 }, { b: 2 }, { c: 3 });
+    expect(result).toEqual({ a: 1, b: 2, c: 3 });
+  });
+
+  it('later sources override earlier', () => {
+    const result = deepMerge({}, { a: 1 }, { a: 2 });
+    expect(result).toEqual({ a: 2 });
+  });
+
+  it('handles arrays (replaces, not merges)', () => {
+    const result = deepMerge({}, { arr: [1, 2] }, { arr: [3] });
+    expect(result.arr).toEqual([3]);
+  });
+});
+
+
+// ===========================================================================
+// isEqual — deeply nested
+// ===========================================================================
+
+describe('isEqual — edge cases', () => {
+  it('deeply nested equal objects', () => {
+    expect(isEqual({ a: { b: { c: 1 } } }, { a: { b: { c: 1 } } })).toBe(true);
+  });
+
+  it('arrays of objects', () => {
+    expect(isEqual([{ a: 1 }], [{ a: 1 }])).toBe(true);
+    expect(isEqual([{ a: 1 }], [{ a: 2 }])).toBe(false);
+  });
+
+  it('empty arrays equal', () => {
+    expect(isEqual([], [])).toBe(true);
+  });
+
+  it('null vs object', () => {
+    expect(isEqual(null, { a: 1 })).toBe(false);
+    expect(isEqual({ a: 1 }, null)).toBe(false);
+  });
+
+  it('different types', () => {
+    expect(isEqual('1', 1)).toBe(false);
+  });
+
+  it('array vs object', () => {
+    expect(isEqual([], {})).toBe(false);
+  });
+});
+
+
+// ===========================================================================
+// camelCase / kebabCase — edge cases
+// ===========================================================================
+
+describe('camelCase / kebabCase — edge cases', () => {
+  it('camelCase single word', () => {
+    expect(camelCase('hello')).toBe('hello');
+  });
+
+  it('camelCase already camel', () => {
+    expect(camelCase('helloWorld')).toBe('helloWorld');
+  });
+
+  it('kebabCase single word lowercase', () => {
+    expect(kebabCase('hello')).toBe('hello');
+  });
+
+  it('kebabCase multiple humps', () => {
+    expect(kebabCase('myComponentName')).toBe('my-component-name');
+  });
+});
+
+
+// ===========================================================================
+// html tag — escaping
+// ===========================================================================
+
+describe('html tag — edge cases', () => {
+  it('handles null interp value', () => {
+    const result = html`<div>${null}</div>`;
+    expect(result).toBe('<div></div>');
+  });
+
+  it('handles undefined interp value', () => {
+    const result = html`<div>${undefined}</div>`;
+    expect(result).toBe('<div></div>');
+  });
+
+  it('escapes multiple interpolations', () => {
+    const a = '<b>';
+    const b = '&';
+    const result = html`${a} and ${b}`;
+    expect(result).toContain('&lt;b&gt;');
+    expect(result).toContain('&amp;');
+  });
+});
+
+
+// ===========================================================================
+// storage — error handling
+// ===========================================================================
+
+describe('storage — parse error fallback', () => {
+  it('returns fallback when JSON.parse fails', () => {
+    localStorage.setItem('bad', '{invalid json');
+    expect(storage.get('bad', 'default')).toBe('default');
+    localStorage.removeItem('bad');
+  });
+});

package/types/store.d.ts

@@ -23,6 +23,9 @@ export interface StoreConfig<
 
   /** Log dispatched actions to the console. */
   debug?: boolean;
+
+  /** Maximum number of action history entries to keep (default `1000`). */
+  maxHistory?: number;
 }
 
 /** A store action history entry. */