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

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

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

@@ -1,24 +1,30 @@
+// @ts-check
+
 const path = require('path')
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const {WebpackPluginServe: Serve} = require('webpack-plugin-serve')
+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 getPort = require('get-port')
 
 const EXCLUDED_FOLDERS_REGEXP = new RegExp(
-  `node_modules(?!${path.sep}@s-ui(${path.sep}svg|${path.sep}studio)(${path.sep}workbench)?${path.sep}src)`
+  `node_modules(?!${path.sep}@s-ui(${path.sep}studio)(${path.sep}workbench)?${path.sep}src)`
 )
-const host = process.env.HOST || '0.0.0.0'
 const outputPath = path.join(process.cwd(), 'dist')
 
+const {CI = false} = process.env
+
 process.env.NODE_ENV = 'development'
 
+const smp = new SpeedMeasurePlugin()
+
+/** @typedef {import('webpack').Configuration} WebpackConfig */
+
+/** @type {WebpackConfig} */
 const webpackConfig = {
   mode: 'development',
   context: path.resolve(process.env.PWD, 'src'),
@@ -30,14 +36,17 @@ const webpackConfig = {
     fallback: {
       fs: false
     },
+    modules: ['node_modules', path.resolve(process.cwd())],
     extensions: ['.js', '.json']
   },
+  stats: 'errors-only',
   entry: cleanList([
-    MAIN_ENTRY_POINT,
-    require.resolve('webpack-plugin-serve/client')
+    require.resolve('react-dev-utils/webpackHotDevClient'),
+    MAIN_ENTRY_POINT
   ]),
   target: 'web',
   optimization: {
+    checkWasmTypes: false,
     emitOnErrors: false,
     removeAvailableModules: false,
     removeEmptyChunks: false,
@@ -50,22 +59,15 @@ const webpackConfig = {
     publicPath: '/'
   },
   plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser'
+    }),
     new webpack.EnvironmentPlugin(envVars(config.env)),
     definePlugin({__DEV__: true}),
     new HtmlWebpackPlugin({
       template: './index.html',
       inject: true,
       env: process.env
-    }),
-    new Serve({
-      compress: true,
-      historyFallback: true,
-      host,
-      hmr: false,
-      liveReload: true,
-      open: true,
-      port: getPort({port: 3000}),
-      static: [outputPath]
     })
   ],
   resolveLoader,
@@ -108,7 +110,7 @@ const webpackConfig = {
               }
             }
           },
-          require.resolve('sass-loader')
+          require.resolve('@s-ui/sass-loader')
         ])
       },
       when(config['externals-manifest'], () =>
@@ -116,9 +118,9 @@ const webpackConfig = {
       )
     ])
   },
-  watch: true,
+  watch: !CI,
   devtool:
     config.sourcemaps && config.sourcemaps.dev ? config.sourcemaps.dev : false
 }
 
-module.exports = webpackConfig
+module.exports = config.measure ? smp.wrap(webpackConfig) : webpackConfig

package/webpack.config.lib.js

@@ -1,5 +1,6 @@
 const webpack = require('webpack')
 const {cleanList, envVars, MAIN_ENTRY_POINT, config} = require('./shared/index')
+const path = require('path')
 const minifyJs = require('./shared/minify-js')
 const definePlugin = require('./shared/define')
 const babelRules = require('./shared/module-rules-babel')
@@ -12,7 +13,8 @@ module.exports = {
     alias: {
       ...aliasFromConfig
     },
-    extensions: ['.js', '.json']
+    extensions: ['.js', '.json'],
+    modules: ['node_modules', path.resolve(process.cwd())]
   },
   entry: config.vendor
     ? {

package/webpack.config.prod.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 /* eslint-disable no-console */
 const webpack = require('webpack')
 const path = require('path')
@@ -5,8 +7,8 @@ const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const {WebpackManifestPlugin} = require('webpack-manifest-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const InlineChunkHtmlPlugin = require('./plugins/InlineChunkHtmlPlugin')
-
+const InlineChunkHtmlPlugin = require('./shared/inline-chunk-html-plugin.js')
+const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
 const {
   when,
   cleanList,
@@ -19,7 +21,6 @@ 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 {splitChunks} = require('./shared/optimization-split-chunks')
 const {extractComments, sourceMap} = require('./shared/config')
 const {aliasFromConfig} = require('./shared/resolve-alias')
 const {resolveLoader} = require('./shared/resolve-loader')
@@ -34,18 +35,23 @@ const cssFileName = config.onlyHash
   ? '[contenthash:8].css'
   : '[name].[contenthash:8].css'
 
-module.exports = {
-  target: ['web', 'es5'],
+const smp = new SpeedMeasurePlugin()
+
+/** @typedef {import('webpack').Configuration} WebpackConfig */
+
+/** @type {WebpackConfig} */
+const webpackConfig = {
   devtool: sourceMap,
   mode: 'production',
   context: path.resolve(process.cwd(), 'src'),
   resolve: {
     alias: {...aliasFromConfig},
     extensions: ['.js', '.json'],
+    modules: ['node_modules', path.resolve(process.cwd())],
     fallback: {
-      fs: 'empty',
-      net: 'empty',
-      tls: 'empty'
+      assert: false,
+      fs: false,
+      path: false
     }
   },
   entry: MAIN_ENTRY_POINT,
@@ -56,14 +62,15 @@ module.exports = {
     publicPath: PUBLIC_PATH
   },
   optimization: {
-    // avoid looping over all the modules after the compilation
     checkWasmTypes: false,
     minimize: true,
-    minimizer: [minifyJs({extractComments}), minifyCss()],
-    runtimeChunk: true,
-    splitChunks
+    minimizer: [minifyJs({extractComments, sourceMap}), minifyCss()].filter(
+      Boolean
+    ),
+    runtimeChunk: true
   },
   plugins: cleanList([
+    new webpack.ids.HashedModuleIdsPlugin(),
     new webpack.EnvironmentPlugin(envVars(config.env)),
     definePlugin(),
     new MiniCssExtractPlugin({
@@ -115,7 +122,7 @@ module.exports = {
               }
             }
           },
-          require.resolve('sass-loader')
+          require.resolve('@s-ui/sass-loader')
         ])
       },
       when(config['externals-manifest'], () =>
@@ -125,3 +132,5 @@ module.exports = {
   },
   resolveLoader
 }
+
+module.exports = config.measure ? smp.wrap(webpackConfig) : webpackConfig

package/webpack.config.server.js

@@ -10,12 +10,16 @@ const {resolveLoader} = require('./shared/resolve-loader')
 
 const filename = '[name].[chunkhash:8].js'
 
+/** @typedef {import('webpack').Configuration} WebpackConfig */
+
+/** @type {WebpackConfig} */
 const webpackConfig = {
   context: path.resolve(process.cwd(), 'src'),
   mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
   resolve: {
     alias: {...aliasFromConfig},
-    extensions: ['.js', '.json']
+    extensions: ['.js', '.json'],
+    modules: ['node_modules', path.resolve(process.cwd())]
   },
   entry: './server.js',
   target: 'node',
@@ -36,9 +40,12 @@ const webpackConfig = {
     rules: cleanList([
       babelRules,
       {
-        // ignore css/scss require/imports files in the server
-        test: /\.s?css$/,
-        use: 'null-loader'
+        // ignore css/scss/svg require/imports files in the server
+        test: [/\.s?css$/, /\.svg$/],
+        type: 'asset/inline',
+        generator: {
+          dataUrl: () => ''
+        }
       },
       when(config['externals-manifest'], () =>
         manifestLoaderRules(config['externals-manifest'])