Browse Source

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 <[email protected]>
tags/v1.12.0-dev
silverwind 7 months ago
committed by Lauris BH
parent
commit
b9690d7c0b
16 changed files with 53 additions and 254 deletions
  1. +0
    -1
      .eslintrc
  2. +5
    -0
      package-lock.json
  3. +1
    -0
      package.json
  4. +2
    -2
      public/vendor/VERSIONS
  5. +2
    -2
      public/vendor/librejs.html
  6. +0
    -25
      public/vendor/plugins/highlight/LICENSE
  7. +0
    -99
      public/vendor/plugins/highlight/default.css
  8. +0
    -99
      public/vendor/plugins/highlight/github.css
  9. +0
    -2
      public/vendor/plugins/highlight/highlight.pack.js
  10. +0
    -3
      templates/base/footer.tmpl
  11. +11
    -4
      templates/base/head.tmpl
  12. +2
    -2
      templates/pwa/serviceworker_js.tmpl
  13. +12
    -0
      web_src/js/features/highlight.js
  14. +8
    -10
      web_src/js/index.js
  15. +1
    -0
      web_src/less/index.less
  16. +9
    -5
      webpack.config.js

+ 0
- 1
.eslintrc View File

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


+ 5
- 0
package-lock.json View File

@@ -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",


+ 1
- 0
package.json View File

@@ -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",


+ 2
- 2
public/vendor/VERSIONS View File

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


+ 2
- 2
public/vendor/librejs.html 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>
</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>


+ 0
- 25
public/vendor/plugins/highlight/LICENSE 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.


+ 0
- 99
public/vendor/plugins/highlight/default.css View File

@@ -1,99 +0,0 @@
/*

Original highlight.js style (c) Ivan Sagalaev <[email protected]>

*/

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

+ 0
- 99
public/vendor/plugins/highlight/github.css View File

@@ -1,99 +0,0 @@
/*

github.com style (c) Vasily Polovnyov <[email protected]>

*/

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

+ 0
- 2
public/vendor/plugins/highlight/highlight.pack.js
File diff suppressed because it is too large
View File


+ 0
- 3
templates/base/footer.tmpl View File

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


+ 11
- 4
templates/base/head.tmpl View File

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


+ 2
- 2
templates/pwa/serviceworker_js.tmpl View File

@@ -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',


+ 12
- 0
web_src/js/features/highlight.js 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;
}

+ 8
- 10
web_src/js/index.js View File

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


+ 1
- 0
web_src/less/index.less View File

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

+ 9
- 5
webpack.config.js View File

@@ -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: {


Loading…
Cancel
Save