p-elements-core 1.2.32-rc1 → 1.2.32-rc11

package/src/maquette/cache.test.ts

@@ -0,0 +1,150 @@
+/**
+ * Tests for Maquette cache module
+ */
+
+import { describe, it, expect } from 'vitest';
+import { createCache } from './cache.js';
+
+describe('Maquette cache', () => {
+  describe('createCache', () => {
+    it('should create a cache instance', () => {
+      const cache = createCache<number>();
+      expect(cache).toBeDefined();
+      expect(cache.result).toBeDefined();
+      expect(cache.invalidate).toBeDefined();
+    });
+
+    it('should calculate result on first call', () => {
+      const cache = createCache<number>();
+      let calculationCount = 0;
+
+      const result = cache.result([1, 2, 3], () => {
+        calculationCount++;
+        return 10;
+      });
+
+      expect(result).toBe(10);
+      expect(calculationCount).toBe(1);
+    });
+
+    it('should return cached result when inputs unchanged', () => {
+      const cache = createCache<number>();
+      let calculationCount = 0;
+
+      const inputs = [1, 2, 3];
+      const calculation = () => {
+        calculationCount++;
+        return 10;
+      };
+
+      cache.result(inputs, calculation);
+      const result2 = cache.result(inputs, calculation);
+      const result3 = cache.result(inputs, calculation);
+
+      expect(result2).toBe(10);
+      expect(result3).toBe(10);
+      expect(calculationCount).toBe(1); // Only calculated once
+    });
+
+    it('should recalculate when inputs change', () => {
+      const cache = createCache<number>();
+      let calculationCount = 0;
+
+      cache.result([1, 2, 3], () => {
+        calculationCount++;
+        return 10;
+      });
+
+      cache.result([1, 2, 4], () => {
+        calculationCount++;
+        return 20;
+      });
+
+      expect(calculationCount).toBe(2);
+    });
+
+    it('should detect changes in any input position', () => {
+      const cache = createCache<string>();
+      let calculationCount = 0;
+
+      const calc = () => {
+        calculationCount++;
+        return 'result';
+      };
+
+      cache.result(['a', 'b', 'c'], calc);
+      cache.result(['x', 'b', 'c'], calc); // First element changed
+      cache.result(['x', 'y', 'c'], calc); // Second element changed
+      cache.result(['x', 'y', 'z'], calc); // Third element changed
+
+      expect(calculationCount).toBe(4);
+    });
+
+    it('should invalidate cache', () => {
+      const cache = createCache<number>();
+      let calculationCount = 0;
+
+      const inputs = [1, 2, 3];
+      const calculation = () => {
+        calculationCount++;
+        return 10;
+      };
+
+      cache.result(inputs, calculation);
+      cache.invalidate();
+      cache.result(inputs, calculation);
+
+      expect(calculationCount).toBe(2);
+    });
+
+    it('should handle empty inputs', () => {
+      const cache = createCache<number>();
+      let calculationCount = 0;
+
+      const result1 = cache.result([], () => {
+        calculationCount++;
+        return 42;
+      });
+
+      const result2 = cache.result([], () => {
+        calculationCount++;
+        return 42;
+      });
+
+      expect(result1).toBe(42);
+      expect(result2).toBe(42);
+      expect(calculationCount).toBe(1);
+    });
+
+    it('should cache complex objects', () => {
+      const cache = createCache<{ value: number }>();
+      let calculationCount = 0;
+
+      const obj1 = { id: 1 };
+      const obj2 = { id: 2 };
+
+      const result1 = cache.result([obj1, obj2], () => {
+        calculationCount++;
+        return { value: 100 };
+      });
+
+      const result2 = cache.result([obj1, obj2], () => {
+        calculationCount++;
+        return { value: 200 };
+      });
+
+      expect(result1).toBe(result2); // Same cached object
+      expect(calculationCount).toBe(1);
+    });
+
+    it('should invalidate and allow new calculations', () => {
+      const cache = createCache<string>();
+      
+      cache.result([1], () => 'first');
+      cache.invalidate();
+      const result = cache.result([2], () => 'second');
+
+      expect(result).toBe('second');
+    });
+  });
+});

package/src/maquette/dom.test.ts

