Lazy-load highlight.js

This commit moves the import of highlight.js into a `require.ensure`
block, that is only executed when a code-block is actually present
in a note. Webpack automatically splits the library into a separate
chunk and loads that on demand.

The call to `hljs.listLanguages()` in `index.js` is also replaced
by a static list. This is important, as `index.js` would otherwise
need to import highlight.js, which would cause the quite big
library to be included into nearly every entrypoint, needlessly
increasing the transferred code size.

Signed-off-by: David Mehren <git@herrmehren.de>

public/js/extra.js

@@ -3,7 +3,6 @@
 /* global moment, serverurl */
 
 import Prism from 'prismjs'
-import hljs from 'highlight.js'
 import PDFObject from 'pdfobject'
 import S from 'string'
 import { saveAs } from 'file-saver'
@@ -525,13 +524,19 @@ export function finishView (view) {
             value: Prism.highlight(code, Prism.languages.makefile)
           }
         } else {
-          code = S(code).unescapeHTML().s
+          require.ensure([], function (require) {
-          const languages = hljs.listLanguages()
+            const hljs = require('highlight.js')
-          if (!languages.includes(reallang)) {
+            code = S(code).unescapeHTML().s
-            result = hljs.highlightAuto(code)
+            const languages = hljs.listLanguages()
-          } else {
+            if (!languages.includes(reallang)) {
-            result = hljs.highlight(reallang, code)
+              result = hljs.highlightAuto(code)
-          }
+            } else {
+              result = hljs.highlight(reallang, code)
+            }
+            if (codeDiv.length > 0) codeDiv.html(result.value)
+            else langDiv.html(result.value)
+          })
+          return
         }
         if (codeDiv.length > 0) codeDiv.html(result.value)
         else langDiv.html(result.value)

public/js/index.js

@@ -18,7 +18,6 @@ import { ot } from '../vendor/ot/ot.min.js'
 import { saveAs } from 'file-saver'
 import randomColor from 'randomcolor'
 import store from 'store'
-import hljs from 'highlight.js'
 import url from 'wurl'
 import { Spinner } from 'spin.js'
 
