@genesislcap/foundation-store 14.116.1 → 14.118.0

package/dist/esm/__test__/store.js

@@ -0,0 +1,154 @@
+import { __awaiter, __decorate, __param } from "tslib";
+import { observable, volatile } from '@microsoft/fast-element';
+import { DI } from '@microsoft/fast-foundation';
+import { classNames } from '@microsoft/fast-web-utilities';
+import { AbstractStore, AbstractStoreRoot, } from '../store';
+import { ReportService, SubService } from './services';
+/**
+ * @internal
+ */
+let DefaultSubStore = class DefaultSubStore extends AbstractStore {
+    constructor(service) {
+        super();
+        this.service = service;
+        this.x = '';
+        this.y = 0;
+        this.z = 0;
+        this.onXChanged = this.createListener('x-changed', (detail) => (this.commit.x = detail));
+        this.onYChanged = this.createListener('y-changed', (detail) => (this.commit.y = detail));
+        this.onZChanged = this.createListener('z-changed', (detail) => (this.commit.z = detail));
+        this.onSelectSubEntity = this.createListener('select-sub-entity', (detail) => (this.commit.selectedEntity = detail));
+        this.onRemoveSubEntity = this.createListener('remove-sub-entity', (detail) => {
+            if (this.entities === undefined || this.entities.length === 0) {
+                return;
+            }
+            this.commit.entities = this.entities.filter(entity => entity !== detail);
+        });
+        /**
+         * Some serialised store state.
+         */
+        this.toEntity = () => ({
+            label: this.x,
+            quantity: this.derived,
+        });
+        /**
+         * Listeners not on the public interface can be created anonymously.
+         */
+        this.createAsyncListener('sub-load', (type) => __awaiter(this, void 0, void 0, function* () {
+            return this.invokeAsyncAPI(() => __awaiter(this, void 0, void 0, function* () {
+                this.commit.lastChangedProperty = type;
+                return this.service.list();
+            }), 'sub-load-error', 'sub-load-success');
+        }));
+        this.createListener('sub-load-success', entities => this.commit.entities = entities);
+        this.createErrorListener('sub-load-error', () => this.commit.entities = undefined);
+        /**
+         * Stores support creating multiple listeners for the same key, so we can piggyback on events to drive other logic.
+         */
+        this.createListener([
+            'y-changed',
+            'z-changed',
+        ], (_, { type }) => this.emit('sub-load', type));
+    }
+    /**
+     * Does not need any special code as it's computing based on properties that are already observable.
+     */
+    get derived() {
+        return this.y + this.z;
+    }
+};
+__decorate([
+    observable
+], DefaultSubStore.prototype, "x", void 0);
+__decorate([
+    observable
+], DefaultSubStore.prototype, "y", void 0);
+__decorate([
+    observable
+], DefaultSubStore.prototype, "z", void 0);
+__decorate([
+    observable
+], DefaultSubStore.prototype, "lastChangedProperty", void 0);
+__decorate([
+    observable
+], DefaultSubStore.prototype, "entities", void 0);
+__decorate([
+    observable
+], DefaultSubStore.prototype, "selectedEntity", void 0);
+DefaultSubStore = __decorate([
+    __param(0, SubService)
+], DefaultSubStore);
+export { DefaultSubStore };
+/**
+ * Registering as `transient` with the DI directly instead of via `registerStore` given test suite create/destroy cycle.
+ * Normally store fragments are singletons, use `registerStore` in 99% of cases.
+ * @internal
+ */
+export const SubStore = DI.createInterface(x => x.transient(DefaultSubStore));
+/**
+ * @internal
+ */
+let DefaultTestStore = class DefaultTestStore extends AbstractStoreRoot {
+    constructor(subStore, service) {
+        /**
+         * Connect the sub store node to the tree by passing it.
+         */
+        super(subStore);
+        this.subStore = subStore;
+        this.service = service;
+        this.a = '';
+        this.b = 0;
+        this.c = 0;
+        this.onAChanged = this.createListener('a-changed', (detail) => (this.commit.a = detail));
+        this.onBChanged = this.createListener('b-changed', (detail) => (this.commit.b = detail));
+        this.onCChanged = this.createListener('c-changed', (detail) => (this.commit.c = detail));
+        /**
+         * Listeners not on the public interface can be created anonymously.
+         */
+        this.createAsyncListener('post-report', (detail) => __awaiter(this, void 0, void 0, function* () {
+            yield this.service.send(detail);
+        }));
+        /**
+         * Stores support creating multiple listeners for the same key, so we can piggyback on events to drive other logic.
+         */
+        this.createListener([
+            'a-changed',
+            'b-changed',
+        ], (_, { type, detail }) => this.emit('post-report', { trigger: type, value: detail }));
+    }
+    /**
+     * Marked as volatile as it contains branching code paths
+     */
+    get volatileDerived() {
+        return this.a === 'multiply' ? this.b * this.c : this.b + this.c;
+    }
+    /**
+     * Generates css classnames based on store state
+     */
+    get classNames() {
+        return classNames(['warning', this.volatileDerived > 100]);
+    }
+};
+__decorate([
+    observable
+], DefaultTestStore.prototype, "a", void 0);
+__decorate([
+    observable
+], DefaultTestStore.prototype, "b", void 0);
+__decorate([
+    observable
+], DefaultTestStore.prototype, "c", void 0);
+__decorate([
+    volatile
+], DefaultTestStore.prototype, "volatileDerived", null);
+DefaultTestStore = __decorate([
+    __param(0, SubStore),
+    __param(1, ReportService)
+], DefaultTestStore);
+export { DefaultTestStore };
+/**
+ * Registering as `transient` with the DI directly instead of via `registerStore` given test suite create/destroy cycle.
+ * Normally store fragments are singletons, use `registerStore` in 99% of cases.
+ * @internal
+ */
+export const TestStore = DI.createInterface(x => x.transient(DefaultTestStore));

