p-elements-core 1.2.32-rc2 → 1.2.32-rc4

package/src/custom-element.ts

@@ -125,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.
@@ -403,7 +417,9 @@ 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();
+        }
       });
     }
   }

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

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