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:
silverwind 2019-11-17 22:39:06 +01:00 committed by Lauris BH
parent 06984bbcbf
commit f8bd90ba60
23 changed files with 1313 additions and 655 deletions

View file

@ -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
View 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);
});

View file

@ -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
View 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(/\/[^/]*$/, '')}/`;
}