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>
2020-01-28 22:57:20 +01:00 · 2020-01-28 22:57:20 +01:00 · b9690d7c0b
parent d879353632
commit b9690d7c0b
16 changed files with 53 additions and 254 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -19,7 +19,6 @@ globals:
  CodeMirror: false
  Dropzone: false
  emojify: false
-  hljs: false
  SimpleMDE: false
  u2fApi: false
  Vue: false
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/public/vendor/VERSIONS
+++ b/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
-Version: 2b46620c9d62e9becf5f25969b5ccc41fa1da470
+File(s): /js/highlight.js
+Version: 9.18.0

 File(s): /vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.js
 Version: 2.4.5
--- a/public/vendor/librejs.html
+++ b/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>
--- a/public/vendor/plugins/highlight/LICENSE
+++ b/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.
-
--- a/public/vendor/plugins/highlight/default.css
+++ b/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;
-}
--- a/public/vendor/plugins/highlight/github.css
+++ b/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;
-}
--- a/public/vendor/plugins/highlight/highlight.pack.js
+++ b/public/vendor/plugins/highlight/highlight.pack.js
--- a/templates/base/footer.tmpl
+++ b/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}}
--- a/templates/base/head.tmpl
+++ b/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}}
--- a/templates/pwa/serviceworker_js.tmpl
+++ b/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',
--- a/web_src/js/features/highlight.js
+++ 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;
+}
--- 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) {
--- 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";
--- a/webpack.config.js
+++ b/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: [
-        'js/gitgraph.js',
-        'js/jquery.js',
-        'js/swagger.js',
+      include: [
+        'js/index.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: {