From 223b8035652d210ad544e74a61926ff9c2aadc91 Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Tue, 28 Oct 2025 16:55:03 -0300
Subject: [PATCH 1/4] chore: adjust mf types

---
 src/types/landing.d.ts |  7 -------
 src/types/mf.d.ts      | 12 ++++++++++++
 2 files changed, 12 insertions(+), 7 deletions(-)
 delete mode 100644 src/types/landing.d.ts

diff --git a/src/types/landing.d.ts b/src/types/landing.d.ts
deleted file mode 100644
index 115cdf4..0000000
--- a/src/types/landing.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-empty-object-type */
-declare module "landing/Landing" {
-  import { DefineComponent } from "vue";
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}
diff --git a/src/types/mf.d.ts b/src/types/mf.d.ts
index b33d799..066a427 100644
--- a/src/types/mf.d.ts
+++ b/src/types/mf.d.ts
@@ -1,5 +1,17 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
 declare module "auth/AuthApp" {
   export function mount(el: HTMLElement): () => void;
   const _default: unknown;
   export default _default;
 }
+
+declare module "landing/Landing" {
+  import { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+declare module "catalog/Catalog" {
+  import { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

From 4080da38f8309a933b76c8e9a6ff1c88f5f295fa Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Tue, 28 Oct 2025 17:08:14 -0300
Subject: [PATCH 2/4] feat: add module federation vue bridge

---
 .husky/pre-commit |  1 +
 package-lock.json | 59 +++++++++++++++++++++++++++++++++++++++++++++--
 package.json      |  3 ++-
 vite.config.js    | 19 ++++++++++++---
 4 files changed, 76 insertions(+), 6 deletions(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index e69de29..10da9ff 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+npm run build
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 11007db..28fdebd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,14 @@
 {
   "name": "mod-shell",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mod-shell",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "dependencies": {
+        "@module-federation/bridge-vue3": "^0.21.2",
         "pinia": "^2.0.28",
         "vue": "^3.2.45",
         "vue-router": "^4.5.1"
@@ -1910,6 +1911,60 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@module-federation/bridge-shared": {
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@module-federation/bridge-shared/-/bridge-shared-0.21.2.tgz",
+      "integrity": "sha512-qcpvx6KUgVNHVHuTOPU8e6lgRunxHiB4zqZkpMSb0MA8R+yuJturVZ7bz4Byydqy2ozCJjne/rWMg0Uo/Eh54A==",
+      "license": "MIT"
+    },
+    "node_modules/@module-federation/bridge-vue3": {
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@module-federation/bridge-vue3/-/bridge-vue3-0.21.2.tgz",
+      "integrity": "sha512-Fs1mX/X0Vz7ZXQCsxqobKRrzGvEuYtUyf7YPGvxXXcjrcvpG/lSje7ORXgtx/oXM+g1xyAhg7qOsoo6etHQ7xQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@module-federation/bridge-shared": "0.21.2",
+        "@module-federation/runtime": "0.21.2",
+        "@module-federation/sdk": "0.21.2"
+      },
+      "peerDependencies": {
+        "vue": "=3",
+        "vue-router": "=4"
+      }
+    },
+    "node_modules/@module-federation/error-codes": {
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@module-federation/error-codes/-/error-codes-0.21.2.tgz",
+      "integrity": "sha512-mGbPAAApgjmQUl4J7WAt20aV04a26TyS21GDEpOGXFEQG5FqmZnSJ6FqB8K19HgTKioBT1+fF/Ctl5bGGao/EA==",
+      "license": "MIT"
+    },
+    "node_modules/@module-federation/runtime": {
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@module-federation/runtime/-/runtime-0.21.2.tgz",
+      "integrity": "sha512-97jlOx4RAnAHMBTfgU5FBK6+V/pfT6GNX0YjSf8G+uJ3lFy74Y6kg/BevEkChTGw5waCLAkw/pw4LmntYcNN7g==",
+      "license": "MIT",
+      "dependencies": {
+        "@module-federation/error-codes": "0.21.2",
+        "@module-federation/runtime-core": "0.21.2",
+        "@module-federation/sdk": "0.21.2"
+      }
+    },
+    "node_modules/@module-federation/runtime-core": {
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@module-federation/runtime-core/-/runtime-core-0.21.2.tgz",
+      "integrity": "sha512-LtDnccPxjR8Xqa3daRYr1cH/6vUzK3mQSzgvnfsUm1fXte5syX4ftWw3Eu55VdqNY3yREFRn77AXdu9PfPEZRw==",
+      "license": "MIT",
+      "dependencies": {
+        "@module-federation/error-codes": "0.21.2",
+        "@module-federation/sdk": "0.21.2"
+      }
+    },
+    "node_modules/@module-federation/sdk": {
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@module-federation/sdk/-/sdk-0.21.2.tgz",
+      "integrity": "sha512-t2vHSJ1a9zjg7LLJoEghcytNLzeFCqOat5TbXTav5dgU0xXw82Cf0EfLrxiJL6uUpgbtyvUdqqa2DVAvMPjiiA==",
+      "license": "MIT"
+    },
     "node_modules/@module-federation/vite": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@module-federation/vite/-/vite-1.8.1.tgz",
diff --git a/package.json b/package.json
index 50fe296..058772e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mod-shell",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "private": true,
   "scripts": {
@@ -15,6 +15,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@module-federation/bridge-vue3": "^0.21.2",
     "pinia": "^2.0.28",
     "vue": "^3.2.45",
     "vue-router": "^4.5.1"
diff --git a/vite.config.js b/vite.config.js
index 97aede9..1c2ff8d 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -50,7 +50,20 @@ export default defineConfig(async ({ mode }) => {
         },
         exposes: {},
         filename: "remoteEntry.js",
-        shared: ['vue', 'vue-router', 'pinia'],
+        shared: {
+          vue: {
+            singleton: true,
+            eager: true,
+          },
+          "vue-router": {
+            singleton: true,
+            eager: true,
+          },
+          pinia: {
+            singleton: true,
+            eager: true,
+          },
+        },
       }),
       injectRemoteReactRefresh(env.VITE_REMOTE_AUTH_URL),
     ],
@@ -61,8 +74,8 @@ export default defineConfig(async ({ mode }) => {
         provider: "v8",
         reporter: ["text", "json-summary", "html"],
         include: ["src/**/*.ts", "src/**/*.vue"],
-        exclude: ["src/main.ts"]
-      }
+        exclude: ["src/main.ts"],
+      },
     },
     build: {
       target: "chrome89",

From e06ff9ada15c50a383da32edfd33c9e2a9c13fbc Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Tue, 28 Oct 2025 17:09:57 -0300
Subject: [PATCH 3/4] feat: load Catalog remote with SFC compatibility

---
 src/views/Catalog.vue | 44 +++++++++++++++++++++++++++++--------------
 1 file changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/views/Catalog.vue b/src/views/Catalog.vue
index fa56ac4..77c962d 100644
--- a/src/views/Catalog.vue
+++ b/src/views/Catalog.vue
@@ -1,20 +1,36 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from "vue";
-const Catalog = defineAsyncComponent(
-	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-	// @ts-ignore
-	() => import("catalog/Catalog")
-);
-</script>
-
-<template>
-	<div>
-		<Catalog v-if="!!Catalog" />
+import { shallowRef, onMounted, h, defineComponent } from "vue";
+import { applyDocumentMeta } from "../utils/applyDocumentMeta";
+import { createRemoteAppComponent } from "@module-federation/bridge-vue3";
 
-		<router-link class="btn" to="/player">Player</router-link>
-		<router-link class="btn" to="/">Landing</router-link>
+const innerComp = shallowRef<any>(null);
 
+onMounted(() => {
+  const remoteModule = createRemoteAppComponent({
+    loader: () => import("catalog/Catalog"),
+    asyncComponentOptions: {
+      loadingComponent: defineComponent({
+        name: "LoadingComponent",
+        setup() {
+          return () => h("div", "Loading catalog...");
+        },
+      }),
+    }
+  });
 
-	</div>
+  innerComp.value = defineComponent({
+    name: "CatalogRemoteWrapper",
+    setup() {
+      applyDocumentMeta({
+        title: "Moduflix - Início",
+        description: "Application with Vue.js",
+      });
 
+      return () => h(remoteModule);
+    },
+  });
+});
+</script>
+<template>
+  <component :is="innerComp" v-if="innerComp" />
 </template>
\ No newline at end of file

From 3c88357fdb3beddfbc19157ed2c12b1735d3ba40 Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Tue, 28 Oct 2025 17:20:45 -0300
Subject: [PATCH 4/4] feat: add SFC compatibility to Loading remote

---
 src/routes/loaders/loadLandingRemote.ts | 12 -------
 src/routes/routes.ts                    |  6 ++--
 src/views/Landing.vue                   | 42 +++++++++++++++++++------
 3 files changed, 36 insertions(+), 24 deletions(-)
 delete mode 100644 src/routes/loaders/loadLandingRemote.ts

diff --git a/src/routes/loaders/loadLandingRemote.ts b/src/routes/loaders/loadLandingRemote.ts
deleted file mode 100644
index 2e13de8..0000000
--- a/src/routes/loaders/loadLandingRemote.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { applyDocumentMeta } from "../../utils/applyDocumentMeta";
-
-export async function loadLandingRemote() {
-  const remote = await import("landing/Landing");
-
-  applyDocumentMeta({
-    title: "Moduflix - Landing",
-    description: "Application with Vue.js",
-  });
-
-  return remote.default;
-}
diff --git a/src/routes/routes.ts b/src/routes/routes.ts
index 3f3fbd9..411f05e 100644
--- a/src/routes/routes.ts
+++ b/src/routes/routes.ts
@@ -1,12 +1,12 @@
 import { createRouter, createWebHistory } from "vue-router";
 
 import Auth from "../views/Auth.vue";
-import Catalog from "../views/Catalog.vue";
 import Player from "../views/Player.vue";
-import { loadLandingRemote } from "./loaders/loadLandingRemote";
+import Catalog from "../views/Catalog.vue";
+import Landing from "../views/Landing.vue";
 
 const routes = [
-  { path: "/", component: loadLandingRemote },
+  { path: "/", component: Landing },
   { path: "/auth", component: Auth },
   { path: "/catalog", component: Catalog },
   { path: "/player", component: Player },
diff --git a/src/views/Landing.vue b/src/views/Landing.vue
index c3a0bed..0665dfd 100644
--- a/src/views/Landing.vue
+++ b/src/views/Landing.vue
@@ -1,12 +1,36 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from "vue";
-const Landing = defineAsyncComponent(
-	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-	// @ts-ignore
-	() => import("landing/Landing")
-);
-</script>
+import { shallowRef, onMounted, h, defineComponent } from "vue";
+import { applyDocumentMeta } from "../utils/applyDocumentMeta";
+import { createRemoteAppComponent } from "@module-federation/bridge-vue3";
+
+const innerComp = shallowRef<any>(null);
+
+onMounted(() => {
+	const remoteModule = createRemoteAppComponent({
+		loader: () => import("landing/Landing"),
+		asyncComponentOptions: {
+			loadingComponent: defineComponent({
+				name: "LoadingComponent",
+				setup() {
+					return () => h("div", "Loading landing...");
+				},
+			}),
+		}
+	});
 
+	innerComp.value = defineComponent({
+		name: "LandingRemoteWrapper",
+		setup() {
+			applyDocumentMeta({
+				title: "Moduflix - Apresentação",
+				description: "Application with Vue.js",
+			});
+
+			return () => h(remoteModule);
+		},
+	});
+});
+</script>
 <template>
-	<Landing v-if="!!Landing" />
-</template>
+	<component :is="innerComp" v-if="innerComp" />
+</template>
\ No newline at end of file