p-elements-core 1.2.32-rc5 → 1.2.32-rc7

package/src/custom-element.ts

@@ -241,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
@@ -389,10 +387,13 @@ 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(resolve));
+
     return new Promise<Projector>((resolve, reject) => {
       let projector: Projector;
       const mode = this.#projectorMode ? this.#projectorMode : "append";
@@ -406,7 +407,9 @@ export abstract class CustomElement extends HTMLElement {
         });
         projector[mode](element, render.bind(this));
         this.#projector = projector;
-        projector.renderNow();
+        requestAnimationFrame(() => {
+          projector.renderNow();
+        });
         resolve(projector);
         this.dispatchEvent(new CustomEvent("firstRender", {}));
       });
@@ -571,7 +574,6 @@ export abstract class CustomElement extends HTMLElement {
     if (this.#connected === false) {
       return;
     }
-    console.log("disconnectedCallback called");
     this.#connected = false;
     let i = 0;
     const controllersLength = this.#controllers.length;
@@ -601,10 +603,8 @@ export abstract class CustomElement extends HTMLElement {
     newValue: string | null,
   ): void {
     // Skip if this attribute change came from a property setter (prevent infinite loop)
-    if (isSettingAttribute(this)) {
-      return;
-    }
-    if (newValue === oldValue) {
+    // 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;

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