@equinor/fusion-framework-react-app 0.8.0 → 1.0.1

package/dist/types/create-component.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { Fusion } from '@equinor/fusion-framework-react';
+import type { AppManifest, 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';
+export declare type ComponentRenderArgs<TFusion extends Fusion = Fusion, TManifest extends AppManifest = AppManifest> = {
+    fusion: TFusion;
+    env: TManifest;
+};
+export declare type ComponentRenderer<TFusion extends Fusion = Fusion, TManifest extends AppManifest = AppManifest> = (args: ComponentRenderArgs<TFusion, TManifest>) => React.LazyExoticComponent<React.ComponentType>;
+export declare const createComponent: <TModules extends AnyModule[], TRef extends Fusion<[]> = Fusion<[]>, TManifest extends AppManifest = AppManifest>(Component: React.ComponentType, configure?: AppModuleInitiator<TModules, TRef, TManifest> | undefined) => ComponentRenderer<TRef, TManifest>;
+declare module '@equinor/fusion-framework-module-event' {
+    interface FrameworkEventMap {
+        onReactAppLoaded: FrameworkEvent<FrameworkEventInit<{
+            modules: AppModulesInstance;
+            fusion: Fusion;
+        }, React.ComponentType>>;
+    }
+}
+export default createComponent;

package/dist/types/create-legacy-app.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { AnyModule } from '@equinor/fusion-framework-module';
-import type { AppConfigurator } from '@equinor/fusion-framework-app';
-export declare const createLegacyApp: <TModules extends AnyModule[]>(Component: React.ComponentType, configure?: AppConfigurator<TModules> | undefined, modules?: TModules | undefined) => () => JSX.Element;
+import type { AppModuleInitiator } from '@equinor/fusion-framework-app';
+export declare const createLegacyApp: <TModules extends AnyModule[]>(Component: React.ComponentType, configure?: AppModuleInitiator<TModules, import("@equinor/fusion-framework").Fusion<[]>, import("@equinor/fusion-framework-app").AppManifest> | undefined) => () => JSX.Element;

package/dist/types/index.d.ts

@@ -1,7 +1,8 @@
-export { appModules } from '@equinor/fusion-framework-app';
-export type { AppConfigurator, AppConfigCallback, AppModules, AppModulesInstance, AppManifest, } from '@equinor/fusion-framework-app';
+export type { AppConfigurator, AppModules, AppModulesInstance, AppManifest, } from '@equinor/fusion-framework-app';
 export { useAppModule } from './useAppModule';
 export { useAppModules } from './useAppModules';
-export { createApp } from './create-app';
+export { renderApp } from './render-app';
+export { createComponent } from './create-component';
+export { renderComponent } from './render-component';
 export { createLegacyApp } from './create-legacy-app';
-export { default } from './create-app';
+export { default } from './render-app';

package/dist/types/render-app.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { RenderTeardown } from './render-component';
+import type { ComponentRenderArgs } from './create-component';
+export declare const renderApp: (Component: import("react").ComponentType<{}>, configure?: import("@equinor/fusion-framework-app").AppModuleInitiator<import("@equinor/fusion-framework-module").AnyModule[], import("@equinor/fusion-framework").Fusion<[]>, import("@equinor/fusion-framework-app").AppManifest> | undefined) => (el: HTMLElement, args: ComponentRenderArgs) => RenderTeardown;
+export default renderApp;

package/dist/types/render-component.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentRenderArgs, ComponentRenderer } from 'create-component';
+export declare type RenderTeardown = VoidFunction;
+export declare const renderComponent: (renderer: ComponentRenderer) => (el: HTMLElement, args: ComponentRenderArgs) => RenderTeardown;
+export default renderComponent;

package/dist/types/useAppModule.d.ts

@@ -1,3 +1,3 @@
 import type { AppModulesInstance } from '@equinor/fusion-framework-app';
-export declare const useAppModule: <TKey extends string | number>(module: TKey) => AppModulesInstance<[]>[TKey];
+export declare const useAppModule: <TKey extends "event" | "http" | "auth" | "dispose">(module: TKey) => AppModulesInstance<[]>[TKey];
 export default useAppModule;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-framework-react-app",
