From de759b8d932cfe6bb7c242f4b560019da79e00ad Mon Sep 17 00:00:00 2001
From: Shweelan Samson <shweelan@genieacs.com>
Date: Fri, 28 Sep 2018 23:21:11 +0300
Subject: [PATCH] Implement code splitting for codemirror

---
 client/.eslintrc.json             |  2 ++
 client/components/put-form.js     |  5 ++---
 client/dynamic-loader.js          | 22 ++++++++++++++++++++++
 client/provisions-page.js         | 10 +++++++++-
 client/virtual-parameters-page.js | 10 +++++++++-
 package.json                      |  1 +
 webpack.config.js                 |  4 +++-
 7 files changed, 48 insertions(+), 6 deletions(-)
 create mode 100644 client/dynamic-loader.js

diff --git a/client/.eslintrc.json b/client/.eslintrc.json
index 6881637..60a5c13 100644
--- a/client/.eslintrc.json
+++ b/client/.eslintrc.json
@@ -2,7 +2,9 @@
   "env": {
     "browser": true
   },
+  "parser": "babel-eslint",
   "parserOptions": {
+    "allowImportExportEverywhere": true,
     "sourceType": "module",
     "ecmaVersion": 8
   }
diff --git a/client/components/put-form.js b/client/components/put-form.js
index 0a904c1..e61127e 100644
--- a/client/components/put-form.js
+++ b/client/components/put-form.js
@@ -1,8 +1,7 @@
 "use strict";
 
 import m from "mithril";
-import { fromTextArea as codeMirrorFromTextArea } from "codemirror";
-import "codemirror/mode/javascript/javascript";
+import { codeMirror } from "../dynamic-loader";
 
 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
         });
diff --git a/client/dynamic-loader.js b/client/dynamic-loader.js
new file mode 100644
index 0000000..b556484
--- /dev/null
+++ b/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 };
diff --git a/client/provisions-page.js b/client/provisions-page.js
index eae6b8a..52d1c66 100644
--- a/client/provisions-page.js
+++ b/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(
diff --git a/client/virtual-parameters-page.js b/client/virtual-parameters-page.js
index 30fcf4b..2f62d07 100644
--- a/client/virtual-parameters-page.js
+++ b/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(
diff --git a/package.json b/package.json
index a078821..53c58c2 100644
--- a/package.json
+++ b/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",
diff --git a/webpack.config.js b/webpack.config.js
index d2aee54..17a396a 100644
--- a/webpack.config.js
+++ b/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"
     }
   }
 ];