@equinor/fusion-framework-react-app 6.0.0 → 6.0.2

package/src/feature-flag/useFeature.ts

@@ -4,9 +4,9 @@ import { EMPTY, combineLatest, map } from 'rxjs';
 
 import { useFrameworkModule } from '@equinor/fusion-framework-react';
 import { useObservableState } from '@equinor/fusion-observable/react';
-import {
-    type FeatureFlagModule,
-    type IFeatureFlag,
+import type {
+  FeatureFlagModule,
+  IFeatureFlag,
 } from '@equinor/fusion-framework-module-feature-flag';
 import { findFeature } from '@equinor/fusion-framework-module-feature-flag/selectors';
 
@@ -19,48 +19,48 @@ import { useAppModule } from '../useAppModule';
  * @returns An object containing the feature flag, toggle function, and error (if any).
  */
 export const useFeature = <T = unknown>(
-    key: string,
+  key: string,
 ): {
-    feature?: IFeatureFlag<T>;
-    toggleFeature: (enabled?: boolean) => void;
-    error?: unknown;
+  feature?: IFeatureFlag<T>;
+  toggleFeature: (enabled?: boolean) => void;
+  error?: unknown;
 } => {
-    const appProvider = useAppModule<FeatureFlagModule>('featureFlag');
-    const frameworkProvider = useFrameworkModule<FeatureFlagModule>('featureFlag');
+  const appProvider = useAppModule<FeatureFlagModule>('featureFlag');
+  const frameworkProvider = useFrameworkModule<FeatureFlagModule>('featureFlag');
 
-    /** get all available feature flags */
-    const features$ = useMemo(() => {
-        /** the framework does not have the feature flag module */
-        if (!frameworkProvider) {
-            return appProvider.features$;
-        }
-        /** merge feature flags from framework and application */
-        return combineLatest({
-            framework: frameworkProvider.features$,
-            app: appProvider.features$,
-        }).pipe(
-            map(({ framework, app }) => {
-                return { ...framework, ...app };
-            }),
-        );
-    }, [appProvider, frameworkProvider]);
+  /** get all available feature flags */
+  const features$ = useMemo(() => {
+    /** the framework does not have the feature flag module */
+    if (!frameworkProvider) {
+      return appProvider.features$;
+    }
+    /** merge feature flags from framework and application */
+    return combineLatest({
+      framework: frameworkProvider.features$,
+      app: appProvider.features$,
+    }).pipe(
+      map(({ framework, app }) => {
+        return { ...framework, ...app };
+      }),
+    );
+  }, [appProvider, frameworkProvider]);
 
-    /** find feature flag by the provided key */
-    const feature$ = useMemo(() => features$.pipe(findFeature<T>(key)), [features$, key]);
+  /** find feature flag by the provided key */
+  const feature$ = useMemo(() => features$.pipe(findFeature<T>(key)), [features$, key]);
 
-    const { value: feature, error } = useObservableState(feature$ ?? EMPTY);
+  const { value: feature, error } = useObservableState(feature$ ?? EMPTY);
 
-    const toggleFeature = useCallback(
-        (enable?: boolean) => {
-            /** if no value provided, invert the current value */
-            const enabled = enable === undefined ? !appProvider.getFeature(key)?.enabled : enable;
-            appProvider.toggleFeature({
-                key,
-                enabled,
-            });
-        },
-        [appProvider, key],
-    );
+  const toggleFeature = useCallback(
+    (enable?: boolean) => {
+      /** if no value provided, invert the current value */
+      const enabled = enable === undefined ? !appProvider.getFeature(key)?.enabled : enable;
+      appProvider.toggleFeature({
+        key,
+        enabled,
+      });
+    },
+    [appProvider, key],
+  );
 
-    return { feature, toggleFeature, error };
+  return { feature, toggleFeature, error };
 };

package/src/framework/index.ts

@@ -2,6 +2,6 @@ export { useFramework } from '@equinor/fusion-framework-react';
 
 // TODO
 export {
-    useCurrentUser,
-    useHttpClient as useFrameworkHttpClient,
+  useCurrentUser,
+  useHttpClient as useFrameworkHttpClient,
 } from '@equinor/fusion-framework-react/hooks';

package/src/index.ts

@@ -1,11 +1,11 @@
 export type {
-    AppConfig,
-    AppEnv,
-    AppModuleInitiator,
-    AppModules,
-    AppModulesInstance,
-    AppRenderFn,
-    IAppConfigurator,
+  AppConfig,
+  AppEnv,
+  AppModuleInitiator,
+  AppModules,
+  AppModulesInstance,
+  AppRenderFn,
+  IAppConfigurator,
 } from '@equinor/fusion-framework-app';
 
 export { AppManifest } from '@equinor/fusion-framework-module-app';

package/src/make-component.tsx

@@ -1,9 +1,10 @@
-import React, { lazy } from 'react';
+import type React from 'react';
+import { lazy } from 'react';
 
 import { FrameworkProvider } from '@equinor/fusion-framework-react';
 import type { Fusion } from '@equinor/fusion-framework-react';
 
-import { AppEnv, configureModules } from '@equinor/fusion-framework-app';
+import { type AppEnv, configureModules } from '@equinor/fusion-framework-app';
 import type { AppModuleInitiator, AppModulesInstance } from '@equinor/fusion-framework-app';
 
 import type { AnyModule } from '@equinor/fusion-framework-module';
@@ -13,13 +14,13 @@ import type { FrameworkEvent, FrameworkEventInit } from '@equinor/fusion-framewo
 import { ModuleProvider as AppModuleProvider } from '@equinor/fusion-framework-react-module';
 
 export type ComponentRenderArgs<TFusion extends Fusion = Fusion, TEnv = AppEnv> = {
-    fusion: TFusion;
-    env: TEnv;
+  fusion: TFusion;
+  env: TEnv;
 };
 
 export type ComponentRenderer<TFusion extends Fusion = Fusion, TEnv = AppEnv> = (
-    fusion: TFusion,
-    env: TEnv,
+  fusion: TFusion,
+  env: TEnv,
 ) => React.LazyExoticComponent<React.ComponentType>;
 
 /**
@@ -44,40 +45,40 @@ export type ComponentRenderer<TFusion extends Fusion = Fusion, TEnv = AppEnv> =
  * initializes the specified modules and provides the necessary Fusion and module context.
  */
 export const makeComponent = <
-    TModules extends Array<AnyModule>,
-    TRef extends Fusion = Fusion,
-    TEnv extends AppEnv = AppEnv,
+  TModules extends Array<AnyModule>,
+  TRef extends Fusion = Fusion,
+  TEnv extends AppEnv = AppEnv,
 >(
-    Component: React.ReactNode,
-    args: { fusion: TRef; env: TEnv },
-    configure?: AppModuleInitiator<TModules, TRef, TEnv>,
+  Component: React.ReactNode,
+  args: { fusion: TRef; env: TEnv },
+  configure?: AppModuleInitiator<TModules, TRef, TEnv>,
 ): React.LazyExoticComponent<React.ComponentType> =>
-    lazy(async () => {
-        const init = configureModules<TModules, TRef, TEnv>(configure);
-        const modules = (await init(args)) as unknown as AppModulesInstance;
+  lazy(async () => {
+    const init = configureModules<TModules, TRef, TEnv>(configure);
+    const modules = (await init(args)) as unknown as AppModulesInstance;
 
-        const { fusion } = args;
+    const { fusion } = args;
 
-        modules.event.dispatchEvent('onReactAppLoaded', {
-            detail: { modules, fusion },
-            source: Component,
-        });
-
-        return {
-            default: () => (
-                <FrameworkProvider value={fusion}>
-                    <AppModuleProvider value={modules}>{Component}</AppModuleProvider>
-                </FrameworkProvider>
-            ),
-        };
+    modules.event.dispatchEvent('onReactAppLoaded', {
+      detail: { modules, fusion },
+      source: Component,
     });
 
+    return {
+      default: () => (
+        <FrameworkProvider value={fusion}>
+          <AppModuleProvider value={modules}>{Component}</AppModuleProvider>
+        </FrameworkProvider>
+      ),
+    };
+  });
+
 declare module '@equinor/fusion-framework-module-event' {
-    interface FrameworkEventMap {
-        onReactAppLoaded: FrameworkEvent<
-            FrameworkEventInit<{ modules: AppModulesInstance; fusion: Fusion }, React.ComponentType>
-        >;
-    }
+  interface FrameworkEventMap {
+    onReactAppLoaded: FrameworkEvent<
+      FrameworkEventInit<{ modules: AppModulesInstance; fusion: Fusion }, React.ComponentType>
+    >;
+  }
 }
 
 export default makeComponent;

package/src/msal/useAccessToken.ts

@@ -7,8 +7,8 @@ import { useToken } from './useToken';
  * @returns An object containing the access token, pending state, and error.
  */
 export const useAccessToken = (req: {
-    scopes: string[];
+  scopes: string[];
 }): { token?: string; pending: boolean; error: unknown } => {
-    const { token, error, pending } = useToken(req);
-    return { token: token?.accessToken, pending, error };
+  const { token, error, pending } = useToken(req);
+  return { token: token?.accessToken, pending, error };
 };

package/src/msal/useCurrentAccount.ts

@@ -1,4 +1,4 @@
-import { AccountInfo } from '@equinor/fusion-framework-module-msal';
+import type { AccountInfo } from '@equinor/fusion-framework-module-msal';
 import useAppModule from '../useAppModule';
 
 /**
@@ -6,6 +6,6 @@ import useAppModule from '../useAppModule';
  * @returns The current account information or undefined if no account is available.
  */
 export const useCurrentAccount = (): AccountInfo | undefined => {
-    const msalProvider = useAppModule('auth');
-    return msalProvider.defaultAccount;
+  const msalProvider = useAppModule('auth');
+  return msalProvider.defaultAccount;
 };

package/src/msal/useToken.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { type AuthenticationResult } from '@equinor/fusion-framework-module-msal';
+import type { AuthenticationResult } from '@equinor/fusion-framework-module-msal';
 
 import useAppModule from '../useAppModule';
 
@@ -10,22 +10,22 @@ import useAppModule from '../useAppModule';
  * @returns An object containing the acquired token, pending state, and error.
  */
 export const useToken = (req: {
-    scopes: string[];
+  scopes: string[];
 }): { token?: AuthenticationResult; pending: boolean; error: unknown } => {
-    const msalProvider = useAppModule('auth');
-    const [token, setToken] = useState<AuthenticationResult | undefined>(undefined);
-    const [pending, setPending] = useState<boolean>(false);
-    const [error, setError] = useState<unknown>(null);
-    useEffect(() => {
-        setPending(true);
-        setToken(undefined);
-        msalProvider
-            .acquireToken(req)
-            .then((token) => token && setToken(token))
-            .catch(setError)
-            .finally(() => setPending(false));
-    }, [msalProvider, req]);
-    return { token, pending, error };
+  const msalProvider = useAppModule('auth');
+  const [token, setToken] = useState<AuthenticationResult | undefined>(undefined);
+  const [pending, setPending] = useState<boolean>(false);
+  const [error, setError] = useState<unknown>(null);
+  useEffect(() => {
+    setPending(true);
+    setToken(undefined);
+    msalProvider
+      .acquireToken(req)
+      .then((token) => token && setToken(token))
+      .catch(setError)
+      .finally(() => setPending(false));
+  }, [msalProvider, req]);
+  return { token, pending, error };
 };
 
 export default useToken;

package/src/navigation/useNavigationModule.ts

@@ -1,5 +1,5 @@
 import useAppModule from '../useAppModule';
-import { INavigationProvider } from '@equinor/fusion-framework-module-navigation';
+import type { INavigationProvider } from '@equinor/fusion-framework-module-navigation';
 
 /** hook for getting the navigation provider (if enabled!) */
 export const useNavigationModule = (): INavigationProvider => useAppModule('navigation');

package/src/navigation/useRouter.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useNavigationModule } from './useNavigationModule';
-import { type INavigationProvider } from '@equinor/fusion-framework-module-navigation';
+import type { INavigationProvider } from '@equinor/fusion-framework-module-navigation';
 
 /**
  * create a router for react routing
@@ -9,8 +9,8 @@ import { type INavigationProvider } from '@equinor/fusion-framework-module-navig
  * @param routes router objects __(must be static | memorized)__
  */
 export const useRouter = (
-    routes: Parameters<INavigationProvider['createRouter']>[0],
+  routes: Parameters<INavigationProvider['createRouter']>[0],
 ): ReturnType<INavigationProvider['createRouter']> => {
-    const provider = useNavigationModule();
-    return useMemo(() => provider.createRouter(routes), [provider, routes]);
+  const provider = useNavigationModule();
+  return useMemo(() => provider.createRouter(routes), [provider, routes]);
 };

package/src/render-app.ts

@@ -1,14 +1,14 @@
 import { createComponent } from './create-component';
-import { renderComponent, RenderTeardown } from './render-component';
+import { renderComponent, type RenderTeardown } from './render-component';
 
 import type { ComponentRenderArgs } from './create-component';
 
 /** @deprecated */
 export const renderApp = (...componentArgs: Parameters<typeof createComponent>) => {
-    const renderer = renderComponent(createComponent(...componentArgs));
-    return (el: HTMLElement, args: ComponentRenderArgs): RenderTeardown => {
-        return renderer(el, args);
-    };
+  const renderer = renderComponent(createComponent(...componentArgs));
+  return (el: HTMLElement, args: ComponentRenderArgs): RenderTeardown => {
+    return renderer(el, args);
+  };
 };
 
 export default renderApp;

package/src/render-component.tsx

@@ -7,26 +7,26 @@ export type RenderTeardown = VoidFunction;
 
 /** @deprecated */
 export const renderComponent = (renderer: ComponentRenderer) => {
-    return (el: HTMLElement, args: ComponentRenderArgs): RenderTeardown => {
-        const Component = renderer(args.fusion, args.env);
-        return render(el, Component);
-    };
+  return (el: HTMLElement, args: ComponentRenderArgs): RenderTeardown => {
+    const Component = renderer(args.fusion, args.env);
+    return render(el, Component);
+  };
 };
 
 const render = (el: Element, Component: FunctionComponent): RenderTeardown => {
+  // eslint-disable-next-line react/no-deprecated
+  ReactDOM.render(
+    <StrictMode>
+      <Suspense fallback={<p>loading app</p>}>
+        <Component />
+      </Suspense>
+    </StrictMode>,
+    el,
+  );
+  return () => {
     // eslint-disable-next-line react/no-deprecated
-    ReactDOM.render(
-        <StrictMode>
-            <Suspense fallback={<p>loading app</p>}>
-                <Component />
-            </Suspense>
-        </StrictMode>,
-        el,
-    );
-    return () => {
-        // eslint-disable-next-line react/no-deprecated
-        ReactDOM.unmountComponentAtNode(el);
-    };
+    ReactDOM.unmountComponentAtNode(el);
+  };
 };
 
 // const render = (el: Element, Component: FunctionComponent): RenderTeardown => {

package/src/settings/useAppSetting.ts

@@ -45,68 +45,67 @@ type UpdateSettingFunction<T, O = T> = (currentSetting: T | undefined) => O;
  * });
  */
 export const useAppSetting = <
