@limetech/lime-web-components 4.51.3 → 4.51.6

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.51.6](https://github.com/Lundalogik/lime-web-components/compare/v4.51.5...v4.51.6) (2022-07-15)
+
+
+### Bug Fixes
+
+* **testing:** create empty hook if component's `componentWillLoad` is undefined ([be371a8](https://github.com/Lundalogik/lime-web-components/commit/be371a8eca26b9e29f8dfa462cdf77b992a278b6))
+
+
+
+
+
+## [4.51.5](https://github.com/Lundalogik/lime-web-components/compare/v4.51.4...v4.51.5) (2022-07-14)
+
+
+### Bug Fixes
+
+* **build:** include required libraries ([d2efa0e](https://github.com/Lundalogik/lime-web-components/commit/d2efa0e59b7a23188afbecf842832123e4233f41))
+
+
+
+
+
+## [4.51.4](https://github.com/Lundalogik/lime-web-components/compare/v4.51.3...v4.51.4) (2022-07-14)
+
+
+### Bug Fixes
+
+* **decorators:** emit context changes correctly ([01b8333](https://github.com/Lundalogik/lime-web-components/commit/01b8333be51017d1400557e63814803de14c9a54)), closes [Lundalogik/crm-feature#2891](https://github.com/Lundalogik/crm-feature/issues/2891)
+
+
+
+
+
 ## [4.51.3](https://github.com/Lundalogik/lime-web-components/compare/v4.51.2...v4.51.3) (2022-07-13)
 
 

package/dist/core/decorators/factory.js

@@ -19,8 +19,6 @@ export function createStateDecorator(options, config) {
     };
 }
 const componentProperties = new WeakMap();
-const contexts = new WeakMap();
-const contextObservables = new WeakMap();
 const componentSubscriptions = new WeakMap();
 const connectedComponents = new WeakMap();
 /**
@@ -65,7 +63,6 @@ function extendLifecycleMethods(component, properties) {
     // on the interface.
     component.connectedCallback = createConnectedCallback(component.connectedCallback, properties);
     component.componentWillLoad = createComponentWillLoad(component.componentWillLoad, properties);
-    component.componentWillUpdate = createComponentWillUpdate(component.componentWillUpdate);
     component.componentDidUnload = createDisconnectedCallback(component.componentDidUnload);
     component.disconnectedCallback = createDisconnectedCallback(component.disconnectedCallback);
 }
@@ -75,8 +72,7 @@ function createConnectedCallback(original, properties) {
         componentSubscriptions.set(this, []);
         await ensureLimeProps(this);
         const observable = new BehaviorSubject(this.context);
-        contexts.set(this, this.context);
-        contextObservables.set(this, observable);
+        watchProp(this, 'context', observable);
         properties.forEach((property) => {
             property.options = property.optionFactory(property.options, this);
             if (isContextAware(property.options)) {
@@ -102,19 +98,6 @@ function createComponentWillLoad(original, properties) {
         return connectedCallback.apply(this, args);
     };
 }
-function createComponentWillUpdate(original) {
-    return async function (...args) {
-        const context = contexts.get(this);
-        if (context !== this.context) {
-            contexts.set(this, this.context);
-            const observable = contextObservables.get(this);
-            observable.next(this.context);
-        }
-        if (original) {
-            return original.apply(this, args);
-        }
-    };
-}
 function createDisconnectedCallback(original) {
     return async function (...args) {
         let result;
@@ -164,6 +147,7 @@ function waitForProp(target, property) {
     const element = getElement(target);
     return new Promise((resolve) => {
         Object.defineProperty(element, property, {
+            configurable: true,
             set: (value) => {
                 delete element[property];
                 element[property] = value;
@@ -172,6 +156,18 @@ function waitForProp(target, property) {
         });
     });
 }
+function watchProp(target, property, observer) {
+    const element = getElement(target);
+    const { get, set } = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element), property);
+    Object.defineProperty(element, property, {
+        configurable: true,
+        get: get,
+        set: function (value) {
+            set.call(this, value);
+            observer.next(value);
+        },
+    });
+}
 /**
  * Subscribe to changes from the state
  *

package/dist/core/decorators/factory.spec.js

@@ -1,13 +1,12 @@
 import { __decorate } from "tslib";
 /* eslint-disable max-classes-per-file */
-let getElement;
+const getElement = (component) => component.el || (component.el = new LimeWebComponentElement(component));
 jest.mock('@stencil/core', () => {
     const original = jest.requireActual('@stencil/core');
-    return Object.assign(Object.assign({}, original), { getElement: () => getElement() });
+    return Object.assign(Object.assign({}, original), { getElement: getElement });
 });
 import { createStateDecorator } from './factory';
-import { Subject } from 'rxjs';
-import { take } from 'rxjs/operators';
+import { Subject, firstValueFrom } from 'rxjs';
 describe('createStateDecorator', () => {
     let platform;
     let context;
@@ -34,7 +33,6 @@ describe('createStateDecorator', () => {
             const component = new MyComponent();
             expect(typeof component.connectedCallback).toEqual('function');
             expect(typeof component.componentWillLoad).toEqual('function');
-            expect(typeof component.componentWillUpdate).toEqual('function');
             expect(typeof component.componentDidUnload).toEqual('function');
             expect(typeof component.disconnectedCallback).toEqual('function');
         });
@@ -50,13 +48,11 @@ describe('createStateDecorator', () => {
             const component = new MyComponent();
             const connectedCallback = component.connectedCallback;
             const componentWillLoad = component.componentWillLoad;
-            const componentWillUpdate = component.componentWillUpdate;
             const componentDidUnload = component.componentDidUnload;
             const disconnectedCallback = component.disconnectedCallback;
             Decorator()(MyComponent.prototype, 'bar');
             expect(component.connectedCallback).toEqual(connectedCallback);
             expect(component.componentWillLoad).toEqual(componentWillLoad);
-            expect(component.componentWillUpdate).toEqual(componentWillUpdate);
             expect(component.componentDidUnload).toEqual(componentDidUnload);
             expect(component.disconnectedCallback).toEqual(disconnectedCallback);
         });
@@ -67,20 +63,17 @@ describe('createStateDecorator', () => {
             class MyComponent {
                 connectedCallback() { }
                 componentWillLoad() { }
-                componentWillUpdate() { }
                 componentDidUnload() { }
                 disconnectedCallback() { }
             }
             const component = new MyComponent();
             const connectedCallback = component.connectedCallback;
             const componentWillLoad = component.componentWillLoad;
-            const componentWillUpdate = component.componentWillUpdate;
             const componentDidUnload = component.componentDidUnload;
             const disconnectedCallback = component.disconnectedCallback;
             Decorator()(MyComponent.prototype, 'foo');
             expect(component.connectedCallback).not.toEqual(connectedCallback);
             expect(component.componentWillLoad).not.toEqual(componentWillLoad);
-            expect(component.componentWillUpdate).not.toEqual(componentWillUpdate);
             expect(component.componentDidUnload).not.toEqual(componentDidUnload);
             expect(component.disconnectedCallback).not.toEqual(disconnectedCallback);
         });
@@ -96,8 +89,7 @@ describe('createStateDecorator', () => {
                 Decorator()
             ], MyComponent.prototype, "foo", void 0);
             component = new MyComponent();
-            element = { platform: null, context: null };
-            getElement = () => element;
+            element = getElement(component);
         });
         it('returns a promise that does not resolve', () => {
             expect.assertions(0);
@@ -132,8 +124,7 @@ describe('createStateDecorator', () => {
                 Decorator()
             ], MyComponent.prototype, "foo", void 0);
             component = new MyComponent();
-            element = { platform: null, context: null };
-            getElement = () => element;
+            element = getElement(component);
         });
         it('returns a promise that does not resolve', () => {
             expect.assertions(0);
@@ -228,23 +219,12 @@ describe('createStateDecorator', () => {
         it('sets the context option to an observable', () => {
             expect(options.context).toBeInstanceOf(Subject);
         });
-        describe('when componentWillUpdate is invoked without a context change', () => {
-            it('does not emit a value on the observable', async () => {
-                const spy = jest.spyOn(options.context, 'next');
-                await component.componentWillUpdate();
-                expect(spy).not.toHaveBeenCalled();
-            });
-        });
-        describe('when componentWillUpdate is invoked with a context change', () => {
-            it('emits a value on the observable', async () => {
-                const spy = jest.spyOn(options.context, 'next');
-                component.context = 'new context';
-                await component.componentWillUpdate();
-                expect(spy).toHaveBeenCalled();
-                const subject = options.context;
-                const value = await subject.pipe(take(1)).toPromise();
-                expect(value).toEqual('new context');
-            });
+        it('emits a value on the observable when property is changed', async () => {
+            const spy = jest.spyOn(options.context, 'next');
+            getElement(component).context = 'new context';
+            expect(spy).toHaveBeenCalled();
+            const value = await firstValueFrom(options.context);
+            expect(value).toEqual('new context');
         });
     });
     describe('when component has lifecycle methods', () => {
@@ -256,7 +236,6 @@ describe('createStateDecorator', () => {
             methods = {
                 connectedCallback: jest.fn(),
                 componentWillLoad: jest.fn(),
-                componentWillUpdate: jest.fn(),
                 componentDidUnload: jest.fn(),
                 disconnectedCallback: jest.fn(),
             };
@@ -283,13 +262,6 @@ describe('createStateDecorator', () => {
                 expect(methods.componentWillLoad).toHaveBeenCalledTimes(1);
             });
         });
-        it('componentWillUpdate invokes the original componentWillUpdate', async () => {
-            expect(methods.componentWillUpdate).toHaveBeenCalledTimes(0);
-            expect(component.componentWillUpdate).not.toEqual(methods.componentWillUpdate);
-            await component.connectedCallback();
-            component.componentWillUpdate();
-            expect(methods.componentWillUpdate).toHaveBeenCalledTimes(1);
-        });
         it('componentDidUnload invokes the original componentDidUnload', async () => {
             expect(methods.componentDidUnload).toHaveBeenCalledTimes(0);
             expect(component.componentDidUnload).not.toEqual(methods.componentDidUnload);
@@ -335,3 +307,21 @@ class TestService {
         return this.subscriptions;
     }
 }
+class LimeWebComponentElement extends HTMLElement {
+    constructor(component) {
+        super();
+        this.component = component;
+    }
+    get platform() {
+        return this.component.platform;
+    }
+    set platform(value) {
+        this.component.platform = value;
+    }
+    get context() {
+        return this.component.context;
+    }
+    set context(value) {
+        this.component.context = value;
+    }
+}

package/dist/es5/core/decorators/factory.js

@@ -17,8 +17,6 @@ function createStateDecorator(options, config) {
 }
 exports.createStateDecorator = createStateDecorator;
 var componentProperties = new WeakMap();
-var contexts = new WeakMap();
-var contextObservables = new WeakMap();
 var componentSubscriptions = new WeakMap();
 var connectedComponents = new WeakMap();
 function getComponentProperties(component, property, options, config) {
@@ -41,7 +39,6 @@ function getComponentProperties(component, property, options, config) {
 function extendLifecycleMethods(component, properties) {
     component.connectedCallback = createConnectedCallback(component.connectedCallback, properties);
     component.componentWillLoad = createComponentWillLoad(component.componentWillLoad, properties);
-    component.componentWillUpdate = createComponentWillUpdate(component.componentWillUpdate);
     component.componentDidUnload = createDisconnectedCallback(component.componentDidUnload);
     component.disconnectedCallback = createDisconnectedCallback(component.disconnectedCallback);
 }
@@ -63,8 +60,7 @@ function createConnectedCallback(original, properties) {
                     case 1:
                         _a.sent();
                         observable = new rxjs_1.BehaviorSubject(this.context);
-                        contexts.set(this, this.context);
-                        contextObservables.set(this, observable);
+                        watchProp(this, 'context', observable);
                         properties.forEach(function (property) {
                             property.options = property.optionFactory(property.options, _this);
                             if (isContextAware(property.options)) {
@@ -108,29 +104,6 @@ function createComponentWillLoad(original, properties) {
         });
     };
 }
-function createComponentWillUpdate(original) {
-    return function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var context, observable;
-            return tslib_1.__generator(this, function (_a) {
-                context = contexts.get(this);
-                if (context !== this.context) {
-                    contexts.set(this, this.context);
-                    observable = contextObservables.get(this);
-                    observable.next(this.context);
-                }
-                if (original) {
-                    return [2, original.apply(this, args)];
-                }
-                return [2];
-            });
-        });
-    };
-}
 function createDisconnectedCallback(original) {
     return function () {
         var args = [];
@@ -169,6 +142,7 @@ function waitForProp(target, property) {
     var element = (0, core_1.getElement)(target);
     return new Promise(function (resolve) {
         Object.defineProperty(element, property, {
+            configurable: true,
             set: function (value) {
                 delete element[property];
                 element[property] = value;
@@ -177,6 +151,18 @@ function waitForProp(target, property) {
         });
     });
 }
+function watchProp(target, property, observer) {
+    var element = (0, core_1.getElement)(target);
+    var _a = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element), property), get = _a.get, set = _a.set;
+    Object.defineProperty(element, property, {
+        configurable: true,
+        get: get,
+        set: function (value) {
+            set.call(this, value);
+            observer.next(value);
+        },
+    });
+}
 function subscribe(component, property) {
     var subscription = createSubscription(component, property);
     var subscriptions = componentSubscriptions.get(component);

package/dist/es5/core/decorators/factory.spec.js

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var getElement;
+var getElement = function (component) {
+    return component.el || (component.el = new LimeWebComponentElement(component));
+};
 jest.mock('@stencil/core', function () {
     var original = jest.requireActual('@stencil/core');
-    return tslib_1.__assign(tslib_1.__assign({}, original), { getElement: function () { return getElement(); } });
+    return tslib_1.__assign(tslib_1.__assign({}, original), { getElement: getElement });
 });
 var factory_1 = require("./factory");
 var rxjs_1 = require("rxjs");
-var operators_1 = require("rxjs/operators");
 describe('createStateDecorator', function () {
     var platform;
     var context;
@@ -38,7 +39,6 @@ describe('createStateDecorator', function () {
             var component = new MyComponent();
             expect(typeof component.connectedCallback).toEqual('function');
             expect(typeof component.componentWillLoad).toEqual('function');
-            expect(typeof component.componentWillUpdate).toEqual('function');
             expect(typeof component.componentDidUnload).toEqual('function');
             expect(typeof component.disconnectedCallback).toEqual('function');
         });
@@ -57,13 +57,11 @@ describe('createStateDecorator', function () {
             var component = new MyComponent();
             var connectedCallback = component.connectedCallback;
             var componentWillLoad = component.componentWillLoad;
-            var componentWillUpdate = component.componentWillUpdate;
             var componentDidUnload = component.componentDidUnload;
             var disconnectedCallback = component.disconnectedCallback;
             Decorator()(MyComponent.prototype, 'bar');
             expect(component.connectedCallback).toEqual(connectedCallback);
             expect(component.componentWillLoad).toEqual(componentWillLoad);
-            expect(component.componentWillUpdate).toEqual(componentWillUpdate);
             expect(component.componentDidUnload).toEqual(componentDidUnload);
             expect(component.disconnectedCallback).toEqual(disconnectedCallback);
         });
@@ -76,7 +74,6 @@ describe('createStateDecorator', function () {
                 }
                 MyComponent.prototype.connectedCallback = function () { };
                 MyComponent.prototype.componentWillLoad = function () { };
-                MyComponent.prototype.componentWillUpdate = function () { };
                 MyComponent.prototype.componentDidUnload = function () { };
                 MyComponent.prototype.disconnectedCallback = function () { };
                 return MyComponent;
@@ -84,13 +81,11 @@ describe('createStateDecorator', function () {
             var component = new MyComponent();
             var connectedCallback = component.connectedCallback;
             var componentWillLoad = component.componentWillLoad;
-            var componentWillUpdate = component.componentWillUpdate;
             var componentDidUnload = component.componentDidUnload;
             var disconnectedCallback = component.disconnectedCallback;
             Decorator()(MyComponent.prototype, 'foo');
             expect(component.connectedCallback).not.toEqual(connectedCallback);
             expect(component.componentWillLoad).not.toEqual(componentWillLoad);
-            expect(component.componentWillUpdate).not.toEqual(componentWillUpdate);
             expect(component.componentDidUnload).not.toEqual(componentDidUnload);
             expect(component.disconnectedCallback).not.toEqual(disconnectedCallback);
         });
@@ -109,8 +104,7 @@ describe('createStateDecorator', function () {
                 return MyComponent;
             }());
             component = new MyComponent();
-            element = { platform: null, context: null };
-            getElement = function () { return element; };
+            element = getElement(component);
         });
         it('returns a promise that does not resolve', function () {
             expect.assertions(0);
@@ -148,8 +142,7 @@ describe('createStateDecorator', function () {
                 return MyComponent;
             }());
             component = new MyComponent();
-            element = { platform: null, context: null };
-            getElement = function () { return element; };
+            element = getElement(component);
         });
         it('returns a promise that does not resolve', function () {
             expect.assertions(0);
@@ -301,44 +294,22 @@ describe('createStateDecorator', function () {
         it('sets the context option to an observable', function () {
             expect(options.context).toBeInstanceOf(rxjs_1.Subject);
         });
-        describe('when componentWillUpdate is invoked without a context change', function () {
-            it('does not emit a value on the observable', function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
-                var spy;
-                return tslib_1.__generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            spy = jest.spyOn(options.context, 'next');
-                            return [4, component.componentWillUpdate()];
-                        case 1:
-                            _a.sent();
-                            expect(spy).not.toHaveBeenCalled();
-                            return [2];
-                    }
-                });
-            }); });
-        });
-        describe('when componentWillUpdate is invoked with a context change', function () {
-            it('emits a value on the observable', function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
-                var spy, subject, value;
-                return tslib_1.__generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            spy = jest.spyOn(options.context, 'next');
-                            component.context = 'new context';
-                            return [4, component.componentWillUpdate()];
-                        case 1:
-                            _a.sent();
-                            expect(spy).toHaveBeenCalled();
-                            subject = options.context;
-                            return [4, subject.pipe((0, operators_1.take)(1)).toPromise()];
-                        case 2:
-                            value = _a.sent();
-                            expect(value).toEqual('new context');
-                            return [2];
-                    }
-                });
-            }); });
-        });
+        it('emits a value on the observable when property is changed', function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+            var spy, value;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        spy = jest.spyOn(options.context, 'next');
+                        getElement(component).context = 'new context';
+                        expect(spy).toHaveBeenCalled();
+                        return [4, (0, rxjs_1.firstValueFrom)(options.context)];
+                    case 1:
+                        value = _a.sent();
+                        expect(value).toEqual('new context');
+                        return [2];
+                }
+            });
+        }); });
     });
     describe('when component has lifecycle methods', function () {
         var component;
@@ -350,7 +321,6 @@ describe('createStateDecorator', function () {
                 methods = {
                     connectedCallback: jest.fn(),
                     componentWillLoad: jest.fn(),
-                    componentWillUpdate: jest.fn(),
                     componentDidUnload: jest.fn(),
                     disconnectedCallback: jest.fn(),
                 };
@@ -405,21 +375,6 @@ describe('createStateDecorator', function () {
                 });
             }); });
         });
