web: convert mdi-icons script to module

Before (as of e3be77688), I was essentially relying on a hack to
"export" the icons data when dynamically importing mdi-svg.min.js.
Specifically, I was assigning to "window.icons" to make it globally
accessible.

While this works in Chrome, it does not in Safari, so we should do
things the proper way - by explicitly exporting from the module.

concourse/concourse#5131

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>

hack/update-mdi-svg

@@ -1,6 +1,6 @@
 #!/bin/bash
 
-echo "window.icons = (function () {var icon_paths = {";
+echo "export const svg = (function () {var icon_paths = {";
 
 for file in $1/*.svg;
 do
@@ -11,4 +11,4 @@ echo '"no-icon":""};';
 echo "var svg = function(icon, id) {";
 echo "var path = icon_paths[icon];if (typeof path === 'undefined') {path = icon_paths['help-circle-outline'];};";
 echo "return '<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"' + id + '\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"' + path + '\" /></svg>';};";
-echo "return {svg: svg}})();";
+echo "return svg;})();";

package.json

@@ -30,7 +30,7 @@
     "build-less": "lessc web/assets/css/main.less web/public/main.out.css && cleancss -o web/public/main.css web/public/main.out.css && rm web/public/main.out.css",
     "build-elm": "cd web/elm && elm make --optimize --output ../public/elm.js src/Main.elm && uglifyjs ../public/elm.js --compress 'pure_funcs=[F2,F3,F4,F5,F6,F7,F8,F9,A2,A3,A4,A5,A6,A7,A8,A9],pure_getters,keep_fargs=false,unsafe_comps,unsafe' | uglifyjs --mangle --output=../public/elm.min.js",
     "build-elm-debug": "cd web/elm && elm make --debug --output ../public/elm.js src/Main.elm && uglifyjs < ../public/elm.js > ../public/elm.min.js",
-    "update-mdi-svg": "./hack/update-mdi-svg \"node_modules/@mdi/svg/svg\" > web/public/mdi-svg.js && uglifyjs < web/public/mdi-svg.js > web/public/mdi-svg.min.js",
+    "update-mdi-svg": "./hack/update-mdi-svg \"node_modules/@mdi/svg/svg\" | tr -d '\n' > web/public/mdi-svg.min.js",
     "benchmark": "cd web/elm && elm make --optimize --output /tmp/benchmark.html benchmarks/Benchmarks.elm && node benchmarks/benchmark.js /tmp/benchmark.html"
   }
 }

web/public/index.mjs

@@ -1,7 +1,7 @@
 import "./d3.v355.min.js";
 import { Graph, GraphNode } from './graph.mjs';
 
-const loadIcons = import("./mdi-svg.min.js");
+const iconsModulePromise = import("./mdi-svg.min.js");
 
 export function renderPipeline(jobs, resources, newUrl){
   const foundSvg = d3.select(".pipeline-graph");
@@ -540,7 +540,7 @@ function createGraph(svg, jobs, resources) {
 }
 
 function addIcon(iconName, nodeId) {
-  loadIcons.then(() => {
+  iconsModulePromise.then(icons => {
     var id = nodeId + "-svg-icon";
     if (document.getElementById(id) === null) {
       var svg = icons.svg(iconName, id);