@s-ui/bundler 9.43.0 → 9.44.0

package/bin/sui-bundler-build.js

@@ -41,12 +41,7 @@ program
   })
   .parse(process.argv)
 
-const {
-  clean = false,
-  context,
-  saveStats,
-  linkPackage: packagesToLink = []
-} = program.opts()
+const {clean = false, context, saveStats, linkPackage: packagesToLink = []} = program.opts()
 
 config.context = context || config.context
 
@@ -106,10 +101,7 @@ compiler.run(async (error, stats) => {
   const resolvePublicFile = file => path.resolve(process.cwd(), 'public', file)
 
   if (offlinePageExists) {
-    fs.copyFileSync(
-      path.resolve(offlinePath),
-      resolvePublicFile('offline.html')
-    )
+    fs.copyFileSync(path.resolve(offlinePath), resolvePublicFile('offline.html'))
   }
 
   if (offlinePageExists || staticsCacheOnly) {
@@ -126,31 +118,19 @@ compiler.run(async (error, stats) => {
 
     const importScripts = offlineConfig.importScripts || []
 
-    const stringImportScripts = importScripts
-      .map(url => `importScripts("${url}")`)
-      .join('\n')
+    const stringImportScripts = importScripts.map(url => `importScripts("${url}")`).join('\n')
 
-    Boolean(importScripts.length) &&
-      console.log('\nExternal Scripts Added to the SW:\n', stringImportScripts)
+    Boolean(importScripts.length) && console.log('\nExternal Scripts Added to the SW:\n', stringImportScripts)
 
     // read the service worker template
-    const swTemplate = fs.readFileSync(
-      path.resolve(__dirname, '..', 'service-worker.js'),
-      'utf-8'
-    )
+    const swTemplate = fs.readFileSync(path.resolve(__dirname, '..', 'service-worker.js'), 'utf-8')
 
     // replace all the variables from the template with the actual values
     const swCode = swTemplate
       .replace('// IMPORT_SCRIPTS_HERE', stringImportScripts)
       .replace("require('static-manifest')", JSON.stringify(manifestStatics))
-      .replace(
-        "require('static-cache-name')",
-        JSON.stringify(Date.now().toString())
-      )
-      .replace(
-        "require('static-statics-cache-only')",
-        JSON.stringify(staticsCacheOnly)
-      )
+      .replace("require('static-cache-name')", JSON.stringify(Date.now().toString()))
+      .replace("require('static-statics-cache-only')", JSON.stringify(staticsCacheOnly))
 
     const swFilePath = resolvePublicFile('service-worker.js')
 
@@ -158,9 +138,7 @@ compiler.run(async (error, stats) => {
     console.log('\nService worker generated succesfully!\n')
   }
 
-  log.success(
-    `Your app is compiled in ${process.env.NODE_ENV} mode in /public. It's ready to roll!`
-  )
+  log.success(`Your app is compiled in ${process.env.NODE_ENV} mode in /public. It's ready to roll!`)
 
   compiler.close(closeErr => {
     const exitCode = closeErr ? 1 : 0

package/bin/sui-bundler-dev.js

@@ -28,10 +28,7 @@ const DEFAULT_WATCH = !CI
 if (!module.parent) {
   program
     .option('-c, --context [folder]', 'Context folder (cwd by default)')
-    .option(
-      '-L, --link-all [monorepo]',
-      'Link all packages inside of monorepo multipackage'
-    )
+    .option('-L, --link-all [monorepo]', 'Link all packages inside of monorepo multipackage')
     .option(
       '-l, --link-package [package]',
       'Replace each occurrence of this package with an absolute path to this folder',
@@ -41,11 +38,7 @@ if (!module.parent) {
       },
       []
     )
-    .option(
-      '-w, --watch',
-      'Watch files and restart the server on change',
-      DEFAULT_WATCH
-    )
+    .option('-w, --watch', 'Watch files and restart the server on change', DEFAULT_WATCH)
     .on('--help', () => {
       console.log('  Examples:')
       console.log('')
@@ -61,21 +54,11 @@ if (!module.parent) {
   webpackConfig.context = context || webpackConfig.context
 }
 
-const start = async ({
-  config = webpackConfig,
-  packagesToLink = program.opts().linkPackage || []
-} = {}) => {
+const start = async ({config = webpackConfig, packagesToLink = program.opts().linkPackage || []} = {}) => {
   clearConsole()
   // Warn and crash if required files are missing
-  if (
-    !checkRequiredFiles([
-      path.join(config.context, 'index.html'),
-      path.join(config.context, 'app.js')
-    ])
-  ) {
-    log.error(
-      `✖ Required files are missing, create and index.html and app.js inside your src folder.`
-    )
+  if (!checkRequiredFiles([path.join(config.context, 'index.html'), path.join(config.context, 'app.js')])) {
+    log.error(`✖ Required files are missing, create and index.html and app.js inside your src folder.`)
     process.exit(1)
   }
 

package/bin/sui-bundler-lib.js

@@ -16,10 +16,7 @@ program
   .option('-o, --output [output]', 'Bundle folder path')
   .option('-u, --umd [libraryName]', 'Whether to output library as umb')
   .option('-r, --root', 'Create build in root dir instead of version subdir')
-  .option(
-    '-p, --path [path]',
-    'Absolute public path where files will be located.'
-  )
+  .option('-p, --path [path]', 'Absolute public path where files will be located.')
   .on('--help', () =>
     console.log(`Examples:
       $ sui-bundler lib src/index.js -o umd/my-lib -p http://my-cdn.com/my-lib -C'
@@ -48,12 +45,7 @@ if (!publicPath) {
 process.env.NODE_ENV = process.env.NODE_ENV || 'production'
 
 const version = getPackageJson(process.cwd()).version
-const outputFolder = path.join(
-  process.cwd(),
-  output,
-  path.sep,
-  root ? '' : version
-)
+const outputFolder = path.join(process.cwd(), output, path.sep, root ? '' : version)
 const webpackConfig = {...config, entry: path.resolve(process.cwd(), entry)}
 webpackConfig.output.publicPath = publicPath + (root ? '' : version + '/')
 webpackConfig.output.path = outputFolder
@@ -94,7 +86,5 @@ webpack(webpackConfig).run((error, stats) => {
   }
 
   console.log(`Webpack stats: ${stats}`)
-  log.success(
-    `Your library is compiled in production mode in: \n${outputFolder}`
-  )
+  log.success(`Your library is compiled in production mode in: \n${outputFolder}`)
 })

package/bin/sui-bundler.js

@@ -9,9 +9,6 @@ program
   .command('dev', 'open a server dev to start the development')
   .command('build', 'Compile all assets and create a public folder')
   .command('lib', 'Compile a library to a bundle with chunks.')
-  .command(
-    'analyzer',
-    'Compile all assets and create a HTML inspector for your bundle'
-  )
+  .command('analyzer', 'Compile all assets and create a HTML inspector for your bundle')
 
 program.parse(process.argv)

package/factories/createCompiler.js

@@ -32,9 +32,7 @@ module.exports = (config, urls) => {
 
     // Log the correct message of compilation depending if we have warnings
     if (isSuccessful) {
-      stats.hasWarnings()
-        ? log.warn('⚠ Compiled with warnings')
-        : log.success('✔ Compiled successfully')
+      stats.hasWarnings() ? log.warn('⚠ Compiled with warnings') : log.success('✔ Compiled successfully')
     }
 
     // Even with warnings, we show instructions to access localhost if we have a compilation
@@ -52,9 +50,7 @@ module.exports = (config, urls) => {
 
     // With warnings, even after showing the instructions we must list the warnings we have
     if (stats.hasWarnings()) {
-      const messages = formatWebpackMessages(
-        stats.toJson('errors-warnings', true)
-      )
+      const messages = formatWebpackMessages(stats.toJson('errors-warnings', true))
       log.warn(messages.warnings.join('\n\n'))
     }
   })

package/loaders/ExternalsManifestLoader.js

@@ -46,9 +46,7 @@ async function externalsManifestLoader(source) {
 
   try {
     const manifest = await getRemoteManifest(
-      typeof manifestURL === 'string'
-        ? manifestURL
-        : manifestURL[process.env.NODE_ENV]
+      typeof manifestURL === 'string' ? manifestURL : manifestURL[process.env.NODE_ENV]
     )
     const entries = Object.entries(manifest)
     const nextSource = entries.reduce((acc, entry) => {

package/loaders/linkLoaderConfigBuilder.js

@@ -14,9 +14,7 @@ const diccFromAbsolutePaths = (paths, init = {}) =>
       log.success(`✔ ${pkg.name} from path "${packagePath}"`)
       return acc
     } catch (e) {
-      log.warn(
-        `⚠ Package from path "${packagePath}" can't be linked.\n  Path is wrong or package.json is missing.`
-      )
+      log.warn(`⚠ Package from path "${packagePath}" can't be linked.\n  Path is wrong or package.json is missing.`)
       return acc
     }
   }, init)
@@ -24,11 +22,7 @@ const diccFromAbsolutePaths = (paths, init = {}) =>
 const absolutePathForMonoRepo = base => {
   if (!base) return []
   return fg
-    .sync([
-      `${path.resolve(base)}/**/package.json`,
-      '!**/node_modules/**',
-      '!**/lib/**'
-    ])
+    .sync([`${path.resolve(base)}/**/package.json`, '!**/node_modules/**', '!**/lib/**'])
     .map(p => path.dirname(p))
 }
 

package/loaders/sassLinkImporter.js

@@ -8,10 +8,7 @@ const createSassLinkImporter = entryPoints => url => {
     const [org, name] = url.split(/\//)
     const pkg = [org.replace('~', ''), name].join('/')
 
-    const absoluteUrl = url.replace(
-      new RegExp(`~?${pkg}(\\/lib)?`, 'g'),
-      entryPoints[pkg]
-    )
+    const absoluteUrl = url.replace(new RegExp(`~?${pkg}(\\/lib)?`, 'g'), entryPoints[pkg])
     return {file: absoluteUrl}
   }
   return null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s-ui/bundler",
-  "version": "9.43.0",
+  "version": "9.44.0",
   "description": "Config-free bundler for ES6 React apps.",
   "bin": {
     "sui-bundler": "./bin/sui-bundler.js"

package/service-worker.js

@@ -50,9 +50,7 @@ const copyResponse = async function (response) {
     statusText: clonedResponse.statusText
   }
 
-  const body = canConstructResponseFromBodyStream()
-    ? clonedResponse.body
-    : await clonedResponse.blob()
+  const body = canConstructResponseFromBodyStream() ? clonedResponse.body : await clonedResponse.blob()
 
   return new Response(body, responseInit)
 }

package/shared/config.js

@@ -1,14 +1,8 @@
 /* Extract sui-bundler from package.json -> "config": {"sui-bundler": { ... }} */
-const {
-  config: packageJsonConfig = {}
-} = require(`${process.cwd()}/package.json`)
+const {config: packageJsonConfig = {}} = require(`${process.cwd()}/package.json`)
 
 const {'sui-bundler': config = {}} = packageJsonConfig
-const {
-  extractComments = false,
-  sourcemaps,
-  supportLegacyBrowsers = true
-} = config
+const {extractComments = false, sourcemaps, supportLegacyBrowsers = true} = config
 
 exports.config = config
 exports.supportLegacyBrowsers = supportLegacyBrowsers

package/shared/inline-chunk-html-plugin.js

@@ -19,9 +19,7 @@ class InlineChunkHtmlPlugin {
     if (tag.tagName !== 'script' || !(tag.attributes && tag.attributes.src)) {
       return tag
     }
-    const scriptName = publicPath
-      ? tag.attributes.src.replace(publicPath, '')
-      : tag.attributes.src
+    const scriptName = publicPath ? tag.attributes.src.replace(publicPath, '') : tag.attributes.src
     if (!this.tests.some(test => scriptName.match(test))) {
       return tag
     }
@@ -39,8 +37,7 @@ class InlineChunkHtmlPlugin {
     }
 
     compiler.hooks.compilation.tap('InlineChunkHtmlPlugin', compilation => {
-      const tagFunction = tag =>
-        this.getInlinedTag(publicPath, compilation.assets, tag)
+      const tagFunction = tag => this.getInlinedTag(publicPath, compilation.assets, tag)
 
       const hooks = this.htmlWebpackPlugin.getHooks(compilation)
       hooks.alterAssetTagGroups.tap('InlineChunkHtmlPlugin', assets => {

package/shared/minify-js.js

@@ -22,6 +22,4 @@ const terserMinifier = ({extractComments, sourceMap}) =>
   })
 
 module.exports = ({extractComments, sourceMap}) =>
-  supportLegacyBrowsers
-    ? terserMinifier({extractComments, sourceMap})
-    : esbuildMinifier({sourceMap})
+  supportLegacyBrowsers ? terserMinifier({extractComments, sourceMap}) : esbuildMinifier({sourceMap})

package/shared/module-rules-babel.js

@@ -5,11 +5,7 @@ const EXCLUDED_FOLDERS_REGEXP = new RegExp(
   `node_modules(?!${path.sep}@s-ui(${path.sep}studio)(${path.sep}workbench)?${path.sep}src)`
 )
 
-module.exports = ({
-  isServer = false,
-  isDevelopment = false,
-  supportLegacyBrowsers = true
-} = {}) => ({
+module.exports = ({isServer = false, isDevelopment = false, supportLegacyBrowsers = true} = {}) => ({
   test: /\.jsx?$/,
   exclude: EXCLUDED_FOLDERS_REGEXP,
   use: [
@@ -20,9 +16,7 @@ module.exports = ({
         cacheCompression: false,
         babelrc: false,
         compact: true,
-        plugins: [
-          isDevelopment && require.resolve('react-refresh/babel')
-        ].filter(Boolean),
+        plugins: [isDevelopment && require.resolve('react-refresh/babel')].filter(Boolean),
         presets: [
           [
             require.resolve('babel-preset-sui'),

package/shared/resolve-alias.js

@@ -9,33 +9,22 @@ const {PWD} = process.env
  * So you should use the exact same imported file from node_modules, and the linked package
  * would try to use another different from its own node_modules. This will prevent that.
  */
-const defaultPackagesToAlias = [
-  'react',
-  'react-router-dom',
-  '@s-ui/pde',
-  '@s-ui/react-context',
-  '@s-ui/react-router'
-]
+const defaultPackagesToAlias = ['react', 'react-router-dom', '@s-ui/pde', '@s-ui/react-context', '@s-ui/react-router']
 
-const createAliasPath = pkgName =>
-  path.resolve(path.join(PWD, `./node_modules/${pkgName}`))
+const createAliasPath = pkgName => path.resolve(path.join(PWD, `./node_modules/${pkgName}`))
 
 const mustPackagesToAlias = {
   'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
   'react/jsx-runtime': 'react/jsx-runtime.js'
 }
 
-exports.defaultAlias = Object.fromEntries(
-  defaultPackagesToAlias.map(pkgName => [pkgName, createAliasPath(pkgName)])
-)
+exports.defaultAlias = Object.fromEntries(defaultPackagesToAlias.map(pkgName => [pkgName, createAliasPath(pkgName)]))
 
 const aliasFromConfig = config.alias
   ? Object.entries(config.alias).reduce(
       (obj, [aliasName, aliasPath]) => ({
         ...obj,
-        [aliasName]: aliasPath.startsWith('./')
-          ? path.join(PWD, aliasPath)
-          : aliasPath
+        [aliasName]: aliasPath.startsWith('./') ? path.join(PWD, aliasPath) : aliasPath
       }),
       {}
     )

package/shared/resolve-loader.js

@@ -1,7 +1,5 @@
 exports.resolveLoader = {
   alias: {
-    'externals-manifest-loader': require.resolve(
-      '../loaders/ExternalsManifestLoader'
-    )
+    'externals-manifest-loader': require.resolve('../loaders/ExternalsManifestLoader')
   }
 }

package/utils/WebpackDevServerUtils.js

@@ -51,11 +51,7 @@ function prepareUrls(protocol, host, port, pathname = '/') {
       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
-          )
-        ) {
+        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 {
@@ -94,21 +90,11 @@ function printInstructions(appName, urls, useYarn) {
 
   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(`To create a production build, use ` + `${cyan(`${useYarn ? 'yarn' : 'npm run'} build`)}.`)
   console.log()
 }
 
-function createCompiler({
-  appName,
-  config,
-  urls,
-  useYarn,
-  useTypeScript,
-  webpack
-}) {
+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
@@ -181,11 +167,7 @@ function createCompiler({
       console.log(messages.warnings.join('\n\n'))
 
       // Teach some ESLint tricks.
-      console.log(
-        `\nSearch for the ${yellow(
-          'keywords'
-        )} to learn more about each warning.`
-      )
+      console.log(`\nSearch for the ${yellow('keywords')} to learn more about each warning.`)
     }
   })
 
@@ -221,13 +203,9 @@ function prepareProxy(proxy, appPublicFolder, servedPathname) {
   if (!proxy) return undefined
 
   if (typeof proxy !== 'string') {
-    console.log(
-      red('When specified, "proxy" in package.json must be a 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.')
-    )
+    console.log(red('Either remove "proxy" from package.json, or make it a string.'))
     process.exit(1)
   }
 
@@ -237,23 +215,15 @@ function prepareProxy(proxy, appPublicFolder, servedPathname) {
   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 maybePublicPath = path.resolve(appPublicFolder, pathname.replace(new RegExp('^' + servedPathname), ''))
     const isPublicFileRequest = fs.existsSync(maybePublicPath)
     // used by webpackHotDevClient
-    const isWdsEndpointRequest =
-      isDefaultSockHost && pathname.startsWith(sockPath)
+    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://'
-      )
-    )
+    console.log(red('When "proxy" is specified in package.json it must start with either http:// or https://'))
     process.exit(1)
   }
 
@@ -276,9 +246,7 @@ function prepareProxy(proxy, appPublicFolder, servedPathname) {
       context: function (pathname, req) {
         return (
           req.method !== 'GET' ||
-          (mayProxy(pathname) &&
-            req.headers.accept &&
-            req.headers.accept.indexOf('text/html') === -1)
+          (mayProxy(pathname) && req.headers.accept && req.headers.accept.indexOf('text/html') === -1)
         )
       },
       onProxyReq: proxyReq => {

package/utils/clearConsole.js

@@ -6,9 +6,7 @@
  */
 
 function clearConsole() {
-  process.stdout.write(
-    process.platform === 'win32' ? '\x1B[2J\x1B[0f' : '\x1B[2J\x1B[3J\x1B[H'
-  )
+  process.stdout.write(process.platform === 'win32' ? '\x1B[2J\x1B[0f' : '\x1B[2J\x1B[3J\x1B[H')
 }
 
 module.exports = clearConsole

package/utils/formatWebpackMessages.js

@@ -34,9 +34,7 @@ function formatMessage(message) {
   // 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
-    )
+    const parsingError = /Line (\d+):(?:(\d+):)?\s*Parsing error: (.+)$/.exec(line)
     if (!parsingError) {
       return line
     }
@@ -46,10 +44,7 @@ function formatMessage(message) {
 
   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`
-  )
+  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,
@@ -76,17 +71,14 @@ function formatMessage(message) {
   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:')
+      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.'
+    lines[1] += 'Run `npm install sass` or `yarn add sass` inside your workspace.'
   }
 
   message = lines.join('\n')
@@ -94,18 +86,12 @@ function formatMessage(message) {
   // 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((?!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()
-  )
+  lines = lines.filter((line, index, arr) => index === 0 || line.trim() !== '' || line.trim() !== arr[index - 1].trim())
 
   // Reassemble the message
   message = lines.join('\n')

package/utils/getProcessForPort.js

@@ -21,11 +21,7 @@ const execOptions = {
  * @returns {string} The process id
  */
 function getProcessIdOnPort(port) {
-  return execFileSync(
-    'lsof',
-    [`-i:${port}`, '-P', '-t', '-sTCP:LISTEN'],
-    execOptions
-  )
+  return execFileSync('lsof', [`-i:${port}`, '-P', '-t', '-sTCP:LISTEN'], execOptions)
     .split('\n')[0]
     .trim()
 }
@@ -36,10 +32,7 @@ function getProcessIdOnPort(port) {
  * @returns {string} - The process name
  */
 function getProcessCommand(processId) {
-  const command = execSync(
-    'ps -o command -p ' + processId + ' | sed -n 2p',
-    execOptions
-  )
+  const command = execSync('ps -o command -p ' + processId + ' | sed -n 2p', execOptions)
 
   return command.replace(/\n$/, '')
 }
@@ -50,10 +43,7 @@ function getProcessCommand(processId) {
  * @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()
+  return execSync(`lsof -p ${processId} | awk '$4=="cwd" {for (i=9; i<=NF; i++) printf "%s ", $i}'`, execOptions).trim()
 }
 
 /**
@@ -67,12 +57,7 @@ function getProcessForPort(port) {
     const directory = getDirectoryOfProcessById(processId)
     const command = getProcessCommand(processId)
 
-    return (
-      bold(command) +
-      gray(' (pid ' + processId + ')\n') +
-      gray('  in ') +
-      cyan(directory)
-    )
+    return bold(command) + gray(' (pid ' + processId + ')\n') + gray('  in ') + cyan(directory)
   } catch (e) {
     return null
   }

package/utils/ignoredFiles.js

@@ -13,10 +13,5 @@ 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'
-  )
+  return new RegExp(`^(?!${escape(path.normalize(appSrc + '/').replace(/[\\]+/g, '/'))}).+/node_modules/`, 'g')
 }

package/webpack.config.dev.js

@@ -5,13 +5,7 @@ const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
 
-const {
-  envVars,
-  MAIN_ENTRY_POINT,
-  config,
-  cleanList,
-  when
-} = require('./shared/index.js')
+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')
@@ -114,14 +108,11 @@ const webpackConfig = {
           require.resolve('@s-ui/sass-loader')
         ])
       },
-      when(config['externals-manifest'], () =>
-        manifestLoaderRules(config['externals-manifest'])
-      )
+      when(config['externals-manifest'], () => manifestLoaderRules(config['externals-manifest']))
     ])
   },
   watch: !CI,
-  devtool:
-    config.sourcemaps && config.sourcemaps.dev ? config.sourcemaps.dev : false
+  devtool: config.sourcemaps && config.sourcemaps.dev ? config.sourcemaps.dev : false
 }
 
 module.exports = webpackConfig

package/webpack.config.lib.js

@@ -1,21 +1,12 @@
 const webpack = require('webpack')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const {
-  cleanList,
-  envVars,
-  MAIN_ENTRY_POINT,
-  config
-} = require('./shared/index.js')
+const {cleanList, envVars, MAIN_ENTRY_POINT, config} = require('./shared/index.js')
 const path = require('path')
 const minifyJs = require('./shared/minify-js.js')
 const definePlugin = require('./shared/define.js')
 const createBabelRules = require('./shared/module-rules-babel.js')
 const sassRules = require('./shared/module-rules-sass.js')
-const {
-  extractComments,
-  sourceMap,
-  supportLegacyBrowsers
-} = require('./shared/config.js')
+const {extractComments, sourceMap, supportLegacyBrowsers} = require('./shared/config.js')
 const {aliasFromConfig} = require('./shared/resolve-alias.js')
 
 const cssFileName = 'styles.css'

package/webpack.config.prod.js

@@ -9,19 +9,9 @@ const {WebpackManifestPlugin} = require('webpack-manifest-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const InlineChunkHtmlPlugin = require('./shared/inline-chunk-html-plugin.js')
 
-const {
-  when,
-  cleanList,
-  envVars,
-  MAIN_ENTRY_POINT,
-  config
-} = require('./shared/index.js')
+const {when, cleanList, envVars, MAIN_ENTRY_POINT, config} = require('./shared/index.js')
 const {aliasFromConfig} = require('./shared/resolve-alias.js')
-const {
-  extractComments,
-  sourceMap,
-  supportLegacyBrowsers
-} = require('./shared/config.js')
+const {extractComments, sourceMap, supportLegacyBrowsers} = require('./shared/config.js')
 const {resolveLoader} = require('./shared/resolve-loader.js')
 const createBabelRules = require('./shared/module-rules-babel.js')
 const sassRules = require('./shared/module-rules-sass.js')
@@ -34,13 +24,9 @@ const CWD = process.cwd()
 const PUBLIC_PATH = process.env.CDN || config.cdn || '/'
 const PWD = process.env.PWD ?? ''
 
-const filename = config.onlyHash
-  ? '[contenthash:8].js'
-  : '[name].[contenthash:8].js'
+const filename = config.onlyHash ? '[contenthash:8].js' : '[name].[contenthash:8].js'
 
-const cssFileName = config.onlyHash
-  ? '[contenthash:8].css'
-  : '[name].[contenthash:8].css'
+const cssFileName = config.onlyHash ? '[contenthash:8].css' : '[name].[contenthash:8].css'
 
 const target = supportLegacyBrowsers ? ['web', 'es5'] : 'web'
 
@@ -77,9 +63,7 @@ const webpackConfig = {
   optimization: {
     checkWasmTypes: false,
     minimize: true,
-    minimizer: [minifyJs({extractComments, sourceMap}), minifyCss()].filter(
-      Boolean
-    ),
+    minimizer: [minifyJs({extractComments, sourceMap}), minifyCss()].filter(Boolean),
     runtimeChunk: true
   },
   plugins: cleanList([
@@ -116,9 +100,7 @@ const webpackConfig = {
     rules: cleanList([
       createBabelRules({supportLegacyBrowsers}),
       sassRules,
-      when(config['externals-manifest'], () =>
-        manifestLoaderRules(config['externals-manifest'])
-      )
+      when(config['externals-manifest'], () => manifestLoaderRules(config['externals-manifest']))
     ])
   },
   resolveLoader

package/webpack.config.server.dev.js

@@ -0,0 +1,119 @@
+// @ts-check
+
+const path = require('path')
+const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const {WebpackManifestPlugin} = require('webpack-manifest-plugin')
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+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 {supportLegacyBrowsers} = require('./shared/config.js')
+
+const {resolveLoader} = require('./shared/resolve-loader.js')
+const createBabelRules = require('./shared/module-rules-babel.js')
+
+const outputPath = path.join(process.cwd(), '.sui/public')
+
+const {CI = false, PWD = '', CDN} = process.env
+
+process.env.NODE_ENV = 'development'
+
+/** @typedef {import('webpack').Configuration} WebpackConfig */
+
+const webpackConfig = {
+  mode: 'development',
+  context: path.resolve(PWD, 'src'),
+  resolve: {
+    alias: {
+      ...defaultAlias,
+      ...aliasFromConfig
+    },
+    fallback: {
+      fs: false,
+      http: require.resolve('stream-http'),
+      https: require.resolve('https-browserify'),
+      buffer: require.resolve('buffer/'),
+      url: require.resolve('url/'),
+      stream: false,
+      zlib: false,
+      timers: false
+    },
+    modules: ['node_modules', path.resolve(process.cwd())],
+    extensions: ['.js', '.json']
+  },
+  stats: 'errors-only',
+  entry: {
+    app: [`webpack-hot-middleware/client?path=${CDN}__webpack_hmr`, MAIN_ENTRY_POINT]
+  },
+  target: 'web',
+  optimization: {
+    checkWasmTypes: false,
+    emitOnErrors: false,
+    removeAvailableModules: false,
+    removeEmptyChunks: false,
+    runtimeChunk: true,
+    splitChunks: false
+  },
+  output: {
+    path: outputPath,
+    pathinfo: false,
+    publicPath: CDN
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser.js'
+    }),
+    new webpack.EnvironmentPlugin(envVars(config.env)),
+    definePlugin({__DEV__: true}),
+    new MiniCssExtractPlugin(),
+    new HtmlWebpackPlugin({
+      template: './index.html',
+      inject: true,
+      env: process.env
+    }),
+    new WebpackManifestPlugin({fileName: 'asset-manifest.json'}),
+    new webpack.HotModuleReplacementPlugin(),
+    new ReactRefreshWebpackPlugin({overlay: false})
+  ],
+  resolveLoader,
+  module: {
+    rules: cleanList([
+      createBabelRules({supportLegacyBrowsers, isDevelopment: true}),
+      {
+        test: /(\.css|\.scss)$/,
+        use: cleanList([
+          MiniCssExtractPlugin.loader,
+          require.resolve('css-loader'),
+          when(config['externals-manifest'], () => ({
+            loader: 'externals-manifest-loader',
+            options: {
+              manifestURL: config['externals-manifest']
+            }
+          })),
+          {
+            loader: require.resolve('postcss-loader'),
+            options: {
+              postcssOptions: {
+                plugins: [
+                  require('autoprefixer')({
+                    overrideBrowserslist: config.targets
+                  })
+                ]
+              }
+            }
+          },
+          require.resolve('@s-ui/sass-loader')
+        ])
+      },
+      when(config['externals-manifest'], () => manifestLoaderRules(config['externals-manifest']))
+    ])
+  },
+  watch: !CI,
+  devtool: config.sourcemaps && config.sourcemaps.dev ? config.sourcemaps.dev : false
+}
+
+module.exports = webpackConfig

package/webpack.config.server.js

@@ -48,9 +48,7 @@ const webpackConfig = {
           dataUrl: () => ''
         }
       },
-      when(config['externals-manifest'], () =>
-        manifestLoaderRules(config['externals-manifest'])
-      )
+      when(config['externals-manifest'], () => manifestLoaderRules(config['externals-manifest']))
     ])
   }
 }