refactor: client-side optimizations + lazy-loading

client/js/pages/content-view.component.js

@@ -1,23 +1,13 @@
 'use strict'
 
-/* eslint-disable no-new */
-
-import $ from 'jquery'
 import MathJax from 'mathjax'
 
-module.exports = (alerts) => {
-  if ($('#page-type-view').length) {
-    let currentBasePath = ($('#page-type-view').data('entrypath') !== 'home') ? $('#page-type-view').data('entrypath') : ''
-
-    // Copy Path
-
-    // new Vue({
-    //   el: '.modal-copypath',
-    //   render: h => h(CopyPath)
-    // })
-
-    // MathJax Render
-
+export default {
+  name: 'content-view',
+  data() {
+    return {}
+  },
+  mounted() {
     MathJax.Hub.Config({
       jax: ['input/TeX', 'input/MathML', 'output/SVG'],
       extensions: ['tex2jax.js', 'mml2jax.js'],
@@ -36,8 +26,13 @@ module.exports = (alerts) => {
       messageStyle: 'none'
     })
     MathJax.Hub.Configured()
-
-    require('../modals/create.js')(currentBasePath)
-    require('../modals/move.js')(currentBasePath, alerts)
   }
 }
+
+// module.exports = (alerts) => {
+//   if ($('#page-type-view').length) {
+//     let currentBasePath = ($('#page-type-view').data('entrypath') !== 'home') ? $('#page-type-view').data('entrypath') : ''
+//     require('../modals/create.js')(currentBasePath)
+//     require('../modals/move.js')(currentBasePath, alerts)
+//   }
+// }

client/js/pages/source-view.component.js

@@ -0,0 +1,27 @@
+'use strict'
+
+/* global FuseBox */
+
+import pageLoader from '../components/page-loader'
+
+export default {
+  name: 'source-view',
+  data() {
+    return {}
+  },
+  mounted() {
+    FuseBox.import('/js/ace/source-view.js', (ace) => {
+      let scEditor = ace.edit('source-display')
+      scEditor.setTheme('ace/theme/dawn')
+      scEditor.getSession().setMode('ace/mode/markdown')
+      scEditor.setOption('fontSize', '14px')
+      scEditor.setOption('hScrollBarAlwaysVisible', false)
+      scEditor.setOption('wrap', true)
+      scEditor.setReadOnly(true)
+      scEditor.renderer.updateFull()
+      scEditor.renderer.on('afterRender', () => {
+        pageLoader.complete()
+      })
+    })
+  }
+}

client/js/pages/source.component.js

@@ -1,26 +0,0 @@
-'use strict'
-
-import * as ace from 'brace'
-import 'brace/theme/tomorrow_night'
-import 'brace/mode/markdown'
-import pageLoader from '../components/page-loader'
-
-export default {
-  name: 'source-view',
-  data() {
-    return {}
-  },
-  mounted() {
-    let scEditor = ace.edit('source-display')
-    scEditor.setTheme('ace/theme/tomorrow_night')
-    scEditor.getSession().setMode('ace/mode/markdown')
-    scEditor.setOption('fontSize', '14px')
-    scEditor.setOption('hScrollBarAlwaysVisible', false)
-    scEditor.setOption('wrap', true)
-    scEditor.setReadOnly(true)
-    scEditor.renderer.updateFull()
-    scEditor.renderer.on('afterRender', () => {
-      pageLoader.complete()
-    })
-  }
-}