Merge pull request #6109 from bryceosterhaus/genSize

chore: update CI stats to use esbuild and remove common externals

Author: bryceosterhaus

.github/workflows/main.yml

@@ -47,7 +47,7 @@ jobs:
             - uses: actions/checkout@v2
             - uses: actions/setup-node@v2
               with:
-                  node-version: '18'
+                  node-version: '20.x'
             - name: Fetch and Diff
               id: diff
               run: |
@@ -79,7 +79,7 @@ jobs:
                   clean: false
             - uses: actions/setup-node@v2
               with:
-                  node-version: '18'
+                  node-version: '20.x'
             - name: Generate Bundle Size Table
               if: ${{ steps.diff.outputs.packages }}
               run: |

.gitignore

@@ -7,8 +7,7 @@ node_modules
 package-lock.json
 .env
 .gradle
-.parcel-cache
-.parcel-ci-builds
-.parcel-ci-build.json
+.esbuild-ci-builds
+.esbuild-ci-build.json
 # Local Netlify folder
 .netlify

package.json

@@ -1,9 +1,6 @@
 {
 	"private": true,
 	"repository": "https://github.com/liferay/clay",
-	"engines": {
-		"node": "18.x"
-	},
 	"size-limit": [
 		{
 			"path": "all.js",
@@ -25,8 +22,8 @@
 		"format:all": "yarn lint:fix && yarn format",
 		"format:changed": "git ls-files -mz \"*.js\" \"**/*.js\" \"**/*.ts\" \"**/*.tsx\" \"*.md\" \"**/*.md\" \"**/*.mdx\" \"*.json\" \"**/*.json\" \"**/*.scss\" | xargs -0 prettier --write --",
 		"format:check": "prettier --list-different -- \"**/*.{js,ts,tsx,md,mdx,json,scss}\"",
-		"genBuildSize:compare": "NODE_ENV=production node scripts/check-size/index.js --compare",
-		"genBuildSize": "NODE_ENV=production node scripts/check-size/index.js",
+		"genBuildSize:compare": "NODE_ENV=production node scripts/check-size/index.mjs --compare",
+		"genBuildSize": "NODE_ENV=production node scripts/check-size/index.mjs",
 		"genGlobalChangeLog": "node scripts/generate-global-changelog.js && prettier --write -- \"CHANGELOG.md\"",
 		"lerna": "lerna bootstrap -- --no-optional --no-package-lock",
 		"lerna:version": "lerna version --conventional-commits",
@@ -86,14 +83,14 @@
 		"coveralls": "^3.1.1",
 		"cross-env": "^7.0.3",
 		"css-loader": "^2.1.1",
+		"esbuild": "^0.25.6",
 		"eslint": "^7.1.0",
 		"eslint-plugin-react-compiler": "^19.0.0-beta-6fc168f-20241025",
 		"fork-ts-checker-webpack-plugin": "^4.0.3",
 		"jest": "27.5.1",
 		"jest-fetch-mock": "^3.0.3",
 		"lerna": "6.6.2",
 		"ncp": "^2.0.0",
-		"parcel-bundler": "^1.12.4",
 		"prettier": "^2.4.1",
 		"raf": "^3.4.1",
 		"react": "^16.12.0",

scripts/check-size/convertBytes.js renamed to scripts/check-size/convertBytes.mjs

@@ -5,7 +5,7 @@
 
 const SIZES = ['B', 'KB', 'MB', 'GB', 'TB'];
 
-const convertBytes = function (bytes) {
+export const convertBytes = function (bytes) {
 	if (bytes === 0) {
 		return '--';
 	}
@@ -20,5 +20,3 @@ const convertBytes = function (bytes) {
 
 	return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${SIZES[i]}`;
 };
-
-module.exports = convertBytes;

scripts/check-size/generateTable.js renamed to scripts/check-size/generateTable.mjs

@@ -1,9 +1,14 @@
+/**
+ * SPDX-FileCopyrightText: © 2025 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
 /**
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-const convertBytes = require('./convertBytes');
+import {convertBytes} from './convertBytes.mjs';
 
 const sortDiffSize = (a, b) => {
 	if (a.diffSize === b.diffSize) {
@@ -62,7 +67,7 @@ const getStatsArray = (prevStats, newStats) => {
 	];
 };
 
-function generateTable(prevStats, newStats) {
+export function generateTable(prevStats, newStats) {
 	const [statsArray, totalDiffPercent] = getStatsArray(prevStats, newStats);
 
 	const table = statsArray.sort(sortDiffSize).reduce((acc, item) => {
@@ -81,5 +86,3 @@ function generateTable(prevStats, newStats) {
 		totalDiffPercent,
 	];
 }
-
-module.exports = generateTable;

scripts/check-size/index.js

@@ -0,0 +1,120 @@
+/**
+ * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import esbuild from 'esbuild';
+import fs from 'fs';
+import os from 'os';
+import path from 'path';
+import zlib from 'zlib';
+
+import {generateTable} from './generateTable.mjs';
+
+const CLI_ARGS = process.argv.slice(2);
+
+const TOTAL_THRESHHOLD_PERCENT = 5;
+
+const WORKSPACE_PACKAGES_WHITELIST = [
+	'browserslist-config-clay',
+	'demos',
+	'generator-clay-component',
+	'clay-css',
+	'tsconfig.json',
+];
+
+const TEMP_DIR = os.tmpdir();
+
+const getGzipSize = (relPath) =>
+	zlib.gzipSync(fs.readFileSync(path.join(import.meta.dirname, relPath)))
+		.length;
+
+async function main() {
+	const packages = fs.readdirSync('packages', {withFileTypes: true});
+
+	const entryFiles = packages
+		.filter(({name}) => !WORKSPACE_PACKAGES_WHITELIST.includes(name))
+		.map(({name}) => {
+			return path.join(
+				import.meta.dirname,
+				'../../packages/',
+				name,
+				'lib/index.js'
+			);
+		});
+
+	const bundles = await esbuild.build({
+		bundle: true,
+		entryPoints: entryFiles,
+		external: [
+			'@clayui/*',
+			'classnames',
+			'domain',
+			'prop-types',
+			'react-dnd-html5-backend',
+			'react-dnd',
+			'react-dom',
+			'react-transition-group',
+			'react',
+			'warning',
+		],
+		format: 'esm',
+		metafile: true,
+		minify: true,
+		outdir: '.esbuild-ci-builds',
+	});
+
+	const packageStats = Object.keys(bundles.metafile.outputs).reduce(
+		(acc, key) => {
+			const item = bundles.metafile.outputs[key];
+
+			const name = item.entryPoint
+				.replace('packages/', '')
+				.replace('/lib/index.js', '');
+
+			acc[name] = getGzipSize(
+				`../../.esbuild-ci-builds/${name}/lib/index.js`
+			);
+
+			return acc;
+		},
+		{
+			'@clayui/css:atlas': getGzipSize(
+				'../../packages/clay-css/lib/css/atlas.css'
+			),
+			'@clayui/css:base': getGzipSize(
+				'../../packages/clay-css/lib/css/base.css'
+			),
+		}
+	);
+
+	if (CLI_ARGS.includes('--compare')) {
+		const prevStats = fs.readFileSync(
+			path.join(TEMP_DIR, '/.esbuild-ci-build.json'),
+			'utf8'
+		);
+
+		const [table, totalDiff] = generateTable(
+			JSON.parse(prevStats),
+			packageStats
+		);
+
+		// eslint-disable-next-line
+		console.log(table);
+
+		if (Math.abs(totalDiff) > TOTAL_THRESHHOLD_PERCENT) {
+			console.warn(
+				`WARNING: Total size change was greater than +/- ${TOTAL_THRESHHOLD_PERCENT}%`
+			);
+
+			process.exit(1);
+		}
+	} else {
+		fs.writeFileSync(
+			path.join(TEMP_DIR, '/.esbuild-ci-build.json'),
+			JSON.stringify(packageStats)
+		);
+	}
+}
+
+main();