From 356a40614f174b5c692c22d76e215bd0c12c5724 Mon Sep 17 00:00:00 2001 From: Zak Burke Date: Thu, 28 Sep 2023 13:53:26 -0400 Subject: [PATCH 1/7] Bump @svgr/webpack from 7.0.0 to 8.1.0 (#122) This appears to be an update in name only. From what I can tell by looking at the release notes, the 7 to 8 bump is a side-effect of changes elsewhere in its monorepo, i.e. there are no actual changes here, but it would be nice to keep the version current in case of future development on the 8.x line. --- CHANGELOG.md | 1 + package.json | 10 +++++----- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1644ac1..3cea501 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ * Lock `esbuild-loader` to `~3.0.0` to avoid problematic `3.1` release. Refs STRWEB-94. * Switch to asset modules configuration in stripes webpack (removes file-loader, url-loader deps). Refs STRWEB-77. * Remove SVGO-dependencies. Replaced by SVGR for loading STCOM SVG's as react-components. Refs STRWEB-77. +* Bump `@svgr/webpack` from `7.0.0` to `8.1.0`. ## [4.2.0](https://github.com/folio-org/stripes-webpack/tree/v4.2.0) (2023-01-30) [Full Changelog](https://github.com/folio-org/stripes-webpack/compare/v4.1.2...v4.2.0) diff --git a/package.json b/package.json index f4cf447..c20a640 100644 --- a/package.json +++ b/package.json @@ -14,15 +14,15 @@ }, "dependencies": { "@babel/core": "^7.9.0", - "@babel/plugin-transform-class-properties": "^7.0.0", "@babel/plugin-proposal-decorators": "^7.0.0", - "@babel/plugin-transform-export-namespace-from": "^7.0.0", "@babel/plugin-proposal-function-sent": "^7.0.0", + "@babel/plugin-proposal-throw-expressions": "^7.0.0", + "@babel/plugin-syntax-import-meta": "^7.0.0", + "@babel/plugin-transform-class-properties": "^7.0.0", + "@babel/plugin-transform-export-namespace-from": "^7.0.0", "@babel/plugin-transform-numeric-separator": "^7.0.0", "@babel/plugin-transform-private-methods": "^7.18.6", "@babel/plugin-transform-private-property-in-object": "^7.21.0", - "@babel/plugin-proposal-throw-expressions": "^7.0.0", - "@babel/plugin-syntax-import-meta": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/preset-flow": "^7.7.4", "@babel/preset-react": "^7.9.0", @@ -30,7 +30,7 @@ "@babel/register": "^7.0.0", "@cerner/duplicate-package-checker-webpack-plugin": "~2.1.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4", - "@svgr/webpack": "^7.0.0", + "@svgr/webpack": "^8.1.0", "add-asset-html-webpack-plugin": "^5.0.2", "autoprefixer": "^10.4.13", "babel-loader": "^8.0.0", From 5bbc58e11b16c1f08e3b2c477f54824bab110a2e Mon Sep 17 00:00:00 2001 From: Zak Burke Date: Thu, 28 Sep 2023 14:15:21 -0400 Subject: [PATCH 2/7] bump babel-loader to 9.1.3 (#123) Bump `babel-loader` from `^8.0.0` to `^9.1.3`. The breaking changes appear to be limited to dropping old versions of babel and Node.js. This will need to be accompanied by parallel work in stripes-components. --- CHANGELOG.md | 1 + package.json | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3cea501..c199a74 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ * Switch to asset modules configuration in stripes webpack (removes file-loader, url-loader deps). Refs STRWEB-77. * Remove SVGO-dependencies. Replaced by SVGR for loading STCOM SVG's as react-components. Refs STRWEB-77. * Bump `@svgr/webpack` from `7.0.0` to `8.1.0`. +* Bump `babel-loader` from `^8.0.0` to `^9.1.3`. ## [4.2.0](https://github.com/folio-org/stripes-webpack/tree/v4.2.0) (2023-01-30) [Full Changelog](https://github.com/folio-org/stripes-webpack/compare/v4.1.2...v4.2.0) diff --git a/package.json b/package.json index c20a640..665d5a4 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "@svgr/webpack": "^8.1.0", "add-asset-html-webpack-plugin": "^5.0.2", "autoprefixer": "^10.4.13", - "babel-loader": "^8.0.0", + "babel-loader": "^9.1.3", "babel-plugin-remove-jsx-attributes": "^0.0.2", "buffer": "^6.0.3", "commander": "^2.9.0", From 432e1c3b3cc86cc477b16fdc964a5adf13457262 Mon Sep 17 00:00:00 2001 From: Zak Burke Date: Mon, 30 Oct 2023 22:50:38 -0400 Subject: [PATCH 3/7] STRWEB-99 bundle stripes-core's service-worker.js (#125) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Include `service-worker.js`, pulled from `@folio/stripes-core/src/service-worker.js`, in the output bundle so it can be registered via `navigator.serviceWorker.register(...)`. Handle the service-worker in a completely separate bundle (multi-compile). Refs STRWEB-99, FOLIO-3627 --------- Co-authored-by: Michał Kuklis --- webpack.config.cli.dev.js | 1 + webpack.config.cli.js | 1 - webpack.config.service.worker.js | 31 +++++++++++++++++++++++++++++++ webpack/build.js | 18 +++++++++++++++--- webpack/serve.js | 26 +++++++++++++++++--------- 5 files changed, 64 insertions(+), 13 deletions(-) create mode 100644 webpack.config.service.worker.js diff --git a/webpack.config.cli.dev.js b/webpack.config.cli.dev.js index 804ea33..baed059 100644 --- a/webpack.config.cli.dev.js +++ b/webpack.config.cli.dev.js @@ -22,6 +22,7 @@ const buildConfig = (stripesConfig) => { const base = buildBaseConfig(allModulePaths); const devConfig = Object.assign({}, base, cli, { + name: 'development', devtool: 'inline-source-map', mode: 'development', cache: { diff --git a/webpack.config.cli.js b/webpack.config.cli.js index b2f6f2e..858aac9 100644 --- a/webpack.config.cli.js +++ b/webpack.config.cli.js @@ -9,6 +9,5 @@ module.exports = { filename: 'bundle.[name][contenthash].js', chunkFilename: 'chunk.[name][chunkhash].js', publicPath: '/', - clean: true }, }; diff --git a/webpack.config.service.worker.js b/webpack.config.service.worker.js new file mode 100644 index 0000000..9199e10 --- /dev/null +++ b/webpack.config.service.worker.js @@ -0,0 +1,31 @@ +const path = require('path'); + +const config = { + name: 'service-worker', + mode: 'development', + target: 'web', + entry: { + 'service-worker': { + import: '@folio/stripes-core/src/service-worker.js', + filename: 'service-worker.js', + } + }, + output: { + path: path.join(__dirname, 'dist'), + filename: 'service-worker.js', + publicPath: '/', + }, + module: { + rules: [ + { + test: /\.js$/, + loader: 'esbuild-loader', + options: { + target: 'es2015' + } + }, + ] + } +}; + +module.exports = config; diff --git a/webpack/build.js b/webpack/build.js index ac5cb8c..df74ef1 100644 --- a/webpack/build.js +++ b/webpack/build.js @@ -6,7 +6,7 @@ const applyWebpackOverrides = require('./apply-webpack-overrides'); const logger = require('./logger')(); const buildConfig = require('../webpack.config.cli.prod'); const sharedStylesConfig = require('../webpack.config.cli.shared.styles'); - +const serviceWorkerConfig = require('../webpack.config.service.worker'); const platformModulePath = path.join(path.resolve(), 'node_modules'); module.exports = function build(stripesConfig, options) { @@ -73,9 +73,21 @@ module.exports = function build(stripesConfig, options) { config = applyWebpackOverrides(options.webpackOverrides, config); logger.log('assign final webpack config', config); - const compiler = webpack(config); - compiler.run((err, stats) => { + + // repoint the service-worker's output.path value so it emits + // into options.outputPath + if (options.outputPath) { + serviceWorkerConfig.output.path = path.resolve(options.outputPath); + } + // override the default mode; given we are building, assume production + serviceWorkerConfig.mode = 'production'; + + webpack([config,serviceWorkerConfig], (err, stats) => { if (err) { + console.error(err.stack || err); + if (err.details) { + console.error(err.details); + } reject(err); } else { resolve(stats); diff --git a/webpack/serve.js b/webpack/serve.js index f3d60d6..0344cb9 100644 --- a/webpack/serve.js +++ b/webpack/serve.js @@ -9,6 +9,7 @@ const applyWebpackOverrides = require('./apply-webpack-overrides'); const logger = require('./logger')(); const buildConfig = require('../webpack.config.cli.dev'); const sharedStylesConfig = require('../webpack.config.cli.shared.styles'); +const serviceWorkerConfig = require('../webpack.config.service.worker'); const cwd = path.resolve(); const platformModulePath = path.join(cwd, 'node_modules'); @@ -39,8 +40,10 @@ module.exports = function serve(stripesConfig, options) { config = applyWebpackOverrides(options.webpackOverrides, config); logger.log('assign final webpack config', config); - const compiler = webpack(config); - compiler.hooks.done.tap('StripesCoreServe', stats => resolve(stats)); + const compiler = webpack([serviceWorkerConfig, config]); + const [swCompiler, stripesCompiler] = compiler.compilers; + + stripesCompiler.hooks.done.tap('StripesCoreServe', stats => resolve(stats)); const port = options.port || process.env.STRIPES_PORT || 3000; const host = options.host || process.env.STRIPES_HOST || 'localhost'; @@ -49,6 +52,14 @@ module.exports = function serve(stripesConfig, options) { app.use(staticFileMiddleware); + // To handle rewrites without the dot rule, we should include the static middleware twice + // https://github.com/bripkens/connect-history-api-fallback/blob/master/examples/static-files-and-index-rewrite + app.use(staticFileMiddleware); + + app.use(webpackDevMiddleware(swCompiler, { + publicPath: serviceWorkerConfig.output.publicPath, + })); + // Process index rewrite before webpack-dev-middleware // to respond with webpack's dist copy of index.html app.use(connectHistoryApiFallback({ @@ -56,16 +67,13 @@ module.exports = function serve(stripesConfig, options) { htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'], })); - // To handle rewrites without the dot rule, we should include the static middleware twice - // https://github.com/bripkens/connect-history-api-fallback/blob/master/examples/static-files-and-index-rewrite - app.use(staticFileMiddleware); - - app.use(webpackDevMiddleware(compiler, { - stats: 'errors-only', + app.use(webpackDevMiddleware(stripesCompiler, { publicPath: config.output.publicPath, })); - app.use(webpackHotMiddleware(compiler)); + + + app.use(webpackHotMiddleware(stripesCompiler)); app.listen(port, host, (err) => { if (err) { From d6f6e61cfa85ec554cb2cda450d4fd7aef4aede9 Mon Sep 17 00:00:00 2001 From: Zak Burke Date: Mon, 6 Nov 2023 10:53:52 -0500 Subject: [PATCH 4/7] bump minor to 5.1 for new development (#130) --- CHANGELOG.md | 5 ++++- package.json | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c199a74..2824bdf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,9 @@ # Change history for stripes-webpack -## 5.0.0 IN PROGRESS +## 5.1.0 IN PROGRESS + +## [5.0.0](https://github.com/folio-org/stripes-webpack/tree/v5.0.0) (2023-10-11) +[Full Changelog](https://github.com/folio-org/stripes-webpack/compare/v4.2.0...v5.0.0) * Upgrade `css-minimizer-webpack-plugin` to `v4`. Refs STRWEB-72. * Remove `babel-plugin-lodash`. Refs STRWEB-73. diff --git a/package.json b/package.json index 665d5a4..ea1d80b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@folio/stripes-webpack", - "version": "5.0.0", + "version": "5.1.0", "description": "The webpack config for stripes", "license": "Apache-2.0", "publishConfig": { From fe37a9c079cbced4844ea1f0312492c4b2a534df Mon Sep 17 00:00:00 2001 From: Zak Burke Date: Tue, 7 Nov 2023 19:53:20 -0500 Subject: [PATCH 5/7] STRWEB-102 forward stripes-config values to service worker (#132) Use a virtual module to forward some stripes-config values to the service worker when it is bundled. These values must be compiled in because global variables in a service worker are volatile and are thus reset to their default (null) values on each sleep/wake cycle. Thus, the only way to make these values permanently available is to compile them in. h/t @mkuklis and @JohnC-80 who did the heavy lifting here, helping to think through potential solutions and figuring out how to actually implement them in our highly customized build. Refs STRWEB-102, STCOR-759 --------- Co-authored-by: Michal Kuklis --- CHANGELOG.md | 3 ++ webpack.config.service.worker.js | 65 +++++++++++++++++++------------- webpack/build.js | 24 +++++++----- webpack/serve.js | 13 +++++-- 4 files changed, 67 insertions(+), 38 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2824bdf..d6ff67b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,9 @@ ## 5.1.0 IN PROGRESS +* Add an entry point for stripes-core's service worker. Refs STRWEB-99. +* Pass micro-stripes-config to service worker at build-time. Refs STRWEB-102. + ## [5.0.0](https://github.com/folio-org/stripes-webpack/tree/v5.0.0) (2023-10-11) [Full Changelog](https://github.com/folio-org/stripes-webpack/compare/v4.2.0...v5.0.0) diff --git a/webpack.config.service.worker.js b/webpack.config.service.worker.js index 9199e10..9d6573a 100644 --- a/webpack.config.service.worker.js +++ b/webpack.config.service.worker.js @@ -1,31 +1,44 @@ const path = require('path'); +const VirtualModulesPlugin = require('webpack-virtual-modules'); -const config = { - name: 'service-worker', - mode: 'development', - target: 'web', - entry: { - 'service-worker': { - import: '@folio/stripes-core/src/service-worker.js', +const buildConfig = (stripesConfig) => { + const { okapi } = stripesConfig; + const virtualModules = new VirtualModulesPlugin({ + 'node_modules/micro-stripes-config.js': `module.exports = { okapiUrl: '${okapi.url}', okapiTenant: '${okapi.tenant}' };`, + }); + + const config = { + name: 'service-worker', + mode: 'development', + target: 'web', + entry: { + 'service-worker': { + import: '@folio/stripes-core/src/service-worker.js', + filename: 'service-worker.js', + } + }, + plugins: [ + virtualModules + ], + output: { + path: path.join(__dirname, 'dist'), filename: 'service-worker.js', + publicPath: '/', + }, + module: { + rules: [ + { + test: /\.js$/, + loader: 'esbuild-loader', + options: { + target: 'es2015' + } + }, + ] } - }, - output: { - path: path.join(__dirname, 'dist'), - filename: 'service-worker.js', - publicPath: '/', - }, - module: { - rules: [ - { - test: /\.js$/, - loader: 'esbuild-loader', - options: { - target: 'es2015' - } - }, - ] - } -}; + }; + + return config; +} -module.exports = config; +module.exports = buildConfig; diff --git a/webpack/build.js b/webpack/build.js index df74ef1..3b3db2c 100644 --- a/webpack/build.js +++ b/webpack/build.js @@ -6,13 +6,27 @@ const applyWebpackOverrides = require('./apply-webpack-overrides'); const logger = require('./logger')(); const buildConfig = require('../webpack.config.cli.prod'); const sharedStylesConfig = require('../webpack.config.cli.shared.styles'); -const serviceWorkerConfig = require('../webpack.config.service.worker'); +const buildServiceWorkerConfig = require('../webpack.config.service.worker'); const platformModulePath = path.join(path.resolve(), 'node_modules'); module.exports = function build(stripesConfig, options) { return new Promise((resolve, reject) => { logger.log('starting build...'); + // service worker config + const serviceWorkerConfig = buildServiceWorkerConfig(stripesConfig); + // repoint the service-worker's output.path value so it emits + // into options.outputPath + if (options.outputPath) { + serviceWorkerConfig.output.path = path.resolve(options.outputPath); + } + // override the default mode; given we are building, assume production + serviceWorkerConfig.mode = 'production'; + // update resolve/resolveLoader in order to find the micro-stripes-config + // virtual module configured by buildServiceWorkerConfig() + serviceWorkerConfig.resolve = { modules: ['node_modules', platformModulePath] }; + serviceWorkerConfig.resolveLoader = { modules: ['node_modules', platformModulePath] }; + let config = buildConfig(stripesConfig); config = sharedStylesConfig(config, {}); @@ -74,14 +88,6 @@ module.exports = function build(stripesConfig, options) { logger.log('assign final webpack config', config); - // repoint the service-worker's output.path value so it emits - // into options.outputPath - if (options.outputPath) { - serviceWorkerConfig.output.path = path.resolve(options.outputPath); - } - // override the default mode; given we are building, assume production - serviceWorkerConfig.mode = 'production'; - webpack([config,serviceWorkerConfig], (err, stats) => { if (err) { console.error(err.stack || err); diff --git a/webpack/serve.js b/webpack/serve.js index 0344cb9..c0e3b51 100644 --- a/webpack/serve.js +++ b/webpack/serve.js @@ -9,7 +9,7 @@ const applyWebpackOverrides = require('./apply-webpack-overrides'); const logger = require('./logger')(); const buildConfig = require('../webpack.config.cli.dev'); const sharedStylesConfig = require('../webpack.config.cli.shared.styles'); -const serviceWorkerConfig = require('../webpack.config.service.worker'); +const buildServiceWorkerConfig = require('../webpack.config.service.worker'); const cwd = path.resolve(); const platformModulePath = path.join(cwd, 'node_modules'); @@ -24,7 +24,16 @@ module.exports = function serve(stripesConfig, options) { return new Promise((resolve) => { logger.log('starting serve...'); const app = express(); + + // service worker config + // update resolve/resolveLoader in order to find the micro-stripes-config + // virtual module configured by buildServiceWorkerConfig() + const serviceWorkerConfig = buildServiceWorkerConfig(stripesConfig); + serviceWorkerConfig.resolve = { modules: ['node_modules', platformModulePath, coreModulePath] }; + serviceWorkerConfig.resolveLoader = { modules: ['node_modules', platformModulePath, coreModulePath] }; + let config = buildConfig(stripesConfig); + config = sharedStylesConfig(config, {}); config.plugins.push(new StripesWebpackPlugin({ stripesConfig })); @@ -71,8 +80,6 @@ module.exports = function serve(stripesConfig, options) { publicPath: config.output.publicPath, })); - - app.use(webpackHotMiddleware(stripesCompiler)); app.listen(port, host, (err) => { From 6a0843846c59f0f31009863925d6421195055e3c Mon Sep 17 00:00:00 2001 From: Zak Burke Date: Mon, 13 Nov 2023 15:50:00 -0500 Subject: [PATCH 6/7] STRWEB-90 omit css alias cruft (#126) Don't manipulate `config.resolve.extensions` for the benefit of CSS because it appears we're not actually leveraging it anywhere. Additional spot-testing across a variety of applications doesn't show any of the odd problems we saw when we first tried to clean this up in STRWEB-85. Refs STRWEB-90 --- CHANGELOG.md | 1 + webpack.config.cli.shared.styles.js | 2 -- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d6ff67b..f244f3f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,7 @@ * Remove SVGO-dependencies. Replaced by SVGR for loading STCOM SVG's as react-components. Refs STRWEB-77. * Bump `@svgr/webpack` from `7.0.0` to `8.1.0`. * Bump `babel-loader` from `^8.0.0` to `^9.1.3`. +* Omit CSS alias cruft, leaving `config.resolve.extenssions` alone. Refs STRWEB-90, STRWEB-85. ## [4.2.0](https://github.com/folio-org/stripes-webpack/tree/v4.2.0) (2023-01-30) [Full Changelog](https://github.com/folio-org/stripes-webpack/compare/v4.1.2...v4.2.0) diff --git a/webpack.config.cli.shared.styles.js b/webpack.config.cli.shared.styles.js index c7b9058..66c5170 100644 --- a/webpack.config.cli.shared.styles.js +++ b/webpack.config.cli.shared.styles.js @@ -12,8 +12,6 @@ module.exports = (config, context) => { "stcom-interactionStyles": getSharedStyles("lib/sharedStyles/interactionStyles"), "stcom-variables": getSharedStyles("lib/variables"), }; - - config.resolve.extensions.push('css'); } return config; From be399f99322887d9838238510718e7e03c80336b Mon Sep 17 00:00:00 2001 From: John Coburn Date: Thu, 7 Dec 2023 15:08:56 -0600 Subject: [PATCH 7/7] add @csstools/postcss-relative-color-syntax plugin (#133) * add @csstools/postcss-relative-color-syntax plugin * Update CHANGELOG.md --- CHANGELOG.md | 1 + package.json | 1 + postcss.config.js | 3 ++- 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f244f3f..a0dad16 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ * Add an entry point for stripes-core's service worker. Refs STRWEB-99. * Pass micro-stripes-config to service worker at build-time. Refs STRWEB-102. +* Add postcss-plugin for relative color syntax support for Firefox. Refs STRWEB-103. ## [5.0.0](https://github.com/folio-org/stripes-webpack/tree/v5.0.0) (2023-10-11) [Full Changelog](https://github.com/folio-org/stripes-webpack/compare/v4.2.0...v5.0.0) diff --git a/package.json b/package.json index ea1d80b..be433e5 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "@babel/preset-typescript": "^7.7.7", "@babel/register": "^7.0.0", "@cerner/duplicate-package-checker-webpack-plugin": "~2.1.0", + "@csstools/postcss-relative-color-syntax": "^2.0.7", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4", "@svgr/webpack": "^8.1.0", "add-asset-html-webpack-plugin": "^5.0.2", diff --git a/postcss.config.js b/postcss.config.js index 1016842..42c38be 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -7,7 +7,7 @@ const postCssNesting = require('postcss-nesting'); const postCssCustomMedia = require('postcss-custom-media'); const postCssMediaMinMax = require('postcss-media-minmax'); const postCssColorFunction = require('postcss-color-function'); - +const postCssRelativeColorSyntax = require('@csstools/postcss-relative-color-syntax'); const { generateStripesAlias, tryResolve } = require('./webpack/module-paths'); const locateCssVariables = () => { @@ -34,6 +34,7 @@ module.exports = { postCssNesting(), postCssCustomMedia(), postCssMediaMinMax(), + postCssRelativeColorSyntax(), postCssColorFunction(), ], };