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

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/decorators/query.ts

@@ -1,12 +1,12 @@
-export const query = (selector: string, useShadowRoot = true) => {
-  return function(target: Object, propertyKey: string) {
-    Object.defineProperty(target, propertyKey, {
-      get: function() {
-        if (useShadowRoot) {
-          return this.shadowRoot.querySelector(selector);
-        }
-        return this.querySelector(selector);
-      },
-    });
-  }
-};
+export const query = (selector: string, useShadowRoot = true) => {
+  return function(target: Object, propertyKey: string) {
+    Object.defineProperty(target, propertyKey, {
+      get: function() {
+        if (useShadowRoot) {
+          return this.shadowRoot.querySelector(selector);
+        }
+        return this.querySelector(selector);
+      },
+    });
+  }
+};

package/src/decorators/render-property-on-set.ts

@@ -1,3 +1,3 @@
-import {property} from "./property";
-const propertDecorator = property({});
-export const propertyRenderOnSet = propertDecorator;
+import {property} from "./property";
+const propertDecorator = property({});
+export const propertyRenderOnSet = propertDecorator;

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

package/src/helpers/css.ts

@@ -1,71 +1,71 @@
-import { CustomStyleElement } from "../custom-style-element";
-
-const VAR_ASSIGN =
-  /(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gi;
-
-export const cssApplyVars = new Map<string, string[]>();
-
-function getMixinValues(valueMixin: string): { key: string; value: string }[] {
-  return valueMixin
-    ?.split(";")
-    .map((mixin: string) => {
-      const [key, value] = mixin.split(":", 2);
-      return { key: key.trim(), value: value ? value.trim() : "" };
-    })
-    .filter(
-      (mixin: any) =>
-        mixin.key && mixin.key !== "" && mixin.value !== ""
-    );
-}
-
-export function cssApplyToCssVars(style: string): string {
-  let nrOfReplacements = 0;
-  const cssText = style.replace(
-    VAR_ASSIGN,
-    (matchText, propertyName, valueProperty, valueMixin) => {
-      if (valueMixin) {
-        nrOfReplacements++;
-        const values = getMixinValues(valueMixin);
-        let replaceText = "";
-        const props: string[] = [];
-        values.forEach((mixin: any) => {
-          props.push(mixin.key);
-          replaceText +=
-            `${propertyName}_-_${mixin.key}: ${mixin.value};` + "\n";
-        });
-        cssApplyVars.set(propertyName, props);
-        return matchText.replace(
-          propertyName,
-          `${replaceText}
-        ${propertyName}`
-        );
-      }
-      return matchText;
-    }
-  );
-  return nrOfReplacements > 0 ? cssText : null;
-}
-
-export function replaceApplyToCssVars(cssText: string) : string {
-  const allVars = (
-    customElements.get("custom-style") as typeof CustomStyleElement
-  ).cssApplyVars;
-
-  let style = cssText;
-  const MIXIN_MATCH = /(?:^|\W+)@apply\s*\(?([^);\n]*)\)?/gi;
-  let m;
-  while ((m = MIXIN_MATCH.exec(style))) {
-    let matchText = m[0];
-    let mixinName = m[1];
-    if (allVars.has(mixinName)) {
-      const searchText = "@apply" + matchText.split("@apply", 2)[1];
-      const replaceText = allVars
-        .get(mixinName)
-        .map((prop: string) => `;${prop}: var(${mixinName}_-_${prop});`)
-        .join("");
-
-      style = style.replace(searchText, replaceText);
-    }
-  }
-  return style;
-}
+import { CustomStyleElement } from "../custom-style-element";
+
+const VAR_ASSIGN =
+  /(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gi;
+
+export const cssApplyVars = new Map<string, string[]>();
+
+function getMixinValues(valueMixin: string): { key: string; value: string }[] {
+  return valueMixin
+    ?.split(";")
+    .map((mixin: string) => {
+      const [key, value] = mixin.split(":", 2);
+      return { key: key.trim(), value: value ? value.trim() : "" };
+    })
+    .filter(
+      (mixin: any) =>
+        mixin.key && mixin.key !== "" && mixin.value !== ""
+    );
+}
+
+export function cssApplyToCssVars(style: string): string {
+  let nrOfReplacements = 0;
+  const cssText = style.replace(
+    VAR_ASSIGN,
+    (matchText, propertyName, valueProperty, valueMixin) => {
+      if (valueMixin) {
+        nrOfReplacements++;
+        const values = getMixinValues(valueMixin);
+        let replaceText = "";
+        const props: string[] = [];
+        values.forEach((mixin: any) => {
+          props.push(mixin.key);
+          replaceText +=
+            `${propertyName}_-_${mixin.key}: ${mixin.value};` + "\n";
+        });
+        cssApplyVars.set(propertyName, props);
+        return matchText.replace(
+          propertyName,
+          `${replaceText}
+        ${propertyName}`
+        );
+      }
+      return matchText;
+    }
+  );
+  return nrOfReplacements > 0 ? cssText : null;
+}
+
+export function replaceApplyToCssVars(cssText: string) : string {
+  const allVars = (
+    customElements.get("custom-style") as typeof CustomStyleElement
+  ).cssApplyVars;
+
+  let style = cssText;
+  const MIXIN_MATCH = /(?:^|\W+)@apply\s*\(?([^);\n]*)\)?/gi;
+  let m;
+  while ((m = MIXIN_MATCH.exec(style))) {
+    let matchText = m[0];
+    let mixinName = m[1];
+    if (allVars.has(mixinName)) {
+      const searchText = "@apply" + matchText.split("@apply", 2)[1];
+      const replaceText = allVars
+        .get(mixinName)
+        .map((prop: string) => `;${prop}: var(${mixinName}_-_${prop});`)
+        .join("");
+
+      style = style.replace(searchText, replaceText);
+    }
+  }
+  return style;
+}

