@equinor/fusion-framework-module-app 2.1.6 → 2.3.0

package/src/AppModuleProvider.ts

@@ -0,0 +1,159 @@
+import {
+    BehaviorSubject,
+    catchError,
+    distinctUntilKeyChanged,
+    map,
+    Observable,
+    pairwise,
+    Subscription,
+    takeWhile,
+} from 'rxjs';
+
+import { ModuleType } from '@equinor/fusion-framework-module';
+
+import { Query } from '@equinor/fusion-query';
+
+import { EventModule } from '@equinor/fusion-framework-module-event';
+
+import type { AppConfig, AppManifest } from './types';
+
+import { App, filterEmpty } from './app/App';
+import { AppModuleConfig } from './AppConfigurator';
+import { HttpResponseError } from '@equinor/fusion-framework-module-http';
+import { AppConfigError, AppManifestError } from './errors';
+
+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<App | undefined>;
+
+    #subscription = new Subscription();
+
+    #event?: ModuleType<EventModule>;
+
+    /**
+     * fetch an application by key
+     * @param appKey - application key
+     */
+    get current(): App | undefined {
+        return this.#current$.value;
+    }
+
+    get current$(): Observable<App> {
+        return this.#current$.pipe(filterEmpty(), distinctUntilKeyChanged('appKey'));
+    }
+
+    constructor(args: { config: AppModuleConfig; event?: ModuleType<EventModule> }) {
+        const { event, config } = args;
+
+        this.#event = event;
+
+        this.#current$ = new BehaviorSubject<App | undefined>(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(appKey: string): void {
+        this.#current$.next(new App(appKey, { provider: this, event: this.#event }));
+    }
+
+    public dispose() {
+        this.#subscription.unsubscribe();
+    }
+}
+
+export default AppModuleProvider;

package/src/app/App.ts

@@ -0,0 +1,243 @@
+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 } 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);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export class App<TEnv = any, TModules extends Array<AnyModule> | unknown = unknown> {
+    #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 appKey(): string {
+        return this.#state.value.appKey;
+    }
+
+    get manifest(): Promise<AppManifest> {
+        return firstValueFrom(this.manifest$);
+    }
+
+    get config(): Promise<AppConfig<TEnv>> {
+        return firstValueFrom(this.config$);
+    }
+
+    get instance(): AppModulesInstance<TModules> | undefined {
+        return this.#state.value.instance as AppModulesInstance<TModules>;
+    }
+
+    constructor(
+        appKey: string,
+        args: { provider: AppModuleProvider; event?: ModuleType<EventModule> }
+    ) {
+        this.#state = createState(appKey, args.provider);
+
+        const subscriptions = new Subscription();
+
+        if (args.event) {
+            subscriptions.add(
+                args.event.addEventListener('onAppModulesLoaded', (e) => {
+                    if (e.detail.appKey === appKey) {
+                        this.#state.next(actions.setInstance(e.detail.modules));
+                    }
+                })
+            );
+        }
+
+        this.dispose = () => {
+            if (this.#state.value.instance) {
+                this.#state.value.instance.dispose();
+            }
+            subscriptions.unsubscribe();
+            this.#state.complete();
+        };
+    }
+
+    public initialize(): Observable<[AppManifest, AppScriptModule, AppConfig]> {
+        return combineLatest([this.getManifest(), this.getAppModule(), this.getConfig()]);
+    }
+
+    public loadConfig() {
+        this.#state.next(actions.fetchConfig(this.appKey));
+    }
+
+    public loadManifest() {
+        this.#state.next(actions.fetchManifest(this.appKey));
+    }
+
+    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;
+}

package/src/app/actions.ts

