feat: render vue SFC components

.husky/pre-commit

@@ -0,0 +1 @@
+npm run build

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"

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 },

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;
+}

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>

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>

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",