p-elements-core 1.2.32-rc8 → 1.2.32

package/src/decorators/query.test.ts

@@ -1,146 +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);
-  });
-});
+/**
+ * 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.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.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;
+    },
+  };
+};