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

package/CHANGELOG.md

@@ -1,14 +1,105 @@
 # Change Log
 
-## 6.1.6-next.0
+## 6.2.0-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9
+
+### Minor Changes
+
+- [#3039](https://github.com/equinor/fusion-framework/pull/3039) [`4c7c39a`](https://github.com/equinor/fusion-framework/commit/4c7c39a75513b2c0f6c630aeb058dc98ff4b21f6) Thanks [@eikeland](https://github.com/eikeland)! - `@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.
 
 ### Patch Changes
 
+- pre-release changeset for tag **apploader**, all public packages are patched
+
 - Updated dependencies []:
-  - @equinor/fusion-framework-app@9.3.15-next.0
-  - @equinor/fusion-framework-module-app@6.1.13
-  - @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-app@6.1.14-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9
+  - @equinor/fusion-framework-module@4.4.3-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9
+  - @equinor/fusion-framework-module-msal@4.0.7-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-http@9.0.3-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9
+  - @equinor/fusion-framework-react-module@3.1.13-apploader-be21a6b60eb13eee8bf869e75002d8634e9c50a9
 
 ## 6.1.5
 

package/dist/esm/fusion-apploader/FusionApploader.js

@@ -0,0 +1,35 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { useFusionApploader } from './useFusionApploader';
+/**
+ * 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 }) => {
+    const refWrapp = useRef(null);
+    const { loading, error, appRef } = useFusionApploader({ appKey });
+    useEffect(() => {
+        if (!refWrapp.current || !appRef.current) {
+            return;
+        }
+        refWrapp.current.appendChild(appRef.current);
+    }, [appRef.current]);
+    if (loading) {
+        return _jsxs("div", { children: ["Loading ", appKey] });
+    }
+    if (error) {
+        return (_jsxs("div", { children: ["Error loading ", appKey, ". Error: ", error.message] }));
+    }
+    return _jsx("div", { ref: refWrapp });
+};
+export default FusionApploader;
+//# sourceMappingURL=FusionApploader.js.map

package/dist/esm/fusion-apploader/FusionApploader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FusionApploader.js","sourceRoot":"","sources":["../../../src/fusion-apploader/FusionApploader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAM1D;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,MAAM,EAAwB,EAAe,EAAE;IAC/E,MAAM,QAAQ,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACrD,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;IAElE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;YACzC,OAAO;QACT,CAAC;QAED,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAC/C,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IAErB,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,sCAAc,MAAM,IAAO,CAAC;IACrC,CAAC;IACD,IAAI,KAAK,EAAE,CAAC;QACV,OAAO,CACL,4CACiB,MAAM,eAAW,KAAK,CAAC,OAAO,IACzC,CACP,CAAC;IACJ,CAAC;IAED,OAAO,cAAK,GAAG,EAAE,QAAQ,GAAI,CAAC;AAChC,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/esm/fusion-apploader/index.js

@@ -0,0 +1,3 @@
+export { FusionApploader } from './FusionApploader';
+export { useFusionApploader } from './useFusionApploader';
+//# sourceMappingURL=index.js.map

package/dist/esm/fusion-apploader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/fusion-apploader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAA6B,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/esm/fusion-apploader/useFusionApploader.js

@@ -0,0 +1,89 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useFramework } from '@equinor/fusion-framework-react';
+/**
+ * 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, }) => {
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState();
+    const appRef = useRef(null);
+    const fusion = useFramework();
+    /**
+     * 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);
+                }
+            },
+            complete: () => {
+                setLoading(false);
+            },
+            error: (error) => {
+                setError(error);
+                setLoading(false);
+            },
+        });
+        return () => {
+            subscription$.unsubscribe();
+        };
+    }, [fusionApp, loadedApp, fusion]);
+    return {
+        loading,
+        error,
+        appRef,
+    };
+};
+//# sourceMappingURL=useFusionApploader.js.map

package/dist/esm/fusion-apploader/useFusionApploader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFusionApploader.js","sourceRoot":"","sources":["../../../src/fusion-apploader/useFusionApploader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAK/D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EACjC,MAAM,GACS,EAIf,EAAE;IACF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAqB,CAAC;IACxD,MAAM,MAAM,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACnD,MAAM,MAAM,GAAG,YAAY,EAAe,CAAC;IAE3C;;;OAGG;IACH,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEtE;;;OAGG;IACH,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAE5F,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,QAAQ,CAAC,SAAS,CAAC,CAAC;QACpB,MAAM,aAAa,GAAG,SAAS,EAAE,UAAU,EAAE,CAAC,SAAS,CAAC;YACtD,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE;gBACrC,sCAAsC;gBACtC,MAAM,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBAC/C,MAAM,CAAC,OAAO,CAAC,EAAE,GAAG,QAAQ,CAAC,MAAM,CAAC;gBACpC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC;gBAE1C,uCAAuC;gBACvC,MAAM,QAAQ,GAAG,SAAS,SAAS,EAAE,MAAM,EAAE,CAAC;gBAE9C,IAAI,CAAC;oBACH,MAAM,MAAM,GAAG,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC;oBAClD,IAAI,MAAM,EAAE,CAAC;wBACX,OAAO,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE;4BAC5B,MAAM;4BACN,GAAG,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;yBAC/C,CAAC,CAAC;oBACL,CAAC;oBACD,MAAM,KAAK,CAAC,2DAA2D,CAAC,CAAC;gBAC3E,CAAC;gBAAC,OAAO,KAAK,EAAE,CAAC;oBACf,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC;oBAC5C,QAAQ,CAAC,KAAc,CAAC,CAAC;gBAC3B,CAAC;YACH,CAAC;YACD,QAAQ,EAAE,GAAG,EAAE;gBACb,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC;YACD,KAAK,EAAE,CAAC,KAAY,EAAE,EAAE;gBACtB,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAChB,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC;SACF,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,WAAW,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAEnC,OAAO;QACL,OAAO;QACP,KAAK;QACL,MAAM;KACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/version.js

@@ -1,3 +1,3 @@
 // Generated by genversion.
-export const version = '6.1.6-next.0';
+export const version = '6.1.5';
 //# sourceMappingURL=version.js.map

package/dist/esm/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,MAAM,CAAC,MAAM,OAAO,GAAG,cAAc,CAAC"}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC"}