@equinor/fusion-framework-react-app 6.1.6-next.0 → 6.2.0-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9

package/dist/types/fusion-apploader/FusionApploader.d.ts

@@ -0,0 +1,18 @@
+export type FusionApploaderProps = {
+    appKey: string;
+};
+/**
+ * FusionApploader component
+ *
+ * Embeds a Fusion child application inside a parent Fusion application.
+ * Handles loading and error states, and mounts the child app's DOM element into a container div.
+ *
+ * @param { FusionApploaderProps } props - The props for the component.
+ * @param { string } props.appKey - The key of the Fusion app to load and mount.
+ * @returns { JSX.Element } The rendered component, which displays loading, error, or the embedded app.
+ *
+ * @example
+ * <FusionApploader appKey="my-app" />
+ */
+export declare const FusionApploader: ({ appKey }: FusionApploaderProps) => JSX.Element;
+export default FusionApploader;

package/dist/types/fusion-apploader/index.d.ts

@@ -0,0 +1,2 @@
+export { FusionApploader, type FusionApploaderProps } from './FusionApploader';
+export { useFusionApploader } from './useFusionApploader';

package/dist/types/fusion-apploader/useFusionApploader.d.ts

@@ -0,0 +1,33 @@
+import type { FusionApploaderProps as ApploaderProps } from './FusionApploader';
+/**
+ * React hook for dynamically loading and mounting a Fusion child app inside a parent Fusion app.
+ * Handles loading state, error reporting, and provides a reference to the mounted app’s DOM element.
+ *
+ * @param { Object } params
+ * @param { string } params.appKey - The key of the Fusion app to load and mount.
+ * @returns {{
+ *   loading: boolean,
+ *   error: Error | undefined,
+ *   appRef: React.RefObject<HTMLDivElement | null>
+ * }} An object containing loading state, error, and a ref to the mounted app element.
+ *
+ * @example
+ * ```typescript
+ * const { loading, error, appRef } = useFusionApploader({ appKey: 'my-app' });
+ *
+ * useEffect(() => {
+ *   if (containerRef.current && appRef.current) {
+ *     containerRef.current.appendChild(appRef.current);
+ *   }
+ * }, [appRef.current]);
+ *
+ * if (loading) return <div>Loading...</div>;
+ * if (error) return <div>Error: {error.message}</div>;
+ * return <div ref={containerRef} />;
+ * ```
+ */
+export declare const useFusionApploader: ({ appKey, }: ApploaderProps) => {
+    loading: boolean;
+    error: Error | undefined;
+    appRef: React.RefObject<HTMLDivElement | null>;
+};

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const version = "6.1.6-next.0";
+export declare const version = "6.1.5";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-framework-react-app",
-  "version": "6.1.6-next.0",
+  "version": "6.2.0-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9",
   "description": "",
   "main": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
@@ -25,6 +25,10 @@
       "types": "./dist/types/framework/index.d.ts",
       "import": "./dist/esm/framework/index.js"
     },
