@equinor/fusion-framework-module-app 0.0.0-next-20230915111233

package/src/AppModuleProvider.ts

@@ -0,0 +1,181 @@
+import {
+    BehaviorSubject,
+    catchError,
+    distinctUntilChanged,
+    map,
+    Observable,
+    pairwise,
+    Subscription,
+    takeWhile,
+} from 'rxjs';
+
+import { ModuleType } from '@equinor/fusion-framework-module';
+import { HttpResponseError } from '@equinor/fusion-framework-module-http';
+import { EventModule } from '@equinor/fusion-framework-module-event';
+
+import { Query } from '@equinor/fusion-query';
+
+import type { AppConfig, AppManifest, CurrentApp } from './types';
+
+import { App, filterEmpty, IApp } from './app/App';
+import { AppModuleConfig } from './AppConfigurator';
+import { AppConfigError, AppManifestError } from './errors';
+import { AppBundleStateInitial } from './app/types';
+
+export class AppModuleProvider {
+    static compareAppManifest<T extends AppManifest>(a?: T, b?: T): boolean {
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
+
+    public appClient: Query<AppManifest, { appKey: string }>;
+    #appsClient: Query<AppManifest[], void>;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    #configClient: Query<AppConfig<any>, { appKey: string; tag?: string }>;
+
+    #current$: BehaviorSubject<CurrentApp>;
+
+    #subscription = new Subscription();
+
+    #event?: ModuleType<EventModule>;
+
+    /**
+     * fetch an application by key
+     * @param appKey - application key
+     */
+    get current(): CurrentApp {
+        return this.#current$.value;
+    }
+
+    get current$(): Observable<CurrentApp> {
+        return this.#current$.pipe(
+            distinctUntilChanged((prev, next) => {
+                if (prev && next) {
+                    return prev.appKey === next.appKey;
+                }
+                return prev === next;
+            }),
+        );
+    }
+
+    constructor(args: { config: AppModuleConfig; event?: ModuleType<EventModule> }) {
+        const { event, config } = args;
+
+        this.#event = event;
+
+        this.#current$ = new BehaviorSubject<CurrentApp>(undefined);
+
+        this.appClient = new Query(config.client.getAppManifest);
+        this.#appsClient = new Query(config.client.getAppManifests);
+        this.#configClient = new Query(config.client.getAppConfig);
+
+        this.#subscription.add(() => this.appClient.complete());
+        this.#subscription.add(() => this.#appsClient.complete());
+        this.#subscription.add(() => this.#configClient.complete());
+        this.#subscription.add(
+            this.current$
+                .pipe(
+                    pairwise(),
+                    takeWhile(() => !!event),
+                )
+                .subscribe(([previous, next]) => {
+                    event?.dispatchEvent('onCurrentAppChanged', {
+                        source: this,
+                        detail: { previous, next },
+                    });
+                }),
+        );
+
+        this.#subscription.add(
+            this.#current$
+                .pipe(
+                    pairwise(),
+                    map(([previous]) => previous),
+                    filterEmpty(),
+                )
+                .subscribe((app) => app.dispose()),
+        );
+    }
+
+    /**
+     * fetch an application by key
+     * @param appKey - application key
+     */
+    public getAppManifest(appKey: string): Observable<AppManifest> {
+        return Query.extractQueryValue(
+            this.appClient.query({ appKey }).pipe(
+                catchError((err) => {
+                    /** extract cause, since error will be a `QueryError` */
+                    const { cause } = err;
+                    if (cause instanceof AppManifestError) {
+                        throw cause;
+                    }
+                    if (cause instanceof HttpResponseError) {
+                        throw AppManifestError.fromHttpResponse(cause.response, { cause });
+                    }
+                    throw new AppManifestError('unknown', 'failed to load manifest', { cause });
+                }),
+            ),
+        );
+    }
+
+    /**
+     * fetch all applications
+     */
+    public getAllAppManifests(): Observable<AppManifest[]> {
+        return Query.extractQueryValue(this.#appsClient.query());
+    }
+
+    /**
+     * fetch configuration for an application
+     * @param appKey - application key
+     */
+    public getAppConfig<TType = unknown>(
+        appKey: string,
+        tag?: string,
+    ): Observable<AppConfig<TType>> {
+        return Query.extractQueryValue(
+            this.#configClient.query({ appKey, tag }).pipe(
+                catchError((err) => {
+                    /** extract cause, since error will be a `QueryError` */
+                    const { cause } = err;
+                    if (cause instanceof AppConfigError) {
+                        throw cause;
+                    }
+                    if (cause instanceof HttpResponseError) {
+                        throw AppConfigError.fromHttpResponse(cause.response, { cause });
+                    }
+                    throw new AppConfigError('unknown', 'failed to load config', { cause });
+                }),
+            ),
+        );
+    }
+
+    /**
+     * set the current application, will internally resolve manifest
+     * @param appKey - application key
+     */
+    public setCurrentApp(appKeyOrApp: string | IApp): void {
+        const app =
+            typeof appKeyOrApp === 'string' ? this.createApp({ appKey: appKeyOrApp }) : appKeyOrApp;
+        this.#current$.next(app as CurrentApp);
+    }
+
+    public clearCurrentApp(): void {
+        this.#current$.next(null);
+    }
+
+    /**
+     * This should not be used, only for legacy creation backdoor
+     * @deprecated
+     */
+    public createApp(value: AppBundleStateInitial): App {
+        console.warn();
+        return new App(value, { provider: this, event: this.#event });
+    }
+
+    public dispose() {
+        this.#subscription.unsubscribe();
+    }
+}
+
+export default AppModuleProvider;

package/src/app/App.ts

@@ -0,0 +1,399 @@
+import { AppConfig, AppManifest, AppModulesInstance, AppScriptModule } from '../types';
+import { FlowSubject, Observable } from '@equinor/fusion-observable';
+
+import type { AppModuleProvider } from '../AppModuleProvider';
+import {
+    combineLatest,
+    filter,
+    firstValueFrom,
+    lastValueFrom,
+    map,
+    of,
+    OperatorFunction,
+    Subscription,
+} from 'rxjs';
+import { EventModule } from '@equinor/fusion-framework-module-event';
+import { AnyModule, ModuleType } from '@equinor/fusion-framework-module';
+import { createState } from './create-state';
+import { actions, Actions } from './actions';
+import { AppBundleState, AppBundleStateInitial } from './types';
+
+import './events';
+
+// TODO - move globally
+export function filterEmpty<T>(): OperatorFunction<T | null | undefined, T> {
+    return filter((value): value is T => value !== undefined && value !== null);
+}
+
+// TODO add comments!
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface IApp<TEnv = any, TModules extends Array<AnyModule> | unknown = unknown> {
+    get manifest$(): Observable<AppManifest>;
+    get config$(): Observable<AppConfig<TEnv>>;
+    get modules$(): Observable<AppScriptModule>;
+    get instance$(): Observable<AppModulesInstance<TModules>>;
+    get state(): AppBundleState;
+    get appKey(): string;
+    get manifest(): AppManifest | undefined;
+    get manifestAsync(): Promise<AppManifest>;
+    get config(): AppConfig<TEnv> | undefined;
+    get instance(): AppModulesInstance<TModules> | undefined;
+
+    initialize(): Observable<{
+        manifest: AppManifest;
+        script: AppScriptModule;
+        config: AppConfig;
+    }>;
+
+    loadConfig(): void;
+
+    loadManifest(): void;
+
+    loadAppModule(allow_cache?: boolean): void;
+
+    getConfig(force_refresh?: boolean): Observable<AppConfig>;
+    getConfigAsync(allow_cache?: boolean): Promise<AppConfig>;
+
+    getManifest(force_refresh?: boolean): Observable<AppManifest>;
+    getManifestAsync(allow_cache?: boolean): Promise<AppManifest>;
+
+    getAppModule(force_refresh?: boolean): Observable<AppScriptModule>;
+    getAppModuleAsync(allow_cache?: boolean): Promise<AppScriptModule>;
+}
+
+// TODO make streams distinct until changed from state
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export class App<TEnv = any, TModules extends Array<AnyModule> | unknown = unknown>
+    implements IApp<TEnv, TModules>
+{
+    #state: FlowSubject<AppBundleState, Actions>;
+
+    //#region === streams ===
+
+    get manifest$(): Observable<AppManifest> {
+        return this.#state.pipe(
+            map(({ manifest }) => manifest),
+            filterEmpty(),
+        );
+    }
+
+    get config$(): Observable<AppConfig<TEnv>> {
+        return this.#state.pipe(
+            map(({ config }) => config),
+            filterEmpty(),
+        );
+    }
+
+    get modules$(): Observable<AppScriptModule> {
+        return this.#state.pipe(
+            map(({ modules }) => modules),
+            filterEmpty(),
+        );
+    }
+
+    get instance$(): Observable<AppModulesInstance<TModules>> {
+        return this.#state.pipe(
+            map(({ instance }) => instance as AppModulesInstance<TModules>),
+            filterEmpty(),
+        );
+    }
+
+    //#endregion
+
+    get state(): AppBundleState {
+        // todo deep-freeze
+        return this.#state.value;
+    }
+
+    get appKey(): string {
+        return this.#state.value.appKey;
+    }
+
+    get manifest(): AppManifest | undefined {
+        return this.state.manifest;
+    }
+
+    get manifestAsync(): Promise<AppManifest> {
+        return firstValueFrom(this.manifest$);
+    }
+
+    get config(): AppConfig<TEnv> | undefined {
+        return this.state.config;
+    }
+
+    get configAsync(): Promise<AppConfig<TEnv>> {
+        return firstValueFrom(this.config$);
+    }
+
+    get instance(): AppModulesInstance<TModules> | undefined {
+        return this.#state.value.instance as AppModulesInstance<TModules>;
+    }
+
+    constructor(
+        value: AppBundleStateInitial,
+        args: {
+            provider: AppModuleProvider;
+            event?: ModuleType<EventModule>;
+        },
+    ) {
+        this.#state = createState(value, args.provider);
+
+        const { appKey } = value;
+        const { event } = args;
+
+        event && this.#registerEvents(event);
+
+        const subscriptions = new Subscription();
+        if (event) {
+            subscriptions.add(() => {
+                event.dispatchEvent('onAppDispose', { detail: { appKey } });
+            });
+            subscriptions.add(
+                event.addEventListener('onAppModulesLoaded', (e) => {
+                    if (e.detail.appKey === appKey) {
+                        this.#state.next(actions.setInstance(e.detail.modules));
+                    }
+                }),
+            );
+        }
+
+        this.dispose = () => {
+            subscriptions?.unsubscribe();
+            if (this.#state.value.instance) {
+                /** tear down modules of application */
+                this.#state.value.instance.dispose();
+            }
+            this.#state.complete();
+        };
+    }
+
+    #registerEvents(event: ModuleType<EventModule>): void {
+        const { appKey } = this;
+
+        this.#state.addEffect(actions.fetchManifest.success.type, (action) => {
+            event.dispatchEvent('onAppManifestLoaded', {
+                detail: { appKey, manifest: action.payload },
+                source: this,
+            });
+        });
+
+        this.#state.addEffect(actions.fetchConfig.success.type, (action) => {
+            event.dispatchEvent('onAppConfigLoaded', {
+                detail: { appKey, manifest: action.payload },
+                source: this,
+            });
+        });
+
+        this.#state.addEffect(actions.importApp.success.type, (action) => {
+            event.dispatchEvent('onAppScriptLoaded', {
+                detail: { appKey, manifest: action.payload },
+                source: this,
+            });
+        });
+
+        this.#state.addEffect(actions.initialize.type, () => {
+            event.dispatchEvent('onAppInitialize', {
+                detail: { appKey },
+                source: this,
+            });
+        });
+
+        this.#state.addEffect(actions.initialize.success.type, () => {
+            event.dispatchEvent('onAppInitialized', {
+                detail: { appKey },
+                source: this,
+            });
+        });
+
+        this.#state.addEffect(actions.initialize.failure.type, ({ payload }) => {
+            event.dispatchEvent('onAppInitializeFailed', {
+                detail: { appKey, error: payload },
+                source: this,
+            });
+        });
+    }
+
+    /**
+     * The initializing request won`t trigger until subscribing to the returned observable
+     *
+     * @example
+     * ```ts
+     * app.initialize().subscribe({
+     *  next: (value) => {
+     *      value.script.render(el, ...);
+     *  },
+     *  error: (err) => console.error('failed to load application', err),
+     *  complete: () => setInitializingApp(false)
+     * })
+     * ```
+     */
+    public initialize(): Observable<{
+        manifest: AppManifest;
+        script: AppScriptModule;
+        config: AppConfig;
+    }> {
+        return new Observable((observer) => {
+            this.#state.next(actions.initialize());
+            observer.add(
+                combineLatest([
+                    this.getManifest(),
+                    this.getAppModule(),
+                    this.getConfig(),
+                ]).subscribe({
+                    next: ([manifest, script, config]) =>
+                        observer.next({
+                            manifest,
+                            script,
+                            config,
+                        }),
+                    error: (err) => {
+                        observer.error(err), this.#state.next(actions.initialize.failure(err));
+                    },
+                    complete: () => {
+                        this.#state.next(actions.initialize.success());
+                        observer.complete();
+                    },
+                }),
+            );
+        });
+    }
+
+    public loadConfig() {
+        this.#state.next(actions.fetchConfig(this.appKey));
+    }
+
+    public loadManifest(update?: boolean) {
+        this.#state.next(actions.fetchManifest(this.appKey, update));
+    }
+
+    public updateManifest(manifest: AppManifest, replace?: false) {
+        this.#state.next(actions.setManifest(manifest, !replace));
+    }
+
+    public async loadAppModule(allow_cache = true) {
+        const manifest = await this.getManifestAsync(allow_cache);
+        this.#state.next(actions.importApp(manifest.entry));
+    }
+
+    public getConfig(force_refresh = false): Observable<AppConfig> {
+        return new Observable((subscriber) => {
+            if (this.#state.value.config) {
+                subscriber.next(this.#state.value.config);
+                if (!force_refresh) {
+                    return subscriber.complete();
+                }
+            }
+            subscriber.add(
+                this.#state.addEffect('set_config', ({ payload }) => {
+                    subscriber.next(payload);
+                }),
+            );
+            subscriber.add(
+                this.#state.addEffect('fetch_config::success', ({ payload }) => {
+                    subscriber.next(payload);
+                    subscriber.complete();
+                }),
+            );
+            subscriber.add(
+                this.#state.addEffect('fetch_config::failure', ({ payload }) => {
+                    subscriber.error(
+                        Error('failed to load application config', {
+                            cause: payload,
+                        }),
+                    );
+                }),
+            );
+
+            this.loadConfig();
+        });
+    }
+
+    public getConfigAsync(allow_cache = true): Promise<AppConfig> {
+        const operator = allow_cache ? firstValueFrom : lastValueFrom;
+        return operator(this.getConfig(!allow_cache));
+    }
+
+    public getManifest(force_refresh = false): Observable<AppManifest> {
+        return new Observable((subscriber) => {
+            if (this.#state.value.manifest) {
+                subscriber.next(this.#state.value.manifest);
+                if (!force_refresh) {
+                    return subscriber.complete();
+                }
+            }
+            subscriber.add(
+                this.#state.addEffect('set_manifest', ({ payload }) => {
+                    subscriber.next(payload);
+                }),
+            );
+            subscriber.add(
+                this.#state.addEffect('fetch_manifest::success', ({ payload }) => {
+                    subscriber.next(payload);
+                    subscriber.complete();
+                }),
+            );
+            subscriber.add(
+                this.#state.addEffect('fetch_manifest::failure', ({ payload }) => {
+                    subscriber.error(
+                        Error('failed to load application manifest', {
+                            cause: payload,
+                        }),
+                    );
+                }),
+            );
+
+            this.loadManifest();
+        });
+    }
+
+    public getManifestAsync(allow_cache = true): Promise<AppManifest> {
+        const operator = allow_cache ? firstValueFrom : lastValueFrom;
+        return operator(this.getManifest(!allow_cache));
+    }
+
+    public getAppModule(force_refresh = false): Observable<AppScriptModule> {
+        return new Observable((subscriber) => {
+            if (this.#state.value.modules) {
+                subscriber.next(this.#state.value.modules);
+                if (!force_refresh) {
+                    return subscriber.complete();
+                }
+            }
+            subscriber.add(
+                this.#state.addEffect('set_module', ({ payload }) => {
+                    subscriber.next(payload);
+                }),
+            );
+            subscriber.add(
+                this.#state.addEffect('import_app::success', ({ payload }) => {
+                    subscriber.next(payload);
+                    subscriber.complete();
+                }),
+            );
+            subscriber.add(
+                this.#state.addEffect('import_app::failure', ({ payload }) => {
+                    subscriber.error(
+                        Error('failed to load application modules from script', {
+                            cause: payload,
+                        }),
+                    );
+                }),
+            );
+
+            subscriber.add(
+                this.getManifest().subscribe((manifest) =>
+                    of(this.#state.next(actions.importApp(manifest.entry))),
+                ),
+            );
+        });
+    }
+
+    public getAppModuleAsync(allow_cache = true): Promise<AppScriptModule> {
+        const operator = allow_cache ? firstValueFrom : lastValueFrom;
+        return operator(this.getAppModule(!allow_cache));
+    }
+
+    public dispose: VoidFunction;
+}
+
+export default App;

