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

package/src/maquette/projector.test.ts

@@ -0,0 +1,351 @@
+/**
+ * Tests for Maquette projector module
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { createProjector } from './projector.js';
+import { h } from './h.js';
+
+describe('Maquette projector', () => {
+  let container: HTMLDivElement;
+  let projectors: Array<ReturnType<typeof createProjector>> = [];
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    projectors = [];
+  });
+
+  afterEach(() => {
+    // Stop all projectors to prevent async operations from interfering
+    projectors.forEach(p => {
+      try {
+        p.stop();
+      } catch (e) {
+        // Ignore errors if already stopped
+      }
+    });
+    
+    if (container.parentNode) {
+      document.body.removeChild(container);
+    }
+  });
+
+  describe('createProjector', () => {
+    it('should create a projector instance', () => {
+      const projector = createProjector();
+
+      expect(projector).toBeDefined();
+      expect(projector.append).toBeDefined();
+      expect(projector.merge).toBeDefined();
+      expect(projector.insertBefore).toBeDefined();
+      expect(projector.replace).toBeDefined();
+      expect(projector.scheduleRender).toBeDefined();
+      expect(projector.renderNow).toBeDefined();
+      expect(projector.stop).toBeDefined();
+      expect(projector.resume).toBeDefined();
+      expect(projector.detach).toBeDefined();
+    });
+
+    it('should append VNode and render', () => {
+      const projector = createProjector();
+      let text = 'Hello';
+
+      projector.append(container, () => h('div', [text]));
+
+      expect(container.children.length).toBe(1);
+      expect(container.children[0].textContent).toBe('Hello');
+
+      text = 'Updated';
+      projector.renderNow();
+
+      expect(container.children[0].textContent).toBe('Updated');
+    });
+
+    it('should schedule render on next animation frame', () => {
+      const projector = createProjector();
+      let count = 1;
+
+      projector.append(container, () => h('div', [`Count: ${count}`]));
+      expect(container.children[0].textContent).toBe('Count: 1');
+
+      count = 2;
+      projector.scheduleRender();
+
+      return new Promise<void>((resolve) => {
+        requestAnimationFrame(() => {
+          expect(container.children[0].textContent).toBe('Count: 2');
+          projector.stop();
+          resolve();
+        });
+      });
+    });
+
+    it('should not schedule multiple renders', () => {
+      const projector = createProjector();
+      let renderCount = 0;
+
+      projector.append(container, () => {
+        renderCount++;
+        return h('div', [`Render ${renderCount}`]);
+      });
+
+      const initialRenderCount = renderCount;
+      
+      // Multiple scheduleRender calls should only trigger one render
+      projector.scheduleRender();
+      projector.scheduleRender();
+      projector.scheduleRender();
+
+      return new Promise<void>((resolve) => {
+        setTimeout(() => {
+          // Should have rendered only once more after initial
+          expect(renderCount).toBe(initialRenderCount + 1);
+          projector.stop();
+          resolve();
+        }, 50);
+      });
+    });
+
+    it('should stop rendering', () => {
+      const projector = createProjector();
+      let count = 1;
+
+      projector.append(container, () => h('div', [`Count: ${count}`]));
+      projector.stop();
+
+      count = 2;
+      projector.scheduleRender();
+
+      return new Promise<void>((resolve) => {
+        setTimeout(() => {
+          // Should not have updated because projector is stopped
+          expect(container.children[0].textContent).toBe('Count: 1');
+          resolve();
+        }, 100);
+      });
+    });
+
+    it('should resume rendering after stop', () => {
+      const projector = createProjector();
+      let count = 1;
+
+      projector.append(container, () => h('div', [`Count: ${count}`]));
+      projector.stop();
+
+      count = 2;
+      projector.resume();
+
+      return new Promise<void>((resolve) => {
+        requestAnimationFrame(() => {
+          expect(container.children[0].textContent).toBe('Count: 2');
+          projector.stop();
+          resolve();
+        });
+      });
+    });
+
+    it('should merge with existing element', () => {
+      const existingDiv = document.createElement('div');
+      existingDiv.id = 'existing';
+      existingDiv.textContent = 'Original';
+      container.appendChild(existingDiv);
+
+      const projector = createProjector();
+      let mergedText = 'Merged';
+
+      projector.merge(existingDiv, () => h('div', [mergedText]));
+
+      expect(existingDiv.id).toBe('existing');
+      expect(existingDiv.textContent).toContain('Merged');
+    });
+
+    it('should insert before specified node', () => {
+      const firstChild = document.createElement('div');
+      firstChild.textContent = 'First';
+      container.appendChild(firstChild);
+
+      const lastChild = document.createElement('div');
+      lastChild.textContent = 'Last';
+      container.appendChild(lastChild);
+
+      const projector = createProjector();
+      projector.insertBefore(lastChild, () => h('div', ['Middle']));
+
+      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 replace element', () => {
+      const oldElement = document.createElement('div');
+      oldElement.textContent = 'Old';
+      container.appendChild(oldElement);
+
+      const projector = createProjector();
+      projector.replace(oldElement, () => h('span', ['New']));
+
+      expect(container.children.length).toBe(1);
+      expect(container.children[0].tagName).toBe('SPAN');
+      expect(container.children[0].textContent).toBe('New');
+    });
+
+    it('should handle multiple projections', () => {
+      const div1 = document.createElement('div');
+      const div2 = document.createElement('div');
+      container.appendChild(div1);
+      container.appendChild(div2);
+
+      const projector = createProjector();
+      let text1 = 'Projection 1';
+      let text2 = 'Projection 2';
+
+      projector.append(div1, () => h('span', [text1]));
+      projector.append(div2, () => h('span', [text2]));
+
+      expect(div1.children[0].textContent).toBe('Projection 1');
+      expect(div2.children[0].textContent).toBe('Projection 2');
+
+      text1 = 'Updated 1';
+      text2 = 'Updated 2';
+      projector.renderNow();
+
+      expect(div1.children[0].textContent).toBe('Updated 1');
+      expect(div2.children[0].textContent).toBe('Updated 2');
+    });
+
+    it('should detach render function', () => {
+      const projector = createProjector();
+      const renderFunc = () => h('div', ['Detachable']);
+
+      projector.append(container, renderFunc);
+      expect(container.children.length).toBe(1);
+
+      const detached = projector.detach(renderFunc);
+      expect(detached).toBeDefined();
+    });
+
+    it('should throw error when detaching non-existent render function', () => {
+      const projector = createProjector();
+      const renderFunc = () => h('div', ['Test']);
+
+      expect(() => {
+        projector.detach(renderFunc);
+      }).toThrow('renderFunction was not found');
+    });
+
+    it('should call performance logger', () => {
+      const logCalls: Array<{ type: string; detail: any }> = [];
+      const performanceLogger = (type: string, detail: any) => {
+        logCalls.push({ type, detail });
+      };
+
+      const projector = createProjector({ performanceLogger });
+      projector.append(container, () => h('div', ['Test']));
+      projector.renderNow();
+
+      expect(logCalls.length).toBeGreaterThan(0);
+      expect(logCalls.some(call => call.type === 'renderStart')).toBe(true);
+    });
+
+    it('should handle event handler interceptor', () => {
+      let clickCalled = false;
+      const handleClick = () => {
+        clickCalled = true;
+      };
+
+      const projector = createProjector();
+      projector.append(container, () => 
+        h('button', { onclick: handleClick }, ['Click me'])
+      );
+
+      const button = container.querySelector('button');
+      button?.click();
+
+      expect(clickCalled).toBe(true);
+    });
+
+    it('should trigger re-render when event handler is called', () => {
+      let count = 0;
+      let renderCount = 0;
+
+      const handleClick = () => {
+        count++;
+      };
+
+      const projector = createProjector();
+      projector.append(container, () => {
+        renderCount++;
+        return h('div', [
+          h('button', { onclick: handleClick }),
+          h('span', [`Count: ${count}`])
+        ]);
+      });
+
+      const initialRenderCount = renderCount;
+      const button = container.querySelector('button');
+      
+      button?.click();
+
+      return new Promise<void>((resolve) => {
+        requestAnimationFrame(() => {
+          expect(renderCount).toBeGreaterThan(initialRenderCount);
+          expect(container.querySelector('span')?.textContent).toBe('Count: 1');
+          projector.stop();
+          resolve();
+        });
+      });
+    });
+
+    it('should handle nested event handlers', () => {
+      let outerClicked = false;
+      let innerClicked = false;
+
+      const projector = createProjector();
+      projector.append(container, () =>
+        h('div', { onclick: () => { outerClicked = true; } }, [
+          h('button', { onclick: () => { innerClicked = true; } }, ['Inner'])
+        ])
+      );
+
+      const button = container.querySelector('button');
+      button?.click();
+
+      expect(innerClicked).toBe(true);
+    });
+
+    it('should update multiple times', () => {
+      const projector = createProjector();
+      let value = 0;
+
+      projector.append(container, () => h('div', [`Value: ${value}`]));
+
+      for (let i = 1; i <= 5; i++) {
+        value = i;
+        projector.renderNow();
+        expect(container.children[0].textContent).toBe(`Value: ${i}`);
+      }
+    });
+
+    it('should handle complex VNode updates', () => {
+      const projector = createProjector();
+      let items = ['a', 'b', 'c'];
+
+      projector.append(container, () =>
+        h('ul', items.map(item => h('li', { key: item }, [item])))
+      );
+
+      expect(container.querySelectorAll('li').length).toBe(3);
+
+      items = ['a', 'c', 'd', 'e'];
+      projector.renderNow();
+
+      expect(container.querySelectorAll('li').length).toBe(4);
+      expect(container.querySelectorAll('li')[0].textContent).toBe('a');
+      expect(container.querySelectorAll('li')[1].textContent).toBe('c');
+      expect(container.querySelectorAll('li')[2].textContent).toBe('d');
+      expect(container.querySelectorAll('li')[3].textContent).toBe('e');
+    });
+  });
+});

package/src/maquette/projector.ts

@@ -69,7 +69,12 @@ let createEventHandlerInterceptor = (
     // modified event handler
     return function(this: Node, evt: Event): boolean | undefined | void {
       performanceLogger("domEvent", evt);
-      let projection = getProjection()!;
+      let projection = getProjection();
+      // Guard: projection may be undefined when an event handler is invoked synchronously
+      // during initial DOM creation (e.g. by a custom-element setter calling onchange).
+      if (!projection) {
+        return eventHandler.apply(this, arguments);
+      }
       let parentNodePath = createParentNodePath(evt.currentTarget as Element, projection.domNode);
       parentNodePath.reverse();
       let matchingVNode = findVNodeByParentNodePath(projection.getLastRender(), parentNodePath);

package/src/sample/sample.tsx

@@ -1,21 +1,80 @@
-// @ts-nocheck
 import { Highlightable } from "./mixin/highlight";
 import anime from "animejs";
 
-import {customElementConfig as CustomElementConfig} from "../decorators/custom-element-config";
+import {customElementConfig, customElementConfig as CustomElementConfig} from "../decorators/custom-element-config";
 import {property as Property, AttributeConverter} from "../decorators/property";
 import {propertyRenderOnSet as PropertyRenderOnSet} from "../decorators/render-property-on-set";
 import {query as Query} from "../decorators/query";
 import {CustomElement} from "../custom-element";
 import {CustomElementController} from "../custom-element-controller";
 
+
+@customElementConfig({tagName: "render-on-set"})
+export class RenderOnSet extends CustomElement {
+
+  @PropertyRenderOnSet
+  public name: string = "foo";
+
+  render() {
+    return <div>Render on set: {this.name}</div>;
+  }
+
+  #initDone = false;
+
+  connectedCallback(): void {
+
+    if (this.#initDone) {
+      return
+    }
+    this.#initDone = true;
+    let template = this.templateFromString(`<style>div{color: lime}</style><div />`);
+    this.shadowRoot.appendChild(template);
+    this.createProjector(this.shadowRoot.querySelector("div"), this.render);
+  }
+
+}
+
+
+@CustomElementConfig({
+  tagName: "p-bugs-03",
+})
+export class PBugs03 extends CustomElement {
+  static style = `/* */`;
+
+  @PropertyRenderOnSet
+  private _zero: number = 0;
+
+  private _renderCount: number = 0;
+
+  private alwaysZero() {
+    return 0;
+  }
+
+  private get zero(): number {
+    this._zero = this.alwaysZero();
+    return this._zero;
+  }
+
+  // Bug: Updating a @RenderOnSet property with same value triggers useless re-render
+
+  render() {
+    this._renderCount++;
+
+    return (
+      <div>
+        Value of Zero: {this.zero} - Renders: {this._renderCount}
+      </div>
+    );
+  };
+}
+
 @CustomElementConfig({
   tagName: "my-button",
 })
 export class MyButton extends CustomElement {
   static style = `.foo{background-color: red; color: white; border: 0px;}`;
   static delegatesFocus = true;
-  render = () => {
+  render(){
     return <button class="foo"><slot></slot></button>;
   }
 }
@@ -23,7 +82,7 @@ export class MyButton extends CustomElement {
 @CustomElementConfig({
   tagName: "my-greetings",
 })
-export class MyGreetings extends Highlightable(class extends CustomElement { }) {
+export class MyGreetings extends Highlightable(class extends CustomElement { render() { return <div></div> } }) {
 
   static isFormAssociated = true;
 
@@ -95,7 +154,7 @@ export class MyGreetings extends Highlightable(class extends CustomElement { })
     console.log({ e, p: this });
   };
 
-  private render = () => {
+  render(){
     return (
       <div>
         <input type="checkbox" checked={this.name === "Peter"} />
@@ -140,8 +199,8 @@ export class MyGreetings extends Highlightable(class extends CustomElement { })
             afterCreate={this.peterCreate}
             class="is-peter"
             eventListeners={[["click", this.onPeterClick]]}
-            enterAnimation={this.enterAnimation}
-            exitAnimation={this.exitAnimation}
+            enterAnimation={(element, properties) => this.enterAnimation(element, properties)}
+            exitAnimation={(element, removeDomNodeFunction, properties) => this.exitAnimation(element, removeDomNodeFunction, properties)}
           >
             <p>Hello Peter</p>
             <img
@@ -166,6 +225,7 @@ export class MyGreetings extends Highlightable(class extends CustomElement { })
   }
 
   connectedCallback() {
+    super.connectedCallback();
     let template = this.templateFromString(`
       <style>
 
