p-elements-core 1.2.30 → 1.2.32-rc-10

package/readme.md

@@ -1,206 +1,206 @@
-# P-Element
-
-## CustomElement base class
-
-### Static properties
-
-#### `projectorMode` "append", "merge" or "replace"
-
-The projector mode when using `templateFromString` function
-
-#### `style` string
-
-The style is adopted to the rootNode.
-if this is set there is no need for calling `templateFromString`. A root node is created and replaced with the result of the `render` function.
-
-example
-
-``` typescript
-class MyElement extends CustomElement {
-  static style = `
-  :host {
-    color: red;
-  }`;
-
-  render = () :VNode {
-    return <div>Hello world</div>;
-  }
-}
-```
-
-#### `isFormAssociated` boolean
-
-If true, elementInternals are created using attachInternals in the constructor.
-
-example
-
-``` typescript
-class MyElement extends CustomElement {
-
-  static isFormAssociated = true;
-
-  @Property({type: "string", attribute: "value", reflect: true })
-  value: string = "Peter" ;
-
-  updated(property: string, oldValue: any, newValue: any) {
-    if (property === "value"){
-      this.internals.setFormValue(this.value);
-    }
-  }
-
-  render = () :VNode {
-    return <div>Hello {this.value}.</div>;
-  }
-}
-```
-
-### Decorators
-
-#### `@CustomElementConfig`
-
-Use this decorator to define the custom element
-
-example
-
-``` typescript
-@CustomElementConfig({
-  tagName: "p-foo",
-})
-class PFooElement extends CustomElement {
-  ...
-}
-```
-
-If you want to extend a build in component you need to specify the buildin.
-
-example
-
-``` typescript
-@CustomElementConfig({
-    tagName: "super-a",
-    options: {
-      extends: "a",
-    },
-  })
-class SuperAnchorElement extends HTMLAnchorElement {
-  ...
-}
-```
-
-#### `@Property`
-
-Use the `@Property` decorator to define reactive properties.
-
-example
-
-``` typescript
-@CustomElementConfig({
-  tagName: "p-foo",
-})
-class PFooElement extends CustomElement {
-  ...
-
-  @Property({type: "string", attribute: "nick-name", reflect: true})
-  nickName: string;
-
-  attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
-    super.attributeChangedCallback(name, oldValue, newValue);
-    ...
-  }
-```
-The `type` option could be  "string", "number", "boolean" or "object".
-
-If `attribute` option is set the property will be set on attribute change. If you implement a `attributeChangeCallback` you need to call the `super.attributeChangedCallback`.
-
-If `reflect` is `true` the attribute is set on property change.
-
-Use `converter` option to convert attribute to property
-
-``` typescript
-const stringArrayConverter: AttributeConverter<string[]> = {
-  fromAttribute: (value) => {
-    if (!value) {
-      return null;
-    }
-    return value.split(",").map((v) => v.trim());
-  },
-  toAttribute: (value) => {
-    if (!value.join) {
-      return null;
-    }
-    return value.join(",");
-  },
-};
-
-class MyElement extend CustomElement {
-  @Property({attribute: "items", reflect: true, converter: stringArrayConverter})
-  items: string[] = ["foo", "bar"];
-}
-```
-#### `@Query` decorator
-
-Use the `@Query` decorator to define a property that returns an element from the shadow dom.
-
-example
-
-``` typescript
-class PFooElement extends CustomElement {
-  ...
-  @Query("#MyInput")
-  nameInput: HTMLInputElement;
-
-  render = () => {
-    return <div>
-      <label for="MyInput"></label>
-      <input type="text" id="MyInput" />
-    </div>;
-  }
-}
-```
-
-#### `@PropertyRenderOnSet` `@RenderOnSet`
-
-Properties decorated with `@PropertyRenderOnSet` or `@RenderOnSet` call renderNow when setting a value.
-
-example
-
-``` typescript
-class PFooElement extends CustomElement {
-  ...
-  @PropertyRenderOnSet
-  public foo: string = "foo";
-}
-```
-
-#### `@Bind`
-(deprecated, use arrow function `myFn = () => console.log('myFn')`)
-
-Functions decorated with `@Bind` will be replaced with the result of bind(this) on the function.
-
-
-### Hooks
-
-#### `init`
-
-The init is the first function called after initialising of the custom element
-
-#### `shouldUpdate`
-
-Before a property is set to a new value
-
-#### `updated`
-
-After a property value is set to a new value
-
-#### `renderStart`
-
-When the custom element start the rendering 
-
-#### `renderDone`
-
-When the custom element is finished rendering
-
-#### `attributeChangedCallback`
-
-Call `super.attributeChangedCallback()` first.
-
+# P-Element
+
+## CustomElement base class
+
+### Static properties
+
+#### `projectorMode` "append", "merge" or "replace"
+
+The projector mode when using `templateFromString` function
+
+#### `style` string
+
+The style is adopted to the rootNode.
+if this is set there is no need for calling `templateFromString`. A root node is created and replaced with the result of the `render` function.
+
+example
+
+``` typescript
+class MyElement extends CustomElement {
+  static style = `
+  :host {
+    color: red;
+  }`;
+
+  render = () :VNode {
+    return <div>Hello world</div>;
+  }
+}
+```
+
+#### `isFormAssociated` boolean
+
+If true, elementInternals are created using attachInternals in the constructor.
+
+example
+
+``` typescript
+class MyElement extends CustomElement {
+
+  static isFormAssociated = true;
+
+  @Property({type: "string", attribute: "value", reflect: true })
+  value: string = "Peter" ;
+
+  updated(property: string, oldValue: any, newValue: any) {
+    if (property === "value"){
+      this.internals.setFormValue(this.value);
+    }
+  }
+
+  render = () :VNode {
+    return <div>Hello {this.value}.</div>;
+  }
+}
+```
+
+### Decorators
+
+#### `@CustomElementConfig`
+
+Use this decorator to define the custom element
+
+example
+
+``` typescript
+@CustomElementConfig({
+  tagName: "p-foo",
+})
+class PFooElement extends CustomElement {
+  ...
+}
+```
+
+If you want to extend a build in component you need to specify the buildin.
+
+example
+
+``` typescript
+@CustomElementConfig({
+    tagName: "super-a",
+    options: {
+      extends: "a",
+    },
+  })
+class SuperAnchorElement extends HTMLAnchorElement {
+  ...
+}
+```
+
+#### `@Property`
+
+Use the `@Property` decorator to define reactive properties.
+
+example
+
+``` typescript
+@CustomElementConfig({
+  tagName: "p-foo",
+})
+class PFooElement extends CustomElement {
+  ...
+
+  @Property({type: "string", attribute: "nick-name", reflect: true})
+  nickName: string;
+
+  attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    ...
+  }
+```
+The `type` option could be  "string", "number", "boolean" or "object".
+
+If `attribute` option is set the property will be set on attribute change. If you implement a `attributeChangeCallback` you need to call the `super.attributeChangedCallback`.
+
+If `reflect` is `true` the attribute is set on property change.
+
+Use `converter` option to convert attribute to property
+
+``` typescript
+const stringArrayConverter: AttributeConverter<string[]> = {
+  fromAttribute: (value) => {
+    if (!value) {
+      return null;
+    }
+    return value.split(",").map((v) => v.trim());
+  },
+  toAttribute: (value) => {
+    if (!value.join) {
+      return null;
+    }
+    return value.join(",");
+  },
+};
+
+class MyElement extend CustomElement {
+  @Property({attribute: "items", reflect: true, converter: stringArrayConverter})
+  items: string[] = ["foo", "bar"];
+}
+```
+#### `@Query` decorator
+
+Use the `@Query` decorator to define a property that returns an element from the shadow dom.
+
+example
+
+``` typescript
+class PFooElement extends CustomElement {
+  ...
+  @Query("#MyInput")
+  nameInput: HTMLInputElement;
+
+  render = () => {
+    return <div>
+      <label for="MyInput"></label>
+      <input type="text" id="MyInput" />
+    </div>;
+  }
+}
+```
+
+#### `@PropertyRenderOnSet` `@RenderOnSet`
+
+Properties decorated with `@PropertyRenderOnSet` or `@RenderOnSet` call renderNow when setting a value.
+
+example
+
+``` typescript
+class PFooElement extends CustomElement {
+  ...
+  @PropertyRenderOnSet
+  public foo: string = "foo";
+}
+```
+
+#### `@Bind`
+(deprecated, use arrow function `myFn = () => console.log('myFn')`)
+
+Functions decorated with `@Bind` will be replaced with the result of bind(this) on the function.
+
+
+### Hooks
+
+#### `init`
+
+The init is the first function called after initialising of the custom element
+
+#### `shouldUpdate`
+
+Before a property is set to a new value
+
+#### `updated`
+
+After a property value is set to a new value
+
+#### `renderStart`
+
+When the custom element start the rendering 
+
+#### `renderDone`
+
+When the custom element is finished rendering
+
+#### `attributeChangedCallback`
+
+Call `super.attributeChangedCallback()` first.
+

