p-elements-core 1.2.31 → 1.2.32-rc-10

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/dom.ts

@@ -1,115 +1,115 @@
-/**
- * Contains simple low-level utility functions to manipulate the real DOM.
- */
-import { Projection, ProjectionOptions, VNode } from "./interfaces";
-import { createDom, createProjection, extend, initPropertiesAndChildren } from "./projection";
-
-const DEFAULT_PROJECTION_OPTIONS: ProjectionOptions = {
-  namespace: undefined,
-  performanceLogger: () => undefined,
-  eventHandlerInterceptor: undefined,
-  styleApplyer: (domNode: HTMLElement, styleName: string, value: string) => {
-    if (styleName.charAt(0) === "-") {
-      // CSS variables must be set using setProperty
-      domNode.style.setProperty(styleName, value);
-    } else {
-      // properties like 'backgroundColor' must be set as a js-property
-      (domNode.style as any)[styleName] = value;
-    }
-  },
-};
-
-export let applyDefaultProjectionOptions = (
-  projectorOptions?: ProjectionOptions
-): ProjectionOptions => {
-  return extend(DEFAULT_PROJECTION_OPTIONS, projectorOptions);
-};
-
-export let dom = {
-  /**
-   * Creates a real DOM tree from `vnode`. The [[Projection]] object returned will contain the resulting DOM Node in
-   * its [[Projection.domNode|domNode]] property.
-   * This is a low-level method. Users will typically use a [[Projector]] instead.
-   * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]
-   * objects may only be rendered once.
-   * @param projectionOptions - Options to be used to create and update the projection.
-   * @returns The [[Projection]] which also contains the DOM Node that was created.
-   */
-  create: (vnode: VNode, projectionOptions?: ProjectionOptions): Projection => {
-    projectionOptions = applyDefaultProjectionOptions(projectionOptions);
-    createDom(vnode, document.createElement("div"), undefined, projectionOptions);
-    return createProjection(vnode, projectionOptions);
-  },
-
-  /**
-   * Appends a new child node to the DOM which is generated from a [[VNode]].
-   * This is a low-level method. Users will typically use a [[Projector]] instead.
-   * @param parentNode - The parent node for the new child node.
-   * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]
-   * objects may only be rendered once.
-   * @param projectionOptions - Options to be used to create and update the [[Projection]].
-   * @returns The [[Projection]] that was created.
-   */
-  append: (
-    parentNode: Element,
-    vnode: VNode,
-    projectionOptions?: ProjectionOptions
-  ): Projection => {
-    projectionOptions = applyDefaultProjectionOptions(projectionOptions);
-    createDom(vnode, parentNode, undefined, projectionOptions);
-    return createProjection(vnode, projectionOptions);
-  },
-
-  /**
-   * Inserts a new DOM node which is generated from a [[VNode]].
-   * This is a low-level method. Users wil typically use a [[Projector]] instead.
-   * @param beforeNode - The node that the DOM Node is inserted before.
-   * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function.
-   * NOTE: [[VNode]] objects may only be rendered once.
-   * @param projectionOptions - Options to be used to create and update the projection, see [[createProjector]].
-   * @returns The [[Projection]] that was created.
-   */
-  insertBefore: (
-    beforeNode: Element,
-    vnode: VNode,
-    projectionOptions?: ProjectionOptions
-  ): Projection => {
-    projectionOptions = applyDefaultProjectionOptions(projectionOptions);
-    createDom(vnode, beforeNode.parentNode!, beforeNode, projectionOptions);
-    return createProjection(vnode, projectionOptions);
-  },
-
-  /**
-   * Merges a new DOM node which is generated from a [[VNode]] with an existing DOM Node.
-   * This means that the virtual DOM and the real DOM will have one overlapping element.
-   * Therefore the selector for the root [[VNode]] will be ignored, but its properties and children will be applied to the Element provided.
-   * This is a low-level method. Users wil typically use a [[Projector]] instead.
-   * @param element - The existing element to adopt as the root of the new virtual DOM. Existing attributes and child nodes are preserved.
-   * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]] objects
-   * may only be rendered once.
-   * @param projectionOptions - Options to be used to create and update the projection, see [[createProjector]].
-   * @returns The [[Projection]] that was created.
-   */
-  merge: (element: Element, vnode: VNode, projectionOptions?: ProjectionOptions): Projection => {
-    projectionOptions = applyDefaultProjectionOptions(projectionOptions);
-    vnode.domNode = element;
-    initPropertiesAndChildren(element, vnode, projectionOptions);
-    return createProjection(vnode, projectionOptions);
-  },
-
-  /**
-   * Replaces an existing DOM node with a node generated from a [[VNode]].
-   * This is a low-level method. Users will typically use a [[Projector]] instead.
-   * @param element - The node for the [[VNode]] to replace.
-   * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]
-   * objects may only be rendered once.
-   * @param projectionOptions - Options to be used to create and update the [[Projection]].
-   * @returns The [[Projection]] that was created.
-   */
-  replace: (element: Element, vnode: VNode, projectionOptions?: ProjectionOptions): Projection => {
-    projectionOptions = applyDefaultProjectionOptions(projectionOptions);
-    createDom(vnode, element.parentNode!, element, projectionOptions);
-    element.parentNode!.removeChild(element);
-    return createProjection(vnode, projectionOptions);
-  },
-};
+/**
+ * Contains simple low-level utility functions to manipulate the real DOM.
+ */
+import { Projection, ProjectionOptions, VNode } from "./interfaces";
+import { createDom, createProjection, extend, initPropertiesAndChildren } from "./projection";
+
+const DEFAULT_PROJECTION_OPTIONS: ProjectionOptions = {
+  namespace: undefined,
+  performanceLogger: () => undefined,
+  eventHandlerInterceptor: undefined,
+  styleApplyer: (domNode: HTMLElement, styleName: string, value: string) => {
+    if (styleName.charAt(0) === "-") {
+      // CSS variables must be set using setProperty
+      domNode.style.setProperty(styleName, value);
+    } else {
+      // properties like 'backgroundColor' must be set as a js-property
+      (domNode.style as any)[styleName] = value;
+    }
+  },
+};
+
+export let applyDefaultProjectionOptions = (
+  projectorOptions?: ProjectionOptions
+): ProjectionOptions => {
+  return extend(DEFAULT_PROJECTION_OPTIONS, projectorOptions);
+};
+
+export let dom = {
+  /**
+   * Creates a real DOM tree from `vnode`. The [[Projection]] object returned will contain the resulting DOM Node in
+   * its [[Projection.domNode|domNode]] property.
+   * This is a low-level method. Users will typically use a [[Projector]] instead.
+   * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]
+   * objects may only be rendered once.
+   * @param projectionOptions - Options to be used to create and update the projection.
+   * @returns The [[Projection]] which also contains the DOM Node that was created.
+   */
+  create: (vnode: VNode, projectionOptions?: ProjectionOptions): Projection => {
+    projectionOptions = applyDefaultProjectionOptions(projectionOptions);
+    createDom(vnode, document.createElement("div"), undefined, projectionOptions);
+    return createProjection(vnode, projectionOptions);
+  },
+
+  /**
+   * Appends a new child node to the DOM which is generated from a [[VNode]].
+   * This is a low-level method. Users will typically use a [[Projector]] instead.
+   * @param parentNode - The parent node for the new child node.
+   * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]
+   * objects may only be rendered once.
+   * @param projectionOptions - Options to be used to create and update the [[Projection]].
+   * @returns The [[Projection]] that was created.
+   */
+  append: (
+    parentNode: Element,
+    vnode: VNode,
+    projectionOptions?: ProjectionOptions
+  ): Projection => {
+    projectionOptions = applyDefaultProjectionOptions(projectionOptions);
+    createDom(vnode, parentNode, undefined, projectionOptions);
+    return createProjection(vnode, projectionOptions);
+  },
+
+  /**
+   * Inserts a new DOM node which is generated from a [[VNode]].
+   * This is a low-level method. Users wil typically use a [[Projector]] instead.
+   * @param beforeNode - The node that the DOM Node is inserted before.
+   * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function.
+   * NOTE: [[VNode]] objects may only be rendered once.
+   * @param projectionOptions - Options to be used to create and update the projection, see [[createProjector]].
+   * @returns The [[Projection]] that was created.
+   */
+  insertBefore: (
+    beforeNode: Element,
+    vnode: VNode,
+    projectionOptions?: ProjectionOptions
+  ): Projection => {
+    projectionOptions = applyDefaultProjectionOptions(projectionOptions);
+    createDom(vnode, beforeNode.parentNode!, beforeNode, projectionOptions);
+    return createProjection(vnode, projectionOptions);
+  },
+
+  /**
+   * Merges a new DOM node which is generated from a [[VNode]] with an existing DOM Node.
+   * This means that the virtual DOM and the real DOM will have one overlapping element.
+   * Therefore the selector for the root [[VNode]] will be ignored, but its properties and children will be applied to the Element provided.
+   * This is a low-level method. Users wil typically use a [[Projector]] instead.
+   * @param element - The existing element to adopt as the root of the new virtual DOM. Existing attributes and child nodes are preserved.
+   * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]] objects
+   * may only be rendered once.
+   * @param projectionOptions - Options to be used to create and update the projection, see [[createProjector]].
+   * @returns The [[Projection]] that was created.
+   */
+  merge: (element: Element, vnode: VNode, projectionOptions?: ProjectionOptions): Projection => {
+    projectionOptions = applyDefaultProjectionOptions(projectionOptions);
+    vnode.domNode = element;
+    initPropertiesAndChildren(element, vnode, projectionOptions);
+    return createProjection(vnode, projectionOptions);
+  },
+
+  /**
+   * Replaces an existing DOM node with a node generated from a [[VNode]].
+   * This is a low-level method. Users will typically use a [[Projector]] instead.
+   * @param element - The node for the [[VNode]] to replace.
+   * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]
+   * objects may only be rendered once.
+   * @param projectionOptions - Options to be used to create and update the [[Projection]].
+   * @returns The [[Projection]] that was created.
+   */
+  replace: (element: Element, vnode: VNode, projectionOptions?: ProjectionOptions): Projection => {
+    projectionOptions = applyDefaultProjectionOptions(projectionOptions);
+    createDom(vnode, element.parentNode!, element, projectionOptions);
+    element.parentNode!.removeChild(element);
+    return createProjection(vnode, projectionOptions);
+  },
+};

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');
+    });
+  });
+});