-  "version": "0.8.0",
+  "version": "1.0.1",
   "description": "",
   "main": "dist/esm/index.js",
   "exports": {
@@ -39,12 +39,12 @@
     "directory": "packages/react"
   },
   "dependencies": {
-    "@equinor/fusion-framework-app": "^0.2.3",
-    "@equinor/fusion-framework-module": "^0.4.4",
-    "@equinor/fusion-framework-module-event": "^0.1.4",
-    "@equinor/fusion-framework-module-msal": "^0.4.2",
-    "@equinor/fusion-framework-react": "^0.3.3",
-    "@equinor/fusion-framework-react-module-app-config": "^0.1.7"
+    "@equinor/fusion-framework-app": "^1.0.1",
+    "@equinor/fusion-framework-module": "^1.0.1",
+    "@equinor/fusion-framework-module-event": "^1.0.1",
+    "@equinor/fusion-framework-module-msal": "^1.0.1",
+    "@equinor/fusion-framework-react": "^1.0.1",
+    "@equinor/fusion-framework-react-module-app-config": "^1.0.1"
   },
   "devDependencies": {
     "@types/react": "^17.0.11",
@@ -66,5 +66,5 @@
       "optional": true
     }
   },
-  "gitHead": "88fac94c937c5fd9fa0b39ffe2fd256ecbf1ae38"
+  "gitHead": "92331edc3d412391fbb33d322e7cf8769b57534e"
 }

package/src/{create-app.tsx → create-component.tsx}

@@ -1,17 +1,32 @@
-import { lazy } from 'react';
+import React, { lazy } from 'react';
 
 import { FrameworkProvider } from '@equinor/fusion-framework-react';
 import type { Fusion } from '@equinor/fusion-framework-react';
 
-import { initializeAppModules } from '@equinor/fusion-framework-app';
-import type { AppManifest, AppConfigurator, AppModules } from '@equinor/fusion-framework-app';
+import { initAppModules } from '@equinor/fusion-framework-app';
+import type {
+    AppManifest,
+    AppModuleInitiator,
+    AppModulesInstance,
+} from '@equinor/fusion-framework-app';
 
-import type { AnyModule, ModulesInstanceType } from '@equinor/fusion-framework-module';
+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,
+    TManifest extends AppManifest = AppManifest
+> = { fusion: TFusion; env: TManifest };
+export type ComponentRenderer<
+    TFusion extends Fusion = Fusion,
+    TManifest extends AppManifest = AppManifest
+> = (
+    args: ComponentRenderArgs<TFusion, TManifest>
+) => React.LazyExoticComponent<React.ComponentType>;
+
 /**
  * Creates an lazy loading Component which configures modules
  * and provides context to framework and configured modules
@@ -61,33 +76,31 @@ import { ModuleProvider as AppModuleProvider } from '@equinor/fusion-framework-r
  * @param configure - Callback for configuring application
  * @param modules - required modules for application
  */
