zero-query 0.5.2 → 0.7.5

package/tests/diff.test.js

@@ -0,0 +1,194 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { morph } from '../src/diff.js';
+
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function el(html) {
+  const div = document.createElement('div');
+  div.innerHTML = html;
+  return div;
+}
+
+function morphAndGet(oldHTML, newHTML) {
+  const root = el(oldHTML);
+  morph(root, newHTML);
+  return root;
+}
+
+
+// ---------------------------------------------------------------------------
+// Basic morphing
+// ---------------------------------------------------------------------------
+
+describe('morph — basic', () => {
+  it('updates text content', () => {
+    const root = morphAndGet('<p>old</p>', '<p>new</p>');
+    expect(root.innerHTML).toBe('<p>new</p>');
+  });
+
+  it('appends new elements', () => {
+    const root = morphAndGet('<p>a</p>', '<p>a</p><p>b</p>');
+    expect(root.children.length).toBe(2);
+    expect(root.children[1].textContent).toBe('b');
+  });
+
+  it('removes extra elements', () => {
+    const root = morphAndGet('<p>a</p><p>b</p>', '<p>a</p>');
+    expect(root.children.length).toBe(1);
+  });
+
+  it('replaces elements with different tag', () => {
+    const root = morphAndGet('<p>text</p>', '<div>text</div>');
+    expect(root.children[0].tagName).toBe('DIV');
+    expect(root.children[0].textContent).toBe('text');
+  });
+
+  it('handles empty to content', () => {
+    const root = morphAndGet('', '<p>hello</p>');
+    expect(root.innerHTML).toBe('<p>hello</p>');
+  });
+
+  it('handles content to empty', () => {
+    const root = morphAndGet('<p>hello</p>', '');
+    expect(root.children.length).toBe(0);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Attribute morphing
+// ---------------------------------------------------------------------------
+
+describe('morph — attributes', () => {
+  it('adds new attributes', () => {
+    const root = morphAndGet('<div></div>', '<div class="active"></div>');
+    expect(root.children[0].className).toBe('active');
+  });
+
+  it('updates existing attributes', () => {
+    const root = morphAndGet('<div class="old"></div>', '<div class="new"></div>');
+    expect(root.children[0].className).toBe('new');
+  });
+
+  it('removes stale attributes', () => {
+    const root = morphAndGet('<div class="x" id="y"></div>', '<div class="x"></div>');
+    expect(root.children[0].hasAttribute('id')).toBe(false);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Keyed reconciliation
+// ---------------------------------------------------------------------------
+
+describe('morph — keyed', () => {
+  it('matches elements by z-key', () => {
+    const root = el('<div z-key="a">A</div><div z-key="b">B</div>');
+    morph(root, '<div z-key="b">B-updated</div><div z-key="a">A-updated</div>');
+    // Keys should match — b first, then a
+    const kids = [...root.children];
+    expect(kids[0].getAttribute('z-key')).toBe('b');
+    expect(kids[0].textContent).toBe('B-updated');
+    expect(kids[1].getAttribute('z-key')).toBe('a');
+    expect(kids[1].textContent).toBe('A-updated');
+  });
+
+  it('removes keyed elements not in new tree', () => {
+    const root = el('<div z-key="a">A</div><div z-key="b">B</div><div z-key="c">C</div>');
+    morph(root, '<div z-key="a">A</div><div z-key="c">C</div>');
+    expect(root.children.length).toBe(2);
+    expect(root.children[0].getAttribute('z-key')).toBe('a');
+    expect(root.children[1].getAttribute('z-key')).toBe('c');
+  });
+
+  it('inserts new keyed elements', () => {
+    const root = el('<div z-key="a">A</div>');
+    morph(root, '<div z-key="a">A</div><div z-key="b">B</div>');
+    expect(root.children.length).toBe(2);
+    expect(root.children[1].getAttribute('z-key')).toBe('b');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Input / form element handling
+// ---------------------------------------------------------------------------
+
+describe('morph — form elements', () => {
+  it('syncs input value', () => {
+    const root = el('<input value="old">');
+    morph(root, '<input value="new">');
+    expect(root.querySelector('input').value).toBe('new');
+  });
+
+  it('syncs checkbox checked state', () => {
+    const root = el('<input type="checkbox">');
+    root.querySelector('input').checked = false;
+    morph(root, '<input type="checkbox" checked>');
+    expect(root.querySelector('input').checked).toBe(true);
+  });
+
+  it('syncs textarea content', () => {
+    const root = el('<textarea>old</textarea>');
+    morph(root, '<textarea>new</textarea>');
+    expect(root.querySelector('textarea').value).toBe('new');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Text and comment nodes
+// ---------------------------------------------------------------------------
+
+describe('morph — text nodes', () => {
+  it('updates text nodes', () => {
+    const root = document.createElement('div');
+    root.textContent = 'old';
+    morph(root, 'new');
+    expect(root.textContent).toBe('new');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Nested children
+// ---------------------------------------------------------------------------
+
+describe('morph — nested', () => {
+  it('recursively morphs nested elements', () => {
+    const root = morphAndGet(
+      '<ul><li>a</li><li>b</li></ul>',
+      '<ul><li>a</li><li>b-updated</li><li>c</li></ul>'
+    );
+    const items = root.querySelectorAll('li');
+    expect(items.length).toBe(3);
+    expect(items[1].textContent).toBe('b-updated');
+    expect(items[2].textContent).toBe('c');
+  });
+
+  it('handles structure change in nested elements', () => {
+    const root = morphAndGet(
+      '<div><span>text</span></div>',
+      '<div><p>new text</p></div>'
+    );
+    expect(root.querySelector('p').textContent).toBe('new text');
+    expect(root.querySelector('span')).toBeNull();
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Preserves unchanged nodes (identity)
+// ---------------------------------------------------------------------------
+
+describe('morph — preservation', () => {
+  it('does not replace elements that have not changed', () => {
+    const root = el('<p>same</p><p>will-change</p>');
+    const firstP = root.children[0];
+    morph(root, '<p>same</p><p>changed</p>');
+    expect(root.children[0]).toBe(firstP); // same DOM node
+    expect(root.children[1].textContent).toBe('changed');
+  });
+});

package/tests/errors.test.js

@@ -0,0 +1,162 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { ZQueryError, ErrorCode, onError, reportError, guardCallback, validate } from '../src/errors.js';
+
+
+// ---------------------------------------------------------------------------
+// ZQueryError
+// ---------------------------------------------------------------------------
+
+describe('ZQueryError', () => {
+  it('extends Error', () => {
+    const err = new ZQueryError(ErrorCode.INVALID_ARGUMENT, 'test msg');
+    expect(err).toBeInstanceOf(Error);
+    expect(err).toBeInstanceOf(ZQueryError);
+  });
+
+  it('sets code, message, and context', () => {
+    const err = new ZQueryError(ErrorCode.COMP_RENDER, 'render failed', { component: 'my-app' });
+    expect(err.code).toBe('ZQ_COMP_RENDER');
+    expect(err.message).toBe('render failed');
+    expect(err.context.component).toBe('my-app');
+    expect(err.name).toBe('ZQueryError');
+  });
+
+  it('stores cause', () => {
+    const cause = new Error('original');
+    const err = new ZQueryError(ErrorCode.HTTP_REQUEST, 'http error', {}, cause);
+    expect(err.cause).toBe(cause);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// ErrorCode
+// ---------------------------------------------------------------------------
+
+describe('ErrorCode', () => {
+  it('is frozen', () => {
+    expect(Object.isFrozen(ErrorCode)).toBe(true);
+  });
+
+  it('contains expected codes', () => {
+    expect(ErrorCode.REACTIVE_CALLBACK).toBe('ZQ_REACTIVE_CALLBACK');
+    expect(ErrorCode.EXPR_PARSE).toBe('ZQ_EXPR_PARSE');
+    expect(ErrorCode.COMP_NOT_FOUND).toBe('ZQ_COMP_NOT_FOUND');
+    expect(ErrorCode.STORE_ACTION).toBe('ZQ_STORE_ACTION');
+    expect(ErrorCode.HTTP_REQUEST).toBe('ZQ_HTTP_REQUEST');
+    expect(ErrorCode.ROUTER_LOAD).toBe('ZQ_ROUTER_LOAD');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// onError / reportError
+// ---------------------------------------------------------------------------
+
+describe('reportError', () => {
+  let errorSpy;
+  beforeEach(() => {
+    onError(null); // reset handler
+    errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    errorSpy.mockRestore();
+    onError(null);
+  });
+
+  it('logs to console.error', () => {
+    reportError(ErrorCode.STORE_ACTION, 'test error', { action: 'foo' });
+    expect(errorSpy).toHaveBeenCalledOnce();
+    expect(errorSpy.mock.calls[0][0]).toContain('ZQ_STORE_ACTION');
+  });
+
+  it('calls global error handler', () => {
+    const handler = vi.fn();
+    onError(handler);
+    reportError(ErrorCode.COMP_RENDER, 'render failed');
+    expect(handler).toHaveBeenCalledOnce();
+    const err = handler.mock.calls[0][0];
+    expect(err).toBeInstanceOf(ZQueryError);
+    expect(err.code).toBe('ZQ_COMP_RENDER');
+  });
+
+  it('does not crash if handler throws', () => {
+    onError(() => { throw new Error('handler error'); });
+    expect(() => reportError(ErrorCode.COMP_RENDER, 'test')).not.toThrow();
+  });
+
+  it('passes cause through', () => {
+    const handler = vi.fn();
+    onError(handler);
+    const cause = new Error('root cause');
+    reportError(ErrorCode.HTTP_REQUEST, 'http failed', {}, cause);
+    expect(handler.mock.calls[0][0].cause).toBe(cause);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// guardCallback
+// ---------------------------------------------------------------------------
+
+describe('guardCallback', () => {
+  let errorSpy;
+  beforeEach(() => {
+    onError(null);
+    errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    errorSpy.mockRestore();
+  });
+
+  it('returns the same value as original function', () => {
+    const guarded = guardCallback((x) => x * 2, ErrorCode.COMP_RENDER);
+    expect(guarded(5)).toBe(10);
+  });
+
+  it('catches errors and reports them', () => {
+    const handler = vi.fn();
+    onError(handler);
+    const guarded = guardCallback(() => { throw new Error('boom'); }, ErrorCode.COMP_RENDER, { component: 'test' });
+    expect(() => guarded()).not.toThrow();
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it('passes arguments through', () => {
+    const guarded = guardCallback((a, b) => a + b, ErrorCode.COMP_RENDER);
+    expect(guarded(1, 2)).toBe(3);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// validate
+// ---------------------------------------------------------------------------
+
+describe('validate', () => {
+  it('passes for valid values', () => {
+    expect(() => validate('hello', 'name', 'string')).not.toThrow();
+    expect(() => validate(42, 'count', 'number')).not.toThrow();
+    expect(() => validate(() => {}, 'fn', 'function')).not.toThrow();
+  });
+
+  it('throws ZQueryError for null', () => {
+    expect(() => validate(null, 'name', 'string')).toThrow(ZQueryError);
+  });
+
+  it('throws ZQueryError for undefined', () => {
+    expect(() => validate(undefined, 'count')).toThrow(ZQueryError);
+  });
+
+  it('throws ZQueryError for wrong type', () => {
+    expect(() => validate(42, 'name', 'string')).toThrow(ZQueryError);
+  });
+
+  it('error has INVALID_ARGUMENT code', () => {
+    try {
+      validate(null, 'param');
+    } catch (err) {
+      expect(err.code).toBe(ErrorCode.INVALID_ARGUMENT);
+    }
+  });
+});

package/tests/expression.test.js

@@ -0,0 +1,334 @@
+import { describe, it, expect } from 'vitest';
+import { safeEval } from '../src/expression.js';
+
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const eval_ = (expr, ...scopes) => safeEval(expr, scopes.length ? scopes : [{}]);
+
+
+// ---------------------------------------------------------------------------
+// Literals
+// ---------------------------------------------------------------------------
+
+describe('expression parser — literals', () => {
+  it('numbers', () => {
+    expect(eval_('42')).toBe(42);
+    expect(eval_('3.14')).toBe(3.14);
+    expect(eval_('0xFF')).toBe(255);
+    expect(eval_('1e3')).toBe(1000);
+  });
+
+  it('strings', () => {
+    expect(eval_("'hello'")).toBe('hello');
+    expect(eval_('"world"')).toBe('world');
+    expect(eval_("'it\\'s'")).toBe("it's");
+  });
+
+  it('booleans and null/undefined', () => {
+    expect(eval_('true')).toBe(true);
+    expect(eval_('false')).toBe(false);
+    expect(eval_('null')).toBe(null);
+    expect(eval_('undefined')).toBe(undefined);
+  });
+
+  it('empty expression returns undefined', () => {
+    expect(eval_('')).toBe(undefined);
+    expect(eval_('   ')).toBe(undefined);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Arithmetic
+// ---------------------------------------------------------------------------
+
+describe('expression parser — arithmetic', () => {
+  it('basic operations', () => {
+    expect(eval_('2 + 3')).toBe(5);
+    expect(eval_('10 - 4')).toBe(6);
+    expect(eval_('3 * 7')).toBe(21);
+    expect(eval_('15 / 3')).toBe(5);
+    expect(eval_('10 % 3')).toBe(1);
+  });
+
+  it('operator precedence', () => {
+    expect(eval_('2 + 3 * 4')).toBe(14);
+    expect(eval_('(2 + 3) * 4')).toBe(20);
+  });
+
+  it('unary operators', () => {
+    expect(eval_('-5')).toBe(-5);
+    expect(eval_('+3')).toBe(3);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Comparison & logical
+// ---------------------------------------------------------------------------
+
+describe('expression parser — comparison', () => {
+  it('equality', () => {
+    expect(eval_('1 === 1')).toBe(true);
+    expect(eval_('1 !== 2')).toBe(true);
+    expect(eval_("1 == '1'")).toBe(true);
+    expect(eval_("1 != '2'")).toBe(true);
+  });
+
+  it('relational', () => {
+    expect(eval_('3 > 2')).toBe(true);
+    expect(eval_('3 < 2')).toBe(false);
+    expect(eval_('3 >= 3')).toBe(true);
+    expect(eval_('3 <= 2')).toBe(false);
+  });
+});
+
+
+describe('expression parser — logical', () => {
+  it('&& and ||', () => {
+    expect(eval_('true && false')).toBe(false);
+    expect(eval_('true || false')).toBe(true);
+    expect(eval_('0 || 42')).toBe(42);
+    expect(eval_("'' || 'default'")).toBe('default');
+  });
+
+  it('!', () => {
+    expect(eval_('!true')).toBe(false);
+    expect(eval_('!false')).toBe(true);
+    expect(eval_('!0')).toBe(true);
+  });
+
+  it('nullish coalescing ??', () => {
+    expect(eval_('null ?? 10')).toBe(10);
+    expect(eval_('undefined ?? 20')).toBe(20);
+    expect(eval_('0 ?? 30')).toBe(0);
+    expect(eval_("'' ?? 'fallback'")).toBe('');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Ternary
+// ---------------------------------------------------------------------------
+
+describe('expression parser — ternary', () => {
+  it('evaluates truthy branch', () => {
+    expect(eval_("true ? 'yes' : 'no'")).toBe('yes');
+  });
+
+  it('evaluates falsy branch', () => {
+    expect(eval_("false ? 'yes' : 'no'")).toBe('no');
+  });
+
+  it('works with expressions', () => {
+    expect(eval_('5 > 3 ? 10 : 20')).toBe(10);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Property access & scope
+// ---------------------------------------------------------------------------
+
+describe('expression parser — property access', () => {
+  it('reads scope variables', () => {
+    expect(eval_('x', { x: 42 })).toBe(42);
+    expect(eval_('name', { name: 'Tony' })).toBe('Tony');
+  });
+
+  it('dot access', () => {
+    expect(eval_('user.name', { user: { name: 'Tony' } })).toBe('Tony');
+  });
+
+  it('computed access', () => {
+    expect(eval_('items[0]', { items: ['a', 'b', 'c'] })).toBe('a');
+    expect(eval_('obj[key]', { obj: { x: 1 }, key: 'x' })).toBe(1);
+  });
+
+  it('optional chaining ?.', () => {
+    expect(eval_('user?.name', { user: null })).toBe(undefined);
+    expect(eval_('user?.name', { user: { name: 'Tony' } })).toBe('Tony');
+  });
+
+  it('returns undefined for missing scope keys', () => {
+    expect(eval_('missing')).toBe(undefined);
+    expect(eval_('a.b.c', { a: {} })).toBe(undefined);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Method calls
+// ---------------------------------------------------------------------------
+
+describe('expression parser — method calls', () => {
+  it('string methods', () => {
+    expect(eval_("'hello'.toUpperCase()")).toBe('HELLO');
+    expect(eval_("'hello world'.split(' ')")).toEqual(['hello', 'world']);
+    expect(eval_("'abc'.includes('b')")).toBe(true);
+  });
+
+  it('array methods', () => {
+    expect(eval_('items.length', { items: [1, 2, 3] })).toBe(3);
+    expect(eval_('items.includes(2)', { items: [1, 2, 3] })).toBe(true);
+    expect(eval_("items.join(',')", { items: [1, 2, 3] })).toBe('1,2,3');
+  });
+
+  it('custom function calls', () => {
+    const add = (a, b) => a + b;
+    expect(eval_('add(1, 2)', { add })).toBe(3);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Built-in globals
+// ---------------------------------------------------------------------------
+
+describe('expression parser — built-in globals', () => {
+  it('Math', () => {
+    expect(eval_('Math.PI')).toBeCloseTo(3.14159);
+    expect(eval_('Math.max(1, 5, 3)')).toBe(5);
+    expect(eval_('Math.abs(-7)')).toBe(7);
+  });
+
+  it('JSON', () => {
+    expect(eval_("JSON.parse('{\"a\":1}')")).toEqual({ a: 1 });
+  });
+
+  it('parseInt/parseFloat', () => {
+    expect(eval_("parseInt('42')")).toBe(42);
+    expect(eval_("parseFloat('3.14')")).toBeCloseTo(3.14);
+  });
+
+  it('isNaN', () => {
+    expect(eval_('isNaN(NaN)')).toBe(true);
+    expect(eval_('isNaN(5)')).toBe(false);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Template literals
+// ---------------------------------------------------------------------------
+
+describe('expression parser — template literals', () => {
+  it('simple interpolation', () => {
+    expect(eval_('`Hello ${name}`', { name: 'Tony' })).toBe('Hello Tony');
+  });
+
+  it('expression inside interpolation', () => {
+    expect(eval_('`${a + b}`', { a: 1, b: 2 })).toBe('3');
+  });
+
+  it('no interpolation', () => {
+    expect(eval_('`plain text`')).toBe('plain text');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Array & object literals
+// ---------------------------------------------------------------------------
+
+describe('expression parser — array/object literals', () => {
+  it('array literal', () => {
+    expect(eval_('[1, 2, 3]')).toEqual([1, 2, 3]);
+    expect(eval_('[]')).toEqual([]);
+  });
+
+  it('object literal', () => {
+    expect(eval_("{ x: 1, y: 'two' }")).toEqual({ x: 1, y: 'two' });
+  });
+
+  it('shorthand property', () => {
+    expect(eval_('{ x }', { x: 42 })).toEqual({ x: 42 });
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Arrow functions
+// ---------------------------------------------------------------------------
+
+describe('expression parser — arrow functions', () => {
+  it('single-param arrow', () => {
+    const fn = eval_('x => x * 2');
+    expect(fn(3)).toBe(6);
+  });
+
+  it('multi-param arrow', () => {
+    const fn = eval_('(a, b) => a + b');
+    expect(fn(1, 2)).toBe(3);
+  });
+
+  it('no-param arrow', () => {
+    const fn = eval_('() => 42');
+    expect(fn()).toBe(42);
+  });
+
+  it('arrow with scope access', () => {
+    const items = [1, 2, 3];
+    expect(eval_('items.filter(x => x > 1)', { items })).toEqual([2, 3]);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// typeof
+// ---------------------------------------------------------------------------
+
+describe('expression parser — typeof', () => {
+  it('typeof string', () => {
+    expect(eval_("typeof 'hello'")).toBe('string');
+  });
+
+  it('typeof number', () => {
+    expect(eval_('typeof 42')).toBe('number');
+  });
+
+  it('typeof undefined variable', () => {
+    expect(eval_('typeof missing')).toBe('undefined');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Safety / security
+// ---------------------------------------------------------------------------
+
+describe('expression parser — safety', () => {
+  it('blocks constructor access', () => {
+    expect(eval_("''.constructor")).toBe(undefined);
+  });
+
+  it('blocks __proto__ access', () => {
+    expect(eval_("({}).__proto__", {})).toBe(undefined);
+  });
+
+  it('returns undefined for invalid expressions', () => {
+    expect(eval_('!!!!')).toBe(undefined);
+  });
+
+  it('handles deeply nested safe access', () => {
+    const data = { a: { b: { c: { d: 'deep' } } } };
+    expect(eval_('a.b.c.d', data)).toBe('deep');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Multi-scope resolution
+// ---------------------------------------------------------------------------
+
+describe('expression parser — multi-scope', () => {
+  it('checks scope layers in order', () => {
+    expect(safeEval('x', [{ x: 'first' }, { x: 'second' }])).toBe('first');
+  });
+
+  it('falls through to second scope', () => {
+    expect(safeEval('y', [{ x: 1 }, { y: 2 }])).toBe(2);
+  });
+});