package/dist/esm/__test__/types.js

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

package/dist/esm/store/foundationStore.js

@@ -17,6 +17,15 @@ const getBindArgs = (...args) => {
     }
     return binding;
 };
+/**
+ * @internal
+ */
+export var EventListenerType;
+(function (EventListenerType) {
+    EventListenerType["sync"] = "sync";
+    EventListenerType["async"] = "async";
+    EventListenerType["error"] = "error";
+})(EventListenerType || (EventListenerType = {}));
 /**
  * Creates a dependency injection key for the store being registered.
  * @param Base - The store fragment class.
@@ -25,7 +34,7 @@ const getBindArgs = (...args) => {
  *
  * @example
  * ```ts
- * export const TradeEntry = registerStore(DefaultTradeEntry, 'TradeEntry');
+ * export const TradeEntry = registerStore<TradeEntry>(DefaultTradeEntry, 'TradeEntry');
  * ```
  *
  * @public
@@ -64,6 +73,10 @@ export class AbstractStore {
         /**
          * The store fragment's event listener map.
          *
+         * @remarks
+         * Keyed by listener to allow events to have multiple listeners for cleaner logic flows.
+         * See multiple event keys example in `createAsyncListener`.
+         *
          * @internal
          */
         this.eventListenerMap = new Map();
