p-elements-core 1.2.32-rc6 → 1.2.32-rc8

package/src/custom-element.ts

@@ -131,7 +131,7 @@ export abstract class CustomElement extends HTMLElement {
    *
    * @returns {readonly PropertyOptionsWithName[]} Array of property metadata
    */
-  get properties() : readonly PropertyOptionsWithName[] {
+  get properties(): readonly PropertyOptionsWithName[] {
     const ctor = this.constructor as ComponentConstructor;
     if (!ctor._propertyInfo) {
       return [];
@@ -374,11 +374,10 @@ export abstract class CustomElement extends HTMLElement {
       this.#initStylesheet(styleElement.textContent);
       styleElement.remove();
     }
-     window.addEventListener("updatecssapply", () => {
+    window.addEventListener("updatecssapply", () => {
       this.#polyfillCssApply();
     });
 
-
     return fragment;
   }
 
@@ -389,10 +388,17 @@ export abstract class CustomElement extends HTMLElement {
     this.addStylesheetToRootNode(css, root);
   }
 
-  protected createProjector(
+  protected async createProjector(
     element: Element,
     render: () => VNode,
   ): Promise<Projector> {
+    await new Promise((resolve) =>
+      requestAnimationFrame(() => requestAnimationFrame(resolve)),
+    );
+    return await 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";
@@ -402,7 +408,7 @@ export abstract class CustomElement extends HTMLElement {
             if (eventName === "renderStart" || eventName === "renderDone") {
               this.#invokeRenderLifecycleFn(eventName);
             }
-          }
+          },
         });
         projector[mode](element, render.bind(this));
         this.#projector = projector;
@@ -425,13 +431,21 @@ export abstract class CustomElement extends HTMLElement {
   }
 
   #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") {
@@ -488,18 +502,17 @@ 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", () => {
+      window.addEventListener("updatecssapply", () => {
         this.#polyfillCssApply();
       });
-
     }
   }
 
-#polyfillCssApply(): string {
+  #polyfillCssApply(): string {
     let style = replaceApplyToCssVars(this.#cssText);
     if (this.#cssText !== style) {
       this.#cssText = style;
@@ -510,14 +523,13 @@ export abstract class CustomElement extends HTMLElement {
           URL.revokeObjectURL(this.#linkElement.href);
         }
         this.#linkElement.href = URL.createObjectURL(
-          new Blob([style], { type: "text/css" })
+          new Blob([style], { type: "text/css" }),
         );
       }
     }
     return style;
   }
 
-
   #initStylesheet(style: string) {
     this.#cssText = style;
     if (this.#useShadowRoot && this.shadowRoot) {

package/src/decorators/bind.test.ts

@@ -1,163 +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);
-  });
-});
+/**
+ * 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/bind.ts

@@ -1,46 +1,46 @@
-export const bind = (target, key, descriptor) => {
-  let fn = descriptor.value;
-  // console.warn("@Bind decorator is deprecated, use arrow function expression");
-  if (typeof fn !== "function") {
-    throw new Error(
-      `@Bind decorator can only be applied to methods not: ${typeof fn}`
-    );
-  }
-
-  // In IE11 calling Object.defineProperty has a side-effect of evaluating the
-  // getter for the property which is being replaced. This causes infinite
-  // recursion and an "Out of stack space" error.
-  let definingProperty = false;
-
-  return {
-    configurable: true,
-    get() {
-      if (
-        definingProperty ||
-        this === target.prototype ||
-        this.hasOwnProperty(key) ||
-        typeof fn !== "function"
-      ) {
-        return fn;
-      }
-
-      let boundFn = fn.bind(this);
-      definingProperty = true;
-      Object.defineProperty(this, key, {
-        configurable: true,
-        get() {
-          return boundFn;
-        },
-        set(value) {
-          fn = value;
-          delete this[key];
-        },
-      });
-      definingProperty = false;
-      return boundFn;
-    },
-    set(value) {
-      fn = value;
-    },
-  };
-};
+export const bind = (target, key, descriptor) => {
+  let fn = descriptor.value;
+  // console.warn("@Bind decorator is deprecated, use arrow function expression");
+  if (typeof fn !== "function") {
+    throw new Error(
+      `@Bind decorator can only be applied to methods not: ${typeof fn}`
+    );
+  }
+
+  // In IE11 calling Object.defineProperty has a side-effect of evaluating the
+  // getter for the property which is being replaced. This causes infinite
+  // recursion and an "Out of stack space" error.
+  let definingProperty = false;
+
+  return {
+    configurable: true,
+    get() {
+      if (
+        definingProperty ||
+        this === target.prototype ||
+        this.hasOwnProperty(key) ||
+        typeof fn !== "function"
+      ) {
+        return fn;
+      }
+
+      let boundFn = fn.bind(this);
+      definingProperty = true;
+      Object.defineProperty(this, key, {
+        configurable: true,
+        get() {
+          return boundFn;
+        },
+        set(value) {
+          fn = value;
+          delete this[key];
+        },
+      });
+      definingProperty = false;
+      return boundFn;
+    },
+    set(value) {
+      fn = value;
+    },
+  };
+};

package/src/decorators/custom-element-config.ts

@@ -1,17 +1,17 @@
-export interface IElementConfig {
-  tagName: string;
-  options?: {
-    extends: string;
-  };
-}
-export const customElementConfig = (config: IElementConfig) => {
-  return (Element) => {
-    if (customElements.get(config.tagName)) {
-      console.warn(
-        `Custom element with tag name ${config.tagName} already exists.`
-      );
-      return;
-    }
-    customElements.define(config.tagName, Element, config.options);
-  };
-};
+export interface IElementConfig {
+  tagName: string;
+  options?: {
+    extends: string;
+  };
+}
+export const customElementConfig = (config: IElementConfig) => {
+  return (Element) => {
+    if (customElements.get(config.tagName)) {
+      console.warn(
+        `Custom element with tag name ${config.tagName} already exists.`
+      );
+      return;
+    }
+    customElements.define(config.tagName, Element, config.options);
+  };
+};