@s-ui/bundler 7.33.0 → 7.34.0

package/bin/sui-bundler-dev.js

@@ -8,8 +8,9 @@ process.on('unhandledRejection', err => {
 const program = require('commander')
 const path = require('path')
 const WebpackDevServer = require('webpack-dev-server')
-const clearConsole = require('react-dev-utils/clearConsole')
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles')
+
+const clearConsole = require('../utils/clearConsole')
+const checkRequiredFiles = require('../utils/checkRequiredFiles')
 const {
   choosePort,
   prepareUrls
@@ -55,9 +56,6 @@ if (!module.parent) {
   webpackConfig.context = context || webpackConfig.context
 }
 
-// Don't show ugly deprecation warnings that mess with the logging
-process.noDeprecation = true
-
 const start = async ({
   config = webpackConfig,
   packagesToLink = program.linkPackage || []
@@ -85,13 +83,20 @@ const start = async ({
   })
   const compiler = createCompiler(nextConfig, urls)
   const serverConfig = createDevServerConfig(nextConfig, urls.lanUrlForConfig)
-  const devServer = new WebpackDevServer(compiler, serverConfig)
+  const devServer = new WebpackDevServer(
+    {
+      ...serverConfig,
+      port,
+      host: HOST
+    },
+    compiler
+  )
   log.processing('❯ Starting the development server...\n')
-  devServer.listen(port, HOST, err => {
+  devServer.startCallback(err => {
     if (err) return log.error(err)
     ;['SIGINT', 'SIGTERM'].forEach(sig => {
       process.on(sig, () => {
-        devServer.close()
+        devServer.stop()
         process.exit()
       })
     })

package/factories/createCompiler.js

@@ -1,6 +1,6 @@
 const webpack = require('webpack')
-const clearConsole = require('react-dev-utils/clearConsole')
-const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages')
+const formatWebpackMessages = require('../utils/formatWebpackMessages')
+const clearConsole = require('../utils/clearConsole')
 const log = require('../shared/log')
 
 const isInteractive = process.stdout.isTTY

package/factories/createDevServerConfig.js

@@ -1,51 +1,38 @@
-const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware')
+// @ts-check
+
 const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware')
 const ignoredFiles = require('react-dev-utils/ignoredFiles')
 
-const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'
-const host = process.env.HOST || '0.0.0.0'
+const {HOST, HTTPS} = process.env
+const protocol = HTTPS === 'true' ? 'https' : 'http'
+const host = HOST || '0.0.0.0'
 
-module.exports = (config, allowedHost) => ({
-  // Enable gzip compression of generated files.
-  compress: true,
-  // Silence WebpackDevServer's own logs since they're generally not useful.
-  // It will still show compile warnings and errors with this setting.
-  clientLogLevel: 'none',
-  // Tell the server where to serve content from. This is only necessary if you want to serve static files from this folder as normally they come from memory
-  contentBase: 'public',
-  // By default files from `contentBase` will not trigger a page reload.
-  watchContentBase: true,
-  // Enable hot reloading server.
-  hot: true,
-  // Use 'ws' instead of 'sockjs-node' on server since we're using native
-  // websockets in `webpackHotDevClient`.
-  transportMode: 'ws',
-  // Prevent a WS client from getting injected as we're already including
-  // `webpackHotDevClient`.
-  injectClient: false,
-  // Tell the server at what URL to serve devServer.contentBase static content.
-  publicPath: config.output.publicPath,
-  // WebpackDevServer is noisy by default so we emit custom message instead
-  // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
-  quiet: true,
-  // Reportedly, this avoids CPU overload on some systems.
-  watchOptions: {
-    ignored: ignoredFiles(config.context)
+module.exports = config => ({
+  allowedHosts: 'all',
+  client: {
+    logging: 'none',
+    overlay: {
+      errors: true,
+      warnings: false
+    },
+    progress: true
+  },
+  static: {
+    directory: 'public',
+    watch: {
+      ignored: ignoredFiles(config.context)
+    }
   },
+  hot: true,
   https: protocol === 'https',
   host,
-  overlay: false,
   historyApiFallback: {
     disableDotRule: true
   },
-  public: allowedHost,
-  before(app) {
-    // This lets us open files from the runtime error overlay.
-    app.use(errorOverlayMiddleware())
-  },
-  after(app) {
+  open: 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.
-    app.use(noopServiceWorkerMiddleware(config.output.publicPath))
+    devServer.app.use(noopServiceWorkerMiddleware(config.output.publicPath))
   }
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s-ui/bundler",
-  "version": "7.33.0",
+  "version": "7.34.0",
   "description": "Config-free bundler for ES6 React apps.",
   "bin": {
     "sui-bundler": "./bin/sui-bundler.js"
@@ -29,7 +29,7 @@
     "commander": "6.2.1",
     "css-loader": "4.3.0",
     "css-minimizer-webpack-plugin": "1.1.5",
-    "esbuild-loader": "2.15.1",
+    "esbuild-loader": "2.16.0",
     "fast-glob": "3.2.7",
     "html-webpack-plugin": "4.5.0",
     "mini-css-extract-plugin": "1.6.0",
@@ -38,14 +38,14 @@
     "postcss-loader": "4.1.0",
     "react-dev-utils": "11.0.4",
     "rimraf": "3.0.2",
-    "sass": "1.39.0",
+    "sass": "1.43.3",
     "sass-loader": "10.1.0",
     "super-sass-loader": "0.1",
     "speed-measure-webpack-plugin": "1.5.0",
     "style-loader": "2.0.0",
     "terser-webpack-plugin": "4.2.2",
     "webpack": "4.46.0",
-    "webpack-dev-server": "3.11.2",
+    "webpack-dev-server": "4.3.1",
     "webpack-manifest-plugin": "4.0.2",
     "webpack-node-externals": "3.0.0"
   }

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

package/utils/clearConsole.js

@@ -0,0 +1,14 @@
+/**
+ * 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
+ */
+
+function clearConsole() {
+  process.stdout.write(
+    process.platform === 'win32' ? '\x1B[2J\x1B[0f' : '\x1B[2J\x1B[3J\x1B[H'
+  )
+}
+
+module.exports = clearConsole

package/utils/formatWebpackMessages.js

@@ -0,0 +1,126 @@
+/**
+ * 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 friendlySyntaxErrorLabel = 'Syntax error:'
+
+function isLikelyASyntaxError(message) {
+  return message.includes(friendlySyntaxErrorLabel)
+}
+
+// Cleans up webpack error messages.
+function formatMessage(message) {
+  let lines = []
+
+  if (typeof message === 'string') {
+    lines = message.split('\n')
+  } else if ('message' in message) {
+    lines = message.message.split('\n')
+  } else if (Array.isArray(message)) {
+    message.forEach(message => {
+      if ('message' in message) {
+        lines = message.message.split('\n')
+      }
+    })
+  }
+
+  // Strip webpack-added headers off errors/warnings
+  // https://github.com/webpack/webpack/blob/master/lib/ModuleError.js
+  lines = lines.filter(line => !/Module [A-z ]+\(from/.test(line))
+
+  // Transform parsing error into syntax error
+  // TODO: move this to our ESLint formatter?
+  lines = lines.map(line => {
+    const parsingError = /Line (\d+):(?:(\d+):)?\s*Parsing error: (.+)$/.exec(
+      line
+    )
+    if (!parsingError) {
+      return line
+    }
+    const [, errorLine, errorColumn, errorMessage] = parsingError
+    return `${friendlySyntaxErrorLabel} ${errorMessage} (${errorLine}:${errorColumn})`
+  })
+
+  message = lines.join('\n')
+  // Smoosh syntax errors (commonly found in CSS)
+  message = message.replace(
+    /SyntaxError\s+\((\d+):(\d+)\)\s*(.+?)\n/g,
+    `${friendlySyntaxErrorLabel} $3 ($1:$2)\n`
+  )
+  // Clean up export errors
+  message = message.replace(
+    /^.*export '(.+?)' was not found in '(.+?)'.*$/gm,
+    `Attempted import error: '$1' is not exported from '$2'.`
+  )
+  message = message.replace(
+    /^.*export 'default' \(imported as '(.+?)'\) was not found in '(.+?)'.*$/gm,
+    `Attempted import error: '$2' does not contain a default export (imported as '$1').`
+  )
+  message = message.replace(
+    /^.*export '(.+?)' \(imported as '(.+?)'\) was not found in '(.+?)'.*$/gm,
+    `Attempted import error: '$1' is not exported from '$3' (imported as '$2').`
+  )
+  lines = message.split('\n')
+
+  // Remove leading newline
+  if (lines.length > 2 && lines[1].trim() === '') {
+    lines.splice(1, 1)
+  }
+  // Clean up file name
+  lines[0] = lines[0].replace(/^(.*) \d+:\d+-\d+$/, '$1')
+
+  // Cleans up verbose "module not found" messages for files and packages.
+  if (lines[1] && lines[1].indexOf('Module not found: ') === 0) {
+    lines = [
+      lines[0],
+      lines[1]
+        .replace('Error: ', '')
+        .replace('Module not found: Cannot find file:', 'Cannot find file:')
+    ]
+  }
+
+  // Add helpful message for users trying to use Sass for the first time
+  if (lines[1] && lines[1].match(/Cannot find module.+sass/)) {
+    lines[1] = 'To import Sass files, you first need to install sass.\n'
+    lines[1] +=
+      'Run `npm install sass` or `yarn add sass` inside your workspace.'
+  }
+
+  message = lines.join('\n')
+  // Internal stacks are generally useless so we strip them... with the
+  // exception of stacks containing `webpack:` because they're normally
+  // from user code generated by webpack. For more information see
+  // https://github.com/facebook/create-react-app/pull/1050
+  message = message.replace(
+    /^\s*at\s((?!webpack:).)*:\d+:\d+[\s)]*(\n|$)/gm,
+    ''
+  ) // at ... ...:x:y
+  message = message.replace(/^\s*at\s<anonymous>(\n|$)/gm, '') // at <anonymous>
+  lines = message.split('\n')
+
+  // Remove duplicated newlines
+  lines = lines.filter(
+    (line, index, arr) =>
+      index === 0 || line.trim() !== '' || line.trim() !== arr[index - 1].trim()
+  )
+
+  // Reassemble the message
+  message = lines.join('\n')
+  return message.trim()
+}
+
+function formatWebpackMessages(json) {
+  const formattedErrors = json.errors.map(formatMessage)
+  const formattedWarnings = json.warnings.map(formatMessage)
+  const result = {errors: formattedErrors, warnings: formattedWarnings}
+  if (result.errors.some(isLikelyASyntaxError)) {
+    // If there are any syntax errors, show just them.
+    result.errors = result.errors.filter(isLikelyASyntaxError)
+  }
+  return result
+}
+
+module.exports = formatWebpackMessages

package/webpack.config.dev.js

@@ -27,6 +27,7 @@ const webpackConfig = {
     extensions: ['.js', '.json'],
     modules: ['node_modules', path.resolve(process.cwd())]
   },
+  stats: 'errors-only',
   entry: cleanList([
     require.resolve('react-dev-utils/webpackHotDevClient'),
     MAIN_ENTRY_POINT