@s-ui/bundler 9.46.0-typescript.0 → 9.47.0

package/bin/sui-bundler-dev.js

@@ -57,7 +57,7 @@ if (!module.parent) {
 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')])) {
+  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/factories/createDevServerConfig.js

@@ -30,10 +30,16 @@ module.exports = config => ({
     'Access-Control-Allow-Methods': '*',
     'Access-Control-Allow-Headers': '*'
   },
-  static: {
-    directory: 'public',
-    watch: getWatchOptions(config)
-  },
+  static: [
+    {
+      directory: 'statics',
+      watch: getWatchOptions(config)
+    },
+    {
+      directory: 'public',
+      watch: getWatchOptions(config)
+    }
+  ],
   hot: true,
   host,
   historyApiFallback: {

package/loaders/linkLoaderConfigBuilder.js

@@ -43,7 +43,7 @@ module.exports = ({config, packagesToLink, linkAll}) => {
    * if neccesary
    */
   const linkLoader = {
-    test: /\.(jsx?|tsx?|scss)$/,
+    test: /\.(jsx?|scss)$/,
     enforce: 'pre', // this will ensure is execute before transformations
     use: {
       loader: require.resolve('./LinkLoader'),

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@s-ui/bundler",
-  "version": "9.46.0-typescript.0",
+  "version": "9.47.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": [],
@@ -22,12 +21,9 @@
   },
   "homepage": "https://github.com/SUI-Components/sui/tree/master/packages/sui-bundler#readme",
   "dependencies": {
-    "@babel/core": "7.21.8",
-    "@s-ui/compiler-config": "1",
+    "@babel/core": "7.18.10",
     "@s-ui/helpers": "1",
     "@s-ui/sass-loader": "1",
-    "@swc/core": "1.3.14",
-    "@swc/helpers": "0.4.12",
     "address": "1.2.2",
     "autoprefixer": "10.4.8",
     "babel-loader": "8.2.5",
@@ -38,7 +34,7 @@
     "css-minimizer-webpack-plugin": "4.0.0",
     "esbuild": "0.15.5",
     "escape-string-regexp": "4.0.0",
-    "fast-glob": "3.2.12",
+    "fast-glob": "3.2.11",
     "find-free-ports": "3.0.0",
     "html-webpack-plugin": "5.5.0",
     "https-browserify": "1.0.0",
@@ -50,7 +46,6 @@
     "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/shared/config.js

@@ -1,4 +1,5 @@
 /* Extract sui-bundler from package.json -> "config": {"sui-bundler": { ... }} */
+const path = require('path')
 const {config: packageJsonConfig = {}} = require(`${process.cwd()}/package.json`)
 
 const {'sui-bundler': config = {}} = packageJsonConfig
@@ -8,3 +9,4 @@ exports.config = config
 exports.supportLegacyBrowsers = supportLegacyBrowsers
 exports.extractComments = extractComments
 exports.sourceMap = (sourcemaps && sourcemaps.prod) || false
+exports.cacheDirectory = path.resolve(process.cwd(), '.sui/cache')

package/shared/define.js

@@ -6,23 +6,9 @@ if (process.platform === 'win32') {
   process.env.PWD = process.cwd()
 }
 
-const {MAGIC_STRINGS = '{}'} = process.env
-
-let magic
-try {
-  magic = JSON.parse(MAGIC_STRINGS)
-} catch (err) {
-  magic = {}
-}
-
-module.exports = (vars = {}) => {
-  const definitions = {
+module.exports = (vars = {}) =>
+  new webpack.DefinePlugin({
     __DEV__: false,
     __BASE_DIR__: JSON.stringify(process.env.PWD),
-    __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)
-}
+    ...vars
+  })

package/shared/index.js

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

package/shared/module-rules-babel.js

@@ -0,0 +1,33 @@
+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
+            }
+          ]
+        ]
+      }
+    }
+  ]
+})

package/shared/resolve-alias.js

@@ -1,6 +1,5 @@
 const path = require('path')
 const {config} = require('./config.js')
-const fs = require('fs')
 
 const {PWD} = process.env
 
@@ -10,33 +9,16 @@ 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-dom',
-  'react-router-dom',
-  'react/jsx-dev-runtime',
-  'react/jsx-runtime',
-  '@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 => {
-  const PWDNodeModules = path.join(PWD, './node_modules')
-  if (fs.existsSync(PWDNodeModules)) return path.resolve(path.join(PWDNodeModules, pkgName))
+const createAliasPath = pkgName => path.resolve(path.join(PWD, `./node_modules/${pkgName}`))
 
