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>

.eslintrc

@@ -19,7 +19,6 @@ globals:
   CodeMirror: false
   Dropzone: false
   emojify: false
-  hljs: false
   SimpleMDE: false
   u2fApi: false
   Vue: false

package-lock.json

@@ -7341,6 +7341,11 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "dev": true
     },
+    "highlight.js": {
+      "version": "9.18.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.18.0.tgz",
+      "integrity": "sha512-A97kI1KAUzKoAiEoaGcf2O9YPS8nbDTCRFokaaeBhnqjQTvbAuAJrQMm21zw8s8xzaMtCQBtgbyGXLGxdxQyqQ=="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",

package.json

@@ -6,6 +6,7 @@
   },
   "dependencies": {
     "fomantic-ui": "2.8.3",
+    "highlight.js": "9.18.0",
     "jquery": "3.4.1",
     "jquery-migrate": "3.1.0",
     "swagger-ui": "3.24.3",

public/vendor/VERSIONS

@@ -26,8 +26,8 @@ Version: 1.1.0
 File(s): /vendor/plugins/dropzone/dropzone.js
 Version: 4.2.0
 
-File(s): /vendor/plugins/highlight/highlight.pack.js
+File(s): /js/highlight.js
-Version: 2b46620c9d62e9becf5f25969b5ccc41fa1da470
+Version: 9.18.0
 
 File(s): /vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.js
 Version: 2.4.5

public/vendor/librejs.html

@@ -66,9 +66,9 @@
           <td><a href="https://github.com/enyo/dropzone/archive/v4.2.0.tar.gz">dropzone.js-4.2.0.tar.gz</a></td>
         </tr>
         <tr>
-          <td><a href="./plugins/highlight/highlight.pack.js">highlight.pack.js</a></td>
+          <td><a href="./highlight.js">highlight.js</a></td>
           <td><a href="https://github.com/highlightjs/highlight.js/blob/master/LICENSE">BSD 3-Clause</a></td>
-          <td><a href="https://github.com/highlightjs/highlight.js/archive/2b46620c.tar.gz">highlight.js-2b46620c.tar.gz</a></td>
+          <td><a href="https://github.com/highlightjs/highlight.js/archive/9.18.0.tar.gz">highlight.js.tar.gz</a></td>
         </tr>
         <tr>
           <td><a href="./plugins/jquery.datetimepicker/jquery.datetimepicker.js">jquery.datetimepicker.js</a></td>

public/vendor/plugins/highlight/LICENSE

@@ -1,25 +0,0 @@
-Copyright (c) 2006, Ivan Sagalaev
-All rights reserved.
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions are met:
-
-    * Redistributions of source code must retain the above copyright
-      notice, this list of conditions and the following disclaimer.
-    * Redistributions in binary form must reproduce the above copyright
-      notice, this list of conditions and the following disclaimer in the
-      documentation and/or other materials provided with the distribution.
-    * Neither the name of highlight.js nor the names of its contributors 
-      may be used to endorse or promote products derived from this software 
-      without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE REGENTS AND CONTRIBUTORS ``AS IS'' AND ANY
-EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
-WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE REGENTS AND CONTRIBUTORS BE LIABLE FOR ANY
-DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
-(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
-LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
-ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
-SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-

public/vendor/plugins/highlight/default.css

@@ -1,99 +0,0 @@
-/*
-
-Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
-
-*/
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  background: #F0F0F0;
-}
-
-
-/* Base color: saturation 0; */
-
-.hljs,
-.hljs-subst {
-  color: #444;
-}
-
-.hljs-comment {
-  color: #888888;
-}
-
-.hljs-keyword,
-.hljs-attribute,
-.hljs-selector-tag,
-.hljs-meta-keyword,
-.hljs-doctag,
-.hljs-name {
-  font-weight: bold;
-}
-
-
-/* User color: hue: 0 */
-
-.hljs-type,
-.hljs-string,
-.hljs-number,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-quote,
-.hljs-template-tag,
-.hljs-deletion {
-  color: #880000;
-}
-
-.hljs-title,
-.hljs-section {
-  color: #880000;
-  font-weight: bold;
-}
-
-.hljs-regexp,
-.hljs-symbol,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-link,
-.hljs-selector-attr,
-.hljs-selector-pseudo {
-  color: #BC6060;
-}
-
-
-/* Language color: hue: 90; */
-
-.hljs-literal {
-  color: #78A960;
-}
-
-.hljs-built_in,
-.hljs-bullet,
-.hljs-code,
-.hljs-addition {
-  color: #397300;
-}
-
-
-/* Meta color: hue: 200 */
-
-.hljs-meta {
-  color: #1f7199;
-}
-
-.hljs-meta-string {
-  color: #4d99bf;
-}
-
-
-/* Misc effects */
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
-}

public/vendor/plugins/highlight/github.css

