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

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/configurator.ts

@@ -4,18 +4,18 @@ import { QueryCtorOptions } from '@equinor/fusion-query';
 import { moduleKey } from './module';
 import type { AppConfig, AppManifest, ModuleDeps } from './types';
 
-export interface IAppModuleConfig {
-    getApp: QueryCtorOptions<AppManifest, { appKey: string }>;
+export interface AppModuleConfig {
+    getAppManifest: QueryCtorOptions<AppManifest, { appKey: string }>;
     // TODO: add filter
-    getApps: QueryCtorOptions<AppManifest[], void>;
-    getConfig: QueryCtorOptions<AppConfig, { appKey: string; tag?: string }>;
+    getAppManifests: QueryCtorOptions<AppManifest[], void>;
+    getAppConfig: QueryCtorOptions<AppConfig, { appKey: string; tag?: string }>;
 }
 
 export interface IAppConfigurator<TDeps extends Array<AnyModule>> {
     createConfig: (
         args: ModuleInitializerArgs<IAppConfigurator<TDeps>, TDeps>
-    ) => Promise<IAppModuleConfig>;
-    processConfig: (config: IAppModuleConfig) => IAppModuleConfig;
+    ) => Promise<AppModuleConfig>;
+    processConfig: (config: AppModuleConfig) => AppModuleConfig;
 }
 
 export class AppConfigurator<TDeps extends ModuleDeps = ModuleDeps>
@@ -49,22 +49,22 @@ export class AppConfigurator<TDeps extends ModuleDeps = ModuleDeps>
 
     public async createConfig(
         args: ModuleInitializerArgs<IAppConfigurator<TDeps>, TDeps>
-    ): Promise<IAppModuleConfig> {
+    ): Promise<AppModuleConfig> {
         const httpClient = await this._createHttpClient(args);
-        const config: IAppModuleConfig = {
-            getApp: {
+        const config: AppModuleConfig = {
+            getAppManifest: {
                 client: {
-                    fn: ({ appKey }) => httpClient.json$(`/api/apps/${appKey}`),
+                    fn: ({ appKey }) => httpClient.json$<AppManifest>(`/api/apps/${appKey}`),
                 },
                 key: ({ appKey }) => appKey,
             },
-            getApps: {
+            getAppManifests: {
                 client: {
                     fn: () => httpClient.json$(`/api/apps`),
                 },
                 key: () => 'apps',
             },
-            getConfig: {
+            getAppConfig: {
                 client: {
                     fn: ({ appKey, tag }) =>
                         httpClient.json$(`/api/apps/${appKey}/config${tag ? `?tag=${tag}` : ''}`),
@@ -75,7 +75,7 @@ export class AppConfigurator<TDeps extends ModuleDeps = ModuleDeps>
         return this.processConfig(config);
     }
 
-    public processConfig(config: IAppModuleConfig): IAppModuleConfig {
+    public processConfig(config: AppModuleConfig): AppModuleConfig {
         return config;
     }
 }

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>
+        >;
+    }
+}

package/src/index.ts

@@ -1,6 +1,13 @@
-export { AppConfigurator, IAppConfigurator, IAppModuleConfig } from './configurator';
-export { AppProvider, IAppProvider } from './provider';
+export {
+    AppConfigurator,
+    IAppConfigurator,
+    AppModuleConfig as IAppModuleConfig,
+} from './configurator';
+export { AppModuleProvider } from './AppModuleProvider';
 
+export { App } from './app/App';
+
+export * from './events';
 export * from './types';
 
 export { default, AppModule, module, moduleKey } from './module';

package/src/module.ts

@@ -1,14 +1,14 @@
-import { Module } from '@equinor/fusion-framework-module';
+import { IModulesConfigurator, Module } from '@equinor/fusion-framework-module';
 import { ModuleDeps } from './types';
 
 import { IAppConfigurator, AppConfigurator } from './configurator';
-import { AppProvider, IAppProvider } from './provider';
+import { AppModuleProvider } from './AppModuleProvider';
 
 export const moduleKey = 'app';
 
 export type AppModule = Module<
     typeof moduleKey,
-    IAppProvider,
+    AppModuleProvider,
     IAppConfigurator<ModuleDeps>,
     ModuleDeps
 >;
@@ -19,13 +19,17 @@ export const module: AppModule = {
     initialize: async (args) => {
         const config = await args.config.createConfig(args);
         const event = await args.requireInstance('event').catch(() => undefined);
-        return new AppProvider({ config, event });
+        return new AppModuleProvider({ config, event });
     },
     dispose: (args) => {
-        (args.instance as unknown as AppProvider).dispose();
+        (args.instance as unknown as AppModuleProvider).dispose();
     },
 };
 
+export const enableAppModule = (configurator: IModulesConfigurator) => {
+    configurator.addConfig({ module });
+};
+
 export default module;
 
 declare module '@equinor/fusion-framework-module' {