Build two client bundles — ES5 and ES6

babel.config.js

@@ -0,0 +1,39 @@
+
+
+module.exports = (api) => {
+    api.cache(true);
+    return {
+        passPerPreset: true,
+        plugins: [
+            "@babel/plugin-proposal-class-properties"
+        ],
+        presets: [
+            "@babel/preset-typescript",
+            ["@babel/preset-react", {
+                development: false,
+                useBuiltIns: true,
+            }]
+        ],
+        env: {
+            legacy: {
+                presets: [
+                    ["@babel/preset-env", {
+                        modules: false,
+                        targets: "> 0.25%, last 2 versions, Firefox ESR",
+                    }],
+                ],
+            },
+            modern: {
+                presets: [
+                    ["@babel/preset-env", {
+                        modules: false,
+                        targets: {
+                            esmodules: true,
+                        },
+                        bugfixes: true,
+                    }],
+                ],
+            }
+        }
+    }
+}

config/webpack.common.js

@@ -18,17 +18,6 @@ const path = require("path");
 
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
-const babelLoader = {
-  loader: "babel-loader",
-  options: {
-    presets: [
-      ["@babel/preset-env", {
-        modules: false
-      }]
-    ]
-  }
-};
-
 module.exports = {
   devtool: "source-map",
   output: {
@@ -49,23 +38,14 @@ module.exports = {
         test: /\.js$/,
         use: ["source-map-loader"]
       },
-      {
-        test: /\.js?$/,
-        use: [
-          babelLoader
-        ]
-      },
       {
         test: /\.tsx?$/,
-        use: [
-          babelLoader,
-          {
-            loader: "ts-loader",
-            options: {
-              configFile: "src/client/tsconfig.json"
-            }
+        use: [{
+          loader: "babel-loader",
+          options: {
+            envName: "modern"
           }
-        ]
+        }]
       },
       {
         test: /\.css$/,
@@ -89,7 +69,7 @@ module.exports = {
           // Returns a data-url (data:font/woff;charset=utf-8;base64,...)
           // if the file is smaller than a byte limit.
           limit: 8192,
-        },
+        }
       },
       {
         test: /\.svg$/,

config/webpack.dev.js

@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-const common = require("./webpack.common");
+const commonConfig = require("./webpack.common");
 const merge = require("webpack-merge");
 const webpack = require('webpack');
 const hotMiddlewareScript = 'webpack-hot-middleware/client';
 
-module.exports = merge.smart(common, {
+module.exports = merge.smart(commonConfig, {
   mode: 'development',
   entry: {
     main: [hotMiddlewareScript, "./src/client/main.tsx"]

config/webpack.prod.js

@@ -14,13 +14,14 @@
  * limitations under the License.
  */
 
-const common = require('./webpack.common');
+const commonConfig = require('./webpack.common');
 const merge = require('webpack-merge');
 const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 
-module.exports = merge.smart(common, {
+const prodConfig = {
+  name: "client-modern",
   mode: "production",
   entry: {
     main: "./src/client/main.tsx",
@@ -35,4 +36,27 @@ module.exports = merge.smart(common, {
       'process.env.NODE_ENV': JSON.stringify('production')
     }),
   ]
-});
+};
+
+const es5Config = {
+  module: {
+    rules: [{
+      test: /\.tsx?$/,
+      use: [{
+        loader: "babel-loader",
+        options: {
+          envName: "legacy",
+        },
+      }],
+    }]
+  },
+  name: "client-legacy",
+  output: {
+    filename: "[name].es5.js",
+  }
+};
+
+module.exports = [
+  merge.smart(commonConfig, prodConfig),
+  merge.smart(commonConfig, prodConfig, es5Config),
+]

cypress/integration/scatterplot.spec.js

@@ -64,7 +64,7 @@ context("Scatterplot", () => {
         })
 
         it('should render rectangles', () => {
-            rectangles().should("have.length", 77);
+            rectangles().should("have.length", 154);
         })
     });
 
@@ -75,7 +75,7 @@ context("Scatterplot", () => {
         });
 
         it("should load ticks on X axis", () => {
-            xAxis().find(".tick").should("have.length", 8);
+            xAxis().find(".tick").should("have.length", 15);
         });
 
         it("should load ticks on Y axis", () => {
@@ -90,7 +90,7 @@ context("Scatterplot", () => {
         });
 
         it("should load ticks on X axis", () => {
-            xAxis().find(".tick").should("have.length", 4);
+            xAxis().find(".tick").should("have.length", 8);
         });
 
         it("should load ticks on Y axis", () => {