@equinor/fusion-framework-module-widget 2.0.10 → 3.0.0

package/src/WidgetModuleProvider.ts

@@ -6,68 +6,156 @@ import { EventModule } from '@equinor/fusion-framework-module-event';
 
 import { Query } from '@equinor/fusion-query';
 
-import type { GetWidgetParameters, WidgetManifest } from './types';
+import type { GetWidgetParameters, WidgetConfig, WidgetManifest } from './types';
 
 import { WidgetModuleConfig } from './WidgetModuleConfigurator';
-import { GetWidgetError } from './errors';
+import { WidgetManifestLoadError, WidgetConfigLoadError } from './errors';
+import { Widget } from './Widget';
 
 export interface IWidgetModuleProvider {
     getWidget(
         widgetKey: GetWidgetParameters['widgetKey'],
-        args: GetWidgetParameters['args'],
+        args?: GetWidgetParameters['args'],
+    ): Widget;
+    getWidgetManifest(
+        widgetKey: GetWidgetParameters['widgetKey'],
+        args?: GetWidgetParameters['args'],
     ): Observable<WidgetManifest>;
+    getWidgetConfig(
+        widgetKey: GetWidgetParameters['widgetKey'],
+        args?: GetWidgetParameters['args'],
+    ): Observable<WidgetConfig>;
 }
 
