@equinor/roma-framework 6.0.1-beta.8 → 6.0.1-beta.9

package/dev-portal/{BAGVG3AX-CYB_E9ev.mjs → BAGVG3AX-CofbVVV8.mjs}

@@ -1,5 +1,5 @@
-import { c as createLocalStorage, T as THEME_PREFERENCE, P as PiPProvider, a as ThemeContext, D as Devtools, Q as QueryDevtoolsContext } from "./NITRNJ62--TsKJch6.mjs";
-import { g as getPreferredColorScheme, c as createMemo, a as createComponent } from "./index-BZgjGlgD.mjs";
+import { c as createLocalStorage, T as THEME_PREFERENCE, P as PiPProvider, a as ThemeContext, D as Devtools, Q as QueryDevtoolsContext } from "./NITRNJ62-DUIbHypW.mjs";
+import { g as getPreferredColorScheme, c as createMemo, a as createComponent } from "./index-DQWkf5T-.mjs";
 var DevtoolsComponent = (props) => {
   const [localStore, setLocalStore] = createLocalStorage({
     prefix: "TanstackQueryDevtools"

package/dev-portal/{KZB72KQG-BdryGQdW.mjs → KZB72KQG-CFetK-yG.mjs}

@@ -1,5 +1,5 @@
-import { c as createLocalStorage, T as THEME_PREFERENCE, P as PiPProvider, a as ThemeContext, b as ParentPanel, C as ContentView, Q as QueryDevtoolsContext } from "./NITRNJ62--TsKJch6.mjs";
-import { g as getPreferredColorScheme, c as createMemo, a as createComponent } from "./index-BZgjGlgD.mjs";
+import { c as createLocalStorage, T as THEME_PREFERENCE, P as PiPProvider, a as ThemeContext, b as ParentPanel, C as ContentView, Q as QueryDevtoolsContext } from "./NITRNJ62-DUIbHypW.mjs";
+import { g as getPreferredColorScheme, c as createMemo, a as createComponent } from "./index-DQWkf5T-.mjs";
 var DevtoolsPanelComponent = (props) => {
   const [localStore, setLocalStore] = createLocalStorage({
     prefix: "TanstackQueryDevtools"

package/dev-portal/{NITRNJ62--TsKJch6.mjs → NITRNJ62-DUIbHypW.mjs}

@@ -1,4 +1,4 @@
-import { b as createSignal, d as createEffect, c as createMemo, a as createComponent, e as createContext, o as onMount, P as Portal, m as memo, S as Show, i as insert, f as createRenderEffect, h as className, j as clearDelegatedEvents, k as delegateEvents, u as useContext, l as onCleanup, s as sortFns, n as mutationSortFns, p as on, q as setAttribute, t as template, r as getSidedProp, v as use, w as convertRemToPixels, x as createUniqueId, y as batch, z as getQueryStatusLabel, A as getMutationStatusColor, B as getQueryStatusColor, C as getQueryStatusColorByLabel, D as displayValue, F as For, E as untrack, $ as $TRACK, G as spread, H as mergeProps, I as createRoot, J as serialize, K as Index, L as updateNestedDataByPath, M as useTransition, N as addEventListener, O as stringify, Q as Match, R as Switch, T as deleteNestedDataByPath, U as splitProps, V as Dynamic, W as createComputed } from "./index-BZgjGlgD.mjs";
+import { b as createSignal, d as createEffect, c as createMemo, a as createComponent, e as createContext, o as onMount, P as Portal, m as memo, S as Show, i as insert, f as createRenderEffect, h as className, j as clearDelegatedEvents, k as delegateEvents, u as useContext, l as onCleanup, s as sortFns, n as mutationSortFns, p as on, q as setAttribute, t as template, r as getSidedProp, v as use, w as convertRemToPixels, x as createUniqueId, y as batch, z as getQueryStatusLabel, A as getMutationStatusColor, B as getQueryStatusColor, C as getQueryStatusColorByLabel, D as displayValue, F as For, E as untrack, $ as $TRACK, G as spread, H as mergeProps, I as createRoot, J as serialize, K as Index, L as updateNestedDataByPath, M as useTransition, N as addEventListener, O as stringify, Q as Match, R as Switch, T as deleteNestedDataByPath, U as splitProps, V as Dynamic, W as createComputed } from "./index-DQWkf5T-.mjs";
 var isNonNullable = (i2) => i2 != null;
 var filterNonNullable = (arr) => arr.filter(isNonNullable);
 function chain(callbacks) {

package/dev-portal/{index-BZgjGlgD.mjs → index-DQWkf5T-.mjs}

@@ -98384,6 +98384,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((url2) => url2.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 style2 = document.createElement("style");
+      style2.setAttribute("data-asset", tag);
+      style2.textContent = `@scope { ${cssText} }`;
+      container.appendChild(style2);
+      injectedStyles.push(style2);
+    })
+  );
+  for (const result of results) {
+    if (result.status === "rejected") {
+      console.warn("Failed to load CSS asset:", result.reason);
+    }
+  }
+  return () => {
+    for (const style2 of injectedStyles) {
+      style2.remove();
+    }
+  };
+}
 function AppLoader({
   app,
   kind,
@@ -98401,15 +98439,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((x2) => {
+    const cleanup = await lastValueFrom(appModuleScript).then((x2) => {
       const script = x2.script;
       const render2 = script.renderApp ?? script.default;
-      render2(el, {
+      const cleanup2 = render2(el, {
         query: queryClient,
         fusion: framework,
         env: {
@@ -98425,8 +98463,9 @@ function AppLoader({
       if (kind === "app") {
         setCurrentApp(app.appKey);
       }
+      return cleanup2;
     });
-    return appModule;
+    return { appModule, cleanup };
   }
   reactExports.useEffect(() => {
     setError(null);
@@ -98438,15 +98477,30 @@ 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;
+    renderApplication(el).then((r) => {
+      appModule = r.appModule;
+      cleanup = r.cleanup;
+    });
     setLoading(false);
     const currentRef = ref.current;
     return () => {
+      cleanupCss?.();
       try {
         currentRef?.removeChild(el);
       } catch {
       }
-      appModule.dispose();
+      if (appModule) appModule.dispose();
+      if (cleanup) cleanup();
       if (kind === "app") clearCurrentApp();
     };
   }, [app]);
@@ -101404,7 +101458,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./BAGVG3AX-CYB_E9ev.mjs"));
+        Devtools = lazy(() => import("./BAGVG3AX-CofbVVV8.mjs"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
@@ -101542,7 +101596,7 @@ var TanstackQueryDevtoolsPanel = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./KZB72KQG-BdryGQdW.mjs"));
+        Devtools = lazy(() => import("./KZB72KQG-CFetK-yG.mjs"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);

package/dev-portal/index.html

@@ -30,7 +30,7 @@
 
     <meta name='viewport' content='width=device-width, initial-scale=1'/>
     <link rel='icon' type='image/x-icon' href='/favicon.ico'/>
-  <script type="module" crossorigin src="/index-BZgjGlgD.mjs"></script>
+  <script type="module" crossorigin src="/index-DQWkf5T-.mjs"></script>
   <link rel="stylesheet" crossorigin href="/roma-framework.css">
 </head>
 <body>

package/dev-portal/lib/dev-portal/AppLoader.d.ts

@@ -1,4 +1,9 @@
 import { AppManifest } from '@equinor/fusion-framework-module-app';
+type AppManifestWithMetadata = AppManifest & {
+    metadata?: {
+        assets?: Array<string>;
+    };
+};
 /**
  * Component that will render a Fusion application
  *
@@ -8,7 +13,8 @@ import { AppManifest } from '@equinor/fusion-framework-module-app';
  * @constructor
  */
 export declare function AppLoader({ app, kind, props, }: {
-    app: AppManifest | null;
+    app: AppManifestWithMetadata | null;
     kind?: 'app' | 'widget';
     props?: Record<string | number, any>;
 }): import("react/jsx-runtime").JSX.Element;
+export {};

package/dev-portal/lib/dev-portal/config/AppClient.d.ts

@@ -1,7 +1,12 @@
-import { AppBuildManifest, AppConfig, AppManifest, IAppClient } from '@equinor/fusion-framework-module-app';
+import { AppBuildManifest, AppConfig, AppManifest as FusionAppManifest, IAppClient } from '@equinor/fusion-framework-module-app';
 import { Observable } from 'rxjs';
 import { IHttpClient } from '@equinor/fusion-framework-module-http';
 import { FetchRequest } from '@equinor/fusion-framework-module-http/client';
+type AppManifest = FusionAppManifest & {
+    metadata?: {
+        assets?: Array<string>;
+    };
+};
 export declare class CustomAppClient implements IAppClient {
     #private;
     private client;
@@ -59,6 +64,9 @@ export declare class CustomAppClient implements IAppClient {
         }[] | null | undefined;
         build?: (AppBuildManifest & import('../../api/roma').BuildDto) | undefined;
         routes?: import('@equinor/fusion-framework-module-app').RouteSchemaEntry[] | null | undefined;
+        metadata?: {
+            assets?: Array<string>;
+        };
         version: import('../../api/roma').VersionDto;
         shortName: string;
         entry: string;
@@ -82,3 +90,4 @@ export declare class CustomAppClient implements IAppClient {
         tag?: string;
     }): Observable<AppBuildManifest>;
 }
+export {};

package/dev-portal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/roma-framework",
-  "version": "6.0.1-beta.8",
+  "version": "6.0.1-beta.9",
   "repository": "https://github.com/equinor/tops-roma",
   "types": "./index.d.ts",
   "private": false,

package/lib/dev-portal/AppLoader.d.ts

@@ -1,4 +1,9 @@
 import { AppManifest } from '@equinor/fusion-framework-module-app';
+type AppManifestWithMetadata = AppManifest & {
+    metadata?: {
+        assets?: Array<string>;
+    };
+};
 /**
  * Component that will render a Fusion application
  *
@@ -8,7 +13,8 @@ import { AppManifest } from '@equinor/fusion-framework-module-app';
  * @constructor
  */
 export declare function AppLoader({ app, kind, props, }: {
-    app: AppManifest | null;
+    app: AppManifestWithMetadata | null;
     kind?: 'app' | 'widget';
     props?: Record<string | number, any>;
 }): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/dev-portal/config/AppClient.d.ts

@@ -1,7 +1,12 @@
-import { AppBuildManifest, AppConfig, AppManifest, IAppClient } from '@equinor/fusion-framework-module-app';
+import { AppBuildManifest, AppConfig, AppManifest as FusionAppManifest, IAppClient } from '@equinor/fusion-framework-module-app';
 import { Observable } from 'rxjs';
 import { IHttpClient } from '@equinor/fusion-framework-module-http';
 import { FetchRequest } from '@equinor/fusion-framework-module-http/client';
+type AppManifest = FusionAppManifest & {
+    metadata?: {
+        assets?: Array<string>;
+    };
+};
 export declare class CustomAppClient implements IAppClient {
     #private;
     private client;
@@ -59,6 +64,9 @@ export declare class CustomAppClient implements IAppClient {
         }[] | null | undefined;
         build?: (AppBuildManifest & import('../../api/roma').BuildDto) | undefined;
         routes?: import('@equinor/fusion-framework-module-app').RouteSchemaEntry[] | null | undefined;
+        metadata?: {
+            assets?: Array<string>;
+        };
         version: import('../../api/roma').VersionDto;
         shortName: string;
         entry: string;
@@ -82,3 +90,4 @@ export declare class CustomAppClient implements IAppClient {
         tag?: string;
     }): Observable<AppBuildManifest>;
 }
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/roma-framework",
-  "version": "6.0.1-beta.8",
+  "version": "6.0.1-beta.9",
   "repository": "https://github.com/equinor/tops-roma",
   "types": "./index.d.ts",
   "private": false,

package/roma-framework.mjs

@@ -197,7 +197,7 @@ const makeComponent = (Component, args, configure2) => lazy(async () => {
     source: Component
   });
   const queryClient = args.query ?? new QueryClient();
-  const version2 = "6.0.1-beta.8";
+  const version2 = "6.0.1-beta.9";
   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}`, version: version2, children: /* @__PURE__ */ jsx(
       EdsEventProvider,
@@ -282,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,
@@ -299,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: {
@@ -323,8 +361,9 @@ function AppLoader({
       if (kind === "app") {
         setCurrentApp(app.appKey);
       }
+      return cleanup2;
     });
-    return appModule;
+    return { appModule, cleanup };
   }
   useEffect(() => {
     setError(null);
@@ -336,15 +375,30 @@ 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;
+    renderApplication(el).then((r) => {
+      appModule = r.appModule;
+      cleanup = r.cleanup;
+    });
     setLoading(false);
     const currentRef = ref.current;
     return () => {
+      cleanupCss?.();
       try {
         currentRef?.removeChild(el);
       } catch {
       }
-      appModule.dispose();
+      if (appModule) appModule.dispose();
+      if (cleanup) cleanup();
       if (kind === "app") clearCurrentApp();
     };
   }, [app]);