@equinor/fusion-framework-react-app 0.0.0-context-error-20240131144633

package/src/make-component.tsx

@@ -0,0 +1,74 @@
+import React, { 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 { AppModuleInitiator, AppModulesInstance } from '@equinor/fusion-framework-app';
+
+import type { AnyModule } from '@equinor/fusion-framework-module';
+
+import type { FrameworkEvent, FrameworkEventInit } from '@equinor/fusion-framework-module-event';
+
+import { ModuleProvider as AppModuleProvider } from '@equinor/fusion-framework-react-module';
+
+export type ComponentRenderArgs<TFusion extends Fusion = Fusion, TEnv = AppEnv> = {
+    fusion: TFusion;
+    env: TEnv;
+};
+
+export type ComponentRenderer<TFusion extends Fusion = Fusion, TEnv = AppEnv> = (
+    fusion: TFusion,
+    env: TEnv,
+) => React.LazyExoticComponent<React.ComponentType>;
+
+/**
+ * Creates an lazy loading Component which configures modules
+ * and provides context to framework and configured modules
+ *
+ * __Exposed providers__
+ * @see {@link @equinor/fusion-framework-react.FrameworkProvider | FrameworkProvider}
+ * @see {@link ModuleProvider | ModuleProvider}
+ *
+ * @template TModules module types included in configuration.
+ * @param Component - React component to render
+ * @param configure - Callback for configuring application
+ * @param modules - required modules for application
+ */
+export const makeComponent = <
+    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>,
+) =>
+    lazy(async () => {
+        const init = configureModules<TModules, TRef, TEnv>(configure);
+        const modules = (await init(args)) as unknown as AppModulesInstance;
+
+        const { fusion } = args;
+
+        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>
+        >;
+    }
+}
+
+export default makeComponent;

package/src/msal/index.ts

@@ -0,0 +1,3 @@
+export { useCurrentAccount } from './useCurrentAccount';
+export { useAccessToken } from './useAccessToken';
+export { useToken } from './useToken';

package/src/msal/useAccessToken.ts

@@ -0,0 +1,15 @@
+import { AuthRequest } from '@equinor/fusion-framework-module-msal/client';
+import { useToken } from './useToken';
+
+/**
+ * Custom hook that retrieves an access token for the specified authentication request.
+ *
+ * @param req - The authentication request.
+ * @returns An object containing the access token, pending state, and error.
+ */
+export const useAccessToken = (
+    req: AuthRequest,
+): { token?: string; pending: boolean; error: unknown } => {
+    const { token, error, pending } = useToken(req);
+    return { token: token?.accessToken, pending, error };
+};

package/src/msal/useCurrentAccount.ts

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

package/src/msal/useToken.ts

@@ -0,0 +1,29 @@
+import { AuthRequest, AuthenticationResult } from '@equinor/fusion-framework-module-msal/client';
+import useAppModule from '../useAppModule';
+import { useEffect, useState } from 'react';
+
+/**
+ * Custom hook for acquiring an authentication token using MSAL.
+ * @param req - The authentication request.
+ * @returns An object containing the acquired token, pending state, and error.
+ */
+export const useToken = (
+    req: AuthRequest,
+): { 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 };
+};
+
+export default useToken;

package/src/navigation/index.ts

@@ -0,0 +1,2 @@
+export { useNavigationModule } from './useNavigationModule';
+export { useRouter } from './useRouter';

package/src/navigation/useNavigationModule.ts

@@ -0,0 +1,5 @@
+import useAppModule from '../useAppModule';
+import { 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

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import { useNavigationModule } from './useNavigationModule';
+import { type INavigationProvider } from '@equinor/fusion-framework-module-navigation';
+
+/**
+ * create a router for react routing
+ * @see {@link [docs](https://equinor.github.io/fusion-framework/modules/navigation/)}
+ * @see {@link [react-router](https://reactrouter.com/en/main/routers/create-browser-router)}
+ * @param routes router objects __(must be static | memorized)__
+ */
+export const useRouter = (
+    routes: Parameters<INavigationProvider['createRouter']>[0],
+): ReturnType<INavigationProvider['createRouter']> => {
+    const provider = useNavigationModule();
+    return useMemo(() => provider.createRouter(routes), [provider, routes]);
+};

package/src/render-app.ts

@@ -0,0 +1,14 @@
+import { createComponent } from './create-component';
+import { renderComponent, 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);
+    };
+};
+
+export default renderApp;

package/src/render-component.tsx

@@ -0,0 +1,46 @@
+import { Suspense, StrictMode } from 'react';
+import type { FunctionComponent } from 'react';
+import type { ComponentRenderArgs, ComponentRenderer } from './create-component';
+import ReactDOM from 'react-dom';
+
+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);
+    };
+};
+
+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.unmountComponentAtNode(el);
+    };
+};
+
+// const render = (el: Element, Component: FunctionComponent): RenderTeardown => {
+//     const root = createRoot(el);
+//     root.render(
+//         <StrictMode>
+//             <Suspense fallback={<p>loading app</p>}>
+//                 <Component />
+//             </Suspense>
+//         </StrictMode>
+//     );
+//     return () => {
+//         root.unmount();
+//     };
+// };
+
+export default renderComponent;

package/src/useAppModule.ts

@@ -0,0 +1,31 @@
+import type { AppModules, AppModulesInstance } from '@equinor/fusion-framework-app';
+import { AnyModule, ModuleKey, ModuleType, ModuleTypes } from '@equinor/fusion-framework-module';
+import { useAppModules } from './useAppModules';
+
+/**
+ * hook for getting a module from the application scope
+ *
+ * @template TType type of the module
+ *
+ * @param module name of the module, provide TType if not registered
+ *
+ * @returns provider of the module
+ */
+export const useAppModule = <
+    TType extends AnyModule | unknown = unknown,
+    TKey extends string = ModuleKey<ModuleTypes<AppModules<[TType]>>>,
+>(
+    module: TKey,
+): TType extends AnyModule
+    ? ModuleType<TType>
+    : AppModulesInstance[Extract<keyof AppModulesInstance, TKey>] => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const appModule = useAppModules()[module];
+    if (!appModule) {
+        throw Error(`the requested module [${module}] is not included in the app scope`);
+    }
+    return appModule;
+};
+
+export default useAppModule;

package/src/useAppModules.ts

@@ -0,0 +1,9 @@
+import type { AppModulesInstance } from '@equinor/fusion-framework-app';
+import type { AnyModule } from '@equinor/fusion-framework-module';
+import { useModules } from '@equinor/fusion-framework-react-module';
+
+export const useAppModules = <
+    T extends Array<AnyModule> | unknown = unknown,
+>(): AppModulesInstance<T> => useModules<AppModulesInstance<T>>();
+
+export default useAppModules;

package/src/version.ts

@@ -0,0 +1,2 @@
+// Generated by genversion.
+export const version = '4.3.0';

package/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "extends": "../tsconfig.react.json",
+  "compilerOptions": {
+    "outDir": "dist/esm",
+    "rootDir": "src",
+    "declarationDir": "./dist/types",
+    "paths": {
+      "react": [ "./node_modules/@types/react" ],
+    },
+  },
+  "references": [
+   
+    {
+      "path": "../../app"
+    },
+    {
+      "path": "../framework"
+    },
+    {
+      "path": "../modules/module"
+    },
+    {
+      "path": "../modules/http"
+    },
+    {
+      "path": "../modules/context"
+    },
+    {
+      "path": "../modules/bookmark"
+    },
+    {
+      "path": "../../modules/navigation"
+    }
+  ],
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "lib"
+  ]
+}