From 9253cd3d70f65e26faa207fb55d489a19f114366 Mon Sep 17 00:00:00 2001 From: Paul D'Ambra Date: Fri, 17 Jan 2025 11:14:48 +0000 Subject: [PATCH 1/3] chore(ci): track bundle size --- .github/workflows/ci-cd.yml | 8 ++++ .gitignore | 3 ++ package.json | 1 + vite.config.default.ts | 82 ++++++++++++++++++++----------------- yarn.lock | 35 ++++++++++++++-- 5 files changed, 88 insertions(+), 41 deletions(-) diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml index ca456c5da6..60fa0ba3e6 100644 --- a/.github/workflows/ci-cd.yml +++ b/.github/workflows/ci-cd.yml @@ -33,6 +33,14 @@ jobs: # run: PUPPETEER_EXECUTABLE_PATH=${{ steps.setup-chrome.outputs.chrome-path }} PUPPETEER_HEADLESS=true xvfb-run --server-args="-screen 0 1920x1080x24" yarn test run: PUPPETEER_HEADLESS=true xvfb-run --server-args="-screen 0 1920x1080x24" yarn test + - name: Check bundle sizes + uses: preactjs/compressed-size-action@v2 + with: + install-script: "yarn install --frozen-lockfile" + build-script: "build:all" + compression: "none" + pattern: "**/dist/*.{js,cjs,mjs,css}" + - name: Upload diff images to GitHub uses: actions/upload-artifact@v3 if: failure() diff --git a/.gitignore b/.gitignore index 7384b1a8ab..4266261313 100644 --- a/.gitignore +++ b/.gitignore @@ -35,3 +35,6 @@ dist # for vite vite.config.js.timestamp-* vite.config.ts.timestamp-* + +# bundle analysis files +*-bundle-analysis.html diff --git a/package.json b/package.json index 4eb8632a12..33bd3f7673 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "markdownlint": "^0.25.1", "markdownlint-cli": "^0.31.1", "prettier": "2.8.4", + "rollup-plugin-visualizer": "^5.12.0", "turbo": "^2.0.4", "typescript": "^5.4.5" }, diff --git a/vite.config.default.ts b/vite.config.default.ts index 3405fbc951..9d62cd04fa 100644 --- a/vite.config.default.ts +++ b/vite.config.default.ts @@ -1,42 +1,44 @@ /// -import dts from 'vite-plugin-dts'; -import { copyFileSync } from 'node:fs'; -import { defineConfig, LibraryOptions, LibraryFormats, Plugin } from 'vite'; -import { build, Format } from 'esbuild'; -import { resolve } from 'path'; -import { umdWrapper } from 'esbuild-plugin-umd-wrapper'; +import dts from "vite-plugin-dts"; +import { copyFileSync } from "node:fs"; +import { defineConfig, LibraryOptions, LibraryFormats, Plugin } from "vite"; +import { build, Format } from "esbuild"; +import { resolve } from "path"; +import { umdWrapper } from "esbuild-plugin-umd-wrapper"; +import * as fs from "node:fs"; +import { visualizer } from "rollup-plugin-visualizer"; // don't empty out dir if --watch flag is passed -const emptyOutDir = !process.argv.includes('--watch'); +const emptyOutDir = !process.argv.includes("--watch"); /** * Chrome web store does not allow base64 inline workers. * For chrome extension, we need to disable worker inlining to pass the review. */ -const disableWorkerInlining = process.env.DISABLE_WORKER_INLINING === 'true'; +const disableWorkerInlining = process.env.DISABLE_WORKER_INLINING === "true"; function minifyAndUMDPlugin({ - name, - outDir, -}: { - name: LibraryOptions['name']; + name, + outDir, + }: { + name: LibraryOptions["name"]; outDir: string; }): Plugin { return { - name: 'minify-plugin', + name: "minify-plugin", async writeBundle(outputOptions, bundle) { for (const file of Object.values(bundle)) { if ( - file.type === 'asset' && - (file.fileName.endsWith('.cjs.map') || file.fileName.endsWith('.css')) + file.type === "asset" && + (file.fileName.endsWith(".cjs.map") || file.fileName.endsWith(".css")) ) { - const isCSS = file.fileName.endsWith('.css'); + const isCSS = file.fileName.endsWith(".css"); const inputFilePath = resolve( outputOptions.dir!, file.fileName, - ).replace(/\.map$/, ''); + ).replace(/\.map$/, ""); const baseFileName = file.fileName.replace( /(\.cjs|\.css)(\.map)?$/, - '', + "", ); const outputFilePath = resolve(outputOptions.dir!, baseFileName); // console.log(outputFilePath, 'minifying', file.fileName); @@ -73,14 +75,14 @@ function minifyAndUMDPlugin({ } async function buildFile({ - name, - input, - output, - minify, - isCss, - outDir, -}: { - name?: LibraryOptions['name']; + name, + input, + output, + minify, + isCss, + outDir, + }: { + name?: LibraryOptions["name"]; input: string; output: string; outDir: string; @@ -92,8 +94,8 @@ async function buildFile({ outfile: output, minify, sourcemap: true, - format: isCss ? undefined : ('umd' as Format), - target: isCss ? undefined : 'es2017', + format: isCss ? undefined : ("umd" as Format), + target: isCss ? undefined : "es2017", treeShaking: !isCss, plugins: [ umdWrapper({ @@ -101,19 +103,19 @@ async function buildFile({ }), ], }); - const filename = output.replace(new RegExp(`^.+/(${outDir}/)`), '$1'); + const filename = output.replace(new RegExp(`^.+/(${outDir}/)`), "$1"); console.log(filename); console.log(`${filename}.map`); } -export default function ( - entry: LibraryOptions['entry'], - name: LibraryOptions['name'], +export default function( + entry: LibraryOptions["entry"], + name: LibraryOptions["name"], options?: { outputDir?: string; fileName?: string; plugins?: Plugin[] }, ) { - const { fileName, outputDir: outDir = 'dist', plugins = [] } = options || {}; + const { fileName, outputDir: outDir = "dist", plugins = [] } = options || {}; - let formats: LibraryFormats[] = ['es', 'cjs']; + let formats: LibraryFormats[] = ["es", "cjs"]; return defineConfig(() => ({ build: { @@ -155,20 +157,24 @@ export default function ( // correct extension supplied in the package.json exports field. const files: string[] = Array.from(emittedFiles.keys()); files.forEach((file) => { - const ctsFile = file.replace('.d.ts', '.d.cts'); + const ctsFile = file.replace(".d.ts", ".d.cts"); copyFileSync(file, ctsFile); }); }, }), minifyAndUMDPlugin({ name, outDir }), + visualizer({ + filename: resolve(__dirname, name + "-bundle-analysis.html"), // Path for the HTML report + open: false, // don't Automatically open the report in the browser + }), { - name: 'remove-worker-inline', - enforce: 'pre', + name: "remove-worker-inline", + enforce: "pre", transform(code, id) { if (!disableWorkerInlining) return; if (/\.(js|ts|jsx|tsx)$/.test(id)) { return { - code: code.replace(/\?worker&inline/g, '?worker'), + code: code.replace(/\?worker&inline/g, "?worker"), map: null, }; } diff --git a/yarn.lock b/yarn.lock index ddbfc5571e..1c342df6ff 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4534,6 +4534,11 @@ define-data-property@^1.0.1, define-data-property@^1.1.4: es-errors "^1.3.0" gopd "^1.0.1" +define-lazy-prop@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f" + integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og== + define-properties@^1.2.0, define-properties@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c" @@ -6258,7 +6263,7 @@ is-date-object@^1.0.1: dependencies: has-tostringtag "^1.0.0" -is-docker@^2.0.0: +is-docker@^2.0.0, is-docker@^2.1.1: version "2.2.1" resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa" integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ== @@ -7915,6 +7920,15 @@ onetime@^6.0.0: dependencies: mimic-fn "^4.0.0" +open@^8.4.0: + version "8.4.2" + resolved "https://registry.yarnpkg.com/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9" + integrity sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ== + dependencies: + define-lazy-prop "^2.0.0" + is-docker "^2.1.1" + is-wsl "^2.2.0" + optionator@^0.9.3: version "0.9.4" resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734" @@ -8186,6 +8200,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1: resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== +picomatch@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab" + integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg== + pify@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231" @@ -8852,6 +8871,16 @@ rimraf@~2.4.0: dependencies: glob "^6.0.1" +rollup-plugin-visualizer@^5.12.0: + version "5.14.0" + resolved "https://registry.yarnpkg.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.14.0.tgz#be82d43fb3c644e396e2d50ac8a53d354022d57c" + integrity sha512-VlDXneTDaKsHIw8yzJAFWtrzguoJ/LnQ+lMpoVfYJ3jJF4Ihe5oYLAqLklIK/35lgUY+1yEzCkHyZ1j4A5w5fA== + dependencies: + open "^8.4.0" + picomatch "^4.0.2" + source-map "^0.7.4" + yargs "^17.5.1" + rollup@^4.13.0: version "4.18.0" resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.18.0.tgz#497f60f0c5308e4602cf41136339fbf87d5f5dda" @@ -9248,7 +9277,7 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1: resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== -source-map@^0.7.3: +source-map@^0.7.3, source-map@^0.7.4: version "0.7.4" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656" integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA== @@ -10792,7 +10821,7 @@ yargs@^16.2.0: y18n "^5.0.5" yargs-parser "^20.2.2" -yargs@^17.3.1, yargs@^17.7.1: +yargs@^17.3.1, yargs@^17.5.1, yargs@^17.7.1: version "17.7.2" resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269" integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w== From 6267186e2d532b9de818386b29c739474fa00982 Mon Sep 17 00:00:00 2001 From: pauldambra Date: Fri, 17 Jan 2025 11:20:45 +0000 Subject: [PATCH 2/3] Apply formatting changes --- vite.config.default.ts | 82 +++++++++++++++++++++--------------------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/vite.config.default.ts b/vite.config.default.ts index 9d62cd04fa..46af9327a6 100644 --- a/vite.config.default.ts +++ b/vite.config.default.ts @@ -1,44 +1,44 @@ /// -import dts from "vite-plugin-dts"; -import { copyFileSync } from "node:fs"; -import { defineConfig, LibraryOptions, LibraryFormats, Plugin } from "vite"; -import { build, Format } from "esbuild"; -import { resolve } from "path"; -import { umdWrapper } from "esbuild-plugin-umd-wrapper"; -import * as fs from "node:fs"; -import { visualizer } from "rollup-plugin-visualizer"; +import dts from 'vite-plugin-dts'; +import { copyFileSync } from 'node:fs'; +import { defineConfig, LibraryOptions, LibraryFormats, Plugin } from 'vite'; +import { build, Format } from 'esbuild'; +import { resolve } from 'path'; +import { umdWrapper } from 'esbuild-plugin-umd-wrapper'; +import * as fs from 'node:fs'; +import { visualizer } from 'rollup-plugin-visualizer'; // don't empty out dir if --watch flag is passed -const emptyOutDir = !process.argv.includes("--watch"); +const emptyOutDir = !process.argv.includes('--watch'); /** * Chrome web store does not allow base64 inline workers. * For chrome extension, we need to disable worker inlining to pass the review. */ -const disableWorkerInlining = process.env.DISABLE_WORKER_INLINING === "true"; +const disableWorkerInlining = process.env.DISABLE_WORKER_INLINING === 'true'; function minifyAndUMDPlugin({ - name, - outDir, - }: { - name: LibraryOptions["name"]; + name, + outDir, +}: { + name: LibraryOptions['name']; outDir: string; }): Plugin { return { - name: "minify-plugin", + name: 'minify-plugin', async writeBundle(outputOptions, bundle) { for (const file of Object.values(bundle)) { if ( - file.type === "asset" && - (file.fileName.endsWith(".cjs.map") || file.fileName.endsWith(".css")) + file.type === 'asset' && + (file.fileName.endsWith('.cjs.map') || file.fileName.endsWith('.css')) ) { - const isCSS = file.fileName.endsWith(".css"); + const isCSS = file.fileName.endsWith('.css'); const inputFilePath = resolve( outputOptions.dir!, file.fileName, - ).replace(/\.map$/, ""); + ).replace(/\.map$/, ''); const baseFileName = file.fileName.replace( /(\.cjs|\.css)(\.map)?$/, - "", + '', ); const outputFilePath = resolve(outputOptions.dir!, baseFileName); // console.log(outputFilePath, 'minifying', file.fileName); @@ -75,14 +75,14 @@ function minifyAndUMDPlugin({ } async function buildFile({ - name, - input, - output, - minify, - isCss, - outDir, - }: { - name?: LibraryOptions["name"]; + name, + input, + output, + minify, + isCss, + outDir, +}: { + name?: LibraryOptions['name']; input: string; output: string; outDir: string; @@ -94,8 +94,8 @@ async function buildFile({ outfile: output, minify, sourcemap: true, - format: isCss ? undefined : ("umd" as Format), - target: isCss ? undefined : "es2017", + format: isCss ? undefined : ('umd' as Format), + target: isCss ? undefined : 'es2017', treeShaking: !isCss, plugins: [ umdWrapper({ @@ -103,19 +103,19 @@ async function buildFile({ }), ], }); - const filename = output.replace(new RegExp(`^.+/(${outDir}/)`), "$1"); + const filename = output.replace(new RegExp(`^.+/(${outDir}/)`), '$1'); console.log(filename); console.log(`${filename}.map`); } -export default function( - entry: LibraryOptions["entry"], - name: LibraryOptions["name"], +export default function ( + entry: LibraryOptions['entry'], + name: LibraryOptions['name'], options?: { outputDir?: string; fileName?: string; plugins?: Plugin[] }, ) { - const { fileName, outputDir: outDir = "dist", plugins = [] } = options || {}; + const { fileName, outputDir: outDir = 'dist', plugins = [] } = options || {}; - let formats: LibraryFormats[] = ["es", "cjs"]; + let formats: LibraryFormats[] = ['es', 'cjs']; return defineConfig(() => ({ build: { @@ -157,24 +157,24 @@ export default function( // correct extension supplied in the package.json exports field. const files: string[] = Array.from(emittedFiles.keys()); files.forEach((file) => { - const ctsFile = file.replace(".d.ts", ".d.cts"); + const ctsFile = file.replace('.d.ts', '.d.cts'); copyFileSync(file, ctsFile); }); }, }), minifyAndUMDPlugin({ name, outDir }), visualizer({ - filename: resolve(__dirname, name + "-bundle-analysis.html"), // Path for the HTML report + filename: resolve(__dirname, name + '-bundle-analysis.html'), // Path for the HTML report open: false, // don't Automatically open the report in the browser }), { - name: "remove-worker-inline", - enforce: "pre", + name: 'remove-worker-inline', + enforce: 'pre', transform(code, id) { if (!disableWorkerInlining) return; if (/\.(js|ts|jsx|tsx)$/.test(id)) { return { - code: code.replace(/\?worker&inline/g, "?worker"), + code: code.replace(/\?worker&inline/g, '?worker'), map: null, }; } From 1c5b910cd0c6198e7fdf83d9fea2b2ec914e37f7 Mon Sep 17 00:00:00 2001 From: Paul D'Ambra Date: Wed, 5 Feb 2025 19:13:59 +0000 Subject: [PATCH 3/3] download v4 --- .github/workflows/style-check.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/style-check.yml b/.github/workflows/style-check.yml index e47ee3c9c2..9aaf14a6e9 100644 --- a/.github/workflows/style-check.yml +++ b/.github/workflows/style-check.yml @@ -40,7 +40,7 @@ jobs: runs-on: ubuntu-latest name: ESLint Annotation steps: - - uses: actions/download-artifact@v3 + - uses: actions/download-artifact@v4 with: name: eslint_report.json - name: Annotate Code Linting Results