@equinor/fusion-framework-module-widget 0.0.2

package/src/WidgetModuleConfigurator.ts

@@ -0,0 +1,128 @@
+import { ModuleInitializerArgs } from '@equinor/fusion-framework-module';
+import { HttpModule, IHttpClient } from '@equinor/fusion-framework-module-http';
+import { ServiceDiscoveryModule } from '@equinor/fusion-framework-module-service-discovery';
+import { QueryCtorOptions } from '@equinor/fusion-query';
+
+import {
+    WidgetModuleConfigBuilder,
+    WidgetModuleConfigBuilderCallback,
+    WidgetEndpointBuilder,
+} from './WidgetModuleConfigBuilder';
+
+import { moduleKey } from './module';
+
+import type { GetWidgetParameters, WidgetManifest } from './types';
+
+export interface WidgetModuleConfig {
+    client: {
+        // getWidgetManifest: QueryCtorOptions<WidgetManifest, { widgetKey: string }>;
+        getWidget: QueryCtorOptions<WidgetManifest, GetWidgetParameters>;
+    };
+    endpointBuilder: WidgetEndpointBuilder;
+}
+
+export interface IWidgetModuleConfigurator {
+    addConfigBuilder: (init: WidgetModuleConfigBuilderCallback) => void;
+}
+
+const defaultEndpointBuilder: WidgetEndpointBuilder = (params) => {
+    const { widgetKey, args } = params;
+    const { type, value } = args ?? {};
+    switch (type) {
+        case 'tag':
+        case 'version':
+            return `/widgets/${widgetKey}/versions/${value}`;
+        default:
+            return `/widgets/${widgetKey}`;
+    }
+};
+
+const widgetSelector =
+    (args: { apiVersion: string; uri: string }) =>
+    async (response: Response): Promise<WidgetManifest> => {
+        const data = await response.json();
+
+        return {
+            ...data,
+            importBundle: async () =>
+                import(
+                    new URL(
+                        `${data.assetPath}/${data.entryPoint}?api-version=${args.apiVersion}`,
+                        args.uri
+                    ).toString()
+                ),
+        } as WidgetManifest;
+    };
+
+export class WidgetModuleConfigurator implements IWidgetModuleConfigurator {
+    defaultExpireTime = 1 * 60 * 1000;
+
+    #configBuilders: Array<WidgetModuleConfigBuilderCallback> = [];
+    #apiVersion = '1.0';
+
+    addConfigBuilder(init: WidgetModuleConfigBuilderCallback): void {
+        this.#configBuilders.push(init);
+    }
+
+    constructor(apiVersion?: string) {
+        if (apiVersion) {
+            this.#apiVersion = apiVersion;
+        }
+    }
+
+    /**
+     * WARNING: this function will be remove in future
+     */
+    protected async _createHttpClient(
+        init: ModuleInitializerArgs<IWidgetModuleConfigurator, [HttpModule, ServiceDiscoveryModule]>
+    ): Promise<IHttpClient> {
+        const http = await init.requireInstance('http');
+        /** check if the http provider has configure a client */
+        if (http.hasClient(moduleKey)) {
+            return http.createClient(moduleKey);
+        } else {
+            /** load service discovery module */
+            const serviceDiscovery = await init.requireInstance('serviceDiscovery');
+
+            const discoClient = await serviceDiscovery.createClient('apps');
+
+            return discoClient;
+        }
+    }
+
+    public async createConfig(
+        init: ModuleInitializerArgs<IWidgetModuleConfigurator, [HttpModule, ServiceDiscoveryModule]>
+    ): Promise<WidgetModuleConfig> {
+        const config = await this.#configBuilders.reduce(async (cur, cb) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const builder = new WidgetModuleConfigBuilder(init, await cur);
+            await Promise.resolve(cb(builder));
+            return Object.assign(cur, builder.config);
+        }, Promise.resolve({} as Partial<WidgetModuleConfig>));
+
+        const { endpointBuilder = defaultEndpointBuilder } = config;
+
+        // TODO - make less lazy
+        config.client ??= await (async (): Promise<WidgetModuleConfig['client']> => {
+            const httpClient = await this._createHttpClient(init);
+            httpClient.requestHandler.setHeader('api-version', this.#apiVersion);
+            return {
+                getWidget: {
+                    client: {
+                        fn: (args) =>
+                            httpClient.json$(endpointBuilder(args), {
+                                selector: widgetSelector({
+                                    apiVersion: this.#apiVersion,
+                                    uri: httpClient.uri,
+                                }),
+                            }),
+                    },
+                    key: (args) => JSON.stringify(args),
+                    expire: this.defaultExpireTime,
+                },
+            };
+        })();
+
+        return config as WidgetModuleConfig;
+    }
+}

