Updates to use core components in microfrontends

package.json

@@ -22,8 +22,8 @@
   },
   "devDependencies": {
     "@originjs/vite-plugin-federation": "^1.3.6",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^3.1.0",
     "typescript": "^4.9.3",
     "vite": "^4.2.0"

src/components/CareLivekit.tsx

@@ -1,7 +1,18 @@
-import React from "react";
+import React, { Suspense } from "react";
+const PageTitle = React.lazy(() => import("core/PageTitle"));
 
 const CareLivekit: React.FC = () => {
-  return <div>CareLivekit</div>;
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <div>
+        {PageTitle ? (
+          <PageTitle title="CareLivekit" />
+        ) : (
+          "PageTitle not available"
+        )}
+      </div>
+    </Suspense>
+  );
 };
 
 export default CareLivekit;

src/index.tsx

@@ -3,9 +3,14 @@
 // export { default as manifest } from "./manifest";
 // export { default as routes } from "./routes";
 import React from "react";
+import { PageTitle } from "core";
 
 const CareLivekit: React.FC = () => {
-  return <div>Hello from CareLivekit!</div>;
+  return (
+    <div>
+      <PageTitle title="CareLivekit" />
+    </div>
+  );
 };
 
 export default CareLivekit;

vite.config.ts

@@ -9,18 +9,14 @@ export default defineConfig({
       name: "care_livekit",
       filename: "remoteEntry.js",
       exposes: {
-        // Expose the CareLivekit component
-        "./CareLivekit": {
-          import: "./src/components/CareLivekit.tsx",
-          name: "CareLivekit",
-        },
+        "./CareLivekit": "./src/components/CareLivekit.tsx",
       },
-      shared: {
-        react: {
-          requiredVersion: "^18.0.0",
-        },
-        "react-dom": {
-          requiredVersion: "^18.0.0",
+      remotes: {
+        core: {
+          external:
+            'Promise.resolve(window.location.origin + "/bundle/sharedCore.js")',
+          from: "vite",
+          externalType: "promise",
         },
       },
     }),
@@ -33,16 +29,11 @@ export default defineConfig({
       polyfill: false,
     },
     rollupOptions: {
+      external: ["core/PageTitle"],
       output: {
         format: "esm",
         entryFileNames: "assets/[name].js",
-        minifyInternalExports: false,
       },
     },
   },
-  resolve: {
-    alias: {
-      "@": "/src",
-    },
-  },
 });