@@ -106,36 +105,198 @@ const cursorActivityDebounce = 50
 const cursorAnimatePeriod = 100
 const supportContainers = ['success', 'info', 'warning', 'danger']
 const supportCodeModes = [
-  'javascript',
+  '1c',
-  'typescript',
+  'abnf',
-  'jsx',
+  'accesslog',
-  'htmlmixed',
+  'actionscript',
-  'htmlembedded',
+  'ada',
-  'css',
+  'angelscript',
-  'xml',
+  'apache',
-  'clike',
+  'applescript',
+  'arcade',
+  'arduino',
+  'armasm',
+  'asciidoc',
+  'aspectj',
+  'autohotkey',
+  'autoit',
+  'avrasm',
+  'awk',
+  'axapta',
+  'bash',
+  'basic',
+  'bnf',
+  'brainfuck',
+  'cal',
+  'capnproto',
+  'ceylon',
+  'c',
+  'clean',
+  'c-like',
   'clojure',
-  'ruby',
+  'clojure-repl',
-  'python',
-  'shell',
-  'php',
-  'sql',
-  'haskell',
-  'coffeescript',
-  'yaml',
-  'pug',
-  'lua',
   'cmake',
-  'nginx',
+  'coffeescript',
-  'perl',
+  'coq',
-  'sass',
+  'cos',
-  'r',
+  'cpp',
+  'crmsh',
+  'crystal',
+  'csharp',
+  'csp',
+  'css',
+  'dart',
+  'delphi',
+  'diff',
+  'django',
+  'd',
+  'dns',
   'dockerfile',
-  'tiddlywiki',
+  'dos',
-  'mediawiki',
+  'dsconfig',
+  'dts',
+  'dust',
+  'ebnf',
+  'elixir',
+  'elm',
+  'erb',
+  'erlang',
+  'erlang-repl',
+  'excel',
+  'fix',
+  'flix',
+  'fortran',
+  'fsharp',
+  'gams',
+  'gauss',
+  'gcode',
+  'gherkin',
+  'glsl',
+  'gml',
   'go',
-  'gherkin'
+  'golo',
-].concat(hljs.listLanguages())
+  'gradle',
+  'groovy',
+  'haml',
+  'handlebars',
+  'haskell',
+  'haxe',
+  'hsp',
+  'htmlbars',
+  'http',
+  'hy',
+  'inform7',
+  'ini',
+  'irpf90',
+  'isbl',
+  'java',
+  'javascript',
+  'jboss-cli',
+  'json',
+  'julia',
+  'julia-repl',
+  'kotlin',
+  'lasso',
+  'latex',
+  'ldif',
+  'leaf',
+  'less',
+  'lisp',
+  'livecodeserver',
+  'livescript',
+  'llvm',
+  'lsl',
+  'lua',
+  'makefile',
+  'markdown',
+  'mathematica',
+  'matlab',
+  'maxima',
+  'mel',
+  'mercury',
+  'mipsasm',
+  'mizar',
+  'mojolicious',
+  'monkey',
+  'moonscript',
+  'n1ql',
+  'nginx',
+  'nim',
+  'nix',
+  'node-repl',
+  'nsis',
+  'objectivec',
+  'ocaml',
+  'openscad',
+  'oxygene',
+  'parser3',
+  'perl',
+  'pf',
+  'pgsql',
+  'php',
+  'php-template',
+  'plaintext',
+  'pony',
+  'powershell',
+  'processing',
+  'profile',
+  'prolog',
+  'properties',
+  'protobuf',
+  'puppet',
+  'purebasic',
+  'python',
+  'python-repl',
+  'q',
+  'qml',
+  'reasonml',
+  'rib',
+  'r',
+  'roboconf',
+  'routeros',
+  'rsl',
+  'ruby',
+  'ruleslanguage',
+  'rust',
+  'sas',
+  'scala',
+  'scheme',
+  'scilab',
+  'scss',
+  'shell',
+  'smali',
+  'smalltalk',
+  'sml',
+  'sqf',
+  'sql',
+  'sql_more',
+  'stan',
+  'stata',
+  'step21',
+  'stylus',
+  'subunit',
+  'swift',
+  'taggerscript',
+  'tap',
+  'tcl',
+  'thrift',
+  'tp',
+  'twig',
+  'typescript',
+  'vala',
+  'vbnet',
+  'vbscript-html',
+  'vbscript',
+  'verilog',
+  'vhdl',
+  'vim',
+  'x86asm',
+  'xl',
+  'xml',
+  'xquery',
+  'yaml',
+  'zephir'
+]
 const supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc']
 const supportHeaders = [
   {

webpack.common.js

@@ -248,7 +248,6 @@ module.exports = {
       'bootstrap-validator',
       'expose-loader?exposes=jsyaml!js-yaml',
       'expose-loader?exposes=moment!moment',
-      'expose-loader?exposes=hljs!highlight.js',
       'expose-loader?exposes=emojify!emojify.js',
       'expose-loader?exposes=LZString!lz-string',
       'flowchart.js',
@@ -279,7 +278,6 @@ module.exports = {
       'babel-polyfill',
       'expose-loader?exposes=jsyaml!js-yaml',
       'expose-loader?exposes=moment!moment',
-      'expose-loader?exposes=hljs!highlight.js',
       'expose-loader?exposes=emojify!emojify.js',
       'flowchart.js',
       'js-sequence-diagrams',
@@ -312,7 +310,6 @@ module.exports = {
       'bootstrap-tooltip',
       'expose-loader?exposes=jsyaml!js-yaml',
       'expose-loader?exposes=moment!moment',
-      'expose-loader?exposes=hljs!highlight.js',
       'expose-loader?exposes=emojify!emojify.js',
       'flowchart.js',
       'js-sequence-diagrams',
@@ -342,7 +339,6 @@ module.exports = {
     'socket.io-client': 'io',
     'jquery': '$',
     'moment': 'moment',
-    'highlight.js': 'hljs',
     'select2': 'select2'
   },