+/**
+ * The `WidgetModuleProvider` class implements the `IWidgetModuleProvider` interface and serves as a provider for managing widgets.
+ */
 export class WidgetModuleProvider implements IWidgetModuleProvider {
-    #widgetClient: Query<WidgetManifest, GetWidgetParameters>;
+    // Private fields
     #subscription = new Subscription();
+    #config: WidgetModuleConfig;
+    #event?: ModuleType<EventModule>;
 
+    /**
+     * Constructs a new `WidgetModuleProvider` instance.
+     * @param args - An object containing configuration and optional event module for the widget provider.
+     */
     constructor(args: { config: WidgetModuleConfig; event?: ModuleType<EventModule> }) {
-        const { config } = args;
-
-        this.#widgetClient = new Query(config.client.getWidget);
+        const { config, event } = args;
+        this.#event = event;
+        this.#config = config;
+    }
 
-        this.#subscription.add(() => this.#widgetClient.complete());
+    /**
+     * Retrieves a widget instance based on the provided name and optional parameters.
+     * @param name - The name of the widget.
+     * @param widgetParams - Optional parameters for the widget.
+     * @returns A new `Widget` instance.
+     */
+    public getWidget(name: string, widgetPrams?: GetWidgetParameters['args']): Widget {
+        return new Widget(
+            { name },
+            { provider: this, event: this.#event, widgetPrams, config: this.#config },
+        );
     }
 
-    public getWidget(name: string): Observable<WidgetManifest> {
-        return this._getWidget(name);
+    /**
+     * Retrieves the manifest of a widget as an observable stream.
+     * @param name - The name of the widget.
+     * @param widgetParams - Optional parameters for the widget.
+     * @returns An observable stream of the widget manifest.
+     */
+    public getWidgetManifest(
+        name: string,
+        widgetPrams?: GetWidgetParameters['args'],
+    ): Observable<WidgetManifest> {
+        return this._getWidget(name, widgetPrams);
     }
 
-    public getWidgetByVersion(name: string, version: string): Observable<WidgetManifest> {
-        return this._getWidget(name, { type: 'version', value: version });
+    /**
+     * Retrieves the config of a widget as an observable stream.
+     * @param name - The name of the widget.
+     * @param widgetParams - Optional parameters for the widget.
+     * @returns An observable stream of the widget config.
+     */
+    public getWidgetConfig(
+        name: string,
+        widgetPrams?: GetWidgetParameters['args'],
+    ): Observable<WidgetConfig> {
+        return this._getWidgetConfig(name, widgetPrams);
     }
 
-    public getWidgetByTag(name: string, tag: string): Observable<WidgetManifest> {
-        return this._getWidget(name, { type: 'tag', value: tag });
+    protected _getWidgetConfig(
+        widgetKey: GetWidgetParameters['widgetKey'],
+        args?: GetWidgetParameters['args'],
+    ): Observable<WidgetConfig> {
+        const client = new Query(this.#config.client.getWidgetConfig);
+        this.#subscription.add(() => client.complete());
+        return Query.extractQueryValue(
+            client.query({ widgetKey, args }).pipe(
+                catchError((err) => {
+                    // Extract the cause since the error will be a `QueryError`
+                    const { cause } = err;
+
+                    // Handle specific errors and throw a `GetWidgetManifestError` if applicable
+                    if (cause instanceof WidgetManifestLoadError) {
+                        throw cause;
+                    }
+                    if (cause instanceof HttpResponseError) {
+                        throw WidgetManifestLoadError.fromHttpResponse(cause.response, {
+                            cause,
+                        });
+                    }
+                    // Throw a generic `GetWidgetManifestError` for unknown errors
+                    throw new WidgetManifestLoadError('unknown', 'failed to load config', {
+                        cause,
+                    });
+                }),
+            ),
+        );
     }
 
     /**
-     * fetch configuration for a widget
-     * @param widgetKey - widget key
-     * @param version - version of widget to use
+     * Fetches the configuration for a widget using a query.
+     * @param widgetKey - The key identifying the widget.
+     * @param args - Optional arguments for the widget.
+     * @returns An observable stream of the widget manifest.
+     * @protected
      */
     protected _getWidget(
         widgetKey: GetWidgetParameters['widgetKey'],
         args?: GetWidgetParameters['args'],
     ): Observable<WidgetManifest> {
+        // Create a new query using the configured client
+        const client = new Query(this.#config.client.getWidgetManifest);
+        this.#subscription.add(() => client.complete());
+
+        // Execute the query and handle errors
         return Query.extractQueryValue(
-            this.#widgetClient.query({ widgetKey, args }).pipe(
+            client.query({ widgetKey, args }).pipe(
                 catchError((err) => {
-                    /** extract cause, since error will be a `QueryError` */
+                    // Extract the cause since the error will be a `QueryError`
                     const { cause } = err;
-                    if (cause instanceof GetWidgetError) {
+
+                    // Handle specific errors and throw a `GetWidgetConfigError` if applicable
+                    if (cause instanceof WidgetConfigLoadError) {
                         throw cause;
                     }
                     if (cause instanceof HttpResponseError) {
-                        throw GetWidgetError.fromHttpResponse(cause.response, { cause });
+                        throw WidgetConfigLoadError.fromHttpResponse(cause.response, { cause });
                     }
-                    throw new GetWidgetError('unknown', 'failed to load config', { cause });
+                    // Throw a generic `GetWidgetManifestError` for unknown errors
+                    throw new WidgetConfigLoadError('unknown', 'failed to load config', {
+                        cause,
+                    });
                 }),
             ),
         );
     }
 
+    /**
+     * Disposes of the widget provider by unsubscribing from any active subscriptions.
+     */
     public dispose() {
         this.#subscription.unsubscribe();
     }

package/src/enable-widget-module.ts

@@ -1,7 +1,7 @@
 import type { IModulesConfigurator } from '@equinor/fusion-framework-module';
-import type { WidgetModuleConfigBuilderCallback } from './WidgetModuleConfigBuilder';
 
 import { module } from './module';
+import { WidgetModuleConfigBuilderCallback } from './WidgetModuleConfigurator';
 
 /**
  * Method for enabling the widget module
@@ -15,7 +15,7 @@ export const enableWidgetModule = (
     configurator.addConfig({
         module,
         configure: (widgetConfigurator) => {
-            builder && widgetConfigurator.addConfigBuilder(builder);
+            builder && builder(widgetConfigurator);
         },
     });
 };

package/src/errors.ts

@@ -1,18 +1,22 @@
 type WidgetErrorType = 'not_found' | 'unauthorized' | 'unknown';
 
-export class GetWidgetError extends Error {
+export class WidgetManifestLoadError extends Error {
     static fromHttpResponse(response: Response, options?: ErrorOptions) {
         switch (response.status) {
             case 401:
-                return new GetWidgetError(
+                return new WidgetManifestLoadError(
                     'unauthorized',
                     'failed to load widget manifest, request not authorized',
                     options,
                 );
             case 404:
-                return new GetWidgetError('not_found', 'widget manifest not found', options);
+                return new WidgetManifestLoadError(
+                    'not_found',
+                    'widget manifest not found',
+                    options,
+                );
         }
-        return new GetWidgetError(
+        return new WidgetManifestLoadError(
             'unknown',
             `failed to load widget manifest, status code ${response.status}`,
             options,
@@ -24,6 +28,35 @@ export class GetWidgetError extends Error {
         options?: ErrorOptions,
     ) {
         super(message, options);
+        this.name = 'GetWidgetLoadManifestErrors';
+    }
+}
+
+export class WidgetConfigLoadError extends Error {
+    static fromHttpResponse(response: Response, options?: ErrorOptions) {
+        switch (response.status) {
+            case 401:
+                return new WidgetConfigLoadError(
+                    'unauthorized',
+                    'failed to load widget config, request not authorized',
+                    options,
+                );
+            case 404:
+                return new WidgetConfigLoadError('not_found', 'widget config not found', options);
+        }
+        return new WidgetConfigLoadError(
+            'unknown',
+            `failed to load widget config, status code ${response.status}`,
+            options,
+        );
+    }
+    constructor(
+        public readonly type: WidgetErrorType,
+        message?: string,
+        options?: ErrorOptions,
+    ) {
+        super(message, options);
+        this.name = 'GetWidgetLoadConfigError';
     }
 }
 
@@ -34,5 +67,6 @@ export class WidgetScriptModuleError extends Error {
         options?: ErrorOptions,
     ) {
         super(message, options);
+        this.name = 'WidgetScriptModuleError';
     }
 }

package/src/events.ts

@@ -0,0 +1,75 @@
+import type { FrameworkEvent, FrameworkEventInit } from '@equinor/fusion-framework-module-event';
+
+import type { Widget } from './Widget';
+
+import type {
+    WidgetConfig,
+    WidgetManifest,
+    WidgetModulesInstance,
+    WidgetScriptModule,
+} from './types';
+
+/** base event type for applications */
+export type WidgetEventInit<TDetail extends Record<string, unknown> | unknown = unknown> =
+    FrameworkEventInit<
+        /** additional event details and key of target event */
+        TDetail & { name: string },
+        /** source of the event */
+        Widget
+    >;
+
+export type WidgetEvent<TDetail extends Record<string, unknown> | unknown = unknown> =
+    FrameworkEvent<WidgetEventInit<TDetail>>;
+
+export type WidgetEventFailure = FrameworkEvent<
+    WidgetEventInit<{
+        error: WidgetConfig;
+    }>
+>;
+
+declare module '@equinor/fusion-framework-module-event' {
+    interface FrameworkEventMap {
+        /** fired when the application has initiated its modules */
+        onWidgetModulesLoaded: WidgetEvent<{
+            /** initiated modules for application */
+            modules: WidgetModulesInstance;
+        }>;
+
+        onWidgetManifestLoad: WidgetEvent;
+        /** fired when the application has loaded corresponding manifest */
+        onWidgetManifestLoaded: WidgetEvent<{
+            manifest: WidgetManifest;
+        }>;
+        onWidgetManifestFailure: WidgetEventFailure;
+
+        onWidgetConfigLoad: WidgetEvent;
+        /** fired when the application has loaded corresponding config */
+        onWidgetConfigLoaded: WidgetEvent<{
+            config: WidgetConfig;
+        }>;
+        onWidgetConfigFailure: WidgetEventFailure;
+
+        /** fired when the application has loaded corresponding javascript module */
+        onAWidgetScriptLoad: WidgetEvent;
+        onWidgetScriptLoaded: WidgetEvent<{
+            script: WidgetScriptModule;
+        }>;
+        onWidgetScriptFailure: WidgetEventFailure;
+
+        /** fired before application loads manifest, config and script */
+        onWidgetInitialize: WidgetEvent;
+
+        /**
+         * fired after application has loaded manifest, config and script
+         *
+         * __note:__ not fired until all loaders has settled (last emit)
+         */
+        onWidgetInitialized: WidgetEvent;
+
+        /** fired when application fails to load either manifest, config and script */
+        onWidgetInitializeFailure: WidgetEventFailure;
+
+        /** fired when the application is disposed (unmounts) */
+        onWidgetDispose: FrameworkEvent<WidgetEventInit>;
+    }
+}

package/src/index.ts

@@ -1,8 +1,4 @@
-export {
-    WidgetModuleConfigurator,
-    IWidgetModuleConfigurator,
-    WidgetModuleConfig,
-} from './WidgetModuleConfigurator';
+export { WidgetModuleConfigurator, WidgetModuleConfig } from './WidgetModuleConfigurator';
 
 export { WidgetModuleProvider } from './WidgetModuleProvider';
 

package/src/module.ts

@@ -1,7 +1,7 @@
 import { Module } from '@equinor/fusion-framework-module';
 import { ModuleDeps } from './types';
 
-import { IWidgetModuleConfigurator, WidgetModuleConfigurator } from './WidgetModuleConfigurator';
+import { WidgetModuleConfigurator } from './WidgetModuleConfigurator';
 import { IWidgetModuleProvider, WidgetModuleProvider } from './WidgetModuleProvider';
 
 export const moduleKey = 'widget';
@@ -9,15 +9,18 @@ export const moduleKey = 'widget';
 export type WidgetModule = Module<
     typeof moduleKey,
     IWidgetModuleProvider,
-    IWidgetModuleConfigurator,
+    WidgetModuleConfigurator,
     ModuleDeps
 >;
 
 export const module: WidgetModule = {
     name: moduleKey,
-    configure: () => new WidgetModuleConfigurator('1.0-preview'),
+    configure() {
+        const config = new WidgetModuleConfigurator();
+        return config;
+    },
     initialize: async (args) => {
-        const config = await (args.config as WidgetModuleConfigurator).createConfig(args);
+        const config = await args.config.createConfigAsync(args);
         const event = await args.requireInstance('event').catch(() => undefined);
         return new WidgetModuleProvider({ config, event });
     },
@@ -30,6 +33,6 @@ export default module;
 
 declare module '@equinor/fusion-framework-module' {
     interface Modules {
-        widget: WidgetModule;
+        [moduleKey]: WidgetModule;
     }
 }

package/src/state/actions.ts

@@ -0,0 +1,70 @@
+import {
+    ActionInstanceMap,
+    ActionTypes,
+    createAction,
+    createAsyncAction,
+} from '@equinor/fusion-observable';
+import {
+    GetWidgetParameters,
+    WidgetConfig,
+    WidgetManifest,
+    WidgetModulesInstance,
+    WidgetScriptModule,
+} from '../types';
+
+const createActions = () => ({
+    /** Manifest loading */
+    setManifest: createAction('set_manifest', (manifest: WidgetManifest, update?: boolean) => ({
+        payload: manifest,
+        meta: {
+            created: Date.now(),
+            update,
+        },
+    })),
+    fetchManifest: createAsyncAction(
+        'fetch_manifest',
+        (payload: { key: string; args?: GetWidgetParameters['args'] }, update?: boolean) => ({
+            payload,
+            meta: { update },
+        }),
+        (manifest: WidgetManifest) => ({ payload: manifest }),
+        (error: unknown) => ({ payload: error }),
+    ),
+    /** Config loading */
+    setConfig: createAction('set_config', (config: WidgetConfig) => ({ payload: config })),
+    fetchConfig: createAsyncAction(
+        'fetch_config',
+        (payload: { key: string; args?: GetWidgetParameters['args'] }, update?: boolean) => ({
+            payload,
+            meta: { update },
+        }),
+        (config: WidgetConfig) => ({ payload: config }),
+        (error: unknown) => ({ payload: error }),
+    ),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    setModule: createAction('set_module', (module: any) => ({ payload: module })),
+    importWidget: createAsyncAction(
+        'import_widget',
+        (entrypoint: string) => ({ payload: entrypoint }),
+        (module: WidgetScriptModule) => ({ payload: module }),
+        (error: unknown) => ({ payload: error }),
+    ),
+    // widget Instance
+    setInstance: createAction('set_instance', (instance: WidgetModulesInstance) => ({
+        payload: instance,
+    })),
+    initialize: createAsyncAction(
+        'initialize_widget',
+        () => ({ 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/state/create-reducer.ts

@@ -0,0 +1,44 @@
+import {
+    actionBaseType,
+    createReducer as makeReducer,
+    isCompleteAction,
+    isRequestAction,
+} from '@equinor/fusion-observable';
+
+import { enableMapSet } from 'immer';
+
+enableMapSet();
+
+import { actions } from './actions';
+import { WidgetStateInitial, WidgetState } from '../types';
+
+export const createReducer = (value: WidgetStateInitial) =>
+    makeReducer({ ...value, status: new Set() } as WidgetState, (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;

package/src/state/create-state.ts

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

package/src/state/flows.ts

@@ -0,0 +1,75 @@
+import { from, of, concat } from 'rxjs';
+import { catchError, filter, last, map, share, switchMap } from 'rxjs/operators';
+
+import { actions } from './actions';
+
+import type { Flow } from '@equinor/fusion-observable';
+
+import type { Actions } from './actions';
+import { WidgetState } from '../types';
+import type WidgetModuleProvider from '../WidgetModuleProvider';
+
+export const handleFetchManifest =
+    (provider: WidgetModuleProvider): Flow<Actions, WidgetState> =>
+    (action$) =>
+        action$.pipe(
+            filter(actions.fetchManifest.match),
+            switchMap((action) => {
+                const {
+                    payload: { key, args },
+                    meta: { update },
+                } = action;
+
+                const subject = from(provider.getWidgetManifest(key, args)).pipe(
+                    filter((x) => !!x),
+                    share(),
+                );
+                return concat(
+                    subject.pipe(map((manifest) => actions.setManifest(manifest, update))),
+                    subject.pipe(
+                        last(),
+                        map((manifest) => actions.fetchManifest.success(manifest)),
+                    ),
+                ).pipe(
+                    catchError((err) => {
+                        console.log(err, action.payload);
+                        return of(actions.fetchManifest.failure(err));
+                    }),
+                );
+            }),
+        );
+
+export const handleFetchConfig =
+    (provider: WidgetModuleProvider): Flow<Actions, WidgetState> =>
+    (action$) =>
+        action$.pipe(
+            filter(actions.fetchConfig.match),
+            switchMap(({ payload: { key, args } }) => {
+                const subject = from(provider.getWidgetConfig(key, args)).pipe(
+                    filter((x) => !!x),
+                    share(),
+                );
+                return concat(
+                    subject.pipe(map((manifest) => actions.setConfig(manifest))),
+                    subject.pipe(
+                        last(),
+                        map((manifest) => actions.fetchConfig.success(manifest)),
+                    ),
+                ).pipe(
+                    catchError((err) => {
+                        return of(actions.fetchConfig.failure(err));
+                    }),
+                );
+            }),
+        );
+
+export const handleImportWidget = (): Flow<Actions, WidgetState> => (action$) =>
+    action$.pipe(
+        filter(actions.importWidget.match),
+        switchMap(({ payload }) => {
+            return from(import(/* @vite-ignore */ payload)).pipe(
+                map(actions.importWidget.success),
+                catchError((err) => of(actions.importWidget.failure(err))),
+            );
+        }),
+    );