From 031c9733f1af5bb4fa8d02417427bf2ac9a45b3b Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Wed, 17 Oct 2018 20:31:31 -0700
Subject: [PATCH] Use dynamic imports instead of require.ensure

I left out jsmediatags so as not to conflict with #679
---
 .babelrc                                | 13 ++++-
 config/webpack.common.js                |  5 +-
 js/components/MilkdropWindow/Presets.js | 19 ++-----
 js/components/MilkdropWindow/options.ts | 67 ++++++++++---------------
 js/index.js                             | 19 +------
 package.json                            |  1 +
 yarn.lock                               |  6 +++
 7 files changed, 54 insertions(+), 76 deletions(-)

diff --git a/.babelrc b/.babelrc
index 88b1a5f9..026f6491 100644
--- a/.babelrc
+++ b/.babelrc
@@ -20,17 +20,26 @@
     "@babel/preset-react",
     "@babel/preset-typescript"
   ],
-  "plugins": ["@babel/plugin-proposal-object-rest-spread", "@babel/plugin-proposal-class-properties"],
+  "plugins": [
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-class-properties"
+  ],
   "env": {
     "test": {
       "presets": ["@babel/preset-react"],
-      "plugins": ["@babel/plugin-transform-modules-commonjs"]
+      "plugins": [
+        "@babel/plugin-transform-modules-commonjs",
+        "@babel/plugin-syntax-dynamic-import"
+      ]
     },
     "library": {
       "plugins": [
         "babel-plugin-remove-webpack",
         "@babel/plugin-transform-runtime"
       ]
+    },
+    "production": {
+      "plugins": ["@babel/plugin-syntax-dynamic-import"]
     }
   }
 }
