@s-ui/bundler 8.0.0-beta.0 → 8.0.0-beta.4

package/README.md

@@ -1,4 +1,4 @@
-# sui-bunder
+# sui-bundler
 
 > Config-free bundler for ES6 React apps.
 
@@ -81,6 +81,12 @@ To link more than one package at time, use as many times as desired the argument
 $ sui-bundler dev --link-package=/absolute_path/to/npm_package --link-package=/absolute_path2/to/npm_package
 ```
 
+You can also use `-l` as a shorthand to link a package.
+
+```
+$ sui-bundler dev -l /absolute_path/to/npm_package -l /absolute_path2/to/npm_package
+```
+
 If you want to link all the packages inside a monorepo-multipackage. Use the flag `--link-all` pointing to the folder where each package lives.
 For example, if you want to link all the components in a Studio, the command should be:
 
@@ -88,6 +94,12 @@ For example, if you want to link all the components in a Studio, the command sho
 $ sui-bundler dev --link-all ../frontend-ma--uilib-components/components
 ```
 
+You can use `-L` as a shorthand to link all packages.
+
+```
+$ sui-bundler dev -L ../frontend-ma--uilib-components/components
+```
+
 And of course you can combine `link-all` and `link-package` flags
 
 ### Production
@@ -124,6 +136,7 @@ sui-bundler lib umd/index.js -o lib/fancy -p http://my-cdn.com/fancy
 ```
 
 `sui-bundler lib` will add your package version as subfolder:
+
 - `-o lib/fancy` outputs to `./lib/fancy/0.0.0/`
 - `-p http://my-cdn.com/fancy` sets `http://my-cdn.com/fancy/0.0.0` as public path for chunks loading.
 - `-r http://my-cdn.com/fancy` sets `http://my-cdn.com/fancy` as public path for chunks loading, discarded the version subdirectory.
@@ -155,7 +168,10 @@ This tool works with zero configuration out the box but you could use some confi
       "vendor": ["react", "react-dom"],
       "cdn": "https://url_to_me_cdn.com/",
       "externals-manifest": "https://url_to_me_cdn/manifest.json",
-      "alias": {"react": "preact"},
+      "alias": {
+        "react": "preact"
+      },
+      "measure": true,
       "offline": true,
       "targets": {
         "chrome": "41",
@@ -167,9 +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
       }
     }
   }
@@ -193,20 +206,24 @@ import {register, unregister} from '@s-ui/bundler/registerServiceWorker'
 register({
   first: () => window.alert('Content is cached for offline use.'),
   renovate: () => window.alert('New content is available; please refresh.')
-});
+})
 ```
 
 You should pass a handler in order to handle when content gets cached for the first time the content and another when you get new content and want to handle how to show a notification to the user in order to let him decide if he wants to refresh the page.
 
 If you want to remove your ServiceWorker, you need to use the method `unregister`, the same way you used the `register` method before.
 
+### Build time measurement
+
+Set `measure` to `true` if you want to check step by step build times.
+
 ### Only Caching
 
 It's possible to create a service worker that caches all static resources
 
 There are two ways to activate the statics cache option:
 
-1. Create a `src/offline.html` page as mentioned in the [offline]( #Offline) section
+1. Create a `src/offline.html` page as mentioned in the [offline](#Offline) section
 2. Add the `staticsCacheOnly` option within the package.json like this:
 
 ```json
@@ -218,9 +235,11 @@ There are two ways to activate the statics cache option:
   }
 }
 ```
+
 > Statics will be cached but no offline page will be activated
 
 ## Externals Manifest
+
 If your are using an external CDN to store statics assets that are now managed by Webpack, like SVG or IMGs, you can create a manifest.json file in the root of your CDN (likehttps://spa-mock-statics.surge.sh/manifest.json`).
 
 If you define the `externals-manifest` key in the config pointing to this link, sui-bundler will replace any ocurrence of each key for the value
