@equinor/roma-framework 6.0.1-beta.0 → 6.0.1-beta.10

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@equinor/roma-framework",
-  "version": "6.0.1-beta.0",
+  "version": "6.0.1-beta.10",
   "repository": "https://github.com/equinor/tops-roma",
   "types": "./index.d.ts",
   "private": false,
   "peerDependencies": {
-    "@equinor/eds-core-react": "^0.47.0",
-    "@equinor/eds-icons": "^0.22.0",
-    "@equinor/eds-tokens": "^0.9.2",
+    "@equinor/eds-core-react": "^2.4.0",
+    "@equinor/eds-icons": "^1.3.0",
+    "@equinor/eds-tokens": "^2.2.0",
     "@equinor/fusion-framework": "^8.0.0",
     "@equinor/fusion-framework-app": "^11.0.0",
     "@equinor/fusion-framework-module": "^6.0.0",
@@ -22,10 +22,9 @@
     "@equinor/fusion-framework-react-module": "^4.0.0",
     "@equinor/fusion-framework-react-module-http": "^11.0.0",
     "@equinor/fusion-framework-react-router": "^1.0.2",
-    "@equinor/roma-sse-module": "workspace:*",
+    "@equinor/roma-sse-module": "1.0.0-beta.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-intl": "^10.1.0",
     "react-router-dom": "^7.13.2",
     "rxjs": "^7.8.2",
     "styled-components": "^6.3.11"
@@ -36,13 +35,14 @@
     "@tanstack/react-query-persist-client": "^5.90.24",
     "idb-keyval": "^6.2.2",
     "immer": "^11.0.0",
+    "react-intl": "^10.1.0",
     "is-mergeable-object": "^1.1.1"
   },
   "devDependencies": {
     "@nx/vite": "22.5.4",
     "@testing-library/react": "16.1.0",
     "@vitejs/plugin-react": "^5.1.4",
-    "vite": "^7.3.1",
+    "vite": "^7.3.2",
     "vite-plugin-dts": "^4.5.4"
   },
   "exports": {
@@ -54,6 +54,7 @@
       "types": "./lib/test-utils/roma-cypress-wrapper.d.ts",
       "import": "./cypress.mjs",
       "require": "./cypress.js"
-    }
+    },
+    "./css-variables.css": "./src/css-variables.css"
   }
 }

package/roma-framework.mjs

@@ -5,8 +5,9 @@ import { useState, useEffect, lazy, useRef, createContext, useContext, useMemo }
 import { ModuleProvider } from "@equinor/fusion-framework-react-module";
 import styled, { StyleSheetManager, keyframes } from "styled-components";
 import { EdsProvider, StarProgress, Typography, Card, Button, TopBar, Chip, SideSheet, Menu, Tooltip, Icon, List } from "@equinor/eds-core-react";
-import { E as EmptyError, o as operate, c as createOperatorSubscriber, i as innerFrom, a as identity, b as isFunction, I as IntlProvider, u as useParams, L as Link, B as BehaviorSubject, f as firstValueFrom, g as getDefaultExportFromCjs, d as of, e as from } from "./_commonjsHelpers-CIHTj2Un.mjs";
+import { E as EmptyError, o as operate, c as createOperatorSubscriber, i as innerFrom, a as identity, b as isFunction, u as useParams, L as Link, B as BehaviorSubject, f as firstValueFrom, g as getDefaultExportFromCjs, d as of, e as from } from "./_commonjsHelpers-DKlypwS6.mjs";
 import { QueryClient, QueryClientProvider, useQueryClient, useMutation, useQuery } from "@tanstack/react-query";
+import { IntlProvider } from "react-intl";
 import { useCurrentApp, useApps as useApps$1 } from "@equinor/fusion-framework-react/app";
 import { App } from "@equinor/fusion-framework-module-app/app";
 import { tokens } from "@equinor/eds-tokens";
@@ -32,14 +33,14 @@ const createExtraScopePlugin = (scope) => {
   };
   return plugin;
 };
