enable lazy-loading of gitgraph.js (#9036)
- moved gitgraph.js to web_src and made it importable and es6-compatible - created new webpack chunk for gitgraph - enabled CSS loader in webpack - enabled async/await syntax via regenerator-runtime - added script to ensure webpack chunks are loaded correctly - disable terser's comment extraction to prevent .LICENCE files gitgraph.js has many issues: 1. it is incompatible with ES6 because of strict-mode violations 1. it does not export anything 1. it's css has weird styles like for `body` 1. it is not available on npm I fixed points 1-3 in our version so it's now loadable in webpack. We should eventually consider alternatives.
This commit is contained in:
parent
06984bbcbf
commit
f8bd90ba60
23 changed files with 1313 additions and 655 deletions
|
@ -1,15 +0,0 @@
|
|||
/* globals gitGraph */
|
||||
|
||||
$(() => {
|
||||
const graphList = [];
|
||||
|
||||
if (!document.getElementById('graph-canvas')) {
|
||||
return;
|
||||
}
|
||||
|
||||
$('#graph-raw-list li span.node-relation').each(function () {
|
||||
graphList.push($(this).text());
|
||||
});
|
||||
|
||||
gitGraph(document.getElementById('graph-canvas'), graphList);
|
||||
});
|
16
web_src/js/gitGraph.js
Normal file
16
web_src/js/gitGraph.js
Normal file
|
@ -0,0 +1,16 @@
|
|||
$(async () => {
|
||||
const graphCanvas = document.getElementById('graph-canvas');
|
||||
if (!graphCanvas) return;
|
||||
|
||||
const [{ default: gitGraph }] = await Promise.all([
|
||||
import(/* webpackChunkName: "gitgraph" */'../vendor/gitgraph.js/gitgraph.custom.js'),
|
||||
import(/* webpackChunkName: "gitgraph" */'../vendor/gitgraph.js/gitgraph.custom.css'),
|
||||
]);
|
||||
|
||||
const graphList = [];
|
||||
$('#graph-raw-list li span.node-relation').each(function () {
|
||||
graphList.push($(this).text());
|
||||
});
|
||||
|
||||
gitGraph(graphCanvas, graphList);
|
||||
});
|
|
@ -2,6 +2,9 @@
|
|||
/* exported timeAddManual, toggleStopwatch, cancelStopwatch, initHeatmap */
|
||||
/* exported toggleDeadlineForm, setDeadline, updateDeadline, deleteDependencyModal, cancelCodeComment, onOAuthLoginClick */
|
||||
|
||||
import './publicPath';
|
||||
import './gitGraph';
|
||||
|
||||
function htmlEncode(text) {
|
||||
return jQuery('<div />').text(text).html();
|
||||
}
|
||||
|
|
12
web_src/js/publicPath.js
Normal file
12
web_src/js/publicPath.js
Normal file
|
@ -0,0 +1,12 @@
|
|||
/* This sets up webpack's chunk loading to load resources from the same
|
||||
directory where it loaded index.js from. This file must be imported
|
||||
before any lazy-loading is being attempted. */
|
||||
|
||||
if (document.currentScript && document.currentScript.src) {
|
||||
const url = new URL(document.currentScript.src);
|
||||
__webpack_public_path__ = `${url.pathname.replace(/\/[^/]*$/, '')}/`;
|
||||
} else {
|
||||
// compat: IE11
|
||||
const script = document.querySelector('script[src*="/index.js"]');
|
||||
__webpack_public_path__ = `${script.getAttribute('src').replace(/\/[^/]*$/, '')}/`;
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue