@equinor/fusion-framework-react-app 9.0.7 → 9.0.9-next.0

package/dist/types/apploader/Apploader.d.ts

@@ -1,3 +1,4 @@
+import { type ReactElement } from 'react';
 export type ApploaderProps = {
     appKey: string;
 };
@@ -9,10 +10,10 @@ export type ApploaderProps = {
  *
  * @param { ApploaderProps } 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.
+ * @returns { ReactElement } The rendered component, which displays loading, error, or the embedded app.
  *
  * @example
  * <Apploader appKey="my-app" />
  */
-export declare const Apploader: ({ appKey }: ApploaderProps) => JSX.Element;
+export declare const Apploader: ({ appKey }: ApploaderProps) => ReactElement;
 export default Apploader;

package/dist/types/http/selectors.d.ts

@@ -0,0 +1 @@
+export * from '@equinor/fusion-framework-module-http/selectors';

package/dist/types/index.d.ts

@@ -1,12 +1,14 @@
 export type { AppConfig, AppEnv, AppModuleInitiator, AppModules, AppModulesInstance, AppRenderFn, IAppConfigurator, } from '@equinor/fusion-framework-app';
+export type { Fusion } from '@equinor/fusion-framework-react';
 export { AppManifest } from '@equinor/fusion-framework-module-app';
 export { useAppModule } from './useAppModule';
 export { useAppModules } from './useAppModules';
 export { useAppEnvironmentVariables } from './useAppEnvironmentVariables';
 export { makeComponent, ComponentRenderArgs } from './make-component';
 export { createLegacyApp } from './create-legacy-app';
-export { renderApp } from './render-app';
 export { createComponent } from './create-component';
+export { renderApp } from './render-app';
 export { renderComponent } from './render-component';
 export type { ComponentRenderer } from './create-component';
+export type { RenderTeardown } from './render-component';
 export { default } from './render-app';

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

@@ -1,6 +1,12 @@
 import { createComponent } from './create-component';
 import { type RenderTeardown } from './render-component';
 import type { ComponentRenderArgs } from './create-component';
-/** @deprecated */
+/**
+ * Creates a render function for an app component.
+ * Uses React 18's createRoot API via renderComponent.
+ *
+ * @param componentArgs - Arguments to pass to createComponent
+ * @returns A function that renders the app into a DOM element
+ */
 export declare const renderApp: (...componentArgs: Parameters<typeof createComponent>) => (el: HTMLElement, args: ComponentRenderArgs) => RenderTeardown;
 export default renderApp;

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

@@ -1,5 +1,11 @@
 import type { ComponentRenderArgs, ComponentRenderer } from './create-component';
 export type RenderTeardown = VoidFunction;
-/** @deprecated */
+/**
+ * Creates a render function for a component renderer.
+ * Uses React 18's createRoot API instead of the deprecated ReactDOM.render.
+ *
+ * @param renderer - A function that creates a component from fusion and env
+ * @returns A function that renders the component into a DOM element
+ */
 export declare const renderComponent: (renderer: ComponentRenderer) => (el: HTMLElement, args: ComponentRenderArgs) => RenderTeardown;
 export default renderComponent;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const version = "9.0.7";
+export declare const version = "9.0.9-next.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-framework-react-app",
-  "version": "9.0.7",
+  "version": "9.0.9-next.0",
   "description": "",
   "main": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
@@ -41,6 +41,10 @@
       "types": "./dist/types/http/index.d.ts",
       "import": "./dist/esm/http/index.js"
     },