-const StyleProvider = ({ scope, children }) => {
+const StyleProvider = ({ scope, children, version: version2 }) => {
   const stylisPlugins = [];
   if (scope) {
     const plugin = createExtraScopePlugin(`#${scope}`);
     Object.defineProperty(plugin, "name", { value: `style-scope-${scope}` });
     stylisPlugins.push(plugin);
   }
-  return /* @__PURE__ */ jsx(StyleSheetManager, { stylisPlugins, children: /* @__PURE__ */ jsx("div", { id: scope, children }) });
+  return /* @__PURE__ */ jsx(StyleSheetManager, { stylisPlugins, children: /* @__PURE__ */ jsx("div", { id: scope, "data-roma-version": version2, children }) });
 };
 function lastValueFrom(source, config) {
   return new Promise(function(resolve, reject) {
@@ -196,8 +197,9 @@ const makeComponent = (Component, args, configure2) => lazy(async () => {
     source: Component
   });
   const queryClient = args.query ?? new QueryClient();
+  const version2 = "6.0.1-beta.10";
   return {
-    default: () => /* @__PURE__ */ jsx(FrameworkProvider, { value: fusion, children: /* @__PURE__ */ jsx(IntlProvider, { locale: navigator.language, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(StyleProvider, { scope: `roma-${appKey}`, children: /* @__PURE__ */ jsx(
+    default: () => /* @__PURE__ */ jsx(FrameworkProvider, { value: fusion, children: /* @__PURE__ */ jsx(IntlProvider, { locale: navigator.language, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(StyleProvider, { scope: `roma-${appKey}`, version: version2, children: /* @__PURE__ */ jsx(
       EdsEventProvider,
       {
         portalContainer: `roma-${appKey}`,
@@ -280,6 +282,44 @@ function getAppModule(app, framework) {
   const appModuleScript = appModule.initialize();
   return { appModule, appModuleScript };
 }
+async function loadCssAssets(app, container) {
+  const assets = app.metadata?.assets;
+  if (!assets || assets.length === 0)
+    return () => {
+    };
+  const cssAssets = assets.filter((url) => url.split("?")[0].endsWith(".css"));
+  const injectedStyles = [];
+  const results = await Promise.allSettled(
+    cssAssets.map(async (cssUrl) => {
+      const filename = cssUrl.split("?")[0].split("/").pop() ?? cssUrl;
+      const tag = `${app.appKey}-${filename}`;
+      if (container.querySelector(`style[data-asset="${tag}"]`)) return;
+      const response = await fetch(cssUrl);
+      if (!response.ok) {
+        console.warn(
+          `Failed to load CSS asset: ${cssUrl} (${response.status})`
+        );
+        return;
+      }
+      const cssText = await response.text();
+      const style = document.createElement("style");
+      style.setAttribute("data-asset", tag);
+      style.textContent = `@scope { ${cssText} }`;
+      container.appendChild(style);
+      injectedStyles.push(style);
+    })
+  );
+  for (const result of results) {
+    if (result.status === "rejected") {
+      console.warn("Failed to load CSS asset:", result.reason);
+    }
+  }
+  return () => {
+    for (const style of injectedStyles) {
+      style.remove();
+    }
+  };
+}
 function AppLoader({
   app,
   kind,
@@ -297,15 +337,15 @@ function AppLoader({
       new CustomEvent(eventName, data)
     );
   };
-  function renderApplication(el) {
+  async function renderApplication(el) {
     const { appModule, appModuleScript } = getAppModule(app, framework);
     const [basename] = window.location.pathname.match(
       /\/?apps\/[a-z|-]+(\/)?/g
     ) ?? [""];
-    lastValueFrom(appModuleScript).then((x) => {
+    const cleanup = await lastValueFrom(appModuleScript).then((x) => {
       const script = x.script;
       const render = script.renderApp ?? script.default;
-      render(el, {
+      const cleanup2 = render(el, {
         query: queryClient,
         fusion: framework,
         env: {
@@ -321,8 +361,9 @@ function AppLoader({
       if (kind === "app") {
         setCurrentApp(app.appKey);
       }
+      return cleanup2;
     });
-    return appModule;
+    return { appModule, cleanup };
   }
   useEffect(() => {
     setError(null);
@@ -334,15 +375,41 @@ function AppLoader({
     setLoading(true);
     const el = document.createElement("div");
     ref.current?.appendChild(el);
-    const appModule = renderApplication(el);
+    let cleanupCss = () => {
+      ref.current?.removeChild(
+        document.querySelector("[data-asset]")
+      );
+    };
+    loadCssAssets(app, ref.current).then((cleanup2) => {
+      cleanupCss = cleanup2;
+    });
+    let appModule = null;
+    let cleanup = null;
+    let disposed = false;
+    renderApplication(el).then((r) => {
+      if (disposed) {
+        queueMicrotask(() => {
+          r.cleanup();
+          r.appModule.dispose();
+        });
+        return;
+      }
+      appModule = r.appModule;
+      cleanup = r.cleanup;
+    });
     setLoading(false);
     const currentRef = ref.current;
     return () => {
+      disposed = true;
+      cleanupCss?.();
       try {
         currentRef?.removeChild(el);
       } catch {
       }
-      appModule.dispose();
+      queueMicrotask(() => {
+        if (appModule) appModule.dispose();
+        if (cleanup) cleanup();
+      });
       if (kind === "app") clearCurrentApp();
     };
   }, [app]);