@s-ui/bundler 8.0.0-beta.1 → 8.0.0-beta.13

package/README.md

@@ -183,10 +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
       }
     }
   }
@@ -314,14 +310,6 @@ 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
 
 ### Migrate from v7 to v8

package/bin/sui-bundler-build.js

@@ -6,7 +6,6 @@ const path = require('path')
 const program = require('commander')
 const rimraf = require('rimraf')
 const webpack = require('webpack')
-const {minify} = require('terser')
 const {writeFile} = require('@s-ui/helpers/file')
 
 const config = require('../webpack.config.prod')
@@ -39,9 +38,13 @@ program
   })
   .parse(process.argv)
 
-const {clean = false, context} = program
+const {
+  clean = false,
+  context,
+  linkPackage: packagesToLink = []
+} = program.opts()
+
 config.context = context || config.context
-const packagesToLink = program.linkPackage || []
 
 const nextConfig = packagesToLink.length
   ? linkLoaderConfigBuilder({
@@ -72,7 +75,6 @@ webpack(nextConfig).run(async (error, stats) => {
   if (stats.hasWarnings()) {
     const jsonStats = stats.toJson('errors-warnings')
     log.warn('Webpack generated the following warnings: ')
-    log.warn(jsonStats.warnings)
     jsonStats.warnings.map(({message}) => log.warn(message))
   }
 
@@ -133,10 +135,9 @@ webpack(nextConfig).run(async (error, stats) => {
         JSON.stringify(staticsCacheOnly)
       )
 
-    const {code: minifiedSw} = await minify(swCode, {sourceMap: false})
     const swFilePath = resolvePublicFile('service-worker.js')
 
-    await writeFile(swFilePath, minifiedSw)
+    await writeFile(swFilePath, swCode)
     console.log('\nService worker generated succesfully!\n')
   }
 

package/bin/sui-bundler-dev.js

@@ -24,8 +24,9 @@ const createCompiler = require('../factories/createCompiler')
 const linkLoaderConfigBuilder = require('../loaders/linkLoaderConfigBuilder')
 const log = require('../shared/log')
 
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000
-const HOST = process.env.HOST || '0.0.0.0'
+const {CI = false, HOST = '0.0.0.0', HTTPS, PORT} = process.env
+const DEFAULT_PORT = +PORT || 3000
+const DEFAULT_WATCH = !CI
 
 if (!module.parent) {
   program
@@ -43,6 +44,11 @@ if (!module.parent) {
       },
       []
     )
+    .option(
+      '-w, --watch',
+      'Watch files and restart the server on change',
+      DEFAULT_WATCH
+    )
     .on('--help', () => {
       console.log('  Examples:')
       console.log('')
@@ -52,13 +58,15 @@ if (!module.parent) {
       console.log('')
     })
     .parse(process.argv)
-  const {context} = program
+
+  const {context} = program.opts()
+
   webpackConfig.context = context || webpackConfig.context
 }
 
 const start = async ({
   config = webpackConfig,
-  packagesToLink = program.linkPackage || []
+  packagesToLink = program.opts().linkPackage || []
 } = {}) => {
   clearConsole()
   // Warn and crash if required files are missing
@@ -73,14 +81,16 @@ const start = async ({
     )
     process.exit(1)
   }
-  const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'
+
+  const protocol = HTTPS === 'true' ? 'https' : 'http'
   const port = await choosePort(HOST, DEFAULT_PORT)
   const urls = prepareUrls(protocol, HOST, port)
   const nextConfig = linkLoaderConfigBuilder({
     config,
-    linkAll: program.linkAll,
+    linkAll: program.opts().linkAll,
     packagesToLink
   })
+
   const compiler = createCompiler(nextConfig, urls)
   const serverConfig = createDevServerConfig(nextConfig, urls.lanUrlForConfig)
   const devServer = new WebpackDevServer(
@@ -91,6 +101,7 @@ const start = async ({
     },
     compiler
   )
+
   log.processing('❯ Starting the development server...\n')
   devServer.startCallback(err => {
     if (err) return log.error(err)

package/bin/sui-bundler-lib.js

@@ -35,7 +35,7 @@ const {
   path: publicPath,
   args: [entry],
   root = false
-} = program
+} = program.opts()
 
 if (!output) {
   showError(new Error('--output is mandatory.'), program)

package/factories/createDevServerConfig.js

@@ -1,12 +1,20 @@
 // @ts-check
 
-const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware')
-const ignoredFiles = require('react-dev-utils/ignoredFiles')
+const noopServiceWorkerMiddleware = require('../utils/noopServiceWorkerMiddleware.js')
+const ignoredFiles = require('../utils/ignoredFiles.js')
 
 const {HOST, HTTPS} = process.env
 const protocol = HTTPS === 'true' ? 'https' : 'http'
 const host = HOST || '0.0.0.0'
 
+const getWatchOptions = ({context, watch}) => {
+  return watch
+    ? {
+        ignored: ignoredFiles(context)
+      }
+    : false
+}
+
 module.exports = config => ({
   allowedHosts: 'all',
   client: {
@@ -19,9 +27,7 @@ module.exports = config => ({
   },
   static: {
     directory: 'public',
-    watch: {
-      ignored: ignoredFiles(config.context)
-    }
+    watch: getWatchOptions(config)
   },
   hot: true,
   https: protocol === 'https',

package/loaders/linkLoaderConfigBuilder.js

@@ -1,7 +1,6 @@
 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')
@@ -81,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": "8.0.0-beta.1",
+  "version": "8.0.0-beta.13",
   "description": "Config-free bundler for ES6 React apps.",
   "bin": {
     "sui-bundler": "./bin/sui-bundler.js"
@@ -27,25 +27,24 @@
     "autoprefixer": "10.4.0",
     "babel-loader": "8.2.3",
     "babel-preset-sui": "3",
-    "commander": "6.2.1",
+    "commander": "8.3.0",
     "css-loader": "6.5.1",
-    "css-minimizer-webpack-plugin": "3.1.1",
+    "css-minimizer-webpack-plugin": "3.2.0",
     "esbuild-loader": "2.16.0",
+    "escape-string-regexp": "5.0.0",
     "fast-glob": "3.2.7",
     "html-webpack-plugin": "5.5.0",
-    "mini-css-extract-plugin": "2.4.4",
-    "null-loader": "4.0.1",
+    "mini-css-extract-plugin": "2.4.5",
     "process": "0.11.10",
-    "postcss": "8.3.11",
-    "postcss-loader": "6.2.0",
+    "postcss": "8.4.4",
+    "postcss-loader": "6.2.1",
     "react-dev-utils": "11.0.4",
     "rimraf": "3.0.2",
-    "sass": "1.43.4",
+    "sass": "1.43.5",
     "speed-measure-webpack-plugin": "1.5.0",
     "style-loader": "3.3.1",
-    "terser-webpack-plugin": "5.2.4",
-    "webpack": "5.61.0",
-    "webpack-dev-server": "4.4.0",
+    "webpack": "5.64.4",
+    "webpack-dev-server": "4.6.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) || false

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/utils/ignoredFiles.js

@@ -0,0 +1,22 @@
+// Extracted from: https://github.com/facebook/create-react-app/blob/bb64e31a81eb12d688c14713dce812143688750a/packages/react-dev-utils/ignoredFiles.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'
+
+const path = require('path')
+const escape = require('escape-string-regexp')
+
+module.exports = function ignoredFiles(appSrc) {
+  return new RegExp(
+    `^(?!${escape(
+      path.normalize(appSrc + '/').replace(/[\\]+/g, '/')
+    )}).+/node_modules/`,
+    'g'
+  )
+}

package/utils/noopServiceWorkerMiddleware.js

@@ -0,0 +1,40 @@
+// from: https://github.com/facebook/create-react-app/blob/main/packages/react-dev-utils/noopServiceWorkerMiddleware.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'
+
+const path = require('path')
+
+module.exports = function createNoopServiceWorkerMiddleware(servedPath) {
+  return function noopServiceWorkerMiddleware(req, res, next) {
+    if (req.url === path.join(servedPath, 'service-worker.js')) {
+      res.setHeader('Content-Type', 'text/javascript')
+      res.send(
+        `// This service worker file is effectively a 'no-op' that will reset any
+ // previous service worker registered for the same host:port combination.
+ // In the production build, this file is replaced with an actual service worker
+ // file that will precache your site's local assets.
+ // See https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
+ self.addEventListener('install', () => self.skipWaiting());
+ self.addEventListener('activate', () => {
+   self.clients.matchAll({ type: 'window' }).then(windowClients => {
+     for (let windowClient of windowClients) {
+       // Force open pages to refresh, so that they have a chance to load the
+       // fresh navigation response from the local dev server.
+       windowClient.navigate(windowClient.url);
+     }
+   });
+ });
+ `
+      )
+    } else {
+      next()
+    }
+  }
+}

package/webpack.config.dev.js

@@ -16,6 +16,8 @@ const EXCLUDED_FOLDERS_REGEXP = new RegExp(
 )
 const outputPath = path.join(process.cwd(), 'dist')
 
+const {CI = false} = process.env
+
 process.env.NODE_ENV = 'development'
 
 const smp = new SpeedMeasurePlugin()
@@ -44,6 +46,7 @@ const webpackConfig = {
   ]),
   target: 'web',
   optimization: {
+    checkWasmTypes: false,
     emitOnErrors: false,
     removeAvailableModules: false,
     removeEmptyChunks: false,
@@ -115,7 +118,7 @@ const webpackConfig = {
       )
     ])
   },
-  watch: true,
+  watch: !CI,
   devtool:
     config.sourcemaps && config.sourcemaps.dev ? config.sourcemaps.dev : false
 }

package/webpack.config.prod.js

@@ -21,11 +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 {
-  extractComments,
-  useExperimentalMinifier,
-  sourceMap
-} = require('./shared/config')
+const {extractComments, sourceMap} = require('./shared/config')
 const {aliasFromConfig} = require('./shared/resolve-alias')
 const {resolveLoader} = require('./shared/resolve-loader')
 
@@ -51,7 +47,12 @@ const webpackConfig = {
   resolve: {
     alias: {...aliasFromConfig},
     extensions: ['.js', '.json'],
-    modules: ['node_modules', path.resolve(process.cwd())]
+    modules: ['node_modules', path.resolve(process.cwd())],
+    fallback: {
+      assert: false,
+      fs: false,
+      path: false
+    }
   },
   entry: MAIN_ENTRY_POINT,
   output: {
@@ -61,11 +62,11 @@ const webpackConfig = {
     publicPath: PUBLIC_PATH
   },
   optimization: {
+    checkWasmTypes: false,
     minimize: true,
-    minimizer: [
-      minifyJs({useExperimentalMinifier, extractComments, sourceMap}),
-      minifyCss()
-    ].filter(Boolean),
+    minimizer: [minifyJs({extractComments, sourceMap}), minifyCss()].filter(
+      Boolean
+    ),
     runtimeChunk: true
   },
   plugins: cleanList([

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'])