From f62d121b158f0cc09eb1bd5051a10ef0c813c506 Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Tue, 4 Nov 2025 01:30:20 -0300
Subject: [PATCH] chore: render player module like SFC component

---
 package-lock.json    |  4 ++--
 package.json         |  2 +-
 src/types/mf.d.ts    |  6 ++++++
 src/views/Player.vue | 46 +++++++++++++++++++++++++++++---------------
 4 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 28fdebd..68db919 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "mod-shell",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mod-shell",
-      "version": "0.2.0",
+      "version": "0.3.0",
       "dependencies": {
         "@module-federation/bridge-vue3": "^0.21.2",
         "pinia": "^2.0.28",
diff --git a/package.json b/package.json
index 058772e..677158a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mod-shell",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "private": true,
   "scripts": {
diff --git a/src/types/mf.d.ts b/src/types/mf.d.ts
index 066a427..ed3ad06 100644
--- a/src/types/mf.d.ts
+++ b/src/types/mf.d.ts
@@ -15,3 +15,9 @@ declare module "catalog/Catalog" {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
+
+declare module "player/Player" {
+  import { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
\ No newline at end of file
diff --git a/src/views/Player.vue b/src/views/Player.vue
index a1b7021..3a88c39 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -1,20 +1,36 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from "vue";
-const Player = defineAsyncComponent(
-	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-	// @ts-ignore
-	() => import("player/Player")
-);
-</script>
-
-<template>
-	<div>
-		<Player v-if="!!Player" />
+import { shallowRef, onMounted, h, defineComponent } from "vue";
+import { applyDocumentMeta } from "../utils/applyDocumentMeta";
+import { createRemoteAppComponent } from "@module-federation/bridge-vue3";
 
-		<router-link class="btn" to="/auth">Auth</router-link>
-		<router-link class="btn" to="/catalog">Catalog</router-link>
+const innerComp = shallowRef<any>(null);
 
+onMounted(() => {
+	const remoteModule = createRemoteAppComponent({
+		loader: () => import("player/Player"),
+		asyncComponentOptions: {
+			loadingComponent: defineComponent({
+				name: "LoadingComponent",
+				setup() {
+					return () => h("div", "Loading player...");
+				},
+			}),
+		}
+	});
 
-	</div>
+	innerComp.value = defineComponent({
+		name: "PlayerRemoteWrapper",
+		setup() {
+			applyDocumentMeta({
+				title: "Moduflix - Player",
+				description: "Application with Vue.js",
+			});
 
-</template>
+			return () => h(remoteModule);
+		},
+	});
+});
+</script>
+<template>
+	<component :is="innerComp" v-if="innerComp" />
+</template>
\ No newline at end of file