migrate vue microfrontend to @module-federation/vite

generators/base-core/generator.ts

@@ -259,7 +259,7 @@ export default class CoreGenerator extends YeomanGenerator<JHipsterGeneratorOpti
       enableGradleEnterprise: false,
       pages: [],
     });
-    return configWithDefaults;
+    return configWithDefaults as ApplicationConfiguration;
   }
 
   /**

generators/client/command.ts

@@ -63,6 +63,14 @@ const command = {
       ],
       scope: 'storage',
     },
+    clientBundler: {
+      cli: {
+        type: String,
+        hide: true,
+      },
+      choices: ['webpack', 'vite'],
+      scope: 'storage',
+    },
     microfrontend: {
       description: 'Enable microfrontend support',
       cli: {

generators/client/files-common.ts

@@ -25,7 +25,7 @@ export const files = {
       templates: ['README.md.jhi.client', '.prettierignore.jhi.client'],
     },
     clientRootTemplatesBlock({
-      condition: generator => generator.microfrontend && (generator.clientFrameworkVue || generator.clientFrameworkReact),
+      condition: generator => generator.microfrontend && generator.clientFrameworkReact,
       templates: ['webpack/webpack.microfrontend.js.jhi'],
     }),
     {

generators/client/generator.ts

@@ -252,10 +252,8 @@ export default class JHipsterClientGenerator extends BaseApplicationGenerator {
           source.addWebpackConfig({
             config: `${conditional}require('./webpack.microfrontend')(config, options, targetOptions)`,
           });
-        } else if (application.clientFrameworkVue || application.clientFrameworkReact) {
+        } else if (application.clientFrameworkReact) {
           source.addWebpackConfig({ config: "require('./webpack.microfrontend')({ serve: options.env.WEBPACK_SERVE })" });
-        } else {
-          throw new Error(`Client framework ${application.clientFramework} doesn't support microfrontends`);
         }
       },
     });

generators/gradle/generators/node-gradle/templates/buildSrc/src/main/groovy/jhipster.node-gradle-conventions.gradle.ejs

@@ -66,22 +66,21 @@ task webapp_test(type: NpmTask) {
     inputs.files("tsconfig.json", "tsconfig.app.json")
         .withPropertyName("tsconfig")
         .withPathSensitivity(PathSensitivity.RELATIVE)
-    <%_ if (microfrontend) { _%>
 
-    def webpackDevFiles = fileTree("<%= CLIENT_WEBPACK_DIR %>")
-    webpackDevFiles.exclude("webpack.prod.js")
-    inputs.files(webpackDevFiles)
-        .withPropertyName("webpack-dir")
+    inputs.files(".postcssrc")
+        .withPropertyName("postcssrc")
         .withPathSensitivity(PathSensitivity.RELATIVE)
-    <%_ } else { _%>
+  <%_ } _%>
+  <%_ if (clientBundlerVite && clientFrameworkBuiltIn) { _%>
 
-    inputs.files("vite.config.ts")
+    inputs.files("vite.config.mts")
         .withPropertyName("vite")
         .withPathSensitivity(PathSensitivity.RELATIVE)
-    <%_ } _%>
+  <%_ } _%>
+  <%_ if (microfrontend && clientFrameworkBuiltIn) { _%>
 
-    inputs.files(".postcssrc")
-        .withPropertyName("postcssrc")
+    inputs.files("module-federation.config.mts")
+        .withPropertyName("module-federation")
         .withPathSensitivity(PathSensitivity.RELATIVE)
   <%_ } _%>
 

generators/maven/generators/frontend-plugin/generator.ts

@@ -40,6 +40,8 @@ export default class FrontendPluginGenerator extends BaseApplicationGenerator {
           clientFrameworkAngular,
           clientFrameworkReact,
           clientFrameworkVue,
+          clientFrameworkBuiltIn,
+          clientBundlerVite,
           microfrontend,
           srcMainWebapp,
         } = application;
@@ -57,10 +59,13 @@ export default class FrontendPluginGenerator extends BaseApplicationGenerator {
           checksumIncludedFiles.push('.postcss.config.js', 'webpack/*.*');
         } else if (clientFrameworkVue) {
           checksumIncludedFiles.push('.postcssrc.js', 'tsconfig.app.json');
+        }
+        if (clientFrameworkBuiltIn && clientFrameworkVue) {
+          if (clientBundlerVite) {
+            checksumIncludedFiles.push('vite.config.mts');
+          }
           if (microfrontend) {
-            checksumIncludedFiles.push('webpack/*.*');
-          } else {
-            checksumIncludedFiles.push('vite.config.ts');
+            checksumIncludedFiles.push('module-federation.config.mts');
           }
         }
         source.addMavenDefinition!({

generators/spring-boot/templates/src/main/java/_package_/config/SecurityConfiguration_imperative.java.ejs

@@ -194,17 +194,13 @@ public class SecurityConfiguration {
 <%_ if (!skipClient) { _%>
                     .requestMatchers(mvc.pattern("/index.html"), mvc.pattern("/*.js"), mvc.pattern("/*.txt"), mvc.pattern("/*.json"), mvc.pattern("/*.map"), mvc.pattern("/*.css")).permitAll()
                     .requestMatchers(mvc.pattern("/*.ico"), mvc.pattern("/*.png"), mvc.pattern("/*.svg"), mvc.pattern("/*.webapp")).permitAll()
-  <%_ if (clientFrameworkVue) { _%>
+  <%_ if (clientBundlerVite) { _%>
                     .requestMatchers(mvc.pattern("/assets/**")).permitAll()
-    <%_ if (microfrontend) { _%>
-                    .requestMatchers(mvc.pattern("/app/**")).permitAll()
-                    .requestMatchers(mvc.pattern("/i18n/**")).permitAll()
-    <%_ } _%>
   <%_ } else { _%>
                     .requestMatchers(mvc.pattern("/app/**")).permitAll()
                     .requestMatchers(mvc.pattern("/i18n/**")).permitAll()
-  <%_ } _%>
                     .requestMatchers(mvc.pattern("/content/**")).permitAll()
+  <%_ } _%>
                     .requestMatchers(mvc.pattern("/swagger-ui/**")).permitAll()
 <%_ } _%>
 <%_ if (authenticationTypeJwt) { _%>
@@ -227,7 +223,11 @@ public class SecurityConfiguration {
 <%_ if (applicationTypeGateway) { _%>
   <%_ if (microfrontend) { _%>
                     // microfrontend resources are loaded by webpack without authentication, they need to be public
+    <%_ if (clientBundlerVite) { _%>
+                    .requestMatchers(mvc.pattern("/services/*/assets/**")).permitAll()
+    <%_ } _%>
                     .requestMatchers(mvc.pattern("/services/*/*.js")).permitAll()