package/src/app/actions.ts

@@ -0,0 +1,63 @@
+import {
+    ActionInstanceMap,
+    ActionTypes,
+    createAction,
+    createAsyncAction,
+} from '@equinor/fusion-observable';
+import { AppConfig, AppManifest, AppModulesInstance, AppScriptModule } from '../types';
+
+const createActions = () => ({
+    /** Manifest loading */
+    setManifest: createAction('set_manifest', (manifest: AppManifest, update?: boolean) => ({
+        payload: manifest,
+        meta: {
+            // TODO when updating
+            created: Date.now(),
+            update,
+        },
+    })),
+
+    fetchManifest: createAsyncAction(
+        'fetch_manifest',
+        (key: string, update?: boolean) => ({ payload: key, meta: { update } }),
+        (manifest: AppManifest) => ({ payload: manifest }),
+        (error: unknown) => ({ payload: error }),
+    ),
+    /** Config loading */
+    setConfig: createAction('set_config', (config: AppConfig) => ({ payload: config })),
+    fetchConfig: createAsyncAction(
+        'fetch_config',
+        (key: string) => ({ payload: key }),
+        (config: AppConfig) => ({ payload: config }),
+        (error: unknown) => ({ payload: error }),
+    ),
+    /** App loading */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    setModule: createAction('set_module', (module: any) => ({ payload: module })),
+    importApp: createAsyncAction(
+        'import_app',
+        (entrypoint: string) => ({ payload: entrypoint }),
+        (module: AppScriptModule) => ({ payload: module }),
+        (error: unknown) => ({ payload: error }),
+    ),
+
+    // App Instance
+    setInstance: createAction('set_instance', (instance: AppModulesInstance) => ({
+        payload: instance,
+    })),
+
+    initialize: createAsyncAction(
+        'initialize_app',
+        () => ({ payload: null }),
+        () => ({ payload: null }),
+        (error: unknown) => ({ payload: error }),
+    ),
+});
+
+export const actions = createActions();
+
+export type ActionBuilder = ReturnType<typeof createActions>;
+
+export type ActionMap = ActionInstanceMap<ActionBuilder>;
+
+export type Actions = ActionTypes<typeof actions>;