@@ -309,7 +369,7 @@ class PFoo extends CustomElement {
   @Property({ attribute: "items", type: "object", reflect: true, converter: stringArrayConverter })
   items: string[] = ["foo", "bar"];
 
-  @Property({ type: "string", attribute: "nick-name", readonly: true })
+  @Property({ type: "string", attribute: "nick-name"})
   nickName: string = "de prutser";
 
   shouldUpdate(property, oldValue, newValue) {
@@ -360,9 +420,108 @@ class SuperAnchorElement extends HTMLAnchorElement {
     }
   }
   public connectedCallback() {
+
     this.classList.add("super");
     this.style.color = "red";
   }
 }
 
 window.customElements.define("super-a", SuperAnchorElement, { extends: "a" });
+
+
+// Bring your own projector in non shadow root element
+@CustomElementConfig({
+  tagName: "bring-your-own-projector",
+})
+export class BringYourOwnProjector extends CustomElement {
+
+  constructor() {
+    super();
+    this.initProjector();
+  }
+
+  init() {
+    console.log("This is a lifecycle for BringYourOwnProjector");
+  }
+
+  initProjector() {
+    this.rootElement = document.createElement("div");
+    this.rootElement.classList.add("root");
+    this.createProjector(this.rootElement, this.render);
+    console.log("init");
+  }
+
+  @PropertyRenderOnSet
+  name: string = "foo";
+
+  #_doneSOmething = false;
+
+  get doneSomething() {
+    return this.#_doneSOmething;
+  }
+
+  doItNow(value) {
+    this.#_doneSOmething = value;
+    this.renderNow();
+  }
+
+  rootElement: HTMLDivElement;
+
+  render() {
+    return <div>Hello {this.name} {this.doneSomething && <p>We did it!!</p>}</div>;
+  }
+
+   connectedCallback() {
+    this.appendChild(this.rootElement);
+  }
+
+}
+
+// Bring your own projector in non shadow root element
+@CustomElementConfig({
+  tagName: "bring-your-own-projector-in-shadow-root",
+})
+export class BringYourOwnProjectorInShadowRoot extends CustomElement {
+
+  constructor() {
+    super();
+    this.initProjector();
+  }
+
+  init() {
+    console.log("This is a lifecycle for BringYourOwnProjector");
+  }
+
+  initProjector() {
+    this.attachShadow({ mode: "open" });
+    this.rootElement = document.createElement("div");
+    this.rootElement.classList.add("root");
+    this.createProjector(this.rootElement, this.render);
+    console.log("init");
+  }
+
+  @PropertyRenderOnSet
+  name: string = "foo";
+
+  #_doneSOmething = false;
+
+  get doneSomething() {
+    return this.#_doneSOmething;
+  }
+
+  doItNow(value) {
+    this.#_doneSOmething = value;
+    this.renderNow();
+  }
+
+  rootElement: HTMLDivElement;
+
+  render() {
+    return <div>Hello {this.name} {this.doneSomething && <p>We did it!!</p>}</div>;
+  }
+
+   connectedCallback() {
+    this.shadowRoot.appendChild(this.rootElement);
+  }
+
+}

