@justeattakeaway/pie-webc-core 0.25.0 → 0.26.0

package/dist/index.js

@@ -1,35 +1,46 @@
-import { isServer as c } from "lit";
-const d = (t, e, n) => function(s, r) {
-  const o = `#${r}`;
-  Object.defineProperty(s, r, {
+import { customElement as a } from "lit/decorators.js";
+import { isServer as u } from "lit";
+const f = (t, e, n) => function(i, s) {
+  const o = `#${s}`;
+  Object.defineProperty(i, s, {
     get() {
       return this[o];
     },
-    set(u) {
-      e.includes(u) ? this[o] = u : (console.error(
-        `<${t}> Invalid value "${u}" provided for property "${r}".`,
+    set(c) {
+      e.includes(c) ? this[o] = c : (console.error(
+        `<${t}> Invalid value "${c}" provided for property "${s}".`,
         `Must be one of: ${e.join(" | ")}.`,
         `Falling back to default value: "${n}"`
       ), this[o] = n);
     },
     configurable: !0
   });
-}, l = (t) => function(n, i) {
-  const s = `#${i}`;
-  Object.defineProperty(n, i, {
+}, m = (t) => function(n, r) {
+  const i = `#${r}`;
+  Object.defineProperty(n, r, {
     get() {
-      return this[s];
+      return this[i];
     },
-    set(r) {
-      (r == null || typeof r == "string" && r.trim() === "") && console.error(`<${t}> Missing required attribute "${i}"`), this[s] = r;
+    set(s) {
+      (s == null || typeof s == "string" && s.trim() === "") && console.error(`<${t}> Missing required attribute "${r}"`), this[i] = s;
     },
     configurable: !0
   });
 };
-function f(t, e) {
-  customElements.get(t) ? console.warn(`PIE Web Component: "${t}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(t, e);
+function h(t) {
+  return (e) => {
+    try {
+      a(t)(e);
+    } catch (n) {
+      const r = customElements.get(t), i = r == null ? void 0 : r.v;
+      e.v !== i && console.warn(
+        `PIE Web Component: "${t}" was already registered with version: ${i ?? "No version data found. Icon components do not contain version data. If the component is not an icon, please report the missing version data."}.`,
+        n
+      );
+    }
+  };
 }
-function b(t) {
+function p(t) {
   return new CustomEvent(t.type, {
     detail: {
       sourceEvent: t
@@ -38,16 +49,16 @@ function b(t) {
     cancelable: t.cancelable
   });
 }
-function h(t, e, n) {
+function b(t, e, n) {
   e.startsWith("pie-") || console.warn("A custom event name should start with `pie-`");
-  const i = new CustomEvent(e, {
+  const r = new CustomEvent(e, {
     bubbles: !0,
     composed: !0,
     detail: n
   });
-  t.dispatchEvent(i);
+  t.dispatchEvent(r);
 }
-const m = (t) => {
+const g = (t) => {
   class e extends t {
     /**
      * A getter to determine whether the text direction is right-to-left (RTL).
@@ -59,18 +70,18 @@ const m = (t) => {
      * @returns {boolean} - Returns `true` if the text direction is RTL, otherwise `false`.
      */
     get isRTL() {
-      return this.dir ? this.dir === "rtl" : !c && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
+      return this.dir ? this.dir === "rtl" : !u && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
     }
   }
   return e;
-}, p = (t) => {
+}, v = (t) => {
   const n = class n extends t {
     get form() {
       return this._internals.form;
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(...s) {
-      super(...s), this._internals = this.attachInternals();
+    constructor(...i) {
+      super(...i), this._internals = this.attachInternals();
     }
   };
   n.formAssociated = !0;
@@ -78,11 +89,11 @@ const m = (t) => {
   return e;
 };
 export {
-  p as FormControlMixin,
-  m as RtlMixin,
-  f as defineCustomElement,
-  h as dispatchCustomEvent,
-  l as requiredProperty,
-  d as validPropertyValues,
-  b as wrapNativeEvent
+  v as FormControlMixin,
+  g as RtlMixin,
+  b as dispatchCustomEvent,
+  m as requiredProperty,
+  h as safeCustomElement,
+  f as validPropertyValues,
+  p as wrapNativeEvent
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-webc-core",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "PIE design system base classes, mixins and utilities for web components",
   "type": "module",
   "main": "dist/index.js",
@@ -28,7 +28,7 @@
     "lit": "3.2.0"
   },
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.19.0"
+    "@justeattakeaway/pie-components-config": "0.20.1"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/decorators/index.ts

@@ -1,3 +1,3 @@
 export * from './valid-property-values';
 export * from './required-property';
-
+export * from './safe-custom-element';

package/src/decorators/safe-custom-element.ts

@@ -0,0 +1,29 @@
+import { customElement } from 'lit/decorators.js';
+
+/**
+ * Custom decorator that wraps Lit's customElement decorator with error handling.
+ * Logs a warning if the custom element has already been defined, including version info of the already registered component if available.
+ *
+ * @param {string} elementSelector - Custom element tag name.
+ * @returns {ClassDecorator}
+ */
+export function safeCustomElement (elementSelector: string): ClassDecorator {
+    return (elementClass: unknown) => {
+        try {
+            customElement(elementSelector)(elementClass as CustomElementConstructor);
+        } catch (e) {
+            type WithVProperty = { v?: string }
+            const registeredClass = customElements.get(elementSelector) as WithVProperty;
+            const registeredVersion = registeredClass?.v;
+            const missingVersionMessage = 'No version data found. Icon components do not contain version data. If the component is not an icon, please report the missing version data.';
+            const currentElementVersion = (elementClass as WithVProperty).v;
+
+            if (currentElementVersion !== registeredVersion) {
+                console.warn(
+            `PIE Web Component: "${elementSelector}" was already registered with version: ${registeredVersion ?? missingVersionMessage}.`,
+            e,
+                );
+            }
+        }
+    };
+}

package/src/functions/index.ts

@@ -1,3 +1,2 @@
-export * from './defineCustomElement';
 export * from './wrapNativeEvent';
 export * from './dispatchCustomEvent';

package/src/functions/defineCustomElement.ts

@@ -1,47 +0,0 @@
-import type { LitElement } from 'lit';
-
-/**
- * Defines a web component, ensuring that the component is only defined once in the Custom Element Registry.
- *
- * If the component has already been defined with the same name, a warning is logged to the console.
- *
- * @param {string} elementSelector - The selector of the custom element. Must be a valid custom element selector, containing a dash. I.e. 'my-component'
- * @param {typeof LitElement} elementClass - The class that defines the custom element, extending LitElement.
- *
- * @example
- *
- * ```javascript
- * import { css, html, LitElement } from 'lit';
- *
- * // IMPORTANT: Add the following JSDoc comment above your class setting the `@tagname` to the selector you want to use. - This is mandatory.
- * // "@tagname my-component"
- * class MyComponent extends LitElement {
- *   static styles = css`
- *     :host {
- *       display: block;
- *       padding: 16px;
- *       color: var(--my-component-text-color, black);
- *     }
- *   `;
- *
- *   render() {
- *     return html`
- *       <p>My custom element content goes here!</p>
- *     `;
- *   }
- * }
- *
- * defineCustomElement('my-component', MyComponent);
- * ```
- *
- * NOTE: The inclusion of the `@tagname` JSDoc comment above your class is essential for correct functionality. Ensure it matches the tag you're registering.
- *
- * @returns {void}
- */
-export function defineCustomElement (elementSelector: string, elementClass: typeof LitElement): void {
-    if (!customElements.get(elementSelector)) {
-        customElements.define(elementSelector, elementClass);
-    } else {
-        console.warn(`PIE Web Component: "${elementSelector}" has already been defined. Please ensure the component is only being defined once in your application.`);
-    }
-}