package/src/app/create-reducer.ts

@@ -0,0 +1,45 @@
+import {
+    actionBaseType,
+    createReducer as makeReducer,
+    isCompleteAction,
+    isRequestAction,
+} from '@equinor/fusion-observable';
+
+import { enableMapSet } from 'immer';
+
+enableMapSet();
+
+import { actions } from './actions';
+
+import { AppBundleState, AppBundleStateInitial } from './types';
+
+export const createReducer = (value: AppBundleStateInitial) =>
+    makeReducer({ ...value, status: new Set() } as AppBundleState, (builder) =>
+        builder
+            .addCase(actions.setManifest, (state, action) => {
+                if (action.meta.update) {
+                    state.manifest = { ...state.manifest, ...action.payload };
+                } else {
+                    state.manifest = action.payload;
+                }
+            })
+            .addCase(actions.setConfig, (state, action) => {
+                state.config = action.payload;
+            })
+            .addCase(actions.setModule, (state, action) => {
+                state.modules = action.payload;
+            })
+            .addCase(actions.setInstance, (state, action) => {
+                state.instance = action.payload;
+            })
+            /** mark status as loading {{type}} */
+            .addMatcher(isRequestAction, (state, action) => {
+                state.status.add(actionBaseType(action));
+            })
+            /** clear status {{type}} */
+            .addMatcher(isCompleteAction, (state, action) => {
+                state.status.delete(actionBaseType(action));
+            }),
+    );
+
+export default createReducer;