@limetech/lime-web-components 4.48.2 → 4.49.1-alpha.4

package/dist/config/index.d.ts

@@ -0,0 +1,3 @@
+export * from './repository';
+export * from './types';
+export * from './decorator';

package/dist/config/index.js

@@ -0,0 +1,3 @@
+export * from './repository';
+export * from './types';
+export * from './decorator';

package/dist/config/repository.d.ts

@@ -0,0 +1,17 @@
+import { StateRepository } from '../core/state';
+export interface ConfigRepository extends StateRepository {
+    /**
+     * Check if a config exists
+     *
+     * @param key name of the key containing the config
+     * @returns true if config exists
+     */
+    has(key: string): boolean;
+    /**
+     * Get config from the state
+     *
+     * @param key name of the key containing the config
+     * @returns the config
+     */
+    get<T = any>(key: string): T;
+}

package/dist/config/repository.js

@@ -0,0 +1 @@
+export {};

package/dist/config/types.d.ts

@@ -0,0 +1,14 @@
+import { ConfigRepository as Service } from './repository';
+declare const SERVICE_NAME = "state.configs";
+declare module '../core/platform' {
+    interface PlatformServiceName {
+        /**
+         * @see {@link Service ConfigRepository}
+         */
+        ConfigRepository: typeof SERVICE_NAME;
+    }
+    interface LimeWebComponentPlatform {
+        get(name: PlatformServiceName['ConfigRepository']): Service;
+    }
+}
+export {};

package/dist/config/types.js

@@ -0,0 +1,3 @@
+import { PlatformServiceName } from '../core/platform';
+const SERVICE_NAME = 'state.configs';
+PlatformServiceName.ConfigRepository = SERVICE_NAME;

package/dist/core/context.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Interface for the context in which the Lime Web Component appears
+ */
+export interface LimeWebComponentContext {
+    /**
+     * The name of the limetype of the context
+     */
+    limetype: string | null;
+    /**
+     * The id of the limeobject of the context
+     */
+    id: number | null;
+    /**
+     * Optional parent context, if the current context is nested
+     */
+    parent?: LimeWebComponentContext;
+}

package/dist/core/context.js

@@ -0,0 +1 @@
+export {};

package/dist/core/decorators/factory.d.ts

@@ -0,0 +1,29 @@
+import { LimeWebComponent, StateOptions } from '..';
+declare type OptionFactory = (options: StateOptions, component: LimeWebComponent) => StateOptions;
+export interface StateDecoratorConfig {
+    /**
+     * Name of the state service to use in the platform
+     */
+    name: string;
+    /**
+     * Name of the method on the service to use
+     */
+    method?: string;
+    /**
+     * Factory for creating options dynamically
+     *
+     * @param {StateOptions} options decorator options
+     * @param {LimeWebComponent} component the web component
+     * @returns {StateOptions} state options
+     */
+    optionFactory?: OptionFactory;
+}
+/**
+ * Create a new state decorator
+ *
+ * @param {StateOptions} options decorator options
+ * @param {StateDecoratorConfig} config decorator configuration
+ * @returns {Function} state decorator
+ */
+export declare function createStateDecorator(options: StateOptions, config: StateDecoratorConfig): PropertyDecorator;
+export {};

package/dist/core/decorators/factory.js

