Update packages & fix extension loading bug with CDN

Author: Shellishack

mobile/android/app/src/main/AndroidManifest.xml

@@ -1,12 +1,14 @@
-<?xml version="1.0" encoding="utf-8" ?>
+<?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
     <application
         android:allowBackup="true"
         android:icon="@mipmap/ic_launcher"
         android:label="@string/app_name"
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
-        android:theme="@style/AppTheme">
+        android:theme="@style/AppTheme"
+        android:networkSecurityConfig="@xml/network_security_config"
+    >
         <activity
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
             android:name=".MainActivity"
@@ -25,7 +27,8 @@
             android:authorities="${applicationId}.fileprovider"
             android:exported="false"
             android:grantUriPermissions="true">
-            <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths" />
+            <meta-data android:name="android.support.FILE_PROVIDER_PATHS"
+                android:resource="@xml/file_paths" />
         </provider>
     </application>
 
@@ -39,4 +42,4 @@
     <!-- Storage -->
     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
-</manifest>
+</manifest>

mobile/android/app/src/main/res/xml/network_security_config.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<network-security-config>
+    <domain-config cleartextTrafficPermitted="true">
+        <domain includeSubdomains="true">localhost</domain>
+    </domain-config>
+</network-security-config>

package-lock.json

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 import { createRoot, Root } from "react-dom/client";
-import { loadRemote, preloadRemote } from "@module-federation/runtime";
+import { loadRemote } from "@module-federation/runtime";
 import React from "react";
 
 export default function ExtensionLoader({
@@ -16,7 +16,7 @@ export default function ExtensionLoader({
   const rootRef = useRef<Root | null>(null);
 
   useEffect(() => {
-    function renderExtension(LoadedExtension: any) {
+    async function renderExtension(LoadedExtension: any) {
       if (iframeRef.current) {
         const iframe = iframeRef.current;
         const iframeDoc = iframe.contentWindow?.document;
@@ -29,10 +29,25 @@ export default function ExtensionLoader({
             const root = createRoot(rootElement, {});
             rootRef.current = root;
             // Inject extension global styles into iframe
-            const link = iframeDoc.createElement("link");
-            link.rel = "stylesheet";
-            link.href = `${remoteOrigin}/${moduleId}/${moduleVersion}/__federation_expose_main.globals.css`;
-            iframeDoc.head.appendChild(link);
+            // not always named this, especially in production build
+
+            const manifestUri = `${remoteOrigin}/${moduleId}/${moduleVersion}/mf-manifest.json`;
+            const manifest = await fetch(manifestUri).then((res) => res.json());
+            console.log("Manifest", manifest);
+            const cssFiles = manifest.exposes[0].assets.css.sync as string[];
+
+            for (const cssFile of cssFiles) {
+              if (cssFile.endsWith(".css")) {
+                // Need to make sure CDN returns the correct MIME type for CSS files (e.g. text/css);
+                // otherwise, the CSS file will not be loaded in the iframe.
+                // On local dev server, webpack dev handles MIME types automatically, so this is not an issue.
+                const link = iframeDoc.createElement("link");
+                link.rel = "stylesheet";
+                link.href = `${remoteOrigin}/${moduleId}/${moduleVersion}/${cssFile}`;
+                iframeDoc.head.appendChild(link);
+              }
+            }
+
             root.render(<LoadedExtension />);
           }
         }

web/components/misc/extension-loader.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import Image from "next/image";
 
 export default function Icon({
   name,
@@ -25,55 +24,33 @@ export default function Icon({
   }
   if (name && uri) {
     throw new Error(
-      "Icon component requires either a name or a uri prop, not both.",
+      "Icon component requires either a name or a uri prop, not both."
     );
   }
 
   if (name) {
     return (
-      <span
-        className={
-          `material-icons${variant ? "-" + variant : ""}` +
-          (className ? " " + className : "")
-        }
-      >
-        {name}
-      </span>
+      <div className="flex justify-center items-center w-full h-full">
+        <span
+          className={
+            `material-icons${variant ? "-" + variant : ""}` +
+            (className ? " " + className : "")
+          }
+        >
+          {name}
+        </span>
+      </div>
     );
   }
 
   if (!isThemed) {
     const iconUri = uri + extension;
-    return (
-      <Image
-        src={iconUri}
-        alt="icon"
-        width={24}
-        height={24}
-        className={className}
-      />
-    );
+    return <img src={iconUri} alt="icon" className={"h-6 w-6 " + className} />;
   } else if (resolvedTheme === "dark") {
     const darkUri = uri + "-dark" + extension;
-    return (
-      <Image
-        src={darkUri}
-        alt="icon"
-        width={24}
-        height={24}
-        className={className}
-      />
-    );
+    return <img src={darkUri} alt="icon" className={"h-6 w-6 " + className} />;
   }
 
   const lightUri = uri + "-light" + extension;
-  return (
-    <Image
-      src={lightUri}
-      alt="icon"
-      width={24}
-      height={24}
-      className={className}
-    />
-  );
+  return <img src={lightUri} alt="icon" className={"h-6 w-6 " + className} />;
 }

web/components/misc/icon.tsx

@@ -365,6 +365,7 @@ function ExtensionPreview({
         </ContextMenu>
       </div>
       <p className="text-center">{extension.config.id}</p>
+      <p className="text-center">{extension.config.version}</p>
     </div>
   );
 }

web/components/modals/extension-modal.tsx

@@ -6,7 +6,7 @@ import { ReactNode } from "react";
 import ReactDOM from "react-dom";
 import { EditorContext } from "./editor-context-provider";
 
-init({
+const host = init({
   name: "pulse_editor",
   remotes: [],
   shared: {
@@ -64,6 +64,7 @@ export default function RemoteExtensionProvider({
 
     // TODO: Use mf-manifest.json to get the css file name
     const pattern = /\.css/;
+    // CSS from Pulse Editor itself
     const trustedOrigins = ["http://localhost:3000"];
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {

web/components/providers/remote-extension-provider.tsx

@@ -37,12 +37,12 @@
       "react-dom": "^19.1.0",
       "react-hot-toast": "^2.5.2",
       "react-responsive": "^10.0.1",
-      "react-spinners": "^0.16.1",
+      "react-spinners": "^0.17.0",
       "swr": "^2.3.3",
       "tesseract.js": "^6.0.1"
    },
    "devDependencies": {
-      "@module-federation/runtime": "^0.12.0",
+      "@module-federation/runtime": "^0.13.0",
       "@tailwindcss/postcss": "^4.1.4",
       "@types/node": "^22",
       "@types/react": "^19",