From 8ddf7a1f0239e7641a62355511a97ffc656a0354 Mon Sep 17 00:00:00 2001 From: Marcelo Shima Date: Mon, 7 Oct 2024 14:20:02 -0300 Subject: [PATCH] vue: adjusts for client bundler (#27515) --- generators/client/files-common.ts | 3 +- .../vue/__snapshots__/generator.spec.ts.snap | 9 +++ generators/vue/generator.ts | 67 +++++++++++++++++ generators/vue/templates/package.json.ejs | 72 +++---------------- 4 files changed, 88 insertions(+), 63 deletions(-) diff --git a/generators/client/files-common.ts b/generators/client/files-common.ts index 5f975616225d..f27e23e2d8db 100644 --- a/generators/client/files-common.ts +++ b/generators/client/files-common.ts @@ -25,7 +25,8 @@ 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.clientBundlerWebpack && (generator.clientFrameworkVue || generator.clientFrameworkReact), templates: ['webpack/webpack.microfrontend.js.jhi'], }), { diff --git a/generators/vue/__snapshots__/generator.spec.ts.snap b/generators/vue/__snapshots__/generator.spec.ts.snap index 565f6e264697..978209a6225e 100644 --- a/generators/vue/__snapshots__/generator.spec.ts.snap +++ b/generators/vue/__snapshots__/generator.spec.ts.snap @@ -449,6 +449,9 @@ exports[`generator - vue gateway-jwt-skipUserManagement(true)-withAdminUi(false) "clientRoot/vitest.config.mts": { "stateCleared": "modified", }, + "package.json": { + "stateCleared": "modified", + }, } `; @@ -973,6 +976,9 @@ exports[`generator - vue gateway-oauth2-withAdminUi(true)-skipJhipsterDependenci "clientRoot/vitest.config.mts": { "stateCleared": "modified", }, + "package.json": { + "stateCleared": "modified", + }, } `; @@ -1452,6 +1458,9 @@ exports[`generator - vue microservice-jwt-skipUserManagement(false)-withAdminUi( "clientRoot/webpack/webpack.prod.js": { "stateCleared": "modified", }, + "package.json": { + "stateCleared": "modified", + }, } `; diff --git a/generators/vue/generator.ts b/generators/vue/generator.ts index 3ed946b6b984..c86fa58f65a0 100644 --- a/generators/vue/generator.ts +++ b/generators/vue/generator.ts @@ -177,6 +177,73 @@ export default class VueGenerator extends BaseApplicationGenerator { get postWriting() { return this.asPostWritingTaskGroup({ + addPackageJsonScripts({ application }) { + const { clientBundlerVite, clientBundlerWebpack, clientPackageManager, prettierExtensions } = application; + if (clientBundlerVite) { + this.packageJson.merge({ + scripts: { + 'webapp:build:dev': `${clientPackageManager} run vite-build`, + 'webapp:build:prod': `${clientPackageManager} run vite-build`, + 'webapp:dev': `${clientPackageManager} run vite-serve`, + 'webapp:serve': `${clientPackageManager} run vite-serve`, + 'vite-serve': 'vite', + 'vite-build': 'vite build', + }, + }); + } else if (clientBundlerWebpack) { + this.packageJson.merge({ + scripts: { + 'prettier:check': `prettier --check "{,src/**/,webpack/,.blueprint/**/}*.{${prettierExtensions}}"`, + 'prettier:format': `prettier --write "{,src/**/,webpack/,.blueprint/**/}*.{${prettierExtensions}}"`, + 'webapp:build:dev': `${clientPackageManager} run webpack -- --mode development --env stats=minimal`, + 'webapp:build:prod': `${clientPackageManager} run webpack -- --mode production --env stats=minimal`, + 'webapp:dev': `${clientPackageManager} run webpack-dev-server -- --mode development --env stats=normal`, + 'webpack-dev-server': 'webpack serve --config webpack/webpack.common.js', + webpack: 'webpack --config webpack/webpack.common.js', + }, + }); + } + }, + addMicrofrontendDependencies({ application }) { + if (!application.microfrontend) return; + if (application.clientBundlerVite) { + this.packageJson.merge({ + devDependencies: { + '@originjs/vite-plugin-federation': '1.3.6', + }, + }); + } else if (application.clientBundlerWebpack) { + this.packageJson.merge({ + devDependencies: { + '@module-federation/utilities': null, + 'browser-sync-webpack-plugin': null, + 'copy-webpack-plugin': null, + 'css-loader': null, + 'css-minimizer-webpack-plugin': null, + 'html-webpack-plugin': null, + 'mini-css-extract-plugin': null, + 'postcss-loader': null, + 'sass-loader': null, + 'terser-webpack-plugin': null, + 'ts-loader': null, + 'vue-loader': null, + 'vue-style-loader': null, + webpack: null, + 'webpack-bundle-analyzer': null, + 'webpack-cli': null, + 'webpack-dev-server': null, + 'webpack-merge': null, + 'workbox-webpack-plugin': null, + ...(application.enableTranslation + ? { + 'folder-hash': null, + 'merge-jsons-webpack-plugin': null, + } + : {}), + }, + }); + } + }, addIndexAsset({ source, application }) { if (!application.clientBundlerVite) return; source.addExternalResourceToRoot!({ diff --git a/generators/vue/templates/package.json.ejs b/generators/vue/templates/package.json.ejs index df22437b7b14..acfa52300c3c 100644 --- a/generators/vue/templates/package.json.ejs +++ b/generators/vue/templates/package.json.ejs @@ -55,36 +55,6 @@ "vue-router": "<%= nodeDependencies['vue-router'] %>" }, "devDependencies": { -<%_ if (applicationTypeGateway && microfrontend) { _%> - "@module-federation/utilities": "<%= nodeDependencies['@module-federation/utilities'] %>", -<%_ } _%> -<%_ if (microfrontend) { _%> - <%_ if (clientBundlerVite) { _%> - "@originjs/vite-plugin-federation": "1.3.6", - <%_ } _%> - "browser-sync-webpack-plugin": "<%= nodeDependencies['browser-sync-webpack-plugin'] %>", - "copy-webpack-plugin": "<%= nodeDependencies['copy-webpack-plugin'] %>", - "css-loader": "<%= nodeDependencies['css-loader'] %>", - "css-minimizer-webpack-plugin": "<%= nodeDependencies['css-minimizer-webpack-plugin'] %>", - "html-webpack-plugin": "<%= nodeDependencies['html-webpack-plugin'] %>", - <%_ if (enableTranslation) { _%> - "folder-hash": "<%= nodeDependencies['folder-hash'] %>", - "merge-jsons-webpack-plugin": "<%= nodeDependencies['merge-jsons-webpack-plugin'] %>", - <%_ } _%> - "mini-css-extract-plugin": "<%= nodeDependencies['mini-css-extract-plugin'] %>", - "postcss-loader": "<%= nodeDependencies['postcss-loader'] %>", - "sass-loader": "<%= nodeDependencies['sass-loader'] %>", - "terser-webpack-plugin": "<%= nodeDependencies['terser-webpack-plugin'] %>", - "ts-loader": "<%= nodeDependencies['ts-loader'] %>", - "vue-loader": "<%= nodeDependencies['vue-loader'] %>", - "vue-style-loader": "<%= nodeDependencies['vue-style-loader'] %>", - "webpack": "<%= nodeDependencies['webpack'] %>", - "webpack-bundle-analyzer": "<%= nodeDependencies['webpack-bundle-analyzer'] %>", - "webpack-cli": "<%= nodeDependencies['webpack-cli'] %>", - "webpack-dev-server": "<%= nodeDependencies['webpack-dev-server'] %>", - "webpack-merge": "<%= nodeDependencies['webpack-merge'] %>", - "workbox-webpack-plugin": "<%= nodeDependencies['workbox-webpack-plugin'] %>", -<%_ } _%> "@eslint/js": null, "@pinia/testing": "<%= nodeDependencies['@pinia/testing'] %>", "@types/node": "<%= nodeDependencies['@types/node'] %>", @@ -127,48 +97,26 @@ "default_environment": "prod" }, "scripts": { -<%_ if (microfrontend) { %> - "prettier:check": "prettier --check \"{,src/**/,webpack/,.blueprint/**/}*.{<%= prettierExtensions %>}\"", - "prettier:format": "prettier --write \"{,src/**/,webpack/,.blueprint/**/}*.{<%= prettierExtensions %>}\"", -<%_ } else { %> - "prettier:check": "prettier --check \"{,src/**/,.blueprint/**/}*.{<%= prettierExtensions %>}\"", - "prettier:format": "prettier --write \"{,src/**/,.blueprint/**/}*.{<%= prettierExtensions %>}\"", -<%_ } %> - "lint": "eslint .", - "lint:fix": "eslint . --fix", + "build": "<%= clientPackageManager %> run webapp:prod --", + "build-watch": "concurrently 'npm run webapp:build:dev -- --watch'<% if(!skipServer) { %> npm:backend:start<% } %>", "cleanup": "rimraf <%= this.relativeDir(clientRootDir, temporaryDir) %>", "clean-www": "rimraf <%= this.relativeDir(clientRootDir, clientDistDir) %>", + "lint": "eslint .", + "lint:fix": "eslint . --fix", + "prettier:check": "prettier --check \"{,src/**/,.blueprint/**/}*.{<%= prettierExtensions %>}\"", + "prettier:format": "prettier --write \"{,src/**/,.blueprint/**/}*.{<%= prettierExtensions %>}\"", + "serve": "<%= clientPackageManager %> run start --", "start": "<%= clientPackageManager %> run webapp:dev --", "start-tls": "<%= clientPackageManager %> run webapp:dev -- --env.tls", - "serve": "<%= clientPackageManager %> run start --", - "build": "<%= clientPackageManager %> run webapp:prod --", - "build-watch": "concurrently 'npm run webapp:build:dev -- --watch'<% if(!skipServer) { %> npm:backend:start<% } %>", - "vitest-run": "vitest --run --coverage", - "vitest": "vitest", "pretest": "<%= clientPackageManager %> run lint", "test": "<%= clientPackageManager %> run vitest-run --", "test:watch": "<%= clientPackageManager %> run vitest", + "vitest-run": "vitest --run --coverage", + "vitest": "vitest", "watch": "concurrently npm:start<% if(!skipServer) { %> npm:backend:start<% } %>", "webapp:build": "<%= clientPackageManager %> run clean-www && <%= clientPackageManager %> run webapp:build:dev --", -<%_ if (microfrontend) { %> - "webapp:build:dev": "<%= clientPackageManager %> run webpack -- --mode development --env stats=minimal", - "webapp:build:prod": "<%= clientPackageManager %> run webpack -- --mode production --env stats=minimal", - "webapp:dev": "<%= clientPackageManager %> run webpack-dev-server -- --mode development --env stats=normal", -<%_ } else { %> - "webapp:build:dev": "<%= clientPackageManager %> run vite-build", - "webapp:build:prod": "<%= clientPackageManager %> run vite-build", - "webapp:dev": "<%= clientPackageManager %> run vite-serve", - "webapp:serve": "<%= clientPackageManager %> run vite-serve", -<%_ } %> "webapp:prod": "<%= clientPackageManager %> run clean-www && <%= clientPackageManager %> run webapp:build:prod --", - "webapp:test": "<%= clientPackageManager %> run test --", -<%_ if (microfrontend) { %> - "webpack-dev-server": "webpack serve --config webpack/webpack.common.js", - "webpack": "webpack --config webpack/webpack.common.js" -<%_ } else { %> - "vite-serve": "vite", - "vite-build": "vite build" -<%_ } %> + "webapp:test": "<%= clientPackageManager %> run test --" }, "browserslist": [ "> 1%",