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

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,28 @@
+// @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')
 
 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,11 +34,13 @@ 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: {
@@ -50,22 +56,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 +107,7 @@ const webpackConfig = {
               }
             }
           },
-          require.resolve('sass-loader')
+          require.resolve('@s-ui/sass-loader')
         ])
       },
       when(config['externals-manifest'], () =>
@@ -121,4 +120,4 @@ const webpackConfig = {
     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,8 +21,11 @@ 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 {
+  extractComments,
+  useExperimentalMinifier,
+  sourceMap
+} = require('./shared/config')
 const {aliasFromConfig} = require('./shared/resolve-alias')
 const {resolveLoader} = require('./shared/resolve-loader')
 
@@ -34,19 +39,19 @@ 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'],
-    fallback: {
-      fs: 'empty',
-      net: 'empty',
-      tls: 'empty'
-    }
+    modules: ['node_modules', path.resolve(process.cwd())]
   },
   entry: MAIN_ENTRY_POINT,
   output: {
@@ -56,14 +61,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({useExperimentalMinifier, extractComments, sourceMap}),
+      minifyCss()
+    ].filter(Boolean),
+    runtimeChunk: true
   },
   plugins: cleanList([
+    new webpack.ids.HashedModuleIdsPlugin(),
     new webpack.EnvironmentPlugin(envVars(config.env)),
     definePlugin(),
     new MiniCssExtractPlugin({
@@ -115,7 +121,7 @@ module.exports = {
               }
             }
           },
-          require.resolve('sass-loader')
+          require.resolve('@s-ui/sass-loader')
         ])
       },
       when(config['externals-manifest'], () =>
@@ -125,3 +131,5 @@ module.exports = {
   },
   resolveLoader
 }
+
+module.exports = config.measure ? smp.wrap(webpackConfig) : webpackConfig

package/webpack.config.server.js

@@ -15,7 +15,8 @@ const webpackConfig = {
   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',