package/src/maquette/cache.test.ts

@@ -0,0 +1,150 @@
+/**
+ * Tests for Maquette cache module
+ */
+
+import { describe, it, expect } from 'vitest';
+import { createCache } from './cache.js';
+
+describe('Maquette cache', () => {
+  describe('createCache', () => {
+    it('should create a cache instance', () => {
+      const cache = createCache<number>();
+      expect(cache).toBeDefined();
+      expect(cache.result).toBeDefined();
+      expect(cache.invalidate).toBeDefined();
+    });
+
+    it('should calculate result on first call', () => {
+      const cache = createCache<number>();
+      let calculationCount = 0;
+
+      const result = cache.result([1, 2, 3], () => {
+        calculationCount++;
+        return 10;
+      });
+
+      expect(result).toBe(10);
+      expect(calculationCount).toBe(1);
+    });
+
+    it('should return cached result when inputs unchanged', () => {
+      const cache = createCache<number>();
+      let calculationCount = 0;
+
+      const inputs = [1, 2, 3];
+      const calculation = () => {
+        calculationCount++;
+        return 10;
+      };
+
+      cache.result(inputs, calculation);
+      const result2 = cache.result(inputs, calculation);
+      const result3 = cache.result(inputs, calculation);
+
+      expect(result2).toBe(10);
+      expect(result3).toBe(10);
+      expect(calculationCount).toBe(1); // Only calculated once
+    });
+
+    it('should recalculate when inputs change', () => {
+      const cache = createCache<number>();
+      let calculationCount = 0;
+
+      cache.result([1, 2, 3], () => {
+        calculationCount++;
+        return 10;
+      });
+
+      cache.result([1, 2, 4], () => {
+        calculationCount++;
+        return 20;
+      });
+
+      expect(calculationCount).toBe(2);
+    });
+
+    it('should detect changes in any input position', () => {
+      const cache = createCache<string>();
+      let calculationCount = 0;
+
+      const calc = () => {
+        calculationCount++;
+        return 'result';
+      };
+
+      cache.result(['a', 'b', 'c'], calc);
+      cache.result(['x', 'b', 'c'], calc); // First element changed
+      cache.result(['x', 'y', 'c'], calc); // Second element changed
+      cache.result(['x', 'y', 'z'], calc); // Third element changed
+
+      expect(calculationCount).toBe(4);
+    });
+
+    it('should invalidate cache', () => {
+      const cache = createCache<number>();
+      let calculationCount = 0;
+
+      const inputs = [1, 2, 3];
+      const calculation = () => {
+        calculationCount++;
+        return 10;
+      };
+
+      cache.result(inputs, calculation);
+      cache.invalidate();
+      cache.result(inputs, calculation);
+
+      expect(calculationCount).toBe(2);
+    });
+
+    it('should handle empty inputs', () => {
+      const cache = createCache<number>();
+      let calculationCount = 0;
+
+      const result1 = cache.result([], () => {
+        calculationCount++;
+        return 42;
+      });
+
+      const result2 = cache.result([], () => {
+        calculationCount++;
+        return 42;
+      });
+
+      expect(result1).toBe(42);
+      expect(result2).toBe(42);
+      expect(calculationCount).toBe(1);
+    });
+
+    it('should cache complex objects', () => {
+      const cache = createCache<{ value: number }>();
+      let calculationCount = 0;
+
+      const obj1 = { id: 1 };
+      const obj2 = { id: 2 };
+
+      const result1 = cache.result([obj1, obj2], () => {
+        calculationCount++;
+        return { value: 100 };
+      });
+
+      const result2 = cache.result([obj1, obj2], () => {
+        calculationCount++;
+        return { value: 200 };
+      });
+
+      expect(result1).toBe(result2); // Same cached object
+      expect(calculationCount).toBe(1);
+    });
+
+    it('should invalidate and allow new calculations', () => {
+      const cache = createCache<string>();
+      
+      cache.result([1], () => 'first');
+      cache.invalidate();
+      const result = cache.result([2], () => 'second');
+
+      expect(result).toBe('second');
+    });
+  });
+});

