feat(sui-bundler): add bundle splitting

packages/babel-preset-sui/src/index.js

@@ -1,6 +1,9 @@
 const cleanList = require('./clean-list')
 
+console.log('new babel preset sui!')
+
 function plugins(api, opts = {}) {
+  const {es6} = opts
   return cleanList([
     require('@babel/plugin-syntax-dynamic-import').default,
     require('@babel/plugin-syntax-export-default-from').default,
@@ -13,51 +16,56 @@ function plugins(api, opts = {}) {
         wrap: true
       }
     ],
-    [
+    !es6 && [
       require('@babel/plugin-proposal-object-rest-spread').default,
       {useBuiltIns: true} // asume Object.assign is available by browser or polyfill
     ],
     [
       require('@babel/plugin-transform-runtime').default,
       {
-        corejs: false,
-        regenerator: true
+        useESModules: es6
       }
     ]
   ])
 }
 
 function presets(api, opts) {
+  const {es6} = opts
+  const es5Target = {
+    node: '6.0.0',
+    browsers: [
+      '> 0.25%',
+      'Firefox ESR',
+      'Safari >= 8',
+      'iOS >= 8',
+      'ie >= 11',
+      'not op_mini all',
+      'not dead'
+    ]
+  }
+  const es6Target = {
+    esmodules: true
+  }
   return [
     [
       require('@babel/preset-env').default,
       {
-        debug: false,
+        debug: true,
         ignoreBrowserslistConfig: true,
         loose: true,
         modules: false,
         // Exclude transforms that make all code slower
         exclude: ['transform-typeof-symbol'],
-        targets: {
-          node: '6.0.0',
-          browsers: [
-            '> 0.25%',
-            'Firefox ESR',
-            'Safari >= 8',
-            'iOS >= 8',
-            'ie >= 11',
-            'not op_mini all',
-            'not dead'
-          ]
-        },
-        useBuiltIns: false
+        targets: es6 ? es6Target : es5Target,
+        useBuiltIns: 'entry'
       }
     ],
     [require('@babel/preset-react').default, {useBuiltIns: true}]
   ]
 }
 
-module.exports = (api, opts) => ({
-  presets: presets(api, opts),
-  plugins: plugins(api, opts)
-})
+module.exports = (api, opts) =>
+  console.log('*******************', opts) || {
+    presets: presets(api, opts),
+    plugins: plugins(api, opts)
+  }

packages/sui-bundler/bin/sui-bundler-analyzer.js

@@ -5,25 +5,27 @@ const webpack = require('webpack')
 const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')
 const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin')
 const chalk = require('chalk')
-const config = require('../webpack.config.prod')
+const configs = require('../webpack.config.prod')
 
 console.log('🔎  Bundler Analyzer')
 
 // Don't show ugly deprecation warnings that mess with the logging
 process.noDeprecation = true
 
-config.plugins.push(new BundleAnalyzerPlugin())
-config.plugins.push(
-  new DuplicatePackageCheckerPlugin({
-    // Also show module that is requiring each duplicate package
-    verbose: true,
-    // Emit errors instead of warnings
-    emitError: false
-  })
-)
+configs.forEach(config => {
+  config.plugins.push(new BundleAnalyzerPlugin())
+  config.plugins.push(
+    new DuplicatePackageCheckerPlugin({
+      // Also show module that is requiring each duplicate package
+      verbose: true,
+      // Emit errors instead of warnings
+      emitError: false
+    })
+  )
+})
 
 console.log(chalk.cyan('Building and analyzing...\n'))