package/src/WidgetModuleProvider.ts

@@ -0,0 +1,76 @@
+import { catchError, Observable, Subscription } 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 { GetWidgetParameters, WidgetManifest } from './types';
+
+import { WidgetModuleConfig } from './WidgetModuleConfigurator';
+import { GetWidgetError } from './errors';
+
+export interface IWidgetModuleProvider {
+    getWidget(
+        widgetKey: GetWidgetParameters['widgetKey'],
+        args: GetWidgetParameters['args']
+    ): Observable<WidgetManifest>;
+}
+
+export class WidgetModuleProvider implements IWidgetModuleProvider {
+    #widgetClient: Query<WidgetManifest, GetWidgetParameters>;
+    #subscription = new Subscription();
+
+    constructor(args: { config: WidgetModuleConfig; event?: ModuleType<EventModule> }) {
+        const { config } = args;
+
+        this.#widgetClient = new Query(config.client.getWidget);
+
+        this.#subscription.add(() => this.#widgetClient.complete());
+    }
+
+    public getWidget(name: string): Observable<WidgetManifest> {
+        return this._getWidget(name);
+    }
+
+    public getWidgetByVersion(name: string, version: string): Observable<WidgetManifest> {
+        return this._getWidget(name, { type: 'version', value: version });
+    }
+
+    public getWidgetByTag(name: string, tag: string): Observable<WidgetManifest> {
+        return this._getWidget(name, { type: 'tag', value: tag });
+    }
+
+    /**
+     * fetch configuration for a widget
+     * @param widgetKey - widget key
+     * @param version - version of widget to use
+     */
+    protected _getWidget(
+        widgetKey: GetWidgetParameters['widgetKey'],
+        args?: GetWidgetParameters['args']
+    ): Observable<WidgetManifest> {
+        return Query.extractQueryValue(
+            this.#widgetClient.query({ widgetKey, args }).pipe(
+                catchError((err) => {
+                    /** extract cause, since error will be a `QueryError` */
+                    const { cause } = err;
+                    if (cause instanceof GetWidgetError) {
+                        throw cause;
+                    }
+                    if (cause instanceof HttpResponseError) {
+                        throw GetWidgetError.fromHttpResponse(cause.response, { cause });
+                    }
+                    throw new GetWidgetError('unknown', 'failed to load config', { cause });
+                })
+            )
+        );
+    }
+
+    public dispose() {
+        this.#subscription.unsubscribe();
+    }
+}
+
+export default WidgetModuleProvider;

package/src/enable-widget-module.ts

@@ -0,0 +1,21 @@
+import type { IModulesConfigurator } from '@equinor/fusion-framework-module';
+import type { WidgetModuleConfigBuilderCallback } from './WidgetModuleConfigBuilder';
+
+import { module } from './module';
+
+/**
+ * Method for enabling the widget module
+ * @param configurator - configuration object
+ */
+export const enableWidgetModule = (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    configurator: IModulesConfigurator<any, any>,
+    builder?: WidgetModuleConfigBuilderCallback
+): void => {
+    configurator.addConfig({
+        module,
+        configure: (widgetConfigurator) => {
+            builder && widgetConfigurator.addConfigBuilder(builder);
+        },
+    });
+};

package/src/errors.ts

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

package/src/index.ts