@@ -112,10 +125,64 @@ export class AbstractStore {
         this.commit = new Proxy(this, this.commitHandler);
         /** {@inheritDoc Store.errors} */
         this.errors = createErrorMap(logger.error);
+        /**
+         * Creates an event listener by type.
+         *
+         * @typeParam TDetail - The CustomEvent detail.
+         * @param type - The type of event listener to create. See {@link EventListenerType}.
+         * @param keys - The event key or keys from the store fragment's event detail map.
+         * @param token - The function handling the event.
+         * @returns The event listener when one key is passed or undefined.
+         *
+         * @internal
+         */
+        this.createListenerType = (type, keys, token) => {
+            let listener;
+            const listenerKeys = Array.isArray(keys) ? keys : [keys];
+            listenerKeys.forEach((key) => {
+                listener = this.createListenerEnvelope(type, token);
+                this.eventListenerMap.set(listener, key);
+            });
+            return listenerKeys.length === 1 ? listener : undefined;
+        };
+        /**
+         * Creates an event listener envelope.
+         *
+         * @remarks
+         * These wrap the provided token.
+         *
+         * @typeParam TDetail - The CustomEvent detail.
+         * @param listenerType - The type of event listener to create. See {@link EventListenerType}.
+         * @param token - The function handling the event.
+         * @returns An event listener.
+         *
+         * @internal
+         */
+        this.createListenerEnvelope = (listenerType, token) => {
+            if (listenerType === EventListenerType.async) {
+                return (event) => __awaiter(this, void 0, void 0, function* () {
+                    const { detail, type } = event;
+                    this.logEvent(type, true);
+                    return token(detail, event);
+                });
+            }
+            return (event) => {
+                const { detail, type } = event;
+                this.logEvent(type);
+                if (listenerType === EventListenerType.error) {
+                    this.errors.set(type, detail);
+                }
+                return token && token(detail, event);
+            };
+        };
         /**
          * Creates an event listener.
+         *
+         * @remarks
+         * See the `createAsyncListener` for usage examples.
+         *
          * @typeParam TDetail - The CustomEvent detail.
-         * @param key - The event key from the store fragment's event detail map.
+         * @param keys - The event key or keys from the store fragment's event detail map.
          * @param token - The function handling the event.
          * @returns The event listener.
          *
@@ -124,17 +191,42 @@ export class AbstractStore {
          * You can think of this like a `reducer` in the redux sense. You are allowed to commit values to the store in these
          * synchronous handlers.
          */
-        this.createListener = (key, token) => {
-            const listener = ({ detail }) => {
-                this.logEvent(key);
-                return token(detail);
-            };
-            return this.mappedListener(key, listener);
-        };
+        this.createListener = (keys, token) => this.createListenerType(EventListenerType.sync, keys, token);
         /**
          * Creates an async event listener.
+         *
+         * @example
+         * Creating an interface defined handler for a single event key.
+         * ```ts
+         * onDomainAction = this.createAsyncListener<DomainActionDetail>(
+         *   'domain-action',
+         *   async ({ id, message }) =>
+         *     this.invokeAsyncAPI(
+         *       async () => this.domainService.action(id, message),
+         *       'domain-action-error',
+         *       'domain-action-success'
+         *     )
+         * );
+         * ```
+         *
+         * @example
+         * Creating an anonymous handler in the constructor for multiple event keys.
+         * ```ts
+         * this.createAsyncListener(
+         *   [
+         *     'columns-changed',
+         *     'types-changed',
+         *     'max-rows-changed',
+         *     'max-view-changed',
+         *     'order-by-changed',
+         *     'reverse-changed',
+         *   ],
+         *   async (_, { type }) => this.emit('domain-load')
+         * );
+         * ```
+         *
          * @typeParam TDetail - The CustomEvent detail.
-         * @param key - The event key from the store fragment's event detail map.
+         * @param keys - The event key or keys from the store fragment's event detail map.
          * @param token - The async function handling the event.
          * @returns The event listener.
          *
@@ -143,17 +235,11 @@ export class AbstractStore {
          * You can think of this like an `effect` in the redux sense. You should not commit values to the store in these,
          * instead raise subsequent events to be handled synchronously, where commits are allowed.
          */
-        this.createAsyncListener = (key, token) => {
-            const listener = ({ detail }) => __awaiter(this, void 0, void 0, function* () {
-                this.logEvent(key, true);
-                return token(detail);
-            });
-            return this.mappedListener(key, listener);
-        };
+        this.createAsyncListener = (keys, token) => this.createListenerType(EventListenerType.async, keys, token);
         /**
          * Creates an error event listener.
          * @typeParam TDetail - The CustomEvent detail.
-         * @param key - The event key from the store fragment's event detail map.
+         * @param keys - The event key or keys from the store fragment's event detail map.
          * @param token - The function handling the event.
          * @returns The event listener.
          *
@@ -162,14 +248,7 @@ export class AbstractStore {
          * This logs and stores errors by event key in the store fragment's {@link ErrorMap}, allowing multiple errors to
          * co-exist, and be presentable to the user via the UI for further action or dismissal.
          */
-        this.createErrorListener = (key, token) => {
-            const listener = ({ detail }) => {
-                this.logEvent(key);
-                this.errors.set(key, detail);
-                return token && token(detail);
-            };
-            return this.mappedListener(key, listener);
-        };
+        this.createErrorListener = (keys, token) => this.createListenerType(EventListenerType.error, keys, token);
         this.storeFragments = storeFragments;
     }
     /**
@@ -259,18 +338,6 @@ export class AbstractStore {
             logger.debug(`'${this.name}': Handle '${String(key)}' store event ${isAsyncHandler ? '[async]' : ''}`);
         }
     }
-    /**
-     * Sets event listeners on the store fragment's internal map.
-     * @param key - The event key from the store fragment's event detail map.
-     * @param listener - The event listener.
-     * @returns The event listener.
-     *
-     * @internal
-     */
-    mappedListener(key, listener) {
-        this.eventListenerMap.set(key, listener);
-        return listener;
-    }
     /**
      * Add the store fragment's event listeners to the root element.
      * @param element - The store root element.
@@ -280,7 +347,7 @@ export class AbstractStore {
      * Called via connect() when the root element changes.
      */
     addEventListeners(element) {
-        for (const [key, listener] of this.eventListenerMap) {
+        for (const [listener, key] of this.eventListenerMap) {
             element.addEventListener(key, listener);
         }
     }
@@ -293,7 +360,7 @@ export class AbstractStore {
      * Called via disconnect() when the root element changes.
      */
     removeEventListeners(element) {
-        for (const [key, listener] of this.eventListenerMap) {
+        for (const [listener, key] of this.eventListenerMap) {
             element.removeEventListener(key, listener);
         }
     }
@@ -317,6 +384,44 @@ export class AbstractStore {
         }
         this.root.element.dispatchEvent(new CustomEvent(key, Object.assign({ detail }, internalEmitOptions)));
     }
+    /**
+     * A convenience method to invoke an async api and emit success and error events.
+     *
+     * @remarks
+     * The async api function should throw when it encounters an error.
+     *
+     * @example
+     * ```ts
+     * onLoad = this.createAsyncListener('domain-load', async () =>
+     *  this.invokeAsyncAPI(
+     *    async () => {
+     *      !this.domainService.initialized && (await this.domainService.initialize(this.asDomainServiceInit()));
+     *      return this.domainService.list();
+     *    },
+     *    'domain-load-error',
+     *    'domain-load-success'
+     *  )
+     * );
+     * ```
+     *
+     * @param api - The async service api function.
+     * @param error - The event key from the store fragment's event detail map.
+     * @param success - The event key from the store fragment's event detail map.
+     * @public
+     */
+    invokeAsyncAPI(api, error, success) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const result = yield api();
+                // @ts-ignore (we know more about this than ts)
+                success && this.emit(success, result);
+            }
+            catch (e) {
+                // @ts-ignore (we know more about this than ts)
+                this.emit(error, e);
+            }
+        });
+    }
 }
 /**
  * The abstract store root that concrete store roots must extend.