p-elements-core 1.2.32-rc1 → 1.2.32-rc11

package/src/decorators/property.ts

@@ -63,6 +63,8 @@ export interface PropertyOptions {
    */
   reflect?: boolean;
 
+  readonly?: boolean;
+
   /**
    * Custom converter for complex attribute/property transformations.
    * @type {AttributeConverter<any>}
@@ -76,7 +78,7 @@ export interface PropertyOptions {
  *
  * @typedef {PropertyOptions & { name: string }} PropertyOptionsWithName
  */
-export type PropertyOptionsWithName = PropertyOptions & {name: string};
+export type PropertyOptionsWithName = PropertyOptions & { name: string };
 
 /**
  * Track which elements are currently updating attributes from property setters.
@@ -96,7 +98,7 @@ const settingAttributes = new WeakSet<HTMLElement>();
  */
 const pendingAttributeReflections = new WeakMap<
   HTMLElement,
-  Map<string, {value: any; type: any; converter?: AttributeConverter<any>}>
+  Map<string, { value: any; type: any; converter?: AttributeConverter<any> }>
 >();
 
 /**
@@ -109,7 +111,7 @@ const pendingAttributeReflections = new WeakMap<
  */
 const pendingUpdates = new WeakMap<
   HTMLElement,
-  Array<{propertyKey: string; oldValue: any; newValue: any}>
+  Array<{ propertyKey: string; oldValue: any; newValue: any }>
 >();
 
 /**
@@ -252,10 +254,10 @@ function normalizeType(
       case "array":
         return Array;
       default:
-        return String;
+        return null;
     }
   }
-  return type || String;
+  return type;
 }
 
 /**
@@ -397,6 +399,19 @@ function updateAttribute(
   }
 }
 
+const alreadLogedNodeNames = new Set<string>();
+
+function logConnectedCallback(nodeName: string) {
+  if (!alreadLogedNodeNames.has(nodeName)) {
+    alreadLogedNodeNames.add(nodeName);
+    if (typeof console !== "undefined" && console.info) {
+      console.info(
+        `[CustomElement] connectedCallback called for <${nodeName.toLocaleLowerCase()}>`,
+      );
+    }
+  }
+}
+
 /**
  * Class field decorator that creates a reactive property with automatic attribute syncing.
  *
@@ -468,7 +483,13 @@ function updateAttribute(
 export function property(
   options: PropertyOptions = {},
 ): (target: any, propertyKey: string) => void {
-  const {type: rawType, attribute = true, reflect = false, converter} = options;
+  const {
+    type: rawType,
+    attribute = true,
+    reflect = false,
+    converter,
+    readonly = false,
+  } = options;
 
   const type = normalizeType(rawType);
 
@@ -477,6 +498,132 @@ export function property(
     const instanceMap = new WeakMap<any, any>();
     const attributeName = getAttributeName(propertyKey, attribute);
 
+    // --- Patch lifecycle methods ONLY if defined in derived class ---
+    // Only patch once per class
+    if (!target.__p_elements_core_lifecycle_patch_applied) {
+      // Patch connectedCallback
+      if (
+        Object.prototype.hasOwnProperty.call(target, "connectedCallback") &&
+        typeof target.connectedCallback === "function"
+      ) {
+        const originalConnected = target.connectedCallback;
+        target.connectedCallback = function patchedConnectedCallback(
+          ...args: any[]
+        ) {
+          const PATCHED_FLAG = "__p_elements_core_pending_updates_called";
+          if (!this[PATCHED_FLAG]) {
+            let superCalled = false;
+            const origProcess = processPendingUpdates;
+            const self = this;
+            function wrappedProcessPendingUpdates(element: any) {
+              if (element === self) {
+                superCalled = true;
+              }
+              return origProcess(element);
+            }
+            (globalThis as any).__origProcessPendingUpdates =
+              processPendingUpdates;
+            (globalThis as any).processPendingUpdates =
+              wrappedProcessPendingUpdates;
+            try {
+              if (originalConnected) {
+                originalConnected.apply(this, args);
+              }
+            } finally {
+              (globalThis as any).processPendingUpdates = (
+                globalThis as any
+              ).__origProcessPendingUpdates;
+              delete (globalThis as any).__origProcessPendingUpdates;
+            }
+            if (!superCalled) {
+              let baseProto = Object.getPrototypeOf(target);
+              let baseConnected = baseProto && baseProto.connectedCallback;
+              if (typeof baseConnected === "function") {
+                baseConnected.apply(this, args);
+                if (typeof console !== "undefined" && console.info) {
+                  // log this once per nodeName
+                  logConnectedCallback(this.nodeName);
+                }
+              } else {
+                processPendingUpdates(this);
+                if (typeof console !== "undefined" && console.info) {
+                  console.info(
+                    `[p-elements-core] called processPendingUpdates automatically for <${this.nodeName}>`,
+                  );
+                }
+              }
+            }
+            this[PATCHED_FLAG] = true;
+          } else if (originalConnected) {
+            originalConnected.apply(this, args);
+          }
+        };
+      }
+
+      // Patch disconnectedCallback
+      if (
+        Object.prototype.hasOwnProperty.call(target, "disconnectedCallback") &&
+        typeof target.disconnectedCallback === "function"
+      ) {
+        const originalDisconnected = target.disconnectedCallback;
+        target.disconnectedCallback = function patchedDisconnectedCallback(
+          ...args: any[]
+        ) {
+          const PATCHED_FLAG = "__p_elements_core_disconnected_called";
+          if (!this[PATCHED_FLAG]) {
+            let superCalled = false;
+            const baseProto = Object.getPrototypeOf(target);
+            const baseDisconnected =
+              baseProto && baseProto.disconnectedCallback;
+            if (originalDisconnected) {
+              originalDisconnected.apply(this, args);
+              superCalled = true;
+            }
+            if (!superCalled && typeof baseDisconnected === "function") {
+              baseDisconnected.apply(this, args);
+            }
+            this[PATCHED_FLAG] = true;
+          } else if (originalDisconnected) {
+            originalDisconnected.apply(this, args);
+          }
+        };
+      }
+
+      // Patch attributeChangedCallback
+      if (
+        Object.prototype.hasOwnProperty.call(
+          target,
+          "attributeChangedCallback",
+        ) &&
+        typeof target.attributeChangedCallback === "function"
+      ) {
+        const originalAttributeChanged = target.attributeChangedCallback;
+        target.attributeChangedCallback =
+          function patchedAttributeChangedCallback(...args: any[]) {
+            const PATCHED_FLAG = "__p_elements_core_attribute_changed_called";
+
+            if (!this[PATCHED_FLAG]) {
+              let superCalled = false;
+              const baseProto = Object.getPrototypeOf(target);
+              const baseAttributeChanged =
+                baseProto && baseProto.attributeChangedCallback;
+              if (originalAttributeChanged) {
+                originalAttributeChanged.apply(this, args);
+                superCalled = true;
+              }
+              if (!superCalled && typeof baseAttributeChanged === "function") {
+                baseAttributeChanged.apply(this, args);
+              }
+              this[PATCHED_FLAG] = true;
+            } else if (originalAttributeChanged) {
+              originalAttributeChanged.apply(this, args);
+            }
+          };
+      }
+
+      target.__p_elements_core_lifecycle_patch_applied = true;
+    }
+
     Object.defineProperty(target, propertyKey, {
       get(this: any) {
         // On first access, check if an HTML attribute exists and use that instead
@@ -520,8 +667,18 @@ export function property(
         return undefined;
       },
       set(this: any, value: any) {
+        // If readonly is true and value already exists, prevent setting
+        if (readonly && instanceMap.has(this)) {
+          return;
+        }
+
         const oldValue = instanceMap.get(this);
         let convertedValue: any;
+        let isRenderOnSet = false;
+
+        if ((type === null || type === undefined) && value !== oldValue) {
+          isRenderOnSet = true;
+        }
 
         // On first set, check if an HTML attribute exists and use that instead of the default
         if (
@@ -545,7 +702,6 @@ export function property(
 
             // Trigger update for initial HTML attribute only if connected
             if (this.isConnected) {
-
               if (typeof this.renderNow === "function") {
                 this.renderNow();
               }
@@ -561,14 +717,19 @@ export function property(
                 }
                 pendingUpdates
                   .get(this)!
-                  .push({propertyKey, oldValue, newValue: convertedValue});
+                  .push({ propertyKey, oldValue, newValue: convertedValue });
               }
             }
+
             return;
           }
         }
+        if (isRenderOnSet) {
+          convertedValue = value;
+        } else {
+          convertedValue = convertPropertyValue(value, type, converter);
+        }
 
-        convertedValue = convertPropertyValue(value, type, converter);
         if (oldValue === convertedValue) {
           return;
         }
@@ -625,9 +786,14 @@ export function property(
             }
             pendingUpdates
               .get(this)!
-              .push({propertyKey, oldValue, newValue: convertedValue});
+              .push({ propertyKey, oldValue, newValue: convertedValue });
           }
         }
+
+        // Call renderNow if @RenderOnSet is used and value changed
+        if (isRenderOnSet && typeof this.renderNow === "function") {
+          this.renderNow();
+        }
       },
       configurable: true,
     });

package/src/decorators/query.test.ts

@@ -0,0 +1,146 @@
+/**
+ * Tests for @query decorator
+ * Covers Shadow DOM and Light DOM queries
+ */
+
+import { describe, it, expect } from 'vitest';
+import '../test-setup.js';
+import { query } from './query.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('@query decorator', () => {
+  it('should query element in shadow DOM by default', async () => {
+    const tagName = generateUniqueTagName('query-shadow');
+    
+    @customElementConfig({ tagName })
+    class QueryTest extends CustomElement {
+      static style = ':host { display: block; }';
+      @query('.test-target')
+      target: HTMLElement;
+
+      render() {
+        return {
+          vnodeSelector: 'div',
+          properties: {},
+          children: [
+            {
+              vnodeSelector: 'span',
+              properties: { class: 'test-target' },
+              text: 'Found me!',
+              domNode: null as any,
+              children: []
+            },
+          ],
+          text: undefined,
+          domNode: null
+        };
+      }
+    }
+
+    const el = document.createElement(tagName) as QueryTest;
+    document.body.appendChild(el);
+    await waitForRender(el);
+
+    expect(el.target).toBeDefined();
+    expect(el.target.tagName).toBe('SPAN');
+    expect(el.target.classList.contains('test-target')).toBe(true);
+    
+    document.body.removeChild(el);
+  });
+
+  it('should query element in light DOM when useShadowRoot is false', async () => {
+    const tagName = generateUniqueTagName('query-light');
+    
+    @customElementConfig({ tagName })
+    class QueryTest extends CustomElement {
+      static style = ':host { display: block; }';
+      @query('.light-target', false)
+      target: HTMLElement;
+
+      render() {
+        return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+      }
+    }
+
+    const el = document.createElement(tagName) as QueryTest;
+    const lightChild = document.createElement('div');
+    lightChild.className = 'light-target';
+    lightChild.textContent = 'Light DOM';
+    el.appendChild(lightChild);
+    
+    document.body.appendChild(el);
+    await waitForRender(el);
+
+    expect(el.target).toBeDefined();
+    expect(el.target.className).toBe('light-target');
+    
+    document.body.removeChild(el);
+  });
+
+  it('should return null when element not found', async () => {
+    const tagName = generateUniqueTagName('query-missing');
+    
+    @customElementConfig({ tagName })
+    class QueryTest extends CustomElement {
+      static style = ':host { display: block; }';
+      @query('.does-not-exist')
+      target: HTMLElement;
+
+      render() {
+        return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+      }
+    }
+
+    const el = document.createElement(tagName) as QueryTest;
+    document.body.appendChild(el);
+    await waitForRender(el);
+
+    expect(el.target).toBeNull();
+    
+    document.body.removeChild(el);
+  });
+
+  it('should update query result when DOM changes', async () => {
+    const tagName = generateUniqueTagName('query-dynamic');
+    let showElement = false;
+    
+    @customElementConfig({ tagName })
+    class QueryTest extends CustomElement {
+      static style = ':host { display: block; }';
+      @query('.dynamic')
+      target: HTMLElement;
+
+      render() {
+        const children = showElement
+          ? [{ vnodeSelector: 'span', properties: { class: 'dynamic' }, text: 'Dynamic', domNode: null as any, children: [] }]
+          : [];
+        
+        return {
+          vnodeSelector: 'div',
+          properties: {},
+          children,
+          text: undefined,
+          domNode: null
+        };
+      }
+    }
+
+    const el = document.createElement(tagName) as QueryTest;
+    document.body.appendChild(el);
+    await waitForRender(el);
+
+    expect(el.target).toBeNull();
+
+    showElement = true;
+    el.renderNow();
+    await waitForRender(el);
+
+    expect(el.target).toBeDefined();
+    expect(el.target.tagName).toBe('SPAN');
+    
+    document.body.removeChild(el);
+  });
+});

