Skip to content

Commit

Permalink
migrate vue microfrontend to @module-federation/vite
Browse files Browse the repository at this point in the history
  • Loading branch information
mshima committed Oct 3, 2024
1 parent f3d3f81 commit 4659d87
Show file tree
Hide file tree
Showing 26 changed files with 203 additions and 833 deletions.
2 changes: 1 addition & 1 deletion generators/base-core/generator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ export default class CoreGenerator extends YeomanGenerator<JHipsterGeneratorOpti
enableGradleEnterprise: false,
pages: [],
});
return configWithDefaults;
return configWithDefaults as ApplicationConfiguration;
}

/**
Expand Down
22 changes: 22 additions & 0 deletions generators/client/command.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,28 @@ const command = {
],
scope: 'storage',
},
clientTheme: {
cli: {
type: String,
hide: true,
},
scope: 'storage',
},
clientThemeVariant: {
cli: {
type: String,
hide: true,
},
scope: 'storage',
},
clientBundler: {
cli: {
type: String,
hide: true,
},
choices: ['webpack', 'vite'],
scope: 'storage',
},
microfrontend: {
description: 'Enable microfrontend support',
cli: {
Expand Down
2 changes: 1 addition & 1 deletion generators/client/files-common.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
}),
{
Expand Down
4 changes: 1 addition & 3 deletions generators/client/generator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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`);
}
},
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)
<%_ } _%>
Expand Down
7 changes: 7 additions & 0 deletions generators/java/generators/bootstrap/command.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,13 @@ const command = {
scope: 'storage',
description: 'The package name for the generated application',
},
packageFolder: {
cli: {
type: String,
hide: true,
},
scope: 'storage',
},
},
import: [],
} as const satisfies JHipsterCommandDefinition;
Expand Down
11 changes: 8 additions & 3 deletions generators/maven/generators/frontend-plugin/generator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ export default class FrontendPluginGenerator extends BaseApplicationGenerator {
clientFrameworkAngular,
clientFrameworkReact,
clientFrameworkVue,
clientFrameworkBuiltIn,
clientBundlerVite,
microfrontend,
srcMainWebapp,
} = application;
Expand All @@ -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!({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) { _%>
Expand All @@ -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()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -214,19 +214,16 @@ public class SecurityConfiguration {
public SecurityWebFilterChain springSecurityFilterChain(ServerHttpSecurity http) {
http
.securityMatcher(new NegatedServerWebExchangeMatcher(new OrServerWebExchangeMatcher(
<%_ if (clientFrameworkVue) { _%>
pathMatchers(
<%_ if (clientBundlerVite) { _%>
"/assets/**",
<%_ if (microfrontend) { _%>
<%_ } else { _%>
"/app/**",
"/i18n/**",
"/content/**",
<%_ } _%>
<%_ } _%>
"/swagger-ui/**"
)
<%_ } else { _%>
pathMatchers("/app/**", "/i18n/**", "/content/**", "/swagger-ui/**")
<%_ } _%>
)))
<%_ if (!applicationTypeMicroservice) { _%>
.cors(withDefaults())
Expand Down Expand Up @@ -286,10 +283,16 @@ public class SecurityConfiguration {
<%_ if (applicationTypeGateway) { _%>
<%_ if (microfrontend) { _%>
// microfrontend resources are loaded by webpack without authentication, they need to be public
<%_ if (clientBundlerVite) { _%>
.pathMatchers("/services/*/assets/**").permitAll()
.pathMatchers("/services/*/*.js").permitAll()
<%_ } else { _%>
.pathMatchers("/services/*/*.js").permitAll()
.pathMatchers("/services/*/content/*.js").permitAll()
.pathMatchers("/services/*/*.txt").permitAll()
.pathMatchers("/services/*/*.json").permitAll()
.pathMatchers("/services/*/*.js.map").permitAll()
<%_ } _%>
<%_ } _%>
.pathMatchers("/services/*/management/health/readiness").permitAll()
.pathMatchers("/services/*/v3/api-docs").hasAuthority(AuthoritiesConstants.ADMIN)
Expand Down
43 changes: 5 additions & 38 deletions generators/vue/__snapshots__/generator.spec.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
Expand Down Expand Up @@ -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",
},
Expand Down Expand Up @@ -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",
},
}
Expand Down Expand Up @@ -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",
},
Expand Down Expand Up @@ -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",
},
}
`;

Expand Down
26 changes: 10 additions & 16 deletions generators/vue/files-vue.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand All @@ -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'],
},
Expand Down
41 changes: 24 additions & 17 deletions generators/vue/generator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}`,
}),
);
};
},
});
}
Expand Down Expand Up @@ -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,
Expand All @@ -174,8 +170,19 @@ export default class VueGenerator extends BaseApplicationGenerator {

get postWriting() {
return this.asPostWritingTaskGroup({
addDependencies({ application }) {
const { microfrontend } = application;
if (microfrontend) {
this.packageJson.merge({
devDependencies: {
'@module-federation/runtime': null,
'@module-federation/vite': null,
'vite-plugin-top-level-await': null,
},
});
}
},
addIndexAsset({ source, application }) {
if (application.microfrontend) return;
source.addExternalResourceToRoot!({
resource: '<script>const global = globalThis;</script>',
comment: 'Workaround https://github.com/axios/axios/issues/5622',
Expand Down
Loading

0 comments on commit 4659d87

Please sign in to comment.