Implement code splitting for codemirror

client/.eslintrc.json

@@ -2,7 +2,9 @@
   "env": {
     "browser": true
   },
+  "parser": "babel-eslint",
   "parserOptions": {
+    "allowImportExportEverywhere": true,
     "sourceType": "module",
     "ecmaVersion": 8
   }

client/components/put-form.js

@@ -1,8 +1,7 @@
 "use strict";
 
 import m from "mithril";
-import { fromTextArea as codeMirrorFromTextArea } from "codemirror";
+import { codeMirror } from "../dynamic-loader";
-import "codemirror/mode/javascript/javascript";
 
 const singular = {
   presets: "preset",
@@ -41,7 +40,7 @@ function createField(current, attr, focus) {
       name: attr.id,
       value: current.object[attr.id],
       oncreate: _vnode => {
-        let editor = codeMirrorFromTextArea(_vnode.dom, {
+        let editor = codeMirror.fromTextArea(_vnode.dom, {
           mode: "javascript",
           lineNumbers: true
         });

client/dynamic-loader.js

@@ -0,0 +1,22 @@
+"use strict";
+
+let codeMirror;
+
+function loadCodeMirror() {
+  if (codeMirror) return Promise.resolve();
+
+  return new Promise((resolve, reject) => {
+    const promises = [
+      import(/* webpackChunkName: "codemirror" */ "codemirror"),
+      import(/* webpackChunkName: "codemirror" */ "codemirror/mode/javascript/javascript")
+    ];
+    Promise.all(promises)
+      .then(modules => {
+        codeMirror = modules[0];
+        resolve();
+      })
+      .catch(reject);
+  });
+}
+
+export { loadCodeMirror, codeMirror };

client/provisions-page.js

@@ -12,6 +12,7 @@ import putForm from "./components/put-form";
 import * as overlay from "./overlay";
 import * as smartQuery from "./smart-query";
 import * as expressionParser from "../common/expression-parser";
+import { loadCodeMirror } from "./dynamic-loader";
 
 const PAGE_SIZE = config.ui.pageSize || 10;
 
@@ -106,7 +107,14 @@ function init(args) {
 
   const sort = args.sort;
   const filter = args.filter;
-  return Promise.resolve({ filter, sort });
+
+  return new Promise((resolve, reject) => {
+    loadCodeMirror()
+      .then(() => {
+        resolve({ filter, sort });
+      })
+      .catch(reject);
+  });
 }
 
 function renderTable(

client/virtual-parameters-page.js

@@ -12,6 +12,7 @@ import putForm from "./components/put-form";
 import * as overlay from "./overlay";
 import * as smartQuery from "./smart-query";
 import * as expressionParser from "../common/expression-parser";
+import { loadCodeMirror } from "./dynamic-loader";
 
 const PAGE_SIZE = config.ui.pageSize || 10;
 
@@ -106,7 +107,14 @@ function init(args) {
 
   const sort = args.sort;
   const filter = args.filter;
-  return Promise.resolve({ filter, sort });
+
+  return new Promise((resolve, reject) => {
+    loadCodeMirror()
+      .then(() => {
+        resolve({ filter, sort });
+      })
+      .catch(reject);
+  });
 }
 
 function renderTable(

package.json

@@ -22,6 +22,7 @@
     "parsimmon": "^1.12.0"
   },
   "devDependencies": {
+    "babel-eslint": "^8.2.6",
     "clean-webpack-plugin": "^0.1.19",
     "copy-webpack-plugin": "^4.5.2",
     "cssnano": "^4.0.5",

webpack.config.js

@@ -1,6 +1,7 @@
 const nodeExternals = require("webpack-node-externals");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
+const path = require("path");
 
 const mode = "production";
 
@@ -51,7 +52,8 @@ module.exports = [
     mode: mode,
     entry: "./client/app.js",
     output: {
-      filename: "public/app.js"
+      path: path.resolve(__dirname, "dist/public"),
+      filename: "app.js"
     }
   }
 ];