diff --git a/config/webpack.common.js b/config/webpack.common.js
index 76fd0fa1..8904c7d5 100644
--- a/config/webpack.common.js
+++ b/config/webpack.common.js
@@ -22,7 +22,10 @@ module.exports = {
         test: /\.(js|ts|tsx)?$/,
         exclude: /(node_modules)/,
         use: {
-          loader: "babel-loader"
+          loader: "babel-loader",
+          options: {
+            envName: "production"
+          }
         }
       },
       {
diff --git a/js/components/MilkdropWindow/Presets.js b/js/components/MilkdropWindow/Presets.js
index 63c2e784..62fe1688 100644
--- a/js/components/MilkdropWindow/Presets.js
+++ b/js/components/MilkdropWindow/Presets.js
@@ -112,21 +112,10 @@ export default class Presets {
   }
 
   async _convertPreset(file) {
-    return new Promise((resolve, reject) => {
-      require.ensure(
-        ["milkdrop-preset-converter-aws"],
-        async require => {
-          const { convertPreset } = require("milkdrop-preset-converter-aws");
-          try {
-            resolve(convertPreset(file, this._presetConverterEndpoint));
-          } catch (e) {
-            reject(e);
-          }
-        },
-        reject,
-        "milkdrop-preset-converter"
-      );
-    });
+    const {
+      convertPreset
+    } = await import(/* webpackChunkName: "milkdrop-preset-converter" */ "milkdrop-preset-converter-aws");
+    return convertPreset(file, this._presetConverterEndpoint);
   }
 
   async _selectIndex(idx) {
diff --git a/js/components/MilkdropWindow/options.ts b/js/components/MilkdropWindow/options.ts
index e5a4dc6d..0fa5bec0 100644
--- a/js/components/MilkdropWindow/options.ts
+++ b/js/components/MilkdropWindow/options.ts
@@ -6,51 +6,36 @@ import {
 async function loadInitialDependencies(): Promise<
   InitialButterchurnDependencies
 > {
-  return new Promise(
-    (
-      resolve: (initialDependencies: InitialButterchurnDependencies) => void,
-      reject
-    ) => {
-      // @ts-ignore Eventually we can replace these with async imports
-      require.ensure(
-        [
-          "butterchurn",
-          "butterchurn-presets/lib/butterchurnPresetsMinimal.min",
-          "butterchurn-presets/lib/butterchurnPresetPackMeta.min"
-        ],
-        // @ts-ignore Eventually we can replace these with async imports
-        require => {
-          const butterchurn = require("butterchurn");
-          const butterchurnMinimalPresets = require("butterchurn-presets/lib/butterchurnPresetsMinimal.min");
-          const presetPackMeta = require("butterchurn-presets/lib/butterchurnPresetPackMeta.min");
-          resolve({
-            butterchurn,
-            minimalPresets: butterchurnMinimalPresets.getPresets(),
-            presetKeys: presetPackMeta.getMainPresetMeta().presets
-          });
-        },
-        reject,
+  const [butterchurn, butterchurnMinimalPresets, presetPackMeta] =
+    // prettier-ignore
+    await Promise.all([
+      import(
+        /* webpackChunkName: "butterchurn-initial-dependencies" */
+        // @ts-ignore
         "butterchurn"
-      );
-    }
-  );
+      ),
+      import(
+        /* webpackChunkName: "butterchurn-initial-dependencies" */
+        // @ts-ignore
+        "butterchurn-presets/lib/butterchurnPresetsMinimal.min"
+      ),
+      import(
+        /* webpackChunkName: "butterchurn-initial-dependencies" */
+        // @ts-ignore
+        "butterchurn-presets/lib/butterchurnPresetPackMeta.min"
+      )
+  ]);
+  return {
+    butterchurn,
+    minimalPresets: butterchurnMinimalPresets.getPresets(),
+    presetKeys: presetPackMeta.getMainPresetMeta().presets
+  };
 }
 
 async function loadNonMinimalPresets() {
-  return new Promise((resolve, reject) => {
-    // @ts-ignore Eventually we can replace these with async imports
-    require.ensure(
-      ["butterchurn-presets/lib/butterchurnPresetsNonMinimal.min"],
-      // @ts-ignore Eventually we can replace these with async imports
-      require => {
-        resolve(
-          require("butterchurn-presets/lib/butterchurnPresetsNonMinimal.min").getPresets()
-        );
-      },
-      reject,
-      "butterchurn-presets"
-    );
-  });
+  return (await import(/* webpackChunkName: "butterchurn-non-minimal-presets" */
+  // @ts-ignore
+  "butterchurn-presets/lib/butterchurnPresetsNonMinimal.min")).getPresets();
 }
 
 const options: ButterchurnOptions = {
diff --git a/js/index.js b/js/index.js
index aaa050ad..d76ea1c2 100644
--- a/js/index.js
+++ b/js/index.js
@@ -43,22 +43,6 @@ import {
 
 import { bindToIndexedDB } from "./indexedDB";
 
-const requireJSZip = () => {
-  return new Promise((resolve, reject) => {
-    require.ensure(
-      ["jszip/dist/jszip"],
-      require => {
-        resolve(require("jszip/dist/jszip"));
-      },
-      e => {
-        console.error("Error loading JSZip", e);
-        reject(e);
-      },
-      "jszip"
-    );
-  });
-};
-
 const requireJSMediaTags = () => {
   return new Promise((resolve, reject) => {
     require.ensure(
@@ -249,7 +233,8 @@ Raven.context(async () => {
       }
     ],
     enableHotkeys: true,
-    requireJSZip,
+    requireJSZip: () =>
+      import(/* webpackChunkName: "jszip" */ "jszip/dist/jszip"),
     requireJSMediaTags,
     __extraWindows,
     __enableMediaLibrary: library,
diff --git a/package.json b/package.json
index c1f406fd..b529aea3 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "@babel/core": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-transform-modules-commonjs": "^7.0.0",
     "@babel/plugin-transform-runtime": "^7.0.0",
     "@babel/polyfill": "^7.0.0",
diff --git a/yarn.lock b/yarn.lock
index 72e513af..7ba881a5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -322,6 +322,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-dynamic-import@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.0.0.tgz#6dfb7d8b6c3be14ce952962f658f3b7eb54c33ee"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-syntax-json-strings@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.0.0.tgz#0d259a68090e15b383ce3710e01d5b23f3770cbd"