@s-ui/bundler 9.43.0-beta.0 → 9.43.0-typescript.0

package/bin/sui-bundler-build.js

@@ -19,7 +19,6 @@ process.env.NODE_ENV = process.env.NODE_ENV || 'production'
 
 program
   .option('-C, --clean', 'Remove public folder before create a new one')
-  .option('-S, --save-stats', 'Save stats.json in public folder')
   .option(
     '-l, --link-package [package]',
     'Replace each occurrence of this package with an absolute path to this folder',
@@ -44,7 +43,6 @@ program
 const {
   clean = false,
   context,
-  saveStats,
   linkPackage: packagesToLink = []
 } = program.opts()
 
@@ -90,13 +88,6 @@ compiler.run(async (error, stats) => {
 
   console.log(`Webpack stats: ${stats}`)
 
-  if (saveStats) {
-    const filePath = `${process.cwd()}/public/stats.json`
-    fs.writeFileSync(filePath, JSON.stringify(stats.toJson(), null, 2), {
-      encoding: 'utf8'
-    })
-  }
-
   const offlinePath = path.join(process.cwd(), 'src', 'offline.html')
   const offlinePageExists = fs.existsSync(offlinePath)
   const {offline: offlineConfig = {}} = projectConfig

package/bin/sui-bundler-dev.js

@@ -67,12 +67,7 @@ const start = async ({
 } = {}) => {
   clearConsole()
   // Warn and crash if required files are missing
-  if (
-    !checkRequiredFiles([
-      path.join(config.context, 'index.html'),
-      path.join(config.context, 'app.js')
-    ])
-  ) {
+  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.`
     )

package/bin/sui-bundler-lib.js

@@ -73,18 +73,7 @@ log.processing('Generating minified bundle...')
 webpack(webpackConfig).run((error, stats) => {
   if (error) {
     showError(error, program)
-    process.exit(1)
-  }
-
-  if (stats.hasErrors()) {
-    const jsonStats = stats.toJson('errors-warnings')
-    jsonStats.errors?.forEach(error => log.error(error.message))
-    process.exit(1)
-  }
-
-  if (stats.hasWarnings()) {
-    const jsonStats = stats.toJson('errors-warnings')
-    jsonStats.warnings?.forEach(warning => log.warn(warning.message))
+    return 1
   }
 
   if (stats.hasErrors() || stats.hasWarnings()) {
@@ -97,4 +86,6 @@ webpack(webpackConfig).run((error, stats) => {
   log.success(
     `Your library is compiled in production mode in: \n${outputFolder}`
   )
+
+  return 0
 })

package/loaders/linkLoaderConfigBuilder.js

@@ -49,7 +49,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/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@s-ui/bundler",
-  "version": "9.43.0-beta.0",
+  "version": "9.43.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,9 +22,12 @@
   },
   "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",
+    "@swc/core": "1.3.14",
+    "@swc/helpers": "0.4.12",
     "address": "1.2.0",
     "autoprefixer": "10.4.8",
     "babel-loader": "8.2.5",
@@ -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,12 +50,11 @@
     "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",
     "webpack-manifest-plugin": "5.0.0",
-    "webpack-node-externals": "3.0.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
-    "react-refresh": "0.14.0"
+    "webpack-node-externals": "3.0.0"
   }
 }

package/scripts/postinstall.js

@@ -0,0 +1,53 @@
+#!/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 {dynamicPackage} = require('@s-ui/helpers/packages')
+
+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)
+  await dynamicPackage('typescript')
+  console.log(
+    '❌ [sui-bundler postinstall] tsconfig.json was not up to date, so we updated it'
+  )
+}
+main()

package/shared/define.js

@@ -6,9 +6,24 @@ 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
-  })
+    ...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/module-rules-compiler.js

@@ -0,0 +1,68 @@
+/* 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, 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,
+              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,22 +12,33 @@ 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

package/tsconfig.json

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

package/utils/webpackHotDevClient.js

@@ -0,0 +1,253 @@
+// @ts-check
+
+/* globals __webpack_hash__ */
+
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict'
+
+// This alternative WebpackDevServer combines the functionality of:
+// https://github.com/webpack/webpack-dev-server/blob/webpack-1/client/index.js
+// https://github.com/webpack/webpack/blob/webpack-1/hot/dev-server.js
+
+// It only supports their simplest configuration (hot updates on same server).
+// It makes some opinionated choices on top, like adding a syntax error overlay
+// that looks similar to our console output. The error overlay is inspired by:
+// https://github.com/glenjamin/webpack-hot-middleware
+
+const stripAnsi = require('strip-ansi')
+const url = require('url')
+const formatWebpackMessages = require('./formatWebpackMessages.js')
+
+// We need to keep track of if there has been a runtime error.
+// Essentially, we cannot guarantee application state was not corrupted by the
+// runtime error. To prevent confusing behavior, we forcibly reload the entire
+// application. This is handled below when we are notified of a compile (code
+// change).
+// See https://github.com/facebook/create-react-app/issues/3096
+const hadRuntimeError = false
+
+// Connect to WebpackDevServer via a socket.
+const connection = new WebSocket(
+  url.format({
+    protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',
+    hostname: process.env.WDS_SOCKET_HOST || window.location.hostname,
+    port: process.env.WDS_SOCKET_PORT || window.location.port,
+    // Hardcoded in WebpackDevServer
+    pathname: process.env.WDS_SOCKET_PATH || '/ws',
+    slashes: true
+  })
+)
+
+// Unlike WebpackDevServer client, we won't try to reconnect
+// to avoid spamming the console. Disconnect usually happens
+// when developer stops the server.
+connection.onclose = function () {
+  if (typeof console !== 'undefined' && typeof console.info === 'function') {
+    console.info(
+      'The development server has disconnected.\nRefresh the page if necessary.'
+    )
+  }
+}
+
+// Remember some state related to hot module replacement.
+let isFirstCompilation = true
+let mostRecentCompilationHash = null
+let hasCompileErrors = false
+
+function clearOutdatedErrors() {
+  // Clean up outdated compile errors, if any.
+  if (typeof console !== 'undefined' && typeof console.clear === 'function') {
+    if (hasCompileErrors) {
+      console.clear()
+    }
+  }
+}
+
+// Successful compilation.
+function handleSuccess() {
+  clearOutdatedErrors()
+
+  const isHotUpdate = !isFirstCompilation
+  isFirstCompilation = false
+  hasCompileErrors = false
+
+  // Attempt to apply hot updates or reload.
+  if (isHotUpdate) {
+    tryApplyUpdates()
+  }
+}
+
+// Compilation with warnings (e.g. ESLint).
+function handleWarnings(warnings) {
+  clearOutdatedErrors()
+
+  const isHotUpdate = !isFirstCompilation
+  isFirstCompilation = false
+  hasCompileErrors = false
+
+  function printWarnings() {
+    // Print warnings to the console.
+    const formatted = formatWebpackMessages({
+      warnings,
+      errors: []
+    })
+
+    if (typeof console !== 'undefined' && typeof console.warn === 'function') {
+      for (let i = 0; i < formatted.warnings.length; i++) {
+        if (i === 5) {
+          console.warn(
+            'There were more warnings in other files.\n' +
+              'You can find a complete log in the terminal.'
+          )
+          break
+        }
+        console.warn(stripAnsi(formatted.warnings[i]))
+      }
+    }
+  }
+
+  printWarnings()
+
+  // Attempt to apply hot updates or reload.
+  if (isHotUpdate) {
+    tryApplyUpdates()
+  }
+}
+
+// Compilation with errors (e.g. syntax error or missing modules).
+function handleErrors(errors) {
+  clearOutdatedErrors()
+
+  isFirstCompilation = false
+  hasCompileErrors = true
+
+  // "Massage" webpack messages.
+  const formatted = formatWebpackMessages({
+    errors,
+    warnings: []
+  })
+
+  // Also log them to the console.
+  if (typeof console !== 'undefined' && typeof console.error === 'function') {
+    for (let i = 0; i < formatted.errors.length; i++) {
+      console.error(stripAnsi(formatted.errors[i]))
+    }
+  }
+
+  // Do not attempt to reload now.
+  // We will reload on next success instead.
+}
+
+// There is a newer version of the code available.
+function handleAvailableHash(hash) {
+  // Update last known compilation hash.
+  mostRecentCompilationHash = hash
+}
+
+// Handle messages from the server.
+connection.onmessage = function (e) {
+  const message = JSON.parse(e.data)
+  switch (message.type) {
+    case 'hash':
+      handleAvailableHash(message.data)
+      break
+    case 'still-ok':
+    case 'ok':
+      handleSuccess()
+      break
+    case 'content-changed':
+      // Triggered when a file from `contentBase` changed.
+      window.location.reload()
+      break
+    case 'warnings':
+      handleWarnings(message.data)
+      break
+    case 'errors':
+      handleErrors(message.data)
+      break
+    default:
+    // Do nothing.
+  }
+}
+
+// Is there a newer version of this code available?
+function isUpdateAvailable() {
+  // __webpack_hash__ is the hash of the current compilation.
+  // It's a global variable injected by webpack.
+  // eslint-disable-next-line camelcase
+  return mostRecentCompilationHash !== __webpack_hash__
+}
+
+// webpack disallows updates in other states.
+function canApplyUpdates() {
+  return module.hot.status() === 'idle'
+}
+
+function canAcceptErrors() {
+  // NOTE: This var is injected by Webpack's DefinePlugin, and is a boolean instead of string.
+  const hasReactRefresh = process.env.FAST_REFRESH
+
+  const status = module.hot.status()
+  // React refresh can handle hot-reloading over errors.
+  // However, when hot-reload status is abort or fail,
+  // it indicates the current update cannot be applied safely,
+  // and thus we should bail out to a forced reload for consistency.
+  return hasReactRefresh && ['abort', 'fail'].indexOf(status) === -1
+}
+
+// Attempt to update code on the fly, fall back to a hard reload.
+function tryApplyUpdates(onHotUpdateSuccess) {
+  if (!module.hot) {
+    // HotModuleReplacementPlugin is not in webpack configuration.
+    window.location.reload()
+    return
+  }
+
+  if (!isUpdateAvailable() || !canApplyUpdates()) {
+    return
+  }
+
+  function handleApplyUpdates(err, updatedModules) {
+    const haveErrors = err || hadRuntimeError
+    // When there is no error but updatedModules is unavailable,
+    // it indicates a critical failure in hot-reloading,
+    // e.g. server is not ready to serve new bundle,
+    // and hence we need to do a forced reload.
+    const needsForcedReload = !err && !updatedModules
+    if ((haveErrors && !canAcceptErrors()) || needsForcedReload) {
+      window.location.reload()
+      return
+    }
+
+    if (typeof onHotUpdateSuccess === 'function') {
+      // Maybe we want to do something.
+      onHotUpdateSuccess()
+    }
+
+    if (isUpdateAvailable()) {
+      // While we were updating, there was a new update! Do it again.
+      tryApplyUpdates()
+    }
+  }
+
+  // https://webpack.github.io/docs/hot-module-replacement.html#check
+  const result = module.hot.check(/* autoApply */ true, handleApplyUpdates)
+
+  // // webpack 2 returns a Promise instead of invoking a callback
+  if (result && result.then) {
+    result.then(
+      function (updatedModules) {
+        handleApplyUpdates(null, updatedModules)
+      },
+      function (err) {
+        handleApplyUpdates(err, null)
+      }
+    )
+  }
+}

package/webpack.config.dev.js

@@ -3,7 +3,6 @@
 const path = require('path')
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
 
 const {
   envVars,
@@ -18,7 +17,7 @@ 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')
 
@@ -28,6 +27,7 @@ process.env.NODE_ENV = 'development'
 
 /** @typedef {import('webpack').Configuration} WebpackConfig */
 
+/** @type {WebpackConfig} */
 const webpackConfig = {
   mode: 'development',
   context: path.resolve(PWD, 'src'),
@@ -47,16 +47,13 @@ const webpackConfig = {
       timers: false
     },
     modules: ['node_modules', path.resolve(process.cwd())],
-    extensions: ['.js', '.json']
+    extensions: ['.js', '.tsx', '.ts', '.json']
   },
   stats: 'errors-only',
-  entry: {
-    app: MAIN_ENTRY_POINT
-  },
-  devServer: {
-    static: outputPath,
-    hot: true
-  },
+  entry: cleanList([
+    require.resolve('./utils/webpackHotDevClient.js'),
+    MAIN_ENTRY_POINT
+  ]),
   target: 'web',
   optimization: {
     checkWasmTypes: false,
@@ -81,13 +78,12 @@ const webpackConfig = {
       template: './index.html',
       inject: true,
       env: process.env
-    }),
-    new ReactRefreshWebpackPlugin({overlay: false})
+    })
   ],
   resolveLoader,
   module: {
     rules: cleanList([
-      createBabelRules({supportLegacyBrowsers, isDevelopment: true}),
+      createCompilerRules({supportLegacyBrowsers}),
       {
         test: /(\.css|\.scss)$/,
         use: cleanList([

package/webpack.config.lib.js

@@ -9,7 +9,7 @@ const {
 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,
@@ -67,6 +67,6 @@ module.exports = {
     definePlugin()
   ]),
   module: {
-    rules: [createBabelRules({supportLegacyBrowsers}), sassRules]
+    rules: [createCompilerRules({supportLegacyBrowsers}), sassRules]
   }
 }

package/webpack.config.prod.js

@@ -23,7 +23,7 @@ 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 sassRules = require('./shared/module-rules-sass.js')
 const definePlugin = require('./shared/define.js')
 const manifestLoaderRules = require('./shared/module-rules-manifest-loader.js')
@@ -54,7 +54,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,
@@ -114,7 +114,7 @@ const webpackConfig = {
   ]),
   module: {
     rules: cleanList([
-      createBabelRules({supportLegacyBrowsers}),
+      createCompilerRules({supportLegacyBrowsers}),
       sassRules,
       when(config['externals-manifest'], () =>
         manifestLoaderRules(config['externals-manifest'])

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)$/,

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
-            }
-          ]
-        ]
-      }
-    }
-  ]
-})