-        it('componentWillUpdate invokes the original componentWillUpdate', function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
-            return tslib_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        expect(methods.componentWillUpdate).toHaveBeenCalledTimes(0);
-                        expect(component.componentWillUpdate).not.toEqual(methods.componentWillUpdate);
-                        return [4, component.connectedCallback()];
-                    case 1:
-                        _a.sent();
-                        component.componentWillUpdate();
-                        expect(methods.componentWillUpdate).toHaveBeenCalledTimes(1);
-                        return [2];
-                }
-            });
-        }); });
         it('componentDidUnload invokes the original componentDidUnload', function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
             return tslib_1.__generator(this, function (_a) {
                 switch (_a.label) {
@@ -493,3 +448,32 @@ var TestService = (function () {
     };
     return TestService;
 }());
+var LimeWebComponentElement = (function (_super) {
+    tslib_1.__extends(LimeWebComponentElement, _super);
+    function LimeWebComponentElement(component) {
+        var _this = _super.call(this) || this;
+        _this.component = component;
+        return _this;
+    }
+    Object.defineProperty(LimeWebComponentElement.prototype, "platform", {
+        get: function () {
+            return this.component.platform;
+        },
+        set: function (value) {
+            this.component.platform = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(LimeWebComponentElement.prototype, "context", {
+        get: function () {
+            return this.component.context;
+        },
+        set: function (value) {
+            this.component.context = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return LimeWebComponentElement;
+}(HTMLElement));

package/dist/es5/testing/component-testing.js

@@ -55,7 +55,7 @@ function extendLifecycleHook(component, name, hook) {
     }
     var hooks = originalHooks.get(component);
     if (!hooks[name]) {
-        hooks[name] = component[name];
+        hooks[name] = component[name] ? component[name] : function () { };
     }
     component[name] = function () {
         var args = [];
@@ -63,9 +63,7 @@ function extendLifecycleHook(component, name, hook) {
             args[_i] = arguments[_i];
         }
         hook.apply(this, args);
-        if (hooks[name]) {
-            return hooks[name].apply(this, args);
-        }
+        return hooks[name].apply(this, args);
     };
 }
 function setDefault(props) {

package/dist/testing/component-testing.js

@@ -87,13 +87,11 @@ function extendLifecycleHook(component, name, hook) {
     }
     const hooks = originalHooks.get(component);
     if (!hooks[name]) {
-        hooks[name] = component[name];
+        hooks[name] = component[name] ? component[name] : function () { };
     }
     component[name] = function (...args) {
         hook.apply(this, args);
-        if (hooks[name]) {
-            return hooks[name].apply(this, args);
-        }
+        return hooks[name].apply(this, args);
     };
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-web-components",
-  "version": "4.51.3",
+  "version": "4.51.6",
   "author": "Lime Technologies",
   "homepage": "https://github.com/Lundalogik/lime-web-components",
   "license": "Apache-2.0",
@@ -39,7 +39,9 @@
     "@limetech/lime-web-components-commands": "^4.51.2",
     "@limetech/lime-web-components-decorators": "^4.51.2",
     "@limetech/lime-web-components-interfaces": "^4.51.2",
-    "@limetech/lime-web-components-testing": "^4.51.2"
+    "@limetech/lime-web-components-testing": "^4.51.2",
+    "rxjs": "^7.5.6",
+    "tslib": "^2.4.0"
   },
   "devDependencies": {
     "@types/jest": "^27.5.0",
@@ -49,5 +51,5 @@
   "peerDependencies": {
     "@stencil/core": "^2.17.1"
   },
-  "gitHead": "ed2a3da8138ef6cce7a0b5a5610e38d35d04c5fe"
+  "gitHead": "81c379c7688b02295a8f5ca978e5d346681cad6f"
 }