From 432e1c3b3cc86cc477b16fdc964a5adf13457262 Mon Sep 17 00:00:00 2001 From: Zak Burke Date: Mon, 30 Oct 2023 22:50:38 -0400 Subject: [PATCH 1/6] 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 2/6] 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 3/6] 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 4/6] 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 5/6] 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(), ], }; From 78caba6eefaa9e31f0461b3a6aa21785507db0fc Mon Sep 17 00:00:00 2001 From: Zak Burke Date: Mon, 11 Dec 2023 22:29:32 -0500 Subject: [PATCH 6/6] bump add-asset-html-webpack-plugin to v6 (#124) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index be433e5..df640b7 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "@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", + "add-asset-html-webpack-plugin": "^6.0.0", "autoprefixer": "^10.4.13", "babel-loader": "^9.1.3", "babel-plugin-remove-jsx-attributes": "^0.0.2",