From ea12840c7e4d1e6e27b6b58070f9e90b53cc3247 Mon Sep 17 00:00:00 2001 From: Marcelo Shima Date: Mon, 7 Oct 2024 07:17:27 -0300 Subject: [PATCH] vue: switch to @module-federation/vite --- .../templates/.prettierignore.jhi.ejs | 3 + generators/vue/generator.ts | 11 +-- generators/vue/resources/package.json | 2 + .../templates/eslint.config.js.jhi.vue.ejs | 8 +- generators/vue/templates/vite.config.mts.ejs | 81 +++---------------- 5 files changed, 30 insertions(+), 75 deletions(-) diff --git a/generators/javascript/generators/prettier/templates/.prettierignore.jhi.ejs b/generators/javascript/generators/prettier/templates/.prettierignore.jhi.ejs index 03b20a35aa15..8e07e3d4f48a 100644 --- 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 index 95b5649e3f2a..8aa8bd1509f2 100644 --- 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 index 203af6c7f34b..641b823f3c72 100644 --- a/generators/vue/resources/package.json +++ b/generators/vue/resources/package.json @@ -23,6 +23,8 @@ }, "devDependencies": { "@eslint/js": "9.12.0", + "@module-federation/runtime": "0.6.8", + "@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 index 7a5a36fa442b..5a2b441fd314 100644 --- 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 index 5b53609660c0..48397709bbab 100644 --- 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,6 +47,9 @@ 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)), @@ -62,6 +57,11 @@ let config = defineConfig({ 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;