@s-ui/bundler 7.36.0-beta.0 → 7.38.0

package/README.md

@@ -1,4 +1,4 @@
-# sui-bunder
+# sui-bundler
 
 > Config-free bundler for ES6 React apps.
 

package/bin/sui-bundler-dev.js

@@ -25,7 +25,8 @@ const linkLoaderConfigBuilder = require('../loaders/linkLoaderConfigBuilder')
 const log = require('../shared/log')
 
 const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000
-const HOST = process.env.HOST || '0.0.0.0'
+const {CI = false, HOST = '0.0.0.0'} = process.env
+const DEFAULT_WATCH = !CI
 
 if (!module.parent) {
   program
@@ -43,6 +44,11 @@ if (!module.parent) {
       },
       []
     )
+    .option(
+      '-w, --watch',
+      'Watch files and restart the server on change',
+      DEFAULT_WATCH
+    )
     .on('--help', () => {
       console.log('  Examples:')
       console.log('')
@@ -52,6 +58,7 @@ if (!module.parent) {
       console.log('')
     })
     .parse(process.argv)
+
   const {context} = program
   webpackConfig.context = context || webpackConfig.context
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s-ui/bundler",
-  "version": "7.36.0-beta.0",
+  "version": "7.38.0",
   "description": "Config-free bundler for ES6 React apps.",
   "bin": {
     "sui-bundler": "./bin/sui-bundler.js"
@@ -23,29 +23,29 @@
   "dependencies": {
     "@babel/core": "7.16.0",
     "@s-ui/helpers": "1",
-    "autoprefixer": "10.4.0",
+    "autoprefixer": "9.8.6",
     "babel-loader": "8.2.3",
     "babel-preset-sui": "3",
     "commander": "6.2.1",
-    "css-loader": "6.5.0",
-    "css-minimizer-webpack-plugin": "3.1.1",
+    "css-loader": "4.3.0",
+    "css-minimizer-webpack-plugin": "1.1.5",
     "esbuild-loader": "2.16.0",
     "fast-glob": "3.2.7",
-    "html-webpack-plugin": "5.5.0",
-    "mini-css-extract-plugin": "2.4.3",
+    "html-webpack-plugin": "4.5.0",
+    "mini-css-extract-plugin": "1.6.0",
     "null-loader": "4.0.1",
-    "postcss": "8.3.11",
-    "postcss-loader": "6.2.0",
+    "postcss": "7.0.35",
+    "postcss-loader": "4.1.0",
     "react-dev-utils": "11.0.4",
     "rimraf": "3.0.2",
-    "sass": "1.43.4",
-    "sass-loader": "12.3.0",
+    "sass": "1.43.3",
+    "sass-loader": "10.1.0",
     "super-sass-loader": "0.1",
     "speed-measure-webpack-plugin": "1.5.0",
-    "style-loader": "3.3.1",
-    "terser-webpack-plugin": "5.2.4",
-    "webpack": "5.61.0",
-    "webpack-dev-server": "4.4.0",
+    "style-loader": "2.0.0",
+    "terser-webpack-plugin": "4.2.2",
+    "webpack": "4.46.0",
+    "webpack-dev-server": "4.3.1",
     "webpack-manifest-plugin": "4.0.2",
     "webpack-node-externals": "3.0.0"
   }

package/shared/optimization-split-chunks.js

@@ -0,0 +1,31 @@
+const {config} = require('./')
+
+const hasToSplitFrameworksOnChunk =
+  config.optimizations && config.optimizations.splitFrameworkOnChunk
+
+const frameworkSplitChunk = {
+  framework: {
+    chunks: 'all',
+    name: 'framework',
+    // This regex ignores nested copies of framework libraries so they're
+    // bundled with their issuer: https://github.com/vercel/next.js/pull/9012
+    test: /(?<!node_modules.*)[\\/]node_modules[\\/](react|react-dom|scheduler|prop-types|use-subscription)[\\/]/,
+    priority: 40,
+    // Don't let webpack eliminate this chunk (prevents this chunk from
+    // becoming a part of the commons chunk)
+    enforce: true
+  }
+}
+
+exports.splitChunks = {
+  cacheGroups: {
+    ...(hasToSplitFrameworksOnChunk && frameworkSplitChunk),
+    vendor: {
+      chunks: 'all',
+      name: 'vendor',
+      test: 'vendor',
+      enforce: true,
+      reuseExistingChunk: true
+    }
+  }
+}

package/webpack.config.dev.js

@@ -1,5 +1,3 @@
-// @ts-check
-
 const path = require('path')
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
@@ -18,9 +16,6 @@ const useExperimentalSCSSLoader =
 
 const smp = new SpeedMeasurePlugin()
 
-/** @typedef {import('webpack').Configuration} WebpackConfig */
-
-/** @type {WebpackConfig} */
 const webpackConfig = {
   mode: 'development',
   context: path.resolve(process.env.PWD, 'src'),

package/webpack.config.prod.js

@@ -1,5 +1,3 @@
-// @ts-check
-
 /* eslint-disable no-console */
 const webpack = require('webpack')
 const path = require('path')
@@ -7,7 +5,7 @@ const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const {WebpackManifestPlugin} = require('webpack-manifest-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const InlineChunkHtmlPlugin = require('./shared/inline-chunk-html-plugin.js')
+const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin')
 const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
 const {
   when,
@@ -21,6 +19,7 @@ const minifyCss = require('./shared/minify-css')
 const definePlugin = require('./shared/define')
 const babelRules = require('./shared/module-rules-babel')
 const manifestLoaderRules = require('./shared/module-rules-manifest-loader')
+const {splitChunks} = require('./shared/optimization-split-chunks')
 const {
   extractComments,
   useExperimentalMinifier,
@@ -41,9 +40,6 @@ const cssFileName = config.onlyHash
 
 const smp = new SpeedMeasurePlugin()
 
-/** @typedef {import('webpack').Configuration} WebpackConfig */
-
-/** @type {WebpackConfig} */
 const webpackConfig = {
   devtool: sourceMap,
   mode: 'production',
@@ -67,12 +63,15 @@ const webpackConfig = {
     publicPath: PUBLIC_PATH
   },
   optimization: {
+    // avoid looping over all the modules after the compilation
+    checkWasmTypes: false,
     minimize: true,
     minimizer: [
       minifyJs({useExperimentalMinifier, extractComments, sourceMap}),
       minifyCss()
     ].filter(Boolean),
-    runtimeChunk: true
+    runtimeChunk: true,
+    splitChunks
   },
   plugins: cleanList([
     new webpack.HashedModuleIdsPlugin(),

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

@@ -1,64 +0,0 @@
-// from: https://github.com/facebook/create-react-app/blob/main/packages/react-dev-utils/InlineChunkHtmlPlugin.js
-
-/**
- * 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'
-
-class InlineChunkHtmlPlugin {
-  constructor(htmlWebpackPlugin, tests) {
-    this.htmlWebpackPlugin = htmlWebpackPlugin
-    this.tests = tests
-  }
-
-  getInlinedTag(publicPath, assets, tag) {
-    if (tag.tagName !== 'script' || !(tag.attributes && tag.attributes.src)) {
-      return tag
-    }
-    const scriptName = publicPath
-      ? tag.attributes.src.replace(publicPath, '')
-      : tag.attributes.src
-    if (!this.tests.some(test => scriptName.match(test))) {
-      return tag
-    }
-    const asset = assets[scriptName]
-    if (asset == null) {
-      return tag
-    }
-    return {tagName: 'script', innerHTML: asset.source(), closeTag: true}
-  }
-
-  apply(compiler) {
-    let publicPath = compiler.options.output.publicPath || ''
-    if (publicPath && !publicPath.endsWith('/')) {
-      publicPath += '/'
-    }
-
-    compiler.hooks.compilation.tap('InlineChunkHtmlPlugin', compilation => {
-      const tagFunction = tag =>
-        this.getInlinedTag(publicPath, compilation.assets, tag)
-
-      const hooks = this.htmlWebpackPlugin.getHooks(compilation)
-      hooks.alterAssetTagGroups.tap('InlineChunkHtmlPlugin', assets => {
-        assets.headTags = assets.headTags.map(tagFunction)
-        assets.bodyTags = assets.bodyTags.map(tagFunction)
-      })
-
-      // Still emit the runtime chunk for users who do not use our generated
-      // index.html file.
-      // hooks.afterEmit.tap('InlineChunkHtmlPlugin', () => {
-      //   Object.keys(compilation.assets).forEach(assetName => {
-      //     if (this.tests.some(test => assetName.match(test))) {
-      //       delete compilation.assets[assetName];
-      //     }
-      //   });
-      // });
-    })
-  }
-}
-
-module.exports = InlineChunkHtmlPlugin