From 312b8d44cad411ec6853614871ab089d0b1f4879 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Thu, 30 Jun 2022 11:52:10 -0400 Subject: [PATCH 01/41] Add support for transpilation --- postcss.config.js | 38 +++++++++++++++++ webpack.config.cli.dev.js | 58 +++++++++++++------------- webpack.config.cli.prod.js | 35 ++-------------- webpack.config.cli.transpile.js | 72 +++++++++++++++++++++++++++++++++ webpack/babel-options.js | 2 + webpack/stripes-node-api.js | 2 + webpack/transpile.js | 27 +++++++++++++ webpack/utils.js | 3 +- 8 files changed, 173 insertions(+), 64 deletions(-) create mode 100644 postcss.config.js create mode 100644 webpack.config.cli.transpile.js create mode 100644 webpack/transpile.js diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..817636b --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,38 @@ +const path = require('path'); +const postCssImport = require('postcss-import'); +const autoprefixer = require('autoprefixer'); +const postCssCustomProperties = require('postcss-custom-properties'); +const postCssCalc = require('postcss-calc'); +const postCssNesting = require('postcss-nesting'); +const postCssCustomMedia = require('postcss-custom-media'); +const postCssMediaMinMax = require('postcss-media-minmax'); +const postCssColorFunction = require('postcss-color-function'); + +const { generateStripesAlias, tryResolve } = require('./webpack/module-paths'); + +const locateCssVariables = () => { + const variables = 'lib/variables.css'; + const localPath = path.join(path.resolve(), variables); + + // check if variables are present locally (in cases when stripes-components is + // being built directly) if not look for them via stripes aliases + return tryResolve(localPath) ? + localPath : + path.join(generateStripesAlias('@folio/stripes-components'), variables); +}; + +module.exports = { + plugins: [ + postCssImport(), + autoprefixer(), + postCssCustomProperties({ + preserve: false, + importFrom: [locateCssVariables()] + }), + postCssCalc(), + postCssNesting(), + postCssCustomMedia(), + postCssMediaMinMax(), + postCssColorFunction(), + ], +}; diff --git a/webpack.config.cli.dev.js b/webpack.config.cli.dev.js index cc05387..43cffe1 100644 --- a/webpack.config.cli.dev.js +++ b/webpack.config.cli.dev.js @@ -3,14 +3,7 @@ const path = require('path'); const webpack = require('webpack'); -const postCssImport = require('postcss-import'); -const autoprefixer = require('autoprefixer'); -const postCssCustomProperties = require('postcss-custom-properties'); -const postCssCalc = require('postcss-calc'); -const postCssNesting = require('postcss-nesting'); -const postCssCustomMedia = require('postcss-custom-media'); -const postCssMediaMinMax = require('postcss-media-minmax'); -const postCssColorFunction = require('postcss-color-function'); + const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); const { generateStripesAlias, tryResolve } = require('./webpack/module-paths'); @@ -19,16 +12,7 @@ const utils = require('./webpack/utils'); const base = require('./webpack.config.base'); const cli = require('./webpack.config.cli'); -const locateCssVariables = () => { - const variables = 'lib/variables.css'; - const localPath = path.join(path.resolve(), variables); - - // check if variables are present locally (in cases when stripes-components is - // being built directly) if not look for them via stripes aliases - return tryResolve(localPath) ? - localPath : - path.join(generateStripesAlias('@folio/stripes-components'), variables); -}; +const distStyles = tryResolve(path.join(generateStripesAlias('@folio/stripes-components'), 'dist/style.css')); const useBrowserMocha = () => { return tryResolve('mocha/mocha-es2018.js') ? 'mocha/mocha-es2018.js' : 'mocha'; @@ -56,6 +40,10 @@ devConfig.entry = [ '@folio/stripes-core/src/index', ]; +if (distStyles) { + devConfig.entry.push('@folio/stripes-components/dist/style.css') +} + devConfig.plugins = devConfig.plugins.concat([ new webpack.ProvidePlugin({ process: 'process/browser.js', @@ -73,8 +61,28 @@ if (utils.isDevelopment) { // This alias avoids a console warning for react-dom patch devConfig.resolve.alias.process = 'process/browser.js'; devConfig.resolve.alias['mocha'] = useBrowserMocha(); + +if (distStyles) { + devConfig.module.rules.push({ + test: /\.css$/, + include: [/dist\/style.css/], + use: [ + { + loader: 'style-loader' + }, + { + loader: 'css-loader', + options: { + modules: false + }, + }, + ], + }); +} + devConfig.module.rules.push({ test: /\.css$/, + exclude: [/dist\/style.css/], use: [ { loader: 'style-loader' @@ -93,19 +101,7 @@ devConfig.module.rules.push({ loader: 'postcss-loader', options: { postcssOptions: { - plugins: [ - postCssImport(), - autoprefixer(), - postCssCustomProperties({ - preserve: false, - importFrom: [locateCssVariables()] - }), - postCssCalc(), - postCssNesting(), - postCssCustomMedia(), - postCssMediaMinMax(), - postCssColorFunction(), - ], + config: path.resolve(__dirname, 'postcss.config.js'), }, sourceMap: true, }, diff --git a/webpack.config.cli.prod.js b/webpack.config.cli.prod.js index 2b9a804..8ea5511 100644 --- a/webpack.config.cli.prod.js +++ b/webpack.config.cli.prod.js @@ -5,16 +5,7 @@ const path = require('path'); const webpack = require('webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require("css-minimizer-webpack-plugin") - -const postCssImport = require('postcss-import'); -const autoprefixer = require('autoprefixer'); -const postCssCustomProperties = require('postcss-custom-properties'); -const postCssCalc = require('postcss-calc'); -const postCssNesting = require('postcss-nesting'); -const postCssCustomMedia = require('postcss-custom-media'); -const postCssMediaMinMax = require('postcss-media-minmax'); -const postCssColorFunction = require('postcss-color-function'); -const { generateStripesAlias, getSharedStyles } = require('./webpack/module-paths'); +const { getSharedStyles } = require('./webpack/module-paths'); const base = require('./webpack.config.base'); const cli = require('./webpack.config.cli'); @@ -68,20 +59,9 @@ prodConfig.module.rules.push({ loader: 'postcss-loader', options: { postcssOptions: { - plugins: [ - postCssImport(), - autoprefixer(), - postCssCustomProperties({ - preserve: false, - importFrom: [path.join(generateStripesAlias('@folio/stripes-components'), 'lib/variables.css')] - }), - postCssCalc(), - postCssNesting(), - postCssCustomMedia(), - postCssMediaMinMax(), - postCssColorFunction(), - ], + config: path.resolve(__dirname, 'postcss.config.js'), }, + sourceMap: true, }, }, ], @@ -111,13 +91,4 @@ prodConfig.module.rules.push( }, ); -// Remove all data-test or data-test-* attributes -const babelLoaderConfig = prodConfig.module.rules.find(rule => rule.loader === 'babel-loader'); - -babelLoaderConfig.options.plugins = (babelLoaderConfig.options.plugins || []).concat([ - [require.resolve('babel-plugin-remove-jsx-attributes'), { - patterns: ['^data-test.*$'] - }] -]); - module.exports = prodConfig; diff --git a/webpack.config.cli.transpile.js b/webpack.config.cli.transpile.js new file mode 100644 index 0000000..336b881 --- /dev/null +++ b/webpack.config.cli.transpile.js @@ -0,0 +1,72 @@ +// Top level Webpack configuration used for transpiling individual modules +// before publishing +const path = require('path') +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const CssMinimizerPlugin = require("css-minimizer-webpack-plugin") +const babelOptions = require('./webpack/babel-options'); + +const config = { + mode: 'production', + module: { + rules: [ + { + test: /\.(js|jsx)$/, + exclude: /node_modules/, + loader: 'babel-loader', + options: babelOptions, + }, + { + test: /\.css$/, + use: [ + { + loader: MiniCssExtractPlugin.loader, + }, + { + loader: 'css-loader', + options: { + modules: { + localIdentName: '[local]---[hash:base64:5]', + }, + sourceMap: true, + importLoaders: 1, + }, + }, + { + loader: 'postcss-loader', + options: { + postcssOptions: { + config: path.resolve(__dirname, 'postcss.config.js'), + }, + sourceMap: true, + }, + }, + ], + }, + { + test: /\.(jpg|jpeg|gif|png|ico)$/, + type: 'asset/resource', + generator: { + filename: './img/[name].[contenthash].[ext]', + }, + }, + ] + } +}; + +config.optimization = { + mangleWasmImports: true, + minimizer: [ + '...', // in webpack@5 we can use the '...' syntax to extend existing minimizers + new CssMinimizerPlugin(), + ], + minimize: true, +}; + +config.plugins = [ + new MiniCssExtractPlugin({ filename: 'style.css', ignoreOrder: false }), + new webpack.optimize.LimitChunkCountPlugin({ + maxChunks: 1, + }), +]; + +module.exports = config; diff --git a/webpack/babel-options.js b/webpack/babel-options.js index ac34fe7..4f1fa0a 100644 --- a/webpack/babel-options.js +++ b/webpack/babel-options.js @@ -29,5 +29,7 @@ module.exports = { '@babel/plugin-proposal-throw-expressions', '@babel/plugin-syntax-import-meta', utils.isDevelopment && require.resolve('react-refresh/babel'), + utils.isProduction && ['remove-jsx-attributes', { patterns: [ '^data-test.*$' ] }] + ].filter(Boolean), }; diff --git a/webpack/stripes-node-api.js b/webpack/stripes-node-api.js index 2fd1d2a..afffb6d 100644 --- a/webpack/stripes-node-api.js +++ b/webpack/stripes-node-api.js @@ -1,7 +1,9 @@ const build = require('./build'); const serve = require('./serve'); +const transpile = require('./transpile'); module.exports = { build, serve, + transpile, }; diff --git a/webpack/transpile.js b/webpack/transpile.js new file mode 100644 index 0000000..ef11b2a --- /dev/null +++ b/webpack/transpile.js @@ -0,0 +1,27 @@ +const path = require('path'); +const webpack = require('webpack'); +const logger = require('./logger')(); +const { tryResolve } = require('./module-paths'); + +module.exports = function transpile(options = {}) { + return new Promise((resolve, reject) => { + logger.log('starting build...'); + let config = require('../webpack.config.cli.transpile'); + // TODO: allow for name customization + const moduleTranspileConfigPath = path.join(process.cwd(), 'webpack.transpile.config.js'); + + if (tryResolve(moduleTranspileConfigPath)) { + const moduleTranspileConfig = require(moduleTranspileConfigPath); + config = { ...config, ...moduleTranspileConfig } + } + + const compiler = webpack(config); + compiler.run((err, stats) => { + if (err) { + reject(err); + } else { + resolve(stats); + } + }); + }); +}; diff --git a/webpack/utils.js b/webpack/utils.js index 3c82075..7f56bcb 100644 --- a/webpack/utils.js +++ b/webpack/utils.js @@ -1,3 +1,4 @@ module.exports = { - isDevelopment: process.env.NODE_ENV === 'development' + isDevelopment: process.env.NODE_ENV === 'development', + isProduction: process.env.NODE_ENV === 'production', }; From 9a6e70fc365c0ce79958336be2ac38096b7953aa Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Thu, 30 Jun 2022 12:16:26 -0400 Subject: [PATCH 02/41] Cleanup --- webpack.config.cli.transpile.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/webpack.config.cli.transpile.js b/webpack.config.cli.transpile.js index 336b881..751ba6b 100644 --- a/webpack.config.cli.transpile.js +++ b/webpack.config.cli.transpile.js @@ -64,9 +64,9 @@ config.optimization = { config.plugins = [ new MiniCssExtractPlugin({ filename: 'style.css', ignoreOrder: false }), - new webpack.optimize.LimitChunkCountPlugin({ - maxChunks: 1, - }), + // new webpack.optimize.LimitChunkCountPlugin({ + // maxChunks: 1, + // }), ]; module.exports = config; From 147556c1e3fc34f0f725aa37c4590b6c1335af78 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Tue, 23 Aug 2022 15:23:34 -0400 Subject: [PATCH 03/41] Cleanup --- webpack/transpile.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/webpack/transpile.js b/webpack/transpile.js index ef11b2a..a5370e8 100644 --- a/webpack/transpile.js +++ b/webpack/transpile.js @@ -1,5 +1,6 @@ const path = require('path'); const webpack = require('webpack'); +const applyWebpackOverrides = require('./apply-webpack-overrides'); const logger = require('./logger')(); const { tryResolve } = require('./module-paths'); @@ -15,6 +16,9 @@ module.exports = function transpile(options = {}) { config = { ...config, ...moduleTranspileConfig } } + // Give the caller a chance to apply their own webpack overrides + config = applyWebpackOverrides(options.webpackOverrides, config); + const compiler = webpack(config); compiler.run((err, stats) => { if (err) { From f3c0be799f5e97a9633bbded3afbe4b0517c2ce3 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Wed, 24 Aug 2022 11:41:39 -0400 Subject: [PATCH 04/41] Continue on transpilation --- package.json | 1 + webpack.config.base.js | 2 +- webpack.config.cli.prod.js | 15 +++++-- webpack.config.cli.transpile.js | 76 +++++++++++++++++++++++++++++--- webpack/babel-loader-rule.js | 78 +++++++++++++++++++++------------ webpack/build.js | 1 + webpack/transpile.js | 3 ++ 7 files changed, 136 insertions(+), 40 deletions(-) diff --git a/package.json b/package.json index 0b7e086..df0d3de 100644 --- a/package.json +++ b/package.json @@ -86,6 +86,7 @@ "mocha-junit-reporter": "^1.17.0", "sinon": "^7.3.2", "sinon-chai": "^3.3.0", + "speed-measure-webpack-plugin": "^1.5.0", "webpack": "^5.58.1" }, "peerDependencies": { diff --git a/webpack.config.base.js b/webpack.config.base.js index 083e579..f265374 100644 --- a/webpack.config.base.js +++ b/webpack.config.base.js @@ -45,7 +45,7 @@ module.exports = { }, index: { dependOn: 'stripesConfig', - import: '@folio/stripes-core/src/index' + import: '@folio/stripes-core' }, }, resolve: { diff --git a/webpack.config.cli.prod.js b/webpack.config.cli.prod.js index 8ea5511..b112efa 100644 --- a/webpack.config.cli.prod.js +++ b/webpack.config.cli.prod.js @@ -4,8 +4,9 @@ const path = require('path'); const webpack = require('webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const CssMinimizerPlugin = require("css-minimizer-webpack-plugin") +const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') const { getSharedStyles } = require('./webpack/module-paths'); +const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); const base = require('./webpack.config.base'); const cli = require('./webpack.config.cli'); @@ -18,8 +19,9 @@ const prodConfig = Object.assign({}, base, cli, { } }); +const smp = new SpeedMeasurePlugin(); + prodConfig.plugins = prodConfig.plugins.concat([ - new MiniCssExtractPlugin({ filename: 'style.[contenthash].css' }), new webpack.ProvidePlugin({ process: 'process/browser.js', }), @@ -91,4 +93,11 @@ prodConfig.module.rules.push( }, ); -module.exports = prodConfig; +const webpackConfig = smp.wrap({ plugins: prodConfig.plugins }); +webpackConfig.plugins.push( + new MiniCssExtractPlugin({ filename: 'style.[contenthash].css' }) +); + +const config = {...prodConfig, ...webpackConfig }; + +module.exports = config; diff --git a/webpack.config.cli.transpile.js b/webpack.config.cli.transpile.js index 751ba6b..acfe5ee 100644 --- a/webpack.config.cli.transpile.js +++ b/webpack.config.cli.transpile.js @@ -1,12 +1,34 @@ -// Top level Webpack configuration used for transpiling individual modules +// Top level default Webpack configuration used for transpiling individual modules // before publishing -const path = require('path') +const path = require('path'); +const webpack = require('webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const CssMinimizerPlugin = require("css-minimizer-webpack-plugin") +const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const babelOptions = require('./webpack/babel-options'); +const processExternals = (externals) => { + return externals.reduce((acc, name) => { + acc[name] = { + root: name, + commonjs2: name, + commonjs: name, + amd: name, + umd: name + }; + + return acc; + }, {}); +}; + const config = { mode: 'production', + output: { + library: { + type: 'umd', + }, + path: path.resolve('./dist'), + filename: 'index.js', + }, module: { rules: [ { @@ -49,8 +71,48 @@ const config = { filename: './img/[name].[contenthash].[ext]', }, }, + { + test: /\.svg$/, + use: [ + { + loader: 'file-loader?name=img/[path][name].[contenthash].[ext]', + options: { + esModule: false, + }, + }, + { + loader: 'svgo-loader', + options: { + plugins: [ + { removeTitle: true }, + { convertColors: { shorthex: false } }, + { convertPathData: false } + ] + } + } + ] + }, ] - } + }, + // Set default externals. These can be extended by individual modules. + externals: processExternals([ + 'react', + 'react-dom', + 'react-intl', + 'react-router', + 'moment', + 'moment-timezone', + 'stripes-config', + '@folio/stripes', + '@folio/stripes-connect', + '@folio/stripes-core', + '@folio/stripes-components', + '@folio/stripes-util', + '@folio/stripes-form', + '@folio/stripes-final-form', + '@folio/stripes-logger', + '@folio/stripes-smart-components', + ]) }; config.optimization = { @@ -64,9 +126,9 @@ config.optimization = { config.plugins = [ new MiniCssExtractPlugin({ filename: 'style.css', ignoreOrder: false }), - // new webpack.optimize.LimitChunkCountPlugin({ - // maxChunks: 1, - // }), + new webpack.optimize.LimitChunkCountPlugin({ + maxChunks: 1, + }), ]; module.exports = config; diff --git a/webpack/babel-loader-rule.js b/webpack/babel-loader-rule.js index 5bdc701..cf343f7 100644 --- a/webpack/babel-loader-rule.js +++ b/webpack/babel-loader-rule.js @@ -1,4 +1,3 @@ -const path = require('path'); const babelOptions = require('./babel-options'); // a space delimited list of strings (typically namespaces) to use in addition @@ -6,37 +5,58 @@ const babelOptions = require('./babel-options'); const extraTranspile = process.env.STRIPES_TRANSPILE_TOKENS ? process.env.STRIPES_TRANSPILE_TOKENS.split(' ') : []; // These modules are already transpiled and should be excluded -const folioScopeBlacklist = [ -].map(segment => path.join('@folio', segment)); - -// Packages on NPM are typically distributed already transpiled. For historical -// reasons, Stripes modules are not and have their babel config centralised -// here. This ought to have changed by now, but for now the following logic is -// in effect and modules will be transpiled if: -// -// * they are in the @folio namespace -// * their name contains a string from STRIPES_TRANSPILE_TOKENS -// (typically other namespaces) -// * they aren't in node_modules (typically in a workspace) -// -// You'll see some chicanery here: we are only interested in these strings if -// they occur after the last instance of "node_modules" since, in some -// situations, our dependencies will get their own node_modules directories and -// while we want to transpile "@folio/ui-users/somefile.js" we don't want to -// transpile "@folio/ui-users/node_modules/nightmare/somefile.js" -function babelLoaderTest(fileName) { - const nodeModIdx = fileName.lastIndexOf('node_modules'); - if (fileName.endsWith('.js') - && (nodeModIdx === -1 || ['@folio', ...extraTranspile].reduce((acc, cur) => (fileName.lastIndexOf(cur) > nodeModIdx) || acc, false)) - && (folioScopeBlacklist.findIndex(ignore => fileName.includes(ignore)) === -1)) { - return true; - } - return false; -} +// const folioScopeBlacklist = [ +// 'stripes-components', +// 'stripes/components', +// 'stripes-smart-components', +// 'stripes/smart-components', +// ]; + +// // Packages on NPM are typically distributed already transpiled. For historical +// // reasons, Stripes modules are not and have their babel config centralised +// // here. This ought to have changed by now, but for now the following logic is +// // in effect and modules will be transpiled if: +// // +// // * they are in the @folio namespace +// // * their name contains a string from STRIPES_TRANSPILE_TOKENS +// // (typically other namespaces) +// // * they aren't in node_modules (typically in a workspace) +// // +// // You'll see some chicanery here: we are only interested in these strings if +// // they occur after the last instance of "node_modules" since, in some +// // situations, our dependencies will get their own node_modules directories and +// // while we want to transpile "@folio/ui-users/somefile.js" we don't want to +// // transpile "@folio/ui-users/node_modules/nightmare/somefile.js" +// function babelLoaderTest(fileName) { +// const nodeModIdx = fileName.lastIndexOf('node_modules'); + + +// if (fileName.endsWith('.js') +// && (nodeModIdx === -1 || ['@folio', ...extraTranspile].reduce((acc, cur) => (fileName.lastIndexOf(cur) > nodeModIdx) || acc, false)) +// && (folioScopeBlacklist.findIndex(ignore => fileName.includes(ignore)) === -1)) { +// console.log('process', fileName); +// return true; +// } +// return false; +// } + +const nodeModulesRegex = /node_modules|stripes-components/; +const whileListRegex = /stripes-connect|stripes-config/; module.exports = { - test: babelLoaderTest, loader: 'babel-loader', + test: /\.js$/, + exclude: function(modulePath) { + if (!modulePath) { + return true; + } + + const shouldBeExcluded = nodeModulesRegex.test(modulePath) && + !whileListRegex.test(modulePath); + + return shouldBeExcluded; + + }, options: { cacheDirectory: true, ...babelOptions, diff --git a/webpack/build.js b/webpack/build.js index d37761c..c11778d 100644 --- a/webpack/build.js +++ b/webpack/build.js @@ -68,6 +68,7 @@ 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) => { if (err) { diff --git a/webpack/transpile.js b/webpack/transpile.js index a5370e8..9e6f45e 100644 --- a/webpack/transpile.js +++ b/webpack/transpile.js @@ -8,11 +8,13 @@ module.exports = function transpile(options = {}) { return new Promise((resolve, reject) => { logger.log('starting build...'); let config = require('../webpack.config.cli.transpile'); + // TODO: allow for name customization const moduleTranspileConfigPath = path.join(process.cwd(), 'webpack.transpile.config.js'); if (tryResolve(moduleTranspileConfigPath)) { const moduleTranspileConfig = require(moduleTranspileConfigPath); + config.externals = { ...config.externals, ...moduleTranspileConfig.externals }; config = { ...config, ...moduleTranspileConfig } } @@ -20,6 +22,7 @@ module.exports = function transpile(options = {}) { config = applyWebpackOverrides(options.webpackOverrides, config); const compiler = webpack(config); + compiler.run((err, stats) => { if (err) { reject(err); From f489da9d857e924134925c7f87e15a070d6d6a84 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Wed, 24 Aug 2022 11:46:41 -0400 Subject: [PATCH 05/41] Cleanup --- webpack.config.cli.transpile.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/webpack.config.cli.transpile.js b/webpack.config.cli.transpile.js index acfe5ee..70eec45 100644 --- a/webpack.config.cli.transpile.js +++ b/webpack.config.cli.transpile.js @@ -22,12 +22,14 @@ const processExternals = (externals) => { const config = { mode: 'production', + entry: path.resolve('./index.js'), output: { library: { type: 'umd', }, path: path.resolve('./dist'), filename: 'index.js', + umdNamedDefine: true, }, module: { rules: [ From 08e7e4a41d8f0195322dd571acabaa3afb06df96 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Wed, 24 Aug 2022 11:54:44 -0400 Subject: [PATCH 06/41] Cleanup --- webpack/transpile.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/webpack/transpile.js b/webpack/transpile.js index 9e6f45e..e95b7aa 100644 --- a/webpack/transpile.js +++ b/webpack/transpile.js @@ -11,6 +11,7 @@ module.exports = function transpile(options = {}) { // TODO: allow for name customization const moduleTranspileConfigPath = path.join(process.cwd(), 'webpack.transpile.config.js'); + const packagePath = path.join(process.cwd(), 'package.json'); if (tryResolve(moduleTranspileConfigPath)) { const moduleTranspileConfig = require(moduleTranspileConfigPath); @@ -18,6 +19,14 @@ module.exports = function transpile(options = {}) { config = { ...config, ...moduleTranspileConfig } } + if (tryResolve(packagePath)) { + const packageJson = require(packagePath); + config.output.library = { + type: 'umd', + name: packageJson.name, + }; + } + // Give the caller a chance to apply their own webpack overrides config = applyWebpackOverrides(options.webpackOverrides, config); From 164e4e10c14b72da13dfb0f8cc136ca8a88660a5 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Wed, 24 Aug 2022 11:56:00 -0400 Subject: [PATCH 07/41] Cleanup --- webpack/build.js | 1 - 1 file changed, 1 deletion(-) diff --git a/webpack/build.js b/webpack/build.js index c11778d..d37761c 100644 --- a/webpack/build.js +++ b/webpack/build.js @@ -68,7 +68,6 @@ 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) => { if (err) { From 9bc97b233ec0bd22f567a0b4481d5096c14afe1f Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Thu, 25 Aug 2022 00:38:26 -0400 Subject: [PATCH 08/41] More work on transpilation --- package.json | 2 + webpack.config.base.js | 6 +-- webpack.config.cli.dev.js | 16 ++++--- webpack.config.cli.prod.js | 77 ++++++++++++++++++++++++--------- webpack.config.cli.transpile.js | 20 +-------- webpack/babel-loader-rule.js | 4 +- webpack/serve.js | 1 - 7 files changed, 76 insertions(+), 50 deletions(-) diff --git a/package.json b/package.json index df0d3de..4949ed6 100644 --- a/package.json +++ b/package.json @@ -87,6 +87,8 @@ "sinon": "^7.3.2", "sinon-chai": "^3.3.0", "speed-measure-webpack-plugin": "^1.5.0", + "terser-webpack-plugin": "^5.3.5", + "url-loader": "^4.1.1", "webpack": "^5.58.1" }, "peerDependencies": { diff --git a/webpack.config.base.js b/webpack.config.base.js index f265374..6ddc455 100644 --- a/webpack.config.base.js +++ b/webpack.config.base.js @@ -39,13 +39,13 @@ const specificReact = generateStripesAlias('react'); module.exports = { entry: { - css: '@folio/stripes-components/lib/global.css', + css: ['@folio/stripes-components/lib/global.css'], stripesConfig: { import: 'stripes-config.js' }, index: { dependOn: 'stripesConfig', - import: '@folio/stripes-core' + import: '@folio/stripes-web' }, }, resolve: { @@ -81,7 +81,7 @@ module.exports = { 'flattening': true, 'paths': true, 'placeholders': true // (requires currying) - }) + }), ], module: { rules: [ diff --git a/webpack.config.cli.dev.js b/webpack.config.cli.dev.js index 43cffe1..b549273 100644 --- a/webpack.config.cli.dev.js +++ b/webpack.config.cli.dev.js @@ -12,7 +12,8 @@ const utils = require('./webpack/utils'); const base = require('./webpack.config.base'); const cli = require('./webpack.config.cli'); -const distStyles = tryResolve(path.join(generateStripesAlias('@folio/stripes-components'), 'dist/style.css')); +const stripesComponentsStyles = tryResolve(path.join(generateStripesAlias('@folio/stripes-components'), 'dist/style.css')); +const stripesCoreStyles = tryResolve(path.join(generateStripesAlias('@folio/stripes-core'), 'dist/style.css')); const useBrowserMocha = () => { return tryResolve('mocha/mocha-es2018.js') ? 'mocha/mocha-es2018.js' : 'mocha'; @@ -37,13 +38,18 @@ devConfig.output.filename = 'bundle.js'; devConfig.entry = [ 'webpack-hot-middleware/client', '@folio/stripes-components/lib/global.css', - '@folio/stripes-core/src/index', + '@folio/stripes-web', ]; -if (distStyles) { +if (stripesComponentsStyles) { devConfig.entry.push('@folio/stripes-components/dist/style.css') } +if (stripesCoreStyles) { + devConfig.entry.push('@folio/stripes-core/dist/style.css') +} + + devConfig.plugins = devConfig.plugins.concat([ new webpack.ProvidePlugin({ process: 'process/browser.js', @@ -62,7 +68,7 @@ if (utils.isDevelopment) { devConfig.resolve.alias.process = 'process/browser.js'; devConfig.resolve.alias['mocha'] = useBrowserMocha(); -if (distStyles) { +if (stripesComponentsStyles) { devConfig.module.rules.push({ test: /\.css$/, include: [/dist\/style.css/], @@ -127,7 +133,7 @@ devConfig.module.rules.push( { test: /\.svg$/, use: [{ - loader: 'file-loader?name=img/[path][name].[contenthash].[ext]', + loader: 'url-loader', options: { esModule: false, }, diff --git a/webpack.config.cli.prod.js b/webpack.config.cli.prod.js index b112efa..3280701 100644 --- a/webpack.config.cli.prod.js +++ b/webpack.config.cli.prod.js @@ -4,13 +4,18 @@ const path = require('path'); const webpack = require('webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') +const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); +const TerserPlugin = require("terser-webpack-plugin"); + const { getSharedStyles } = require('./webpack/module-paths'); const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); - +const { generateStripesAlias, tryResolve } = require('./webpack/module-paths'); const base = require('./webpack.config.base'); const cli = require('./webpack.config.cli'); +const stripesComponentsStyles = tryResolve(path.join(generateStripesAlias('@folio/stripes-components'), 'dist/style.css')); +const stripesCoreStyles = tryResolve(path.join(generateStripesAlias('@folio/stripes-core'), 'dist/style.css')); + const prodConfig = Object.assign({}, base, cli, { mode: 'production', infrastructureLogging: { @@ -19,6 +24,14 @@ const prodConfig = Object.assign({}, base, cli, { } }); +if (stripesComponentsStyles) { + prodConfig.entry.css.push('@folio/stripes-components/dist/style.css'); +} + +if (stripesCoreStyles) { + prodConfig.entry.css.push('@folio/stripes-core/dist/style.css'); +} + const smp = new SpeedMeasurePlugin(); prodConfig.plugins = prodConfig.plugins.concat([ @@ -34,16 +47,50 @@ prodConfig.resolve.alias = { }; prodConfig.optimization = { - mangleWasmImports: true, + mangleWasmImports: false, minimizer: [ - '...', // in webpack@5 we can use the '...' syntax to extend existing minimizers + new TerserPlugin({ + exclude: /stripes/ + }), new CssMinimizerPlugin(), ], + splitChunks: { + chunks: (chunk) => { + return chunk.name !== 'stripes'; + }, + cacheGroups: { + stripes: { + test: /stripes-core|stripes-components|stripes-smart-components|stripes-connect/, + name: 'stripes', + chunks: 'all' + }, + }, + }, minimize: true, } +if (stripesComponentsStyles) { + prodConfig.module.rules.push({ + test: /\.css$/, + include: [/dist\/style.css/], + use: [ + { + loader: 'style-loader' + }, + { + loader: 'css-loader', + options: { + modules: false + }, + }, + ], + }); +} + + prodConfig.module.rules.push({ test: /\.css$/, + exclude: [/dist\/style.css/], use: [ { loader: MiniCssExtractPlugin.loader, @@ -72,24 +119,12 @@ prodConfig.module.rules.push({ prodConfig.module.rules.push( { test: /\.svg$/, - use: [ - { - loader: 'file-loader?name=img/[path][name].[contenthash].[ext]', - options: { - esModule: false, - }, + use: [{ + loader: 'url-loader', + options: { + esModule: false, }, - { - loader: 'svgo-loader', - options: { - plugins: [ - { removeTitle: true }, - { convertColors: { shorthex: false } }, - { convertPathData: false } - ] - } - } - ] + }] }, ); diff --git a/webpack.config.cli.transpile.js b/webpack.config.cli.transpile.js index 70eec45..36d60d8 100644 --- a/webpack.config.cli.transpile.js +++ b/webpack.config.cli.transpile.js @@ -75,24 +75,8 @@ const config = { }, { test: /\.svg$/, - use: [ - { - loader: 'file-loader?name=img/[path][name].[contenthash].[ext]', - options: { - esModule: false, - }, - }, - { - loader: 'svgo-loader', - options: { - plugins: [ - { removeTitle: true }, - { convertColors: { shorthex: false } }, - { convertPathData: false } - ] - } - } - ] + type: 'asset/inline', + use: 'svgo-loader' }, ] }, diff --git a/webpack/babel-loader-rule.js b/webpack/babel-loader-rule.js index cf343f7..8cb2b6d 100644 --- a/webpack/babel-loader-rule.js +++ b/webpack/babel-loader-rule.js @@ -40,8 +40,8 @@ const extraTranspile = process.env.STRIPES_TRANSPILE_TOKENS ? process.env.STRIPE // return false; // } -const nodeModulesRegex = /node_modules|stripes-components/; -const whileListRegex = /stripes-connect|stripes-config/; +const nodeModulesRegex = /node_modules|stripes-components|stripes-smart-components|stripes-core|stripes-connect/; +const whileListRegex = /stripes-config|stripes-web/; module.exports = { loader: 'babel-loader', diff --git a/webpack/serve.js b/webpack/serve.js index 4ce2986..7b263ce 100644 --- a/webpack/serve.js +++ b/webpack/serve.js @@ -1,6 +1,5 @@ const webpack = require('webpack'); const path = require('path'); -const nodeObjectHash = require('node-object-hash'); const express = require('express'); const webpackDevMiddleware = require('webpack-dev-middleware'); const webpackHotMiddleware = require('webpack-hot-middleware'); From 0865cf36ecb8e9003831fc1f4d2759e4d7553063 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Thu, 25 Aug 2022 23:38:28 -0400 Subject: [PATCH 09/41] Cleanup --- package.json | 1 + webpack.config.base.js | 5 +++ webpack.config.cli.dev.js | 1 + webpack.config.cli.prod.js | 5 +++ webpack.config.cli.transpile.js | 15 ++++++-- webpack/babel-loader-rule.js | 63 ++++++++++----------------------- webpack/transpile.js | 2 +- 7 files changed, 45 insertions(+), 47 deletions(-) diff --git a/package.json b/package.json index 4949ed6..da906df 100644 --- a/package.json +++ b/package.json @@ -86,6 +86,7 @@ "mocha-junit-reporter": "^1.17.0", "sinon": "^7.3.2", "sinon-chai": "^3.3.0", + "source-map-loader": "^4.0.0", "speed-measure-webpack-plugin": "^1.5.0", "terser-webpack-plugin": "^5.3.5", "url-loader": "^4.1.1", diff --git a/webpack.config.base.js b/webpack.config.base.js index 6ddc455..017392e 100644 --- a/webpack.config.base.js +++ b/webpack.config.base.js @@ -120,6 +120,11 @@ module.exports = { loader: 'csv-loader', }], }, + { + test: /\.js.map$/, + enforce: 'pre', + use: ['source-map-loader'], + } ], }, }; diff --git a/webpack.config.cli.dev.js b/webpack.config.cli.dev.js index b549273..b489335 100644 --- a/webpack.config.cli.dev.js +++ b/webpack.config.cli.dev.js @@ -15,6 +15,7 @@ const cli = require('./webpack.config.cli'); const stripesComponentsStyles = tryResolve(path.join(generateStripesAlias('@folio/stripes-components'), 'dist/style.css')); const stripesCoreStyles = tryResolve(path.join(generateStripesAlias('@folio/stripes-core'), 'dist/style.css')); + const useBrowserMocha = () => { return tryResolve('mocha/mocha-es2018.js') ? 'mocha/mocha-es2018.js' : 'mocha'; }; diff --git a/webpack.config.cli.prod.js b/webpack.config.cli.prod.js index 3280701..67462f6 100644 --- a/webpack.config.cli.prod.js +++ b/webpack.config.cli.prod.js @@ -18,12 +18,14 @@ const stripesCoreStyles = tryResolve(path.join(generateStripesAlias('@folio/stri const prodConfig = Object.assign({}, base, cli, { mode: 'production', + devtool: 'source-map', infrastructureLogging: { appendOnly: true, level: 'warn', } }); +// TODO: the same will have to happen for every UI module if (stripesComponentsStyles) { prodConfig.entry.css.push('@folio/stripes-components/dist/style.css'); } @@ -50,16 +52,19 @@ prodConfig.optimization = { mangleWasmImports: false, minimizer: [ new TerserPlugin({ + // exclude stripes junk from minimizer exclude: /stripes/ }), new CssMinimizerPlugin(), ], splitChunks: { + // Do not process stripes chunk chunks: (chunk) => { return chunk.name !== 'stripes'; }, cacheGroups: { stripes: { + // TODO: only include already transpiled modules test: /stripes-core|stripes-components|stripes-smart-components|stripes-connect/, name: 'stripes', chunks: 'all' diff --git a/webpack.config.cli.transpile.js b/webpack.config.cli.transpile.js index 36d60d8..c7d867c 100644 --- a/webpack.config.cli.transpile.js +++ b/webpack.config.cli.transpile.js @@ -22,6 +22,7 @@ const processExternals = (externals) => { const config = { mode: 'production', + devtool: 'source-map', entry: path.resolve('./index.js'), output: { library: { @@ -75,9 +76,18 @@ const config = { }, { test: /\.svg$/, - type: 'asset/inline', - use: 'svgo-loader' + use: [{ + loader: 'url-loader', + options: { + esModule: false, + }, + }] }, + { + test: /\.js.map$/, + enforce: "pre", + use: ['source-map-loader'], + } ] }, // Set default externals. These can be extended by individual modules. @@ -115,6 +125,7 @@ config.plugins = [ new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1, }), + new webpack.EnvironmentPlugin(['NODE_ENV']), ]; module.exports = config; diff --git a/webpack/babel-loader-rule.js b/webpack/babel-loader-rule.js index 8cb2b6d..5fecc22 100644 --- a/webpack/babel-loader-rule.js +++ b/webpack/babel-loader-rule.js @@ -2,60 +2,35 @@ const babelOptions = require('./babel-options'); // a space delimited list of strings (typically namespaces) to use in addition // to "@folio" to determine if something needs Stripes-flavoured transpilation -const extraTranspile = process.env.STRIPES_TRANSPILE_TOKENS ? process.env.STRIPES_TRANSPILE_TOKENS.split(' ') : []; - -// These modules are already transpiled and should be excluded -// const folioScopeBlacklist = [ -// 'stripes-components', -// 'stripes/components', -// 'stripes-smart-components', -// 'stripes/smart-components', -// ]; - -// // Packages on NPM are typically distributed already transpiled. For historical -// // reasons, Stripes modules are not and have their babel config centralised -// // here. This ought to have changed by now, but for now the following logic is -// // in effect and modules will be transpiled if: -// // -// // * they are in the @folio namespace -// // * their name contains a string from STRIPES_TRANSPILE_TOKENS -// // (typically other namespaces) -// // * they aren't in node_modules (typically in a workspace) -// // -// // You'll see some chicanery here: we are only interested in these strings if -// // they occur after the last instance of "node_modules" since, in some -// // situations, our dependencies will get their own node_modules directories and -// // while we want to transpile "@folio/ui-users/somefile.js" we don't want to -// // transpile "@folio/ui-users/node_modules/nightmare/somefile.js" -// function babelLoaderTest(fileName) { -// const nodeModIdx = fileName.lastIndexOf('node_modules'); - - -// if (fileName.endsWith('.js') -// && (nodeModIdx === -1 || ['@folio', ...extraTranspile].reduce((acc, cur) => (fileName.lastIndexOf(cur) > nodeModIdx) || acc, false)) -// && (folioScopeBlacklist.findIndex(ignore => fileName.includes(ignore)) === -1)) { -// console.log('process', fileName); -// return true; -// } -// return false; -// } - -const nodeModulesRegex = /node_modules|stripes-components|stripes-smart-components|stripes-core|stripes-connect/; -const whileListRegex = /stripes-config|stripes-web/; +const extraTranspile = process.env.STRIPES_TRANSPILE_TOKENS ? new RegExp(process.env.STRIPES_TRANSPILE_TOKENS.replaceAll(' ', '|')) : ''; +// TODO: check if dist is present before excluding +const excludeRegex = /node_modules|stripes|stripes-connect/; +const includeRegex = /stripes-config|stripes-web/; module.exports = { loader: 'babel-loader', test: /\.js$/, - exclude: function(modulePath) { + include: function(modulePath) { + // exclude empty modules if (!modulePath) { + return false; + } + + if (includeRegex.test(modulePath)) { + console.log('include', modulePath); return true; } - const shouldBeExcluded = nodeModulesRegex.test(modulePath) && - !whileListRegex.test(modulePath); + if (extraTranspile && extraTranspile.test(modulePath)) { + return true; + } - return shouldBeExcluded; + if (excludeRegex.test(modulePath)) { + console.log('exclude', modulePath); + return false; + } + return true; }, options: { cacheDirectory: true, diff --git a/webpack/transpile.js b/webpack/transpile.js index e95b7aa..a31bb0c 100644 --- a/webpack/transpile.js +++ b/webpack/transpile.js @@ -15,7 +15,7 @@ module.exports = function transpile(options = {}) { if (tryResolve(moduleTranspileConfigPath)) { const moduleTranspileConfig = require(moduleTranspileConfigPath); - config.externals = { ...config.externals, ...moduleTranspileConfig.externals }; + moduleTranspileConfig.externals = { ...config.externals, ...moduleTranspileConfig.externals }; config = { ...config, ...moduleTranspileConfig } } From 96a7752f6d402e1b0fccec32e2648a0453cac113 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Fri, 26 Aug 2022 00:59:55 -0400 Subject: [PATCH 10/41] Cleanup --- webpack.config.cli.dev.js | 9 +++++---- webpack.config.cli.prod.js | 2 +- webpack.config.cli.transpile.js | 2 ++ webpack/babel-loader-rule.js | 3 +-- 4 files changed, 9 insertions(+), 7 deletions(-) diff --git a/webpack.config.cli.dev.js b/webpack.config.cli.dev.js index b489335..6202a50 100644 --- a/webpack.config.cli.dev.js +++ b/webpack.config.cli.dev.js @@ -23,10 +23,11 @@ const useBrowserMocha = () => { const devConfig = Object.assign({}, base, cli, { devtool: 'inline-source-map', mode: 'development', - cache: { - type: 'filesystem', - name: 'FOLIOCache', - }, + cache: false, + // cache: { + // type: 'filesystem', + // name: 'FOLIOCache', + // }, target: 'web', infrastructureLogging: { appendOnly: true, diff --git a/webpack.config.cli.prod.js b/webpack.config.cli.prod.js index 67462f6..719fe88 100644 --- a/webpack.config.cli.prod.js +++ b/webpack.config.cli.prod.js @@ -65,7 +65,7 @@ prodConfig.optimization = { cacheGroups: { stripes: { // TODO: only include already transpiled modules - test: /stripes-core|stripes-components|stripes-smart-components|stripes-connect/, + test: /stripes/, name: 'stripes', chunks: 'all' }, diff --git a/webpack.config.cli.transpile.js b/webpack.config.cli.transpile.js index c7d867c..b325a61 100644 --- a/webpack.config.cli.transpile.js +++ b/webpack.config.cli.transpile.js @@ -98,6 +98,8 @@ const config = { 'react-router', 'moment', 'moment-timezone', + 'redux', + 'react-redux', 'stripes-config', '@folio/stripes', '@folio/stripes-connect', diff --git a/webpack/babel-loader-rule.js b/webpack/babel-loader-rule.js index 5fecc22..e0efdb9 100644 --- a/webpack/babel-loader-rule.js +++ b/webpack/babel-loader-rule.js @@ -4,7 +4,7 @@ const babelOptions = require('./babel-options'); // to "@folio" to determine if something needs Stripes-flavoured transpilation const extraTranspile = process.env.STRIPES_TRANSPILE_TOKENS ? new RegExp(process.env.STRIPES_TRANSPILE_TOKENS.replaceAll(' ', '|')) : ''; // TODO: check if dist is present before excluding -const excludeRegex = /node_modules|stripes|stripes-connect/; +const excludeRegex = /node_modules|stripes/; const includeRegex = /stripes-config|stripes-web/; module.exports = { @@ -26,7 +26,6 @@ module.exports = { } if (excludeRegex.test(modulePath)) { - console.log('exclude', modulePath); return false; } From bf2d685ba148a49c5dda9ff577c860ac8bfd8474 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Fri, 26 Aug 2022 10:47:51 -0400 Subject: [PATCH 11/41] Cleanup --- consts.js | 26 +++++ webpack.config.base.js | 82 +++++++++++++- webpack.config.cli.dev.js | 188 +++++++++++--------------------- webpack.config.cli.prod.js | 172 +++++++++-------------------- webpack.config.cli.transpile.js | 37 +------ webpack/babel-loader-rule.js | 50 +++++---- webpack/build.js | 3 +- webpack/serve.js | 4 +- webpack/utils.js | 21 +++- 9 files changed, 273 insertions(+), 310 deletions(-) create mode 100644 consts.js diff --git a/consts.js b/consts.js new file mode 100644 index 0000000..64bf7b9 --- /dev/null +++ b/consts.js @@ -0,0 +1,26 @@ +// The list of the default externals +// https://webpack.js.org/configuration/externals/ +const defaultExternals = [ + 'react', + 'react-dom', + 'react-intl', + 'react-router', + 'moment', + 'moment-timezone', + 'redux', + 'react-redux', + 'stripes-config', + '@folio/stripes', + '@folio/stripes-connect', + '@folio/stripes-core', + '@folio/stripes-components', + '@folio/stripes-util', + '@folio/stripes-form', + '@folio/stripes-final-form', + '@folio/stripes-logger', + '@folio/stripes-smart-components', +]; + +module.exports = { + defaultExternals, +}; diff --git a/webpack.config.base.js b/webpack.config.base.js index 017392e..dc19701 100644 --- a/webpack.config.base.js +++ b/webpack.config.base.js @@ -4,9 +4,14 @@ const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const LodashModuleReplacementPlugin = require('lodash-webpack-plugin'); -const { generateStripesAlias } = require('./webpack/module-paths'); -const babelLoaderRule = require('./webpack/babel-loader-rule'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + +const { generateStripesAlias, tryResolve } = require('./webpack/module-paths'); const typescriptLoaderRule = require('./webpack/typescript-loader-rule'); +const { isProduction } = require('./webpack/utils'); + +const stripesComponentsStyles = tryResolve(path.join(generateStripesAlias('@folio/stripes-components'), 'dist/style.css')); +const stripesCoreStyles = tryResolve(path.join(generateStripesAlias('@folio/stripes-core'), 'dist/style.css')); // React doesn't like being included multiple times as can happen when using // yarn link. Here we find a more specific path to it by first looking in @@ -37,7 +42,7 @@ const specificReact = generateStripesAlias('react'); // Since we are now on the webpack 5 we can make use of dependOn (https://webpack.js.org/configuration/entry-context/#dependencies) // in order to create a dependency between stripes config and other chunks: -module.exports = { +const baseConfig = { entry: { css: ['@folio/stripes-components/lib/global.css'], stripesConfig: { @@ -45,7 +50,7 @@ module.exports = { }, index: { dependOn: 'stripesConfig', - import: '@folio/stripes-web' + import: ['@folio/stripes-web'] }, }, resolve: { @@ -85,7 +90,6 @@ module.exports = { ], module: { rules: [ - babelLoaderRule, typescriptLoaderRule, { test: /\.(jpg|jpeg|gif|png|ico)$/, @@ -124,7 +128,73 @@ module.exports = { test: /\.js.map$/, enforce: 'pre', use: ['source-map-loader'], - } + }, + { + test: /\.svg$/, + use: [{ + loader: 'url-loader', + options: { + esModule: false, + }, + }] + }, ], }, }; + +if (stripesComponentsStyles) { + baseConfig.entry.css.push('@folio/stripes-components/dist/style.css') +} + +// TODO: the same will have to happen for every UI module +if (stripesCoreStyles) { + baseConfig.entry.css.push('@folio/stripes-core/dist/style.css') +} + +if (stripesComponentsStyles) { + baseConfig.module.rules.push({ + test: /\.css$/, + include: [/dist\/style.css/], + use: [ + { + loader: 'style-loader' + }, + { + loader: 'css-loader', + options: { + modules: false + }, + }, + ], + }); +} + +baseConfig.module.rules.push({ + test: /\.css$/, + exclude: [/dist\/style.css/], + use: [ + isProduction ? + { loader: MiniCssExtractPlugin.loader } : + { loader: 'style-loader' }, + { + loader: 'css-loader', + options: { + modules: { + localIdentName: '[local]---[hash:base64:5]', + }, + importLoaders: 1, + }, + }, + { + loader: 'postcss-loader', + options: { + postcssOptions: { + config: path.resolve(__dirname, 'postcss.config.js'), + }, + sourceMap: true, + }, + }, + ] +}); + +module.exports = baseConfig; diff --git a/webpack.config.cli.dev.js b/webpack.config.cli.dev.js index 6202a50..6174706 100644 --- a/webpack.config.cli.dev.js +++ b/webpack.config.cli.dev.js @@ -1,146 +1,90 @@ // Top level Webpack configuration for running a development environment // from the command line via devServer.js -const path = require('path'); const webpack = require('webpack'); - const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); -const { generateStripesAlias, tryResolve } = require('./webpack/module-paths'); +const { tryResolve } = require('./webpack/module-paths'); +const babelLoaderRule = require('./webpack/babel-loader-rule'); const utils = require('./webpack/utils'); - const base = require('./webpack.config.base'); const cli = require('./webpack.config.cli'); -const stripesComponentsStyles = tryResolve(path.join(generateStripesAlias('@folio/stripes-components'), 'dist/style.css')); -const stripesCoreStyles = tryResolve(path.join(generateStripesAlias('@folio/stripes-core'), 'dist/style.css')); - - const useBrowserMocha = () => { return tryResolve('mocha/mocha-es2018.js') ? 'mocha/mocha-es2018.js' : 'mocha'; }; -const devConfig = Object.assign({}, base, cli, { - devtool: 'inline-source-map', - mode: 'development', - cache: false, - // cache: { - // type: 'filesystem', - // name: 'FOLIOCache', - // }, - target: 'web', - infrastructureLogging: { - appendOnly: true, - level: 'warn', - }, -}); - -// Override filename to remove the hash in development due to memory issues (STCOR-296) -devConfig.output.filename = 'bundle.js'; -devConfig.entry = [ - 'webpack-hot-middleware/client', - '@folio/stripes-components/lib/global.css', - '@folio/stripes-web', -]; - -if (stripesComponentsStyles) { - devConfig.entry.push('@folio/stripes-components/dist/style.css') -} - -if (stripesCoreStyles) { - devConfig.entry.push('@folio/stripes-core/dist/style.css') -} - +const buildConfig = (stripesConfig) => { + const devConfig = Object.assign({}, base, cli, { + devtool: 'inline-source-map', + mode: 'development', + // cache: false, + cache: { + type: 'filesystem', + name: 'FOLIOCache', + }, + target: 'web', + infrastructureLogging: { + appendOnly: true, + level: 'warn', + }, + }); -devConfig.plugins = devConfig.plugins.concat([ - new webpack.ProvidePlugin({ - process: 'process/browser.js', - }), -]); + // Override filename to remove the hash in development due to memory issues (STCOR-296) + devConfig.output.filename = 'bundle.js'; + devConfig.entry = [ + 'webpack-hot-middleware/client', + ...devConfig.entry.css, + '@folio/stripes-web', + ]; -// include HMR plugins only when in development -if (utils.isDevelopment) { devConfig.plugins = devConfig.plugins.concat([ - new webpack.HotModuleReplacementPlugin(), - new ReactRefreshWebpackPlugin() + new webpack.ProvidePlugin({ + process: 'process/browser.js', + }), ]); -} - -// This alias avoids a console warning for react-dom patch -devConfig.resolve.alias.process = 'process/browser.js'; -devConfig.resolve.alias['mocha'] = useBrowserMocha(); -if (stripesComponentsStyles) { - devConfig.module.rules.push({ - test: /\.css$/, - include: [/dist\/style.css/], - use: [ - { - loader: 'style-loader' - }, - { - loader: 'css-loader', - options: { - modules: false - }, - }, - ], - }); -} - -devConfig.module.rules.push({ - test: /\.css$/, - exclude: [/dist\/style.css/], - use: [ - { - loader: 'style-loader' - }, + // include HMR plugins only when in development + if (utils.isDevelopment) { + devConfig.plugins = devConfig.plugins.concat([ + new webpack.HotModuleReplacementPlugin(), + new ReactRefreshWebpackPlugin() + ]); + } + + // This alias avoids a console warning for react-dom patch + devConfig.resolve.alias.process = 'process/browser.js'; + devConfig.resolve.alias['mocha'] = useBrowserMocha(); + + devConfig.module.rules.push(babelLoaderRule(stripesConfig)); + + // add 'Buffer' global required for tests/reporting tools. + devConfig.plugins.push( + new webpack.ProvidePlugin({ + Buffer: ['buffer', 'Buffer'] + }) + ); + + // add resolutions for node utilities required for test suites. + devConfig.resolve.fallback = { + "crypto": require.resolve('crypto-browserify'), + "stream": require.resolve('stream-browserify'), + "util": require.resolve('util-ex'), + }; + + devConfig.module.rules.push( { - loader: 'css-loader', - options: { - modules: { - localIdentName: '[local]---[hash:base64:5]', - }, - sourceMap: true, - importLoaders: 1, - }, - }, - { - loader: 'postcss-loader', - options: { - postcssOptions: { - config: path.resolve(__dirname, 'postcss.config.js'), + test: /\.svg$/, + use: [{ + loader: 'url-loader', + options: { + esModule: false, }, - sourceMap: true, - }, + }] }, - ], -}); - -// add 'Buffer' global required for tests/reporting tools. -devConfig.plugins.push( - new webpack.ProvidePlugin({ - Buffer: ['buffer', 'Buffer'] - }) -); + ); -// add resolutions for node utilities required for test suites. -devConfig.resolve.fallback = { - "crypto": require.resolve('crypto-browserify'), - "stream": require.resolve('stream-browserify'), - "util": require.resolve('util-ex'), -}; - -devConfig.module.rules.push( - { - test: /\.svg$/, - use: [{ - loader: 'url-loader', - options: { - esModule: false, - }, - }] - }, -); + return devConfig; +} -module.exports = devConfig; +module.exports = buildConfig; diff --git a/webpack.config.cli.prod.js b/webpack.config.cli.prod.js index 719fe88..231ccff 100644 --- a/webpack.config.cli.prod.js +++ b/webpack.config.cli.prod.js @@ -1,143 +1,75 @@ // Top level Webpack configuration for building static files for // production deployment from the command line -const path = require('path'); const webpack = require('webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); -const TerserPlugin = require("terser-webpack-plugin"); +const TerserPlugin = require('terser-webpack-plugin'); const { getSharedStyles } = require('./webpack/module-paths'); const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); -const { generateStripesAlias, tryResolve } = require('./webpack/module-paths'); const base = require('./webpack.config.base'); const cli = require('./webpack.config.cli'); +const babelLoaderRule = require('./webpack/babel-loader-rule'); + +const buildConfig = (stripesConfig) => { + const prodConfig = Object.assign({}, base, cli, { + mode: 'production', + devtool: 'source-map', + infrastructureLogging: { + appendOnly: true, + level: 'warn', + } + }); -const stripesComponentsStyles = tryResolve(path.join(generateStripesAlias('@folio/stripes-components'), 'dist/style.css')); -const stripesCoreStyles = tryResolve(path.join(generateStripesAlias('@folio/stripes-core'), 'dist/style.css')); - -const prodConfig = Object.assign({}, base, cli, { - mode: 'production', - devtool: 'source-map', - infrastructureLogging: { - appendOnly: true, - level: 'warn', - } -}); - -// TODO: the same will have to happen for every UI module -if (stripesComponentsStyles) { - prodConfig.entry.css.push('@folio/stripes-components/dist/style.css'); -} - -if (stripesCoreStyles) { - prodConfig.entry.css.push('@folio/stripes-core/dist/style.css'); -} - -const smp = new SpeedMeasurePlugin(); - -prodConfig.plugins = prodConfig.plugins.concat([ - new webpack.ProvidePlugin({ - process: 'process/browser.js', - }), -]); - -prodConfig.resolve.alias = { - ...prodConfig.resolve.alias, - "stcom-interactionStyles": getSharedStyles("lib/sharedStyles/interactionStyles"), - "stcom-variables": getSharedStyles("lib/variables"), -}; + const smp = new SpeedMeasurePlugin(); -prodConfig.optimization = { - mangleWasmImports: false, - minimizer: [ - new TerserPlugin({ - // exclude stripes junk from minimizer - exclude: /stripes/ + prodConfig.plugins = prodConfig.plugins.concat([ + new webpack.ProvidePlugin({ + process: 'process/browser.js', }), - new CssMinimizerPlugin(), - ], - splitChunks: { - // Do not process stripes chunk - chunks: (chunk) => { - return chunk.name !== 'stripes'; - }, - cacheGroups: { - stripes: { - // TODO: only include already transpiled modules - test: /stripes/, - name: 'stripes', - chunks: 'all' - }, - }, - }, - minimize: true, -} - -if (stripesComponentsStyles) { - prodConfig.module.rules.push({ - test: /\.css$/, - include: [/dist\/style.css/], - use: [ - { - loader: 'style-loader' - }, - { - loader: 'css-loader', - options: { - modules: false - }, - }, + ]); + + prodConfig.resolve.alias = { + ...prodConfig.resolve.alias, + 'stcom-interactionStyles': getSharedStyles('lib/sharedStyles/interactionStyles'), + 'stcom-variables': getSharedStyles('lib/variables'), + }; + + prodConfig.optimization = { + mangleWasmImports: false, + minimizer: [ + new TerserPlugin({ + // exclude stripes junk from minimizer + exclude: /stripes/ + }), + new CssMinimizerPlugin(), ], - }); -} - - -prodConfig.module.rules.push({ - test: /\.css$/, - exclude: [/dist\/style.css/], - use: [ - { - loader: MiniCssExtractPlugin.loader, - }, - { - loader: 'css-loader', - options: { - modules: { - localIdentName: '[local]---[hash:base64:5]', - }, - importLoaders: 1, + splitChunks: { + // Do not process stripes chunk + chunks: (chunk) => { + return chunk.name !== 'stripes'; }, - }, - { - loader: 'postcss-loader', - options: { - postcssOptions: { - config: path.resolve(__dirname, 'postcss.config.js'), + cacheGroups: { + stripes: { + // TODO: only include already transpiled modules + test: /stripes/, + name: 'stripes', + chunks: 'all' }, - sourceMap: true, }, }, - ], -}); + minimize: true, + } -prodConfig.module.rules.push( - { - test: /\.svg$/, - use: [{ - loader: 'url-loader', - options: { - esModule: false, - }, - }] - }, -); + prodConfig.module.rules.push(babelLoaderRule(stripesConfig)); -const webpackConfig = smp.wrap({ plugins: prodConfig.plugins }); -webpackConfig.plugins.push( - new MiniCssExtractPlugin({ filename: 'style.[contenthash].css' }) -); + const webpackConfig = smp.wrap({ plugins: prodConfig.plugins }); + webpackConfig.plugins.push( + new MiniCssExtractPlugin({ filename: 'style.[contenthash].css' }) + ); -const config = {...prodConfig, ...webpackConfig }; + return {...prodConfig, ...webpackConfig }; +}; -module.exports = config; +module.exports = buildConfig; diff --git a/webpack.config.cli.transpile.js b/webpack.config.cli.transpile.js index b325a61..940d565 100644 --- a/webpack.config.cli.transpile.js +++ b/webpack.config.cli.transpile.js @@ -5,20 +5,8 @@ const webpack = require('webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const babelOptions = require('./webpack/babel-options'); - -const processExternals = (externals) => { - return externals.reduce((acc, name) => { - acc[name] = { - root: name, - commonjs2: name, - commonjs: name, - amd: name, - umd: name - }; - - return acc; - }, {}); -}; +const { processExternals } = require('./webpack/utils'); +const { defaultExternals } = require('./consts'); const config = { mode: 'production', @@ -91,26 +79,7 @@ const config = { ] }, // Set default externals. These can be extended by individual modules. - externals: processExternals([ - 'react', - 'react-dom', - 'react-intl', - 'react-router', - 'moment', - 'moment-timezone', - 'redux', - 'react-redux', - 'stripes-config', - '@folio/stripes', - '@folio/stripes-connect', - '@folio/stripes-core', - '@folio/stripes-components', - '@folio/stripes-util', - '@folio/stripes-form', - '@folio/stripes-final-form', - '@folio/stripes-logger', - '@folio/stripes-smart-components', - ]) + externals: processExternals(defaultExternals), }; config.optimization = { diff --git a/webpack/babel-loader-rule.js b/webpack/babel-loader-rule.js index e0efdb9..4934a01 100644 --- a/webpack/babel-loader-rule.js +++ b/webpack/babel-loader-rule.js @@ -7,32 +7,34 @@ const extraTranspile = process.env.STRIPES_TRANSPILE_TOKENS ? new RegExp(process const excludeRegex = /node_modules|stripes/; const includeRegex = /stripes-config|stripes-web/; -module.exports = { - loader: 'babel-loader', - test: /\.js$/, - include: function(modulePath) { - // exclude empty modules - if (!modulePath) { - return false; - } +module.exports = (stripesConfig) => { - if (includeRegex.test(modulePath)) { - console.log('include', modulePath); - return true; - } + return { + loader: 'babel-loader', + test: /\.js$/, + include: function(modulePath) { + // exclude empty modules + if (!modulePath) { + return false; + } - if (extraTranspile && extraTranspile.test(modulePath)) { - return true; - } + if (includeRegex.test(modulePath)) { + return true; + } - if (excludeRegex.test(modulePath)) { - return false; - } + if (extraTranspile && extraTranspile.test(modulePath)) { + return true; + } - return true; - }, - options: { - cacheDirectory: true, - ...babelOptions, - }, + if (excludeRegex.test(modulePath)) { + return false; + } + + return true; + }, + options: { + cacheDirectory: true, + ...babelOptions, + }, + }; }; diff --git a/webpack/build.js b/webpack/build.js index d37761c..b4b00ec 100644 --- a/webpack/build.js +++ b/webpack/build.js @@ -4,13 +4,14 @@ const StripesWebpackPlugin = require('./stripes-webpack-plugin'); const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin'); const applyWebpackOverrides = require('./apply-webpack-overrides'); const logger = require('./logger')(); +const buildConfig = require('../webpack.config.cli.prod'); const platformModulePath = path.join(path.resolve(), 'node_modules'); module.exports = function build(stripesConfig, options) { return new Promise((resolve, reject) => { logger.log('starting build...'); - let config = require('../webpack.config.cli.prod'); // eslint-disable-line global-require + let config = buildConfig(stripesConfig) if (!options.skipStripesBuild) { config.plugins.push(new StripesWebpackPlugin({ stripesConfig, createDll: options.createDll })); diff --git a/webpack/serve.js b/webpack/serve.js index 7b263ce..efb62dd 100644 --- a/webpack/serve.js +++ b/webpack/serve.js @@ -12,15 +12,17 @@ const cwd = path.resolve(); const platformModulePath = path.join(cwd, 'node_modules'); const coreModulePath = path.join(__dirname, '..', 'node_modules'); const serverRoot = path.join(__dirname, '..'); +const buildConfig = require('../webpack.config.cli.dev'); module.exports = function serve(stripesConfig, options) { if (typeof stripesConfig.okapi !== 'object') throw new Error('Missing Okapi config'); if (typeof stripesConfig.okapi.url !== 'string') throw new Error('Missing Okapi URL'); if (stripesConfig.okapi.url.endsWith('/')) throw new Error('Trailing slash in Okapi URL will prevent Stripes from functioning'); + return new Promise((resolve) => { logger.log('starting serve...'); const app = express(); - let config = require('../webpack.config.cli.dev'); // eslint-disable-line global-require + let config = buildConfig(stripesConfig); let developmentConfig = require('../webpack.config.cli.dev.shared.styles'); if (process.env.NODE_ENV === 'development') { diff --git a/webpack/utils.js b/webpack/utils.js index 7f56bcb..73aa472 100644 --- a/webpack/utils.js +++ b/webpack/utils.js @@ -1,4 +1,21 @@ +const isDevelopment = process.env.NODE_ENV === 'development'; +const isProduction = process.env.NODE_ENV === 'production'; +const processExternals = (externals) => { + return externals.reduce((acc, name) => { + acc[name] = { + root: name, + commonjs2: name, + commonjs: name, + amd: name, + umd: name + }; + + return acc; + }, {}); +}; + module.exports = { - isDevelopment: process.env.NODE_ENV === 'development', - isProduction: process.env.NODE_ENV === 'production', + processExternals, + isDevelopment, + isProduction, }; From 36088b705e286c62dcee6e4ceea6933ed0a0d2d3 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Fri, 26 Aug 2022 10:51:21 -0400 Subject: [PATCH 12/41] Cleanup --- webpack.config.cli.prod.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/webpack.config.cli.prod.js b/webpack.config.cli.prod.js index 231ccff..4868ac9 100644 --- a/webpack.config.cli.prod.js +++ b/webpack.config.cli.prod.js @@ -40,7 +40,7 @@ const buildConfig = (stripesConfig) => { mangleWasmImports: false, minimizer: [ new TerserPlugin({ - // exclude stripes junk from minimizer + // exclude stripes cache group from the minimizer exclude: /stripes/ }), new CssMinimizerPlugin(), @@ -51,6 +51,7 @@ const buildConfig = (stripesConfig) => { return chunk.name !== 'stripes'; }, cacheGroups: { + // this cache group will be omitted by minimizer stripes: { // TODO: only include already transpiled modules test: /stripes/, From cdd84ed0fcf039c6331fa023c3f793d8a5ced88a Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Fri, 26 Aug 2022 10:53:11 -0400 Subject: [PATCH 13/41] Cleanup --- webpack/babel-loader-rule.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/webpack/babel-loader-rule.js b/webpack/babel-loader-rule.js index 4934a01..46bcfe6 100644 --- a/webpack/babel-loader-rule.js +++ b/webpack/babel-loader-rule.js @@ -8,6 +8,10 @@ const excludeRegex = /node_modules|stripes/; const includeRegex = /stripes-config|stripes-web/; module.exports = (stripesConfig) => { + // TODO: + // check which folio modules were pre-transpiled and exclude them + // from transpilation. + // This includes all stripes modules and ui modules return { loader: 'babel-loader', From cb94f8e169c6fc27b605cd24a926e8ee564c7a80 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Mon, 31 Oct 2022 11:10:17 -0400 Subject: [PATCH 14/41] Cleanup --- webpack/serve.js | 1 - 1 file changed, 1 deletion(-) diff --git a/webpack/serve.js b/webpack/serve.js index a703796..62c99eb 100644 --- a/webpack/serve.js +++ b/webpack/serve.js @@ -13,7 +13,6 @@ const cwd = path.resolve(); const platformModulePath = path.join(cwd, 'node_modules'); const coreModulePath = path.join(__dirname, '..', 'node_modules'); const serverRoot = path.join(__dirname, '..'); -const buildConfig = require('../webpack.config.cli.dev'); module.exports = function serve(stripesConfig, options) { if (typeof stripesConfig.okapi !== 'object') throw new Error('Missing Okapi config'); From bb7c2204e9bddcf50e06e4bd81ea08b0411662e4 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Mon, 31 Oct 2022 15:29:09 -0400 Subject: [PATCH 15/41] Cleanup --- consts.js | 1 + webpack.config.cli.dev.js | 16 ---------------- webpack.config.cli.prod.js | 11 ++++++++--- webpack/babel-loader-rule.js | 26 +++++++++++++------------ webpack/module-paths.js | 37 ++++++++++++++++++++++++++++++++++++ 5 files changed, 60 insertions(+), 31 deletions(-) diff --git a/consts.js b/consts.js index 64bf7b9..e32e1f3 100644 --- a/consts.js +++ b/consts.js @@ -5,6 +5,7 @@ const defaultExternals = [ 'react-dom', 'react-intl', 'react-router', + 'react-query', 'moment', 'moment-timezone', 'redux', diff --git a/webpack.config.cli.dev.js b/webpack.config.cli.dev.js index bc7944a..04e0a12 100644 --- a/webpack.config.cli.dev.js +++ b/webpack.config.cli.dev.js @@ -29,10 +29,6 @@ const buildConfig = (stripesConfig) => { level: 'warn', }, }); - - const useBrowserMocha = () => { - return tryResolve('mocha/mocha-es2018.js') ? 'mocha/mocha-es2018.js' : 'mocha'; - }; // Override filename to remove the hash in development due to memory issues (STCOR-296) devConfig.output.filename = 'bundle.js'; @@ -76,18 +72,6 @@ const buildConfig = (stripesConfig) => { "util": require.resolve('util-ex'), }; - devConfig.module.rules.push( - { - test: /\.svg$/, - use: [{ - loader: 'url-loader', - options: { - esModule: false, - }, - }] - }, - ); - return devConfig; } diff --git a/webpack.config.cli.prod.js b/webpack.config.cli.prod.js index 4868ac9..c054158 100644 --- a/webpack.config.cli.prod.js +++ b/webpack.config.cli.prod.js @@ -11,6 +11,7 @@ const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); const base = require('./webpack.config.base'); const cli = require('./webpack.config.cli'); const babelLoaderRule = require('./webpack/babel-loader-rule'); +const { getModulesPaths, getStripesModulesPaths, getNonTranspiledModules } = require('./webpack/module-paths'); const buildConfig = (stripesConfig) => { const prodConfig = Object.assign({}, base, cli, { @@ -22,6 +23,10 @@ const buildConfig = (stripesConfig) => { } }); + const modulePaths = getModulesPaths(stripesConfig.modules); + const stripesModulePaths = getStripesModulesPaths(); + const modulesToTranspile = getNonTranspiledModules([...stripesModulePaths, ...modulePaths]); + const modulesToTranspileRegex = new RegExp(modulesToTranspile.join('|')); const smp = new SpeedMeasurePlugin(); prodConfig.plugins = prodConfig.plugins.concat([ @@ -53,8 +58,8 @@ const buildConfig = (stripesConfig) => { cacheGroups: { // this cache group will be omitted by minimizer stripes: { - // TODO: only include already transpiled modules - test: /stripes/, + // only include already transpiled modules + test: (module) => !modulesToTranspileRegex.test(module.resource), name: 'stripes', chunks: 'all' }, @@ -70,7 +75,7 @@ const buildConfig = (stripesConfig) => { new MiniCssExtractPlugin({ filename: 'style.[contenthash].css' }) ); - return {...prodConfig, ...webpackConfig }; + return { ...prodConfig, ...webpackConfig }; }; module.exports = buildConfig; diff --git a/webpack/babel-loader-rule.js b/webpack/babel-loader-rule.js index 64deac4..b57ebca 100644 --- a/webpack/babel-loader-rule.js +++ b/webpack/babel-loader-rule.js @@ -1,22 +1,19 @@ -const path = require('path'); const babelOptions = require('./babel-options'); -const { getModulesPaths } = require('./module-paths'); +const { getModulesPaths, getStripesModulesPaths, getNonTranspiledModules } = require('./module-paths'); // a space delimited list of strings (typically namespaces) to use in addition // to "@folio" to determine if something needs Stripes-flavoured transpilation const extraTranspile = process.env.STRIPES_TRANSPILE_TOKENS ? new RegExp(process.env.STRIPES_TRANSPILE_TOKENS.replaceAll(' ', '|')) : ''; -// TODO: check if dist is present before excluding -const excludeRegex = /node_modules|stripes/; -const includeRegex = /stripes-config|stripes-web/; +const excludeRegex = /node_modules/; module.exports = (stripesConfig) => { - // TODO: - // check which folio modules were pre-transpiled and exclude them - // from transpilation. - // This includes all stripes modules and ui modules - const stripesDepsPaths = getModulesPaths(stripesConfig.modules); - - + const modulePaths = getModulesPaths(stripesConfig.modules); + const stripesModulePaths = getStripesModulesPaths(); + const modulesToTranspile = getNonTranspiledModules([...stripesModulePaths, ...modulePaths]); + const includeRegex = new RegExp(modulesToTranspile.join('|')); + + console.info('modules to transpile:', modulesToTranspile); + return { loader: 'babel-loader', test: /\.js$/, @@ -26,14 +23,19 @@ module.exports = (stripesConfig) => { return false; } + // regex which represents modules which should be included for transpilation if (includeRegex.test(modulePath)) { return true; } + // include STRIPES_TRANSPILE_TOKENS in transpilation + // TODO: Should we check if the modules listed in STRIPES_TRANSPILE_TOKENS are + // already transpiled (the dist folder exists). if (extraTranspile && extraTranspile.test(modulePath)) { return true; } + // regex which represents modules which should be excluded from transpilation if (excludeRegex.test(modulePath)) { return false; } diff --git a/webpack/module-paths.js b/webpack/module-paths.js index ab0f952..7989bba 100644 --- a/webpack/module-paths.js +++ b/webpack/module-paths.js @@ -175,6 +175,41 @@ function getModulesPaths(modules) { .filter(module => !!module); } +function getStripesModulesPaths() { + const packageJsonPath = locatePackageJsonPath('@folio/stripes'); + const packageJson = require(packageJsonPath); + const paths = []; + + if (!packageJson) { + return paths; + } + + Object.keys(packageJson.dependencies).forEach(moduleName => { + if (moduleName.match('@folio')) { + const stripesModulePath = locatePackageJsonPath(moduleName); + + if (stripesModulePath) { + paths.push(stripesModulePath.replace('/package.json', '')); + } + } + }); + + return paths; +} + +function getNonTranspiledModules(modules) { + const nonTranspiledModules = ['stripes-config', 'stripes-web']; + + modules.forEach(module => { + const distPath = tryResolve(path.join(module, 'dist')); + if (!distPath) { + nonTranspiledModules.push(module.split('/').pop()); + } + }); + + return nonTranspiledModules; +} + function getSharedStyles(filename) { return path.resolve(generateStripesAlias('@folio/stripes-components'), filename + ".css"); } @@ -185,4 +220,6 @@ module.exports = { getSharedStyles, locateStripesModule, getModulesPaths, + getStripesModulesPaths, + getNonTranspiledModules }; From 789051c415b28d4b01323134d77e8c9ebb6eac75 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Tue, 1 Nov 2022 00:20:10 -0400 Subject: [PATCH 16/41] More work on transpilation --- webpack.config.cli.prod.js | 16 ++++++++++------ webpack/babel-loader-rule.js | 13 ++++++++++--- webpack/module-paths.js | 17 ++++++++++++++++- 3 files changed, 36 insertions(+), 10 deletions(-) diff --git a/webpack.config.cli.prod.js b/webpack.config.cli.prod.js index c054158..398ca43 100644 --- a/webpack.config.cli.prod.js +++ b/webpack.config.cli.prod.js @@ -11,7 +11,7 @@ const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); const base = require('./webpack.config.base'); const cli = require('./webpack.config.cli'); const babelLoaderRule = require('./webpack/babel-loader-rule'); -const { getModulesPaths, getStripesModulesPaths, getNonTranspiledModules } = require('./webpack/module-paths'); +const { getModulesPaths, getStripesModulesPaths, getTranspiledModules } = require('./webpack/module-paths'); const buildConfig = (stripesConfig) => { const prodConfig = Object.assign({}, base, cli, { @@ -20,13 +20,16 @@ const buildConfig = (stripesConfig) => { infrastructureLogging: { appendOnly: true, level: 'warn', - } + }, + externalsPresets: { + node: true // in order to ignore built-in modules like path, fs, etc. + }, }); const modulePaths = getModulesPaths(stripesConfig.modules); const stripesModulePaths = getStripesModulesPaths(); - const modulesToTranspile = getNonTranspiledModules([...stripesModulePaths, ...modulePaths]); - const modulesToTranspileRegex = new RegExp(modulesToTranspile.join('|')); + const transpiledModules = getTranspiledModules([...stripesModulePaths, ...modulePaths]); + const transpiledModulesRegex = new RegExp(transpiledModules.join('|')); const smp = new SpeedMeasurePlugin(); prodConfig.plugins = prodConfig.plugins.concat([ @@ -46,7 +49,7 @@ const buildConfig = (stripesConfig) => { minimizer: [ new TerserPlugin({ // exclude stripes cache group from the minimizer - exclude: /stripes/ + exclude: /stripes/, }), new CssMinimizerPlugin(), ], @@ -59,7 +62,7 @@ const buildConfig = (stripesConfig) => { // this cache group will be omitted by minimizer stripes: { // only include already transpiled modules - test: (module) => !modulesToTranspileRegex.test(module.resource), + test: (module) => transpiledModulesRegex.test(module.resource), name: 'stripes', chunks: 'all' }, @@ -75,6 +78,7 @@ const buildConfig = (stripesConfig) => { new MiniCssExtractPlugin({ filename: 'style.[contenthash].css' }) ); + return { ...prodConfig, ...webpackConfig }; }; diff --git a/webpack/babel-loader-rule.js b/webpack/babel-loader-rule.js index b57ebca..3087718 100644 --- a/webpack/babel-loader-rule.js +++ b/webpack/babel-loader-rule.js @@ -1,18 +1,21 @@ const babelOptions = require('./babel-options'); -const { getModulesPaths, getStripesModulesPaths, getNonTranspiledModules } = require('./module-paths'); +const { getModulesPaths, getStripesModulesPaths, getNonTranspiledModules, getTranspiledModules } = require('./module-paths'); // a space delimited list of strings (typically namespaces) to use in addition // to "@folio" to determine if something needs Stripes-flavoured transpilation const extraTranspile = process.env.STRIPES_TRANSPILE_TOKENS ? new RegExp(process.env.STRIPES_TRANSPILE_TOKENS.replaceAll(' ', '|')) : ''; -const excludeRegex = /node_modules/; module.exports = (stripesConfig) => { const modulePaths = getModulesPaths(stripesConfig.modules); const stripesModulePaths = getStripesModulesPaths(); - const modulesToTranspile = getNonTranspiledModules([...stripesModulePaths, ...modulePaths]); + const allModules = [...stripesModulePaths, ...modulePaths]; + const modulesToTranspile = getNonTranspiledModules(allModules); + const transpiledModules = getTranspiledModules(allModules); const includeRegex = new RegExp(modulesToTranspile.join('|')); + const excludeRegex = new RegExp(transpiledModules.join('|')); console.info('modules to transpile:', modulesToTranspile); + console.info('transpiled modules:', transpiledModules); return { loader: 'babel-loader', @@ -40,6 +43,10 @@ module.exports = (stripesConfig) => { return false; } + if (/node_modules/.test(modulePath)) { + return false; + } + return true; }, options: { diff --git a/webpack/module-paths.js b/webpack/module-paths.js index 7989bba..96f4b20 100644 --- a/webpack/module-paths.js +++ b/webpack/module-paths.js @@ -210,6 +210,20 @@ function getNonTranspiledModules(modules) { return nonTranspiledModules; } +function getTranspiledModules(modules) { + const transpiledModules = []; + + modules.forEach(module => { + const distPath = tryResolve(path.join(module, 'dist')); + + if (distPath) { + transpiledModules.push(distPath); + } + }); + + return transpiledModules; +} + function getSharedStyles(filename) { return path.resolve(generateStripesAlias('@folio/stripes-components'), filename + ".css"); } @@ -221,5 +235,6 @@ module.exports = { locateStripesModule, getModulesPaths, getStripesModulesPaths, - getNonTranspiledModules + getNonTranspiledModules, + getTranspiledModules }; From 79aad198411e7e11b86940d7fa159a4dd8f048fd Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Tue, 1 Nov 2022 00:26:09 -0400 Subject: [PATCH 17/41] Cleanup --- webpack.config.cli.prod.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/webpack.config.cli.prod.js b/webpack.config.cli.prod.js index 398ca43..1d24aa0 100644 --- a/webpack.config.cli.prod.js +++ b/webpack.config.cli.prod.js @@ -21,9 +21,6 @@ const buildConfig = (stripesConfig) => { appendOnly: true, level: 'warn', }, - externalsPresets: { - node: true // in order to ignore built-in modules like path, fs, etc. - }, }); const modulePaths = getModulesPaths(stripesConfig.modules); @@ -78,7 +75,6 @@ const buildConfig = (stripesConfig) => { new MiniCssExtractPlugin({ filename: 'style.[contenthash].css' }) ); - return { ...prodConfig, ...webpackConfig }; }; From 18400ec283f3e45495e10e87aa8fa8b788143a5a Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Tue, 1 Nov 2022 00:26:54 -0400 Subject: [PATCH 18/41] Cleanup --- webpack.config.cli.dev.js | 1 - 1 file changed, 1 deletion(-) diff --git a/webpack.config.cli.dev.js b/webpack.config.cli.dev.js index 04e0a12..a5b4f21 100644 --- a/webpack.config.cli.dev.js +++ b/webpack.config.cli.dev.js @@ -18,7 +18,6 @@ const buildConfig = (stripesConfig) => { const devConfig = Object.assign({}, base, cli, { devtool: 'inline-source-map', mode: 'development', - // cache: false, cache: { type: 'filesystem', name: 'FOLIOCache', From 6525b6de48abefa06b63c3bf37705cce0ec5ec9e Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Tue, 1 Nov 2022 00:28:23 -0400 Subject: [PATCH 19/41] Cleanup --- webpack/babel-loader-rule.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/webpack/babel-loader-rule.js b/webpack/babel-loader-rule.js index 3087718..5b36b30 100644 --- a/webpack/babel-loader-rule.js +++ b/webpack/babel-loader-rule.js @@ -1,5 +1,10 @@ const babelOptions = require('./babel-options'); -const { getModulesPaths, getStripesModulesPaths, getNonTranspiledModules, getTranspiledModules } = require('./module-paths'); +const { + getModulesPaths, + getStripesModulesPaths, + getNonTranspiledModules, + getTranspiledModules, +} = require('./module-paths'); // a space delimited list of strings (typically namespaces) to use in addition // to "@folio" to determine if something needs Stripes-flavoured transpilation From 0f6b317f3e60af246b0cbb4dac8b7c5728330790 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Tue, 1 Nov 2022 20:03:12 -0400 Subject: [PATCH 20/41] Handle already transpiled CSS files --- consts.js | 27 ++++++----- webpack.config.base.js | 90 ++++++++++++++++++------------------ webpack.config.cli.dev.js | 11 ++++- webpack.config.cli.prod.js | 12 +++-- webpack/babel-loader-rule.js | 13 ++---- webpack/module-paths.js | 24 +++++++++- 6 files changed, 103 insertions(+), 74 deletions(-) diff --git a/consts.js b/consts.js index e32e1f3..f44ca10 100644 --- a/consts.js +++ b/consts.js @@ -1,25 +1,30 @@ // The list of the default externals // https://webpack.js.org/configuration/externals/ const defaultExternals = [ - 'react', - 'react-dom', - 'react-intl', - 'react-router', - 'react-query', - 'moment', - 'moment-timezone', - 'redux', - 'react-redux', - 'stripes-config', '@folio/stripes', + '@folio/stripes-components', '@folio/stripes-connect', '@folio/stripes-core', - '@folio/stripes-components', '@folio/stripes-util', '@folio/stripes-form', '@folio/stripes-final-form', '@folio/stripes-logger', '@folio/stripes-smart-components', + 'final-form', + 'final-form-arrays', + 'moment', + 'moment-timezone', + 'react', + 'react-dom', + 'react-final-form', + 'react-final-form-arrays', + 'react-final-form-listeners', + 'react-intl', + 'react-query', + 'react-redux', + 'react-router', + 'redux', + 'stripes-config', ]; module.exports = { diff --git a/webpack.config.base.js b/webpack.config.base.js index dc19701..4ec28ba 100644 --- a/webpack.config.base.js +++ b/webpack.config.base.js @@ -9,9 +9,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const { generateStripesAlias, tryResolve } = require('./webpack/module-paths'); const typescriptLoaderRule = require('./webpack/typescript-loader-rule'); const { isProduction } = require('./webpack/utils'); - -const stripesComponentsStyles = tryResolve(path.join(generateStripesAlias('@folio/stripes-components'), 'dist/style.css')); -const stripesCoreStyles = tryResolve(path.join(generateStripesAlias('@folio/stripes-core'), 'dist/style.css')); +const { getModulesPaths, getStripesModulesPaths, getTranspiledCssPaths } = require('./webpack/module-paths'); // React doesn't like being included multiple times as can happen when using // yarn link. Here we find a more specific path to it by first looking in @@ -142,59 +140,61 @@ const baseConfig = { }, }; -if (stripesComponentsStyles) { - baseConfig.entry.css.push('@folio/stripes-components/dist/style.css') -} -// TODO: the same will have to happen for every UI module -if (stripesCoreStyles) { - baseConfig.entry.css.push('@folio/stripes-core/dist/style.css') -} +const buildConfig = (modulePaths) => { + const transpiledCssPaths = getTranspiledCssPaths(modulePaths); + + transpiledCssPaths.forEach(cssPath => { + baseConfig.entry.css.push(cssPath); + }); + + if (transpiledCssPaths.length) { + baseConfig.module.rules.push({ + test: /\.css$/, + include: [/dist\/style.css/], + use: [ + { + loader: 'style-loader' + }, + { + loader: 'css-loader', + options: { + modules: false + }, + }, + ], + }); + } -if (stripesComponentsStyles) { baseConfig.module.rules.push({ test: /\.css$/, - include: [/dist\/style.css/], + exclude: [/dist\/style.css/], use: [ + isProduction ? + { loader: MiniCssExtractPlugin.loader } : + { loader: 'style-loader' }, { - loader: 'style-loader' + loader: 'css-loader', + options: { + modules: { + localIdentName: '[local]---[hash:base64:5]', + }, + importLoaders: 1, + }, }, { - loader: 'css-loader', + loader: 'postcss-loader', options: { - modules: false + postcssOptions: { + config: path.resolve(__dirname, 'postcss.config.js'), + }, + sourceMap: true, }, }, - ], + ] }); -} -baseConfig.module.rules.push({ - test: /\.css$/, - exclude: [/dist\/style.css/], - use: [ - isProduction ? - { loader: MiniCssExtractPlugin.loader } : - { loader: 'style-loader' }, - { - loader: 'css-loader', - options: { - modules: { - localIdentName: '[local]---[hash:base64:5]', - }, - importLoaders: 1, - }, - }, - { - loader: 'postcss-loader', - options: { - postcssOptions: { - config: path.resolve(__dirname, 'postcss.config.js'), - }, - sourceMap: true, - }, - }, - ] -}); + return baseConfig; +} -module.exports = baseConfig; +module.exports = buildConfig; diff --git a/webpack.config.cli.dev.js b/webpack.config.cli.dev.js index a5b4f21..ce0004d 100644 --- a/webpack.config.cli.dev.js +++ b/webpack.config.cli.dev.js @@ -4,17 +4,24 @@ const webpack = require('webpack'); const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); +const { getModulesPaths, getStripesModulesPaths } = require('./webpack/module-paths'); const { tryResolve } = require('./webpack/module-paths'); const babelLoaderRule = require('./webpack/babel-loader-rule'); const utils = require('./webpack/utils'); -const base = require('./webpack.config.base'); +const buildBaseConfig = require('./webpack.config.base'); const cli = require('./webpack.config.cli'); + const useBrowserMocha = () => { return tryResolve('mocha/mocha-es2018.js') ? 'mocha/mocha-es2018.js' : 'mocha'; }; const buildConfig = (stripesConfig) => { + const modulePaths = getModulesPaths(stripesConfig.modules); + const stripesModulePaths = getStripesModulesPaths(); + const allModulePaths = [...stripesModulePaths, ...modulePaths]; + + const base = buildBaseConfig(allModulePaths); const devConfig = Object.assign({}, base, cli, { devtool: 'inline-source-map', mode: 'development', @@ -55,7 +62,7 @@ const buildConfig = (stripesConfig) => { devConfig.resolve.alias.process = 'process/browser.js'; devConfig.resolve.alias['mocha'] = useBrowserMocha(); - devConfig.module.rules.push(babelLoaderRule(stripesConfig)); + devConfig.module.rules.push(babelLoaderRule(allModulePaths)); // add 'Buffer' global required for tests/reporting tools. devConfig.plugins.push( diff --git a/webpack.config.cli.prod.js b/webpack.config.cli.prod.js index 1d24aa0..c022bd2 100644 --- a/webpack.config.cli.prod.js +++ b/webpack.config.cli.prod.js @@ -8,12 +8,16 @@ const TerserPlugin = require('terser-webpack-plugin'); const { getSharedStyles } = require('./webpack/module-paths'); const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); -const base = require('./webpack.config.base'); +const buildBaseConfig = require('./webpack.config.base'); const cli = require('./webpack.config.cli'); const babelLoaderRule = require('./webpack/babel-loader-rule'); const { getModulesPaths, getStripesModulesPaths, getTranspiledModules } = require('./webpack/module-paths'); const buildConfig = (stripesConfig) => { + const modulePaths = getModulesPaths(stripesConfig.modules); + const stripesModulePaths = getStripesModulesPaths(); + const allModulePaths = [...stripesModulePaths, ...modulePaths]; + const base = buildBaseConfig(allModulePaths); const prodConfig = Object.assign({}, base, cli, { mode: 'production', devtool: 'source-map', @@ -23,9 +27,7 @@ const buildConfig = (stripesConfig) => { }, }); - const modulePaths = getModulesPaths(stripesConfig.modules); - const stripesModulePaths = getStripesModulesPaths(); - const transpiledModules = getTranspiledModules([...stripesModulePaths, ...modulePaths]); + const transpiledModules = getTranspiledModules(allModules); const transpiledModulesRegex = new RegExp(transpiledModules.join('|')); const smp = new SpeedMeasurePlugin(); @@ -68,7 +70,7 @@ const buildConfig = (stripesConfig) => { minimize: true, } - prodConfig.module.rules.push(babelLoaderRule(stripesConfig)); + prodConfig.module.rules.push(babelLoaderRule(allModulePaths)); const webpackConfig = smp.wrap({ plugins: prodConfig.plugins }); webpackConfig.plugins.push( diff --git a/webpack/babel-loader-rule.js b/webpack/babel-loader-rule.js index 5b36b30..b4f779e 100644 --- a/webpack/babel-loader-rule.js +++ b/webpack/babel-loader-rule.js @@ -1,7 +1,5 @@ const babelOptions = require('./babel-options'); const { - getModulesPaths, - getStripesModulesPaths, getNonTranspiledModules, getTranspiledModules, } = require('./module-paths'); @@ -10,12 +8,9 @@ const { // to "@folio" to determine if something needs Stripes-flavoured transpilation const extraTranspile = process.env.STRIPES_TRANSPILE_TOKENS ? new RegExp(process.env.STRIPES_TRANSPILE_TOKENS.replaceAll(' ', '|')) : ''; -module.exports = (stripesConfig) => { - const modulePaths = getModulesPaths(stripesConfig.modules); - const stripesModulePaths = getStripesModulesPaths(); - const allModules = [...stripesModulePaths, ...modulePaths]; - const modulesToTranspile = getNonTranspiledModules(allModules); - const transpiledModules = getTranspiledModules(allModules); +module.exports = (modulePaths) => { + const modulesToTranspile = getNonTranspiledModules(modulePaths); + const transpiledModules = getTranspiledModules(modulePaths); const includeRegex = new RegExp(modulesToTranspile.join('|')); const excludeRegex = new RegExp(transpiledModules.join('|')); @@ -37,8 +32,6 @@ module.exports = (stripesConfig) => { } // include STRIPES_TRANSPILE_TOKENS in transpilation - // TODO: Should we check if the modules listed in STRIPES_TRANSPILE_TOKENS are - // already transpiled (the dist folder exists). if (extraTranspile && extraTranspile.test(modulePath)) { return true; } diff --git a/webpack/module-paths.js b/webpack/module-paths.js index 96f4b20..e5f18ca 100644 --- a/webpack/module-paths.js +++ b/webpack/module-paths.js @@ -152,6 +152,7 @@ function getStripesDepsPaths(packageJsonPath) { * './node_modules/@reshare/directory' * ] * + * */ function getModulesPaths(modules) { return Object @@ -175,6 +176,12 @@ function getModulesPaths(modules) { .filter(module => !!module); } +/** + * Return full paths for all stripes dependencies defined in: + * + * https://github.com/folio-org/stripes/blob/ab01ed9c8d60d020d76f5682406b3bf901c24e76/package.json#L20-L27 + * +*/ function getStripesModulesPaths() { const packageJsonPath = locatePackageJsonPath('@folio/stripes'); const packageJson = require(packageJsonPath); @@ -224,6 +231,20 @@ function getTranspiledModules(modules) { return transpiledModules; } +function getTranspiledCssPaths(modules) { + const cssPaths = []; + + modules.forEach(module => { + const cssPath = tryResolve(path.join(module, 'dist', 'style.css')); + + if (cssPath) { + cssPaths.push(cssPath); + } + }); + + return cssPaths; +} + function getSharedStyles(filename) { return path.resolve(generateStripesAlias('@folio/stripes-components'), filename + ".css"); } @@ -236,5 +257,6 @@ module.exports = { getModulesPaths, getStripesModulesPaths, getNonTranspiledModules, - getTranspiledModules + getTranspiledModules, + getTranspiledCssPaths, }; From 453d42ab058a05f4f9ecd4ab385abc06b1f3c599 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Tue, 1 Nov 2022 20:17:44 -0400 Subject: [PATCH 21/41] Cleanup --- webpack.config.cli.prod.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.config.cli.prod.js b/webpack.config.cli.prod.js index c022bd2..1ed40d5 100644 --- a/webpack.config.cli.prod.js +++ b/webpack.config.cli.prod.js @@ -27,7 +27,7 @@ const buildConfig = (stripesConfig) => { }, }); - const transpiledModules = getTranspiledModules(allModules); + const transpiledModules = getTranspiledModules(allModulePaths); const transpiledModulesRegex = new RegExp(transpiledModules.join('|')); const smp = new SpeedMeasurePlugin(); From 93fc9d87313ed857b624a97794e73ec4717c875f Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Tue, 1 Nov 2022 21:38:51 -0400 Subject: [PATCH 22/41] Cleanup --- test/webpack/babel-loader-rule.spec.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/test/webpack/babel-loader-rule.spec.js b/test/webpack/babel-loader-rule.spec.js index 1cfca8a..ee5520d 100644 --- a/test/webpack/babel-loader-rule.spec.js +++ b/test/webpack/babel-loader-rule.spec.js @@ -1,27 +1,28 @@ const expect = require('chai').expect; const babelLoaderRule = require('../../webpack/babel-loader-rule'); +const modulePaths = require('../../webpack/module-paths'); describe('The babel-loader-rule', function () { describe('test condition function', function () { beforeEach(function () { - this.sut = babelLoaderRule({ modules: {} }).test; + this.sut = babelLoaderRule(['@folio/inventory']); }); it('selects files for @folio scoped node_modules', function () { - const fileName = '/projects/folio/folio-testing-platform/node_modules/@folio/inventory/index.js'; - const result = this.sut(fileName); + const fileName = '/projects/folio/folio-testing-platform/node_modules/stripes-config'; + const result = this.sut.include(fileName); expect(result).to.equal(true); }); it('does not select node_modules files outside of @folio scope', function () { const fileName = '/projects/folio/folio-testing-platform/node_modules/lodash/lodash.js'; - const result = this.sut(fileName); + const result = this.sut.include(fileName); expect(result).to.equal(false); }); it('only selects .js file extensions', function () { const fileName = '/project/folio/folio-testing-platform/node_modules/@folio/search/package.json'; - const result = this.sut(fileName); + const result = this.sut.include(fileName); expect(result).to.equal(false); }); @@ -29,7 +30,7 @@ describe('The babel-loader-rule', function () { // This test case would hold true for yarn-linked modules, @folio scoped or otherwise // Therefore this implies that we are not yarn-linking any non-@folio scoped modules const fileName = '/projects/folio/stripes-core/src/configureLogger.js'; - const result = this.sut(fileName); + const result = this.sut.include(fileName); expect(result).to.equal(true); }); }); From 18b02d2a54f388fbb987da002f925cc8f7d97b57 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Wed, 2 Nov 2022 13:52:44 -0400 Subject: [PATCH 23/41] Fix tests --- webpack/babel-loader-rule.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/webpack/babel-loader-rule.js b/webpack/babel-loader-rule.js index b4f779e..0df98ab 100644 --- a/webpack/babel-loader-rule.js +++ b/webpack/babel-loader-rule.js @@ -11,8 +11,8 @@ const extraTranspile = process.env.STRIPES_TRANSPILE_TOKENS ? new RegExp(process module.exports = (modulePaths) => { const modulesToTranspile = getNonTranspiledModules(modulePaths); const transpiledModules = getTranspiledModules(modulePaths); - const includeRegex = new RegExp(modulesToTranspile.join('|')); - const excludeRegex = new RegExp(transpiledModules.join('|')); + const includeRegex = modulesToTranspile.length ? new RegExp(modulesToTranspile.join('|')) : null; + const excludeRegex = transpiledModules.length ? new RegExp(transpiledModules.join('|')) : null; console.info('modules to transpile:', modulesToTranspile); console.info('transpiled modules:', transpiledModules); @@ -27,7 +27,7 @@ module.exports = (modulePaths) => { } // regex which represents modules which should be included for transpilation - if (includeRegex.test(modulePath)) { + if (includeRegex && includeRegex.test(modulePath)) { return true; } @@ -37,7 +37,7 @@ module.exports = (modulePaths) => { } // regex which represents modules which should be excluded from transpilation - if (excludeRegex.test(modulePath)) { + if (excludeRegex && excludeRegex.test(modulePath)) { return false; } From 3eb901a53ff78f1db98edc1c49438541f14367ed Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Sat, 5 Nov 2022 20:49:59 -0400 Subject: [PATCH 24/41] Add woff2 support --- webpack.config.cli.transpile.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/webpack.config.cli.transpile.js b/webpack.config.cli.transpile.js index 940d565..1596006 100644 --- a/webpack.config.cli.transpile.js +++ b/webpack.config.cli.transpile.js @@ -28,6 +28,13 @@ const config = { loader: 'babel-loader', options: babelOptions, }, + { + test: /\.(woff2?)$/, + type: 'asset/resource', + generator: { + filename: './fonts/[name].[contenthash].[ext]', + }, + }, { test: /\.css$/, use: [ From 1e9ea48d69b95e545ce56bcc14f075037423ddcb Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Sat, 5 Nov 2022 21:44:20 -0400 Subject: [PATCH 25/41] Remove empty scripts --- package.json | 1 + webpack.config.base.js | 10 ++++++---- webpack.config.cli.js | 1 + 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 835fd63..49c0d22 100644 --- a/package.json +++ b/package.json @@ -78,6 +78,7 @@ "util-ex": "^0.3.15", "webpack-dev-middleware": "^5.2.1", "webpack-hot-middleware": "^2.25.1", + "webpack-remove-empty-scripts": "^1.0.1", "webpack-virtual-modules": "^0.4.3" }, "devDependencies": { diff --git a/webpack.config.base.js b/webpack.config.base.js index 4ec28ba..98f00fb 100644 --- a/webpack.config.base.js +++ b/webpack.config.base.js @@ -5,6 +5,7 @@ const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const LodashModuleReplacementPlugin = require('lodash-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts'); const { generateStripesAlias, tryResolve } = require('./webpack/module-paths'); const typescriptLoaderRule = require('./webpack/typescript-loader-rule'); @@ -85,6 +86,7 @@ const baseConfig = { 'paths': true, 'placeholders': true // (requires currying) }), + new RemoveEmptyScriptsPlugin(), ], module: { rules: [ @@ -144,11 +146,11 @@ const baseConfig = { const buildConfig = (modulePaths) => { const transpiledCssPaths = getTranspiledCssPaths(modulePaths); - transpiledCssPaths.forEach(cssPath => { - baseConfig.entry.css.push(cssPath); - }); - if (transpiledCssPaths.length) { + transpiledCssPaths.forEach(cssPath => { + baseConfig.entry.css.push(cssPath); + }); + baseConfig.module.rules.push({ test: /\.css$/, include: [/dist\/style.css/], diff --git a/webpack.config.cli.js b/webpack.config.cli.js index 858aac9..b2f6f2e 100644 --- a/webpack.config.cli.js +++ b/webpack.config.cli.js @@ -9,5 +9,6 @@ module.exports = { filename: 'bundle.[name][contenthash].js', chunkFilename: 'chunk.[name][chunkhash].js', publicPath: '/', + clean: true }, }; From 205cd936261525962081bf8a035db7ea3dad054a Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Fri, 27 Jan 2023 15:14:23 -0500 Subject: [PATCH 26/41] skip stripes-ui from transpilation --- webpack/module-paths.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack/module-paths.js b/webpack/module-paths.js index e5f18ca..d004e47 100644 --- a/webpack/module-paths.js +++ b/webpack/module-paths.js @@ -205,7 +205,7 @@ function getStripesModulesPaths() { } function getNonTranspiledModules(modules) { - const nonTranspiledModules = ['stripes-config', 'stripes-web']; + const nonTranspiledModules = ['stripes-config', 'stripes-ui']; modules.forEach(module => { const distPath = tryResolve(path.join(module, 'dist')); From fbe69a7cbf6da170c587bf8498f2dbda1d159edf Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Fri, 27 Jan 2023 15:21:33 -0500 Subject: [PATCH 27/41] Add disableDeprecationNotice to postcss --- postcss.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/postcss.config.js b/postcss.config.js index 817636b..1016842 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -27,7 +27,8 @@ module.exports = { autoprefixer(), postCssCustomProperties({ preserve: false, - importFrom: [locateCssVariables()] + importFrom: [locateCssVariables()], + disableDeprecationNotice: true }), postCssCalc(), postCssNesting(), From 937663b25a5d958b05c284120ff9174dcceb7ab3 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Mon, 30 Jan 2023 11:35:27 -0500 Subject: [PATCH 28/41] Improve path resolution --- webpack/module-paths.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/webpack/module-paths.js b/webpack/module-paths.js index d004e47..7dcc69b 100644 --- a/webpack/module-paths.js +++ b/webpack/module-paths.js @@ -132,8 +132,8 @@ function getStripesDepsPaths(packageJsonPath) { const stripesDeps = stripes.stripesDeps; return stripesDeps.map(dep => { - const path = locatePackageJsonPath(dep); - return path ? path.replace('/package.json', '') : null; + const packageJsonPath = locatePackageJsonPath(dep); + return packageJsonPath ? path.dirname(packageJsonPath) : null; }); } @@ -161,7 +161,7 @@ function getModulesPaths(modules) { const packageJsonPath = locatePackageJsonPath(module); if (packageJsonPath) { - const modulePaths = [packageJsonPath.replace('/package.json', '')]; + const modulePaths = [path.dirname(packageJsonPath)]; const stripesDepPaths = getStripesDepsPaths(packageJsonPath); if (stripesDepPaths) { @@ -196,7 +196,7 @@ function getStripesModulesPaths() { const stripesModulePath = locatePackageJsonPath(moduleName); if (stripesModulePath) { - paths.push(stripesModulePath.replace('/package.json', '')); + paths.push(path.dirname(stripesModulePath)); } } }); From 8ea65ddd3e274ba98e9f59b4b343e201071c7e85 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Mon, 30 Jan 2023 15:36:51 -0500 Subject: [PATCH 29/41] Update css entry --- webpack.config.cli.dev.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.config.cli.dev.js b/webpack.config.cli.dev.js index f238106..ff4c894 100644 --- a/webpack.config.cli.dev.js +++ b/webpack.config.cli.dev.js @@ -40,7 +40,7 @@ const buildConfig = (stripesConfig) => { devConfig.output.filename = 'bundle.js'; devConfig.entry = [ 'webpack-hot-middleware/client', - '@folio/stripes-components/lib/global.css', + ...devConfig.entry.css, '@folio/stripes-ui', ]; From 1877c08009f64624bfa89acb3b39bcdcf23b8db0 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Tue, 31 Jan 2023 15:56:41 -0500 Subject: [PATCH 30/41] use path.sep --- webpack/module-paths.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webpack/module-paths.js b/webpack/module-paths.js index 7dcc69b..55c33fa 100644 --- a/webpack/module-paths.js +++ b/webpack/module-paths.js @@ -210,7 +210,7 @@ function getNonTranspiledModules(modules) { modules.forEach(module => { const distPath = tryResolve(path.join(module, 'dist')); if (!distPath) { - nonTranspiledModules.push(module.split('/').pop()); + nonTranspiledModules.push(module.split(path.sep).pop()); } }); @@ -246,7 +246,7 @@ function getTranspiledCssPaths(modules) { } function getSharedStyles(filename) { - return path.resolve(generateStripesAlias('@folio/stripes-components'), filename + ".css"); + return path.resolve(generateStripesAlias('@folio/stripes-components'), filename + '.css'); } module.exports = { From 11955af67c0a2f057a77bff92fdd0528b6e5064b Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Tue, 31 Jan 2023 15:58:06 -0500 Subject: [PATCH 31/41] Cleanup --- webpack/module-paths.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack/module-paths.js b/webpack/module-paths.js index 55c33fa..1af096e 100644 --- a/webpack/module-paths.js +++ b/webpack/module-paths.js @@ -246,7 +246,7 @@ function getTranspiledCssPaths(modules) { } function getSharedStyles(filename) { - return path.resolve(generateStripesAlias('@folio/stripes-components'), filename + '.css'); + return path.resolve(generateStripesAlias('@folio/stripes-components'), `${filename}.css`); } module.exports = { From f4e5bab50c758d9716be3d27dc58938bbb6ed208 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Tue, 31 Jan 2023 16:42:00 -0500 Subject: [PATCH 32/41] Adjust css dist path regex --- webpack.config.base.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/webpack.config.base.js b/webpack.config.base.js index d2ec29f..217a07a 100644 --- a/webpack.config.base.js +++ b/webpack.config.base.js @@ -7,10 +7,10 @@ const LodashModuleReplacementPlugin = require('lodash-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts'); -const { generateStripesAlias, tryResolve } = require('./webpack/module-paths'); +const { generateStripesAlias } = require('./webpack/module-paths'); const typescriptLoaderRule = require('./webpack/typescript-loader-rule'); const { isProduction } = require('./webpack/utils'); -const { getModulesPaths, getStripesModulesPaths, getTranspiledCssPaths } = require('./webpack/module-paths'); +const { getTranspiledCssPaths } = require('./webpack/module-paths'); // React doesn't like being included multiple times as can happen when using // yarn link. Here we find a more specific path to it by first looking in @@ -145,6 +145,7 @@ const baseConfig = { const buildConfig = (modulePaths) => { const transpiledCssPaths = getTranspiledCssPaths(modulePaths); + const cssDistPathRegex = new RegExp(`dist(\/|\\\\)style.css`); if (transpiledCssPaths.length) { transpiledCssPaths.forEach(cssPath => { @@ -153,7 +154,7 @@ const buildConfig = (modulePaths) => { baseConfig.module.rules.push({ test: /\.css$/, - include: [/dist\/style.css/], + include: [cssDistPathRegex], use: [ { loader: 'style-loader' @@ -170,7 +171,7 @@ const buildConfig = (modulePaths) => { baseConfig.module.rules.push({ test: /\.css$/, - exclude: [/dist\/style.css/], + exclude: [cssDistPathRegex], use: [ isProduction ? { loader: MiniCssExtractPlugin.loader } : From b59901b1c297f7c6f27838d68f9b1e6fbc108818 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Wed, 1 Feb 2023 23:29:55 -0500 Subject: [PATCH 33/41] More cleanup for Windows --- webpack/babel-loader-rule.js | 37 ++++++++++++++++++++++++++++++++---- webpack/module-paths.js | 2 +- 2 files changed, 34 insertions(+), 5 deletions(-) diff --git a/webpack/babel-loader-rule.js b/webpack/babel-loader-rule.js index 0df98ab..02031bf 100644 --- a/webpack/babel-loader-rule.js +++ b/webpack/babel-loader-rule.js @@ -1,3 +1,5 @@ +const path = require('path'); + const babelOptions = require('./babel-options'); const { getNonTranspiledModules, @@ -8,14 +10,34 @@ const { // to "@folio" to determine if something needs Stripes-flavoured transpilation const extraTranspile = process.env.STRIPES_TRANSPILE_TOKENS ? new RegExp(process.env.STRIPES_TRANSPILE_TOKENS.replaceAll(' ', '|')) : ''; +// https://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex/6969486#6969486 +const escapeRegExp = string => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); + module.exports = (modulePaths) => { const modulesToTranspile = getNonTranspiledModules(modulePaths); const transpiledModules = getTranspiledModules(modulePaths); - const includeRegex = modulesToTranspile.length ? new RegExp(modulesToTranspile.join('|')) : null; - const excludeRegex = transpiledModules.length ? new RegExp(transpiledModules.join('|')) : null; + let includeRegex; + let excludeRegex; + + if (modulesToTranspile.length) { + includeRegex = new RegExp(modulesToTranspile.map(escapeRegExp).join('|')); + console.info('\nmodules to transpile:\n'); + modulesToTranspile.forEach(m => console.log(m)); + } + + if (transpiledModules.length) { + excludeRegex = new RegExp(transpiledModules.map(escapeRegExp).join('|')) + console.info('\ntranspiled modules:\n'); + transpiledModules.forEach(m => console.log(m)); + } - console.info('modules to transpile:', modulesToTranspile); - console.info('transpiled modules:', transpiledModules); + const folioModulePath = path.join('node_modules', '@folio'); + // A negative lookahead regex to find @folio modules present in node_modules + // which are still not transpiled ('dist' folder is not present). + // This currently happens when folio module is not listed in stripes config + // or under stripes.stripesDeps and another folio module includes it as a dependency. + // TODO: remove this after all modules are cleanuped and transpiled + const folioModulesRegex = new RegExp(`${escapeRegExp(folioModulePath)}(?!.*dist)`); return { loader: 'babel-loader', @@ -41,6 +63,13 @@ module.exports = (modulePaths) => { return false; } + // if untranspiled @folio module is present in node_modules + // just transpile it + if (folioModulesRegex.test(modulePath)) { + return true; + } + + // skip everything from node_modules if (/node_modules/.test(modulePath)) { return false; } diff --git a/webpack/module-paths.js b/webpack/module-paths.js index 1af096e..94d6e17 100644 --- a/webpack/module-paths.js +++ b/webpack/module-paths.js @@ -205,7 +205,7 @@ function getStripesModulesPaths() { } function getNonTranspiledModules(modules) { - const nonTranspiledModules = ['stripes-config', 'stripes-ui']; + const nonTranspiledModules = ['stripes-config']; modules.forEach(module => { const distPath = tryResolve(path.join(module, 'dist')); From 96e92ecaff8fed7ad28b1aa42880303349d03fc4 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Wed, 8 Mar 2023 11:36:49 -0500 Subject: [PATCH 34/41] Fix tests --- test/webpack/babel-loader-rule.spec.js | 7 +++---- webpack/babel-loader-rule.js | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/test/webpack/babel-loader-rule.spec.js b/test/webpack/babel-loader-rule.spec.js index ee5520d..ace5b09 100644 --- a/test/webpack/babel-loader-rule.spec.js +++ b/test/webpack/babel-loader-rule.spec.js @@ -1,8 +1,7 @@ const expect = require('chai').expect; const babelLoaderRule = require('../../webpack/babel-loader-rule'); -const modulePaths = require('../../webpack/module-paths'); -describe('The babel-loader-rule', function () { +describe.only('The babel-loader-rule', function () { describe('test condition function', function () { beforeEach(function () { this.sut = babelLoaderRule(['@folio/inventory']); @@ -22,8 +21,8 @@ describe('The babel-loader-rule', function () { it('only selects .js file extensions', function () { const fileName = '/project/folio/folio-testing-platform/node_modules/@folio/search/package.json'; - const result = this.sut.include(fileName); - expect(result).to.equal(false); + const result = fileName.match(this.sut.test); + expect(result).to.equal(null); }); it('selects files outside of both @folio scope and node_modules', function () { diff --git a/webpack/babel-loader-rule.js b/webpack/babel-loader-rule.js index 02031bf..e8c60b6 100644 --- a/webpack/babel-loader-rule.js +++ b/webpack/babel-loader-rule.js @@ -36,7 +36,7 @@ module.exports = (modulePaths) => { // which are still not transpiled ('dist' folder is not present). // This currently happens when folio module is not listed in stripes config // or under stripes.stripesDeps and another folio module includes it as a dependency. - // TODO: remove this after all modules are cleanuped and transpiled + // TODO: remove this after all modules are transpiled const folioModulesRegex = new RegExp(`${escapeRegExp(folioModulePath)}(?!.*dist)`); return { From 9f380b45cdef086bf7120dd33b5ad893ba8fffa5 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Thu, 9 Mar 2023 14:15:27 -0500 Subject: [PATCH 35/41] Cleanup css based on feedback --- webpack.config.base.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/webpack.config.base.js b/webpack.config.base.js index fdfe997..ba700b7 100644 --- a/webpack.config.base.js +++ b/webpack.config.base.js @@ -64,6 +64,7 @@ const baseConfig = { template: fs.existsSync('index.html') ? 'index.html' : `${__dirname}/index.html`, }), new webpack.EnvironmentPlugin(['NODE_ENV']), + new RemoveEmptyScriptsPlugin(), ], module: { rules: [ @@ -122,8 +123,9 @@ const baseConfig = { const buildConfig = (modulePaths) => { const transpiledCssPaths = getTranspiledCssPaths(modulePaths); - const cssDistPathRegex = new RegExp(`dist(\/|\\\\)style.css`); + const cssDistPathRegex = /dist[\/\\]style\.css/; + // already transpiled css files if (transpiledCssPaths.length) { transpiledCssPaths.forEach(cssPath => { baseConfig.entry.css.push(cssPath); @@ -133,9 +135,7 @@ const buildConfig = (modulePaths) => { test: /\.css$/, include: [cssDistPathRegex], use: [ - { - loader: 'style-loader' - }, + { loader: isProduction ? MiniCssExtractPlugin.loader : 'style-loader' }, { loader: 'css-loader', options: { @@ -146,13 +146,12 @@ const buildConfig = (modulePaths) => { }); } + // css files not transpiled yet baseConfig.module.rules.push({ test: /\.css$/, exclude: [cssDistPathRegex], use: [ - isProduction ? - { loader: MiniCssExtractPlugin.loader } : - { loader: 'style-loader' }, + { loader: isProduction ? MiniCssExtractPlugin.loader : 'style-loader' }, { loader: 'css-loader', options: { From 41c4ce976a221529c1e619d633ec8a8889a86b9e Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Thu, 9 Mar 2023 16:07:42 -0500 Subject: [PATCH 36/41] Adjust tsconfig --- webpack/tsconfig.json | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/webpack/tsconfig.json b/webpack/tsconfig.json index f752869..42460f1 100644 --- a/webpack/tsconfig.json +++ b/webpack/tsconfig.json @@ -12,7 +12,9 @@ "../../**/*.ts", "../../**/*.tsx", "node_modules/@folio/**/*.ts", - "node_modules/@folio/**/*.tsx" + "node_modules/@folio/**/*.tsx", + "../node_modules/@folio/**/*.ts", + "../node_modules/@folio/**/*.tsx" ], "exclude": [ "../../**/*.test.ts", @@ -22,6 +24,8 @@ "node_modules/@folio/**/*.test.ts", "node_modules/@folio/**/*.test.tsx", "node_modules/@folio/**/test/**/*.ts", - "node_modules/@folio/**/test/**/*.tsx" + "node_modules/@folio/**/test/**/*.tsx", + "../node_modules/@folio/**/test/**/*.ts", + "../node_modules/@folio/**/test/**/*.tsx" ] } From 09096b1e9479721cc91719adc7a8730d185c26c9 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Thu, 9 Mar 2023 16:38:45 -0500 Subject: [PATCH 37/41] Cleanup --- webpack/babel-loader-rule.js | 2 +- webpack/module-paths.js | 2 +- webpack/tsconfig.json | 8 ++++++-- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/webpack/babel-loader-rule.js b/webpack/babel-loader-rule.js index e8c60b6..78f62f8 100644 --- a/webpack/babel-loader-rule.js +++ b/webpack/babel-loader-rule.js @@ -22,7 +22,7 @@ module.exports = (modulePaths) => { if (modulesToTranspile.length) { includeRegex = new RegExp(modulesToTranspile.map(escapeRegExp).join('|')); console.info('\nmodules to transpile:\n'); - modulesToTranspile.forEach(m => console.log(m)); + modulesToTranspile.sort().forEach(m => console.log(m)); } if (transpiledModules.length) { diff --git a/webpack/module-paths.js b/webpack/module-paths.js index 94d6e17..1c612c8 100644 --- a/webpack/module-paths.js +++ b/webpack/module-paths.js @@ -214,7 +214,7 @@ function getNonTranspiledModules(modules) { } }); - return nonTranspiledModules; + return [...new Set(nonTranspiledModules)]; } function getTranspiledModules(modules) { diff --git a/webpack/tsconfig.json b/webpack/tsconfig.json index 42460f1..9d3be5c 100644 --- a/webpack/tsconfig.json +++ b/webpack/tsconfig.json @@ -14,7 +14,9 @@ "node_modules/@folio/**/*.ts", "node_modules/@folio/**/*.tsx", "../node_modules/@folio/**/*.ts", - "../node_modules/@folio/**/*.tsx" + "../node_modules/@folio/**/*.tsx", + "../../node_modules/@folio/**/*.ts", + "../../node_modules/@folio/**/*.tsx" ], "exclude": [ "../../**/*.test.ts", @@ -26,6 +28,8 @@ "node_modules/@folio/**/test/**/*.ts", "node_modules/@folio/**/test/**/*.tsx", "../node_modules/@folio/**/test/**/*.ts", - "../node_modules/@folio/**/test/**/*.tsx" + "../node_modules/@folio/**/test/**/*.tsx", + "../../node_modules/@folio/**/test/**/*.ts", + "../../node_modules/@folio/**/test/**/*.tsx" ] } From 9c9c98199f7d9619334740aa4764c6e78feb972e Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Wed, 15 Mar 2023 10:55:17 -0400 Subject: [PATCH 38/41] Remove only to run all tests --- test/webpack/babel-loader-rule.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/webpack/babel-loader-rule.spec.js b/test/webpack/babel-loader-rule.spec.js index ace5b09..90d0014 100644 --- a/test/webpack/babel-loader-rule.spec.js +++ b/test/webpack/babel-loader-rule.spec.js @@ -1,7 +1,7 @@ const expect = require('chai').expect; const babelLoaderRule = require('../../webpack/babel-loader-rule'); -describe.only('The babel-loader-rule', function () { +describe('The babel-loader-rule', function () { describe('test condition function', function () { beforeEach(function () { this.sut = babelLoaderRule(['@folio/inventory']); From 6033b233856305a832af2d6dcb3c8611022df8d3 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Thu, 16 Mar 2023 23:58:39 -0400 Subject: [PATCH 39/41] Adjust dependencies --- package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index fd395ab..cfa9659 100644 --- a/package.json +++ b/package.json @@ -66,13 +66,17 @@ "regenerator-runtime": "^0.13.3", "semver": "^7.1.3", "serialize-javascript": "^5.0.0", + "source-map-loader": "^4.0.0", + "speed-measure-webpack-plugin": "^1.5.0", "stream-browserify": "^3.0.0", "style-loader": "^3.3.0", "svgo": "^1.2.2", "svgo-loader": "^2.2.1", "tapable": "^1.0.0", + "terser-webpack-plugin": "^5.3.5", "ts-loader": "^9.4.1", "typescript": "^4.2.4", + "url-loader": "^4.1.1", "util-ex": "^0.3.15", "webpack-dev-middleware": "^5.2.1", "webpack-hot-middleware": "^2.25.1", @@ -85,10 +89,6 @@ "mocha-junit-reporter": "^1.17.0", "sinon": "^7.3.2", "sinon-chai": "^3.3.0", - "source-map-loader": "^4.0.0", - "speed-measure-webpack-plugin": "^1.5.0", - "terser-webpack-plugin": "^5.3.5", - "url-loader": "^4.1.1", "webpack": "^5.58.1" }, "peerDependencies": { From 12f4b4ef916fba9e469130a21535468f92ddc280 Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Thu, 16 Mar 2023 23:59:38 -0400 Subject: [PATCH 40/41] Add ts and tsx to babel-loader test in transpilation config --- webpack.config.cli.transpile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.config.cli.transpile.js b/webpack.config.cli.transpile.js index 1596006..c8a6896 100644 --- a/webpack.config.cli.transpile.js +++ b/webpack.config.cli.transpile.js @@ -23,7 +23,7 @@ const config = { module: { rules: [ { - test: /\.(js|jsx)$/, + test: /\.(js|jsx|ts|tsx)$/, exclude: /node_modules/, loader: 'babel-loader', options: babelOptions, From 1dcc9714598a5b51e7ad76bb1543780adf7c58cd Mon Sep 17 00:00:00 2001 From: Michal Kuklis Date: Mon, 20 Mar 2023 13:25:15 -0400 Subject: [PATCH 41/41] Adjust shared styles --- webpack.config.cli.prod.js | 6 ------ ...shared.styles.js => webpack.config.cli.shared.styles.js | 0 webpack/build.js | 3 +++ webpack/serve.js | 7 ++----- 4 files changed, 5 insertions(+), 11 deletions(-) rename webpack.config.cli.dev.shared.styles.js => webpack.config.cli.shared.styles.js (100%) diff --git a/webpack.config.cli.prod.js b/webpack.config.cli.prod.js index 1ed40d5..8589a12 100644 --- a/webpack.config.cli.prod.js +++ b/webpack.config.cli.prod.js @@ -37,12 +37,6 @@ const buildConfig = (stripesConfig) => { }), ]); - prodConfig.resolve.alias = { - ...prodConfig.resolve.alias, - 'stcom-interactionStyles': getSharedStyles('lib/sharedStyles/interactionStyles'), - 'stcom-variables': getSharedStyles('lib/variables'), - }; - prodConfig.optimization = { mangleWasmImports: false, minimizer: [ diff --git a/webpack.config.cli.dev.shared.styles.js b/webpack.config.cli.shared.styles.js similarity index 100% rename from webpack.config.cli.dev.shared.styles.js rename to webpack.config.cli.shared.styles.js diff --git a/webpack/build.js b/webpack/build.js index b4e93ba..ac5cb8c 100644 --- a/webpack/build.js +++ b/webpack/build.js @@ -5,6 +5,7 @@ const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin'); 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 platformModulePath = path.join(path.resolve(), 'node_modules'); @@ -14,6 +15,8 @@ module.exports = function build(stripesConfig, options) { let config = buildConfig(stripesConfig); + config = sharedStylesConfig(config, {}); + if (!options.skipStripesBuild) { config.plugins.push(new StripesWebpackPlugin({ stripesConfig, createDll: options.createDll })); } diff --git a/webpack/serve.js b/webpack/serve.js index 62c99eb..f3d60d6 100644 --- a/webpack/serve.js +++ b/webpack/serve.js @@ -8,6 +8,7 @@ const StripesWebpackPlugin = require('./stripes-webpack-plugin'); 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 cwd = path.resolve(); const platformModulePath = path.join(cwd, 'node_modules'); @@ -23,11 +24,7 @@ module.exports = function serve(stripesConfig, options) { logger.log('starting serve...'); const app = express(); let config = buildConfig(stripesConfig); - let developmentConfig = require('../webpack.config.cli.dev.shared.styles'); - - if (process.env.NODE_ENV === 'development') { - config = developmentConfig(config, {}); - } + config = sharedStylesConfig(config, {}); config.plugins.push(new StripesWebpackPlugin({ stripesConfig }));