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>tags/v1.13.0-dev
SimpleMDE: false | SimpleMDE: false | ||||
u2fApi: false | u2fApi: false | ||||
overrides: | |||||
- files: ["web_src/**/*.worker.js"] | |||||
env: | |||||
worker: true | |||||
rules: | |||||
no-restricted-globals: [0] | |||||
rules: | rules: | ||||
arrow-body-style: [0] | arrow-body-style: [0] | ||||
arrow-parens: [2, always] | arrow-parens: [2, always] |
"domelementtype": "1" | "domelementtype": "1" | ||||
} | } | ||||
}, | }, | ||||
"domino": { | |||||
"version": "2.1.4", | |||||
"resolved": "https://registry.npmjs.org/domino/-/domino-2.1.4.tgz", | |||||
"integrity": "sha512-l70mlQ7IjPKC8kT7GljQXJZmt5OqFL+RE91ik5y5WWQtsd9wP8R7gpFnNu96fK5MqAAZRXfLLsnzKtkty5fWGQ==" | |||||
}, | |||||
"dompurify": { | "dompurify": { | ||||
"version": "2.0.8", | "version": "2.0.8", | ||||
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.0.8.tgz", | "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.0.8.tgz", | ||||
"errno": "~0.1.7" | "errno": "~0.1.7" | ||||
} | } | ||||
}, | }, | ||||
"worker-loader": { | |||||
"version": "2.0.0", | |||||
"resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-2.0.0.tgz", | |||||
"integrity": "sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==", | |||||
"requires": { | |||||
"loader-utils": "^1.0.0", | |||||
"schema-utils": "^0.4.0" | |||||
}, | |||||
"dependencies": { | |||||
"schema-utils": { | |||||
"version": "0.4.7", | |||||
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz", | |||||
"integrity": "sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==", | |||||
"requires": { | |||||
"ajv": "^6.1.0", | |||||
"ajv-keywords": "^3.1.0" | |||||
} | |||||
} | |||||
} | |||||
}, | |||||
"wrap-ansi": { | "wrap-ansi": { | ||||
"version": "2.1.0", | "version": "2.1.0", | ||||
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", | "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", |
"core-js": "3.6.4", | "core-js": "3.6.4", | ||||
"css-loader": "3.4.2", | "css-loader": "3.4.2", | ||||
"cssnano": "4.1.10", | "cssnano": "4.1.10", | ||||
"domino": "2.1.4", | |||||
"dropzone": "5.7.0", | "dropzone": "5.7.0", | ||||
"fast-glob": "3.2.2", | "fast-glob": "3.2.2", | ||||
"fomantic-ui": "2.8.4", | "fomantic-ui": "2.8.4", | ||||
"vue-template-compiler": "2.6.11", | "vue-template-compiler": "2.6.11", | ||||
"webpack": "4.42.0", | "webpack": "4.42.0", | ||||
"webpack-cli": "3.3.11", | "webpack-cli": "3.3.11", | ||||
"webpack-fix-style-only-entries": "0.4.0" | |||||
"webpack-fix-style-only-entries": "0.4.0", | |||||
"worker-loader": "2.0.0" | |||||
}, | }, | ||||
"devDependencies": { | "devDependencies": { | ||||
"eslint": "6.8.0", | "eslint": "6.8.0", |
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; | |||||
}); | |||||
return hljs; | |||||
for (let index = 0; index < nodes.length; index++) { | |||||
const node = nodes[index]; | |||||
if (!node) continue; | |||||
worker.postMessage({index, html: node.outerHTML}); | |||||
} | |||||
} | } |
import {highlightBlock} from 'highlight.js'; | |||||
import {createWindow} from 'domino'; | |||||
self.onmessage = function ({data}) { | |||||
const window = createWindow(); | |||||
self.document = window.document; | |||||
const {index, html} = data; | |||||
document.body.innerHTML = html; | |||||
highlightBlock(document.body.firstChild); | |||||
self.postMessage({index, html: document.body.innerHTML}); | |||||
}; |
import {svg} from './utils.js'; | import {svg} from './utils.js'; | ||||
import initContextPopups from './features/contextpopup.js'; | import initContextPopups from './features/contextpopup.js'; | ||||
import initHighlight from './features/highlight.js'; | |||||
import initGitGraph from './features/gitgraph.js'; | import initGitGraph from './features/gitgraph.js'; | ||||
import initClipboard from './features/clipboard.js'; | import initClipboard from './features/clipboard.js'; | ||||
import initUserHeatmap from './features/userheatmap.js'; | import initUserHeatmap from './features/userheatmap.js'; | ||||
import initDateTimePicker from './features/datetimepicker.js'; | import initDateTimePicker from './features/datetimepicker.js'; | ||||
import createDropzone from './features/dropzone.js'; | import createDropzone from './features/dropzone.js'; | ||||
import highlight from './features/highlight.js'; | |||||
import ActivityTopAuthors from './components/ActivityTopAuthors.vue'; | import ActivityTopAuthors from './components/ActivityTopAuthors.vue'; | ||||
const {AppSubUrl, StaticUrlPrefix, csrf} = window.config; | const {AppSubUrl, StaticUrlPrefix, csrf} = window.config; | ||||
let simpleMDEditor; | let simpleMDEditor; | ||||
const commentMDEditors = {}; | const commentMDEditors = {}; | ||||
let codeMirrorEditor; | let codeMirrorEditor; | ||||
let hljs; | |||||
// Silence fomantic's error logging when tabs are used without a target content element | // Silence fomantic's error logging when tabs are used without a target content element | ||||
$.fn.tab.settings.silent = true; | $.fn.tab.settings.silent = true; | ||||
$previewPanel.html(data); | $previewPanel.html(data); | ||||
emojify.run($previewPanel[0]); | emojify.run($previewPanel[0]); | ||||
$('pre code', $previewPanel[0]).each(function () { | $('pre code', $previewPanel[0]).each(function () { | ||||
hljs.highlightBlock(this); | |||||
highlight(this); | |||||
}); | }); | ||||
}); | }); | ||||
}); | }); | ||||
$previewPanel.html(data); | $previewPanel.html(data); | ||||
emojify.run($previewPanel[0]); | emojify.run($previewPanel[0]); | ||||
$('pre code', $previewPanel[0]).each(function () { | $('pre code', $previewPanel[0]).each(function () { | ||||
hljs.highlightBlock(this); | |||||
highlight(this); | |||||
}); | }); | ||||
}); | }); | ||||
}); | }); | ||||
$renderContent.html(data.content); | $renderContent.html(data.content); | ||||
emojify.run($renderContent[0]); | emojify.run($renderContent[0]); | ||||
$('pre code', $renderContent[0]).each(function () { | $('pre code', $renderContent[0]).each(function () { | ||||
hljs.highlightBlock(this); | |||||
highlight(this); | |||||
}); | }); | ||||
} | } | ||||
const $content = $segment.parent(); | const $content = $segment.parent(); | ||||
preview.innerHTML = `<div class="markdown ui segment">${data}</div>`; | preview.innerHTML = `<div class="markdown ui segment">${data}</div>`; | ||||
emojify.run($('.editor-preview')[0]); | emojify.run($('.editor-preview')[0]); | ||||
$(preview).find('pre code').each((_, e) => { | $(preview).find('pre code').each((_, e) => { | ||||
hljs.highlightBlock(e); | |||||
highlight(e); | |||||
}); | }); | ||||
}); | }); | ||||
}; | }; | ||||
}); | }); | ||||
// parallel init of lazy-loaded features | // parallel init of lazy-loaded features | ||||
[hljs] = await Promise.all([ | |||||
initHighlight(), | |||||
await Promise.all([ | |||||
highlight(document.querySelectorAll('pre code')), | |||||
initGitGraph(), | initGitGraph(), | ||||
initClipboard(), | initClipboard(), | ||||
initUserHeatmap(), | initUserHeatmap(), |
sourceMap: true, | sourceMap: true, | ||||
extractComments: false, | extractComments: false, | ||||
terserOptions: { | terserOptions: { | ||||
keep_fnames: /^(HTML|SVG)/, // https://github.com/fgnass/domino/issues/144 | |||||
output: { | output: { | ||||
comments: false, | comments: false, | ||||
}, | }, | ||||
test: require.resolve('jquery-datetimepicker'), | test: require.resolve('jquery-datetimepicker'), | ||||
use: 'imports-loader?define=>false,exports=>false', | use: 'imports-loader?define=>false,exports=>false', | ||||
}, | }, | ||||
{ | |||||
test: /\.worker\.js$/, | |||||
use: [ | |||||
{ | |||||
loader: 'worker-loader', | |||||
options: { | |||||
name: '[name].js', | |||||
inline: true, | |||||
fallback: false, | |||||
}, | |||||
}, | |||||
], | |||||
}, | |||||
{ | { | ||||
test: /\.js$/, | test: /\.js$/, | ||||
exclude: /node_modules/, | exclude: /node_modules/, |