Skip to content

Commit

Permalink
angular: migrate to esbuild
Browse files Browse the repository at this point in the history
  • Loading branch information
mshima committed Nov 26, 2024
1 parent a4bff84 commit 700418e
Show file tree
Hide file tree
Showing 15 changed files with 279 additions and 9 deletions.
24 changes: 22 additions & 2 deletions generators/angular/files-angular.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,21 +28,41 @@ export const files = {
common: [
clientRootTemplatesBlock({
templates: [
'angular.json',
{ sourceFile: 'eslint.config.js.jhi.angular', destinationFile: ctx => `${ctx.eslintConfigFile}.jhi.angular` },
'ngsw-config.json',
'package.json',
'tsconfig.json',
'tsconfig.app.json',
'tsconfig.spec.json',
'jest.conf.js',
],
}),
],
webpack: [
clientRootTemplatesBlock({
condition: ctx => ctx.clientBundlerWebpack,
templates: [
'angular.json',
'webpack/environment.js',
'webpack/proxy.conf.js',
'webpack/webpack.custom.js',
'webpack/logo-jhipster.png',
],
}),
],
esbuild: [
clientRootTemplatesBlock({
condition: ctx => ctx.clientBundlerExperimentalEsbuild,
templates: [
{ sourceFile: 'angular.json.esbuild', destinationFile: 'angular.json' },
'proxy.conf.json',
'build-plugins/esbuild-copy.mjs',
'build-plugins/esbuild-define.mjs',
'build-plugins/swagger-ui.mjs',
'build-plugins/vite-middleware.mjs',
],
}),
],
sass: [
{
...clientSrcTemplatesBlock(),
Expand All @@ -67,7 +87,7 @@ export const files = {
],
microfrontend: [
clientRootTemplatesBlock({
condition: generator => generator.microfrontend,
condition: generator => generator.clientBundlerWebpack && generator.microfrontend,
templates: ['webpack/webpack.microfrontend.js'],
}),
{
Expand Down
5 changes: 5 additions & 0 deletions generators/angular/generator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -266,6 +266,11 @@ export default class AngularGenerator extends BaseApplicationGenerator {

get postWriting() {
return this.asPostWritingTaskGroup({
clientBundler({ application, source }) {
source.mergeClientPackageJson!({
dependencies: { [`@angular-builders/custom-${application.clientBundlerExperimentalEsbuild ? 'esbuild' : 'webpack'}`]: null },
});
},
addWebsocketDependencies({ application, source }) {
const { authenticationTypeSession, communicationSpringWebsocket, nodeDependencies } = application;
const dependencies = {};
Expand Down
1 change: 1 addition & 0 deletions generators/angular/resources/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"devDependencies": {
"@angular-architects/module-federation": "18.0.6",
"@angular-architects/module-federation-runtime": "18.0.6",
"@angular-builders/custom-esbuild": "18.0.0",
"@angular-builders/custom-webpack": "18.0.0",
"@angular-builders/jest": "18.0.0",
"@angular/cli": "18.2.12",
Expand Down
142 changes: 142 additions & 0 deletions generators/angular/templates/angular.json.esbuild.ejs
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
<%#
Copyright 2013-2024 the original author or authors from the JHipster project.
This file is part of the JHipster project, see https://www.jhipster.tech/
for more information.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-%>
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"<%= dasherizedBaseName %>": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "<%= this.relativeDir(clientRootDir, clientSrcDir).replace(/\/$/, "") %>",
"prefix": "<%= jhiPrefixDashed %>",
"architect": {
"build": {
"builder": "@angular-builders/custom-esbuild:application",
"options": {
"plugins": ["./build-plugins/esbuild-define.mjs", "./build-plugins/esbuild-copy.mjs"],
"outputPath": {
"base": "<%= this.relativeDir(clientRootDir, clientDistDir) %>",
"browser": "",
"server": "node-server",
"media": "resources"
},
"index": "<%= this.relativeDir(clientRootDir, clientSrcDir) %>index.html",
"browser": "<%= this.relativeDir(clientRootDir, clientSrcDir) %>main.ts",
"polyfills": [
<%_ if (communicationSpringWebsocket) { _%>
"./<%= this.relativeDir(clientRootDir, clientSrcDir) %>sockjs-client.polyfill",
<%_ } _%>
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"<%= this.relativeDir(clientRootDir, clientSrcDir) %>content",
"<%= this.relativeDir(clientRootDir, clientSrcDir) %>favicon.ico",
"<%= this.relativeDir(clientRootDir, clientSrcDir) %>manifest.webapp",
"<%= this.relativeDir(clientRootDir, clientSrcDir) %>robots.txt"
],
"styles": [
"<%= this.relativeDir(clientRootDir, clientSrcDir) %>content/scss/vendor.scss",
"<%= this.relativeDir(clientRootDir, clientSrcDir) %>content/scss/global.scss"
],
"scripts": []
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": <%= Boolean(microfrontend) %>,
"extractLicenses": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
]
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true,
"fileReplacements": [
{
"replace": "<%= this.relativeDir(clientRootDir, clientSrcDir) %>environments/environment.ts",
"with": "<%= this.relativeDir(clientRootDir, clientSrcDir) %>environments/environment.development.ts"
}
]
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-builders/custom-esbuild:dev-server",
"options": {
"buildTarget": "<%= dasherizedBaseName %>:build:development",
"middlewares": ["build-plugins/vite-middleware.mjs"],
"open": true,
"proxyConfig": "proxy.conf.json",
"port": <%= devServerPort %>
},
"configurations": {
"production": {
"buildTarget": "<%= dasherizedBaseName %>:build:production"
},
"development": {
"buildTarget": "<%= dasherizedBaseName %>:build:development"
}
},
"defaultConfiguration": "development"
},
"test": {
"builder": "@angular-builders/jest:run",
"options": {
"configPath": "jest.conf.js",
"tsConfig": "tsconfig.spec.json"
}
}
}
}
},
"cli": {
"cache": {
"enabled": true,
"path": "./<%= this.relativeDir(clientRootDir, temporaryDir) %>angular/",
"environment": "all"
},
"packageManager": "<%= clientPackageManager %>"
}
}
19 changes: 19 additions & 0 deletions generators/angular/templates/build-plugins/esbuild-copy.mjs.ejs
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
// @ts-check
import { copyFile, mkdir } from 'node:fs/promises';
import { dirname, join } from 'node:path';
import { fileURLToPath } from 'node:url';
import { getSwaggerUiFileMap } from './swagger-ui.mjs';

/** @type {import('esbuild').Plugin} */
export default {
name: 'copy:files',
async setup() {
const destDir = join(fileURLToPath(new URL('..', import.meta.url)), 'target/classes/static', 'swagger-ui');
const swaggerFiles = await getSwaggerUiFileMap();
for (const [dest, src] of Object.entries(swaggerFiles)) {
const destFile = join(destDir, dest);
await mkdir(dirname(destFile), { recursive: true });
await copyFile(src, destFile);
}
},
};
12 changes: 12 additions & 0 deletions generators/angular/templates/build-plugins/esbuild-define.mjs.ejs
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
// @ts-check
/** @type {import('esbuild').Plugin} */
export default {
name: 'define:vars',
setup(build) {
build.initialOptions.define ??= {};
Object.assign(build.initialOptions.define, {
SERVER_API_URL: JSON.stringify(''),
__VERSION__: JSON.stringify(process.env.APP_VERSION ?? 'unknown'),
});
},
};
19 changes: 19 additions & 0 deletions generators/angular/templates/build-plugins/swagger-ui.mjs.ejs
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
// @ts-check
import { dirname, join } from 'node:path';
import { fileURLToPath } from 'node:url';
import { globby } from 'globby';

const lookup = async (pattern, sourcesDir, destDir) => {
const files = await globby(pattern, { cwd: sourcesDir });
return Object.fromEntries(files.map(file => [join(destDir, file), join(sourcesDir, file)]));
};

export const getSwaggerUiFileMap = async () => {
const destDir = 'swagger-ui';
const { getAbsoluteFSPath } = await import('swagger-ui-dist');
return {
[`${destDir}/axios.min.js`]: join(dirname(fileURLToPath(import.meta.resolve('axios/package.json'))), 'dist/axios.min.js'),
...(await lookup('*.{js,css,png}', getAbsoluteFSPath(), destDir)),
...(await lookup('**/*.*', join(fileURLToPath(new URL('.', import.meta.url)), '../<%= clientSrcDir %>/swagger-ui/'), destDir)),
};
};
18 changes: 18 additions & 0 deletions generators/angular/templates/build-plugins/vite-middleware.mjs.ejs
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { readFile } from 'node:fs/promises';
import { getSwaggerUiFileMap } from './swagger-ui.mjs';

const swaggerFiles = await getSwaggerUiFileMap();
swaggerFiles['swagger-ui'] = swaggerFiles['swagger-ui/index.html'];
const cache = new Map();

export default async (req, res, next) => {
const file = swaggerFiles[req.url.slice(1)];
if (file) {
if (!cache.has(file)) {
cache.set(file, await readFile(file, 'utf8'));
}
res.end(cache.get(file));
} else {
next();
}
};
3 changes: 1 addition & 2 deletions generators/angular/templates/jest.conf.js.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,12 @@ const { pathsToModuleNameMapper } = require('ts-jest');
const {
compilerOptions: { paths = {}, baseUrl = './' },
} = require('./tsconfig.json');
const environment = require('./webpack/environment');

module.exports = {
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$|dayjs/esm<% if (applicationTypeGateway && microfrontend) { %>|@angular-architects/module-federation-runtime<% } %>)'],
resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
globals: {
...environment,
__VERSION__: 'test',
},
roots: ['<rootDir>', `<rootDir>/${baseUrl}`],
modulePaths: [`<rootDir>/${baseUrl}`],
Expand Down
1 change: 0 additions & 1 deletion generators/angular/templates/package.json.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,6 @@
"@angular/cli": "<%= nodeDependencies['@angular/cli'] %>",
"@angular/compiler-cli": "<%= nodeDependencies['@angular/common'] %>",
"@angular/service-worker": "<%= nodeDependencies['@angular/common'] %>",
"@angular-builders/custom-webpack": "<%= nodeDependencies['@angular-builders/custom-webpack'] %>",
"@angular-builders/jest": "<%= nodeDependencies['@angular-builders/jest'] %>",
"@angular-devkit/build-angular": "<%= nodeDependencies['@angular/cli'] %>",
"@eslint/js": null,
Expand Down
27 changes: 27 additions & 0 deletions generators/angular/templates/proxy.conf.json.ejs
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<%#
Copyright 2013-2024 the original author or authors from the JHipster project.

This file is part of the JHipster project, see https://www.jhipster.tech/
for more information.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-%>
{
<%_ if (communicationSpringWebsocket) { _%>
"/websocket": {
"target": "ws://localhost:8080",
"ws": true
},
<%_ } _%>
"^/(api|management|v3/api-docs<% if (databaseTypeSql && devDatabaseTypeH2Any) { %>|h2-console<% } %><% if (authenticationTypeOauth2) { %>|oauth2|login<% } %><% if (authenticationTypeSession) { %>|login<% } %><% if (applicationTypeGateway || applicationTypeMicroservice) { %>|services<% } %>)": "http://localhost:<%= applicationTypeMicroservice ? gatewayServerPort : serverPort %>"
}
5 changes: 5 additions & 0 deletions generators/app/__snapshots__/generator.spec.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,7 @@ exports[`generator - app with default config should match snapshot 1`] = `
"cliName": undefined,
"clientBundler": "webpack",
"clientBundlerAny": true,
"clientBundlerExperimentalEsbuild": false,
"clientBundlerVite": false,
"clientBundlerWebpack": true,
"clientDistDir": "target/classes/static/",
Expand Down Expand Up @@ -636,6 +637,7 @@ exports[`generator - app with default config should match snapshot 1`] = `
"nodeDependencies": {
"@angular-architects/module-federation": "ANGULAR_ARCHITECTS_MODULE_FEDERATION_VERSION",
"@angular-architects/module-federation-runtime": "ANGULAR_ARCHITECTS_MODULE_FEDERATION_RUNTIME_VERSION",
"@angular-builders/custom-esbuild": "ANGULAR_BUILDERS_CUSTOM_ESBUILD_VERSION",
"@angular-builders/custom-webpack": "ANGULAR_BUILDERS_CUSTOM_WEBPACK_VERSION",
"@angular-builders/jest": "ANGULAR_BUILDERS_JEST_VERSION",
"@angular/cli": "ANGULAR_CLI_VERSION",
Expand Down Expand Up @@ -913,6 +915,7 @@ exports[`generator - app with gateway should match snapshot 1`] = `
"cliName": undefined,
"clientBundler": "webpack",
"clientBundlerAny": true,
"clientBundlerExperimentalEsbuild": false,
"clientBundlerVite": false,
"clientBundlerWebpack": true,
"clientDistDir": "target/classes/static/",
Expand Down Expand Up @@ -1287,6 +1290,7 @@ exports[`generator - app with gateway should match snapshot 1`] = `
"nodeDependencies": {
"@angular-architects/module-federation": "ANGULAR_ARCHITECTS_MODULE_FEDERATION_VERSION",
"@angular-architects/module-federation-runtime": "ANGULAR_ARCHITECTS_MODULE_FEDERATION_RUNTIME_VERSION",
"@angular-builders/custom-esbuild": "ANGULAR_BUILDERS_CUSTOM_ESBUILD_VERSION",
"@angular-builders/custom-webpack": "ANGULAR_BUILDERS_CUSTOM_WEBPACK_VERSION",
"@angular-builders/jest": "ANGULAR_BUILDERS_JEST_VERSION",
"@angular/cli": "ANGULAR_CLI_VERSION",
Expand Down Expand Up @@ -1563,6 +1567,7 @@ exports[`generator - app with microservice should match snapshot 1`] = `
"cliName": undefined,
"clientBundler": undefined,
"clientBundlerAny": true,
"clientBundlerExperimentalEsbuild": false,
"clientBundlerVite": false,
"clientBundlerWebpack": false,
"clientDistDir": "target/classes/static/",
Expand Down
2 changes: 1 addition & 1 deletion generators/client/command.ts
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const command = {
type: String,
hide: true,
},
choices: ['webpack', 'vite'],
choices: ['webpack', 'vite', 'experimentalEsbuild'],
scope: 'storage',
},
microfrontend: {
Expand Down
Loading

0 comments on commit 700418e

Please sign in to comment.