-webpack(config).run((error, stats) => {
+webpack(configs).run((error, stats) => {
   if (error) {
     console.log(chalk.red('Error analyzing the build'))
     throw new Error(error)

packages/sui-bundler/bin/sui-bundler-build.js

@@ -8,6 +8,7 @@ const path = require('path')
 const fs = require('fs-extra')
 const config = require('../webpack.config.prod')
 const {config: projectConfig} = require('../shared')
+const joinParsedHtmlVersions = require('../shared/joinParsedHtmlVersions')
 
 // TODO: Extract this
 const chalk = require('chalk')
@@ -63,6 +64,9 @@ webpack(config).run((error, stats) => {
 
   console.log(`Webpack stats: ${stats}`)
 
+  // Join both es5 and es6 html versions from the webpack build.
+  joinParsedHtmlVersions()
+
   if (projectConfig.offline && projectConfig.offline.whitelist) {
     fs.copySync(
       path.resolve(process.cwd(), 'public', 'index.html'),

packages/sui-bundler/package.json

@@ -21,8 +21,8 @@
   },
   "homepage": "https://github.com/SUI-Components/sui/tree/master/packages/sui-bundler#readme",
   "dependencies": {
-    "@babel/core": "7.2.2",
     "@babel/cli": "7.2.3",
+    "@babel/core": "7.2.2",
     "@s-ui/helpers": "1",
     "@s-ui/lint": "2",
     "autoprefixer": "9.4.3",
@@ -46,6 +46,7 @@
     "null-loader": "0.1.1",
     "object.values": "1.0.4",
     "optimize-css-assets-webpack-plugin": "5.0.1",
+    "parse5": "5.1.0",
     "postcss-loader": "2.1.6",
     "raw-loader": "0.5.1",
     "react-dev-utils": "5.0.3",

packages/sui-bundler/shared/joinParsedHtmlVersions.js

@@ -0,0 +1,51 @@
+const parse5 = require('parse5')
+const {readFileSync, writeFileSync} = require('fs')
+const path = require('path')
+
+const joinParsedHtmlVersions = () => {
+  const es5RawHTML = readFileSync(
+    path.resolve(process.cwd(), 'public', 'es5', 'index.html'),
+    'utf-8'
+  )
+  const es6RawHTML = readFileSync(
+    path.resolve(process.cwd(), 'public', 'es6', 'index.html'),
+    'utf-8'
+  )
+
+  const parse5Es5AstHTML = parse5.parse(es5RawHTML)
+  const parse5Es6AstHTML = parse5.parse(es6RawHTML)
+
+  const parse5Es5Head = parse5Es5AstHTML.childNodes
+    .find(node => node.tagName === 'html')
+    .childNodes.find(node => node.tagName === 'head')
+
+  const noModulesScripts = parse5Es5Head.childNodes.filter(
+    node =>
+      node.tagName === 'script' &&
+      node.attrs.some(attr => attr.name === 'nomodule')
+  )
+
+  const noModulesLinks = parse5Es5Head.childNodes.filter(
+    node =>
+      node.tagName === 'link' &&
+      node.attrs.some(attr => attr.name === 'nomodule')
+  )
+
+  const parse5Es6Head = parse5Es6AstHTML.childNodes
+    .find(node => node.tagName === 'html')
+    .childNodes.find(node => node.tagName === 'head')
+
+  parse5Es6Head.childNodes = [
+    ...parse5Es6Head.childNodes,
+    ...noModulesLinks,
+    ...noModulesScripts
+  ]
+
+  writeFileSync(
+    path.resolve(process.cwd(), 'public', 'index.html'),
+    parse5.serialize(parse5Es6AstHTML),
+    'utf-8'
+  )
+}
+
+module.exports = joinParsedHtmlVersions

packages/sui-bundler/shared/module-rules-babel.js

@@ -1,17 +1,19 @@
 const {sep} = require('path')
 
-module.exports = {
+module.exports = ({es6 = false} = {}) => ({
   test: /\.jsx?$/,
-  exclude: new RegExp(`node_modules(?!${sep}@s-ui${sep}studio${sep}src)`),
+  exclude: es6
+    ? undefined
+    : new RegExp(`node_modules(?!${sep}@s-ui${sep}studio${sep}src)`),
   use: [
     {
       loader: require.resolve('babel-loader'),
       options: {
         babelrc: false,
         compact: true,
-        presets: [require.resolve('babel-preset-sui')]
+        presets: [[require.resolve('babel-preset-sui'), {es6}]]
       }
     },
     'source-map-loader'
   ]
-}
+})

packages/sui-bundler/webpack.config.lib.js

@@ -32,7 +32,7 @@ module.exports = {
     definePlugin()
   ]),
   module: {
-    rules: [babelRules]
+    rules: [babelRules()]
   },
   node: {
     fs: 'empty',