+    "./http/selectors": {
+      "types": "./dist/types/http/selectors.d.ts",
+      "import": "./dist/esm/http/selectors.js"
+    },
     "./msal": {
       "types": "./dist/types/msal/index.d.ts",
       "import": "./dist/esm/msal/index.js"
@@ -113,36 +117,40 @@
     "directory": "packages/react"
   },
   "dependencies": {
-    "@equinor/fusion-framework-app": "10.4.8",
-    "@equinor/fusion-framework-module-app": "7.4.0",
-    "@equinor/fusion-framework-module": "5.0.5",
-    "@equinor/fusion-framework-react": "7.4.19",
-    "@equinor/fusion-framework-react-module": "3.1.13",
-    "@equinor/fusion-framework-module-navigation": "6.0.0",
-    "@equinor/fusion-framework-react-module-http": "10.0.0"
+    "@equinor/fusion-framework-app": "10.4.10-next.0",
+    "@equinor/fusion-framework-module-app": "7.4.2-next.0",
+    "@equinor/fusion-framework-module": "5.0.7-next.0",
+    "@equinor/fusion-framework-module-http": "7.0.9-next.0",
+    "@equinor/fusion-framework-react": "7.4.21-next.0",
+    "@equinor/fusion-framework-react-module": "3.1.15-next.0",
+    "@equinor/fusion-framework-module-navigation": "7.0.0-next.2",
+    "@equinor/fusion-framework-react-module-http": "10.0.2-next.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.50",
-    "@types/react-dom": "^18.2.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "happy-dom": "^20.0.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
     "rxjs": "^7.8.1",
     "typescript": "^5.8.2",
-    "@equinor/fusion-framework-module-event": "5.0.0",
-    "@equinor/fusion-framework-module-ag-grid": "35.0.1",
-    "@equinor/fusion-framework-module-feature-flag": "1.1.27",
-    "@equinor/fusion-framework-module-analytics": "1.0.0",
-    "@equinor/fusion-framework-module-msal": "7.3.0",
-    "@equinor/fusion-framework-react-module-bookmark": "5.0.1",
-    "@equinor/fusion-framework-react-module-context": "6.2.33",
-    "@equinor/fusion-observable": "8.5.7"
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.4",
+    "@equinor/fusion-framework-module-analytics": "1.0.3-next.0",
+    "@equinor/fusion-framework-module-event": "5.0.2-next.0",
+    "@equinor/fusion-framework-module-ag-grid": "35.1.0-next.0",
+    "@equinor/fusion-framework-module-feature-flag": "1.1.29-next.0",
+    "@equinor/fusion-framework-module-msal": "7.3.2-next.0",
+    "@equinor/fusion-framework-react-module-context": "6.2.35-next.0",
+    "@equinor/fusion-framework-react-module-bookmark": "5.0.3-next.0",
+    "@equinor/fusion-observable": "8.5.9-next.0"
   },
   "peerDependencies": {
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0",
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
     "rxjs": "^7.8.1",
-    "@equinor/fusion-framework-module-msal": "^7.3.0"
+    "@equinor/fusion-framework-module-msal": "^7.3.2-next.0"
   },
   "peerDependenciesMeta": {
     "@equinor/fusion-framework-react-module-ag-grid": {
@@ -174,6 +182,7 @@
     }
   },
   "scripts": {
-    "build": "tsc -b"
+    "build": "tsc -b",
+    "test": "vitest --run"
   }
 }

package/src/__tests__/render-app.test.tsx

