@s-ui/bundler 7.36.0 → 8.0.0-beta.3

package/README.md

@@ -1,4 +1,4 @@
-# sui-bunder
+# sui-bundler
 
 > Config-free bundler for ES6 React apps.
 
@@ -183,11 +183,6 @@ This tool works with zero configuration out the box but you could use some confi
       "sourcemaps": {
         "dev": "cheap-module-eval-source-map",
         "prod": "hidden-source-map"
-      },
-      "optimizations": {
-        "splitFrameworkOnChunk": true,
-        "useExperimentalMinifier": true,
-        "useExperimentalSCSSLoader": true
       }
     }
   }
@@ -315,17 +310,11 @@ Different values can be configured for development (`dev`) and production (`prod
 
 Check all possible values accepted by webpack in the [devtool webpack docs](https://webpack.js.org/configuration/devtool/#devtool)
 
-## Optimizations
-
-You could tweak the performance of your bundle generation by using some flags provided in this config.
-
-`splitFrameworkOnChunk` (default: `false`): Separate in a chunk all the packages related to React. This gives you a separated static hashed file, as the version of React doesn't get often upgraded, and a benefit over HTTP2 connections are you're serving smaller files.
-
-`useExperimentalMinifier` (default: `false`): Use `esbuild-loader` to minify JavaScript and CSS instead using `terser` and `css-minimizer-webpack-plugin` in order to boost build time and memory usage.
+## Migrations
 
-`useExperimentalSCSSLoader` (default: `false`): Use [fast-sass-loader](https://github.com/yibn2008/fast-sass-loader) (currently a fork of it [super-sass-loader](https://github.com/andresz1/super-sass-loader)) instead of `sass-loader` (available in development only)
+### Migrate from v7 to v8
 
-## Migrations
+`useExperimentalSCSSLoader` is not used anymore and it will be ignored.
 
 ### Migrate from v6 to v7
 

package/bin/sui-bundler-build.js

@@ -66,13 +66,14 @@ webpack(nextConfig).run(async (error, stats) => {
 
   if (stats.hasErrors()) {
     const jsonStats = stats.toJson('errors-only')
-    return jsonStats.errors.map(log.error)
+    return jsonStats.errors.map(({message}) => log.error(message))
   }
 
   if (stats.hasWarnings()) {
     const jsonStats = stats.toJson('errors-warnings')
     log.warn('Webpack generated the following warnings: ')
-    jsonStats.warnings.map(log.warn)
+    log.warn(jsonStats.warnings)
+    jsonStats.warnings.map(({message}) => log.warn(message))
   }
 
   console.log(`Webpack stats: ${stats}`)

package/loaders/linkLoaderConfigBuilder.js

@@ -1,14 +1,10 @@
 const fg = require('fast-glob')
 const path = require('path')
 
-const {config} = require('../shared')
 const log = require('../shared/log')
 const {defaultAlias} = require('../shared/resolve-alias')
 const createSassLinkImporter = require('./sassLinkImporter.js')
 
-const useExperimentalSCSSLoader =
-  config.optimizations && config.optimizations.useExperimentalSCSSLoader
-
 const diccFromAbsolutePaths = (paths, init = {}) =>
   paths.reduce((acc, pkg) => {
     const packagePath = path.resolve(pkg)
@@ -64,14 +60,12 @@ module.exports = ({config, packagesToLink, linkAll}) => {
   }
 
   /**
-   * Create a sass-loader config for scss files that
+   * Create a @s-ui/sass-loader config for scss files that
    * are handled by Sass. These are nested modules imported
    * and thus is sass binary which needs a special config for them.
    */
   const sassLoaderWithLinkImporter = {
-    loader: useExperimentalSCSSLoader
-      ? require.resolve('super-sass-loader')
-      : require.resolve('sass-loader'),
+    loader: require.resolve('@s-ui/sass-loader'),
     options: {
       sassOptions: {
         importer: createSassLinkImporter(entryPoints)
@@ -86,7 +80,7 @@ module.exports = ({config, packagesToLink, linkAll}) => {
   const {rules} = config.module
   const rulesWithLink = rules.map(rule => {
     const {use, test: regex} = rule
-    if (!regex.test('.css') || use === 'null-loader') return rule
+    if (!regex.test('.css')) return rule
 
     return {
       ...rule,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s-ui/bundler",
-  "version": "7.36.0",
+  "version": "8.0.0-beta.3",
   "description": "Config-free bundler for ES6 React apps.",
   "bin": {
     "sui-bundler": "./bin/sui-bundler.js"
@@ -23,29 +23,27 @@
   "dependencies": {
     "@babel/core": "7.16.0",
     "@s-ui/helpers": "1",
-    "autoprefixer": "9.8.6",
+    "@s-ui/sass-loader": "1",
+    "autoprefixer": "10.4.0",
     "babel-loader": "8.2.3",
     "babel-preset-sui": "3",
     "commander": "6.2.1",
-    "css-loader": "4.3.0",
-    "css-minimizer-webpack-plugin": "1.1.5",
+    "css-loader": "6.5.1",
+    "css-minimizer-webpack-plugin": "3.1.3",
     "esbuild-loader": "2.16.0",
     "fast-glob": "3.2.7",
-    "html-webpack-plugin": "4.5.0",
-    "mini-css-extract-plugin": "1.6.0",
-    "null-loader": "4.0.1",
-    "postcss": "7.0.35",
-    "postcss-loader": "4.1.0",
+    "html-webpack-plugin": "5.5.0",
+    "mini-css-extract-plugin": "2.4.4",
+    "process": "0.11.10",
+    "postcss": "8.3.11",
+    "postcss-loader": "6.2.0",
     "react-dev-utils": "11.0.4",
     "rimraf": "3.0.2",
-    "sass": "1.43.3",
-    "sass-loader": "10.1.0",
-    "super-sass-loader": "0.1",
+    "sass": "1.43.4",
     "speed-measure-webpack-plugin": "1.5.0",
-    "style-loader": "2.0.0",
-    "terser-webpack-plugin": "4.2.2",
-    "webpack": "4.46.0",
-    "webpack-dev-server": "4.3.1",
+    "style-loader": "3.3.1",
+    "webpack": "5.61.0",
+    "webpack-dev-server": "4.4.0",
     "webpack-manifest-plugin": "4.0.2",
     "webpack-node-externals": "3.0.0"
   }

package/shared/config.js

@@ -2,12 +2,10 @@
 const {
   config: packageJsonConfig = {}
 } = require(`${process.cwd()}/package.json`)
-const {'sui-bundler': config = {}} = packageJsonConfig
 
+const {'sui-bundler': config = {}} = packageJsonConfig
 const {extractComments, sourcemaps} = config
 
 exports.config = config
-exports.useExperimentalMinifier =
-  config.optimizations && config.optimizations.useExperimentalMinifier
 exports.extractComments = extractComments || false
-exports.sourceMap = (sourcemaps && sourcemaps.prod) || 'none'
+exports.sourceMap = (sourcemaps && sourcemaps.prod) || false

package/shared/inline-chunk-html-plugin.js

@@ -0,0 +1,64 @@
+// from: https://github.com/facebook/create-react-app/blob/main/packages/react-dev-utils/InlineChunkHtmlPlugin.js
+
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict'
+
+class InlineChunkHtmlPlugin {
+  constructor(htmlWebpackPlugin, tests) {
+    this.htmlWebpackPlugin = htmlWebpackPlugin
+    this.tests = tests
+  }
+
+  getInlinedTag(publicPath, assets, tag) {
+    if (tag.tagName !== 'script' || !(tag.attributes && tag.attributes.src)) {
+      return tag
+    }
+    const scriptName = publicPath
+      ? tag.attributes.src.replace(publicPath, '')
+      : tag.attributes.src
+    if (!this.tests.some(test => scriptName.match(test))) {
+      return tag
+    }
+    const asset = assets[scriptName]
+    if (asset == null) {
+      return tag
+    }
+    return {tagName: 'script', innerHTML: asset.source(), closeTag: true}
+  }
+
+  apply(compiler) {
+    let publicPath = compiler.options.output.publicPath || ''
+    if (publicPath && !publicPath.endsWith('/')) {
+      publicPath += '/'
+    }
+
+    compiler.hooks.compilation.tap('InlineChunkHtmlPlugin', compilation => {
+      const tagFunction = tag =>
+        this.getInlinedTag(publicPath, compilation.assets, tag)
+
+      const hooks = this.htmlWebpackPlugin.getHooks(compilation)
+      hooks.alterAssetTagGroups.tap('InlineChunkHtmlPlugin', assets => {
+        assets.headTags = assets.headTags.map(tagFunction)
+        assets.bodyTags = assets.bodyTags.map(tagFunction)
+      })
+
+      // Still emit the runtime chunk for users who do not use our generated
+      // index.html file.
+      // hooks.afterEmit.tap('InlineChunkHtmlPlugin', () => {
+      //   Object.keys(compilation.assets).forEach(assetName => {
+      //     if (this.tests.some(test => assetName.match(test))) {
+      //       delete compilation.assets[assetName];
+      //     }
+      //   });
+      // });
+    })
+  }
+}
+
+module.exports = InlineChunkHtmlPlugin

package/shared/minify-js.js

@@ -1,63 +1,10 @@
 const {ESBuildMinifyPlugin} = require('esbuild-loader')
-const TerserPlugin = require('terser-webpack-plugin')
-const {CI = false} = process.env
-const CI_PARALLEL_CORES = 2
 
-const terser = ({extractComments, sourceMap}) =>
-  new TerserPlugin({
-    extractComments,
-    terserOptions: {
-      parse: {
-        // we want terser to parse ecma 8 code. However, we don't want it
-        // to apply any minfication steps that turns valid ecma 5 code
-        // into invalid ecma 5 code. This is why the 'compress' and 'output'
-        // sections only apply transformations that are ecma 5 safe
-        // https://github.com/facebook/create-react-app/pull/4234
-        ecma: 8
-      },
-      compress: {
-        ecma: 5,
-        warnings: false,
-        // Disabled because of an issue with Uglify breaking seemingly valid code:
-        // https://github.com/facebook/create-react-app/issues/2376
-        // Pending further investigation:
-        // https://github.com/mishoo/UglifyJS2/issues/2011
-        comparisons: false,
-        // Disabled because of an issue with Terser breaking valid code:
-        // https://github.com/facebook/create-react-app/issues/5250
-        // Pending futher investigation:
-        // https://github.com/terser-js/terser/issues/120
-        inline: 2
-      },
-      mangle: {
-        safari10: true
-      },
-      output: {
-        ecma: 5,
-        comments: false,
-        // Turned on because emoji and regex is not minified properly using default
-        // https://github.com/facebook/create-react-app/issues/2488
-        ascii_only: true
-      }
-    },
-    // Use multi-process parallel running to improve the build speed
-    // For CI: Use only fixed cores as it gives incorrect info and could cause troubles
-    // Related: https://github.com/webpack-contrib/terser-webpack-plugin/issues/202
-    // If not CI then use os.cpus().length - 1
-    parallel: CI ? CI_PARALLEL_CORES : true,
-    // Enable file caching
-    cache: true,
-    // use sourceMap if parameter is provided
-    sourceMap: !!sourceMap
-  })
-
-const esbuild = ({extractComments, sourceMap}) =>
+const esbuild = ({sourceMap}) =>
   new ESBuildMinifyPlugin({
     target: 'es6',
     sourcemap: sourceMap !== 'none' && sourceMap !== false
   })
 
-module.exports = ({extractComments, sourceMap, useExperimentalMinifier}) =>
-  useExperimentalMinifier
-    ? esbuild({extractComments, sourceMap})
-    : terser({extractComments, sourceMap})
+module.exports = ({extractComments, sourceMap}) =>
+  esbuild({extractComments, sourceMap})

package/utils/formatWebpackMessages.js

@@ -113,8 +113,8 @@ function formatMessage(message) {
 }
 
 function formatWebpackMessages(json) {
-  const formattedErrors = json.errors.map(formatMessage)
-  const formattedWarnings = json.warnings.map(formatMessage)
+  const formattedErrors = json.errors?.map(formatMessage)
+  const formattedWarnings = json.warnings?.map(formatMessage)
   const result = {errors: formattedErrors, warnings: formattedWarnings}
   if (result.errors.some(isLikelyASyntaxError)) {
     // If there are any syntax errors, show just them.

package/webpack.config.dev.js

@@ -1,7 +1,10 @@
+// @ts-check
+
 const path = require('path')
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
+
 const definePlugin = require('./shared/define')
 const manifestLoaderRules = require('./shared/module-rules-manifest-loader')
 const {aliasFromConfig, defaultAlias} = require('./shared/resolve-alias')
@@ -9,13 +12,17 @@ const {envVars, MAIN_ENTRY_POINT, config, cleanList, when} = require('./shared')
 const {resolveLoader} = require('./shared/resolve-loader')
 
 const EXCLUDED_FOLDERS_REGEXP = new RegExp(
-  `node_modules(?!${path.sep}@s-ui(${path.sep}svg|${path.sep}studio)(${path.sep}workbench)?${path.sep}src)`
+  `node_modules(?!${path.sep}@s-ui(${path.sep}studio)(${path.sep}workbench)?${path.sep}src)`
 )
-const useExperimentalSCSSLoader =
-  config.optimizations && config.optimizations.useExperimentalSCSSLoader
+const outputPath = path.join(process.cwd(), 'dist')
+
+process.env.NODE_ENV = 'development'
 
 const smp = new SpeedMeasurePlugin()
 
+/** @typedef {import('webpack').Configuration} WebpackConfig */
+
+/** @type {WebpackConfig} */
 const webpackConfig = {
   mode: 'development',
   context: path.resolve(process.env.PWD, 'src'),
@@ -24,8 +31,11 @@ const webpackConfig = {
       ...defaultAlias,
       ...aliasFromConfig
     },
-    extensions: ['.js', '.json'],
-    modules: ['node_modules', path.resolve(process.cwd())]
+    fallback: {
+      fs: false
+    },
+    modules: ['node_modules', path.resolve(process.cwd())],
+    extensions: ['.js', '.json']
   },
   stats: 'errors-only',
   entry: cleanList([
@@ -33,19 +43,23 @@ const webpackConfig = {
     MAIN_ENTRY_POINT
   ]),
   target: 'web',
-  node: {fs: 'empty'},
   optimization: {
-    noEmitOnErrors: true,
+    checkWasmTypes: false,
+    emitOnErrors: false,
     removeAvailableModules: false,
     removeEmptyChunks: false,
     runtimeChunk: true,
     splitChunks: false
   },
   output: {
+    path: outputPath,
     pathinfo: false,
     publicPath: '/'
   },
   plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser'
+    }),
     new webpack.EnvironmentPlugin(envVars(config.env)),
     definePlugin({__DEV__: true}),
     new HtmlWebpackPlugin({
@@ -94,9 +108,7 @@ const webpackConfig = {
               }
             }
           },
-          useExperimentalSCSSLoader
-            ? require.resolve('super-sass-loader')
-            : require.resolve('sass-loader')
+          require.resolve('@s-ui/sass-loader')
         ])
       },
       when(config['externals-manifest'], () =>
@@ -104,8 +116,9 @@ const webpackConfig = {
       )
     ])
   },
+  watch: true,
   devtool:
-    config.sourcemaps && config.sourcemaps.dev ? config.sourcemaps.dev : 'none'
+    config.sourcemaps && config.sourcemaps.dev ? config.sourcemaps.dev : false
 }
 
 module.exports = config.measure ? smp.wrap(webpackConfig) : webpackConfig

package/webpack.config.prod.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 /* eslint-disable no-console */
 const webpack = require('webpack')
 const path = require('path')
@@ -5,7 +7,7 @@ const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const {WebpackManifestPlugin} = require('webpack-manifest-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin')
+const InlineChunkHtmlPlugin = require('./shared/inline-chunk-html-plugin.js')
 const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
 const {
   when,
@@ -19,12 +21,7 @@ const minifyCss = require('./shared/minify-css')
 const definePlugin = require('./shared/define')
 const babelRules = require('./shared/module-rules-babel')
 const manifestLoaderRules = require('./shared/module-rules-manifest-loader')
-const {splitChunks} = require('./shared/optimization-split-chunks')
-const {
-  extractComments,
-  useExperimentalMinifier,
-  sourceMap
-} = require('./shared/config')
+const {extractComments, sourceMap} = require('./shared/config')
 const {aliasFromConfig} = require('./shared/resolve-alias')
 const {resolveLoader} = require('./shared/resolve-loader')
 
@@ -40,6 +37,9 @@ const cssFileName = config.onlyHash
 
 const smp = new SpeedMeasurePlugin()
 
+/** @typedef {import('webpack').Configuration} WebpackConfig */
+
+/** @type {WebpackConfig} */
 const webpackConfig = {
   devtool: sourceMap,
   mode: 'production',
@@ -49,13 +49,7 @@ const webpackConfig = {
     extensions: ['.js', '.json'],
     modules: ['node_modules', path.resolve(process.cwd())]
   },
-  entry: config.vendor
-    ? {
-        app: MAIN_ENTRY_POINT,
-        vendor: config.vendor
-      }
-    : MAIN_ENTRY_POINT,
-  target: 'web',
+  entry: MAIN_ENTRY_POINT,
   output: {
     chunkFilename: filename,
     filename,
@@ -63,18 +57,15 @@ const webpackConfig = {
     publicPath: PUBLIC_PATH
   },
   optimization: {
-    // avoid looping over all the modules after the compilation
     checkWasmTypes: false,
     minimize: true,
-    minimizer: [
-      minifyJs({useExperimentalMinifier, extractComments, sourceMap}),
-      minifyCss()
-    ].filter(Boolean),
-    runtimeChunk: true,
-    splitChunks
+    minimizer: [minifyJs({extractComments, sourceMap}), minifyCss()].filter(
+      Boolean
+    ),
+    runtimeChunk: true
   },
   plugins: cleanList([
-    new webpack.HashedModuleIdsPlugin(),
+    new webpack.ids.HashedModuleIdsPlugin(),
     new webpack.EnvironmentPlugin(envVars(config.env)),
     definePlugin(),
     new MiniCssExtractPlugin({
@@ -126,7 +117,7 @@ const webpackConfig = {
               }
             }
           },
-          require.resolve('sass-loader')
+          require.resolve('@s-ui/sass-loader')
         ])
       },
       when(config['externals-manifest'], () =>
@@ -134,12 +125,7 @@ const webpackConfig = {
       )
     ])
   },
-  resolveLoader,
-  node: {
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty'
-  }
+  resolveLoader
 }
 
 module.exports = config.measure ? smp.wrap(webpackConfig) : webpackConfig

package/webpack.config.server.js

@@ -10,6 +10,9 @@ const {resolveLoader} = require('./shared/resolve-loader')
 
 const filename = '[name].[chunkhash:8].js'
 
+/** @typedef {import('webpack').Configuration} WebpackConfig */
+
+/** @type {WebpackConfig} */
 const webpackConfig = {
   context: path.resolve(process.cwd(), 'src'),
   mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
@@ -37,9 +40,12 @@ const webpackConfig = {
     rules: cleanList([
       babelRules,
       {
-        // ignore css/scss require/imports files in the server
-        test: /\.s?css$/,
-        use: 'null-loader'
+        // ignore css/scss/svg require/imports files in the server
+        test: [/\.s?css$/, /\.svg$/],
+        type: 'asset/inline',
+        generator: {
+          dataUrl: () => ''
+        }
       },
       when(config['externals-manifest'], () =>
         manifestLoaderRules(config['externals-manifest'])

package/shared/optimization-split-chunks.js

@@ -1,31 +0,0 @@
-const {config} = require('./')
-
-const hasToSplitFrameworksOnChunk =
-  config.optimizations && config.optimizations.splitFrameworkOnChunk
-
-const frameworkSplitChunk = {
-  framework: {
-    chunks: 'all',
-    name: 'framework',
-    // This regex ignores nested copies of framework libraries so they're
-    // bundled with their issuer: https://github.com/vercel/next.js/pull/9012
-    test: /(?<!node_modules.*)[\\/]node_modules[\\/](react|react-dom|scheduler|prop-types|use-subscription)[\\/]/,
-    priority: 40,
-    // Don't let webpack eliminate this chunk (prevents this chunk from
-    // becoming a part of the commons chunk)
-    enforce: true
-  }
-}
-
-exports.splitChunks = {
-  cacheGroups: {
-    ...(hasToSplitFrameworksOnChunk && frameworkSplitChunk),
-    vendor: {
-      chunks: 'all',
-      name: 'vendor',
-      test: 'vendor',
-      enforce: true,
-      reuseExistingChunk: true
-    }
-  }
-}