+    "./fusion-apploader": {
+      "types": "./dist/types/fusion-apploader/index.d.ts",
+      "import": "./dist/esm/fusion-apploader/index.js"
+    },
     "./help-center": {
       "types": "./dist/types/help-center/index.d.ts",
       "import": "./dist/esm/help-center/index.js"
@@ -64,6 +68,9 @@
       "framework": [
         "dist/types/framework/index.d.ts"
       ],
+      "fusion-apploader": [
+        "dist/types/fusion-apploader/index.d.ts"
+      ],
       "help-center": [
         "dist/types/help-center/index.d.ts"
       ],
@@ -96,13 +103,13 @@
     "directory": "packages/react"
   },
   "dependencies": {
-    "@equinor/fusion-framework-app": "^9.3.15-next.0",
-    "@equinor/fusion-framework-module": "^4.4.2",
-    "@equinor/fusion-framework-module-app": "^6.1.13",
-    "@equinor/fusion-framework-module-navigation": "^5.0.2",
-    "@equinor/fusion-framework-react-module": "^3.1.12",
-    "@equinor/fusion-framework-react-module-http": "^9.0.3-next.0",
-    "@equinor/fusion-framework-react": "^7.4.13-next.0"
+    "@equinor/fusion-framework-app": "^9.3.15-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9",
+    "@equinor/fusion-framework-module": "^4.4.3-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9",
+    "@equinor/fusion-framework-module-app": "^6.1.14-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9",
+    "@equinor/fusion-framework-module-navigation": "^5.0.3-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9",
+    "@equinor/fusion-framework-react": "^7.4.13-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9",
+    "@equinor/fusion-framework-react-module": "^3.1.13-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9",
+    "@equinor/fusion-framework-react-module-http": "^9.0.3-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9"
   },
   "devDependencies": {
     "@types/react": "^18.2.50",
@@ -111,20 +118,20 @@
     "react-dom": "^18.2.0",
     "rxjs": "^7.8.1",
     "typescript": "^5.8.2",
-    "@equinor/fusion-framework-module-ag-grid": "^34.0.2",
-    "@equinor/fusion-framework-module-event": "^4.3.6",
-    "@equinor/fusion-framework-module-feature-flag": "^1.1.18",
-    "@equinor/fusion-framework-react-module-bookmark": "^4.0.4-next.0",
-    "@equinor/fusion-framework-module-msal": "^4.0.6",
-    "@equinor/fusion-framework-react-module-context": "^6.2.28",
-    "@equinor/fusion-observable": "^8.4.9"
+    "@equinor/fusion-framework-module-ag-grid": "^34.0.3-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9",
+    "@equinor/fusion-framework-module-event": "^4.3.7-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9",
+    "@equinor/fusion-framework-module-msal": "^4.0.7-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9",
+    "@equinor/fusion-framework-module-feature-flag": "^1.1.19-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9",
+    "@equinor/fusion-framework-react-module-context": "^6.2.29-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9",
+    "@equinor/fusion-observable": "^8.4.10-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9",
+    "@equinor/fusion-framework-react-module-bookmark": "^4.0.4-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "rxjs": "^7.8.1",
-    "@equinor/fusion-framework-module-msal": "^4.0.6"
+    "@equinor/fusion-framework-module-msal": "^4.0.7-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9"
   },
   "peerDependenciesMeta": {
     "@equinor/fusion-framework-react-module-ag-grid": {

package/src/fusion-apploader/FusionApploader.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef } from 'react';
+import { useFusionApploader } from './useFusionApploader';
+
+export type FusionApploaderProps = {
+  appKey: string;
+};
+
+/**
+ * FusionApploader component
+ *
+ * Embeds a Fusion child application inside a parent Fusion application.
+ * Handles loading and error states, and mounts the child app's DOM element into a container div.
+ *
+ * @param { FusionApploaderProps } props - The props for the component.
+ * @param { string } props.appKey - The key of the Fusion app to load and mount.
+ * @returns { JSX.Element } The rendered component, which displays loading, error, or the embedded app.
+ *
+ * @example
+ * <FusionApploader appKey="my-app" />
+ */
+export const FusionApploader = ({ appKey }: FusionApploaderProps): JSX.Element => {
+  const refWrapp = useRef<HTMLDivElement | null>(null);
+  const { loading, error, appRef } = useFusionApploader({ appKey });
+
+  useEffect(() => {
+    if (!refWrapp.current || !appRef.current) {
+      return;
+    }
+
+    refWrapp.current.appendChild(appRef.current);
+  }, [appRef.current]);
+
+  if (loading) {
+    return <div>Loading {appKey}</div>;
+  }
+  if (error) {
+    return (
+      <div>
+        Error loading {appKey}. Error: {error.message}
+      </div>
+    );
+  }
+
+  return <div ref={refWrapp} />;
+};
+
+export default FusionApploader;

package/src/fusion-apploader/README.md

@@ -0,0 +1,78 @@
+# `@equinor/fusion-framework-react-app/fusion-apploader`
+
+[FusionApploader](#fusionapploader) component and [useFusionApploader](#usefusionapploader) is intended to be used to embed Fusion applications inside other Fusion application.
+
+> [!WARNING]
+> `FusionApploader` is an experimental poc.
+>
+> The embedded application will likely have issues with routing, context and other framework functionality, so use with care.
+>
+> Should only be used to embed 'simple' applications like **PowerBI** and **PowerApps**.
+
+## FusionApploader
+
+React component for embeding a Fusion child application inside a parent Fusion application.
+
+Handles loading and error states, and mounts the child app's DOM element into a container div.
+
+If you need to customise the error and loading messages, then use the hook ``useFusionApploader`` and create your own component.
+
+### Example usage
+
+```typescript
+<FusionApploader appKey="my-app" />
+```
+
+## useFusionApploader
+
+A React hook for dynamically loading and mounting a Fusion child app inside a parent Fusion app. Handles loading state, error reporting, and provides a reference to the mounted app’s DOM element.
+
+### Signature
+
+```typescript
+useFusionApploader({ appKey }: { appKey: string }): {
+  loading: boolean;
+  error: Error | undefined;
+  appRef: React.RefObject<HTMLDivElement | null>;
+}
+```
+
+### Parameters
+
+`appKey (string)`: The key of the Fusion app to load and mount.
+
+### Returns
+
+- **loading** ``(boolean)``: true while the app is loading.
+- **error** ``(Error | undefined)``: Error object if loading fails, otherwise undefined.
+- **appRef** ``(React.RefObject<HTMLDivElement | null>)``: Ref to the DOM element where the child app is mounted.
+
+### Usage Example
+
+```typescript
+import React, { useEffect, useRef } from 'react';
+import { useFusionApploader } from './useFusionAppLoader';
+
+const MyAppLoader = ({ appKey }: { appKey: string }) => {
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const { loading, error, appRef } = useFusionApploader({ appKey });
+
+  useEffect(() => {
+    if (wrapperRef.current && appRef.current) {
+      wrapperRef.current.appendChild(appRef.current);
+    }
+  }, [appRef.current]);
+
+  if (loading) return <div>Loading {appKey}...</div>;
+  if (error) return <div>Error loading {appKey}: {error.message}</div>;
+
+  return <div ref={wrapperRef} />;
+};
+```
+
+### Notes
+
+- The hook is designed to be used in a parent Fusion app context.
+- The returned appRef should be appended to a container element in your component.
+- Handles subscription and cleanup automatically.
+- Useful for micro-frontend scenarios where apps are loaded dynamically.

package/src/fusion-apploader/index.ts

@@ -0,0 +1,2 @@
+export { FusionApploader, type FusionApploaderProps } from './FusionApploader';
+export { useFusionApploader } from './useFusionApploader';

package/src/fusion-apploader/useFusionApploader.ts

@@ -0,0 +1,104 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { useFramework } from '@equinor/fusion-framework-react';
+import type { AppModule } from '@equinor/fusion-framework-module-app';
+
+import type { FusionApploaderProps as ApploaderProps } from './FusionApploader';
+
+/**
+ * React hook for dynamically loading and mounting a Fusion child app inside a parent Fusion app.
+ * Handles loading state, error reporting, and provides a reference to the mounted app’s DOM element.
+ *
+ * @param { Object } params
+ * @param { string } params.appKey - The key of the Fusion app to load and mount.
+ * @returns {{
+ *   loading: boolean,
+ *   error: Error | undefined,
+ *   appRef: React.RefObject<HTMLDivElement | null>
+ * }} An object containing loading state, error, and a ref to the mounted app element.
+ *
+ * @example
+ * ```typescript
+ * const { loading, error, appRef } = useFusionApploader({ appKey: 'my-app' });
+ *
+ * useEffect(() => {
+ *   if (containerRef.current && appRef.current) {
+ *     containerRef.current.appendChild(appRef.current);
+ *   }
+ * }, [appRef.current]);
+ *
+ * if (loading) return <div>Loading...</div>;
+ * if (error) return <div>Error: {error.message}</div>;
+ * return <div ref={containerRef} />;
+ * ```
+ */
+export const useFusionApploader = ({
+  appKey,
+}: ApploaderProps): {
+  loading: boolean;
+  error: Error | undefined;
+  appRef: React.RefObject<HTMLDivElement | null>;
+} => {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | undefined>();
+  const appRef = useRef<HTMLDivElement | null>(null);
+  const fusion = useFramework<[AppModule]>();
+
+  /**
+   * The current fusion app.
+   * aka the parent app that is loading the child app.
+   */
+  const fusionApp = useMemo(() => fusion.modules.app.current, [fusion]);
+
+  /**
+   * The app to be mounted
+   * aka the child app that is being loaded.
+   */
+  const loadedApp = useMemo(() => fusion.modules.app.createApp({ appKey }), [fusion, appKey]);
+
+  useEffect(() => {
+    setLoading(true);
+    setError(undefined);
+    const subscription$ = loadedApp?.initialize().subscribe({
+      next: ({ manifest, script, config }) => {
+        /* Application Element for mounting */
+        appRef.current = document.createElement('div');
+        appRef.current.id = manifest.appKey;
+        appRef.current.style.display = 'contents';
+
+        /* Use basename of current fusionApp */
+        const basename = `/apps/${fusionApp?.appKey}`;
+
+        try {
+          const render = script.renderApp ?? script.default;
+          if (render) {
+            return render(appRef.current, {
+              fusion,
+              env: { basename, config, manifest, props: {} },
+            });
+          }
+          throw Error('Application is not supported, no render function provided');
+        } catch (error) {
+          console.error('App loading Error: ', error);
+          setError(error as Error);
+        }
+      },
+      complete: () => {
+        setLoading(false);
+      },
+      error: (error: Error) => {
+        setError(error);
+        setLoading(false);
+      },
+    });
+    return () => {
+      subscription$.unsubscribe();
+    };
+  }, [fusionApp, loadedApp, fusion]);
+
+  return {
+    loading,
+    error,
+    appRef,
+  };
+};

package/src/version.ts

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