package/src/maquette/cache.ts

@@ -1,35 +1,35 @@
-import { CalculationCache } from "./interfaces";
-
-/**
- * Creates a [[CalculationCache]] object, useful for caching [[VNode]] trees.
- * In practice, caching of [[VNode]] trees is not needed, because achieving 60 frames per second is almost never a problem.
- * For more information, see [[CalculationCache]].
- *
- * @param <Result> The type of the value that is cached.
- */
-export let createCache = <Result,>(): CalculationCache<Result> => {
-  let cachedInputs: unknown[] | undefined;
-  let cachedOutcome: Result | undefined;
-
-  return {
-    invalidate: () => {
-      cachedOutcome = undefined;
-      cachedInputs = undefined;
-    },
-
-    result: (inputs: unknown[], calculation: () => Result) => {
-      if (cachedInputs) {
-        for (let i = 0; i < inputs.length; i++) {
-          if (cachedInputs[i] !== inputs[i]) {
-            cachedOutcome = undefined;
-          }
-        }
-      }
-      if (!cachedOutcome) {
-        cachedOutcome = calculation();
-        cachedInputs = inputs;
-      }
-      return cachedOutcome;
-    },
-  };
-};
+import { CalculationCache } from "./interfaces";
+
+/**
+ * Creates a [[CalculationCache]] object, useful for caching [[VNode]] trees.
+ * In practice, caching of [[VNode]] trees is not needed, because achieving 60 frames per second is almost never a problem.
+ * For more information, see [[CalculationCache]].
+ *
+ * @param <Result> The type of the value that is cached.
+ */
+export let createCache = <Result,>(): CalculationCache<Result> => {
+  let cachedInputs: unknown[] | undefined;
+  let cachedOutcome: Result | undefined;
+
+  return {
+    invalidate: () => {
+      cachedOutcome = undefined;
+      cachedInputs = undefined;
+    },
+
+    result: (inputs: unknown[], calculation: () => Result) => {
+      if (cachedInputs) {
+        for (let i = 0; i < inputs.length; i++) {
+          if (cachedInputs[i] !== inputs[i]) {
+            cachedOutcome = undefined;
+          }
+        }
+      }
+      if (!cachedOutcome) {
+        cachedOutcome = calculation();
+        cachedInputs = inputs;
+      }
+      return cachedOutcome;
+    },
+  };
+};