-    TSettings extends Record<string, unknown> = AppSettings,
-    TProp extends keyof TSettings = keyof TSettings,
+  TSettings extends Record<string, unknown> = AppSettings,
+  TProp extends keyof TSettings = keyof TSettings,
 >(
-    prop: TProp,
-    defaultValue?: TSettings[TProp],
-    hooks?: AppSettingsStatusHooks & {
-        onError?: (error: Error | null) => void;
-        onUpdated?: () => void;
-    },
+  prop: TProp,
+  defaultValue?: TSettings[TProp],
+  hooks?: AppSettingsStatusHooks & {
+    onError?: (error: Error | null) => void;
+    onUpdated?: () => void;
+  },
 ): [
-    TSettings[TProp] | undefined,
-    (update: TSettings[TProp] | UpdateSettingFunction<TSettings[TProp]>) => void,
+  TSettings[TProp] | undefined,
+  (update: TSettings[TProp] | UpdateSettingFunction<TSettings[TProp]>) => void,
 ] => {
-    const [{ onError, onUpdated, onLoading, onUpdating }] = useState(() => hooks ?? {});
+  const [{ onError, onUpdated, onLoading, onUpdating }] = useState(() => hooks ?? {});
 
-    const { currentApp = null } = useCurrentApp();
+  const { currentApp = null } = useCurrentApp();
 
-    // create a subject to manage the setting value
-    const subject = useMemo(() => {
-        return new BehaviorSubject<TSettings[TProp] | undefined>(defaultValue);
-        // Only create a new subject when the current app changes
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [currentApp]);
+  // create a subject to manage the setting value
+  // biome-ignore lint/correctness/useExhaustiveDependencies: new subject when app changes
+  const subject = useMemo(() => {
+    return new BehaviorSubject<TSettings[TProp] | undefined>(defaultValue);
+  }, [currentApp]);
 
-    useLayoutEffect(() => {
-        const sub = currentApp?.settings$
-            .pipe(map((settings) => (settings as TSettings)[prop]))
-            .subscribe(subject);
-        return () => sub?.unsubscribe();
-    }, [currentApp, subject, prop]);
+  useLayoutEffect(() => {
+    const sub = currentApp?.settings$
+      .pipe(map((settings) => (settings as TSettings)[prop]))
+      .subscribe(subject);
+    return () => sub?.unsubscribe();
+  }, [currentApp, subject, prop]);
 
-    // subscribe to the setting value
-    const { value: setting } = useObservableState(subject);
+  // subscribe to the setting value
+  const { value: setting } = useObservableState(subject);
 
-    // update function
-    const setSetting = useCallback(
-        (update: TSettings[TProp] | UpdateSettingFunction<TSettings[TProp]>) => {
-            if (!currentApp) {
-                return onError?.(new Error('App is not available'));
-            }
+  // update function
+  const setSetting = useCallback(
+    (update: TSettings[TProp] | UpdateSettingFunction<TSettings[TProp]>) => {
+      if (!currentApp) {
+        return onError?.(new Error('App is not available'));
+      }
 
-            // resolve setting value with the provided value or function
-            const value =
-                typeof update === 'function'
-                    ? (update as UpdateSettingFunction<TSettings[TProp]>)(subject.value)
-                    : update;
+      // resolve setting value with the provided value or function
+      const value =
+        typeof update === 'function'
+          ? (update as UpdateSettingFunction<TSettings[TProp]>)(subject.value)
+          : update;
 
-            currentApp.updateSetting<TSettings, TProp>(prop, value).subscribe({
-                error: onError,
-                complete: onUpdated,
-            });
-        },
-        [currentApp, subject, prop, onError, onUpdated],
-    );
+      currentApp.updateSetting<TSettings, TProp>(prop, value).subscribe({
+        error: onError,
+        complete: onUpdated,
+      });
+    },
+    [currentApp, subject, prop, onError, onUpdated],
+  );
 
-    // status hooks
-    useAppSettingsStatus(currentApp, {
-        onLoading,
-        onUpdating,
-    });
+  // status hooks
+  useAppSettingsStatus(currentApp, {
+    onLoading,
+    onUpdating,
+  });
 
-    return [setting, setSetting];
+  return [setting, setSetting];
 };
 
 export default useAppSetting;

package/src/settings/useAppSettings.ts

@@ -1,7 +1,7 @@
 import { useCallback, useLayoutEffect, useMemo } from 'react';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, type Observable } from 'rxjs';
 
