@genesislcap/foundation-shell 14.131.0 → 14.133.0

package/dist/esm/app/behaviors.js

@@ -0,0 +1,126 @@
+import { toElementStyles } from '@genesislcap/foundation-utils';
+import { Observable } from '@microsoft/fast-element';
+import { assetPredicate, registrationPredicate, targetIdPredicate } from './utils';
+/**
+ * @internal
+ */
+export class AppStylesTargetBehavior {
+    constructor(app, targetId, predicate) {
+        this.app = app;
+        this.targetId = targetId;
+        this.predicate = predicate;
+    }
+    bind(elementInstance) {
+        this.targetElement = elementInstance;
+        Observable.getNotifier(this.app).subscribe(this, 'styles');
+        this.handleChange();
+    }
+    unbind() {
+        var _a;
+        Observable.getNotifier(this.app).unsubscribe(this, 'styles');
+        (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.$fastController.removeStyles(this.prevTargetStyles);
+    }
+    handleChange() {
+        var _a, _b;
+        this.updateTargetStyles();
+        if (this.prevTargetStyles && this.prevTargetStyles !== this.nextTargetStyles) {
+            (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.$fastController.removeStyles(this.prevTargetStyles);
+        }
+        (_b = this.targetElement) === null || _b === void 0 ? void 0 : _b.$fastController.addStyles(this.nextTargetStyles);
+    }
+    updateTargetStyles() {
+        this.prevTargetStyles = this.nextTargetStyles;
+        this.nextTargetStyles = toElementStyles(this.app.styles
+            .filter((asset) => targetIdPredicate(asset, this.targetId) &&
+            assetPredicate(asset, this.app.config.context) &&
+            registrationPredicate(asset, this.predicate, this.app.config.context))
+            .map((token) => token.styles)
+            .flat());
+    }
+}
+/**
+ * @internal
+ */
+const matchingFilterResult = (prev, next) => prev.length === next.length && prev.every((element, index) => element === next[index]);
+/**
+ * @internal
+ */
+export class AppRoutesBehavior {
+    constructor(app, routeCollection, predicate) {
+        this.app = app;
+        this.routeCollection = routeCollection;
+        this.predicate = predicate;
+        this.prevRoutes = [];
+        this.nextRoutes = [];
+    }
+    bind() {
+        Observable.getNotifier(this.app).subscribe(this, 'routes');
+        this.handleChange();
+    }
+    unbind() {
+        Observable.getNotifier(this.app).unsubscribe(this, 'routes');
+    }
+    handleChange() {
+        this.updateTargetRoutes();
+        /**
+         * There is no remove or unmap api on the router to do something like this:
+         *
+         * if (this.prevRoutes?.length) {
+         *    this.routeCollection.unmap(...this.prevRoutes);
+         * }
+         *
+         * ...but maybe we can add that eventually.
+         */
+        if (matchingFilterResult(this.prevRoutes, this.nextRoutes)) {
+            return;
+        }
+        const newRoutes = this.nextRoutes.filter((route) => !this.prevRoutes.includes(route));
+        if (newRoutes.length) {
+            this.routeCollection.map(...newRoutes);
+        }
+    }
+    updateTargetRoutes() {
+        this.prevRoutes = this.nextRoutes;
+        this.nextRoutes = this.app.routes.filter((asset) => assetPredicate(asset, this.app.config.context) &&
+            registrationPredicate(asset, this.predicate, this.app.config.context));
+    }
+}
+/**
+ * @internal
+ */
+export class AppStoresBehavior {
+    constructor(app, storeRoot, predicate) {
+        this.app = app;
+        this.storeRoot = storeRoot;
+        this.predicate = predicate;
+        this.prevStores = [];
+        this.nextStores = [];
+    }
+    bind() {
+        Observable.getNotifier(this.app).subscribe(this, 'stores');
+        this.handleChange();
+    }
+    unbind() {
+        Observable.getNotifier(this.app).unsubscribe(this, 'stores');
+    }
+    handleChange() {
+        var _a, _b;
+        this.updateTargetStores();
+        if (matchingFilterResult(this.prevStores, this.nextStores)) {
+            return;
+        }
+        if ((_a = this.prevStores) === null || _a === void 0 ? void 0 : _a.length) {
+            const oldFragments = this.prevStores.map((appStore) => appStore.store);
+            this.storeRoot.removeStoreFragments(...oldFragments);
+        }
+        if ((_b = this.nextStores) === null || _b === void 0 ? void 0 : _b.length) {
+            const newFragments = this.nextStores.map((appStore) => appStore.store);
+            this.storeRoot.addStoreFragments(...newFragments);
+        }
+    }
+    updateTargetStores() {
+        this.prevStores = this.nextStores;
+        this.nextStores = this.app.stores.filter((asset) => assetPredicate(asset, this.app.config.context) &&
+            registrationPredicate(asset, this.predicate, this.app.config.context));
+    }
+}

package/dist/esm/app/config.js

@@ -0,0 +1,28 @@
+import { DI } from '@microsoft/fast-foundation';
+/**
+ * Default AppConfig DI implementation.
+ * @public
+ */
+export const defaultAppConfig = {
+    /**
+     * TODO: Assignment of context.
+     */
+    context: {
+        env: 'development',
+        domain: location.hostname,
+        user: {},
+        answers: {},
+        featureFlags: {},
+    },
+    defaultElementRepeatOptions: {
+        positioning: true,
+    },
+};
+/**
+ * AppConfig DI key.
+ *
+ * @internal
+ * @privateRemarks
+ * Marked as internal to stop api-extractor becoming confused cross-linking tokens with the same name.
+ */
+export const AppConfig = DI.createInterface((x) => x.instance(defaultAppConfig));

package/dist/esm/app/index.js

@@ -0,0 +1,4 @@
+export * from './app';
+export * from './config';
+export * from './types';
+export * from './utils';

package/dist/esm/app/types.js

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

package/dist/esm/app/utils.js

@@ -0,0 +1,102 @@
+import { ElementStyles, ViewTemplate } from '@microsoft/fast-element';
+/**
+ * @param token - A module export token.
+ * @public
+ */
+export function isAppMetadata(token) {
+    const metadata = token;
+    return metadata && !!metadata.name && !!metadata.version;
+}
+/**
+ * @param token - A module export token.
+ * @public
+ */
+export function isAppRegistration(token) {
+    return typeof token === 'function'; // && token.length === 1; // < could enforce context arg
+}
+/**
+ * @param token - A module export token.
+ * @public
+ */
+export function isAppRoute(token) {
+    const route = token;
+    return route && !!route.path && !!route.element;
+}
+/**
+ * @param token - A module export token.
+ * @public
+ */
+export function isAppStore(token) {
+    const store = token;
+    return store && !!store.store;
+}
+/**
+ * @param token - A module export token.
+ * @public
+ */
+export function isAppElement(token) {
+    const pbcElements = token;
+    return (pbcElements &&
+        !!pbcElements.targetId &&
+        !!pbcElements.elements &&
+        isViewTemplate(pbcElements.elements));
+}
+/**
+ * @param token - A module export token / element candidate.
+ * @public
+ */
+export function isViewTemplate(token) {
+    return token instanceof ViewTemplate;
+}
+/**
+ * @param token - A module export token.
+ * @public
+ */
+export function isAppStyle(token) {
+    const pbcStyles = token;
+    return (pbcStyles && !!pbcStyles.targetId && !!pbcStyles.styles && isComposableStyles(pbcStyles.styles));
+}
+/**
+ * @param token - A module export token / styles candidate.
+ * @public
+ */
+export function isComposableStyles(token) {
+    return (typeof token === 'string' || token instanceof ElementStyles || token instanceof CSSStyleSheet);
+}
+/**
+ * @public
+ */
+export const registrationPredicate = (asset, predicate, context) => (typeof predicate === 'function' ? predicate(asset, context) : true);
+/**
+ * @public
+ */
+export const targetIdPredicate = (asset, targetId) => Array.isArray(targetId) ? targetId.includes(asset.targetId) : asset.targetId === targetId;
+/**
+ * @public
+ */
+export const assetPredicate = (asset, context) => typeof asset.predicate === 'function' ? asset.predicate(context) : true;
+/**
+ * @param module - An imported module.
+ * @param predicate - Token type predicate.
+ * @public
+ */
+export const getQualifiedModuleTokens = (module, predicate) => {
+    const tokenArray = [];
+    Object.keys(module).forEach((token) => {
+        /**
+         * Guard against `export default` tokens that can cause duplicates
+         */
+        if (tokenArray.includes(module[token])) {
+            return;
+        }
+        /**
+         * Guard against tokens of unexpected types
+         */
+        if (predicate && !predicate(module[token])) {
+            console.log(`The module export ${token} is not of the expected type.`);
+            return;
+        }
+        tokenArray.push(module[token]);
+    });
+    return tokenArray;
+};

package/dist/esm/index.docs.js

@@ -0,0 +1,7 @@
+/**
+ * API Docs index. This is used by api-extractor given our package.json exports.
+ * Monitoring: https://github.com/microsoft/rushstack/issues/3557
+ */
+export * from './index';
+export * from './app';
+export * from './pbc';

package/dist/esm/layouts/default/layout.js

@@ -1,5 +1,8 @@
 const elementLoader = `<div className="loading">Loading...</div>`;
 const appLoader = `<div className="loading">Loading...</div>`;
+/**
+ * @internal
+ */
 module.exports = (authToken, loggedInUser) => ({
     mode: 'history',
     base: '/',

package/dist/esm/layouts/formatsExample/layout.js

@@ -1,5 +1,8 @@
 const elementLoader = `<div className="loading">Loading...</div>`;
 const appLoader = `<div className="loading">Loading...</div>`;
+/**
+ * @internal
+ */
 module.exports = (authToken, loggedInUser) => ({
     mode: 'history',
     base: '/',

package/dist/esm/main/main.js

@@ -4,6 +4,9 @@ import { logger } from '../utils';
 import { MainStyles as styles } from './main.styles';
 import { DynamicTemplate as template, LoadingTemplate, MainTemplate } from './main.template';
 const name = 'foundation-shell';
+/**
+ * @public
+ */
 let MainApplication = class MainApplication extends FASTElement {
     constructor() {
         super(...arguments);

package/dist/esm/main/main.styles.js

@@ -1,5 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import './main.css';
+/**
+ * @public
+ */
 export const MainStyles = css `
   :host {
     contain: content;

package/dist/esm/main/main.template.js

@@ -1,10 +1,19 @@
 import { html } from '@microsoft/fast-element';
+/**
+ * @public
+ */
 export const DynamicTemplate = html `
   <div id="app-shell" class="dynamic-template">${(x) => x.selectTemplate()}</div>
 `;
+/**
+ * @public
+ */
 export const LoadingTemplate = html `
   ...
 `;
+/**
+ * @public
+ */
 export const MainTemplate = html `
   <h1>Genesis App Shell / Registry</h1>
   <slot></slot>

package/dist/esm/pbc/index.js

@@ -0,0 +1 @@
+export * from './pbc';

package/dist/esm/pbc/pbc.js

@@ -0,0 +1,82 @@
+import { __awaiter } from "tslib";
+import { logger } from '../utils';
+/**
+ * A utility for importing PBC assets that have been added to the application's src/pbc directory via genx add.
+ *
+ * The `genx` builder (webpack or vite) will attempt to dynamically load all PBC assets from the application's `src/pbc`
+ * directory by default. The returned AppAssets can then be applied to the App. Please note that `app.registerAssets`
+ * is a one-time operation, intended for upfront bulk registration. After this point, you must use the single asset
+ * APIs of the `App` for lazy asset registration or deregistration.
+ *
+ * @example
+ * ```ts
+ * import { importPBCAssets } from '@genesislcap/foundation-shell/pbc';
+ * ...
+ * const assets = await importPBCAssets();
+ * ...
+ * app.registerAssets(assets);
+ * ```
+ *
+ * @example
+ * A typical app setup that makes use of PBC imports might look like this.
+ * ```ts
+ * // src/main/main.ts
+ *
+ * @App app: App;
+ *
+ * async connectedCallback() {
+ *   ...
+ *   await this.loadPBCs();
+ *   ...
+ * }
+ *
+ * async loadPBCs() {
+ *   // Import PBC assets that may have been added to the ./pbc directory by genx or by hand
+ *   const pbcAssets = await importPBCAssets();
+ *
+ *   // Register bulk assets
+ *   this.app.registerAssets(pbcAssets);
+ *
+ *   // Register the top-level route collection
+ *   this.app.registerRouteCollection(this.config.routes);
+ * }
+ * ```
+ *
+ * The rest of the PBC setup is handled by the system automatically, however, you will still need to register
+ * application asset integration points.
+ *
+ * @example
+ * A typical PBC directory structure may look like this.
+ * ```markdown
+ * ├── reporting
+ * │   ├── elements.ts
+ * │   ├── metadata.ts
+ * │   ├── registrations.ts
+ * │   ├── routes.ts
+ * │   ├── stores.ts
+ * │   └── styles.ts
+ * ```
+ *
+ * Each file is dynamically loaded and processed as part of the overall PBC set the application contains. PBCs do not
+ * need to include `index.ts` files, and export token naming does not matter within any of these files. For example,
+ * `foo` here `export const foo: AppElement = {...}` has no impact on PBC integration.
+ *
+ * The answers generated from the `genx add` cli flows can be used to tailor what PBC assets are included at build-time.
+ *
+ * @public
+ */
+export function importPBCAssets() {
+    return __awaiter(this, void 0, void 0, function* () {
+        let assets;
+        if (BUILDER === 'webpack') {
+            assets = yield import('./webpack');
+        }
+        else if (BUILDER === 'vite') {
+            assets = yield import('./vite');
+        }
+        else {
+            logger.error('importPBCAssets error. Unable to determine the BUILDER in use.');
+        }
+        return assets;
+    });
+}

package/dist/esm/pbc/vite/exports.js

@@ -0,0 +1,38 @@
+import { isAppElement, isAppMetadata, isAppRegistration, isAppRoute, isAppStore, isAppStyle, } from '../../app/utils';
+import { importAll } from './utils';
+/**
+ * @public
+ */
+export const metadata = importAll(import.meta.glob('pbc/**/metadata.ts', {
+    eager: true,
+}), isAppMetadata);
+/**
+ * @public
+ */
+export const registrations = importAll(import.meta.glob('pbc/**/registrations.ts', {
+    eager: true,
+}), isAppRegistration);
+/**
+ * @public
+ */
+export const routes = importAll(import.meta.glob('pbc/**/routes.ts', {
+    eager: true,
+}), isAppRoute);
+/**
+ * @public
+ */
+export const elements = importAll(import.meta.glob('pbc/**/elements.ts', {
+    eager: true,
+}), isAppElement);
+/**
+ * @public
+ */
+export const styles = importAll(import.meta.glob('pbc/**/styles.ts', {
+    eager: true,
+}), isAppStyle);
+/**
+ * @public
+ */
+export const stores = importAll(import.meta.glob('pbc/**/stores.ts', {
+    eager: true,
+}), isAppStore);

package/dist/esm/pbc/vite/index.js

@@ -0,0 +1 @@
+export * from './exports';

package/dist/esm/pbc/vite/utils.js

@@ -0,0 +1,16 @@
+import { getQualifiedModuleTokens } from '../../app/utils';
+import { logger } from '../../utils';
+/**
+ * @param modules - Vite import glob modules.
+ * @param predicate - Optional token type predicate.
+ * @public
+ */
+export function importAll(modules, predicate) {
+    const imports = Object.keys(modules).reduce((acc, key) => {
+        const module = modules[key];
+        const tokenArray = getQualifiedModuleTokens(module, predicate);
+        return [...acc, ...tokenArray];
+    }, []);
+    logger.debug('importAll result', imports);
+    return imports;
+}

package/dist/esm/pbc/webpack/exports.js

@@ -0,0 +1,26 @@
+import { isAppElement, isAppMetadata, isAppRegistration, isAppRoute, isAppStore, isAppStyle, } from '../../app/utils';
+import { importAll } from './utils';
+/**
+ * @public
+ */
+export const metadata = importAll(require.context('pbc', true, /metadata\.ts$/), isAppMetadata);
+/**
+ * @public
+ */
+export const registrations = importAll(require.context('pbc', true, /registrations\.ts$/), isAppRegistration);
+/**
+ * @public
+ */
+export const routes = importAll(require.context('pbc', true, /routes\.ts$/), isAppRoute);
+/**
+ * @public
+ */
+export const elements = importAll(require.context('pbc', true, /elements\.ts$/), isAppElement);
+/**
+ * @public
+ */
+export const styles = importAll(require.context('pbc', true, /styles\.ts$/), isAppStyle);
+/**
+ * @public
+ */
+export const stores = importAll(require.context('pbc', true, /stores\.ts$/), isAppStore);

package/dist/esm/pbc/webpack/index.js

@@ -0,0 +1 @@
+export * from './exports';

package/dist/esm/pbc/webpack/utils.js

@@ -0,0 +1,16 @@
+import { getQualifiedModuleTokens } from '../../app/utils';
+import { logger } from '../../utils';
+/**
+ * @param context - Webpack require context.
+ * @param predicate - Optional token type predicate.
+ * @public
+ */
+export function importAll(context, predicate) {
+    const imports = context.keys().reduce((acc, key) => {
+        const module = context(key);
+        const tokenArray = getQualifiedModuleTokens(module, predicate);
+        return [...acc, ...tokenArray];
+    }, []);
+    logger.debug('importAll result', imports);
+    return imports;
+}

package/dist/esm/serviceWorker/serviceWorker.js

@@ -61,6 +61,8 @@ registerRoute(({ request }) => request.destination === 'image', new CacheFirst({
 }));
 /**
  * Message handling
+ *
+ * @internal
  */
 export var ServiceWorkerMessageType;
 (function (ServiceWorkerMessageType) {