@s-ui/bundler 8.0.0-beta.8 → 9.1.0

package/README.md

@@ -171,7 +171,6 @@ This tool works with zero configuration out the box but you could use some confi
       "alias": {
         "react": "preact"
       },
-      "measure": true,
       "offline": true,
       "targets": {
         "chrome": "41",
@@ -213,10 +212,6 @@ You should pass a handler in order to handle when content gets cached for the fi
 
 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

package/bin/sui-bundler-analyzer.js

@@ -2,8 +2,8 @@
 /* eslint-disable no-console */
 
 const webpack = require('webpack')
-const log = require('../shared/log')
-const config = require('../webpack.config.prod')
+const log = require('../shared/log.js')
+const config = require('../webpack.config.prod.js')
 const {getSpawnPromise} = require('@s-ui/helpers/cli')
 const logUpdate = require('@s-ui/helpers/log-update')
 
@@ -16,10 +16,9 @@ const installNeededDependencies = async () => {
     return getSpawnPromise('npm', [
       'install',
       '--no-save',
-      '--no-optional',
       '--no-audit',
       '--no-fund',
-      'webpack-bundle-analyzer@4.3.0 duplicate-package-checker-webpack-plugin@3.0.0'
+      'webpack-bundle-analyzer@4.5.0 duplicate-package-checker-webpack-plugin@3.0.0'
     ]).then(() => {
       logUpdate.done('Installed needed dependencies')
       getSpawnPromise('./node_modules/.bin/sui-bundler', ['analyzer']).then(

package/bin/sui-bundler-build.js

@@ -59,7 +59,7 @@ if (clean) {
   rimraf.sync(path.resolve(process.env.PWD, 'public'))
 }
 
-log.processing('Generating minified bundle. This will take a moment...')
+log.processing('Generating minified bundle...')
 
 webpack(nextConfig).run(async (error, stats) => {
   if (error) {

package/bin/sui-bundler-dev.js

@@ -11,21 +11,18 @@ 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 {choosePort, prepareUrls} = require('../utils/WebpackDevServerUtils.js')
 
 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')
+const linkLoaderConfigBuilder = require('../loaders/linkLoaderConfigBuilder.js')
+const log = require('../shared/log.js')
 
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000
-const {CI = false, HOST = '0.0.0.0'} = process.env
+const {CI = false, HOST = '0.0.0.0', HTTPS, PORT} = process.env
+const DEFAULT_PORT = +PORT || 3000
 const DEFAULT_WATCH = !CI
 
 if (!module.parent) {
@@ -81,14 +78,16 @@ const start = async ({
     )
     process.exit(1)
   }
-  const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'
-  const port = await choosePort(HOST, DEFAULT_PORT)
+
+  const protocol = HTTPS === 'true' ? 'https' : 'http'
+  const port = await choosePort(DEFAULT_PORT)
   const urls = prepareUrls(protocol, HOST, port)
   const nextConfig = linkLoaderConfigBuilder({
     config,
     linkAll: program.opts().linkAll,
     packagesToLink
   })
+
   const compiler = createCompiler(nextConfig, urls)
   const serverConfig = createDevServerConfig(nextConfig, urls.lanUrlForConfig)
   const devServer = new WebpackDevServer(
@@ -99,6 +98,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

@@ -7,8 +7,8 @@ const webpack = require('webpack')
 const path = require('path')
 const {showError, showWarning} = require('@s-ui/helpers/cli')
 const {getPackageJson} = require('@s-ui/helpers/packages')
-const config = require('../webpack.config.lib')
-const log = require('../shared/log')
+const config = require('../webpack.config.lib.js')
+const log = require('../shared/log.js')
 
 program
   .usage('[options] <entry>')
@@ -28,14 +28,10 @@ program
   )
   .parse(process.argv)
 
-const {
-  clean = false,
-  output,
-  umd = false,
-  path: publicPath,
-  args: [entry],
-  root = false
-} = program.opts()
+const [entry] = program.args
+const options = program.opts()
+const {clean = false, output, umd = false, root = false} = options
+const publicPath = options.path
 
 if (!output) {
   showError(new Error('--output is mandatory.'), program)
@@ -72,7 +68,7 @@ if (clean) {
   rimraf.sync(outputFolder)
 }
 
-log.processing('Generating minified bundle. This will take a moment...')
+log.processing('Generating minified bundle...')
 
 webpack(webpackConfig).run((error, stats) => {
   if (error) {

package/factories/createCompiler.js

@@ -1,7 +1,7 @@
 const webpack = require('webpack')
-const formatWebpackMessages = require('../utils/formatWebpackMessages')
-const clearConsole = require('../utils/clearConsole')
-const log = require('../shared/log')
+const formatWebpackMessages = require('../utils/formatWebpackMessages.js')
+const clearConsole = require('../utils/clearConsole.js')
+const log = require('../shared/log.js')
 
 const isInteractive = process.stdout.isTTY
 
@@ -14,7 +14,7 @@ const printInstructions = ({urls}) =>
 module.exports = (config, urls) => {
   let compiler
   try {
-    compiler = webpack(config)
+    compiler = webpack(config, () => {})
   } catch (err) {
     log.error(`✖ Failed to compile:\n ${err.message || err}`)
     process.exit(1)

package/factories/createDevServerConfig.js

@@ -1,20 +1,18 @@
 // @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
+  if (!watch) return false
+  return {ignored: ignoredFiles(context)}
 }
 
+/** @returns {import('webpack-dev-server').Configuration} */
 module.exports = config => ({
   allowedHosts: 'all',
   client: {
@@ -23,21 +21,30 @@ module.exports = config => ({
       errors: true,
       warnings: false
     },
-    progress: true
+    progress: false
+  },
+  // Enable gzip compression of generated files
+  compress: true,
+  headers: {
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Methods': '*',
+    'Access-Control-Allow-Headers': '*'
   },
   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))
-  }
+  setupMiddlewares(middlewares, devServer) {
+    if (!devServer) throw new Error('webpack-dev-server is not defined')
+
+    middlewares.push(noopServiceWorkerMiddleware(config.output.publicPath))
+
+    return middlewares
+  },
+  server: protocol
 })

package/loaders/linkLoaderConfigBuilder.js

@@ -1,8 +1,8 @@
 const fg = require('fast-glob')
 const path = require('path')
 
-const log = require('../shared/log')
-const {defaultAlias} = require('../shared/resolve-alias')
+const log = require('../shared/log.js')
+const {defaultAlias} = require('../shared/resolve-alias.js')
 const createSassLinkImporter = require('./sassLinkImporter.js')
 
 const diccFromAbsolutePaths = (paths, init = {}) =>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s-ui/bundler",
-  "version": "8.0.0-beta.8",
+  "version": "9.1.0",
   "description": "Config-free bundler for ES6 React apps.",
   "bin": {
     "sui-bundler": "./bin/sui-bundler.js"
@@ -21,30 +21,36 @@
   },
   "homepage": "https://github.com/SUI-Components/sui/tree/master/packages/sui-bundler#readme",
   "dependencies": {
-    "@babel/core": "7.16.0",
+    "@babel/core": "7.16.7",
     "@s-ui/helpers": "1",
     "@s-ui/sass-loader": "1",
-    "autoprefixer": "10.4.0",
+    "address": "1.1.2",
+    "autoprefixer": "10.4.2",
     "babel-loader": "8.2.3",
     "babel-preset-sui": "3",
+    "buffer": "6.0.3",
     "commander": "8.3.0",
     "css-loader": "6.5.1",
-    "css-minimizer-webpack-plugin": "3.1.4",
-    "esbuild-loader": "2.16.0",
-    "fast-glob": "3.2.7",
+    "css-minimizer-webpack-plugin": "3.4.1",
+    "esbuild": "0.14.14",
+    "escape-string-regexp": "4.0.0",
+    "fast-glob": "3.2.11",
+    "find-free-ports": "3.0.0",
     "html-webpack-plugin": "5.5.0",
-    "mini-css-extract-plugin": "2.4.5",
+    "https-browserify": "1.0.0",
+    "mini-css-extract-plugin": "2.5.3",
+    "postcss": "8.4.5",
+    "postcss-loader": "6.2.1",
     "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.4",
-    "speed-measure-webpack-plugin": "1.5.0",
+    "sass": "1.49.0",
+    "stream-http": "3.2.0",
+    "strip-ansi": "6.0.1",
     "style-loader": "3.3.1",
-    "webpack": "5.64.1",
-    "webpack-dev-server": "4.5.0",
-    "webpack-manifest-plugin": "4.0.2",
+    "url": "0.11.0",
+    "webpack": "5.67.0",
+    "webpack-dev-server": "4.7.3",
+    "webpack-manifest-plugin": "4.1.1",
     "webpack-node-externals": "3.0.0"
   }
 }

package/shared/minify-js.js

@@ -1,10 +1,10 @@
-const {ESBuildMinifyPlugin} = require('esbuild-loader')
-
-const esbuild = ({sourceMap}) =>
-  new ESBuildMinifyPlugin({
-    target: 'es6',
-    sourcemap: sourceMap !== 'none' && sourceMap !== false
-  })
+const TerserPlugin = require('terser-webpack-plugin')
 
 module.exports = ({extractComments, sourceMap}) =>
-  esbuild({extractComments, sourceMap})
+  new TerserPlugin({
+    minify: TerserPlugin.esbuildMinify,
+    terserOptions: {
+      target: 'es6',
+      sourcemap: sourceMap !== 'none' && sourceMap !== false
+    }
+  })

package/utils/WebpackDevServerUtils.js

@@ -0,0 +1,325 @@
+// @ts-check
+
+/**
+ * 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 address = require('address')
+const fs = require('fs')
+const path = require('path')
+const url = require('url')
+
+const {findFreePorts, isFreePort} = require('find-free-ports')
+
+const clearConsole = require('./clearConsole.js')
+const formatWebpackMessages = require('./formatWebpackMessages.js')
+const getProcessForPort = require('./getProcessForPort.js')
+
+const {bold, cyan, green, yellow, red} = require('@s-ui/helpers/colors')
+
+const isInteractive = process.stdout.isTTY
+
+function prepareUrls(protocol, host, port, pathname = '/') {
+  const formatUrl = hostname =>
+    url.format({
+      protocol,
+      hostname,
+      port,
+      pathname
+    })
+
+  const prettyPrintUrl = hostname =>
+    url.format({
+      protocol,
+      hostname,
+      port: bold(port),
+      pathname
+    })
+
+  const isUnspecifiedHost = host === '0.0.0.0' || host === '::'
+  let prettyHost, lanUrlForConfig, lanUrlForTerminal
+
+  if (isUnspecifiedHost) {
+    prettyHost = 'localhost'
+    try {
+      // This can only return an IPv4 address
+      lanUrlForConfig = address.ip()
+      if (lanUrlForConfig) {
+        // Check if the address is a private ip
+        // https://en.wikipedia.org/wiki/Private_network#Private_IPv4_address_spaces
+        if (
+          /^10[.]|^172[.](1[6-9]|2[0-9]|3[0-1])[.]|^192[.]168[.]/.test(
+            lanUrlForConfig
+          )
+        ) {
+          // Address is private, format it for later use
+          lanUrlForTerminal = prettyPrintUrl(lanUrlForConfig)
+        } else {
+          // Address is not private, so we will discard it
+          lanUrlForConfig = undefined
+        }
+      }
+    } catch (_e) {
+      // ignored
+    }
+  } else {
+    prettyHost = host
+  }
+
+  const localUrlForTerminal = prettyPrintUrl(prettyHost)
+  const localUrlForBrowser = formatUrl(prettyHost)
+  return {
+    lanUrlForConfig,
+    lanUrlForTerminal,
+    localUrlForTerminal,
+    localUrlForBrowser
+  }
+}
+
+function printInstructions(appName, urls, useYarn) {
+  console.log()
+  console.log(`You can now view ${bold(appName)} in the browser.`)
+  console.log()
+
+  if (urls.lanUrlForTerminal) {
+    console.log(`  ${bold('Local:')}            ${urls.localUrlForTerminal}`)
+    console.log(`  ${bold('On Your Network:')}  ${urls.lanUrlForTerminal}`)
+  } else {
+    console.log(`  ${urls.localUrlForTerminal}`)
+  }
+
+  console.log()
+  console.log('Note that the development build is not optimized.')
+  console.log(
+    `To create a production build, use ` +
+      `${cyan(`${useYarn ? 'yarn' : 'npm run'} build`)}.`
+  )
+  console.log()
+}
+
+function createCompiler({
+  appName,
+  config,
+  urls,
+  useYarn,
+  useTypeScript,
+  webpack
+}) {
+  // "Compiler" is a low-level interface to webpack.
+  // It lets us listen to some events and provide our own custom messages.
+  let compiler
+  try {
+    compiler = webpack(config)
+  } catch (err) {
+    console.log(red('Failed to compile.'))
+    console.log()
+    console.log(err.message || err)
+    console.log()
+    process.exit(1)
+  }
+
+  // "invalid" event fires when you have changed a file, and webpack is
+  // recompiling a bundle. WebpackDevServer takes care to pause serving the
+  // bundle, so if you refresh, it'll wait instead of serving the old one.
+  // "invalid" is short for "bundle invalidated", it doesn't imply any errors.
+  compiler.hooks.invalid.tap('invalid', () => {
+    if (isInteractive) {
+      clearConsole()
+    }
+    console.log('Compiling...')
+  })
+
+  let isFirstCompile = true
+
+  // "done" event fires when webpack has finished recompiling the bundle.
+  // Whether or not you have warnings or errors, you will get this event.
+  compiler.hooks.done.tap('done', async stats => {
+    if (isInteractive) clearConsole()
+
+    // We have switched off the default webpack output in WebpackDevServer
+    // options so we are going to "massage" the warnings and errors and present
+    // them in a readable focused way.
+    // We only construct the warnings and errors for speed:
+    // https://github.com/facebook/create-react-app/issues/4492#issuecomment-421959548
+    const statsData = stats.toJson({
+      all: false,
+      warnings: true,
+      errors: true
+    })
+
+    const messages = formatWebpackMessages(statsData)
+    const isSuccessful = !messages.errors.length && !messages.warnings.length
+    if (isSuccessful) {
+      console.log(green('Compiled successfully!'))
+    }
+
+    if (isSuccessful && (isInteractive || isFirstCompile)) {
+      printInstructions(appName, urls, useYarn)
+    }
+
+    isFirstCompile = false
+
+    // If errors exist, only show errors.
+    if (messages.errors.length) {
+      // 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
+      }
+      console.log(red('Failed to compile.\n'))
+      console.log(messages.errors.join('\n\n'))
+      return
+    }
+
+    // Show warnings if no errors were found.
+    if (messages.warnings.length) {
+      console.log(yellow('Compiled with warnings.\n'))
+      console.log(messages.warnings.join('\n\n'))
+
+      // Teach some ESLint tricks.
+      console.log(
+        `\nSearch for the ${yellow(
+          'keywords'
+        )} to learn more about each warning.`
+      )
+    }
+  })
+
+  return compiler
+}
+
+// We need to provide a custom onError function for httpProxyMiddleware.
+// It allows us to log custom error messages on the console.
+function onProxyError(proxy) {
+  return (err, req, res) => {
+    const host = req.headers && req.headers.host
+    const error = `Proxy error: Could not proxy request ${req.url} from ${host} to ${proxy} (${err.code})`
+    console.log(error)
+
+    console.log(
+      'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' +
+        cyan(err.code) +
+        ').'
+    )
+
+    // And immediately send the proper error response to the client.
+    // Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side.
+    if (res.writeHead && !res.headersSent) {
+      res.writeHead(500)
+    }
+
+    res.end(error)
+  }
+}
+
+function prepareProxy(proxy, appPublicFolder, servedPathname) {
+  // `proxy` lets you specify alternate servers for specific requests.
+  if (!proxy) return undefined
+
+  if (typeof proxy !== 'string') {
+    console.log(
+      red('When specified, "proxy" in package.json must be a string.')
+    )
+    console.log(red('Instead, the type of "proxy" was "' + typeof proxy + '".'))
+    console.log(
+      red('Either remove "proxy" from package.json, or make it a string.')
+    )
+    process.exit(1)
+  }
+
+  // If proxy is specified, let it handle any request except for
+  // files in the public folder and requests to the WebpackDevServer socket endpoint.
+  // https://github.com/facebook/create-react-app/issues/6720
+  const sockPath = process.env.WDS_SOCKET_PATH || '/ws'
+  const isDefaultSockHost = !process.env.WDS_SOCKET_HOST
+  function mayProxy(pathname) {
+    const maybePublicPath = path.resolve(
+      appPublicFolder,
+      pathname.replace(new RegExp('^' + servedPathname), '')
+    )
+    const isPublicFileRequest = fs.existsSync(maybePublicPath)
+    // used by webpackHotDevClient
+    const isWdsEndpointRequest =
+      isDefaultSockHost && pathname.startsWith(sockPath)
+    return !(isPublicFileRequest || isWdsEndpointRequest)
+  }
+
+  if (!/^http(s)?:\/\//.test(proxy)) {
+    console.log(
+      red(
+        'When "proxy" is specified in package.json it must start with either http:// or https://'
+      )
+    )
+    process.exit(1)
+  }
+
+  const target = proxy
+
+  return [
+    {
+      target,
+      logLevel: 'silent',
+      // For single page apps, we generally want to fallback to /index.html.
+      // However we also want to respect `proxy` for API calls.
+      // So if `proxy` is specified as a string, we need to decide which fallback to use.
+      // We use a heuristic: We want to proxy all the requests that are not meant
+      // for static assets and as all the requests for static assets will be using
+      // `GET` method, we can proxy all non-`GET` requests.
+      // For `GET` requests, if request `accept`s text/html, we pick /index.html.
+      // Modern browsers include text/html into `accept` header when navigating.
+      // However API calls like `fetch()` won’t generally accept text/html.
+      // If this heuristic doesn’t work well for you, use `src/setupProxy.js`.
+      context: function(pathname, req) {
+        return (
+          req.method !== 'GET' ||
+          (mayProxy(pathname) &&
+            req.headers.accept &&
+            req.headers.accept.indexOf('text/html') === -1)
+        )
+      },
+      onProxyReq: proxyReq => {
+        // Browsers may send Origin headers even with same-origin
+        // requests. To prevent CORS issues, we have to change
+        // the Origin to match the target URL.
+        if (proxyReq.getHeader('origin')) {
+          proxyReq.setHeader('origin', target)
+        }
+      },
+      onError: onProxyError(target),
+      secure: false,
+      changeOrigin: true,
+      ws: true,
+      xfwd: true
+    }
+  ]
+}
+
+async function choosePort(defaultPort) {
+  const isDefaultPortFree = await isFreePort(defaultPort)
+  if (isDefaultPortFree) return defaultPort
+
+  console.log(`Something is already running on port ${defaultPort}.`)
+
+  const [freePort] = await findFreePorts(1, {startPort: 3000})
+
+  if (isInteractive) {
+    clearConsole()
+    const existingProcess = getProcessForPort(defaultPort)
+    if (existingProcess) {
+      console.log(`It seems that ${existingProcess} is using the default port.`)
+      console.log(green(`Using free port: ${freePort} instead.`))
+    }
+    return freePort
+  }
+}
+
+module.exports = {
+  choosePort,
+  createCompiler,
+  prepareProxy,
+  prepareUrls
+}

package/utils/getProcessForPort.js

@@ -0,0 +1,81 @@
+// @ts-check
+
+'use strict'
+
+const {execSync, execFileSync} = require('child_process')
+const {cyan, gray, bold} = require('@s-ui/helpers/colors')
+
+/** @type {import('child_process').ExecSyncOptionsWithStringEncoding} */
+const execOptions = {
+  encoding: 'utf8',
+  stdio: [
+    'pipe', // stdin (default)
+    'pipe', // stdout (default)
+    'ignore' // stderr
+  ]
+}
+
+/**
+ * Get the process id for a given port.
+ * @param {number} port - The port to look for
+ * @returns {string} The process id
+ */
+function getProcessIdOnPort(port) {
+  return execFileSync(
+    'lsof',
+    [`-i:${port}`, '-P', '-t', '-sTCP:LISTEN'],
+    execOptions
+  )
+    .split('\n')[0]
+    .trim()
+}
+
+/**
+ * Get the command for a given process id.
+ * @param {string} processId - The process id
+ * @returns {string} - The process name
+ */
+function getProcessCommand(processId) {
+  const command = execSync(
+    'ps -o command -p ' + processId + ' | sed -n 2p',
+    execOptions
+  )
+
+  return command.replace(/\n$/, '')
+}
+
+/**
+ * Get the directory of a process by its id.
+ * @param {string} processId - The process id
+ * @returns {string} - The process directory
+ */
+function getDirectoryOfProcessById(processId) {
+  return execSync(
+    `lsof -p ${processId} | awk '$4=="cwd" {for (i=9; i<=NF; i++) printf "%s ", $i}'`,
+    execOptions
+  ).trim()
+}
+
+/**
+ * Get all the information about a process running in a port
+ * @param {number} port - The port to look for
+ * @returns {null |}
+ */
+function getProcessForPort(port) {
+  try {
+    const processId = getProcessIdOnPort(port)
+    const directory = getDirectoryOfProcessById(processId)
+    const command = getProcessCommand(processId)
+
+    return (
+      bold(command) +
+      gray(' (pid ' + processId + ')\n') +
+      gray('  in ') +
+      cyan(directory)
+    )
+  } catch (e) {
+    return null
+  }
+}
+
+module.exports = getProcessForPort

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

@@ -0,0 +1,253 @@
+// @ts-check
+
+/* globals __webpack_hash__ */
+
+/**
+ * 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'
+
+// This alternative WebpackDevServer combines the functionality of:
+// https://github.com/webpack/webpack-dev-server/blob/webpack-1/client/index.js
+// https://github.com/webpack/webpack/blob/webpack-1/hot/dev-server.js
+
+// It only supports their simplest configuration (hot updates on same server).
+// It makes some opinionated choices on top, like adding a syntax error overlay
+// that looks similar to our console output. The error overlay is inspired by:
+// https://github.com/glenjamin/webpack-hot-middleware
+
+const stripAnsi = require('strip-ansi')
+const url = require('url')
+const formatWebpackMessages = require('./formatWebpackMessages.js')
+
+// We need to keep track of if there has been a runtime error.
+// Essentially, we cannot guarantee application state was not corrupted by the
+// runtime error. To prevent confusing behavior, we forcibly reload the entire
+// application. This is handled below when we are notified of a compile (code
+// change).
+// See https://github.com/facebook/create-react-app/issues/3096
+const hadRuntimeError = false
+
+// Connect to WebpackDevServer via a socket.
+const connection = new WebSocket(
+  url.format({
+    protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',
+    hostname: process.env.WDS_SOCKET_HOST || window.location.hostname,
+    port: process.env.WDS_SOCKET_PORT || window.location.port,
+    // Hardcoded in WebpackDevServer
+    pathname: process.env.WDS_SOCKET_PATH || '/ws',
+    slashes: true
+  })
+)
+
+// Unlike WebpackDevServer client, we won't try to reconnect
+// to avoid spamming the console. Disconnect usually happens
+// when developer stops the server.
+connection.onclose = function() {
+  if (typeof console !== 'undefined' && typeof console.info === 'function') {
+    console.info(
+      'The development server has disconnected.\nRefresh the page if necessary.'
+    )
+  }
+}
+
+// Remember some state related to hot module replacement.
+let isFirstCompilation = true
+let mostRecentCompilationHash = null
+let hasCompileErrors = false
+
+function clearOutdatedErrors() {
+  // Clean up outdated compile errors, if any.
+  if (typeof console !== 'undefined' && typeof console.clear === 'function') {
+    if (hasCompileErrors) {
+      console.clear()
+    }
+  }
+}
+
+// Successful compilation.
+function handleSuccess() {
+  clearOutdatedErrors()
+
+  const isHotUpdate = !isFirstCompilation
+  isFirstCompilation = false
+  hasCompileErrors = false
+
+  // Attempt to apply hot updates or reload.
+  if (isHotUpdate) {
+    tryApplyUpdates()
+  }
+}
+
+// Compilation with warnings (e.g. ESLint).
+function handleWarnings(warnings) {
+  clearOutdatedErrors()
+
+  const isHotUpdate = !isFirstCompilation
+  isFirstCompilation = false
+  hasCompileErrors = false
+
+  function printWarnings() {
+    // Print warnings to the console.
+    const formatted = formatWebpackMessages({
+      warnings: warnings,
+      errors: []
+    })
+
+    if (typeof console !== 'undefined' && typeof console.warn === 'function') {
+      for (let i = 0; i < formatted.warnings.length; i++) {
+        if (i === 5) {
+          console.warn(
+            'There were more warnings in other files.\n' +
+              'You can find a complete log in the terminal.'
+          )
+          break
+        }
+        console.warn(stripAnsi(formatted.warnings[i]))
+      }
+    }
+  }
+
+  printWarnings()
+
+  // Attempt to apply hot updates or reload.
+  if (isHotUpdate) {
+    tryApplyUpdates()
+  }
+}
+
+// Compilation with errors (e.g. syntax error or missing modules).
+function handleErrors(errors) {
+  clearOutdatedErrors()
+
+  isFirstCompilation = false
+  hasCompileErrors = true
+
+  // "Massage" webpack messages.
+  const formatted = formatWebpackMessages({
+    errors: errors,
+    warnings: []
+  })
+
+  // Also log them to the console.
+  if (typeof console !== 'undefined' && typeof console.error === 'function') {
+    for (let i = 0; i < formatted.errors.length; i++) {
+      console.error(stripAnsi(formatted.errors[i]))
+    }
+  }
+
+  // Do not attempt to reload now.
+  // We will reload on next success instead.
+}
+
+// There is a newer version of the code available.
+function handleAvailableHash(hash) {
+  // Update last known compilation hash.
+  mostRecentCompilationHash = hash
+}
+
+// Handle messages from the server.
+connection.onmessage = function(e) {
+  const message = JSON.parse(e.data)
+  switch (message.type) {
+    case 'hash':
+      handleAvailableHash(message.data)
+      break
+    case 'still-ok':
+    case 'ok':
+      handleSuccess()
+      break
+    case 'content-changed':
+      // Triggered when a file from `contentBase` changed.
+      window.location.reload()
+      break
+    case 'warnings':
+      handleWarnings(message.data)
+      break
+    case 'errors':
+      handleErrors(message.data)
+      break
+    default:
+    // Do nothing.
+  }
+}
+
+// Is there a newer version of this code available?
+function isUpdateAvailable() {
+  // __webpack_hash__ is the hash of the current compilation.
+  // It's a global variable injected by webpack.
+  // eslint-disable-next-line camelcase
+  return mostRecentCompilationHash !== __webpack_hash__
+}
+
+// webpack disallows updates in other states.
+function canApplyUpdates() {
+  return module.hot.status() === 'idle'
+}
+
+function canAcceptErrors() {
+  // NOTE: This var is injected by Webpack's DefinePlugin, and is a boolean instead of string.
+  const hasReactRefresh = process.env.FAST_REFRESH
+
+  const status = module.hot.status()
+  // React refresh can handle hot-reloading over errors.
+  // However, when hot-reload status is abort or fail,
+  // it indicates the current update cannot be applied safely,
+  // and thus we should bail out to a forced reload for consistency.
+  return hasReactRefresh && ['abort', 'fail'].indexOf(status) === -1
+}
+
+// Attempt to update code on the fly, fall back to a hard reload.
+function tryApplyUpdates(onHotUpdateSuccess) {
+  if (!module.hot) {
+    // HotModuleReplacementPlugin is not in webpack configuration.
+    window.location.reload()
+    return
+  }
+
+  if (!isUpdateAvailable() || !canApplyUpdates()) {
+    return
+  }
+
+  function handleApplyUpdates(err, updatedModules) {
+    const haveErrors = err || hadRuntimeError
+    // When there is no error but updatedModules is unavailable,
+    // it indicates a critical failure in hot-reloading,
+    // e.g. server is not ready to serve new bundle,
+    // and hence we need to do a forced reload.
+    const needsForcedReload = !err && !updatedModules
+    if ((haveErrors && !canAcceptErrors()) || needsForcedReload) {
+      window.location.reload()
+      return
+    }
+
+    if (typeof onHotUpdateSuccess === 'function') {
+      // Maybe we want to do something.
+      onHotUpdateSuccess()
+    }
+
+    if (isUpdateAvailable()) {
+      // While we were updating, there was a new update! Do it again.
+      tryApplyUpdates()
+    }
+  }
+
+  // https://webpack.github.io/docs/hot-module-replacement.html#check
+  const result = module.hot.check(/* autoApply */ true, handleApplyUpdates)
+
+  // // webpack 2 returns a Promise instead of invoking a callback
+  if (result && result.then) {
+    result.then(
+      function(updatedModules) {
+        handleApplyUpdates(null, updatedModules)
+      },
+      function(err) {
+        handleApplyUpdates(err, null)
+      }
+    )
+  }
+}

package/webpack.config.dev.js

@@ -3,22 +3,28 @@
 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')
-const {envVars, MAIN_ENTRY_POINT, config, cleanList, when} = require('./shared')
-const {resolveLoader} = require('./shared/resolve-loader')
+const {
+  envVars,
+  MAIN_ENTRY_POINT,
+  config,
+  cleanList,
+  when
+} = require('./shared/index.js')
+const definePlugin = require('./shared/define.js')
+const manifestLoaderRules = require('./shared/module-rules-manifest-loader.js')
+const {aliasFromConfig, defaultAlias} = require('./shared/resolve-alias.js')
+
+const {resolveLoader} = require('./shared/resolve-loader.js')
 
 const EXCLUDED_FOLDERS_REGEXP = new RegExp(
   `node_modules(?!${path.sep}@s-ui(${path.sep}studio)(${path.sep}workbench)?${path.sep}src)`
 )
 const outputPath = path.join(process.cwd(), 'dist')
 
-process.env.NODE_ENV = 'development'
+const {CI = false} = process.env
 
-const smp = new SpeedMeasurePlugin()
+process.env.NODE_ENV = 'development'
 
 /** @typedef {import('webpack').Configuration} WebpackConfig */
 
@@ -32,14 +38,18 @@ const webpackConfig = {
       ...aliasFromConfig
     },
     fallback: {
-      fs: false
+      fs: false,
+      http: require.resolve('stream-http'),
+      https: require.resolve('https-browserify'),
+      buffer: require.resolve('buffer/'),
+      url: require.resolve('url/')
     },
     modules: ['node_modules', path.resolve(process.cwd())],
     extensions: ['.js', '.json']
   },
   stats: 'errors-only',
   entry: cleanList([
-    require.resolve('react-dev-utils/webpackHotDevClient'),
+    require.resolve('./utils/webpackHotDevClient.js'),
     MAIN_ENTRY_POINT
   ]),
   target: 'web',
@@ -58,7 +68,7 @@ const webpackConfig = {
   },
   plugins: [
     new webpack.ProvidePlugin({
-      process: 'process/browser'
+      process: 'process/browser.js'
     }),
     new webpack.EnvironmentPlugin(envVars(config.env)),
     definePlugin({__DEV__: true}),
@@ -116,9 +126,9 @@ const webpackConfig = {
       )
     ])
   },
-  watch: true,
+  watch: !CI,
   devtool:
     config.sourcemaps && config.sourcemaps.dev ? config.sourcemaps.dev : false
 }
 
-module.exports = config.measure ? smp.wrap(webpackConfig) : webpackConfig
+module.exports = webpackConfig

package/webpack.config.lib.js

@@ -1,11 +1,16 @@
 const webpack = require('webpack')
-const {cleanList, envVars, MAIN_ENTRY_POINT, config} = require('./shared/index')
+const {
+  cleanList,
+  envVars,
+  MAIN_ENTRY_POINT,
+  config
+} = require('./shared/index.js')
 const path = require('path')
-const minifyJs = require('./shared/minify-js')
-const definePlugin = require('./shared/define')
-const babelRules = require('./shared/module-rules-babel')
-const {extractComments, sourceMap} = require('./shared/config')
-const {aliasFromConfig} = require('./shared/resolve-alias')
+const minifyJs = require('./shared/minify-js.js')
+const definePlugin = require('./shared/define.js')
+const babelRules = require('./shared/module-rules-babel.js')
+const {extractComments, sourceMap} = require('./shared/config.js')
+const {aliasFromConfig} = require('./shared/resolve-alias.js')
 
 module.exports = {
   mode: 'production',
@@ -24,12 +29,12 @@ module.exports = {
     : MAIN_ENTRY_POINT,
   target: 'web',
   output: {
-    jsonpFunction: 'suiWebpackJsonp',
     filename: 'index.js'
   },
   optimization: {
     // avoid looping over all the modules after the compilation
     checkWasmTypes: false,
+    minimize: true,
     minimizer: [minifyJs({extractComments, sourceMap})]
   },
   plugins: cleanList([
@@ -41,10 +46,5 @@ module.exports = {
   ]),
   module: {
     rules: [babelRules]
-  },
-  node: {
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty'
   }
 }

package/webpack.config.prod.js

@@ -8,22 +8,22 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const {WebpackManifestPlugin} = require('webpack-manifest-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const InlineChunkHtmlPlugin = require('./shared/inline-chunk-html-plugin.js')
-const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
+
 const {
   when,
   cleanList,
   envVars,
   MAIN_ENTRY_POINT,
   config
-} = require('./shared/index')
-const minifyJs = require('./shared/minify-js')
-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, sourceMap} = require('./shared/config')
-const {aliasFromConfig} = require('./shared/resolve-alias')
-const {resolveLoader} = require('./shared/resolve-loader')
+} = require('./shared/index.js')
+const {aliasFromConfig} = require('./shared/resolve-alias.js')
+const {extractComments, sourceMap} = require('./shared/config.js')
+const {resolveLoader} = require('./shared/resolve-loader.js')
+const babelRules = require('./shared/module-rules-babel.js')
+const definePlugin = require('./shared/define.js')
+const manifestLoaderRules = require('./shared/module-rules-manifest-loader.js')
+const minifyCss = require('./shared/minify-css.js')
+const minifyJs = require('./shared/minify-js.js')
 
 const PUBLIC_PATH = process.env.CDN || config.cdn || '/'
 
@@ -35,8 +35,6 @@ const cssFileName = config.onlyHash
   ? '[contenthash:8].css'
   : '[name].[contenthash:8].css'
 
-const smp = new SpeedMeasurePlugin()
-
 /** @typedef {import('webpack').Configuration} WebpackConfig */
 
 /** @type {WebpackConfig} */
@@ -51,6 +49,8 @@ const webpackConfig = {
     fallback: {
       assert: false,
       fs: false,
+      http: require.resolve('stream-http'),
+      https: require.resolve('https-browserify'),
       path: false
     }
   },
@@ -67,9 +67,15 @@ const webpackConfig = {
     minimizer: [minifyJs({extractComments, sourceMap}), minifyCss()].filter(
       Boolean
     ),
-    runtimeChunk: true
+    runtimeChunk: true,
+    splitChunks: {
+      chunks: 'all'
+    }
   },
   plugins: cleanList([
+    new webpack.ProvidePlugin({
+      process: 'process/browser'
+    }),
     new webpack.ids.HashedModuleIdsPlugin(),
     new webpack.EnvironmentPlugin(envVars(config.env)),
     definePlugin(),
@@ -133,4 +139,4 @@ const webpackConfig = {
   resolveLoader
 }
 
-module.exports = config.measure ? smp.wrap(webpackConfig) : webpackConfig
+module.exports = webpackConfig

package/webpack.config.server.js

@@ -1,12 +1,12 @@
 const webpack = require('webpack')
 const webpackNodeExternals = require('webpack-node-externals')
 const path = require('path')
-const babelRules = require('./shared/module-rules-babel')
-const manifestLoaderRules = require('./shared/module-rules-manifest-loader')
-const {aliasFromConfig} = require('./shared/resolve-alias')
 
-const {config, when, cleanList} = require('./shared')
-const {resolveLoader} = require('./shared/resolve-loader')
+const {config, when, cleanList} = require('./shared/index.js')
+const babelRules = require('./shared/module-rules-babel.js')
+const manifestLoaderRules = require('./shared/module-rules-manifest-loader.js')
+const {aliasFromConfig} = require('./shared/resolve-alias.js')
+const {resolveLoader} = require('./shared/resolve-loader.js')
 
 const filename = '[name].[chunkhash:8].js'
 
@@ -31,6 +31,7 @@ const webpackConfig = {
   },
   optimization: {
     checkWasmTypes: false,
+    minimize: true,
     nodeEnv: false
   },
   externals: [webpackNodeExternals()],