-import { type AppSettings } from '@equinor/fusion-framework-module-app';
+import type { AppSettings } from '@equinor/fusion-framework-module-app';
 
 import { useCurrentApp } from '@equinor/fusion-framework-react/app';
 import { useObservableState } from '@equinor/fusion-observable/react';
@@ -47,53 +47,52 @@ type UpdateSettingsFunction<T, O = T> = (currentSettings: T | undefined) => O;
  * });
  */
 export const useAppSettings = <TSettings extends Record<string, unknown> = AppSettings>(
-    defaultValue?: TSettings,
-    hooks?: AppSettingsStatusHooks & {
-        onError?: (error: Error | null) => void;
-        onUpdated?: () => void;
-    },
+  defaultValue?: TSettings,
+  hooks?: AppSettingsStatusHooks & {
+    onError?: (error: Error | null) => void;
+    onUpdated?: () => void;
+  },
 ): [TSettings, (settings: TSettings | UpdateSettingsFunction<TSettings>) => void] => {
-    const { onError, onUpdated, onLoading, onUpdating } = hooks ?? {};
-    const { currentApp = null } = useCurrentApp();
+  const { onError, onUpdated, onLoading, onUpdating } = hooks ?? {};
+  const { currentApp = null } = useCurrentApp();
 
-    const subject = useMemo(() => {
-        return new BehaviorSubject<TSettings>(defaultValue ?? ({} as TSettings));
-        // Only create a new subject when the current app changes
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [currentApp]);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: create new subject when app changes
+  const subject = useMemo(() => {
+    return new BehaviorSubject<TSettings>(defaultValue ?? ({} as TSettings));
+  }, [currentApp]);
 
-    // connect the subject to the current app settings stream
-    useLayoutEffect(() => {
-        const sub = (currentApp?.settings$ as Observable<TSettings>).subscribe(subject);
-        return () => sub?.unsubscribe();
-    }, [currentApp, subject]);
+  // connect the subject to the current app settings stream
+  useLayoutEffect(() => {
+    const sub = (currentApp?.settings$ as Observable<TSettings>).subscribe(subject);
+    return () => sub?.unsubscribe();
+  }, [currentApp, subject]);
 
-    // subscribe to the subject to get the latest settings
-    const { value: settings } = useObservableState(subject, { initial: defaultValue });
+  // subscribe to the subject to get the latest settings
+  const { value: settings } = useObservableState(subject, { initial: defaultValue });
 
-    const setSettings = useCallback(
-        (update: TSettings | UpdateSettingsFunction<TSettings>) => {
-            if (!currentApp) {
-                return onError?.(new Error('App is not available'));
-            }
+  const setSettings = useCallback(
+    (update: TSettings | UpdateSettingsFunction<TSettings>) => {
+      if (!currentApp) {
+        return onError?.(new Error('App is not available'));
+      }
 
-            // resolve settings with the provided value or function
-            const settings = typeof update === 'function' ? update(subject.value) : update;
+      // resolve settings with the provided value or function
+      const settings = typeof update === 'function' ? update(subject.value) : update;
 
-            currentApp.updateSettings(settings).subscribe({
-                next: () => {
-                    onUpdated?.();
-                    onError?.(null);
-                },
-                error: onError,
-            });
+      currentApp.updateSettings(settings).subscribe({
+        next: () => {
+          onUpdated?.();
+          onError?.(null);
         },
-        [currentApp, subject, onError, onUpdated],
-    );
+        error: onError,
+      });
+    },
+    [currentApp, subject, onError, onUpdated],
+  );
 
-    useAppSettingsStatus(currentApp, { onLoading, onUpdating });
+  useAppSettingsStatus(currentApp, { onLoading, onUpdating });
 
-    return [settings, setSettings];
+  return [settings, setSettings];
 };
 
 export default useAppSettings;