package/src/test-setup.ts

@@ -0,0 +1,85 @@
+/**
+ * Test setup file - Vitest configuration
+ * Configures polyfills and global test utilities
+ */
+
+import { expect, afterEach, vi } from 'vitest';
+
+// Import Maquette at the top level for type definitions
+import * as Maquette from './maquette/index.js';
+
+// Declare global Maquette if in browser environment
+declare global {
+  interface Window {
+    Maquette: typeof Maquette;
+  }
+}
+
+// Only run setup code if we're in a browser environment
+if (typeof window !== 'undefined') {
+  // Set up Maquette global
+  (window as any).Maquette = Maquette;
+  
+  // Import and register CustomStyleElement for CSS @apply polyfill
+  if (typeof HTMLLinkElement !== 'undefined') {
+    import('./custom-style-element.js').catch(() => {
+      // Ignore if import fails in test environment
+    });
+  }
+}
+
+// Extend Chai matchers for better custom element testing
+declare global {
+  namespace Chai {
+    interface Assertion {
+      shadowRoot: ShadowRoot;
+    }
+  }
+}
+
+// Store for tracking registered custom element names to prevent conflicts
+const registeredElements = new Set<string>();
+const elementsCreated: HTMLElement[] = [];
+
+/**
+ * Generate a unique custom element tag name for testing
+ * Ensures no conflicts between test cases
+ */
+export function generateUniqueTagName(prefix: string = 'test-element'): string {
+  const timestamp = Date.now();
+  const random = Math.random().toString(36).substr(2, 9);
+  const tagName = `${prefix}-${timestamp}-${random}`.toLowerCase();
+  
+  registeredElements.add(tagName);
+  return tagName;
+}
+
+/**
+ * Clean up helper - unregister all test elements after tests
+ * Note: CustomElementRegistry doesn't support unregistration,
+ * so we track what was registered for uniqueness
+ */
+export function resetRegisteredElements(): void {
+  registeredElements.clear();
+}
+
+/**
+ * Track created elements for cleanup
+ */
+export function trackElement(el: HTMLElement): void {
+  elementsCreated.push(el);
+}
+
+/**
+ * Clean up all created elements after each test
+ */
+afterEach(() => {
+  elementsCreated.forEach(el => {
+    if (el.parentElement) {
+      el.parentElement.removeChild(el);
+    }
+  });
+  elementsCreated.length = 0;
+});
+// Global test timeout for async operations
+export const DEFAULT_TEST_TIMEOUT = 5000;