@@ -0,0 +1,243 @@
+import { getElement } from '@stencil/core';
+import { BehaviorSubject } from 'rxjs';
+function defaultOptionFactory(options) {
+    return options;
+}
+/**
+ * Create a new state decorator
+ *
+ * @param {StateOptions} options decorator options
+ * @param {StateDecoratorConfig} config decorator configuration
+ * @returns {Function} state decorator
+ */
+export function createStateDecorator(options, config) {
+    return (target, property) => {
+        const properties = getComponentProperties(target, property, options, config);
+        if (properties.length === 1) {
+            extendLifecycleMethods(target, properties);
+        }
+    };
+}
+const componentProperties = new WeakMap();
+const contexts = new WeakMap();
+const contextObservables = new WeakMap();
+const componentSubscriptions = new WeakMap();
+const connectedComponents = new WeakMap();
+/**
+ * Get properties data for a component
+ *
+ * @param {Component} component the component class containing the decorator
+ * @param {string} property name of the property
+ * @param {StateOptions} options decorator options
+ * @param {StateDecoratorConfig} config decorator configuration
+ * @returns {Property[]} properties data for the component
+ */
+function getComponentProperties(component, property, options, config) {
+    let properties = componentProperties.get(component);
+    if (!properties) {
+        properties = [];
+        componentProperties.set(component, properties);
+    }
+    properties.push({
+        options: options,
+        name: property,
+        optionFactory: config.optionFactory || defaultOptionFactory,
+        service: {
+            name: config.name,
+            method: config.method || 'subscribe',
+        },
+    });
+    return properties;
+}
+/**
+ * Extend the lifecycle methods on the component
+ *
+ * @param {Component} component the component to extend
+ * @param {Property[]} properties the properties with which to extend the component
+ * @returns {void}
+ */
+function extendLifecycleMethods(component, properties) {
+    // `componentWillLoad` and `componentDidUnload` is included for backwards
+    // compatibility reasons. The correct way to setup the subscriptions is in
+    // `connectedCallback` and `disconnectedCallback`, but since not all
+    // plugins might implement those methods yet we still have include them
+    // until we make `connectedCallback` and `disconnectedCallback` required
+    // 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);
+}
+function createConnectedCallback(original, properties) {
+    return async function (...args) {
+        connectedComponents.set(this, true);
+        componentSubscriptions.set(this, []);
+        await ensureLimeProps(this);
+        const observable = new BehaviorSubject(this.context);
+        contexts.set(this, this.context);
+        contextObservables.set(this, observable);
+        properties.forEach((property) => {
+            property.options = property.optionFactory(property.options, this);
+            if (isContextAware(property.options)) {
+                property.options.context = observable;
+            }
+            subscribe(this, property);
+        });
+        if (original) {
+            return original.apply(this, args);
+        }
+    };
+}
+function createComponentWillLoad(original, properties) {
+    return async function (...args) {
+        if (connectedComponents.get(this) === true) {
+            await ensureLimeProps(this);
+            if (original) {
+                return original.apply(this, args);
+            }
+            return;
+        }
+        const connectedCallback = createConnectedCallback(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;
+        if (original) {
+            result = original.apply(this, args);
+        }
+        unsubscribeAll(this);
+        return result;
+    };
+}
+/**
+ * Check if the options are context aware
+ *
+ * @param {object} options state decorator options
+ * @returns {boolean} true if the options are context aware
+ */
+function isContextAware(options) {
+    return 'context' in options;
+}
+/**
+ * Make sure that all required lime properties are set on the web component
+ *
+ * @param {LimeWebComponent} target the web component
+ * @returns {Promise<any>} a promise that resolves when all properties are defined
+ */
+function ensureLimeProps(target) {
+    const promises = [];
+    if (!target.platform) {
+        promises.push(waitForProp(target, 'platform'));
+    }
+    if (!target.context) {
+        promises.push(waitForProp(target, 'context'));
+    }
+    if (!promises.length) {
+        return Promise.resolve();
+    }
+    return Promise.all(promises);
+}
+/**
+ * Wait for a property to be defined on an object
+ *
+ * @param {LimeWebComponent} target the web component
+ * @param {string} property the name of the property to watch
+ * @returns {Promise<void>} a promise that will resolve when the property is set on the object
+ */
+function waitForProp(target, property) {
+    const element = getElement(target);
+    return new Promise((resolve) => {
+        Object.defineProperty(element, property, {
+            set: (value) => {
+                delete element[property];
+                element[property] = value;
+                resolve();
+            },
+        });
+    });
+}
+/**
+ * Subscribe to changes from the state
+ *
+ * @param {any} component the component instance
+ * @param {Property} property property to update when subscription triggers
+ * @returns {void}
+ */
+function subscribe(component, property) {
+    const subscription = createSubscription(component, property);
+    const subscriptions = componentSubscriptions.get(component);
+    subscriptions.push(subscription);
+}
+/**
+ * Unsubscribe to changes from the state
+ *
+ * @param {any} component the instance of the component
+ * @returns {void}
+ */
+function unsubscribeAll(component) {
+    const subscriptions = componentSubscriptions.get(component);
+    subscriptions.forEach((unsubscribe) => unsubscribe());
+    componentSubscriptions.set(component, []);
+}
+/**
+ * Get a function that accepts a state, and updates the given property
+ * on the given component with that state
+ *
+ * @param {any} instance the component to augment
+ * @param {string} property name of the property on the component
+ * @returns {Function} updates the state
+ */
+function mapState(instance, property) {
+    return (state) => {
+        instance[property] = state;
+    };
+}
+/**
+ * Create a state subscription
+ *
+ * @param {any} component the component instance
+ * @param {Property} property the property on the component
+ * @returns {Function} unsubscribe function
+ */
+function createSubscription(component, property) {
+    const myOptions = Object.assign({}, property.options);
+    bindFunctions(myOptions, component);
+    const name = property.service.name;
+    const platform = component.platform;
+    if (!platform.has(name)) {
+        throw new Error(`Service ${name} does not exist`);
+    }
+    const service = platform.get(name);
+    return service[property.service.method](mapState(component, property.name), myOptions);
+}
+/**
+ * Bind connect functions to the current scope
+ *
+ * @param {StateOptions} options options for the selector
+ * @param {*} scope the current scope to bind to
+ * @returns {void}
+ */
+function bindFunctions(options, scope) {
+    if (options.filter) {
+        options.filter = options.filter.map((func) => func.bind(scope));
+    }
+    if (options.map) {
+        options.map = options.map.map((func) => func.bind(scope));
+    }
+}

package/dist/core/decorators/factory.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,337 @@
+import { __decorate } from "tslib";
+/* eslint-disable max-classes-per-file */
+let getElement;
+jest.mock('@stencil/core', () => {
+    const original = jest.requireActual('@stencil/core');
+    return Object.assign(Object.assign({}, original), { getElement: () => getElement() });
+});
+import { createStateDecorator } from './factory';
+import { Subject } from 'rxjs';
+import { take } from 'rxjs/operators';
+describe('createStateDecorator', () => {
+    let platform;
+    let context;
+    let service;
+    beforeEach(() => {
+        service = new TestService();
+        const services = {
+            test: service,
+        };
+        platform = {
+            has: jest.fn((name) => name in services),
+            get: jest.fn((name) => services[name]),
+        };
+        context = {};
+    });
+    describe('when using a state decorator on a property', () => {
+        it('adds required lifecycle hooks on the component', () => {
+            const Decorator = () => createStateDecorator({}, { name: 'test' });
+            class MyComponent {
+            }
+            __decorate([
+                Decorator()
+            ], MyComponent.prototype, "foo", void 0);
+            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');
+        });
+    });
+    describe('when more than one property is decorated', () => {
+        it('only extends the lifecycle methods once', () => {
+            const Decorator = () => createStateDecorator({}, { name: 'test' });
+            class MyComponent {
+            }
+            __decorate([
+                Decorator()
+            ], MyComponent.prototype, "foo", void 0);
+            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);
+        });
+    });
+    describe('when lifecycle hooks already exist', () => {
+        it('overwrites the lifecycle hooks', () => {
+            const Decorator = () => createStateDecorator({}, { name: 'test' });
+            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);
+        });
+    });
+    describe('when invoking connectedCallback without required properties', () => {
+        let component;
+        let element;
+        beforeEach(() => {
+            const Decorator = () => createStateDecorator({}, { name: 'test' });
+            class MyComponent {
+            }
+            __decorate([
+                Decorator()
+            ], MyComponent.prototype, "foo", void 0);
+            component = new MyComponent();
+            element = { platform: null, context: null };
+            getElement = () => element;
+        });
+        it('returns a promise that does not resolve', () => {
+            expect.assertions(0);
+            component.connectedCallback().then(() => {
+                expect(false).toBeTruthy();
+            });
+        });
+        it('returns a promise that resolves when platform and context has been set', () => {
+            expect.assertions(1);
+            component.connectedCallback().then(() => {
+                expect(true).toBeTruthy();
+            });
+            component.platform = platform;
+            component.context = context;
+            element.platform = platform;
+            element.context = context;
+        });
+    });
+    describe('when invoking componentWillLoad without required properties', () => {
+        let component;
+        let element;
+        let spy;
+        beforeEach(() => {
+            spy = jest.fn(() => { });
+            const Decorator = () => createStateDecorator({}, { name: 'test' });
+            class MyComponent {
+                componentWillLoad() {
+                    spy();
+                }
+            }
+            __decorate([
+                Decorator()
+            ], MyComponent.prototype, "foo", void 0);
+            component = new MyComponent();
+            element = { platform: null, context: null };
+            getElement = () => element;
+        });
+        it('returns a promise that does not resolve', () => {
+            expect.assertions(0);
+            component.connectedCallback();
+            component.componentWillLoad().then(() => {
+                expect(false).toBeTruthy();
+                expect(spy).not.toHaveBeenCalled();
+            });
+        });
+        it('returns a promise that resolves when platform and context has been set', () => {
+            expect.assertions(3);
+            component.connectedCallback();
+            component.componentWillLoad().then(() => {
+                expect(true).toBeTruthy();
+                expect(spy).toHaveBeenCalledTimes(1);
+            });
+            expect(spy).toHaveBeenCalledTimes(0);
+            component.platform = platform;
+            component.context = context;
+            element.platform = platform;
+            element.context = context;
+        });
+    });
+    describe('when invoking connectedCallback or componentWillLoad with required properties', () => {
+        let component;
+        beforeEach(() => {
+            component = createComponent();
+        });
+        it('creates a subscription on the service', async () => {
+            await component.connectedCallback();
+            expect(service.getSubscriptions().length).toEqual(1);
+        });
+        it('creates a subscription on the service', async () => {
+            await component.componentWillLoad();
+            expect(service.getSubscriptions().length).toEqual(1);
+        });
+        describe('when invoking both connectedCallback and componentWillLoad', () => {
+            it('creates only one subscription on the service', async () => {
+                await component.connectedCallback();
+                await component.componentWillLoad();
+                expect(service.getSubscriptions().length).toEqual(1);
+            });
+        });
+    });
+    describe('when multiple properties are decorated', () => {
+        let component;
+        beforeEach(() => {
+            component = createComponent({ foo: true, bar: true });
+        });
+        it('connectedCallback creates a subscription for each property', async () => {
+            await component.connectedCallback();
+            expect(service.getSubscriptions().length).toEqual(2);
+        });
+    });
+    describe('when invoking disconnectedCallback', () => {
+        let component;
+        beforeEach(async () => {
+            component = createComponent({ foo: true, bar: true });
+            await component.connectedCallback();
+        });
+        it('removes the subscriptions', () => {
+            expect(service.getSubscriptions().length).toEqual(2);
+            component.disconnectedCallback();
+            expect(service.getSubscriptions().length).toEqual(0);
+        });
+        describe('when invoked multiple times', () => {
+            it('does not crash', async () => {
+                expect(service.getSubscriptions().length).toEqual(2);
+                component.disconnectedCallback();
+                expect(service.getSubscriptions().length).toEqual(0);
+                expect(() => component.disconnectedCallback()).not.toThrow();
+            });
+        });
+        describe('when a component is inserted in the DOM again after being removed', () => {
+            it('creates a subscription on the service again', async () => {
+                expect(service.getSubscriptions().length).toEqual(2);
+                component.disconnectedCallback();
+                expect(service.getSubscriptions().length).toEqual(0);
+                await component.connectedCallback();
+                expect(service.getSubscriptions().length).toEqual(2);
+            });
+        });
+    });
+    describe('when context is set on options', () => {
+        let component;
+        let options;
+        beforeEach(async () => {
+            options = { context: null };
+            component = createComponent({ foo: true, bar: true }, options);
+            await component.connectedCallback();
+        });
+        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');
+            });
+        });
+    });
+    describe('when component has lifecycle methods', () => {
+        let component;
+        let options;
+        let methods;
+        beforeEach(async () => {
+            options = { context: null };
+            methods = {
+                connectedCallback: jest.fn(),
+                componentWillLoad: jest.fn(),
+                componentWillUpdate: jest.fn(),
+                componentDidUnload: jest.fn(),
+                disconnectedCallback: jest.fn(),
+            };
+            component = createComponent({ foo: true, bar: true }, options, methods);
+        });
+        it('connectedCallback invokes the original connectedCallback', async () => {
+            expect(methods.connectedCallback).toHaveBeenCalledTimes(0);
+            expect(component.connectedCallback).not.toEqual(methods.connectedCallback);
+            await component.connectedCallback();
+            expect(methods.connectedCallback).toHaveBeenCalledTimes(1);
+        });
+        it('componentWillLoad invokes the original componentWillLoad', async () => {
+            expect(methods.componentWillLoad).toHaveBeenCalledTimes(0);
+            expect(component.componentWillLoad).not.toEqual(methods.componentWillLoad);
+            await component.componentWillLoad();
+            expect(methods.componentWillLoad).toHaveBeenCalledTimes(1);
+        });
+        describe('when connectedCallback is invoked first', () => {
+            it('componentWillLoad invkoes the original componentWillLoad', async () => {
+                expect(methods.componentWillLoad).toHaveBeenCalledTimes(0);
+                expect(component.componentWillLoad).not.toEqual(methods.componentWillLoad);
+                await component.connectedCallback();
+                await component.componentWillLoad();
+                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);
+            await component.connectedCallback();
+            component.componentDidUnload();
+            expect(methods.componentDidUnload).toHaveBeenCalledTimes(1);
+        });
+        it('disconnectedCallback invokes the original disconnectedCallback', async () => {
+            expect(methods.disconnectedCallback).toHaveBeenCalledTimes(0);
+            expect(component.disconnectedCallback).not.toEqual(methods.disconnectedCallback);
+            await component.connectedCallback();
+            component.disconnectedCallback();
+            expect(methods.disconnectedCallback).toHaveBeenCalledTimes(1);
+        });
+    });
+    function createComponent(props = { foo: 'bar' }, options = {}, methods = {}) {
+        const Decorator = (o) => createStateDecorator(o, { name: 'test' });
+        class MyComponent {
+        }
+        Object.keys(methods).forEach((method) => {
+            MyComponent.prototype[method] = methods[method];
+        });
+        const component = new MyComponent();
+        component.platform = platform;
+        component.context = context;
+        Object.keys(props).forEach((key) => {
+            Decorator(options)(MyComponent.prototype, key);
+        });
+        return component;
+    }
+});
+class TestService {
+    constructor() {
+        this.subscriptions = [];
+    }
+    subscribe(...args) {
+        this.subscriptions.push(args);
+        return () => {
+            this.subscriptions = this.subscriptions.filter((item) => item !== args);
+        };
+    }
+    getSubscriptions() {
+        return this.subscriptions;
+    }
+}

package/dist/core/decorators/index.d.ts

@@ -0,0 +1 @@
+export { StateDecoratorConfig } from './factory';