git724/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Move syntax highlighting to web worker (#11017)

Browse source 
This should eliminate page freezes when loading big files/diff.
`highlightBlock` is needed to preserve existing nodes when highlighting
and for that, highlight.js needs access to the DOM API so I added a DOM
implementation to make it work, which adds around 300kB to the output
file size of the lazy-loaded `highlight.js`.

Co-authored-by: Lauris BH <lauris@nix.lv>
This commit is contained in:
silverwind 2020-04-13 15:02:31 +02:00 • committed by GitHub
parent cc4da79fb6
commit 27e3cddfbe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 83 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

23
web_src/js/features/highlight.js
View file

@ -1,12 +1,19 @@
export default async function initHighlight() {
if (!window.config || !window.config.HighlightJS) return;
export default async function highlight(elementOrNodeList) {
if (!window.config || !window.config.HighlightJS || !elementOrNodeList) return;
const nodes = 'length' in elementOrNodeList ? elementOrNodeList : [elementOrNodeList];
if (!nodes.length) return;
const hljs = await import(/* webpackChunkName: "highlight" */'highlight.js');
const {default: Worker} = await import(/* webpackChunkName: "highlight" */'./highlight.worker.js');
const worker = new Worker();
const nodes = [].slice.call(document.querySelectorAll('pre code') || []);
for (let i = 0; i < nodes.length; i++) {
hljs.highlightBlock(nodes[i]);
worker.addEventListener('message', ({data}) => {
const {index, html} = data;
nodes[index].outerHTML = html;
});
for (let index = 0; index < nodes.length; index++) {
const node = nodes[index];
if (!node) continue;
worker.postMessage({index, html: node.outerHTML});
}
return hljs;
}