@@ -0,0 +1,51 @@
+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) => ({
+        payload: manifest,
+        meta: { created: Date.now() },
+    })),
+    fetchManifest: createAsyncAction(
+        'fetch_manifest',
+        (key: string) => ({ payload: key }),
+        (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,
+    })),
+});
+
+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,41 @@
+import {
+    actionBaseType,
+    createReducer as makeReducer,
+    isCompleteAction,
+    isRequestAction,
+} from '@equinor/fusion-observable';
+
+import { enableMapSet } from 'immer';
+
+enableMapSet();
+
+import { actions } from './actions';
+
+import { AppBundleState } from './types';
+
+export const createReducer = (appKey: string) =>
+    makeReducer({ appKey, status: new Set() } as AppBundleState, (builder) =>
+        builder
+            .addCase(actions.setManifest, (state, action) => {
+                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;

package/src/app/create-state.ts

@@ -0,0 +1,21 @@
+import { FlowSubject } from '@equinor/fusion-observable';
+
+import { createReducer } from './create-reducer';
+
+import { handleFetchManifest, handleFetchConfig, handleImportApplication } from './flows';
+
+import type { Actions } from './actions';
+import type { AppBundleState } from './types';
+import type { AppModuleProvider } from '../AppModuleProvider';
+
+export const createState = (
+    appKey: string,
+    provider: AppModuleProvider
+): FlowSubject<AppBundleState, Actions> => {
+    const reducer = createReducer(appKey);
+    const state = new FlowSubject<AppBundleState, Actions>(reducer);
+    state.addFlow(handleFetchManifest(provider));
+    state.addFlow(handleFetchConfig(provider));
+    state.addFlow(handleImportApplication());
+    return state;
+};

package/src/app/flows.ts

@@ -0,0 +1,61 @@
+import { from, of, merge } from 'rxjs';
+import { catchError, filter, last, map, switchMap } from 'rxjs/operators';
+
+import { actions } from './actions';
+
+import type { Flow } from '@equinor/fusion-observable';
+import type { AppModuleProvider } from '../AppModuleProvider';
+import type { Actions } from './actions';
+import { AppBundleState } from './types';
+
+export const handleFetchManifest =
+    (provider: AppModuleProvider): Flow<Actions, AppBundleState> =>
+    (action$) =>
+        action$.pipe(
+            filter(actions.fetchManifest.match),
+            switchMap(({ payload: appKey }) => {
+                const fetch$ = from(provider.getAppManifest(appKey)).pipe(
+                    filter((x) => !!x),
+                    map(actions.setManifest)
+                );
+                return merge(
+                    fetch$,
+                    fetch$.pipe(
+                        last(),
+                        map(({ payload }) => actions.fetchManifest.success(payload))
+                    )
+                ).pipe(
+                    catchError((err) => {
+                        return of(actions.fetchManifest.failure(err));
+                    })
+                );
+            })
+        );
+
+export const handleFetchConfig =
+    (provider: AppModuleProvider): Flow<Actions, AppBundleState> =>
+    (action$) =>
+        action$.pipe(
+            filter(actions.fetchConfig.match),
+            switchMap(({ payload: appKey }) => {
+                const fetch$ = from(provider.getAppConfig(appKey)).pipe(map(actions.setConfig));
+                return merge(
+                    fetch$,
+                    fetch$.pipe(
+                        last(),
+                        map(({ payload }) => actions.fetchConfig.success(payload))
+                    )
+                ).pipe(catchError((err) => of(actions.fetchConfig.failure(err))));
+            })
+        );
+
+export const handleImportApplication = (): Flow<Actions, AppBundleState> => (action$) =>
+    action$.pipe(
+        filter(actions.importApp.match),
+        switchMap(({ payload }) => {
+            return from(import(payload)).pipe(
+                map(actions.importApp.success),
+                catchError((err) => of(actions.importApp.failure(err)))
+            );
+        })
+    );

package/src/app/types.ts

@@ -0,0 +1,11 @@
+import type { AppConfig, AppManifest, AppModulesInstance, AppScriptModule } from '../types';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AppBundleState<TConfig = any, TModules = any> = {
+    appKey: string;
+    status: Set<string>;
+    manifest?: AppManifest;
+    config?: AppConfig<TConfig>;
+    modules?: AppScriptModule;
+    instance?: AppModulesInstance<TModules>;
+};

package/src/errors.ts

@@ -0,0 +1,53 @@
+type AppErrorType = 'not_found' | 'unauthorized' | 'unknown';
+
+export class AppManifestError extends Error {
+    static fromHttpResponse(response: Response, options?: ErrorOptions) {
+        switch (response.status) {
+            case 401:
+                return new AppManifestError(
+                    'unauthorized',
+                    'failed to load application manifest, request not authorized',
+                    options
+                );
+            case 404:
+                return new AppManifestError('not_found', 'application manifest not found', options);
+        }
+        return new AppManifestError(
+            'unknown',
+            `failed to load application manifest, status code ${response.status}`,
+            options
+        );
+    }
+    constructor(public readonly type: AppErrorType, message?: string, options?: ErrorOptions) {
+        super(message, options);
+    }
+}
+
+export class AppConfigError extends Error {
+    static fromHttpResponse(response: Response, options?: ErrorOptions) {
+        switch (response.status) {
+            case 401:
+                return new AppConfigError(
+                    'unauthorized',
+                    'failed to load application config, request not authorized',
+                    options
+                );
+            case 404:
+                return new AppConfigError('not_found', 'application config not found', options);
+        }
+        return new AppConfigError(
+            'unknown',
+            `failed to load application config, status code ${response.status}`,
+            options
+        );
+    }
+    constructor(public readonly type: AppErrorType, message?: string, options?: ErrorOptions) {
+        super(message, options);
+    }
+}
+
+export class AppScriptModuleError extends Error {
+    constructor(public readonly type: AppErrorType, message?: string, options?: ErrorOptions) {
+        super(message, options);
+    }
+}

package/src/events.ts

@@ -0,0 +1,34 @@
+import { AnyModule } from '@equinor/fusion-framework-module';
+
+import { FrameworkEvent, FrameworkEventInit } from '@equinor/fusion-framework-module-event';
+import { App } from 'app/App';
+import AppModuleProvider from 'AppModuleProvider';
+
+import { AppModulesInstance } from './types';
+
+type AppModulesLoadedEventInit<TModules extends Array<AnyModule> | unknown = unknown> =
+    FrameworkEventInit<{
+        appKey: string;
+        modules: AppModulesInstance<TModules>;
+    }>;
+
+export class AppModulesLoadedEvent<
+    TModules extends Array<AnyModule> | unknown = unknown
+> extends FrameworkEvent<AppModulesLoadedEventInit<TModules>> {
+    constructor(
+        appKey: string,
+        modules: AppModulesInstance<TModules>,
+        init?: Omit<AppModulesLoadedEventInit<TModules>, 'detail'>
+    ) {
+        super('onAppModulesLoaded', { ...init, detail: { appKey, modules } });
+    }
+}
+
+declare module '@equinor/fusion-framework-module-event' {
+    interface FrameworkEventMap {
+        onAppModulesLoaded: AppModulesLoadedEvent;
+        onCurrentAppChanged: FrameworkEvent<
+            FrameworkEventInit<{ next?: App; previous?: App }, AppModuleProvider>
+        >;
+    }
+}