diff --git a/.eslintrc b/.eslintrc
index 76e6f8c48d..8fd53d54a1 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -24,6 +24,13 @@ globals:
SimpleMDE: false
u2fApi: false
+overrides:
+ - files: ["web_src/**/*.worker.js"]
+ env:
+ worker: true
+ rules:
+ no-restricted-globals: [0]
+
rules:
arrow-body-style: [0]
arrow-parens: [2, always]
diff --git a/package-lock.json b/package-lock.json
index 6f1f73245d..f0f7d08017 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3659,6 +3659,11 @@
"domelementtype": "1"
}
},
+ "domino": {
+ "version": "2.1.4",
+ "resolved": "https://registry.npmjs.org/domino/-/domino-2.1.4.tgz",
+ "integrity": "sha512-l70mlQ7IjPKC8kT7GljQXJZmt5OqFL+RE91ik5y5WWQtsd9wP8R7gpFnNu96fK5MqAAZRXfLLsnzKtkty5fWGQ=="
+ },
"dompurify": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.0.8.tgz",
@@ -15008,6 +15013,26 @@
"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": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
diff --git a/package.json b/package.json
index abb04356a2..88360b6b6f 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
"core-js": "3.6.4",
"css-loader": "3.4.2",
"cssnano": "4.1.10",
+ "domino": "2.1.4",
"dropzone": "5.7.0",
"fast-glob": "3.2.2",
"fomantic-ui": "2.8.4",
@@ -44,7 +45,8 @@
"vue-template-compiler": "2.6.11",
"webpack": "4.42.0",
"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": {
"eslint": "6.8.0",
diff --git a/web_src/js/features/highlight.js b/web_src/js/features/highlight.js
index dcd8a8d21e..d3f6ba71b8 100644
--- a/web_src/js/features/highlight.js
+++ b/web_src/js/features/highlight.js
@@ -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;
}
diff --git a/web_src/js/features/highlight.worker.js b/web_src/js/features/highlight.worker.js
new file mode 100644
index 0000000000..7d6cc4e438
--- /dev/null
+++ b/web_src/js/features/highlight.worker.js
@@ -0,0 +1,12 @@
+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});
+};
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 6476b2cfbf..63a5134bbd 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -11,12 +11,12 @@ import './vendor/semanticdropdown.js';
import {svg} from './utils.js';
import initContextPopups from './features/contextpopup.js';
-import initHighlight from './features/highlight.js';
import initGitGraph from './features/gitgraph.js';
import initClipboard from './features/clipboard.js';
import initUserHeatmap from './features/userheatmap.js';
import initDateTimePicker from './features/datetimepicker.js';
import createDropzone from './features/dropzone.js';
+import highlight from './features/highlight.js';
import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
@@ -29,7 +29,6 @@ let previewFileModes;
let simpleMDEditor;
const commentMDEditors = {};
let codeMirrorEditor;
-let hljs;
// Silence fomantic's error logging when tabs are used without a target content element
$.fn.tab.settings.silent = true;
@@ -49,7 +48,7 @@ function initCommentPreviewTab($form) {
$previewPanel.html(data);
emojify.run($previewPanel[0]);
$('pre code', $previewPanel[0]).each(function () {
- hljs.highlightBlock(this);
+ highlight(this);
});
});
});
@@ -75,7 +74,7 @@ function initEditPreviewTab($form) {
$previewPanel.html(data);
emojify.run($previewPanel[0]);
$('pre code', $previewPanel[0]).each(function () {
- hljs.highlightBlock(this);
+ highlight(this);
});
});
});
@@ -1011,7 +1010,7 @@ async function initRepository() {
$renderContent.html(data.content);
emojify.run($renderContent[0]);
$('pre code', $renderContent[0]).each(function () {
- hljs.highlightBlock(this);
+ highlight(this);
});
}
const $content = $segment.parent();
@@ -1337,7 +1336,7 @@ function initWikiForm() {
preview.innerHTML = `<div class="markdown ui segment">${data}</div>`;
emojify.run($('.editor-preview')[0]);
$(preview).find('pre code').each((_, e) => {
- hljs.highlightBlock(e);
+ highlight(e);
});
});
};
@@ -2633,8 +2632,8 @@ $(document).ready(async () => {
});
// parallel init of lazy-loaded features
- [hljs] = await Promise.all([
- initHighlight(),
+ await Promise.all([
+ highlight(document.querySelectorAll('pre code')),
initGitGraph(),
initClipboard(),
initUserHeatmap(),
diff --git a/webpack.config.js b/webpack.config.js
index 57a41a11a7..77680cb379 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -51,6 +51,7 @@ module.exports = {
sourceMap: true,
extractComments: false,
terserOptions: {
+ keep_fnames: /^(HTML|SVG)/, // https://github.com/fgnass/domino/issues/144
output: {
comments: false,
},
@@ -89,6 +90,19 @@ module.exports = {
test: require.resolve('jquery-datetimepicker'),
use: 'imports-loader?define=>false,exports=>false',
},
+ {
+ test: /\.worker\.js$/,
+ use: [
+ {
+ loader: 'worker-loader',
+ options: {
+ name: '[name].js',
+ inline: true,
+ fallback: false,
+ },
+ },
+ ],
+ },
{
test: /\.js$/,
exclude: /node_modules/,