@@ -0,0 +1,113 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type { ComponentRenderArgs } from '../create-component';
+import type { Fusion } from '@equinor/fusion-framework-react';
+import type { AppEnv } from '@equinor/fusion-framework-app';
+
+// Mock dependencies before importing
+vi.mock('../create-component', () => ({
+  createComponent: vi.fn(),
+}));
+
+vi.mock('../render-component', () => ({
+  renderComponent: vi.fn(),
+}));
+
+import { renderApp } from '../render-app';
+import { createComponent } from '../create-component';
+import { renderComponent } from '../render-component';
+
+describe('renderApp', () => {
+  let mockFusion: Fusion;
+  let mockEnv: AppEnv;
+  let mockElement: HTMLElement;
+  let mockTeardown: () => void;
+  let mockComponentRenderer: ReturnType<typeof createComponent>;
+  let mockRenderFunction: ReturnType<typeof renderComponent>;
+
+  beforeEach(() => {
+    // Setup mock data
+    mockFusion = {} as Fusion;
+    mockEnv = {} as AppEnv;
+    mockElement = document.createElement('div');
+    mockTeardown = vi.fn();
+
+    // Create a mock component renderer
+    // createComponent returns a ComponentRenderer function: (fusion, env) => React.LazyExoticComponent
+    mockComponentRenderer = vi.fn() as unknown as ReturnType<typeof createComponent>;
+
+    // Create a mock render function
+    mockRenderFunction = vi.fn(() => mockTeardown) as unknown as ReturnType<typeof renderComponent>;
+
+    // Mock renderComponent to return our mock render function
+    vi.mocked(renderComponent).mockReturnValue(mockRenderFunction);
+
+    // Mock createComponent to return our mock component renderer
+    vi.mocked(createComponent).mockReturnValue(mockComponentRenderer);
+  });
+
+  it('should create a render function that calls createComponent with provided arguments', () => {
+    const TestComponent = () => <div>Test</div>;
+    const mockConfigure = vi.fn();
+
+    renderApp(TestComponent, mockConfigure);
+
+    expect(createComponent).toHaveBeenCalledWith(TestComponent, mockConfigure);
+  });
+
+  it('should create a render function that uses renderComponent with the component renderer', () => {
+    const TestComponent = () => <div>Test</div>;
+    const appRender = renderApp(TestComponent);
+
+    // Call the render function
+    const teardown = appRender(mockElement, { fusion: mockFusion, env: mockEnv });
+
+    expect(renderComponent).toHaveBeenCalledWith(mockComponentRenderer);
+    expect(mockRenderFunction).toHaveBeenCalledWith(mockElement, {
+      fusion: mockFusion,
+      env: mockEnv,
+    });
+    expect(teardown).toBe(mockTeardown);
+  });
+
+  it('should return a teardown function that unmounts the component', () => {
+    const TestComponent = () => <div>Test</div>;
+    const appRender = renderApp(TestComponent);
+
+    const teardown = appRender(mockElement, { fusion: mockFusion, env: mockEnv });
+
+    expect(typeof teardown).toBe('function');
+    teardown();
+    expect(mockTeardown).toHaveBeenCalled();
+  });
+
+  it('should work without a configure callback', () => {
+    vi.clearAllMocks();
+    const TestComponent = () => <div>Test</div>;
+    const appRender = renderApp(TestComponent);
+
+    // When no configure callback is provided, it may be called with just the component
+    // or with undefined as the second parameter
+    expect(createComponent).toHaveBeenCalled();
+    const calls = vi.mocked(createComponent).mock.calls;
+    expect(calls[calls.length - 1][0]).toBe(TestComponent);
+    expect(calls[calls.length - 1][1]).toBeUndefined();
+
+    const teardown = appRender(mockElement, { fusion: mockFusion, env: mockEnv });
+
+    expect(teardown).toBe(mockTeardown);
+  });
+
+  it('should pass component renderer args correctly to renderComponent', () => {
+    const TestComponent = () => <div>Test</div>;
+    const appRender = renderApp(TestComponent);
+
+    const args: ComponentRenderArgs = {
+      fusion: mockFusion,
+      env: mockEnv,
+    };
+
+    appRender(mockElement, args);
+
+    expect(mockRenderFunction).toHaveBeenCalledWith(mockElement, args);
+  });
+});

