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

package/bin/sui-bundler-build.js

@@ -19,6 +19,7 @@ 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',
@@ -43,6 +44,7 @@ program
 const {
   clean = false,
   context,
+  saveStats,
   linkPackage: packagesToLink = []
 } = program.opts()
 
@@ -88,6 +90,13 @@ 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-lib.js

@@ -73,7 +73,18 @@ log.processing('Generating minified bundle...')
 webpack(webpackConfig).run((error, stats) => {
   if (error) {
     showError(error, program)
-    return 1
+    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))
   }
 
   if (stats.hasErrors() || stats.hasWarnings()) {
@@ -86,6 +97,4 @@ webpack(webpackConfig).run((error, stats) => {
   log.success(
     `Your library is compiled in production mode in: \n${outputFolder}`
   )
-
-  return 0
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s-ui/bundler",
-  "version": "9.43.0-typescript.0",
+  "version": "9.43.0-typescript.1",
   "description": "Config-free bundler for ES6 React apps.",
   "bin": {
     "sui-bundler": "./bin/sui-bundler.js"
@@ -43,7 +43,7 @@
     "html-webpack-plugin": "5.5.0",
     "https-browserify": "1.0.0",
     "mini-css-extract-plugin": "2.6.1",
-    "postcss": "8.4.16",
+    "postcss": "8.4.31",
     "postcss-loader": "7.0.1",
     "process": "0.11.10",
     "sass": "1.54.5",
@@ -55,6 +55,8 @@
     "webpack": "5.82.1",
     "webpack-dev-server": "4.10.0",
     "webpack-manifest-plugin": "5.0.0",
-    "webpack-node-externals": "3.0.0"
+    "webpack-node-externals": "3.0.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
+    "react-refresh": "0.14.0"
   }
 }

package/scripts/postinstall.js

@@ -5,7 +5,6 @@ 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 = `\
@@ -45,9 +44,9 @@ async function main() {
     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

@@ -19,6 +19,9 @@ module.exports = (vars = {}) => {
   const definitions = {
     __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)])

package/shared/module-rules-compiler.js

@@ -24,7 +24,11 @@ const getTSConfig = () => {
   return tsConfig
 }
 
-module.exports = ({isServer = false, supportLegacyBrowsers = true} = {}) => {
+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)
@@ -51,6 +55,9 @@ module.exports = ({isServer = false, supportLegacyBrowsers = true} = {}) => {
               cacheCompression: false,
               babelrc: false,
               compact: true,
+              plugins: [
+                isDevelopment && require.resolve('react-refresh/babel')
+              ].filter(Boolean),
               presets: [
                 [
                   require.resolve('babel-preset-sui'),

package/webpack.config.dev.js

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

package/utils/webpackHotDevClient.js

@@ -1,253 +0,0 @@
-// @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)
-      }
-    )
-  }
-}