+                    .requestMatchers(mvc.pattern("/services/*/content/*.js")).permitAll()
                     .requestMatchers(mvc.pattern("/services/*/*.txt")).permitAll()
                     .requestMatchers(mvc.pattern("/services/*/*.json")).permitAll()
                     .requestMatchers(mvc.pattern("/services/*/*.js.map")).permitAll()

generators/spring-boot/templates/src/main/java/_package_/config/SecurityConfiguration_reactive.java.ejs

@@ -214,19 +214,18 @@ public class SecurityConfiguration {
     public SecurityWebFilterChain springSecurityFilterChain(ServerHttpSecurity http) {
         http
             .securityMatcher(new NegatedServerWebExchangeMatcher(new OrServerWebExchangeMatcher(
-  <%_ if (clientFrameworkVue) { _%>
                 pathMatchers(
+  <%_ if (clientBundlerRsbuild) { _%>
+                    "/static/**",
+  <%_ } else if (clientBundlerVite) { _%>
                     "/assets/**",
-    <%_ if (microfrontend) { _%>
+  <%_ } else { _%>
                     "/app/**",
                     "/i18n/**",
                     "/content/**",
-    <%_ } _%>
+  <%_ } _%>
                     "/swagger-ui/**"
                 )
-  <%_ } else { _%>
-                pathMatchers("/app/**", "/i18n/**", "/content/**", "/swagger-ui/**")
-  <%_ } _%>
             )))
 <%_ if (!applicationTypeMicroservice) { _%>
             .cors(withDefaults())
@@ -286,7 +285,11 @@ public class SecurityConfiguration {
 <%_ if (applicationTypeGateway) { _%>
   <%_ if (microfrontend) { _%>
                     // microfrontend resources are loaded by webpack without authentication, they need to be public
+    <%_ if (clientBundlerRsbuild) { _%>
+                    .pathMatchers("/services/*/static/**").permitAll()
+    <%_ } _%>
                     .pathMatchers("/services/*/*.js").permitAll()
+                    .pathMatchers("/services/*/content/*.js").permitAll()
                     .pathMatchers("/services/*/*.txt").permitAll()
                     .pathMatchers("/services/*/*.json").permitAll()
                     .pathMatchers("/services/*/*.js.map").permitAll()

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

@@ -1092,9 +1092,6 @@ exports[`generator - vue microservice-jwt-skipUserManagement(false)-withAdminUi(
   "clientRoot/src/main/webapp/app/entities/entities-menu.component.ts": {
     "stateCleared": "modified",
   },
-  "clientRoot/src/main/webapp/app/entities/entities-menu.spec.ts": {
-    "stateCleared": "modified",
-  },
   "clientRoot/src/main/webapp/app/entities/entities-menu.vue": {
     "stateCleared": "modified",
   },
@@ -1395,9 +1392,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",
   },
@@ -1431,22 +1425,10 @@ exports[`generator - vue microservice-jwt-skipUserManagement(false)-withAdminUi(
   "clientRoot/vitest.config.mts": {
     "stateCleared": "modified",
   },
-  "clientRoot/webpack/config.js": {
-    "stateCleared": "modified",
-  },
-  "clientRoot/webpack/vue.utils.js": {
-    "stateCleared": "modified",
-  },
-  "clientRoot/webpack/webpack.common.js": {
-    "stateCleared": "modified",
-  },
-  "clientRoot/webpack/webpack.dev.js": {
+  "module-federation.config.mts": {
     "stateCleared": "modified",
   },
-  "clientRoot/webpack/webpack.microfrontend.js": {
-    "stateCleared": "modified",
-  },
-  "clientRoot/webpack/webpack.prod.js": {
+  "package.json": {
     "stateCleared": "modified",
   },
 }
@@ -1475,6 +1457,9 @@ exports[`generator - vue microservice-oauth2-withAdminUi(true)-skipJhipsterDepen
   "eslint.config.mjs": {
     "stateCleared": "modified",
   },
+  "module-federation.config.mts": {
+    "stateCleared": "modified",
+  },
   "package.json": {
     "stateCleared": "modified",
   },
@@ -1907,24 +1892,6 @@ exports[`generator - vue microservice-oauth2-withAdminUi(true)-skipJhipsterDepen
   "vitest.config.mts": {
     "stateCleared": "modified",
   },
-  "webpack/config.js": {
-    "stateCleared": "modified",
-  },
-  "webpack/vue.utils.js": {
-    "stateCleared": "modified",
-  },
-  "webpack/webpack.common.js": {
-    "stateCleared": "modified",
-  },
-  "webpack/webpack.dev.js": {
-    "stateCleared": "modified",
-  },
-  "webpack/webpack.microfrontend.js": {
-    "stateCleared": "modified",
-  },
-  "webpack/webpack.prod.js": {
-    "stateCleared": "modified",
-  },
 }
 `;
 

generators/vue/files-vue.ts

@@ -37,17 +37,10 @@ export const vueFiles = {
     }),
   ],
   microfrontend: [
-    clientRootTemplatesBlock({
+    {
       condition: generator => generator.microfrontend,
-      templates: [
-        'webpack/config.js',
-        'webpack/webpack.common.js',
-        'webpack/webpack.dev.js',
-        'webpack/webpack.prod.js',
-        'webpack/vue.utils.js',
-        'webpack/webpack.microfrontend.js.jhi.vue',
-      ],
-    }),
+      templates: ['module-federation.config.mts'],
+    },
     {
       condition: generator => generator.microfrontend,
       ...clientApplicationTemplatesBlock(),
@@ -56,14 +49,15 @@ export const vueFiles = {
     {
       condition: generator => generator.microfrontend,
       ...clientSrcTemplatesBlock(),
-      templates: [
-        'microfrontends/entities-menu.component-test.ts',
-        'microfrontends/entities-menu-test.vue',
-        'microfrontends/entities-router-test.ts',
-      ],
+      templates: ['microfrontends/entities-menu.component-test.ts', 'microfrontends/entities-router-test.ts'],
+    },
+    {
+      condition: generator => generator.enableTranslation && generator.microfrontend,
+      ...clientSrcTemplatesBlock(),
+      templates: ['microfrontends/entities-menu-test.vue'],
     },
     {
-      condition: generator => generator.applicationTypeMicroservice,
+      condition: generator => generator.enableTranslation && generator.applicationTypeMicroservice,
       ...clientApplicationTemplatesBlock(),
       templates: ['entities/entities-menu.spec.ts'],
     },

generators/vue/generator.ts

@@ -31,7 +31,6 @@ import {
   getTypescriptKeyType as getTSKeyType,
   generateTestEntityId as getTestEntityId,
 } from '../client/support/index.js';
-import { createNeedleCallback } from '../base/support/index.js';
 import { writeEslintClientRootConfigFile } from '../javascript/generators/eslint/support/tasks.js';
 import { cleanupEntitiesFiles, postWriteEntityFiles, writeEntityFiles } from './entity-files-vue.js';
 import cleanupOldFilesTask from './cleanup.js';
@@ -85,21 +84,8 @@ export default class VueGenerator extends BaseApplicationGenerator {
           webappEnumerationsDir: app => `${app.clientWebappDir}shared/model/enumerations/`,
         });
       },
-      prepareForTemplates({ application, source }) {
+      prepareForTemplates({ application }) {
         application.addPrettierExtensions?.(['html', 'vue', 'css', 'scss']);
-
-        source.addWebpackConfig = args => {
-          const webpackPath = `${application.clientRootDir}webpack/webpack.common.js`;
-          const ignoreNonExisting = this.sharedData.getControl().ignoreNeedlesError && 'Webpack configuration file not found';
-          this.editFile(
-            webpackPath,
-            { ignoreNonExisting },
-            createNeedleCallback({
-              needle: 'jhipster-needle-add-webpack-config',
-              contentToAdd: `,${args.config}`,
-            }),
-          );
-        };
       },
     });
   }
@@ -145,9 +131,19 @@ 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.2': [
+            [
+              application.microfrontend!,
+              'webpack/config.js',
+              'webpack/webpack.common.js',
+              'webpack/webpack.dev.js',
+              'webpack/webpack.prod.js',
+              'webpack/vue.utils.js',
+            ],
+          ],
         });
       },
       cleanupOldFilesTask,
@@ -174,8 +170,17 @@ export default class VueGenerator extends BaseApplicationGenerator {
 
   get postWriting() {
     return this.asPostWritingTaskGroup({
+      addDependencies({ application }) {
+        if (application.microfrontend) {
+          this.packageJson.merge({
+            devDependencies: {
+              '@module-federation/runtime': 'latest',
+              '@module-federation/vite': 'latest',
+            },
+          });
+        }
+      },
       addIndexAsset({ source, application }) {
-        if (application.microfrontend) return;
         source.addExternalResourceToRoot!({
           resource: '<script>const global = globalThis;</script>',
           comment: 'Workaround https://github.com/axios/axios/issues/5622',

generators/vue/support/update-languages.ts

@@ -70,26 +70,9 @@ function updateLanguagesInConfigTask(this: BaseGenerator, { application, control
   );
 }
 
-function updateLanguagesInWebpackTask(this: BaseGenerator, { application, control = {} }: UpdateClientLanguagesTaskParam) {
-  const { clientSrcDir, languages } = application;
-  const { ignoreNeedlesError: ignoreNonExisting } = control;
-  let newContent = 'groupBy: [\n';
-  languages?.forEach(language => {
-    newContent += `          { pattern: './${clientSrcDir}i18n/${language}/*.json', fileName: './i18n/${language}.json' },\n`;
-  });
-  newContent += '          // jhipster-needle-i18n-language-webpack - JHipster will add/remove languages in this array\n        ]';
-
-  this.editFile('webpack/webpack.common.js', { ignoreNonExisting }, content =>
-    content.replace(/groupBy:.*\[([^\]]*jhipster-needle-i18n-language-webpack[^\]]*)\]/g, newContent),
-  );
-}
-
 export default function updateLanguagesTask(this: BaseGenerator, taskParam: UpdateClientLanguagesTaskParam) {
   updateLanguagesInPipeTask.call(this, taskParam);
   updateLanguagesInConfigTask.call(this, taskParam);
-  if (taskParam.application.microfrontend) {
-    updateLanguagesInWebpackTask.call(this, taskParam);
-  }
   updateLanguagesInDayjsConfigurationTask.call(this, taskParam, {
     configurationFile: `${taskParam.application.clientSrcDir}app/shared/config/dayjs.ts`,
     commonjs: true,