@@ -0,0 +1,263 @@
+/**
+ * Tests for Maquette DOM manipulation module
+ */
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { dom } from './dom.js';
+import { h } from './h.js';
+
+describe('Maquette DOM', () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    if (container.parentNode) {
+      document.body.removeChild(container);
+    }
+  });
+
+  describe('dom.create', () => {
+    it('should create DOM from VNode', () => {
+      const vnode = h('div.test', ['Hello World']);
+      const projection = dom.create(vnode);
+
+      expect(projection).toBeDefined();
+      expect(projection.domNode).toBeDefined();
+      expect(projection.update).toBeDefined();
+    });
+
+    it('should create nested elements', () => {
+      const vnode = h('div', [
+        h('span', ['Text 1']),
+        h('span', ['Text 2']),
+      ]);
+      const projection = dom.create(vnode);
+
+      expect(projection.domNode.children.length).toBe(2);
+      expect(projection.domNode.children[0].textContent).toBe('Text 1');
+      expect(projection.domNode.children[1].textContent).toBe('Text 2');
+    });
+
+    it('should apply properties', () => {
+      const vnode = h('input', { 
+        type: 'text', 
+        value: 'test',
+        placeholder: 'Enter text'
+      });
+      const projection = dom.create(vnode);
+      const input = projection.domNode as HTMLInputElement;
+
+      expect(input.type).toBe('text');
+      expect(input.value).toBe('test');
+      expect(input.placeholder).toBe('Enter text');
+    });
+
+    it('should apply classes', () => {
+      const vnode = h('div.class1.class2');
+      const projection = dom.create(vnode);
+
+      expect(projection.domNode.classList.contains('class1')).toBe(true);
+      expect(projection.domNode.classList.contains('class2')).toBe(true);
+    });
+  });
+
+  describe('dom.append', () => {
+    it('should append VNode to parent element', () => {
+      const vnode = h('div.child', ['Child content']);
+      const projection = dom.append(container, vnode);
+
+      expect(container.children.length).toBe(1);
+      expect(container.children[0].classList.contains('child')).toBe(true);
+      expect(container.children[0].textContent).toBe('Child content');
+    });
+
+    it('should append multiple children sequentially', () => {
+      dom.append(container, h('div', ['First']));
+      dom.append(container, h('div', ['Second']));
+      dom.append(container, h('div', ['Third']));
+
+      expect(container.children.length).toBe(3);
+      expect(container.children[0].textContent).toBe('First');
+      expect(container.children[1].textContent).toBe('Second');
+      expect(container.children[2].textContent).toBe('Third');
+    });
+  });
+
+  describe('dom.insertBefore', () => {
+    it('should insert VNode before specified node', () => {
+      const first = document.createElement('div');
+      first.textContent = 'First';
+      container.appendChild(first);
+
+      const last = document.createElement('div');
+      last.textContent = 'Last';
+      container.appendChild(last);
+
+      const vnode = h('div', ['Middle']);
+      dom.insertBefore(last, vnode);
+
+      expect(container.children.length).toBe(3);
+      expect(container.children[0].textContent).toBe('First');
+      expect(container.children[1].textContent).toBe('Middle');
+      expect(container.children[2].textContent).toBe('Last');
+    });
+
+    it('should insert at beginning', () => {
+      const existing = document.createElement('div');
+      existing.textContent = 'Existing';
+      container.appendChild(existing);
+
+      const vnode = h('div', ['New First']);
+      dom.insertBefore(existing, vnode);
+
+      expect(container.children.length).toBe(2);
+      expect(container.children[0].textContent).toBe('New First');
+      expect(container.children[1].textContent).toBe('Existing');
+    });
+  });
+
+  describe('dom.merge', () => {
+    it('should merge VNode with existing element', () => {
+      const existingDiv = document.createElement('div');
+      existingDiv.setAttribute('id', 'existing');
+      existingDiv.textContent = 'Original';
+      container.appendChild(existingDiv);
+
+      const vnode = h('div', { 'data-merged': 'true' }, ['Merged']);
+      const projection = dom.merge(existingDiv, vnode);
+
+      expect(projection.domNode).toBe(existingDiv);
+      expect(existingDiv.getAttribute('id')).toBe('existing'); // Preserved
+      expect(existingDiv.getAttribute('data-merged')).toBe('true'); // Added
+      expect(existingDiv.textContent).toBe('Merged'); // Updated
+    });
+
+    it('should preserve existing children when merging', () => {
+      const existingDiv = document.createElement('div');
+      const existingChild = document.createElement('span');
+      existingChild.textContent = 'Existing child';
+      existingDiv.appendChild(existingChild);
+      container.appendChild(existingDiv);
+
+      const vnode = h('div', {}, [h('span', ['New child'])]);
+      dom.merge(existingDiv, vnode);
+
+      // Behavior depends on implementation - typically adds new children
+      expect(existingDiv.children.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('projection.update', () => {
+    it('should update DOM when VNode changes', () => {
+      let text = 'Initial';
+      const createVNode = () => h('div', [text]);
+      
+      const projection = dom.append(container, createVNode());
+      expect(container.children[0].textContent).toBe('Initial');
+
+      text = 'Updated';
+      projection.update(createVNode());
+      expect(container.children[0].textContent).toBe('Updated');
+    });
+
+    it('should update properties', () => {
+      let value = 'initial';
+      const createVNode = () => h('input', { value });
+      
+      const projection = dom.append(container, createVNode());
+      const input = container.children[0] as HTMLInputElement;
+      expect(input.value).toBe('initial');
+
+      value = 'updated';
+      projection.update(createVNode());
+      expect(input.value).toBe('updated');
+    });
+
+    it('should update nested elements', () => {
+      let count = 1;
+      const createVNode = () => h('div', [
+        h('span.count', [`Count: ${count}`]),
+      ]);
+      
+      const projection = dom.append(container, createVNode());
+      expect(container.querySelector('.count')?.textContent).toBe('Count: 1');
+
+      count = 5;
+      projection.update(createVNode());
+      expect(container.querySelector('.count')?.textContent).toBe('Count: 5');
+    });
+  });
+
+  describe('projection options', () => {
+    it('should apply custom styleApplyer', () => {
+      let stylesCalled: Array<{ styleName: string; value: string }> = [];
+      
+      const vnode = h('div', { 
+        styles: { 
+          color: 'red',
+          fontSize: '16px'
+        } 
+      });
+
+      const projection = dom.create(vnode, {
+        styleApplyer: (domNode, styleName, value) => {
+          stylesCalled.push({ styleName, value });
+          (domNode.style as any)[styleName] = value;
+        },
+      });
+
+      expect(stylesCalled.length).toBeGreaterThan(0);
+    });
+
+    it('should handle CSS variables in styles', () => {
+      const vnode = h('div', { 
+        styles: { 
+          '--custom-color': 'blue',
+          'color': 'red'
+        } 
+      });
+
+      const projection = dom.create(vnode);
+      const div = projection.domNode as HTMLElement;
+
+      // CSS variables should be set
+      expect(div.style.getPropertyValue('--custom-color')).toBe('blue');
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle empty VNode', () => {
+      const vnode = h('div');
+      const projection = dom.create(vnode);
+
+      expect(projection.domNode).toBeDefined();
+      expect(projection.domNode.children.length).toBe(0);
+    });
+
+    it('should handle VNode with only text', () => {
+      const vnode = h('div', ['Just text']);
+      const projection = dom.create(vnode);
+
+      expect(projection.domNode.textContent).toBe('Just text');
+    });
+
+    it('should handle deeply nested structures', () => {
+      const vnode = h('div', [
+        h('div', [
+          h('div', [
+            h('div', [
+              h('span', ['Deep'])
+            ])
+          ])
+        ])
+      ]);
+
+      const projection = dom.create(vnode);
+      expect(projection.domNode.querySelector('span')?.textContent).toBe('Deep');
+    });
+  });
+});

package/src/maquette/h.test.ts

@@ -0,0 +1,165 @@
+/**
+ * Tests for Maquette h (hyperscript) module
+ */
+
+import { describe, it, expect } from 'vitest';
+import { h } from './h.js';
+
+describe('Maquette h (hyperscript)', () => {
+  describe('Basic VNode creation', () => {
+    it('should create VNode with selector only', () => {
+      const vnode = h('div');
+      
+      expect(vnode.vnodeSelector).toBe('div');
+      expect(vnode.properties).toBeUndefined();
+      expect(vnode.children).toBeUndefined();
+      expect(vnode.text).toBeUndefined();
+    });
+
+    it('should create VNode with properties', () => {
+      const vnode = h('div', { id: 'test', class: 'my-class' });
+      
+      expect(vnode.vnodeSelector).toBe('div');
+      expect(vnode.properties).toEqual({ id: 'test', class: 'my-class' });
+    });
+
+    it('should create VNode with children array', () => {
+      const vnode = h('div', [h('span', ['text'])]);
+      
+      expect(vnode.vnodeSelector).toBe('div');
+      expect(vnode.children).toHaveLength(1);
+      expect(vnode.children?.[0].vnodeSelector).toBe('span');
+    });
+  });
+
+  describe('Nested and complex children', () => {
+    it('should flatten nested arrays in children', () => {
+      const vnode = h('div', [
+        [h('span', ['a']), h('span', ['b'])],
+        h('span', ['c'])
+      ]);
+      
+      expect(vnode.children).toHaveLength(3);
+      expect(vnode.children?.[0].vnodeSelector).toBe('span');
+      expect(vnode.children?.[1].vnodeSelector).toBe('span');
+      expect(vnode.children?.[2].vnodeSelector).toBe('span');
+    });
+
+    it('should handle deeply nested arrays', () => {
+      const vnode = h('div', [
+        [[h('span', ['level1'])]],
+        [[[h('span', ['level2'])]]]
+      ]);
+      
+      expect(vnode.children).toHaveLength(2);
+    });
+
+    it('should convert string children to text VNodes in nested arrays', () => {
+      const vnode = h('div', [['text1', 'text2'], ['text3']]);
+      
+      expect(vnode.children).toHaveLength(3);
+      vnode.children?.forEach(child => {
+        expect(child.vnodeSelector).toBe('');
+        expect(typeof child.text).toBe('string');
+      });
+    });
+
+    it('should filter out null, undefined, and false from children', () => {
+      const vnode = h('div', [
+        null,
+        undefined,
+        false,
+        h('span', ['visible'])
+      ]);
+      
+      expect(vnode.children).toHaveLength(1);
+      expect(vnode.children?.[0].vnodeSelector).toBe('span');
+    });
+
+    it('should return undefined for empty children array', () => {
+      const vnode = h('div', [null, undefined, false]);
+      
+      expect(vnode.children).toBeUndefined();
+    });
+  });
+
+  describe('Text nodes', () => {
+    it('should handle single text child as text property', () => {
+      const vnode = h('div', ['single text']);
+      
+      expect(vnode.text).toBe('single text');
+      expect(vnode.children).toBeUndefined();
+    });
+
+    it('should convert empty string to undefined', () => {
+      const vnode = h('div', ['']);
+      
+      expect(vnode.text).toBeUndefined();
+    });
+
+    it('should handle number strings in nested arrays', () => {
+      const vnode = h('div', [['123'], ['456']]);
+      
+      expect(vnode.children).toHaveLength(2);
+      expect(vnode.children?.[0].text).toBe('123');
+      expect(vnode.children?.[1].text).toBe('456');
+    });
+  });
+
+  describe('Properties handling', () => {
+    it('should treat array as children when used as second argument', () => {
+      const vnode = h('div', [h('span')]);
+      
+      expect(vnode.properties).toBeUndefined();
+      expect(vnode.children).toHaveLength(1);
+    });
+
+    it('should handle properties and children together', () => {
+      const vnode = h('div', { id: 'test' }, [h('span')]);
+      
+      expect(vnode.properties?.id).toBe('test');
+      expect(vnode.children).toHaveLength(1);
+    });
+  });
+
+  describe('Error handling', () => {
+    it('should throw error when properties is a string', () => {
+      expect(() => {
+        h('div', 'invalid' as any);
+      }).toThrow('h called with invalid arguments');
+    });
+
+    it('should throw error when properties is a VNode', () => {
+      expect(() => {
+        h('div', h('span') as any);
+      }).toThrow('h called with invalid arguments');
+    });
+
+    it('should throw error when children contains VNode without array', () => {
+      expect(() => {
+        h('div', {}, h('span') as any);
+      }).toThrow('h called with invalid arguments');
+    });
+
+    it('should throw error when children is a string outside array', () => {
+      expect(() => {
+        h('div', {}, 'invalid' as any);
+      }).toThrow('h called with invalid arguments');
+    });
+  });
+
+  describe('Complex selectors', () => {
+    it('should handle selector with classes and id', () => {
+      const vnode = h('div.class1.class2#myid');
+      
+      expect(vnode.vnodeSelector).toBe('div.class1.class2#myid');
+    });
+
+    it('should handle SVG elements', () => {
+      const vnode = h('svg', [h('circle', { r: 10 })]);
+      
+      expect(vnode.vnodeSelector).toBe('svg');
+      expect(vnode.children?.[0].vnodeSelector).toBe('circle');
+    });
+  });
+});