refactor: use importmap for micro-frontend apps

app-shell/astro.config.mjs

@@ -7,14 +7,21 @@ export default defineConfig({
     react(),
     solidJs(),
     {
-      name: 'importmap-externals',
+      name: "importmap-externals",
       hooks: {
-        'astro:build:setup': ({ vite, target }) => {
+        "astro:build:setup": ({ vite, target }) => {
-          if(target === 'client') {
+          if (target === "client") {
-            vite.build.rollupOptions["external"] = ["react", "react-dom", "solid-js"];
+            vite.build.rollupOptions["external"] = [
+              "react",
+              "react-dom",
+              "solid-js",
+              "app-cart",
+              "app-heading",
+              "app-products",
+            ];
           }
-        }
+        },
-       }
+      },
     },
   ],
 });

app-shell/src/components/ReactComponent.jsx

@@ -1,15 +1,13 @@
-import MicroFrontendA from "http://localhost:7100/bundle.js";
+import Cart from "app-cart";
-import MicroFrontendB from "http://localhost:7200/bundle.js";
+import Heading from "app-heading";
 
 const ReactComponent = (props) => {
   const { title } = props;
 
-  console.log(">>> title", title);
-
   return (
     <>
-      <MicroFrontendB title={title} />
+      <Heading title={title} />
-      <MicroFrontendA />
+      <Cart />
     </>
   );
 };

app-shell/src/components/SolidComponent.jsx

@@ -1,9 +1,9 @@
-import MicroFrontendC from "http://localhost:7300/bundle.js";
+import Products from "app-products";
 
 function App() {
   return (
     <>
-      <MicroFrontendC />
+      <Products />
     </>
   );
 }

app-shell/src/pages/index.astro

@@ -13,6 +13,9 @@ const appName = 'Scalable Shoe Shop'
     <script type="importmap">
     {
       "imports": {
+        "app-cart": "http://localhost:7100/bundle.js",
+        "app-heading": "http://localhost:7200/bundle.js",
+        "app-products": "http://localhost:7300/bundle.js",
         "react": "https://esm.sh/stable/react@18.2.0/es2022/react.mjs",
         "react-dom": "https://esm.sh/v135/react-dom@18.2.0/es2022/react-dom.mjs",
         "solid-js": "https://esm.sh/stable/solid-js@1.8.11/es2022/solid-js.mjs"