@justeattakeaway/pie-webc-core 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.12.0
+
+### Minor Changes
+
+- [Changed] - `@validPropertyValues` and `@requiredProperty` decorators to support Lit 3. ([#1027](https://github.com/justeattakeaway/pie/pull/1027)) by [@raoufswe](https://github.com/raoufswe)
+
+## 0.12.0-next.0
+
+### Minor Changes
+
+- [Changed] - `@validPropertyValues` and `@requiredProperty` decorators to support Lit 3. ([#1025](https://github.com/justeattakeaway/pie/pull/1025)) by [@raoufswe](https://github.com/raoufswe)
+
 ## 0.11.0
 
 ### Minor Changes

package/package.json

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

package/src/decorators/required-property.ts

@@ -11,15 +11,11 @@ export const requiredProperty = <T>(componentName: string) => function validateR
             return this[privatePropertyKey];
         },
         set (value: T): void {
-            const oldValue = this[privatePropertyKey];
-
             if (value === undefined || value === null || (typeof value === 'string' && value.trim() === '')) {
                 console.error(`<${componentName}> Missing required attribute "${propertyKey}"`);
             }
             this[privatePropertyKey] = value;
-
-            this.requestUpdate(propertyKey, oldValue);
         },
+        configurable: true,
     });
 };
-

package/src/decorators/test/required-property.spec.ts

@@ -25,16 +25,6 @@ describe('requiredProperty', () => {
     class MockComponent {
         @requiredProperty('mock-component')
             color?: string | null;
-
-        private _requestUpdateArgs = {};
-
-        requestUpdate (propertyKey: string, oldValue: unknown) {
-            this._requestUpdateArgs = { propertyKey, oldValue };
-        }
-
-        requestUpdateCalledWith () {
-            return this._requestUpdateArgs;
-        }
     }
 
     it('should log an error if the property is undefined', () => {
@@ -80,15 +70,4 @@ describe('requiredProperty', () => {
         // Assert
         expect(consoleErrorSpy).not.toHaveBeenCalled();
     });
-
-    it('should call requestUpdate when the property is set', () => {
-        // Arrange
-        const mockComponent = new MockComponent();
-
-        // Act
-        mockComponent.color = 'blue';
-
-        // Assert
-        expect(mockComponent.requestUpdateCalledWith()).toStrictEqual({ propertyKey: 'color', oldValue: undefined });
-    });
 });

package/src/decorators/test/valid-property-values.spec.ts

@@ -25,16 +25,6 @@ describe('validPropertyValues', () => {
     class MockComponent {
         @validPropertyValues('mock-component', ['red', 'green', 'blue'], 'red')
             color = 'red';
-
-        private _requestUpdateArgs = {};
-
-        requestUpdate (propertyKey: string, oldValue: unknown) {
-            this._requestUpdateArgs = { propertyKey, oldValue };
-        }
-
-        requestUpdateCalledWith () {
-            return this._requestUpdateArgs;
-        }
     }
 
     it('should allow value to be updated with a valid value', () => {
@@ -75,16 +65,4 @@ describe('validPropertyValues', () => {
             'Falling back to default value: "red"',
         );
     });
-
-    it('should call requestUpdate when the property is set', () => {
-        // Arrange
-        const mockComponent = new MockComponent();
-
-        // Act
-        mockComponent.color = 'yellow';
-
-        // Assert
-        expect(mockComponent.color).toBe('red');
-        expect(mockComponent.requestUpdateCalledWith()).toStrictEqual({ propertyKey: 'color', oldValue: 'red' });
-    });
 });

package/src/decorators/valid-property-values.ts

@@ -5,7 +5,7 @@
  * @param defaultValue - The value to fall back on
  * @returns  - The decorator function
  */
-export const validPropertyValues = <T>(componentName: string, validValues: readonly T[], defaultValue: T) => function validatePropertyValues (target: object, propertyKey: string): void {
+export const validPropertyValues = <T>(componentName: string, validValues: readonly T[], defaultValue: T) => function validatePropertyValues (target: object, propertyKey: string) : void {
     const privatePropertyKey = `#${propertyKey}`;
 
     Object.defineProperty(target, propertyKey, {
@@ -13,8 +13,6 @@ export const validPropertyValues = <T>(componentName: string, validValues: reado
             return this[privatePropertyKey];
         },
         set (value: T): void {
-            const oldValue = this[privatePropertyKey];
-
             if (!validValues.includes(value)) {
                 console.error(
                         `<${componentName}> Invalid value "${value}" provided for property "${propertyKey}".`,
@@ -25,8 +23,7 @@ export const validPropertyValues = <T>(componentName: string, validValues: reado
             } else {
                 this[privatePropertyKey] = value;
             }
-
-            this.requestUpdate(propertyKey, oldValue);
         },
+        configurable: true,
     });
 };