move highlight.js to npm/webpack (#10011)

- introduced window.config to help with js-based lazy-loading
- adjusted webpack chunk naming to avoid 'vendors~name.js' that webpack
  defaults to for vendor chunks.
- added theme class to html and prefixed all selectors. this is
  neccesary so that the theme styles win over the lazy-loaded ones.

Co-authored-by: zeripath <art27@cantab.net>

3 files changed, 21 insertions, 10 deletions

diff --git a/web_src/js/features/highlight.js b/web_src/js/features/highlight.js
new file mode 100644
index 0000000000..dcd8a8d21e
--- /dev/null
+++ b/web_src/js/features/highlight.js
@@ -0,0 +1,12 @@
+export default async function initHighlight() {
+  if (!window.config || !window.config.HighlightJS) return;
+
+  const hljs = await import(/* webpackChunkName: "highlight" */'highlight.js');
+
+  const nodes = [].slice.call(document.querySelectorAll('pre code') || []);
+  for (let i = 0; i < nodes.length; i++) {
+    hljs.highlightBlock(nodes[i]);
+  }
+
+  return hljs;
+}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 12c46903a6..75be2363a9 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -6,7 +6,8 @@ import './publicPath.js';
 import './polyfills.js';
 import './gitGraphLoader.js';
 import './semanticDropdown.js';
-import initContextPopups from './features/contextPopup';
+import initContextPopups from './features/contextPopup.js';
+import initHighlight from './features/highlight.js';
 
 import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
 
@@ -20,6 +21,7 @@ let previewFileModes;
 let simpleMDEditor;
 const commentMDEditors = {};
 let codeMirrorEditor;
+let hljs;
 
 // Disable Dropzone auto-discover because it's manually initialized
 if (typeof (Dropzone) !== 'undefined') {
@@ -2318,7 +2320,7 @@ function initTemplateSearch() {
   changeOwner();
 }
 
-$(document).ready(() => {
+$(document).ready(async () => {
   csrf = $('meta[name=_csrf]').attr('content');
   suburl = $('meta[name=_suburl]').attr('content');
 
@@ -2370,14 +2372,6 @@ $(document).ready(() => {
     window.location = $(this).data('href');
   });
 
-  // Highlight JS
-  if (typeof hljs !== 'undefined') {
-    const nodes = [].slice.call(document.querySelectorAll('pre code') || []);
-    for (let i = 0; i < nodes.length; i++) {
-      hljs.highlightBlock(nodes[i]);
-    }
-  }
-
   // Dropzone
   const $dropzone = $('#dropzone');
   if ($dropzone.length > 0) {
@@ -2591,6 +2585,10 @@ $(document).ready(() => {
       $repoName.val($cloneAddr.val().match(/^(.*\/)?((.+?)(\.git)?)$/)[3]);
     }
   });
+
+  [hljs] = await Promise.all([
+    initHighlight(),
+  ]);
 });
 
 function changeHash(hash) {
diff --git a/web_src/less/index.less b/web_src/less/index.less
index 0ffd6c9be6..de6f2088c3 100644
--- a/web_src/less/index.less
+++ b/web_src/less/index.less
@@ -13,3 +13,4 @@
 @import "_admin";
 @import "_explore";
 @import "_review";
+@import "~highlight.js/styles/github.css";