@s-ui/bundler 9.43.0 → 9.45.0-typescript.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')])) {
+    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))
 }
 
@@ -49,7 +43,7 @@ module.exports = ({config, packagesToLink, linkAll}) => {
    * if neccesary
    */
   const linkLoader = {
-    test: /\.(jsx?|scss)$/,
+    test: /\.(jsx?|tsx?|scss)$/,
     enforce: 'pre', // this will ensure is execute before transformations
     use: {
       loader: require.resolve('./LinkLoader'),

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,12 +1,13 @@
 {
   "name": "@s-ui/bundler",
-  "version": "9.43.0",
+  "version": "9.45.0-typescript.0",
   "description": "Config-free bundler for ES6 React apps.",
   "bin": {
     "sui-bundler": "./bin/sui-bundler.js"
   },
   "main": "./bin/sui-bundler.js",
   "scripts": {
+    "postinstall": "node ./scripts/postinstall.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
@@ -21,10 +22,13 @@
   },
   "homepage": "https://github.com/SUI-Components/sui/tree/master/packages/sui-bundler#readme",
   "dependencies": {
-    "@babel/core": "7.18.10",
+    "@babel/core": "7.21.8",
+    "@s-ui/compiler-config": "1",
     "@s-ui/helpers": "1",
     "@s-ui/sass-loader": "1",
-    "address": "1.2.0",
+    "@swc/core": "1.3.14",
+    "@swc/helpers": "0.4.12",
+    "address": "1.2.2",
     "autoprefixer": "10.4.8",
     "babel-loader": "8.2.5",
     "babel-preset-sui": "3",
@@ -34,7 +38,7 @@
     "css-minimizer-webpack-plugin": "4.0.0",
     "esbuild": "0.15.5",
     "escape-string-regexp": "4.0.0",
-    "fast-glob": "3.2.11",
+    "fast-glob": "3.2.12",
     "find-free-ports": "3.0.0",
     "html-webpack-plugin": "5.5.0",
     "https-browserify": "1.0.0",
@@ -46,6 +50,7 @@
     "stream-http": "3.2.0",
     "strip-ansi": "6.0.1",
     "style-loader": "3.3.1",
+    "swc-loader": "0.2.1",
     "url": "0.11.0",
     "webpack": "5.82.1",
     "webpack-dev-server": "4.10.0",

package/scripts/postinstall.js

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+
+const crypto = require('crypto')
+const fs = require('fs-extra')
+const path = require('path')
+const {writeFile} = require('@s-ui/helpers/file.js')
+
+const {INIT_CWD} = process.env
+const tsConfigTemplate = `\
+{
+  "extends": "@s-ui/bundler/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./"
+  },
+  "include": ["src", "domain", "components"]
+}`
+
+const md5 = str => crypto.createHash('md5').update(str).digest('hex')
+const TS_CONFIG_PATH = path.join(INIT_CWD, 'tsconfig.json')
+const PACKAGE_JSON_CONFIG_PATH = path.join(INIT_CWD, 'package.json')
+
+const config = require(PACKAGE_JSON_CONFIG_PATH)?.config?.['sui-bundler'] || {}
+
+const shouldGenerateTSConfig = () => {
+  try {
+    if (!config?.type || config?.type !== 'typescript') return false
+
+    if (!fs.existsSync(TS_CONFIG_PATH)) return true
+
+    const tsConfigLocal = fs.readFileSync(TS_CONFIG_PATH, {encoding: 'utf8'})
+    return md5(tsConfigLocal) !== md5(tsConfigTemplate)
+  } catch (err) {
+    return true
+  }
+}
+
+async function main() {
+  console.log('🔍 [sui-bundler postinstall] Checking if tsconfig.json is up to date...')
+  if (!shouldGenerateTSConfig()) {
+    console.log('✅ [sui-bundler postinstall] tsconfig.json is up to date')
+    process.exit(0)
+  }
+  await writeFile(TS_CONFIG_PATH, tsConfigTemplate)
+  console.log('❌ [sui-bundler postinstall] tsconfig.json was not up to date, so we updated it')
+}
+
+main()

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/define.js

@@ -6,9 +6,23 @@ if (process.platform === 'win32') {
   process.env.PWD = process.cwd()
 }
 
-module.exports = (vars = {}) =>
-  new webpack.DefinePlugin({
+const {MAGIC_STRINGS = '{}'} = process.env
+
+let magic
+try {
+  magic = JSON.parse(MAGIC_STRINGS)
+} catch (err) {
+  magic = {}
+}
+
+module.exports = (vars = {}) => {
+  const definitions = {
     __DEV__: false,
     __BASE_DIR__: JSON.stringify(process.env.PWD),
-    ...vars
-  })
+    __MOCKS_API_PATH__: JSON.stringify(process.env.MOCKS_API_PATH || process.env.PWD + '/mocks/routes'),
+    ...vars,
+    ...Object.fromEntries(Object.entries(magic).map(([key, value]) => [key, JSON.stringify(value)]))
+  }
+
+  return new webpack.DefinePlugin(definitions)
+}

package/shared/index.js

@@ -1,6 +1,6 @@
 const {config} = require('./config.js')
 
-exports.MAIN_ENTRY_POINT = './app.js'
+exports.MAIN_ENTRY_POINT = './app'
 exports.config = config
 
 exports.cleanList = list => list.filter(Boolean)

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-compiler.js

@@ -0,0 +1,69 @@
+/* eslint-disable no-console */
+const fs = require('fs-extra')
+const path = require('path')
+const {config} = require('./index.js')
+const {getSWCConfig} = require('@s-ui/compiler-config')
+
+const EXCLUDED_FOLDERS_REGEXP = new RegExp(
+  `node_modules(?!${path.sep}@s-ui(${path.sep}studio)(${path.sep}workbench)?${path.sep}src)`
+)
+
+const getTSConfig = () => {
+  // Get TS config from the package dir.
+  const tsConfigPath = path.join(process.cwd(), 'tsconfig.json')
+  let tsConfig
+
+  try {
+    if (fs.existsSync(tsConfigPath)) {
+      tsConfig = JSON.parse(fs.readFileSync(tsConfigPath, {encoding: 'utf8'}))
+    }
+  } catch (err) {
+    console.error(err)
+  }
+
+  return tsConfig
+}
+
+module.exports = ({isServer = false, isDevelopment = false, supportLegacyBrowsers = true} = {}) => {
+  const tsConfig = getTSConfig()
+  // If TS config exists in root dir, set TypeScript as enabled.
+  const isTypeScriptEnabled = Boolean(tsConfig)
+
+  return isTypeScriptEnabled
+    ? {
+        test: /\.(js|ts)x?$/,
+        exclude: EXCLUDED_FOLDERS_REGEXP,
+        use: [
+          {
+            loader: require.resolve('swc-loader'),
+            options: getSWCConfig({isModern: false, isTypeScript: true})
+          }
+        ]
+      }
+    : {
+        test: /\.jsx?$/,
+        exclude: EXCLUDED_FOLDERS_REGEXP,
+        use: [
+          {
+            loader: require.resolve('babel-loader'),
+            options: {
+              cacheDirectory: true,
+              cacheCompression: false,
+              babelrc: false,
+              compact: true,
+              plugins: [isDevelopment && require.resolve('react-refresh/babel')].filter(Boolean),
+              presets: [
+                [
+                  require.resolve('babel-preset-sui'),
+                  {
+                    isServer,
+                    isModern: !supportLegacyBrowsers,
+                    targets: config.targets
+                  }
+                ]
+              ]
+            }
+          }
+        ]
+      }
+}

package/shared/resolve-alias.js

@@ -1,5 +1,6 @@
 const path = require('path')
 const {config} = require('./config.js')
+const fs = require('fs')
 
 const {PWD} = process.env
 
@@ -11,31 +12,37 @@ const {PWD} = process.env
  */
 const defaultPackagesToAlias = [
   'react',
+  'react-dom',
   'react-router-dom',
+  'react/jsx-dev-runtime',
+  'react/jsx-runtime',
   '@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 => {
+  const PWDNodeModules = path.join(PWD, './node_modules')
+  if (fs.existsSync(PWDNodeModules)) return path.resolve(path.join(PWDNodeModules, pkgName))
 
-const mustPackagesToAlias = {
-  'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
-  'react/jsx-runtime': 'react/jsx-runtime.js'
+  try {
+    return require.resolve(pkgName).replace(/\/index\.js$/, '')
+  } catch (e) {
+    return ''
+  }
 }
 
+const mustPackagesToAlias = {}
+
 exports.defaultAlias = Object.fromEntries(
-  defaultPackagesToAlias.map(pkgName => [pkgName, createAliasPath(pkgName)])
+  defaultPackagesToAlias.map(pkgName => [pkgName, createAliasPath(pkgName)]).filter(([, path]) => path)
 )
 
 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/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@s-ui/compiler-config/tsconfig.json"
+}

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,20 +5,14 @@ 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')
 const {supportLegacyBrowsers} = require('./shared/config.js')
 
 const {resolveLoader} = require('./shared/resolve-loader.js')
-const createBabelRules = require('./shared/module-rules-babel.js')
+const createCompilerRules = require('./shared/module-rules-compiler.js')
 
 const outputPath = path.join(process.cwd(), 'dist')
 
@@ -47,7 +41,7 @@ const webpackConfig = {
       timers: false
     },
     modules: ['node_modules', path.resolve(process.cwd())],
-    extensions: ['.js', '.json']
+    extensions: ['.js', '.tsx', '.ts', '.json']
   },
   stats: 'errors-only',
   entry: {
@@ -87,7 +81,7 @@ const webpackConfig = {
   resolveLoader,
   module: {
     rules: cleanList([
-      createBabelRules({supportLegacyBrowsers, isDevelopment: true}),
+      createCompilerRules({supportLegacyBrowsers, isDevelopment: true}),
       {
         test: /(\.css|\.scss)$/,
         use: cleanList([
@@ -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 createCompilerRules = require('./shared/module-rules-compiler.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'
@@ -54,7 +45,7 @@ module.exports = {
   },
   plugins: cleanList([
     new webpack.ProvidePlugin({
-      process: 'process/browser'
+      process: 'process/browser.js'
     }),
     new MiniCssExtractPlugin({
       filename: cssFileName,
@@ -67,6 +58,6 @@ module.exports = {
     definePlugin()
   ]),
   module: {
-    rules: [createBabelRules({supportLegacyBrowsers}), sassRules]
+    rules: [createCompilerRules({supportLegacyBrowsers}), sassRules]
   }
 }

package/webpack.config.prod.js

@@ -9,21 +9,11 @@ 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 createCompilerRules = require('./shared/module-rules-compiler.js')
 const sassRules = require('./shared/module-rules-sass.js')
 const definePlugin = require('./shared/define.js')
 const manifestLoaderRules = require('./shared/module-rules-manifest-loader.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'
 
@@ -54,7 +40,7 @@ const webpackConfig = {
   context: path.resolve(CWD, 'src'),
   resolve: {
     alias: {...aliasFromConfig},
-    extensions: ['.js', '.json'],
+    extensions: ['.js', '.json', '.ts', '.tsx'],
     modules: ['node_modules', path.resolve(CWD)],
     fallback: {
       assert: false,
@@ -77,14 +63,12 @@ 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([
     new webpack.ProvidePlugin({
-      process: 'process/browser'
+      process: 'process/browser.js'
     }),
     new webpack.ids.HashedModuleIdsPlugin(),
     new webpack.EnvironmentPlugin(envVars(config.env)),
@@ -114,11 +98,9 @@ const webpackConfig = {
   ]),
   module: {
     rules: cleanList([
-      createBabelRules({supportLegacyBrowsers}),
+      createCompilerRules({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

@@ -3,7 +3,7 @@ const webpackNodeExternals = require('webpack-node-externals')
 const path = require('path')
 
 const {config, when, cleanList} = require('./shared/index.js')
-const createBabelRules = require('./shared/module-rules-babel.js')
+const createCompilerRules = require('./shared/module-rules-compiler.js')
 const manifestLoaderRules = require('./shared/module-rules-manifest-loader.js')
 const {aliasFromConfig} = require('./shared/resolve-alias.js')
 const {resolveLoader} = require('./shared/resolve-loader.js')
@@ -18,7 +18,7 @@ const webpackConfig = {
   mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
   resolve: {
     alias: {...aliasFromConfig},
-    extensions: ['.js', '.json'],
+    extensions: ['.js', '.json', '.ts', '.tsx'],
     modules: ['node_modules', path.resolve(process.cwd())]
   },
   entry: './server.js',
@@ -39,7 +39,7 @@ const webpackConfig = {
   resolveLoader,
   module: {
     rules: cleanList([
-      createBabelRules({isServer: true}),
+      createCompilerRules({isServer: true}),
       {
         // ignore css/scss/svg require/imports files in the server
         test: /(\.svg|\.s?css)$/,
@@ -48,9 +48,7 @@ const webpackConfig = {
           dataUrl: () => ''
         }
       },
-      when(config['externals-manifest'], () =>
-        manifestLoaderRules(config['externals-manifest'])
-      )
+      when(config['externals-manifest'], () => manifestLoaderRules(config['externals-manifest']))
     ])
   }
 }

package/shared/module-rules-babel.js

@@ -1,39 +0,0 @@
-const path = require('path')
-const {config} = require('./index.js')
-
-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
-} = {}) => ({
-  test: /\.jsx?$/,
-  exclude: EXCLUDED_FOLDERS_REGEXP,
-  use: [
-    {
-      loader: require.resolve('babel-loader'),
-      options: {
-        cacheDirectory: true,
-        cacheCompression: false,
-        babelrc: false,
-        compact: true,
-        plugins: [
-          isDevelopment && require.resolve('react-refresh/babel')
-        ].filter(Boolean),
-        presets: [
-          [
-            require.resolve('babel-preset-sui'),
-            {
-              isServer,
-              isModern: !supportLegacyBrowsers,
-              targets: config.targets
-            }
-          ]
-        ]
-      }
-    }
-  ]
-})