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>
This commit is contained in:
silverwind 2020-01-28 22:57:20 +01:00 committed by Lauris BH
parent d879353632
commit b9690d7c0b
16 changed files with 53 additions and 254 deletions

View File

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

5
package-lock.json generated
View File

@ -7341,6 +7341,11 @@
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
"dev": true "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": { "hmac-drbg": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",

View File

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

View File

@ -26,8 +26,8 @@ Version: 1.1.0
File(s): /vendor/plugins/dropzone/dropzone.js File(s): /vendor/plugins/dropzone/dropzone.js
Version: 4.2.0 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 File(s): /vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.js
Version: 2.4.5 Version: 2.4.5

View File

@ -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> <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>
<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/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>
<tr> <tr>
<td><a href="./plugins/jquery.datetimepicker/jquery.datetimepicker.js">jquery.datetimepicker.js</a></td> <td><a href="./plugins/jquery.datetimepicker/jquery.datetimepicker.js">jquery.datetimepicker.js</a></td>

View File

@ -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.

View File

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

View File

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

File diff suppressed because one or more lines are too long

View File

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

View File

@ -83,6 +83,17 @@
for the JavaScript code in this page. for the JavaScript code in this page.
*/`}} */`}}
</script> </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="shortcut icon" href="{{StaticUrlPrefix}}/img/favicon.png">
<link rel="apple-touch-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"> <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; } .ui.secondary.menu .dropdown.item > .menu { margin-top: 0; }
</style> </style>
</noscript> </noscript>
{{if .RequireHighlightJS}}
<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/highlight/github.css">
{{end}}
{{if .RequireMinicolors}} {{if .RequireMinicolors}}
<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.css"> <link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.css">
{{end}} {{end}}

View File

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

View File

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

View File

@ -6,7 +6,8 @@ import './publicPath.js';
import './polyfills.js'; import './polyfills.js';
import './gitGraphLoader.js'; import './gitGraphLoader.js';
import './semanticDropdown.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'; import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
@ -20,6 +21,7 @@ let previewFileModes;
let simpleMDEditor; let simpleMDEditor;
const commentMDEditors = {}; const commentMDEditors = {};
let codeMirrorEditor; let codeMirrorEditor;
let hljs;
// Disable Dropzone auto-discover because it's manually initialized // Disable Dropzone auto-discover because it's manually initialized
if (typeof (Dropzone) !== 'undefined') { if (typeof (Dropzone) !== 'undefined') {
@ -2318,7 +2320,7 @@ function initTemplateSearch() {
changeOwner(); changeOwner();
} }
$(document).ready(() => { $(document).ready(async () => {
csrf = $('meta[name=_csrf]').attr('content'); csrf = $('meta[name=_csrf]').attr('content');
suburl = $('meta[name=_suburl]').attr('content'); suburl = $('meta[name=_suburl]').attr('content');
@ -2370,14 +2372,6 @@ $(document).ready(() => {
window.location = $(this).data('href'); 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 // Dropzone
const $dropzone = $('#dropzone'); const $dropzone = $('#dropzone');
if ($dropzone.length > 0) { if ($dropzone.length > 0) {
@ -2591,6 +2585,10 @@ $(document).ready(() => {
$repoName.val($cloneAddr.val().match(/^(.*\/)?((.+?)(\.git)?)$/)[3]); $repoName.val($cloneAddr.val().match(/^(.*\/)?((.+?)(\.git)?)$/)[3]);
} }
}); });
[hljs] = await Promise.all([
initHighlight(),
]);
}); });
function changeHash(hash) { function changeHash(hash) {

View File

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

View File

@ -65,6 +65,10 @@ module.exports = {
}, },
}), }),
], ],
splitChunks: {
chunks: 'async',
name: (_, chunks) => chunks.map((item) => item.name).join('-'),
}
}, },
module: { module: {
rules: [ rules: [
@ -142,10 +146,8 @@ module.exports = {
}), }),
new SourceMapDevToolPlugin({ new SourceMapDevToolPlugin({
filename: 'js/[name].js.map', 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, maxEntrypointSize: 512000,
maxAssetSize: 512000, maxAssetSize: 512000,
assetFilter: (filename) => { 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: { resolve: {