Replace vulcanize process with loose files

It's a lot easier to debug, but may have reduced startup performance.
Closes #682.

scripts/archive.js

@@ -140,18 +140,9 @@ function createAppArchive(rootPath, releasePath, tempPath, destPath) {
   });
 
   // UI files.
-  fs.mkdirsSync(path.join(tempPath, 'resources', 'ui', 'css'));
   fs.copySync(
-    path.join(releasePath, 'resources', 'ui', 'index.html'),
-    path.join(tempPath, 'resources', 'ui', 'index.html')
-  );
-  fs.copySync(
-    path.join(rootPath, 'resources', 'ui', 'css', 'dark-theme.css'),
-    path.join(tempPath, 'resources', 'ui', 'css', 'dark-theme.css')
-  );
-  fs.copySync(
-    path.join(rootPath, 'resources', 'ui', 'fonts'),
-    path.join(tempPath, 'resources', 'ui', 'fonts')
+    path.join(releasePath, 'resources', 'ui'),
+    path.join(tempPath, 'resources', 'ui')
   );
 
   // Documentation.

scripts/build_ui.js

@@ -0,0 +1,104 @@
+'use strict';
+const helpers = require('./helpers');
+const hyd = require('hydrolysis');
+const fs = require('fs-extra');
+const path = require('path');
+
+function getHtmlImports(filePath) {
+  return hyd.Analyzer.analyze(filePath).then((analyzer) =>
+    analyzer._getDependencies(filePath)
+  );
+}
+
+function isString(variable) {
+  return typeof variable === 'string' || variable instanceof String;
+}
+
+function flattenUnique(array) {
+  const results = new Set();
+  array.forEach((element) => {
+    if (isString(element)) {
+      results.add(element);
+    } else if (element) {
+      flattenUnique(element).forEach((subelement) => {
+        results.add(subelement);
+      });
+    }
+  });
+  return results;
+}
+
+function getRecursiveHtmlImports(filePath, imports) {
+  return getHtmlImports(filePath).then((paths) =>
+    Promise.all(paths.map((dependency) => {
+      if (imports.has(dependency)) {
+        return null;
+      }
+      imports.add(dependency);
+      return getRecursiveHtmlImports(dependency, imports);
+    }))
+  ).then((results) => {
+    flattenUnique(results).forEach((dependency) => {
+      imports.add(dependency);
+    });
+
+    return imports;
+  });
+}
+
+function getJavaScriptSources(filePath) {
+  return hyd.Analyzer.analyze(filePath).then((analyzer) =>
+    Object.keys(analyzer.parsedScripts).filter((script) =>
+      script.endsWith('.js')
+    )
+  );
+}
+
+function getRelativePath(filePath) {
+  if (filePath.startsWith('src/gui/html/')) {
+    return filePath.substring(13);
+  }
+  return filePath;
+}
+
+function normalisePaths(html) {
+  return html.replace(/href="(\.\.\/){3}/g, 'href="')
+    .replace(/src="(\.\.\/){3}/g, 'src="');
+}
+
+function copyNormalisedFile(sourceFile, destinationFile) {
+  const html = fs.readFileSync(sourceFile, { encoding: 'utf8' });
+  fs.mkdirs(path.dirname(destinationFile));
+  fs.writeFileSync(destinationFile, normalisePaths(html));
+}
+
+function copyFiles(pathsPromise, destinationRootPath) {
+  pathsPromise.then((paths) => {
+    paths.forEach((filePath) => {
+      const destinationPath = `${destinationRootPath}/${getRelativePath(filePath)}`;
+      if (filePath.includes('bower_components')) {
+        fs.copySync(filePath, destinationPath);
+      } else {
+        copyNormalisedFile(filePath, destinationPath);
+      }
+    });
+  });
+}
+
+helpers.getAppReleasePaths('.').forEach(releasePath => {
+  const index = 'src/gui/html/index.html';
+  const destinationRootPath = `${releasePath.path}/resources/ui`;
+  const imports = new Set();
+
+  copyFiles(getRecursiveHtmlImports(index, imports), destinationRootPath);
+  copyFiles(getJavaScriptSources(index), destinationRootPath);
+  fs.copySync('src/gui/html/css', `${destinationRootPath}/css`);
+  fs.copySync('resources/ui/css/dark-theme.css', `${destinationRootPath}/css/dark-theme.css`);
+  fs.copySync('resources/ui/fonts', `${destinationRootPath}/fonts`);
+  copyNormalisedFile(index, `${destinationRootPath}/index.html`);
+
+  // This is the only JS file referenced by a HTML import (neon-animation),
+  // so just hardcode it instead of recursively searching for it.
+  const webAnimationsJs = 'bower_components/web-animations-js/web-animations-next-lite.min.js';
+  fs.copySync(webAnimationsJs, `${destinationRootPath}/${webAnimationsJs}`);
+});

scripts/installer.iss

@@ -105,12 +105,8 @@ DestDir: "{app}\resources\l10n"; Flags: ignoreversion
 Source: "{#buildir}\docs\html\*"; \
 DestDir: "{app}\docs"; Flags: ignoreversion recursesubdirs
 
-Source: "{#buildir}\Release\resources\ui\index.html"; \
-DestDir: "{app}\resources\ui"; Flags: ignoreversion
-Source: "resources\ui\css\dark-theme.css"; \
-DestDir: "{app}\resources\ui\css"; Flags: ignoreversion
-Source: "resources\ui\fonts\*"; \
-DestDir: "{app}\resources\ui\fonts"; Flags: ignoreversion
+Source: "{#buildir}\Release\resources\ui\*"; \
+DestDir: "{app}\resources\ui"; Flags: ignoreversion recursesubdirs
 
 Source: "resources\l10n\da\LC_MESSAGES\loot.mo"; \
 DestDir: "{app}\resources\l10n\da\LC_MESSAGES"; Flags: ignoreversion

scripts/vulcanize.js

@@ -1,92 +0,0 @@
-#!/usr/bin/env node
-// Build the UI's index.html file. Takes one argument, which is the path to the
-// repository's root.
-
-/* eslint-disable no-unused-vars */
-'use strict';
-const path = require('path');
-const fs = require('fs');
-const helpers = require('./helpers');
-const Vulcanize = require('vulcanize');
-const mkdirp = require('mkdirp');
-
-// Initialise from command line parameters.
-let rootPath = '.';
-let buildType = 'ui';
-if (process.argv.length > 3) {
-  rootPath = process.argv[2];
-  buildType = process.argv[3];
-} else if (process.argv.length > 2) {
-  rootPath = process.argv[2];
-}
-
-const vulcanize = new Vulcanize({
-  inlineScripts: true,
-  inlineCss: true,
-  excludes: [
-    'css/theme.css',
-  ],
-});
-
-function mkdir(dir) {
-  try {
-    mkdirp.sync(dir);
-  } catch (e) {
-    if (e.code !== 'EEXIST') {
-      console.log(e);
-    }
-  }
-}
-
-function vulcanizeFile(inputPath, outputPath) {
-  // Make sure output directory exists first.
-  mkdir(path.dirname(outputPath));
-
-  vulcanize.process(inputPath, (err, inlinedHtml) => {
-    if (err) {
-      console.error(err);
-      process.exit(1);
-    }
-
-    fs.writeFileSync(outputPath, inlinedHtml);
-  });
-}
-
-function vulcanizeRelease(releasePath) {
-  const inputPath = path.join(rootPath, 'src', 'gui', 'html', 'index.html');
-  const outputPath = path.join(releasePath.path, 'resources', 'ui', 'index.html');
-
-  vulcanizeFile(inputPath, outputPath);
-}
-
-function vulcanizeTests(releasePath) {
-  const inputPath = path.join(rootPath, 'src', 'tests', 'gui', 'html', 'elements');
-  const outputPath = path.join(releasePath.path, 'html_tests', 'elements');
-
-  const tests = [
-    'test_editable-table.html',
-    'test_loot-custom-icons.html',
-    'test_loot-dropdown-menu.html',
-    'test_loot-menu.html',
-    'test_loot-message-dialog.html',
-    'test_loot-plugin-card.html',
-    'test_loot-plugin-editor.html',
-    'test_loot-plugin-item.html',
-    'test_loot-search-toolbar.html',
-  ];
-
-  tests.forEach((test) => {
-    vulcanizeFile(path.join(inputPath, test), path.join(outputPath, test));
-  });
-}
-
-// Run the appropriate build(s).
-const releasePaths = helpers.getAppReleasePaths(rootPath);
-
-if (buildType === 'ui' || buildType === 'all') {
-  releasePaths.forEach(vulcanizeRelease);
-}
-
-if (buildType === 'tests' || buildType === 'all') {
-  releasePaths.forEach(vulcanizeTests);
-}