@justeattakeaway/pie-webc-core 15.0.0 → 15.0.1

package/dist/index.js

@@ -1,45 +1,49 @@
-import { customElement as a } from "lit/decorators.js";
-const d = (t, e, s) => function(r, i) {
-  const o = `#${i}`;
-  Object.defineProperty(r, i, {
+import { customElement as d } from "lit/decorators.js";
+const b = (t, e, s) => function(i, r) {
+  const o = `#${r}`;
+  Object.defineProperty(i, r, {
     get() {
       return this[o];
     },
     set(c) {
       e.includes(c) ? this[o] = c : (console.error(
-        `<${t}> Invalid value "${c}" provided for property "${i}".`,
+        `<${t}> Invalid value "${c}" provided for property "${r}".`,
         `Must be one of: ${e.join(" | ")}.`,
         `Falling back to default value: "${s}"`
       ), this[o] = s);
     },
     configurable: !0
   });
-}, l = (t) => function(s, n) {
-  const r = `#${n}`;
+}, l = (t) => t == null || typeof t == "string" && t.trim() === "", f = (t) => function(s, n) {
+  const i = `#${n}`, r = `#${n}HasBeenSet`, o = `#${n}HasWarned`;
   Object.defineProperty(s, n, {
     get() {
-      return this[r];
+      return this[i];
     },
-    set(i) {
-      (i == null || typeof i == "string" && i.trim() === "") && console.error(`<${t}> Missing required attribute "${n}"`), this[r] = i;
+    set(u) {
+      this[r] = !0, l(u) && console.error(`<${t}> Missing required attribute "${n}"`), this[i] = u;
     },
     configurable: !0
   });
+  const c = s, a = c.connectedCallback;
+  c.connectedCallback = function() {
+    a == null || a.call(this), !this[r] && !this[o] && (this[o] = !0, console.error(`<${t}> Missing required attribute "${n}"`));
+  };
 };
-function h(t) {
+function m(t) {
   return (e) => {
     try {
-      a(t)(e);
+      d(t)(e);
     } catch (s) {
-      const n = customElements.get(t), r = n == null ? void 0 : n.v;
-      e.v !== r && console.warn(
-        `PIE Web Component: "${t}" was already registered with version: ${r ?? "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 n = customElements.get(t), i = n == null ? void 0 : n.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."}.`,
         s
       );
     }
   };
 }
-function b(t) {
+function v(t) {
   return new CustomEvent(t.type, {
     detail: {
       sourceEvent: t
@@ -48,7 +52,7 @@ function b(t) {
     cancelable: t.cancelable
   });
 }
-function p(t, e, s) {
+function g(t, e, s) {
   e.startsWith("pie-") || console.warn("A custom event name should start with `pie-`");
   const n = new CustomEvent(e, {
     bubbles: !0,
@@ -57,7 +61,7 @@ function p(t, e, s) {
   });
   t.dispatchEvent(n);
 }
-const m = (t) => {
+const p = (t) => {
   class e extends t {
     constructor() {
       super(...arguments), this._isRTL = !1, this.observer = null;
@@ -89,20 +93,20 @@ const m = (t) => {
     }
   }
   return e;
-}, f = (t) => {
+}, $ = (t) => {
   const s = class s extends t {
     get form() {
       return this._internals.form;
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(...r) {
-      super(...r), this._internals = this.attachInternals();
+    constructor(...i) {
+      super(...i), this._internals = this.attachInternals();
     }
   };
   s.formAssociated = !0;
   let e = s;
   return e;
-}, v = (t) => {
+}, w = (t) => {
   const s = class s extends t {
   };
   s.shadowRootOptions = {
@@ -117,12 +121,12 @@ const m = (t) => {
   return e;
 };
 export {
-  v as DelegatesFocusMixin,
-  f as FormControlMixin,
-  m as RtlMixin,
-  p as dispatchCustomEvent,
-  l as requiredProperty,
-  h as safeCustomElement,
-  d as validPropertyValues,
-  b as wrapNativeEvent
+  w as DelegatesFocusMixin,
+  $ as FormControlMixin,
+  p as RtlMixin,
+  g as dispatchCustomEvent,
+  f as requiredProperty,
+  m as safeCustomElement,
+  b as validPropertyValues,
+  v as wrapNativeEvent
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-webc-core",
-  "version": "15.0.0",
+  "version": "15.0.1",
   "description": "PIE design system base classes, mixins and utilities for web components",
   "type": "module",
   "main": "dist/index.js",

package/src/decorators/required-property.ts

@@ -1,21 +1,46 @@
+const isMissing = <T>(value: T): boolean => value === undefined || value === null || (typeof value === 'string' && value.trim() === '');
+
 /**
  * A decorator for marking a property as required.
  * If the property's value is `undefined`, `null` or empty string, an error is logged.
+ *
+ * This also checks on `connectedCallback` so a missing required property is still reported
+ * even when the corresponding attribute is never set at all (in which case the property
+ * setter below is never invoked).
  * @returns {Function} - The decorator function.
  */
 export const requiredProperty = <T>(componentName: string) => function validateRequiredProperty (target: object, propertyKey: string): void {
     const privatePropertyKey = `#${propertyKey}`;
+    const hasBeenSetKey = `#${propertyKey}HasBeenSet`;
+    const hasWarnedKey = `#${propertyKey}HasWarned`;
 
     Object.defineProperty(target, propertyKey, {
         get (): T {
             return this[privatePropertyKey];
         },
         set (value: T): void {
-            if (value === undefined || value === null || (typeof value === 'string' && value.trim() === '')) {
+            this[hasBeenSetKey] = true;
+
+            if (isMissing(value)) {
                 console.error(`<${componentName}> Missing required attribute "${propertyKey}"`);
             }
             this[privatePropertyKey] = value;
         },
         configurable: true,
     });
+
+    const elementProto = target as { connectedCallback?: (this: Record<string, unknown>) => void };
+    const originalConnectedCallback = elementProto.connectedCallback;
+
+    elementProto.connectedCallback = function connectedCallback (this: Record<string, unknown>): void {
+        originalConnectedCallback?.call(this);
+
+        // Guard with a dedicated "has warned" flag (rather than reusing hasBeenSetKey) so an
+        // element that reconnects repeatedly while still missing the prop (e.g. a virtualised
+        // list recycling DOM nodes) only logs once, instead of on every reconnect.
+        if (!this[hasBeenSetKey] && !this[hasWarnedKey]) {
+            this[hasWarnedKey] = true;
+            console.error(`<${componentName}> Missing required attribute "${propertyKey}"`);
+        }
+    };
 };