@@ -0,0 +1,15 @@
+export {
+    WidgetModuleConfigurator,
+    IWidgetModuleConfigurator,
+    WidgetModuleConfig,
+} from './WidgetModuleConfigurator';
+
+export { WidgetModuleProvider } from './WidgetModuleProvider';
+
+export type { IWidgetModuleProvider } from './WidgetModuleProvider';
+
+export * from './types';
+
+export { enableWidgetModule } from './enable-widget-module';
+
+export { default, WidgetModule, module, moduleKey } from './module';

package/src/module.ts

@@ -0,0 +1,35 @@
+import { Module } from '@equinor/fusion-framework-module';
+import { ModuleDeps } from './types';
+
+import { IWidgetModuleConfigurator, WidgetModuleConfigurator } from './WidgetModuleConfigurator';
+import { IWidgetModuleProvider, WidgetModuleProvider } from './WidgetModuleProvider';
+
+export const moduleKey = 'widget';
+
+export type WidgetModule = Module<
+    typeof moduleKey,
+    IWidgetModuleProvider,
+    IWidgetModuleConfigurator,
+    ModuleDeps
+>;
+
+export const module: WidgetModule = {
+    name: moduleKey,
+    configure: () => new WidgetModuleConfigurator('1.0-preview'),
+    initialize: async (args) => {
+        const config = await (args.config as WidgetModuleConfigurator).createConfig(args);
+        const event = await args.requireInstance('event').catch(() => undefined);
+        return new WidgetModuleProvider({ config, event });
+    },
+    dispose: (args) => {
+        (args.instance as unknown as WidgetModuleProvider).dispose();
+    },
+};
+
+export default module;
+
+declare module '@equinor/fusion-framework-module' {
+    interface Modules {
+        widget: WidgetModule;
+    }
+}

package/src/types.ts

@@ -0,0 +1,51 @@
+import type { AnyModule, CombinedModules, ModulesInstance } from '@equinor/fusion-framework-module';
+import type { EventModule } from '@equinor/fusion-framework-module-event';
+import type { HttpModule } from '@equinor/fusion-framework-module-http';
+import type { ServiceDiscoveryModule } from '@equinor/fusion-framework-module-service-discovery';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Fusion = any;
+
+export type WidgetEnv = {
+    config?: WidgetManifest;
+};
+
+// TODO: change to module-services when new app service is created
+export type ModuleDeps = [HttpModule, ServiceDiscoveryModule, EventModule];
+
+export type GetWidgetParameters = {
+    widgetKey: string;
+    args?: { type: 'version' | 'tag'; value: string };
+};
+
+export type WidgetManifest = {
+    id: string;
+    name: string;
+    version: string;
+    description: string;
+    maintainers?: string[];
+    entryPoint: string;
+    assetPath: string;
+    // TODO move to @equinor/fusion-widget
+    importBundle: () => Promise<WidgetScriptModule>;
+};
+
+export type WidgetModules<TModules extends Array<AnyModule> | unknown = unknown> = CombinedModules<
+    TModules,
+    [EventModule, ServiceDiscoveryModule]
+>;
+
+export type WidgetRenderArgs<TFusion extends Fusion = Fusion, TEnv = WidgetEnv> = {
+    fusion: TFusion;
+    env: TEnv;
+};
+
+export type WidgetScriptModule<
+    TProps extends Record<PropertyKey, unknown> = Record<PropertyKey, unknown>
+> = {
+    default: (el: HTMLElement, args: WidgetRenderArgs, props?: TProps) => VoidFunction;
+    renderWidget: (el: HTMLElement, args: WidgetRenderArgs, props?: TProps) => VoidFunction;
+};
+
+export type WidgetModulesInstance<TModules extends Array<AnyModule> | unknown = unknown> =
+    ModulesInstance<WidgetModules<TModules>>;

package/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist/esm",
+    "rootDir": "src",
+    "declarationDir": "./dist/types",
+    "baseUrl": "src",
+  },
+  "references": [
+    {
+      "path": "../../utils/query"
+    },
+    {
+      "path": "../module"
+    },
+    {
+      "path": "../http"
+    },
+    {
+      "path": "../event"
+    },
+    {
+      "path": "../service-discovery"
+    }
+  ],
+  "include": [
+    "src/**/*",
+  ],
+  "exclude": [
+    "node_modules",
+    "lib"
+  ]
+}