-  try {
-    return require.resolve(pkgName).replace(/\/index\.js$/, '')
-  } catch (e) {
-    return ''
-  }
+const mustPackagesToAlias = {
+  'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
+  'react/jsx-runtime': 'react/jsx-runtime.js'
 }
 
-const mustPackagesToAlias = {}
-
-exports.defaultAlias = Object.fromEntries(
-  defaultPackagesToAlias.map(pkgName => [pkgName, createAliasPath(pkgName)]).filter(([, path]) => path)
-)
+exports.defaultAlias = Object.fromEntries(defaultPackagesToAlias.map(pkgName => [pkgName, createAliasPath(pkgName)]))
 
 const aliasFromConfig = config.alias
   ? Object.entries(config.alias).reduce(

package/{webpack.config.server.dev.js → webpack.config.client.dev.js}

@@ -11,7 +11,7 @@ const {envVars, MAIN_ENTRY_POINT, config, cleanList, when} = require('./shared/i
 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 {supportLegacyBrowsers, cacheDirectory} = require('./shared/config.js')
 
 const {resolveLoader} = require('./shared/resolve-loader.js')
 const createBabelRules = require('./shared/module-rules-babel.js')
@@ -25,6 +25,7 @@ process.env.NODE_ENV = 'development'
 /** @typedef {import('webpack').Configuration} WebpackConfig */
 
 const webpackConfig = {
+  name: 'client',
   mode: 'development',
   context: path.resolve(PWD, 'src'),
   resolve: {
@@ -49,6 +50,11 @@ const webpackConfig = {
   entry: {
     app: [`webpack-hot-middleware/client?path=${CDN}__webpack_hmr`, MAIN_ENTRY_POINT]
   },
+  cache: {
+    type: 'filesystem',
+    cacheDirectory,
+    compression: 'brotli'
+  },
   target: 'web',
   optimization: {
     checkWasmTypes: false,

package/webpack.config.dev.js

@@ -9,10 +9,10 @@ const {envVars, MAIN_ENTRY_POINT, config, cleanList, when} = require('./shared/i
 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 {supportLegacyBrowsers, cacheDirectory} = require('./shared/config.js')
 
 const {resolveLoader} = require('./shared/resolve-loader.js')
-const createCompilerRules = require('./shared/module-rules-compiler.js')
+const createBabelRules = require('./shared/module-rules-babel.js')
 
 const outputPath = path.join(process.cwd(), 'dist')
 
@@ -23,6 +23,7 @@ process.env.NODE_ENV = 'development'
 /** @typedef {import('webpack').Configuration} WebpackConfig */
 
 const webpackConfig = {
+  name: 'client-local',
   mode: 'development',
   context: path.resolve(PWD, 'src'),
   resolve: {
@@ -41,7 +42,7 @@ const webpackConfig = {
       timers: false
     },
     modules: ['node_modules', path.resolve(process.cwd())],
-    extensions: ['.js', '.tsx', '.ts', '.json']
+    extensions: ['.js', '.json']
   },
   stats: 'errors-only',
   entry: {
@@ -51,6 +52,11 @@ const webpackConfig = {
     static: outputPath,
     hot: true
   },
+  cache: {
+    type: 'filesystem',
+    cacheDirectory,
+    compression: 'brotli'
+  },
   target: 'web',
   optimization: {
     checkWasmTypes: false,
@@ -81,7 +87,7 @@ const webpackConfig = {
   resolveLoader,
   module: {
     rules: cleanList([
-      createCompilerRules({supportLegacyBrowsers, isDevelopment: true}),
+      createBabelRules({supportLegacyBrowsers, isDevelopment: true}),
       {
         test: /(\.css|\.scss)$/,
         use: cleanList([

package/webpack.config.lib.js

@@ -4,7 +4,7 @@ const {cleanList, envVars, MAIN_ENTRY_POINT, config} = require('./shared/index.j
 const path = require('path')
 const minifyJs = require('./shared/minify-js.js')
 const definePlugin = require('./shared/define.js')
-const createCompilerRules = require('./shared/module-rules-compiler.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 {aliasFromConfig} = require('./shared/resolve-alias.js')
@@ -45,7 +45,7 @@ module.exports = {
   },
   plugins: cleanList([
     new webpack.ProvidePlugin({
-      process: 'process/browser.js'
+      process: 'process/browser'
     }),
     new MiniCssExtractPlugin({
       filename: cssFileName,
@@ -58,6 +58,6 @@ module.exports = {
     definePlugin()
   ]),
   module: {
-    rules: [createCompilerRules({supportLegacyBrowsers}), sassRules]
+    rules: [createBabelRules({supportLegacyBrowsers}), sassRules]
   }
 }

package/webpack.config.prod.js

@@ -11,9 +11,9 @@ const InlineChunkHtmlPlugin = require('./shared/inline-chunk-html-plugin.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, cacheDirectory} = require('./shared/config.js')
 const {resolveLoader} = require('./shared/resolve-loader.js')
-const createCompilerRules = require('./shared/module-rules-compiler.js')
+const createBabelRules = require('./shared/module-rules-babel.js')
 const sassRules = require('./shared/module-rules-sass.js')
 const definePlugin = require('./shared/define.js')
 const manifestLoaderRules = require('./shared/module-rules-manifest-loader.js')
@@ -35,12 +35,13 @@ const target = supportLegacyBrowsers ? ['web', 'es5'] : 'web'
 /** @type {WebpackConfig} */
 const webpackConfig = {
   devtool: sourceMap,
+  name: 'client',
   mode: 'production',
   target,
   context: path.resolve(CWD, 'src'),
   resolve: {
     alias: {...aliasFromConfig},
-    extensions: ['.js', '.json', '.ts', '.tsx'],
+    extensions: ['.js', '.json'],
     modules: ['node_modules', path.resolve(CWD)],
     fallback: {
       assert: false,
@@ -66,9 +67,14 @@ const webpackConfig = {
     minimizer: [minifyJs({extractComments, sourceMap}), minifyCss()].filter(Boolean),
     runtimeChunk: true
   },
+  cache: {
+    type: 'filesystem',
+    cacheDirectory,
+    compression: false
+  },
   plugins: cleanList([
     new webpack.ProvidePlugin({
-      process: 'process/browser.js'
+      process: 'process/browser'
     }),
     new webpack.ids.HashedModuleIdsPlugin(),
     new webpack.EnvironmentPlugin(envVars(config.env)),
@@ -98,7 +104,7 @@ const webpackConfig = {
   ]),
   module: {
     rules: cleanList([
-      createCompilerRules({supportLegacyBrowsers}),
+      createBabelRules({supportLegacyBrowsers}),
       sassRules,
       when(config['externals-manifest'], () => manifestLoaderRules(config['externals-manifest']))
     ])

package/webpack.config.server.js

@@ -3,7 +3,8 @@ const webpackNodeExternals = require('webpack-node-externals')
 const path = require('path')
 
 const {config, when, cleanList} = require('./shared/index.js')
-const createCompilerRules = require('./shared/module-rules-compiler.js')
+const {cacheDirectory} = require('./shared/config.js')
+const createBabelRules = require('./shared/module-rules-babel.js')
 const manifestLoaderRules = require('./shared/module-rules-manifest-loader.js')
 const {aliasFromConfig} = require('./shared/resolve-alias.js')
 const {resolveLoader} = require('./shared/resolve-loader.js')
@@ -12,13 +13,16 @@ const filename = '[name].[chunkhash:8].js'
 
 /** @typedef {import('webpack').Configuration} WebpackConfig */
 
+const isProduction = process.env.NODE_ENV === 'production'
+
 /** @type {WebpackConfig} */
 const webpackConfig = {
+  name: 'server',
   context: path.resolve(process.cwd(), 'src'),
-  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+  mode: isProduction ? 'production' : 'development',
   resolve: {
     alias: {...aliasFromConfig},
-    extensions: ['.js', '.json', '.ts', '.tsx'],
+    extensions: ['.js', '.json'],
     modules: ['node_modules', path.resolve(process.cwd())]
   },
   entry: './server.js',
@@ -34,12 +38,17 @@ const webpackConfig = {
     minimize: true,
     nodeEnv: false
   },
+  cache: {
+    type: 'filesystem',
+    cacheDirectory,
+    compression: !isProduction ? 'brotli' : false
+  },
   externals: [webpackNodeExternals()],
   plugins: [new webpack.DefinePlugin({'global.GENTLY': false})],
   resolveLoader,
   module: {
     rules: cleanList([
-      createCompilerRules({isServer: true}),
+      createBabelRules({isServer: true}),
       {
         // ignore css/scss/svg require/imports files in the server
         test: /(\.svg|\.s?css)$/,

package/scripts/postinstall.js

@@ -1,48 +0,0 @@
-#!/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/shared/module-rules-compiler.js

@@ -1,69 +0,0 @@
-/* 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/tsconfig.json

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