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

package/src/custom-element.ts

@@ -6,6 +6,7 @@ import {
 
 import { ICustomElementController } from "./custom-element-controller";
 import { Projector, VNode } from "./maquette/interfaces";
+import { replaceApplyToCssVars } from "./helpers/css";
 
 export type ElementProjectorMode = "append" | "merge" | "replace";
 
@@ -70,7 +71,7 @@ export abstract class CustomElement extends HTMLElement {
 
   #internalsObjectUntilAttached: object | null;
 
-  #controllers: ICustomElementController[] = [];
+  readonly #controllers: ICustomElementController[] = [];
 
   /** Promise that resolves when the current update is complete */
   #updatePromise: Promise<void> | null = null;
@@ -124,6 +125,20 @@ export abstract class CustomElement extends HTMLElement {
     return this.#connected;
   }
 
+  /**
+   * Array of reactive property metadata for the component, indexed by property name.
+   * Used by @property decorator and attributeChangedCallback
+   *
+   * @returns {readonly PropertyOptionsWithName[]} Array of property metadata
+   */
+  get properties(): readonly PropertyOptionsWithName[] {
+    const ctor = this.constructor as ComponentConstructor;
+    if (!ctor._propertyInfo) {
+      return [];
+    }
+    return Array.from(ctor._propertyInfo.values());
+  }
+
   /**
    * Promise that resolves when the component has finished updating
    * and rendering to the DOM.
@@ -216,7 +231,7 @@ export abstract class CustomElement extends HTMLElement {
    * @public
    */
   renderNow(): void {
-    if (!this.shadowRoot) {
+    if (this.#useShadowRoot && !this.shadowRoot) {
       return;
     }
 
@@ -226,8 +241,6 @@ export abstract class CustomElement extends HTMLElement {
         this.#updateResolve = resolve;
       });
     }
-    // this.#projector.
-    // render(this.shadowRoot, this.render());
     this.#projector?.renderNow();
 
     // Call updated() lifecycle hook after DOM updates are complete
@@ -299,6 +312,7 @@ export abstract class CustomElement extends HTMLElement {
       if (!this.#cssSheet) {
         this.#cssSheet = new CSSStyleSheet();
       }
+      style = this.#polyfillCssApply();
       this.#cssSheet.replaceSync(style);
       if (this.#isSheetAdopted) {
         return;
@@ -320,6 +334,7 @@ export abstract class CustomElement extends HTMLElement {
     } else {
       this.#linkElement = document.createElement("link");
       this.#linkElement.rel = "stylesheet";
+      style = this.#polyfillCssApply();
       this.#linkElement.href = URL.createObjectURL(
         new Blob([style], { type: "text/css" }),
       );
@@ -357,6 +372,9 @@ export abstract class CustomElement extends HTMLElement {
       this.#initStylesheet(styleElement.textContent);
       styleElement.remove();
     }
+    window.addEventListener("updatecssapply", () => {
+      this.#polyfillCssApply();
+    });
 
     return fragment;
   }
@@ -368,10 +386,14 @@ export abstract class CustomElement extends HTMLElement {
     this.addStylesheetToRootNode(css, root);
   }
 
-  protected createProjector(
+  protected async createProjector(
     element: Element,
     render: () => VNode,
   ): Promise<Projector> {
+    return this.#createProjector(element, render);
+  }
+
+  #createProjector(element: Element, render: () => VNode): Promise<Projector> {
     return new Promise<Projector>((resolve, reject) => {
       let projector: Projector;
       const mode = this.#projectorMode ? this.#projectorMode : "append";
@@ -381,7 +403,7 @@ export abstract class CustomElement extends HTMLElement {
             if (eventName === "renderStart" || eventName === "renderDone") {
               this.#invokeRenderLifecycleFn(eventName);
             }
-          }
+          },
         });
         projector[mode](element, render.bind(this));
         this.#projector = projector;
@@ -396,19 +418,29 @@ export abstract class CustomElement extends HTMLElement {
     if (typeof (this as any).init === "function") {
       (this as any).init();
       this.#controllers.forEach((controller) => {
-        controller?.init();
+        if (controller?.init) {
+          controller.init();
+        }
       });
     }
   }
 
   #invokeRenderLifecycleFn(eventName: string) {
-    if (this[eventName]){
-      this[eventName](eventName === "renderStart" ? this.#isFirstRenderStart : this.#isFirstRenderDone);
+    if (this[eventName]) {
+      this[eventName](
+        eventName === "renderStart"
+          ? this.#isFirstRenderStart
+          : this.#isFirstRenderDone,
+      );
     }
     const controllerEventName = `host${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`;
     this.#controllers.forEach((controller) => {
       if (controller[controllerEventName]) {
-        controller[controllerEventName](eventName === "renderStart" ? this.#isFirstRenderStart : this.#isFirstRenderDone);
+        controller[controllerEventName](
+          eventName === "renderStart"
+            ? this.#isFirstRenderStart
+            : this.#isFirstRenderDone,
+        );
       }
     });
     if (eventName === "renderStart") {
@@ -465,14 +497,33 @@ export abstract class CustomElement extends HTMLElement {
       const div = document.createElement("div");
       this.shadowRoot.appendChild(div);
       requestAnimationFrame(() => {
-        this.createProjector(div, (this as any).render).then(() => {
+        this.#createProjector(div, (this as any).render).then(() => {
           this.#upgradeProperties();
-        })
+        });
+      });
+      window.addEventListener("updatecssapply", () => {
+        this.#polyfillCssApply();
       });
     }
   }
 
