@s-ui/bundler 8.0.0-beta.2 → 8.0.0-beta.23

package/bin/sui-bundler-analyzer.js

@@ -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

@@ -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

@@ -11,10 +11,7 @@ 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')
 
@@ -24,8 +21,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 +41,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 +55,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 +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.linkAll,
+    linkAll: program.opts().linkAll,
     packagesToLink
   })
+
   const compiler = createCompiler(nextConfig, urls)
   const serverConfig = createDevServerConfig(nextConfig, urls.lanUrlForConfig)
   const devServer = new WebpackDevServer(
@@ -91,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

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s-ui/bundler",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.23",
   "description": "Config-free bundler for ES6 React apps.",
   "bin": {
     "sui-bundler": "./bin/sui-bundler.js"
@@ -21,30 +21,35 @@
   },
   "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",
-    "commander": "6.2.1",
+    "buffer": "6.0.3",
+    "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",
+    "css-minimizer-webpack-plugin": "3.3.1",
+    "esbuild-loader": "2.18.0",
+    "escape-string-regexp": "4.0.0",
+    "fast-glob": "3.2.10",
+    "find-free-ports": "3.0.0",
     "html-webpack-plugin": "5.5.0",
-    "mini-css-extract-plugin": "2.4.4",
+    "mini-css-extract-plugin": "2.4.6",
+    "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",
+    "sass": "1.47.0",
     "speed-measure-webpack-plugin": "1.5.0",
+    "strip-ansi": "6.0.1",
     "style-loader": "3.3.1",
-    "webpack": "5.61.0",
-    "webpack-dev-server": "4.4.0",
-    "webpack-manifest-plugin": "4.0.2",
+    "url": "0.11.0",
+    "webpack": "5.66.0",
+    "webpack-dev-server": "4.7.3",
+    "webpack-manifest-plugin": "4.1.1",
     "webpack-node-externals": "3.0.0"
   }
 }

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')
+
+// 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

@@ -5,17 +5,26 @@ 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')
 
+const {CI = false} = process.env
+
 process.env.NODE_ENV = 'development'
 
 const smp = new SpeedMeasurePlugin()
@@ -32,14 +41,16 @@ const webpackConfig = {
       ...aliasFromConfig
     },
     fallback: {
-      fs: false
+      fs: false,
+      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',
@@ -116,7 +127,7 @@ const webpackConfig = {
       )
     ])
   },
-  watch: true,
+  watch: !CI,
   devtool:
     config.sourcemaps && config.sourcemaps.dev ? config.sourcemaps.dev : false
 }

package/webpack.config.prod.js

@@ -47,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: {

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'