package/src/apploader/Apploader.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, type ReactElement } from 'react';
 import { useApploader } from './useApploader';
 
 export type ApploaderProps = {
@@ -13,12 +13,12 @@ export type ApploaderProps = {
  *
  * @param { ApploaderProps } 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.
+ * @returns { ReactElement } The rendered component, which displays loading, error, or the embedded app.
  *
  * @example
  * <Apploader appKey="my-app" />
  */
-export const Apploader = ({ appKey }: ApploaderProps): JSX.Element => {
+export const Apploader = ({ appKey }: ApploaderProps): ReactElement => {
   const refWrapp = useRef<HTMLDivElement | null>(null);
   const { loading, error, appRef } = useApploader({ appKey });
 

package/src/http/selectors.ts

@@ -0,0 +1 @@
+export * from '@equinor/fusion-framework-module-http/selectors';

package/src/index.ts

@@ -8,6 +8,8 @@ export type {
   IAppConfigurator,
 } from '@equinor/fusion-framework-app';
 
+export type { Fusion } from '@equinor/fusion-framework-react';
+
 export { AppManifest } from '@equinor/fusion-framework-module-app';
 
 export { useAppModule } from './useAppModule';
@@ -18,11 +20,11 @@ export { makeComponent, ComponentRenderArgs } from './make-component';
 
 export { createLegacyApp } from './create-legacy-app';
 
-// TODO deprecate
-export { renderApp } from './render-app';
 export { createComponent } from './create-component';
+export { renderApp } from './render-app';
 export { renderComponent } from './render-component';
 
 export type { ComponentRenderer } from './create-component';
+export type { RenderTeardown } from './render-component';
 
 export { default } from './render-app';

package/src/make-component.tsx

@@ -55,7 +55,7 @@ export const makeComponent = <
 ): React.LazyExoticComponent<React.ComponentType> =>
   lazy(async () => {
     const init = configureModules<TModules, TRef, TEnv>(configure);
-    const modules = (await init(args)) as unknown as AppModulesInstance;
+    const modules = await init(args);
 
     const { fusion } = args;
 

package/src/render-app.ts

@@ -3,7 +3,13 @@ import { renderComponent, type RenderTeardown } from './render-component';
 
 import type { ComponentRenderArgs } from './create-component';
 
-/** @deprecated */
+/**
+ * Creates a render function for an app component.
+ * Uses React 18's createRoot API via renderComponent.
+ *
+ * @param componentArgs - Arguments to pass to createComponent
+ * @returns A function that renders the app into a DOM element
+ */
 export const renderApp = (...componentArgs: Parameters<typeof createComponent>) => {
   const renderer = renderComponent(createComponent(...componentArgs));
   return (el: HTMLElement, args: ComponentRenderArgs): RenderTeardown => {

package/src/render-component.tsx

@@ -1,46 +1,43 @@
 import { Suspense, StrictMode } from 'react';
 import type { FunctionComponent } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
 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);
-  };
-};
-
+/**
+ * Renders a React component into a DOM element using React 18's createRoot API.
+ *
+ * @param el - The DOM element to render into
+ * @param Component - The React component to render
+ * @returns A teardown function that unmounts the component
+ */
 const render = (el: Element, Component: FunctionComponent): RenderTeardown => {
-  // eslint-disable-next-line react/no-deprecated
-  ReactDOM.render(
+  const root: Root = createRoot(el);
+  root.render(
     <StrictMode>
       <Suspense fallback={<p>loading app</p>}>
         <Component />
       </Suspense>
     </StrictMode>,
-    el,
   );
   return () => {
-    // eslint-disable-next-line react/no-deprecated
-    ReactDOM.unmountComponentAtNode(el);
+    root.unmount();
   };
 };
 
-// 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();
-//     };
-// };
+/**
+ * Creates a render function for a component renderer.
+ * Uses React 18's createRoot API instead of the deprecated ReactDOM.render.
+ *
+ * @param renderer - A function that creates a component from fusion and env
+ * @returns A function that renders the component into a DOM element
+ */
+export const renderComponent = (renderer: ComponentRenderer) => {
+  return (el: HTMLElement, args: ComponentRenderArgs): RenderTeardown => {
+    const Component = renderer(args.fusion, args.env);
+    return render(el, Component);
+  };
+};
 
 export default renderComponent;

package/src/useAppModules.ts

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

package/src/version.ts

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

package/tsconfig.json

@@ -38,5 +38,5 @@
     }
   ],
   "include": ["src/**/*"],
-  "exclude": ["node_modules", "lib"]
+  "exclude": ["node_modules", "lib", "src/__tests__/**/*"]
 }

package/vitest.config.ts

@@ -0,0 +1,20 @@
+import { defineProject } from 'vitest/config';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import { fileURLToPath } from 'node:url';
+import { resolve } from 'node:path';
+
+import { name, version } from './package.json';
+
+export default defineProject({
+  plugins: [
+    tsconfigPaths({
+      root: resolve(fileURLToPath(new URL('../../..', import.meta.url))),
+      projects: [resolve(fileURLToPath(new URL('.', import.meta.url)), 'tsconfig.json')],
+    }),
+  ],
+  test: {
+    include: ['src/__tests__/**'],
+    name: `${name}@${version}`,
+    environment: 'happy-dom',
+  },
+});