-
+  #polyfillCssApply(): string {
+    let style = replaceApplyToCssVars(this.#cssText);
+    if (this.#cssText !== style) {
+      this.#cssText = style;
+      if (this.#hasAdoptedStyleSheetsSupport && this.#cssSheet) {
+        this.#cssSheet.replaceSync(style);
+      } else if (!this.#hasAdoptedStyleSheetsSupport) {
+        if (this.#linkElement) {
+          URL.revokeObjectURL(this.#linkElement.href);
+        }
+        this.#linkElement.href = URL.createObjectURL(
+          new Blob([style], { type: "text/css" }),
+        );
+      }
+    }
+    return style;
+  }
 
   #initStylesheet(style: string) {
     this.#cssText = style;
@@ -501,6 +552,9 @@ export abstract class CustomElement extends HTMLElement {
    * Initializes controllers, processes pending property updates, and renders.
    */
   connectedCallback(): void {
+    if (this.#connected) {
+      return;
+    }
     this.#connected = true;
     let i = 0;
     const controllersLength = this.#controllers.length;
@@ -521,6 +575,9 @@ export abstract class CustomElement extends HTMLElement {
    * Marks the component as disconnected.
    */
   disconnectedCallback(): void {
+    if (this.#connected === false) {
+      return;
+    }
     this.#connected = false;
     let i = 0;
     const controllersLength = this.#controllers.length;
@@ -539,21 +596,21 @@ export abstract class CustomElement extends HTMLElement {
    * Prevents infinite loops by skipping updates initiated by property setters
    *
    * @param {string} name - The name of the changed attribute
-   * @param {string | null} _oldValue - The previous attribute value (unused)
+   * @param {string | null} oldValue - The previous attribute value (unused)
    * @param {string | null} newValue - The new attribute value
    *
    * @private
    */
   attributeChangedCallback(
     name: string,
-    _oldValue: string | null,
+    oldValue: string | null,
     newValue: string | null,
   ): void {
     // Skip if this attribute change came from a property setter (prevent infinite loop)
-    if (isSettingAttribute(this)) {
+    // Also skip if the value didn't actually change (some browsers may call this callback even if the value is the same)
+    if (isSettingAttribute(this) || newValue === oldValue) {
       return;
     }
-
     const ctor = this.constructor as ComponentConstructor;
     if (!ctor?._propertyInfo) {
       return;

package/src/custom-style-element.ts

@@ -28,4 +28,7 @@ customElements.whenDefined("custom-style").then(() => {
   document.body.parentElement.classList.add("custom-style-defined");
 });
 
-customElements.define("custom-style", CustomStyleElement, { extends: "link" });
+// Only define if not already defined
+if (!customElements.get("custom-style")) {
+  customElements.define("custom-style", CustomStyleElement, { extends: "link" });
+}

package/src/decorators/bind.test.ts

@@ -0,0 +1,163 @@
+/**
+ * Tests for @bind decorator
+ * Covers method binding to preserve 'this' context
+ */
+
+import { describe, it, expect } from 'vitest';
+import '../test-setup.js';
+import { bind } from './bind.js';
+import { CustomElement } from '../custom-element.js';
+import { customElementConfig } from './custom-element-config.js';
+import { generateUniqueTagName } from '../test-setup.js';
+import { waitForRender } from '../test-utils.js';
+
+describe('@bind decorator', () => {
+  it('should bind method to instance', async () => {
+    const tagName = generateUniqueTagName('bind-test');
+    
+    @customElementConfig({ tagName })
+    class BindTest extends CustomElement {
+      static style = ':host { display: block; }';
+      value = 'bound';
+
+      @bind
+      getValue() {
+        return this.value;
+      }
+
+      render() {
+        return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+      }
+    }
+
+    const el = document.createElement(tagName) as BindTest;
+    document.body.appendChild(el);
+    await waitForRender(el);
+
+    const method = el.getValue;
+    expect(method()).toBe('bound');
+    
+    document.body.removeChild(el);
+  });
+
+  it('should preserve this context when method is extracted', async () => {
+    const tagName = generateUniqueTagName('bind-test');
+    
+    @customElementConfig({ tagName })
+    class BindTest extends CustomElement {
+      static style = ':host { display: block; }';
+      name = 'test-element';
+
+      @bind
+      getName() {
+        return this.name;
+      }
+
+      render() {
+        return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+      }
+    }
+
+    const el = document.createElement(tagName) as BindTest;
+    document.body.appendChild(el);
+    await waitForRender(el);
+
+    const { getName } = el;
+    expect(getName()).toBe('test-element');
+    
+    document.body.removeChild(el);
+  });
+
+  it('should work with callbacks', async () => {
+    const tagName = generateUniqueTagName('bind-test');
+    let result: string;
+    
+    @customElementConfig({ tagName })
+    class BindTest extends CustomElement {
+      static style = ':host { display: block; }';
+      message = 'callback test';
+
+      @bind
+      handleCallback() {
+        return this.message;
+      }
+
+      render() {
+        return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+      }
+    }
+
+    const el = document.createElement(tagName) as BindTest;
+    document.body.appendChild(el);
+    await waitForRender(el);
+
+    const callback = el.handleCallback;
+    result = callback();
+    
+    expect(result).toBe('callback test');
+    
+    document.body.removeChild(el);
+  });
+
+  it('should handle methods with arguments', async () => {
+    const tagName = generateUniqueTagName('bind-test');
+    
+    @customElementConfig({ tagName })
+    class BindTest extends CustomElement {
+      static style = ':host { display: block; }';
+      
+      prefixValue = 'Hello';
+
+      @bind
+      greet(name: string) {
+        return `${this.prefixValue}, ${name}!`;
+      }
+
+      render() {
+        return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+      }
+    }
+
+    const el = document.createElement(tagName) as BindTest;
+    document.body.appendChild(el);
+    await waitForRender(el);
+
+    const extracted = el.greet;
+    expect(extracted('World')).toBe('Hello, World!');
+    
+    document.body.removeChild(el);
+  });
+
+  it('should preserve bound method reference', async () => {
+    const tagName = generateUniqueTagName('bind-test');
+    
+    @customElementConfig({ tagName })
+    class BindTest extends CustomElement {
+      static style = ':host { display: block; }';
+      
+      valueNum = 42;
+
+      @bind
+      getValue() {
+        return this.valueNum;
+      }
+
+      render() {
+        return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+      }
+    }
+
+    const el = document.createElement(tagName) as BindTest;
+    document.body.appendChild(el);
+    await waitForRender(el);
+
+    const bound1 = el.getValue;
+    const bound2 = el.getValue;
+    
+    // Should return the same bound function
+    expect(bound1).toBe(bound2);
+    expect(bound1()).toBe(42);
+    
+    document.body.removeChild(el);
+  });
+});

package/src/decorators/property.test.ts

@@ -0,0 +1,279 @@
+/**
+ * Tests for @property decorator
+ * Covers type conversion, attribute reflection, custom converters, and lifecycle integration
+ */
+
+import { describe, it, expect } from 'vitest';
+import '../test-setup.js';
+import { property } from './property.js';
+import { CustomElement } from '../custom-element.js';
+import { customElementConfig } from './custom-element-config.js';
+import { generateUniqueTagName } from '../test-setup.js';
+import { waitForRender } from '../test-utils.js';
+
+describe('@property decorator', () => {
+  describe('Type: String', () => {
+    it('should convert attribute to string property', async () => {
+      const tagName = generateUniqueTagName('prop-string');
+      
+      @customElementConfig({ tagName })
+      class StringTest extends CustomElement {
+        static style = ':host { display: block; }';
+        @property({ type: String })
+        text = 'default';
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as StringTest;
+      el.setAttribute('text', 'hello');
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(el.text).toBe('hello');
+      
+      document.body.removeChild(el);
+    });
+
+    it('should set property from JavaScript', async () => {
+      const tagName = generateUniqueTagName('prop-string');
+      
+      @customElementConfig({ tagName })
+      class StringTest extends CustomElement {
+        static style = ':host { display: block; }';
+        @property({ type: String })
+        text = 'default';
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as StringTest;
+      document.body.appendChild(el);
+      
+      el.text = 'updated';
+      await waitForRender(el);
+
+      expect(el.text).toBe('updated');
+      
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Type: Number', () => {
+    it('should convert attribute to number property', async () => {
+      const tagName = generateUniqueTagName('prop-number');
+      
+      @customElementConfig({ tagName })
+      class NumberTest extends CustomElement {
+        static style = ':host { display: block; }';
+        @property({ type: Number })
+        count = 0;
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as NumberTest;
+      el.setAttribute('count', '42');
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(el.count).toBe(42);
+      
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Type: Boolean', () => {
+    it('should convert presence of attribute to true', async () => {
+      const tagName = generateUniqueTagName('prop-bool');
+      
+      @customElementConfig({ tagName })
+      class BooleanTest extends CustomElement {
+        static style = ':host { display: block; }';
+        @property({ type: Boolean })
+        active = false;
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as BooleanTest;
+      el.setAttribute('active', '');
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(el.active).toBe(true);
+      
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Attribute reflection (reflect: true)', () => {
+    it('should reflect string property to attribute', async () => {
+      const tagName = generateUniqueTagName('prop-reflect');
+      
+      @customElementConfig({ tagName })
+      class ReflectTest extends CustomElement {
+        static style = ':host { display: block; }';
+        @property({ type: String, reflect: true })
+        status = 'pending';
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ReflectTest;
+      document.body.appendChild(el);
+      
+      el.status = 'complete';
+      await waitForRender(el);
+
+      expect(el.getAttribute('status')).toBe('complete');
+      
+      document.body.removeChild(el);
+    });
+
+    it('should reflect boolean property to attribute', async () => {
+      const tagName = generateUniqueTagName('prop-reflect');
+      
+      @customElementConfig({ tagName })
+      class ReflectTest extends CustomElement {
+        static style = ':host { display: block; }';
+        @property({ type: Boolean, reflect: true })
+        active = false;
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ReflectTest;
+      document.body.appendChild(el);
+      
+      el.active = true;
+      await waitForRender(el);
+      expect(el.hasAttribute('active')).toBe(true);
+
+      el.active = false;
+      await waitForRender(el);
+      expect(el.hasAttribute('active')).toBe(false);
+      
+      document.body.removeChild(el);
+    });
+
+    it('should reflect number property to attribute', async () => {
+      const tagName = generateUniqueTagName('prop-reflect');
+      
+      @customElementConfig({ tagName })
+      class ReflectTest extends CustomElement {
+        static style = ':host { display: block; }';
+        @property({ type: Number, reflect: true })
+        count = 0;
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ReflectTest;
+      document.body.appendChild(el);
+      
+      el.count = 42;
+      await waitForRender(el);
+
+      expect(el.getAttribute('count')).toBe('42');
+      
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Property without type conversion', () => {
+    it('should handle object properties', async () => {
+      const tagName = generateUniqueTagName('prop-object');
+      
+      @customElementConfig({ tagName })
+      class ObjectTest extends CustomElement {
+        static style = ':host { display: block; }';
+        @property()
+        data: any = null;
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ObjectTest;
+      document.body.appendChild(el);
+      
+      const testData = { foo: 'bar', num: 123 };
+      el.data = testData;
+      await waitForRender(el);
+
+      expect(el.data).toBe(testData);
+      expect(el.data.foo).toBe('bar');
+      
+      document.body.removeChild(el);
+    });
+
+    it('should handle array properties', async () => {
+      const tagName = generateUniqueTagName('prop-array');
+      
+      @customElementConfig({ tagName })
+      class ArrayTest extends CustomElement {
+        static style = ':host { display: block; }';
+        @property()
+        items: string[] = [];
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ArrayTest;
+      document.body.appendChild(el);
+      
+      el.items = ['a', 'b', 'c'];
+      await waitForRender(el);
+
+      expect(el.items.length).toBe(3);
+      expect(el.items[0]).toBe('a');
+      
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Custom attribute names', () => {
+    it('should support custom attribute names', async () => {
+      const tagName = generateUniqueTagName('prop-custom');
+      
+      @customElementConfig({ tagName })
+      class CustomAttrTest extends CustomElement {
+        static style = ':host { display: block; }';
+        @property({ type: String, attribute: 'data-value' })
+        value = '';
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as CustomAttrTest;
+      document.body.appendChild(el);
+      
+      el.setAttribute('data-value', 'test');
+      await new Promise(resolve => setTimeout(resolve, 10));
+
+      expect(el.value).toBe('test');
+      
+      document.body.removeChild(el);
+    });
+  });
+});