refactor(VueLoader): convert load method to async/await

add route example vue-page

Author: duynndu

README.md

@@ -11,17 +11,6 @@ Ensure you have initialized the Vue module before use.
 
 ---
 
-## 🛣️ Route Configuration
-
-When using with routing, you need to **initialize the Vue module** before loading the Angular component.
-
-```typescript
-{
-  path: '',
-  loadComponent: async () =>
-    VueLoader.initVueModule().then(() => Home),
-}
-```
 ## 💡 Example
 ```typescript
 import { Component, ViewChild } from '@angular/core';

projects/shared/types/vue-entry.interface.ts

@@ -1,5 +1,6 @@
 
 export interface VueModule {
-  createPreview: ()=> void;
+  createPreview: ()=> void; // Function that creates and returns a Vue instance
+  createVueApp: ()=> void;
   [key: string]: any;
 }

projects/shell/src/app/app.html

@@ -9,6 +9,11 @@ <h3 class="logo">Angular Microfrontends</h3>
           Home
         </a>
       </li>
+      <li>
+        <a class="nav-link" routerLink="/vue-page" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
+          Vue page
+        </a>
+      </li>
       <li>
         <a class="nav-link" routerLink="/first" routerLinkActive="active">
           First MF

projects/shell/src/app/app.routes.ts

@@ -1,12 +1,26 @@
 import { Routes } from '@angular/router';
 import { loadRemoteModule } from '@angular-architects/native-federation';
+import { loadRemoteModule as loadRemoteModuleCustom } from 'shared/helpers';
 import { Home } from './pages/home/home';
 import { VueLoader } from './services/vue-loader';
+import { createVueWrapperComponent } from '../helpers';
+import { environment } from '../environments/environment';
+import { VueModule } from 'shared/types';
 
 export const routes: Routes = [
   {
     path: '',
-    loadComponent: async () => VueLoader.initVueModule().then((_) => Home),
+    component: Home,
+  },
+  {
+    path: 'vue-page',
+    loadComponent: () =>
+      loadRemoteModuleCustom({
+        remoteEntry: environment.customRemotes.templateEditor,
+        exposedModule: './VueEntry',
+      }).then((m: VueModule) =>
+        createVueWrapperComponent(m.createVueApp)
+      ),
   },
   {
     path: 'first',

projects/shell/src/app/components/template-editor/template-editor.ts

@@ -20,8 +20,8 @@ export class TemplateEditor implements OnInit, OnChanges, OnDestroy {
 
   constructor(private vueLoader: VueLoader) {}
 
-  ngOnInit(): void {
-    this.app = this.vueLoader.createPreview();
+  async ngOnInit() {
+    this.app = await this.vueLoader.createPreview();
     this.vm = this.app.mount('#template-editor');
     this.vm.data = this.data;
     this.vm.template = this.template;

projects/shell/src/app/pages/home/home.ts

@@ -9,7 +9,6 @@ import { FormsModule } from '@angular/forms';
   styleUrl: './home.scss'
 })
 export class Home{
-  @ViewChild(TemplateEditor) templateEditor!: TemplateEditor;
   template = `<PageA4 style="padding: 3mm 15mm 3mm 15mm;">
   <div>{{ data.name }}</div>
   <p>Tuổi: {{ data.age }}</p>

projects/shell/src/app/services/vue-loader.ts

@@ -4,29 +4,27 @@ import { environment } from '../../environments/environment';
 import { VueModule } from 'shared/types';
 @Injectable({ providedIn: 'root' })
 export class VueLoader {
-  static vueModule: VueModule | null = null;
-  static async initVueModule() {
-    if (this.vueModule) return;
+  module: VueModule | null = null;
+  private async _initVueModule() {
+    if (this.module) return;
     try {
-      this.vueModule = await loadRemoteModule({
+      this.module = await loadRemoteModule({
         remoteEntry: environment.customRemotes.templateEditor,
         exposedModule: './VueEntry',
       });
     } catch (error) {
       console.error('[VueLoader] Failed to load Vue remote module:', error);
-      this.vueModule = null;
+      this.module = null;
     }
   }
-  get module() {
-    return VueLoader.vueModule;
-  }
 
-  createPreview() {
+  async createPreview() {
+    await this._initVueModule();
     try {
       if (!this.module?.createPreview) {
         throw new Error('Vue module does not export createPreview.');
       }
-      return this.module?.createPreview();
+      return this.module.createPreview();
     } catch(error) {
       console.log(error);
       return null;

projects/shell/src/environments/environment.ts

@@ -2,8 +2,10 @@ export const environment = {
   production: false,
   customRemotes: {
     templateEditor: 'http://localhost:4202/assets/remoteEntry.js',
+    // templateEditor: 'https://duynndu.github.io/mfe-angular/template-editor/assets/remoteEntry.js'
   },
   federationRemotes: {
-    firstMf: "http://localhost:4201/remoteEntry.json",
+    // firstMf: "http://localhost:4201/remoteEntry.json",
+    firstMf: "https://duynndu.github.io/mfe-angular/first-mf/remoteEntry.json"
   }
 };

projects/shell/src/helpers/index.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+
+// A helper function to create an Angular component that wraps a Vue component
+export function createVueWrapperComponent(createVueInstance: Function, props: any = {}) {
+  @Component({
+    template: '<div id="vueContainer"></div>'
+  })
+  class VueWrapperComponent implements OnInit, OnDestroy {
+    private vueApp: any;
+    private vm: any;
+
+    ngOnInit() {
+      this.vueApp = createVueInstance('#vueContainer');
+      this.vm = this.vueApp.mount('#vueContainer');
+      Object.entries(props).forEach(([key, value]) => {
+        this.vm[key] = value;
+      });
+    }
+
+    ngOnDestroy() {
+      this.vueApp?.unmount();
+    }
+  }
+  return VueWrapperComponent;
+}

projects/template-editor/src/App.vue

@@ -1,41 +1,28 @@
+<script setup lang="ts">
+</script>
+
 <template>
-  <Preview v-model:template="template" :data="data"/>
-  <!-- <Codemirror v-model:value="template" :options="{ mode: 'text/html', theme: 'default', tabSize: 2 }" height="400px" :border="true" /> -->
+  <div style="height: 100vh; display: flex; justify-content: center; align-items: center;">
+    <a href="https://vite.dev" target="_blank">
+      <img src="./assets/vite.svg" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://vuejs.org/" target="_blank">
+      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
+    </a>
+  </div>
 </template>
 
-<script lang="ts">
-import Preview from './components/preview/Preview.vue';
-import "codemirror/mode/htmlmixed/htmlmixed.js"
-import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
-
-export default {
-  name: 'App',
-  components: { Preview },
-  data() {
-    return {
-      data: { name: 'Nguyen Van A', age: "30" },
-      template: `<PageA4 style="padding: 3mm 15mm 3mm 15mm;">
-  <div>{{ data.name }}</div>
-  <p>Tuổi: {{ data.age }}</p>
-  <Textarea
-    v-model="data.name"
-    label="Họ và tên:"
-    :line="true"
-    :suffix="{ length: 1, char: '❤️' }"
-  />
-  <Textarea
-    v-model="data.age"
-    label="Tuổi:"
-    :line="true"
-  />
-  <InputOTP
-    v-model="data.age"
-    :maskLength="[1,1,1]"
-    pad-start="0"
-  />
-
-</PageA4>`
-    }
-  }
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
 }
-</script>
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>