package/src/helpers/css.test.ts

@@ -0,0 +1,150 @@
+/**
+ * Tests for CSS helpers
+ */
+
+import { describe, it, expect } from 'vitest';
+import { cssApplyToCssVars, cssApplyVars, replaceApplyToCssVars } from './css.js';
+
+describe('CSS helpers', () => {
+  describe('cssApplyToCssVars', () => {
+    it('should convert CSS @apply mixins to CSS variables', () => {
+      const inputCSS = `
+        --my-mixin: {
+          color: red;
+          font-size: 16px;
+        };
+      `;
+
+      const result = cssApplyToCssVars(inputCSS);
+      
+      expect(result).toContain('--my-mixin_-_color: red');
+      expect(result).toContain('--my-mixin_-_font-size: 16px');
+      expect(cssApplyVars.has('--my-mixin')).toBe(true);
+      expect(cssApplyVars.get('--my-mixin')).toContain('color');
+      expect(cssApplyVars.get('--my-mixin')).toContain('font-size');
+    });
+
+    it('should return null if no mixins found', () => {
+      const inputCSS = `
+        .class {
+          color: blue;
+          padding: 10px;
+        }
+      `;
+
+      const result = cssApplyToCssVars(inputCSS);
+      expect(result).toBeNull();
+    });
+
+    it('should handle multiple mixins', () => {
+      const inputCSS = `
+        --mixin-one: {
+          color: red;
+        };
+        --mixin-two: {
+          background: blue;
+          margin: 5px;
+        };
+      `;
+
+      const result = cssApplyToCssVars(inputCSS);
+      
+      expect(result).toContain('--mixin-one_-_color: red');
+      expect(result).toContain('--mixin-two_-_background: blue');
+      expect(result).toContain('--mixin-two_-_margin: 5px');
+      expect(cssApplyVars.has('--mixin-one')).toBe(true);
+      expect(cssApplyVars.has('--mixin-two')).toBe(true);
+    });
+
+    it('should preserve regular CSS variables', () => {
+      const inputCSS = `
+        --regular-var: 20px;
+        --my-mixin: {
+          padding: 10px;
+        };
+      `;
+
+      const result = cssApplyToCssVars(inputCSS);
+      
+      expect(result).toContain('--regular-var: 20px');
+      expect(result).toContain('--my-mixin_-_padding: 10px');
+    });
+
+    it('should handle empty mixin values', () => {
+      const inputCSS = `
+        --empty-mixin: {
+          ;
+        };
+      `;
+
+      const result = cssApplyToCssVars(inputCSS);
+      expect(result).not.toBeNull();
+    });
+  });
+
+  describe('replaceApplyToCssVars', () => {
+    it('should replace @apply with CSS variable references', () => {
+      // First set up a mixin
+      cssApplyVars.set('--theme-colors', ['color', 'background']);
+
+      const inputCSS = `
+        .element {
+          @apply --theme-colors;
+        }
+      `;
+
+      const result = replaceApplyToCssVars(inputCSS);
+      
+      expect(result).toContain('color: var(--theme-colors_-_color)');
+      expect(result).toContain('background: var(--theme-colors_-_background)');
+      expect(result).not.toContain('@apply');
+    });
+
+    it('should handle @apply with parentheses', () => {
+      cssApplyVars.set('--button-style', ['padding', 'border']);
+
+      const inputCSS = `
+        button {
+          @apply(--button-style);
+        }
+      `;
+
+      const result = replaceApplyToCssVars(inputCSS);
+      
+      expect(result).toContain('padding: var(--button-style_-_padding)');
+      expect(result).toContain('border: var(--button-style_-_border)');
+    });
+
+    it('should leave CSS unchanged if mixin not defined', () => {
+      const inputCSS = `
+        .element {
+          @apply --undefined-mixin;
+        }
+      `;
+
+      const result = replaceApplyToCssVars(inputCSS);
+      
+      // Should still contain @apply since mixin isn't defined
+      expect(result).toContain('@apply --undefined-mixin');
+    });
+
+    it('should handle multiple @apply calls', () => {
+      cssApplyVars.set('--mixin-a', ['color']);
+      cssApplyVars.set('--mixin-b', ['background']);
+
+      const inputCSS = `
+        .one {
+          @apply --mixin-a;
+        }
+        .two {
+          @apply --mixin-b;
+        }
+      `;
+
+      const result = replaceApplyToCssVars(inputCSS);
+      
+      expect(result).toContain('color: var(--mixin-a_-_color)');
+      expect(result).toContain('background: var(--mixin-b_-_background)');
+    });
+  });
+});