@@ -1,99 +0,0 @@
-/*
-
-github.com style (c) Vasily Polovnyov <vast@whiteants.net>
-
-*/
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  color: #333;
-  background: #f8f8f8;
-}
-
-.hljs-comment,
-.hljs-quote {
-  color: #998;
-  font-style: italic;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-subst {
-  color: #333;
-  font-weight: bold;
-}
-
-.hljs-number,
-.hljs-literal,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-tag .hljs-attr {
-  color: #008080;
-}
-
-.hljs-string,
-.hljs-doctag {
-  color: #d14;
-}
-
-.hljs-title,
-.hljs-section,
-.hljs-selector-id {
-  color: #900;
-  font-weight: bold;
-}
-
-.hljs-subst {
-  font-weight: normal;
-}
-
-.hljs-type,
-.hljs-class .hljs-title {
-  color: #458;
-  font-weight: bold;
-}
-
-.hljs-tag,
-.hljs-name,
-.hljs-attribute {
-  color: #000080;
-  font-weight: normal;
-}
-
-.hljs-regexp,
-.hljs-link {
-  color: #009926;
-}
-
-.hljs-symbol,
-.hljs-bullet {
-  color: #990073;
-}
-
-.hljs-built_in,
-.hljs-builtin-name {
-  color: #0086b3;
-}
-
-.hljs-meta {
-  color: #999;
-  font-weight: bold;
-}
-
-.hljs-deletion {
-  background: #fdd;
-}
-
-.hljs-addition {
-  background: #dfd;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
-}

templates/base/footer.tmpl

@@ -24,9 +24,6 @@
 {{end}}
 
 <!-- Third-party libraries -->
-{{if .RequireHighlightJS}}
-	<script src="{{StaticUrlPrefix}}/vendor/plugins/highlight/highlight.pack.js"></script>
-{{end}}
 {{if .RequireMinicolors}}
 	<script src="{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.min.js"></script>
 {{end}}

templates/base/head.tmpl

@@ -83,6 +83,17 @@
         for the JavaScript code in this page.
 	*/`}}
 	</script>
+	<script>
+		window.config = {
+			Datetimepicker: {{if .RequireDatetimepicker}}true{{else}}false{{end}},
+			Dropzone: {{if .RequireDropzone}}true{{else}}false{{end}},
+			HighlightJS: {{if .RequireHighlightJS}}true{{else}}false{{end}},
+			Minicolors: {{if .RequireMinicolors}}true{{else}}false{{end}},
+			SimpleMDE: {{if .RequireSimpleMDE}}true{{else}}false{{end}},
+			Tribute: {{if .RequireTribute}}true{{else}}false{{end}},
+			U2F: {{if .RequireU2F}}true{{else}}false{{end}},
+		};
+	</script>
 	<link rel="shortcut icon" href="{{StaticUrlPrefix}}/img/favicon.png">
 	<link rel="apple-touch-icon" href="{{StaticUrlPrefix}}/img/favicon.png">
 	<link rel="mask-icon" href="{{StaticUrlPrefix}}/img/gitea-safari.svg" color="#609926">
@@ -106,10 +117,6 @@
 			.ui.secondary.menu .dropdown.item > .menu { margin-top: 0; }
 		</style>
 	</noscript>
-
-{{if .RequireHighlightJS}}
-	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/highlight/github.css">
-{{end}}
 {{if .RequireMinicolors}}
 	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.css">
 {{end}}

templates/pwa/serviceworker_js.tmpl

@@ -3,6 +3,7 @@ var urlsToCache = [
   // js
   '{{StaticUrlPrefix}}/fomantic/semantic.min.js?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/js/gitgraph.js',
+  '{{StaticUrlPrefix}}/js/highlight.js',
   '{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/js/jquery.js?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/js/swagger.js?v={{MD5 AppVer}}',
@@ -11,7 +12,6 @@ var urlsToCache = [
   '{{StaticUrlPrefix}}/vendor/plugins/codemirror/mode/meta.js',
   '{{StaticUrlPrefix}}/vendor/plugins/dropzone/dropzone.js',
   '{{StaticUrlPrefix}}/vendor/plugins/emojify/emojify.custom.js',
-  '{{StaticUrlPrefix}}/vendor/plugins/highlight/highlight.pack.js',
   '{{StaticUrlPrefix}}/vendor/plugins/jquery.areyousure/jquery.are-you-sure.js',
   '{{StaticUrlPrefix}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.js',
   '{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.min.js',
@@ -20,13 +20,13 @@ var urlsToCache = [
 
   // css
   '{{StaticUrlPrefix}}/css/gitgraph.css',
+  '{{StaticUrlPrefix}}/css/highlight.css',
   '{{StaticUrlPrefix}}/css/index.css?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/css/swagger.css?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/fomantic/semantic.min.css?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/vendor/assets/font-awesome/css/font-awesome.min.css',
   '{{StaticUrlPrefix}}/vendor/assets/octicons/octicons.min.css',
   '{{StaticUrlPrefix}}/vendor/plugins/dropzone/dropzone.css',
-  '{{StaticUrlPrefix}}/vendor/plugins/highlight/github.css',
   '{{StaticUrlPrefix}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.css',
   '{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.css',
   '{{StaticUrlPrefix}}/vendor/plugins/simplemde/simplemde.min.css',

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;
+}

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) {

web_src/less/index.less

@@ -13,3 +13,4 @@
 @import "_admin";
 @import "_explore";
 @import "_review";
+@import "~highlight.js/styles/github.css";

webpack.config.js

@@ -65,6 +65,10 @@ module.exports = {
         },
       }),
     ],
+    splitChunks: {
+      chunks: 'async',
+      name: (_, chunks) => chunks.map((item) => item.name).join('-'),
+    }
   },
   module: {
     rules: [
@@ -142,10 +146,8 @@ module.exports = {
     }),
     new SourceMapDevToolPlugin({
       filename: 'js/[name].js.map',
-      exclude: [
+      include: [
-        'js/gitgraph.js',
+        'js/index.js',
-        'js/jquery.js',
-        'js/swagger.js',
       ],
     }),
   ],
@@ -153,7 +155,9 @@ module.exports = {
     maxEntrypointSize: 512000,
     maxAssetSize: 512000,
     assetFilter: (filename) => {
-      return !filename.endsWith('.map') && filename !== 'js/swagger.js';
+      if (filename.endsWith('.map')) return false;
+      if (['js/swagger.js', 'js/highlight.js'].includes(filename)) return false;
+      return true;
     },
   },
   resolve: {