vue: switch to @module-federation/vite

jhipster · Oct 7, 2024 · bbcf760 · bbcf760
1 parent 455431f
commit bbcf760
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 75 deletions.
diff --git a/generators/javascript/generators/prettier/templates/.prettierignore.jhi.ejs b/generators/javascript/generators/prettier/templates/.prettierignore.jhi.ejs
@@ -19,5 +19,8 @@
 node_modules
 package-lock.json
 .git
+<%_ if (clientFrameworkVue && microfrontend) { _%>
+'.__mf__temp',
+<%_ } _%>
 
 <&- fragments.render({ join: '\n\n' }) &>
diff --git a/generators/vue/generator.ts b/generators/vue/generator.ts
@@ -205,14 +205,15 @@ export default class VueGenerator extends BaseApplicationGenerator {
         }
       },
       addMicrofrontendDependencies({ application }) {
-        if (!application.microfrontend) return;
-        if (application.clientBundlerVite) {
+        const { applicationTypeGateway, clientBundlerVite, microfrontend } = application;
+        if (!microfrontend) return;
+        if (clientBundlerVite) {
           this.packageJson.merge({
-            dependencies: {
+            dependencies: applicationTypeGateway ? {
               '@module-federation/runtime': null,
-            },
+            } : {},
             devDependencies: {
-              '@originjs/vite-plugin-federation': '1.3.6',
+              '@module-federation/vite': null,
             },
           });
         } else if (application.clientBundlerWebpack) {

diff --git a/generators/vue/resources/package.json b/generators/vue/resources/package.json
@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@eslint/js": "9.12.0",
+    "@module-federation/vite": "1.1.1",
     "@pinia/testing": "0.1.6",
     "@tsconfig/node18": "18.2.4",
     "@types/node": "20.11.25",

diff --git a/generators/vue/templates/eslint.config.js.jhi.vue.ejs b/generators/vue/templates/eslint.config.js.jhi.vue.ejs
@@ -22,7 +22,13 @@ import vue from 'eslint-plugin-vue';
 
 <&_ } -&>
 <&_ if (fragment.configSection) { -&>
-  { ignores: ['<%- this.relativeDir(clientRootDir, clientDistDir) %>', '<%- temporaryDir %>'] },
+  { ignores: [
+<%_ if (microfrontend) { _%>
+    '.__mf__temp',
+<%_ } _%>
+    '<%- this.relativeDir(clientRootDir, clientDistDir) %>',
+    '<%- temporaryDir %>',
+  ] },
   js.configs.recommended,
   ...tseslint.configs.recommended.map(config =>
     config.name === 'typescript-eslint/base' ? config : { ...config, files: [ '**/*.ts', '**/*.tsx', '**/*.mts', '**/*.cts' ] },

diff --git a/generators/vue/templates/vite.config.mts.ejs b/generators/vue/templates/vite.config.mts.ejs
@@ -19,20 +19,12 @@
 import { fileURLToPath, URL } from 'node:url';
 import { normalizePath } from 'vite'
 
-import {
-<%_ if (microfrontend && clientBundlerVite) { _%>
-  mergeConfig,
-<%_ } _%>
-  defineConfig,
-} from 'vite';
+import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
-<%_ if (microfrontend && clientBundlerVite) { _%>
-import federation from "@originjs/vite-plugin-federation";
-
-  <%_ if (applicationTypeGateway) { _%>
-const sharedAppVersion = '0.0.0';
-  <%_ } _%>
+<%_ if (microfrontend) { _%>
+import { federation } from '@module-federation/vite';
+import federationConfig from './module-federation.config.cjs';
 <%_ } _%>
 
 const { getAbsoluteFSPath } = await import('swagger-ui-dist');
@@ -55,13 +47,21 @@ let config = defineConfig({
         },
       ],
     }),
+<%_ if (microfrontend) { _%>
+    federation(federationConfig),
+<%_ } _%>
   ],
   root: fileURLToPath(new URL('./<%- this.relativeDir(clientRootDir, clientSrcDir) %>', import.meta.url)),
   publicDir: fileURLToPath(new URL('./<%- this.relativeDir(clientRootDir, clientDistDir) %>public', import.meta.url)),
   cacheDir: fileURLToPath(new URL('./<%- this.relativeDir(clientRootDir, temporaryDir) %>.vite-cache', import.meta.url)),
   build: {
     emptyOutDir: true,
     outDir: fileURLToPath(new URL('./<%- this.relativeDir(clientRootDir, clientDistDir) %>', import.meta.url)),
+<%_ if (microfrontend) { _%>
+    modulePreload: false,
+    // Allow topLevelAwait by default, Use 'vite-plugin-top-level-await' plugin for lower target
+    target: ['chrome89', 'edge89', 'firefox89', 'safari15'],
+<%_ } _%>
     rollupOptions: {
       input: {
         app: fileURLToPath(new URL('./<%- this.relativeDir(clientRootDir, clientSrcDir) %>index.html', import.meta.url)),
@@ -116,63 +116,6 @@ let config = defineConfig({
   },
 });
 
-<%_ if (microfrontend && clientBundlerVite) { _%>
-config = mergeConfig(config, {
-  build: {
-    modulePreload: false,
-    minify: false,
-    target: ['chrome89', 'edge89', 'firefox89', 'safari15'],
-  },
-  plugins: [
-    federation({
-      name: '<%= lowercaseBaseName %>',
-  <%_ if (applicationTypeGateway) { _%>
-      remotes: {
-    <%_ for (const remote of microfrontends) { _%>
-        '@<%= remote.lowercaseBaseName %>': `/<%= remote.endpointPrefix %>/assets/remoteEntry.js`,
-  <%_ } _%>
-      },
-  <%_ } _%>
-  <%_ if (applicationTypeMicroservice) { _%>
-      exposes: {
-        './entities-router': './<%= this.relativeDir(clientRootDir, clientSrcDir) %>app/router/entities',
-        './entities-menu': './<%= this.relativeDir(clientRootDir, clientSrcDir) %>app/entities/entities-menu.vue',
-      },
-  <%_ } _%>
-      shared: {
-        '@vuelidate/core': {},
-        '@vuelidate/validators': {},
-        axios: {},
-        // 'bootstrap-vue': {},
-        vue: {
-          packagePath: '@vue/compat/dist/vue.esm-bundler.js',
-        },
-        'vue-i18n': {},
-        'vue-router': {},
-        pinia: {},
-        '@/shared/security/authority': {
-          packagePath: './<%= this.relativeDir(clientRootDir, clientSrcDir) %>app/shared/security/authority',
-  <%_ if (applicationTypeGateway) { _%>
-          version: sharedAppVersion,
-  <%_ } _%>
-        },
-        '@/shared/alert/alert.service': {
-          packagePath: './<%= this.relativeDir(clientRootDir, clientSrcDir) %>app/shared/alert/alert.service',
-  <%_ if (applicationTypeGateway) { _%>
-          version: sharedAppVersion,
-  <%_ } _%>
-        },
-        '@/locale/translation.service': {
-          packagePath: './<%= this.relativeDir(clientRootDir, clientSrcDir) %>app/locale/translation.service',
-  <%_ if (applicationTypeGateway) { _%>
-          version: sharedAppVersion,
-  <%_ } _%>
-        },
-      },
-    }),
-  ],
-});
-<%_ } _%>
 // jhipster-needle-add-vite-config - JHipster will add custom config
 
 export default config;