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

package/src/sample/sample.tsx

@@ -1,20 +1,80 @@
 import { Highlightable } from "./mixin/highlight";
 import anime from "animejs";
 
-import {customElementConfig as CustomElementConfig} from "../decorators/custom-element-config";
+import {customElementConfig, customElementConfig as CustomElementConfig} from "../decorators/custom-element-config";
 import {property as Property, AttributeConverter} from "../decorators/property";
 import {propertyRenderOnSet as PropertyRenderOnSet} from "../decorators/render-property-on-set";
 import {query as Query} from "../decorators/query";
 import {CustomElement} from "../custom-element";
 import {CustomElementController} from "../custom-element-controller";
 
+
+@customElementConfig({tagName: "render-on-set"})
+export class RenderOnSet extends CustomElement {
+
+  @PropertyRenderOnSet
+  public name: string = "foo";
+
+  render() {
+    return <div>Render on set: {this.name}</div>;
+  }
+
+  #initDone = false;
+
+  connectedCallback(): void {
+
+    if (this.#initDone) {
+      return
+    }
+    this.#initDone = true;
+    let template = this.templateFromString(`<style>div{color: lime}</style><div />`);
+    this.shadowRoot.appendChild(template);
+    this.createProjector(this.shadowRoot.querySelector("div"), this.render);
+  }
+
+}
+
+
+@CustomElementConfig({
+  tagName: "p-bugs-03",
+})
+export class PBugs03 extends CustomElement {
+  static style = `/* */`;
+
+  @PropertyRenderOnSet
+  private _zero: number = 0;
+
+  private _renderCount: number = 0;
+
+  private alwaysZero() {
+    return 0;
+  }
+
+  private get zero(): number {
+    this._zero = this.alwaysZero();
+    return this._zero;
+  }
+
+  // Bug: Updating a @RenderOnSet property with same value triggers useless re-render
+
+  render() {
+    this._renderCount++;
+
+    return (
+      <div>
+        Value of Zero: {this.zero} - Renders: {this._renderCount}
+      </div>
+    );
+  };
+}
+
 @CustomElementConfig({
   tagName: "my-button",
 })
 export class MyButton extends CustomElement {
   static style = `.foo{background-color: red; color: white; border: 0px;}`;
   static delegatesFocus = true;
-  render = () => {
+  render(){
     return <button class="foo"><slot></slot></button>;
   }
 }
@@ -22,7 +82,7 @@ export class MyButton extends CustomElement {
 @CustomElementConfig({
   tagName: "my-greetings",
 })
-export class MyGreetings extends Highlightable(class extends CustomElement { }) {
+export class MyGreetings extends Highlightable(class extends CustomElement { render() { return <div></div> } }) {
 
   static isFormAssociated = true;
 
@@ -94,7 +154,7 @@ export class MyGreetings extends Highlightable(class extends CustomElement { })
     console.log({ e, p: this });
   };
 
-  private render = () => {
+  render(){
     return (
       <div>
         <input type="checkbox" checked={this.name === "Peter"} />
@@ -139,8 +199,8 @@ export class MyGreetings extends Highlightable(class extends CustomElement { })
             afterCreate={this.peterCreate}
             class="is-peter"
             eventListeners={[["click", this.onPeterClick]]}
-            enterAnimation={this.enterAnimation}
-            exitAnimation={this.exitAnimation}
+            enterAnimation={(element, properties) => this.enterAnimation(element, properties)}
+            exitAnimation={(element, removeDomNodeFunction, properties) => this.exitAnimation(element, removeDomNodeFunction, properties)}
           >
             <p>Hello Peter</p>
             <img
@@ -165,6 +225,7 @@ export class MyGreetings extends Highlightable(class extends CustomElement { })
   }
 
   connectedCallback() {
+    super.connectedCallback();
     let template = this.templateFromString(`
       <style>
 
@@ -308,7 +369,7 @@ class PFoo extends CustomElement {
   @Property({ attribute: "items", type: "object", reflect: true, converter: stringArrayConverter })
   items: string[] = ["foo", "bar"];
 
-  @Property({ type: "string", attribute: "nick-name", readonly: true })
+  @Property({ type: "string", attribute: "nick-name"})
   nickName: string = "de prutser";
 
   shouldUpdate(property, oldValue, newValue) {
@@ -359,9 +420,108 @@ class SuperAnchorElement extends HTMLAnchorElement {
     }
   }
   public connectedCallback() {
+
     this.classList.add("super");
     this.style.color = "red";
   }
 }
 
 window.customElements.define("super-a", SuperAnchorElement, { extends: "a" });
+
+
+// Bring your own projector in non shadow root element
+@CustomElementConfig({
+  tagName: "bring-your-own-projector",
+})
+export class BringYourOwnProjector extends CustomElement {
+
+  constructor() {
+    super();
+    this.initProjector();
+  }
+
+  init() {
+    console.log("This is a lifecycle for BringYourOwnProjector");
+  }
+
+  initProjector() {
+    this.rootElement = document.createElement("div");
+    this.rootElement.classList.add("root");
+    this.createProjector(this.rootElement, this.render);
+    console.log("init");
+  }
+
+  @PropertyRenderOnSet
+  name: string = "foo";
+
+  #_doneSOmething = false;
+
+  get doneSomething() {
+    return this.#_doneSOmething;
+  }
+
+  doItNow(value) {
+    this.#_doneSOmething = value;
+    this.renderNow();
+  }
+
+  rootElement: HTMLDivElement;
+
+  render() {
+    return <div>Hello {this.name} {this.doneSomething && <p>We did it!!</p>}</div>;
+  }
+
+   connectedCallback() {
+    this.appendChild(this.rootElement);
+  }
+
+}
+
+// Bring your own projector in non shadow root element
+@CustomElementConfig({
+  tagName: "bring-your-own-projector-in-shadow-root",
+})
+export class BringYourOwnProjectorInShadowRoot extends CustomElement {
+
+  constructor() {
+    super();
+    this.initProjector();
+  }
+
+  init() {
+    console.log("This is a lifecycle for BringYourOwnProjector");
+  }
+
+  initProjector() {
+    this.attachShadow({ mode: "open" });
+    this.rootElement = document.createElement("div");
+    this.rootElement.classList.add("root");
+    this.createProjector(this.rootElement, this.render);
+    console.log("init");
+  }
+
+  @PropertyRenderOnSet
+  name: string = "foo";
+
+  #_doneSOmething = false;
+
+  get doneSomething() {
+    return this.#_doneSOmething;
+  }
+
+  doItNow(value) {
+    this.#_doneSOmething = value;
+    this.renderNow();
+  }
+
+  rootElement: HTMLDivElement;
+
+  render() {
+    return <div>Hello {this.name} {this.doneSomething && <p>We did it!!</p>}</div>;
+  }
+
+   connectedCallback() {
+    this.shadowRoot.appendChild(this.rootElement);
+  }
+
+}

package/src/test-setup.ts

@@ -0,0 +1,85 @@
+/**
+ * Test setup file - Vitest configuration
+ * Configures polyfills and global test utilities
+ */
+
+import { expect, afterEach, vi } from 'vitest';
+
+// Import Maquette at the top level for type definitions
+import * as Maquette from './maquette/index.js';
+
+// Declare global Maquette if in browser environment
+declare global {
+  interface Window {
+    Maquette: typeof Maquette;
+  }
+}
+
+// Only run setup code if we're in a browser environment
+if (typeof window !== 'undefined') {
+  // Set up Maquette global
+  (window as any).Maquette = Maquette;
+  
+  // Import and register CustomStyleElement for CSS @apply polyfill
+  if (typeof HTMLLinkElement !== 'undefined') {
+    import('./custom-style-element.js').catch(() => {
+      // Ignore if import fails in test environment
+    });
+  }
+}
+
+// Extend Chai matchers for better custom element testing
+declare global {
+  namespace Chai {
+    interface Assertion {
+      shadowRoot: ShadowRoot;
+    }
+  }
+}
+
+// Store for tracking registered custom element names to prevent conflicts
+const registeredElements = new Set<string>();
+const elementsCreated: HTMLElement[] = [];
+
+/**
+ * Generate a unique custom element tag name for testing
+ * Ensures no conflicts between test cases
+ */
+export function generateUniqueTagName(prefix: string = 'test-element'): string {
+  const timestamp = Date.now();
+  const random = Math.random().toString(36).substr(2, 9);
+  const tagName = `${prefix}-${timestamp}-${random}`.toLowerCase();
+  
+  registeredElements.add(tagName);
+  return tagName;
+}
+
+/**
+ * Clean up helper - unregister all test elements after tests
+ * Note: CustomElementRegistry doesn't support unregistration,
+ * so we track what was registered for uniqueness
+ */
+export function resetRegisteredElements(): void {
+  registeredElements.clear();
+}
+
+/**
+ * Track created elements for cleanup
+ */
+export function trackElement(el: HTMLElement): void {
+  elementsCreated.push(el);
+}
+
+/**
+ * Clean up all created elements after each test
+ */
+afterEach(() => {
+  elementsCreated.forEach(el => {
+    if (el.parentElement) {
+      el.parentElement.removeChild(el);
+    }
+  });
+  elementsCreated.length = 0;
+});
+// Global test timeout for async operations
+export const DEFAULT_TEST_TIMEOUT = 5000;

package/src/test-utils.ts

@@ -0,0 +1,223 @@
+/**
+ * Test utilities for p-elements-core testing with Vitest
+ * Provides helpers for creating and testing custom elements
+ */
+
+import { CustomElement } from './custom-element.js';
+import { customElementConfig } from './decorators/custom-element-config.js';
+import { generateUniqueTagName, trackElement } from './test-setup.js';
+import type { VNode } from './maquette/interfaces.js';
+
+/**
+ * Wait for an element to complete its update cycle
+ */
+export async function waitForRender(element: CustomElement): Promise<void> {
+  // Wait for shadowRoot to be created (async in requestAnimationFrame)
+  let attempts = 0;
+  const maxAttempts = 100;
+  while (!element.shadowRoot && attempts < maxAttempts) {
+    await new Promise(resolve => setTimeout(resolve, 10));
+    attempts++;
+  }
+  
+  if (!element.shadowRoot && attempts >= maxAttempts) {
+    console.warn('waitForRender: shadowRoot was not created after max attempts');
+  }
+  
+  // Wait for projector to render (also async in requestAnimationFrame)
+  await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve(undefined))));
+  
+  // Then wait for update to complete
+  await element.updateComplete;
+}
+
+/**
+ * Create and register a test custom element
+ * Returns the tag name for the registered element
+ */
+export function defineTestElement(
+  render: () => VNode,
+  options: {
+    tagName?: string;
+    isFormAssociated?: boolean;
+    delegatesFocus?: boolean;
+    style?: string;
+    extends?: string;
+  } = {}
+): string {
+  const tagName = options.tagName || generateUniqueTagName();
+
+  @customElementConfig({
+    tagName,
+    options: options.extends ? { extends: options.extends } : undefined,
+  })
+  class TestElement extends CustomElement {
+    static style = options.style || '';
+    static isFormAssociated = options.isFormAssociated || false;
+    static delegatesFocus = options.delegatesFocus || false;
+    
+    render() {
+      return render();
+    }
+  }
+
+  return tagName;
+}
+
+/**
+ * Create a simple test element directly in the DOM
+ */
+export async function createTestElement<T extends HTMLElement = HTMLElement>(
+  tagName: string,
+  attributes: Record<string, any> = {}
+): Promise<T> {
+  const el = document.createElement(tagName) as T;
+  
+  // Set attributes
+  Object.entries(attributes).forEach(([key, value]) => {
+    if (typeof value === 'boolean') {
+      if (value) {
+        el.setAttribute(key, '');
+      }
+    } else if (value !== null && value !== undefined) {
+      el.setAttribute(key, String(value));
+    }
+  });
+  
+  // Add to body for connection
+  document.body.appendChild(el);
+  trackElement(el);
+  
+  // Wait for render if it's a CustomElement
+  if (el instanceof CustomElement) {
+    await waitForRender(el as CustomElement);
+  }
+  
+  return el;
+}
+
+/**
+ * Get property descriptor from an element (helps test decorator-generated properties)
+ */
+export function getPropertyDescriptor(
+  element: any,
+  propertyName: string
+): PropertyDescriptor | undefined {
+  let proto = Object.getPrototypeOf(element);
+  
+  while (proto) {
+    const descriptor = Object.getOwnPropertyDescriptor(proto, propertyName);
+    if (descriptor) {
+      return descriptor;
+    }
+    proto = Object.getPrototypeOf(proto);
+  }
+  
+  return undefined;
+}
+
+/**
+ * Wait for a condition to be true
+ */
+export async function waitFor(
+  condition: () => boolean,
+  timeout: number = 1000,
+  interval: number = 10
+): Promise<void> {
+  const startTime = Date.now();
+  
+  while (!condition()) {
+    if (Date.now() - startTime > timeout) {
+      throw new Error('Timeout waiting for condition');
+    }
+    await new Promise(resolve => setTimeout(resolve, interval));
+  }
+}
+
+/**
+ * Simulate an attribute change on an element
+ */
+export function setAttributeAndNotify(
+  element: HTMLElement & { attributeChangedCallback?: Function },
+  name: string,
+  value: string | null
+): void {
+  const oldValue = element.getAttribute(name);
+  
+  if (value === null) {
+    element.removeAttribute(name);
+  } else {
+    element.setAttribute(name, value);
+  }
+  
+  // Manually trigger attributeChangedCallback if it exists
+  if (element.attributeChangedCallback) {
+    element.attributeChangedCallback(name, oldValue, value);
+  }
+}
+
+/**
+ * Assert that a VNode has specific properties
+ */
+export function assertVNode(
+  vnode: VNode,
+  expected: Partial<{
+    vnodeSelector: string;
+    text?: string;
+    children?: VNode[];
+  }>
+): void {
+  if (expected.vnodeSelector) {
+    if (vnode.vnodeSelector !== expected.vnodeSelector) {
+      throw new Error(
+        `Expected vnodeSelector "${expected.vnodeSelector}" but got "${vnode.vnodeSelector}"`
+      );
+    }
+  }
+  
+  if (expected.text !== undefined) {
+    if (vnode.text !== expected.text) {
+      throw new Error(`Expected text "${expected.text}" but got "${vnode.text}"`);
+    }
+  }
+  
+  if (expected.children) {
+    if (!vnode.children || vnode.children.length !== expected.children.length) {
+      throw new Error(
+        `Expected ${expected.children.length} children but got ${vnode.children?.length || 0}`
+      );
+    }
+  }
+}
+
+/**
+ * Get the shadow root of an element, throwing if not found
+ */
+export function getShadowRoot(element: HTMLElement): ShadowRoot {
+  if (!element.shadowRoot) {
+    throw new Error('Element does not have a shadow root');
+  }
+  return element.shadowRoot;
+}
+
+/**
+ * Query a selector within an element's shadow DOM
+ */
+export function shadowQuery<T extends Element = Element>(
+  element: HTMLElement,
+  selector: string
+): T | null {
+  return getShadowRoot(element).querySelector<T>(selector);
+}
+
+/**
+ * Query all selectors within an element's shadow DOM
+ */
+export function shadowQueryAll<T extends Element = Element>(
+  element: HTMLElement,
+  selector: string
+): NodeListOf<T> {
+  return getShadowRoot(element).querySelectorAll<T>(selector);
+}
+
+

package/tsconfig.json

@@ -60,5 +60,6 @@
   },
   "exclude": [
     "docs",
+    "vitest.config.ts"
   ],
 }

package/vitest.config.ts

@@ -0,0 +1,41 @@
+import { defineConfig } from 'vitest/config';
+import { playwright } from '@vitest/browser-playwright';
+
+export default defineConfig({
+  test: {
+    browser: {
+      enabled: true,
+      provider: playwright(),
+      headless: process.env.HEADED !== 'true',
+      instances: [
+        {
+          browser: 'chromium',
+        },
+      ],
+    },
+    globals: true,
+    setupFiles: ['./src/test-setup.ts'],
+    include: ['src/**/*.test.{ts,tsx}'],
+    exclude: ['node_modules', 'dist', '.idea', '.git', '.cache'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html', 'lcov'],
+      reportsDirectory: 'coverage',
+      exclude: [
+        'node_modules/',
+        'src/test-setup.ts',
+        'src/test-utils.ts',
+        'src/**/*.test.ts',
+      ],
+      thresholds: {
+        lines: 70,
+        functions: 70,
+        branches: 60,
+        statements: 70,
+      },
+    },
+    testTimeout: 5000,
+    hookTimeout: 5000,
+  },
+});
+

package/webpack.config.js

@@ -41,7 +41,7 @@ module.exports = {
       {
         test: /\.tsx?$/,
         use: ["babel-loader", "ts-loader"],
-        exclude: /node_modules/,
+        exclude: [/node_modules/, /\.test\.ts$/],
       },
     ],
   },