From 90d32893bbd1deafc6368663f6045019c6456315 Mon Sep 17 00:00:00 2001 From: Julian Ahlmark Date: Tue, 2 Jun 2026 07:26:48 +0200 Subject: [PATCH] chore: move production output to prod --- .gitignore | 2 + README.md | 11 + package.json | 1 + rollup.config.ts | 27 +- scripts/test-rollup-config.js | 34 + stats-app.html | 4842 --------------------------------- stats-background.html | 4842 --------------------------------- stats-contentScript.html | 4842 --------------------------------- stats-injectedScript.html | 4842 --------------------------------- 9 files changed, 63 insertions(+), 19380 deletions(-) create mode 100644 scripts/test-rollup-config.js delete mode 100644 stats-app.html delete mode 100644 stats-background.html delete mode 100644 stats-contentScript.html delete mode 100644 stats-injectedScript.html diff --git a/.gitignore b/.gitignore index b84268a..f756d0a 100644 --- a/.gitignore +++ b/.gitignore @@ -11,6 +11,8 @@ # production /build +/prod +/kleo-*.html # misc .DS_Store diff --git a/README.md b/README.md index f89d6ba..252ce72 100644 --- a/README.md +++ b/README.md @@ -1 +1,12 @@ # slim-extension + +## Production build + +Run `npm run build` to create the Chrome extension bundle in `prod/`. + +The Rollup production build writes JavaScript, copied assets, and the generated +manifest into `prod/`. Bundle visualizer reports use the `kleo-*.html` prefix so +they are easy to distinguish from extension runtime files. + +Run `npm run test:rollup-config` after changing `rollup.config.ts` to verify the +output folder and visualizer naming conventions. diff --git a/package.json b/package.json index c72b6d2..cf70859 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ }, "scripts": { "build": "rollup -c", + "test:rollup-config": "node scripts/test-rollup-config.js", "watch": "rollup -c -w" }, "browserslist": { diff --git a/rollup.config.ts b/rollup.config.ts index 4a15d00..7c7499e 100644 --- a/rollup.config.ts +++ b/rollup.config.ts @@ -18,8 +18,11 @@ import autoprefixer from 'autoprefixer'; import postcssImport from 'postcss-import'; const production = !process.env.ROLLUP_WATCH; +const productionOutputDir = 'prod'; const extensions = ['.js', '.jsx', '.ts', '.tsx']; +const outputPath = (...segments) => path.join(productionOutputDir, ...segments); +const visualizerPath = (name) => `kleo-${name}.html`; // Common plugins used in multiple bundles const commonPlugins = [ @@ -44,7 +47,7 @@ const reactApp = { sourcemap: !production, format: 'iife', name: 'app', - file: 'dist/js/app.js', + file: outputPath('js', 'app.js'), }, plugins: [ ...commonPlugins, @@ -63,7 +66,7 @@ const reactApp = { }), production && visualizer({ - filename: 'stats-app.html', + filename: visualizerPath('app'), template: 'treemap', // or 'sunburst' for different visualization }), postcss({ @@ -74,12 +77,12 @@ const reactApp = { svgr(), copy({ targets: [ - { src: 'src/logo/**/*', dest: 'dist/logo/' }, - { src: 'src/assets/**/*', dest: 'dist/assets/' }, - { src: 'public/**/*', dest: 'dist/' }, + { src: 'src/logo/**/*', dest: outputPath('logo') }, + { src: 'src/assets/**/*', dest: outputPath('assets') }, + { src: 'public/**/*', dest: productionOutputDir }, { src: 'manifest.json', - dest: 'dist/', + dest: productionOutputDir, transform: (contents) => { const jsonContent = JSON.parse(contents.toString()); jsonContent.version = pkg.version; @@ -99,7 +102,7 @@ const background = { sourcemap: !production, format: 'es', name: 'background', - file: 'dist/background.js', + file: outputPath('background.js'), inlineDynamicImports: true, // Add this line }, plugins: [ @@ -117,7 +120,7 @@ const background = { }), production && visualizer({ - filename: 'stats-background.html', + filename: visualizerPath('background'), template: 'treemap', }), ], @@ -131,7 +134,7 @@ const contentScript = { sourcemap: !production, format: 'iife', name: 'contentScript', - file: 'dist/contentScript.js', + file: outputPath('contentScript.js'), }, plugins: [ ...commonPlugins, @@ -151,7 +154,7 @@ const contentScript = { }), production && visualizer({ - filename: 'stats-contentScript.html', + filename: visualizerPath('contentScript'), template: 'treemap', }), ], @@ -164,7 +167,7 @@ const injectedScript = { sourcemap: !production, format: 'iife', name: 'injectedScript', - file: 'dist/injectedScript.js', + file: outputPath('injectedScript.js'), }, plugins: [ ...commonPlugins, @@ -180,7 +183,7 @@ const injectedScript = { }), production && visualizer({ - filename: 'stats-injectedScript.html', + filename: visualizerPath('injectedScript'), template: 'treemap', }), ], diff --git a/scripts/test-rollup-config.js b/scripts/test-rollup-config.js new file mode 100644 index 0000000..551bd66 --- /dev/null +++ b/scripts/test-rollup-config.js @@ -0,0 +1,34 @@ +const assert = require('assert'); +const fs = require('fs'); +const path = require('path'); + +const configPath = path.join(__dirname, '..', 'rollup.config.ts'); +const config = fs.readFileSync(configPath, 'utf8'); + +assert.match( + config, + /const productionOutputDir = 'prod';/, + 'rollup.config.ts should centralize production output in prod', +); + +for (const outputFile of [ + "outputPath('js', 'app.js')", + "outputPath('background.js')", + "outputPath('contentScript.js')", + "outputPath('injectedScript.js')", +]) { + assert.ok(config.includes(outputFile), `missing ${outputFile}`); +} + +for (const visualizerName of [ + "visualizerPath('app')", + "visualizerPath('background')", + "visualizerPath('contentScript')", + "visualizerPath('injectedScript')", +]) { + assert.ok(config.includes(visualizerName), `missing ${visualizerName}`); +} + +assert.ok(!config.includes("'dist/"), 'rollup config should not write to dist/'); +assert.ok(!config.includes("'stats-"), 'visualizer outputs should use kleo-* names'); + diff --git a/stats-app.html b/stats-app.html deleted file mode 100644 index 8e33e36..0000000 --- a/stats-app.html +++ /dev/null @@ -1,4842 +0,0 @@ - - - - - - - - Rollup Visualizer - - - -
- - - - - diff --git a/stats-background.html b/stats-background.html deleted file mode 100644 index d36cbc0..0000000 --- a/stats-background.html +++ /dev/null @@ -1,4842 +0,0 @@ - - - - - - - - Rollup Visualizer - - - -
- - - - - diff --git a/stats-contentScript.html b/stats-contentScript.html deleted file mode 100644 index 86c2d1f..0000000 --- a/stats-contentScript.html +++ /dev/null @@ -1,4842 +0,0 @@ - - - - - - - - Rollup Visualizer - - - -
- - - - - diff --git a/stats-injectedScript.html b/stats-injectedScript.html deleted file mode 100644 index eda20c1..0000000 --- a/stats-injectedScript.html +++ /dev/null @@ -1,4842 +0,0 @@ - - - - - - - - Rollup Visualizer - - - -
- - - - -