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.

.eslintignore

@@ -1 +1,2 @@
 /public/js/semantic.dropdown.custom.js
+/web_src/js/vendor/**

.eslintrc

@@ -14,6 +14,7 @@ env:
   node: true
 
 globals:
+  __webpack_public_path__: true
   Clipboard: false
   CodeMirror: false
   Dropzone: false

package.json

@@ -6,16 +6,20 @@
   },
   "devDependencies": {
     "@babel/core": "7.7.2",
+    "@babel/plugin-transform-runtime": "7.6.2",
     "@babel/preset-env": "7.7.1",
+    "@babel/runtime": "7.7.2",
     "autoprefixer": "9.7.1",
     "babel-loader": "8.0.6",
     "core-js": "3.4.1",
+    "css-loader": "3.2.0",
     "eslint": "6.6.0",
     "eslint-config-airbnb-base": "14.0.0",
     "eslint-plugin-import": "2.18.2",
     "less": "3.10.3",
     "less-plugin-clean-css": "1.5.1",
     "postcss-cli": "6.1.3",
+    "style-loader": "1.0.0",
     "stylelint": "11.1.1",
     "stylelint-config-standard": "19.0.0",
     "terser-webpack-plugin": "2.2.1",

public/vendor/VERSIONS

@@ -17,9 +17,6 @@ Version: 2.3.1
 File(s): /vendor/plugins/clipboard/clipboard.min.js
 Version: 1.5.9
 
-File(s): /vendor/plugins/gitgraph/gitgraph.js
-Version: 745f604212e2abfe2f0a59169ea530857b46625c
-
 File(s): /vendor/plugins/vue/vue.min.js
 Version: 2.1.10
 

public/vendor/librejs.html

@@ -46,7 +46,7 @@
           <td><a href="https://github.com/zenorocha/clipboard.js/archive/v1.5.9.tar.gz">clipboard-1.5.9.tar.gz</a></td>
         </tr>
         <tr>
-          <td><a href="./plugins/gitgraph/gitgraph.js">gitgraph.js</a></td>
+          <td><a href="../js/gitgraph.js">gitgraph.js</a></td>
           <td><a href="https://github.com/bluef/gitgraph.js/blob/master/LICENSE">BSD 3-Clause</a></td>
           <td><a href="https://github.com/bluef/gitgraph.js">gitgraph.js-latest</a></td>
         </tr>

routers/repo/commit.go

@@ -111,7 +111,6 @@ func Graph(ctx *context.Context) {
 	ctx.Data["Reponame"] = ctx.Repo.Repository.Name
 	ctx.Data["CommitCount"] = commitsCount
 	ctx.Data["Branch"] = ctx.Repo.BranchName
-	ctx.Data["RequireGitGraph"] = true
 	ctx.Data["Page"] = context.NewPagination(int(allCommitsCount), setting.UI.GraphMaxCommitNum, page, 5)
 	ctx.HTML(200, tplGraph)
 }

templates/base/footer.tmpl

@@ -23,10 +23,6 @@
 		CodeMirror.modeURL =  "{{StaticUrlPrefix}}/vendor/plugins/codemirror/mode/%N/%N.js";
 	</script>
 {{end}}
-{{if .RequireGitGraph}}
-	<!-- graph -->
-	<script src="{{StaticUrlPrefix}}/vendor/plugins/gitgraph/gitgraph.js"></script>
-{{end}}
 
 <!-- Third-party libraries -->
 {{if .RequireHighlightJS}}

templates/base/head.tmpl

@@ -87,11 +87,6 @@
 	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/simplemde/simplemde.min.css">
 {{end}}
 
-{{if .RequireGitGraph}}
-	<!-- graph -->
-	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/gitgraph/gitgraph.css">
-{{end}}
-
 {{if .RequireTribute}}
 	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/tribute/tribute.css">
 {{end}}

templates/pwa/serviceworker_js.tmpl

@@ -6,9 +6,9 @@ var urlsToCache = [
   '{{StaticUrlPrefix}}/vendor/plugins/jquery-migrate/jquery-migrate.min.js?v=3.0.1',
   '{{StaticUrlPrefix}}/vendor/plugins/semantic/semantic.min.js',
   '{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}',
+  '{{StaticUrlPrefix}}/js/gitgraph.js?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/js/semantic.dropdown.custom.js?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/vendor/plugins/clipboard/clipboard.min.js',
-  '{{StaticUrlPrefix}}/vendor/plugins/gitgraph/gitgraph.js',
   '{{StaticUrlPrefix}}/vendor/plugins/vue/vue.min.js',
   '{{StaticUrlPrefix}}/vendor/plugins/emojify/emojify.custom.js',
   '{{StaticUrlPrefix}}/vendor/plugins/cssrelpreload/loadCSS.min.js',
@@ -25,7 +25,6 @@ var urlsToCache = [
   '{{StaticUrlPrefix}}/vendor/assets/font-awesome/css/font-awesome.min.css',
   '{{StaticUrlPrefix}}/vendor/assets/octicons/octicons.min.css',
   '{{StaticUrlPrefix}}/vendor/plugins/simplemde/simplemde.min.css',
-  '{{StaticUrlPrefix}}/vendor/plugins/gitgraph/gitgraph.css',
   '{{StaticUrlPrefix}}/vendor/plugins/tribute/tribute.css',
   '{{StaticUrlPrefix}}/vendor/plugins/semantic/semantic.min.css',
   '{{StaticUrlPrefix}}/css/index.css?v={{MD5 AppVer}}',

web_src/js/draw.js

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

web_src/js/gitGraph.js

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

web_src/js/index.js

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

web_src/js/publicPath.js

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

web_src/vendor/gitgraph.js/gitgraph.custom.css

@@ -1,6 +1,3 @@
-body {font:13.34px/1.4 helvetica,arial,freesans,clean,sans-serif;}
-em {font-style:normal;}
-
 #git-graph-container, #rel-container {float:left;}
 #rel-container {max-width:30%; overflow-x:auto;}
 #git-graph-container {overflow-x:auto; width:100%}
@@ -13,4 +10,4 @@ em {font-style:normal;}
 #git-graph-container li a em {color:#BB0000;border-bottom:1px dotted #BBBBBB;text-decoration:none;font-style:normal;}
 #rev-container {width:100%}
 #rev-list {margin:0;padding:0 5px 0 5px;min-width:95%}
-#graph-raw-list {margin:0px;}
+#graph-raw-list {margin:0px;}

webpack.config.js

@@ -4,17 +4,24 @@ const TerserPlugin = require('terser-webpack-plugin');
 module.exports = {
   mode: 'production',
   entry: {
-    index: ['./web_src/js/index', './web_src/js/draw']
+    index: ['./web_src/js/index']
   },
   devtool: 'source-map',
   output: {
     path: path.resolve(__dirname, 'public/js'),
-    filename: 'index.js'
+    filename: 'index.js',
+    chunkFilename: '[name].js',
   },
   optimization: {
     minimize: true,
     minimizer: [new TerserPlugin({
       sourceMap: true,
+      extractComments: false,
+      terserOptions: {
+        output: {
+          comments: false,
+        },
+      },
     })],
   },
   module: {
@@ -33,10 +40,22 @@ module.exports = {
                   corejs: 3,
                 }
               ]
-            ]
+            ],
+            plugins: [
+              [
+                '@babel/plugin-transform-runtime',
+                {
+                  regenerator: true,
+                }
+              ]
+            ],
           }
         }
-      }
+      },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
     ]
   }
 };