@@ -230,14 +249,19 @@ If in your CSS you have:
 ```css
 #app {
   color: blue;
-  background: url('https://spa-mock-statics.surge.sh/images/common/sprite-sheet/sprite-ma.png') no-repeat scroll;
+  background: url('https://spa-mock-statics.surge.sh/images/common/sprite-sheet/sprite-ma.png')
+    no-repeat scroll;
 }
 ```
 
 After compile you will get:
 
 ```css
-#app{color:#00f;background:url(https://spa-mock-statics.surge.sh/images/common/sprite-sheet/sprite-ma.72d1edb214.png) no-repeat scroll}
+#app {
+  color: #00f;
+  background: url(https://spa-mock-statics.surge.sh/images/common/sprite-sheet/sprite-ma.72d1edb214.png)
+    no-repeat scroll;
+}
 ```
 
 Or if in your JS you have:
@@ -284,16 +308,13 @@ 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.
+## Migrations
 
-`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.
+### 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-analyzer.js

@@ -10,7 +10,7 @@ const logUpdate = require('@s-ui/helpers/log-update')
 const installNeededDependencies = async () => {
   try {
     require('webpack-bundle-analyzer')
-    require('duplicate-package-checker-webpack-plugin')
+    return true
   } catch (e) {
     logUpdate('Installing needed dependencies...')
     return getSpawnPromise('npm', [
@@ -19,14 +19,20 @@ const installNeededDependencies = async () => {
       '--no-optional',
       '--no-audit',
       '--no-fund',
-      'webpack-bundle-analyzer@4.2.0 duplicate-package-checker-webpack-plugin@3.0.0'
+      'webpack-bundle-analyzer@4.3.0 duplicate-package-checker-webpack-plugin@3.0.0'
     ]).then(() => {
       logUpdate.done('Installed needed dependencies')
+      getSpawnPromise('./node_modules/.bin/sui-bundler', ['analyzer']).then(
+        () => false
+      )
     })
   }
 }
+
 ;(async () => {
-  await installNeededDependencies()
+  const keepExecution = await installNeededDependencies()
+  if (!keepExecution) return
+
   const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')
   const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin')
 

package/bin/sui-bundler-build.js

@@ -19,7 +19,7 @@ process.env.NODE_ENV = process.env.NODE_ENV || 'production'
 program
   .option('-C, --clean', 'Remove public folder before create a new one')
   .option(
-    '--link-package [package]',
+    '-l, --link-package [package]',
     'Replace each occurrence of this package with an absolute path to this folder',
     (v, m) => {
       m.push(v)

package/bin/sui-bundler-dev.js

@@ -1,46 +1,67 @@
 #!/usr/bin/env node
 /* eslint-disable no-console */
 
+process.on('unhandledRejection', err => {
+  throw err
+})
+
 const program = require('commander')
 const path = require('path')
-const clearConsole = require('react-dev-utils/clearConsole')
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles')
+const WebpackDevServer = require('webpack-dev-server')
+
+const clearConsole = require('../utils/clearConsole')
+const checkRequiredFiles = require('../utils/checkRequiredFiles')
+const {
+  choosePort,
+  prepareUrls
+} = require('react-dev-utils/WebpackDevServerUtils')
 
 const webpackConfig = require('../webpack.config.dev')
+
+const createDevServerConfig = require('../factories/createDevServerConfig')
 const createCompiler = require('../factories/createCompiler')
 
 const linkLoaderConfigBuilder = require('../loaders/linkLoaderConfigBuilder')
 const log = require('../shared/log')
 
-program
-  .option('-c, --context [folder]', 'Context folder (cwd by default)')
-  .option(
-    '--link-all [monorepo]',
-    'Link all packages inside of monorepo multipackage'
-  )
-  .option(
-    '--link-package [package]',
-    'Replace each occurrence of this package with an absolute path to this folder',
-    (v, m) => {
-      m.push(v)
-      return m
-    },
-    []
-  )
-  .on('--help', () => {
-    console.log('  Examples:')
-    console.log('')
-    console.log('    $ sui-bundler dev')
-    console.log('    $ sui-bundler dev --context /my/app/folder')
-    console.log('    $ sui-bundler dev --link-package /my/domain/folder')
-    console.log('')
-  })
-  .parse(process.argv)
-const {context} = program
-webpackConfig.context = context || webpackConfig.context
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000
+const {CI = false, HOST = '0.0.0.0'} = process.env
+const DEFAULT_WATCH = !CI
+
+if (!module.parent) {
+  program
+    .option('-c, --context [folder]', 'Context folder (cwd by default)')
+    .option(
+      '-L, --link-all [monorepo]',
+      'Link all packages inside of monorepo multipackage'
+    )
+    .option(
+      '-l, --link-package [package]',
+      'Replace each occurrence of this package with an absolute path to this folder',
+      (v, m) => {
+        m.push(v)
+        return m
+      },
+      []
+    )
+    .option(
+      '-w, --watch',
+      'Watch files and restart the server on change',
+      DEFAULT_WATCH
+    )
+    .on('--help', () => {
+      console.log('  Examples:')
+      console.log('')
+      console.log('    $ sui-bundler dev')
+      console.log('    $ sui-bundler dev --context /my/app/folder')
+      console.log('    $ sui-bundler dev --link-package /my/domain/folder')
+      console.log('')
+    })
+    .parse(process.argv)
 
-// Don't show ugly deprecation warnings that mess with the logging
-process.noDeprecation = true
+  const {context} = program
+  webpackConfig.context = context || webpackConfig.context
+}
 
 const start = async ({
   config = webpackConfig,
@@ -59,15 +80,38 @@ const start = async ({
     )
     process.exit(1)
   }
+  const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'
+  const port = await choosePort(HOST, DEFAULT_PORT)
+  const urls = prepareUrls(protocol, HOST, port)
   const nextConfig = linkLoaderConfigBuilder({
     config,
     linkAll: program.linkAll,
     packagesToLink
   })
-  const compiler = createCompiler(nextConfig)
-  compiler.watch({}, () => {})
+  const compiler = createCompiler(nextConfig, urls)
+  const serverConfig = createDevServerConfig(nextConfig, urls.lanUrlForConfig)
+  const devServer = new WebpackDevServer(
+    {
+      ...serverConfig,
+      port,
+      host: HOST
+    },
+    compiler
+  )
+  log.processing('❯ Starting the development server...\n')
+  devServer.startCallback(err => {
+    if (err) return log.error(err)
+    ;['SIGINT', 'SIGTERM'].forEach(sig => {
+      process.on(sig, () => {
+        devServer.stop()
+        process.exit()
+      })
+    })
+  })
 }
 
-start()
+if (!module.parent) {
+  start()
+}
 
 module.exports = start

package/factories/createCompiler.js

@@ -1,10 +1,19 @@
 const webpack = require('webpack')
+const formatWebpackMessages = require('../utils/formatWebpackMessages')
+const clearConsole = require('../utils/clearConsole')
 const log = require('../shared/log')
 
-module.exports = config => {
+const isInteractive = process.stdout.isTTY
+
+const printInstructions = ({urls}) =>
+  log.info(`
+  Local:    ${urls.localUrlForTerminal}
+  Network:  ${urls.lanUrlForTerminal}
+`)
+
+module.exports = (config, urls) => {
   let compiler
   try {
-    log.processing('❯ Compiling...')
     compiler = webpack(config)
   } catch (err) {
     log.error(`✖ Failed to compile:\n ${err.message || err}`)
@@ -12,23 +21,28 @@ module.exports = config => {
   }
 
   compiler.hooks.invalid.tap('invalid', () => {
+    if (isInteractive) clearConsole()
     log.processing('❯ Compiling...')
   })
 
   compiler.hooks.done.tap('done', stats => {
+    if (isInteractive) clearConsole()
+
     const isSuccessful = !stats.hasErrors()
 
     // Log the correct message of compilation depending if we have warnings
     if (isSuccessful) {
-      const {time} = stats.toJson('minimal')
       stats.hasWarnings()
-        ? log.warn(`⚠ Compiled with warnings in ${time}ms`)
-        : log.success(`✔ Compiled successfully in ${time}ms`)
+        ? log.warn('⚠ Compiled with warnings')
+        : log.success('✔ Compiled successfully')
     }
 
+    // Even with warnings, we show instructions to access localhost if we have a compilation
+    if (isSuccessful && isInteractive) printInstructions({urls})
+
     // If we have errors, we must show them
     if (!isSuccessful) {
-      const messages = console.error(stats.toJson('errors-only', true))
+      const messages = formatWebpackMessages(stats.toJson('errors-only', true))
       // Only keep the first error. Others are often indicative
       // of the same problem, but confuse the reader with noise.
       if (messages.errors.length > 1) messages.errors.length = 1
@@ -38,7 +52,9 @@ module.exports = config => {
 
     // With warnings, even after showing the instructions we must list the warnings we have
     if (stats.hasWarnings()) {
-      const messages = console.warn(stats.toJson('errors-warnings', true))
+      const messages = formatWebpackMessages(
+        stats.toJson('errors-warnings', true)
+      )
       log.warn(messages.warnings.join('\n\n'))
     }
   })

package/factories/createDevServerConfig.js

@@ -0,0 +1,43 @@
+// @ts-check
+
+const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware')
+const ignoredFiles = require('react-dev-utils/ignoredFiles')
+
+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: {
+    logging: 'none',
+    overlay: {
+      errors: true,
+      warnings: false
+    },
+    progress: true
+  },
+  static: {
+    directory: 'public',
+    watch: getWatchOptions(config)
+  },
+  hot: true,
+  https: protocol === 'https',
+  host,
+  historyApiFallback: {
+    disableDotRule: true
+  },
+  onAfterSetupMiddleware(devServer) {
+    // This service worker file is effectively a 'no-op' that will reset any
+    // previous service worker registered for the same host:port combination.
+    devServer.app.use(noopServiceWorkerMiddleware(config.output.publicPath))
+  }
+})

package/loaders/linkLoaderConfigBuilder.js

@@ -60,12 +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: require.resolve('sass-loader'),
+    loader: require.resolve('@s-ui/sass-loader'),
     options: {
       sassOptions: {
         importer: createSassLinkImporter(entryPoints)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s-ui/bundler",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.4",
   "description": "Config-free bundler for ES6 React apps.",
   "bin": {
     "sui-bundler": "./bin/sui-bundler.js"
@@ -21,30 +21,30 @@
   },
   "homepage": "https://github.com/SUI-Components/sui/tree/master/packages/sui-bundler#readme",
   "dependencies": {
-    "@babel/core": "7.12.10",
+    "@babel/core": "7.16.0",
     "@s-ui/helpers": "1",
-    "autoprefixer": "9.8.6",
-    "babel-loader": "8.2.2",
+    "@s-ui/sass-loader": "1",
+    "autoprefixer": "10.4.0",
+    "babel-loader": "8.2.3",
     "babel-preset-sui": "3",
-    "chalk": "4.1.0",
-    "commander": "6.2.1",
-    "css-loader": "4.3.0",
-    "css-minimizer-webpack-plugin": "1.1.5",
-    "fast-glob": "3.2.4",
-    "fibers": "5.0.0",
-    "get-port": "5.1.1",
-    "html-webpack-plugin": "4.5.0",
-    "mini-css-extract-plugin": "1.3.3",
-    "null-loader": "4.0.1",
-    "postcss": "7.0.35",
-    "postcss-loader": "4.1.0",
+    "commander": "8.3.0",
+    "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": "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.30.0",
-    "sass-loader": "10.1.0",
-    "style-loader": "2.0.0",
-    "webpack": "5.10.1",
-    "webpack-manifest-plugin": "3.0.0",
-    "webpack-node-externals": "2.5.2",
-    "webpack-plugin-serve": "1.2.1"
+    "sass": "1.43.4",
+    "speed-measure-webpack-plugin": "1.5.0",
+    "style-loader": "3.3.1",
+    "webpack": "5.64.1",
+    "webpack-dev-server": "4.5.0",
+    "webpack-manifest-plugin": "4.0.2",
+    "webpack-node-externals": "3.0.0"
   }
 }

package/shared/config.js

@@ -2,8 +2,8 @@
 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

package/{plugins/InlineChunkHtmlPlugin.js → shared/inline-chunk-html-plugin.js}

@@ -1,3 +1,5 @@
+// from: https://github.com/facebook/create-react-app/blob/main/packages/react-dev-utils/InlineChunkHtmlPlugin.js
+
 /**
  * Copyright (c) 2015-present, Facebook, Inc.
  *

package/shared/log.js

@@ -1,11 +1,10 @@
 /* eslint-disable no-console */
-
-const chalk = require('chalk')
+const colors = require('@s-ui/helpers/colors')
 
 module.exports = {
-  info: msg => console.log(chalk.white(msg)),
-  error: msg => console.log(chalk.red(msg)),
-  success: msg => console.log(chalk.green(msg)),
-  warn: msg => console.log(chalk.yellow(msg)),
-  processing: msg => console.log(chalk.blue(msg))
+  info: msg => console.log(colors.gray(msg)),
+  error: msg => console.log(colors.red(msg)),
+  success: msg => console.log(colors.green(msg)),
+  warn: msg => console.log(colors.yellow(msg)),
+  processing: msg => console.log(colors.cyan(msg))
 }

package/shared/minify-css.js

@@ -1,6 +1,6 @@
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 
-module.exports = () =>
+const createCssMinimizerPlugin = () =>
   new CssMinimizerPlugin({
     minimizerOptions: {
       preset: [
@@ -11,3 +11,5 @@ module.exports = () =>
       ]
     }
   })
+
+module.exports = () => createCssMinimizerPlugin()

package/shared/minify-js.js

@@ -1,47 +1,10 @@
-const TerserPlugin = require('terser-webpack-plugin')
-const {CI = false} = process.env
-const CI_PARALLEL_CORES = 2
+const {ESBuildMinifyPlugin} = require('esbuild-loader')
 
-module.exports = ({extractComments}) =>
-  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
+const esbuild = ({sourceMap}) =>
+  new ESBuildMinifyPlugin({
+    target: 'es6',
+    sourcemap: sourceMap !== 'none' && sourceMap !== false
   })
+
+module.exports = ({extractComments, sourceMap}) =>
+  esbuild({extractComments, sourceMap})

package/shared/module-rules-babel.js

@@ -8,6 +8,8 @@ module.exports = {
     {
       loader: require.resolve('babel-loader'),
       options: {
+        cacheDirectory: true,
+        cacheCompression: false,
         babelrc: false,
         compact: true,
         presets: [

package/shared/resolve-alias.js

@@ -12,6 +12,7 @@ const {PWD} = process.env
 const defaultPackagesToAlias = [
   'react',
   'react-router-dom',
+  '@s-ui/pde',
   '@s-ui/react-context',
   '@s-ui/react-router'
 ]

package/utils/checkRequiredFiles.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in https://github.com/facebook/create-react-app/blob/main/packages/react-dev-utils/LICENSE
+ */
+
+const fs = require('fs')
+const path = require('path')
+
+function checkRequiredFiles(files) {
+  let currentFilePath
+  try {
+    files.forEach(filePath => {
+      currentFilePath = filePath
+      fs.accessSync(filePath, fs.F_OK)
+    })
+    return true
+  } catch (err) {
+    const dirName = path.dirname(currentFilePath)
+    const fileName = path.basename(currentFilePath)
+
+    console.log('Could not find a required file:')
+    console.log(`  Name: ${fileName}`)
+    console.log(`  Searched in: ${dirName}`)
+
+    return false
+  }
+}
+
+module.exports = checkRequiredFiles