-export const createApp =
-    <TModules extends Array<AnyModule>>(
+export const createComponent =
+    <
+        TModules extends Array<AnyModule>,
+        TRef extends Fusion = Fusion,
+        TManifest extends AppManifest = AppManifest
+    >(
         Component: React.ComponentType,
-        configure?: AppConfigurator<TModules>,
-        modules?: TModules
-    ) =>
-    (fusion: Fusion, env: AppManifest): React.LazyExoticComponent<React.ComponentType> =>
+        configure?: AppModuleInitiator<TModules, TRef, TManifest>
+    ): ComponentRenderer<TRef, TManifest> =>
+    ({ fusion, env }) =>
         lazy(async () => {
-            modules ??= [] as unknown as TModules;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const configurator = async (config: any) => {
-                if (configure) {
-                    await Promise.resolve(configure(config, fusion, env));
-                }
-            };
-
-            const appInitiator = initializeAppModules(configurator, modules ?? []);
+            const init = initAppModules(configure);
+            const modules = (await init({
+                fusion,
+                manifest: env,
+            })) as unknown as AppModulesInstance;
 
-            const appModules = await appInitiator(fusion, env);
-            appModules.event.dispatchEvent('onReactAppLoaded', {
+            modules.event.dispatchEvent('onReactAppLoaded', {
                 detail: { modules, fusion },
                 source: Component,
             });
             return {
                 default: () => (
                     <FrameworkProvider value={fusion}>
-                        <AppModuleProvider value={appModules}>
+                        <AppModuleProvider value={modules}>
                             <Component />
                         </AppModuleProvider>
                     </FrameworkProvider>
@@ -98,12 +111,9 @@ export const createApp =
 declare module '@equinor/fusion-framework-module-event' {
     interface FrameworkEventMap {
         onReactAppLoaded: FrameworkEvent<
-            FrameworkEventInit<
-                { modules: ModulesInstanceType<AppModules>; fusion: Fusion },
-                React.ComponentType
-            >
+            FrameworkEventInit<{ modules: AppModulesInstance; fusion: Fusion }, React.ComponentType>
         >;
     }
 }
 
-export default createApp;
+export default createComponent;

package/src/create-legacy-app.tsx

@@ -3,20 +3,19 @@ import { Suspense, useMemo } from 'react';
 import { useFramework } from '@equinor/fusion-framework-react/hooks';
 
 import type { AnyModule } from '@equinor/fusion-framework-module';
-import type { AppConfigurator } from '@equinor/fusion-framework-app';
+import type { AppModuleInitiator } from '@equinor/fusion-framework-app';
 
-import { createApp } from './create-app';
+import { createComponent } from './create-component';
 
 export const createLegacyApp = <TModules extends Array<AnyModule>>(
     Component: React.ComponentType,
-    configure?: AppConfigurator<TModules>,
-    modules?: TModules
+    configure?: AppModuleInitiator<TModules>
 ) => {
     return (): JSX.Element => {
         const fusion = useFramework();
         const RenderComponent = useMemo(() => {
-            const creator = createApp(Component, configure, modules);
-            return creator(fusion, { name: '' });
+            const creator = createComponent(Component, configure);
+            return creator({ fusion, env: { name: 'legacy' } });
         }, []);
         return (
             <Suspense fallback={<p>loading app</p>}>

package/src/index.ts

@@ -3,11 +3,8 @@
  * @module
  */
 
-export { appModules } from '@equinor/fusion-framework-app';
-
 export type {
     AppConfigurator,
-    AppConfigCallback,
     AppModules,
     AppModulesInstance,
     AppManifest,
@@ -16,7 +13,9 @@ export type {
 export { useAppModule } from './useAppModule';
 export { useAppModules } from './useAppModules';
 
-export { createApp } from './create-app';
+export { renderApp } from './render-app';
+export { createComponent } from './create-component';
+export { renderComponent } from './render-component';
 export { createLegacyApp } from './create-legacy-app';
 
-export { default } from './create-app';
+export { default } from './render-app';

package/src/render-app.ts

@@ -0,0 +1,13 @@
+import { createComponent } from './create-component';
+import { renderComponent, RenderTeardown } from './render-component';
+
+import type { ComponentRenderArgs } from './create-component';
+
+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,48 @@
+import { Suspense, StrictMode } from 'react';
+import type { FunctionComponent } from 'react';
+import type { ComponentRenderArgs, ComponentRenderer } from 'create-component';
+import ReactDOM from 'react-dom';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { createRoot } from 'react-dom/client';
+
+export type RenderTeardown = VoidFunction;
+
+export const renderComponent = (renderer: ComponentRenderer) => {
+    return (el: HTMLElement, args: ComponentRenderArgs): RenderTeardown => {
+        const Component = renderer(args);
+        const renderFn = createRoot ? render : renderLegacy;
+        return renderFn(el, Component);
+    };
+};
+
+const renderLegacy = (el: Element, Component: FunctionComponent): RenderTeardown => {
+    ReactDOM.render(
+        <StrictMode>
+            <Suspense fallback={<p>loading app</p>}>
+                <Component />
+            </Suspense>
+        </StrictMode>,
+        el
+    );
+    return () => {
+        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;