package/src/custom-element-controller.test.ts

@@ -0,0 +1,226 @@
+/**
+ * Tests for CustomElementController
+ */
+
+import { describe, it, expect } from 'vitest';
+import './test-setup.js';
+import { CustomElement } from './custom-element.js';
+import { CustomElementController } from './custom-element-controller.js';
+import { customElementConfig } from './decorators/custom-element-config.js';
+import { generateUniqueTagName } from './test-setup.js';
+import { waitForRender } from './test-utils.js';
+
+describe('CustomElementController', () => {
+  describe('Controller lifecycle', () => {
+    it('should register controller with host element', async () => {
+      const tagName = generateUniqueTagName('controller-test');
+      let controller: TestController | null = null;
+
+      class TestController extends CustomElementController {
+        testMethod() {
+          return 'test';
+        }
+      }
+
+      @customElementConfig({ tagName })
+      class ControllerTest extends CustomElement {
+        controller: TestController;
+
+        init() {
+          this.controller = new TestController(this);
+        }
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ControllerTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(el.controller).toBeDefined();
+      expect(el.controller.hostElement).toBe(el);
+      expect(el.controller.testMethod()).toBe('test');
+
+      document.body.removeChild(el);
+    });
+
+    it('should call controller.connected() on element connection', async () => {
+      const tagName = generateUniqueTagName('controller-test');
+      let connectedCalled = false;
+
+      class TestController extends CustomElementController {
+        connected() {
+          connectedCalled = true;
+        }
+      }
+
+      @customElementConfig({ tagName })
+      class ControllerTest extends CustomElement {
+        init() {
+          new TestController(this);
+        }
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ControllerTest;
+      expect(connectedCalled).toBe(false);
+
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(connectedCalled).toBe(true);
+      document.body.removeChild(el);
+    });
+
+    it('should call controller.disconnected() on element disconnection', async () => {
+      const tagName = generateUniqueTagName('controller-test');
+      let disconnectedCalled = false;
+
+      class TestController extends CustomElementController {
+        disconnected() {
+          disconnectedCalled = true;
+        }
+      }
+
+      @customElementConfig({ tagName })
+      class ControllerTest extends CustomElement {
+        static style = ':host { display: block; }';
+        
+        init() {
+          new TestController(this);
+        }
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ControllerTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(disconnectedCalled).toBe(false);
+
+      document.body.removeChild(el);
+      expect(disconnectedCalled).toBe(true);
+    });
+
+    it('should trigger render when controller calls renderNow()', async () => {
+      const tagName = generateUniqueTagName('controller-test');
+      let renderCount = 0;
+
+      class TestController extends CustomElementController {
+        triggerRender() {
+          this.renderNow();
+        }
+      }
+
+      @customElementConfig({ tagName })
+      class ControllerTest extends CustomElement {
+        static style = ':host { display: block; }';
+        controller: TestController;
+
+        init() {
+          this.controller = new TestController(this);
+        }
+
+        render() {
+          renderCount++;
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ControllerTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      const initialRenderCount = renderCount;
+      el.controller.triggerRender();
+      await waitForRender(el);
+
+      expect(renderCount).toBeGreaterThan(initialRenderCount);
+      document.body.removeChild(el);
+    });
+
+    it('should schedule render when controller calls scheduleRender()', async () => {
+      const tagName = generateUniqueTagName('controller-test');
+      let renderCount = 0;
+
+      class TestController extends CustomElementController {
+        triggerSchedule() {
+          this.scheduleRender();
+        }
+      }
+
+      @customElementConfig({ tagName })
+      class ControllerTest extends CustomElement {
+        static style = ':host { display: block; }';
+        controller: TestController;
+
+        init() {
+          this.controller = new TestController(this);
+        }
+
+        render() {
+          renderCount++;
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ControllerTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      const initialRenderCount = renderCount;
+      el.controller.triggerSchedule();
+      await waitForRender(el);
+
+      expect(renderCount).toBeGreaterThan(initialRenderCount);
+      document.body.removeChild(el);
+    });
+
+    it('should call hostRenderStart and hostRenderDone hooks', async () => {
+      const tagName = generateUniqueTagName('controller-test');
+      let startCalled = false;
+      let doneCalled = false;
+
+      class TestController extends CustomElementController {
+        hostRenderStart() {
+          startCalled = true;
+        }
+
+        hostRenderDone() {
+          doneCalled = true;
+        }
+      }
+
+      @customElementConfig({ tagName })
+      class ControllerTest extends CustomElement {
+        static style = ':host { display: block; }';
+        
+        constructor() {
+          super();
+          new TestController(this);
+        }
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ControllerTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(startCalled).toBe(true);
+      expect(doneCalled).toBe(true);
+
+      document.body.removeChild(el);
+    });
+  });
+});

package/src/custom-element-controller.ts

@@ -1,31 +1,31 @@
-import type { CustomElement } from './custom-element';
-
-export interface ICustomElementController {
-  renderNow(): void;
-  init?: () => void;
-  connected? : () => void;
-  disconnected? : () => void;
-  hostRenderStart?: () => void;
-  hostRenderDone? : () => void;
-  hostElement: CustomElement;
-}
-export abstract class CustomElementController implements ICustomElementController {
-  constructor(hostElement: CustomElement) {
-    this.#hostElement = hostElement;
-    this.#hostElement.addController(this);
-  }
-
-  #hostElement: CustomElement;
-
-  get hostElement() {
-    return this.#hostElement;
-  }
-
-  renderNow() {
-    this.hostElement?.renderNow();
-  }
-
-  scheduleRender() {
-    this.hostElement?.scheduleRender();
-  }
-}
+import type { CustomElement } from './custom-element';
+
+export interface ICustomElementController {
+  renderNow(): void;
+  init?: () => void;
+  connected? : () => void;
+  disconnected? : () => void;
+  hostRenderStart?: () => void;
+  hostRenderDone? : () => void;
+  hostElement: CustomElement;
+}
+export abstract class CustomElementController implements ICustomElementController {
+  constructor(hostElement: CustomElement) {
+    this.#hostElement = hostElement;
+    this.#hostElement.addController(this);
+  }
+
+  #hostElement: CustomElement;
+
+  get hostElement() {
+    return this.#hostElement;
+  }
+
+  renderNow() {
+    this.hostElement?.renderNow();
+  }
+
+  scheduleRender() {
+    this.hostElement?.scheduleRender();
+  }
+}