vue: replace @module-federation/utilities with @module-federation/enh…

…anced/runtime (#27774)

generators/vue/__snapshots__/generator.spec.ts.snap

@@ -1452,15 +1452,6 @@ exports[`generator - vue microservice-jwt-skipUserManagement(false)-withAdminUi(
   "clientRoot/src/main/webapp/manifest.webapp": {
     "stateCleared": "modified",
   },
-  "clientRoot/src/main/webapp/microfrontends/entities-menu-test.vue": {
-    "stateCleared": "modified",
-  },
-  "clientRoot/src/main/webapp/microfrontends/entities-menu.component-test.ts": {
-    "stateCleared": "modified",
-  },
-  "clientRoot/src/main/webapp/microfrontends/entities-router-test.ts": {
-    "stateCleared": "modified",
-  },
   "clientRoot/src/main/webapp/robots.txt": {
     "stateCleared": "modified",
   },
@@ -1975,15 +1966,6 @@ exports[`generator - vue microservice-oauth2-withAdminUi(true)-skipJhipsterDepen
   "src/main/webapp/manifest.webapp": {
     "stateCleared": "modified",
   },
-  "src/main/webapp/microfrontends/entities-menu-test.vue": {
-    "stateCleared": "modified",
-  },
-  "src/main/webapp/microfrontends/entities-menu.component-test.ts": {
-    "stateCleared": "modified",
-  },
-  "src/main/webapp/microfrontends/entities-router-test.ts": {
-    "stateCleared": "modified",
-  },
   "src/main/webapp/robots.txt": {
     "stateCleared": "modified",
   },

generators/vue/files-vue.ts

@@ -56,15 +56,6 @@ export const vueFiles = {
       ...clientApplicationTemplatesBlock(),
       templates: ['index.ts', 'core/error/error-loading.vue'],
     },
-    {
-      condition: generator => generator.microfrontend,
-      ...clientSrcTemplatesBlock(),
-      templates: [
-        'microfrontends/entities-menu.component-test.ts',
-        'microfrontends/entities-menu-test.vue',
-        'microfrontends/entities-router-test.ts',
-      ],
-    },
     {
       condition: generator => generator.applicationTypeMicroservice,
       ...clientApplicationTemplatesBlock(),

generators/vue/generator.ts

@@ -148,9 +148,17 @@ export default class VueGenerator extends BaseApplicationGenerator {
 
   get writing() {
     return this.asWritingTaskGroup({
-      async cleanup({ control }) {
+      async cleanup({ control, application }) {
         await control.cleanupFiles({
           '8.6.1': ['.eslintrc.json', '.eslintignore'],
+          '8.7.4': [
+            [
+              application.microfrontend!,
+              `${application.srcMainWebapp}microfrontends/entities-menu-test.vue`,
+              `${application.srcMainWebapp}microfrontends/entities-menu-component-test.ts`,
+              `${application.srcMainWebapp}microfrontends/entities-router-test.ts`,
+            ],
+          ],
         });
       },
       cleanupOldFilesTask,
@@ -203,7 +211,7 @@ export default class VueGenerator extends BaseApplicationGenerator {
         }
       },
       addMicrofrontendDependencies({ application, source }) {
-        const { applicationTypeGateway, clientBundlerVite, clientBundlerWebpack, enableTranslation, microfrontend } = application;
+        const { clientBundlerVite, clientBundlerWebpack, enableTranslation, microfrontend } = application;
         if (!microfrontend) return;
         if (clientBundlerVite) {
           source.mergeClientPackageJson!({
@@ -212,13 +220,6 @@ export default class VueGenerator extends BaseApplicationGenerator {
             },
           });
         } else if (clientBundlerWebpack) {
-          if (applicationTypeGateway) {
-            source.mergeClientPackageJson!({
-              devDependencies: {
-                '@module-federation/utilities': null,
-              },
-            });
-          }
           source.mergeClientPackageJson!({
             devDependencies: {
               '@module-federation/enhanced': null,

generators/vue/resources/package.json

@@ -23,7 +23,6 @@
   "devDependencies": {
     "@eslint/js": "9.13.0",
     "@module-federation/enhanced": "0.6.14",
-    "@module-federation/utilities": "3.1.20",
     "@pinia/testing": "0.1.6",
     "@tsconfig/node18": "18.2.4",
     "@types/node": "20.11.25",

generators/vue/templates/src/main/webapp/app/core/jhi-navbar/jhi-navbar.component.spec.ts.ejs

@@ -9,6 +9,13 @@ import { useStore } from '@/store';
 import { createRouter } from '@/router';
 import <% if (authenticationTypeOauth2) { %>type <% } %>LoginService from '@/account/login.service';
 
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+
+vitest.mock('@module-federation/enhanced/runtime', () => ({
+  loadRemote: vitest.fn(() => Promise.reject(new Error('Test only'))),
+}));
+<%_ } _%>
+
 type JhiNavbarComponentType = InstanceType<typeof JhiNavbar>;
 
 const pinia = createTestingPinia({ stubActions: false });

generators/vue/templates/src/main/webapp/app/core/jhi-navbar/jhi-navbar.component.ts.ejs

@@ -12,7 +12,7 @@ import EntitiesMenu from '@/entities/entities-menu.vue';
 import { useStore } from '@/store';
 import { useRouter } from 'vue-router';
 <%_ if (applicationTypeGateway && microfrontend) { _%>
-import { importRemote } from '@module-federation/utilities';
+import { loadRemote } from '@module-federation/enhanced/runtime';
 <%_ } _%>
 
 export default defineComponent({
@@ -23,11 +23,8 @@ export default defineComponent({
 <%_ if (applicationTypeGateway && microfrontend) { _%>
   <%_ for (const remote of microfrontends) { _%>
     '<%= remote.lowercaseBaseName %>-menu': defineAsyncComponent(() => {
-      return importRemote<any>({
-        url: `./<%= remote.endpointPrefix %>`,
-        scope: '<%= remote.lowercaseBaseName %>',
-        module: './entities-menu',
-      }).catch(() => import('@/core/error/error-loading.vue'));
+      return loadRemote<any>('<%= remote.lowercaseBaseName %>/entities-menu')
+        .catch(() => import('@/core/error/error-loading.vue'));
     }),
   <%_ } _%>
 <%_ } _%>

generators/vue/templates/src/main/webapp/app/main.ts.ejs

@@ -26,6 +26,21 @@ import TranslationService from '@/locale/translation.service';
 <%_ if (communicationSpringWebsocket) { _%>
 import { useTrackerService } from './admin/tracker/tracker.service';
 <%_ } _%>
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+import { init } from '@module-federation/enhanced/runtime';
+
+init({
+  name: '<%= lowercaseBaseName %>',
+  remotes: [
+  <%_ for (const remote of microfrontends) { _%>
+    {
+      name: '<%= remote.lowercaseBaseName %>',
+      entry: '/<%= remote.endpointPrefix %>/remoteEntry.js',
+    },
+  <%_ } _%>
+  ],
+});
+<%_ } _%>
 
 const pinia = createPinia();
 

generators/vue/templates/src/main/webapp/app/router/index.ts.ejs

@@ -1,6 +1,6 @@
 import { createRouter as createVueRouter, createWebHistory<% if (applicationTypeGateway && microfrontend) { %>, type RouteRecordRaw<% } %> } from 'vue-router';
 <%_ if (applicationTypeGateway && microfrontend) { _%>
-import { importRemote } from '@module-federation/utilities';
+import { loadRemote } from '@module-federation/enhanced/runtime';
 <%_ } _%>
 
 const Home = () => import('@/core/home/home.vue');
@@ -46,11 +46,7 @@ const router = createRouter();
 <%_ if (applicationTypeGateway && microfrontend) { _%>
 export const lazyRoutes = Promise.all([
   <%_ for (const remote of microfrontends) { _%>
-  importRemote<any>({
-    url: `./<%= remote.endpointPrefix %>`,
-    scope: '<%= remote.lowercaseBaseName %>',
-    module: './entities-router',
-  })
+  loadRemote<any>('<%= remote.lowercaseBaseName %>/entities-router')
     .then(<%= remote.lowercaseBaseName %>Router => {
       router.addRoute(<%= remote.lowercaseBaseName %>Router.default as RouteRecordRaw);
       return <%= remote.lowercaseBaseName %>Router.default;

generators/vue/templates/vitest.config.mts.ejs

@@ -32,13 +32,6 @@ export default mergeConfig(
       globals: true,
       environment: 'happy-dom', // happy-dom provides a better performance but doesn't have a default url.
       setupFiles: [fileURLToPath(new URL('./<%= this.relativeDir(clientRootDir, clientSrcDir) %>app/test-setup.ts', import.meta.url))],
-<%_ if (applicationTypeGateway && microfrontend) { _%>
-      alias: {
-  <%_ for (const remote of microfrontends) { _%>
-        '@<%- remote.lowercaseBaseName %>': fileURLToPath(new URL('./<%- clientTestDir %>spec/app/microfrontends/', import.meta.url)),
-  <%_ } _%>
-      },
-<%_ } _%>
       reporters: ['default', 'vitest-sonar-reporter'],
       outputFile: {
         'vitest-sonar-reporter': fileURLToPath(new URL('./<%= this.relativeDir(clientRootDir, temporaryDir) %>test-results/TESTS-results-vitest.xml', import.meta.url)),