add base dom html

GoogleChrome · Mar 25, 2017 · a69b508 · a69b508
1 parent a8b69a9
commit a69b508
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 1 deletion.
diff --git a/lighthouse-cli/printer.ts b/lighthouse-cli/printer.ts
@@ -29,6 +29,7 @@ import {Results} from './types/types';
 
 const fs = require('fs');
 const ReportGenerator = require('../lighthouse-core/report/report-generator');
+const ReportGeneratorV2 = require('../lighthouse-core/report/v2/report-generator');
 const log = require('../lighthouse-core/lib/log');
 
 
@@ -56,7 +57,7 @@ function createOutput(results: Results, outputMode: OutputMode): string {
   }
 
   if (outputMode === OutputMode.htmlv2) {
-    return reportGenerator.generateHTML(results, 'cli', undefined, true);
+    return new ReportGeneratorV2().generateReportHtml(results);
   }
 
   // JSON report.

diff --git a/lighthouse-core/report/v2/report-generator.js b/lighthouse-core/report/v2/report-generator.js
@@ -16,6 +16,13 @@
  */
 'use strict';
 
+const fs = require('fs');
+const path = require('path');
+
+const REPORT_TEMPLATE = fs.readFileSync(path.join(__dirname, './report-template.html'), 'utf8');
+// TODO: Setup a gulp pipeline to concat and minify the renderer files?
+const REPORT_JAVASCRIPT = fs.readFileSync(path.join(__dirname, './report-renderer.js'), 'utf8');
+
 class ReportGeneratorV2 {
   /**
    * Computes the weighted-average of the score of the list of items.
@@ -62,6 +69,15 @@ class ReportGeneratorV2 {
 
     return {categories};
   }
+
+  /**
+   * @param {!Object} reportAsJson
+   */
+  generateReportHtml(reportAsJson) {
+    return REPORT_TEMPLATE
+      .replace(/%%LIGHTHOUSE_JSON%%/, JSON.stringify(reportAsJson))
+      .replace(/%%LIGHTHOUSE_JAVASCRIPT%%/, REPORT_JAVASCRIPT);
+  }
 }
 
 module.exports = ReportGeneratorV2;
diff --git a/lighthouse-core/report/v2/report-renderer.js b/lighthouse-core/report/v2/report-renderer.js
@@ -0,0 +1,20 @@
+class ReportRenderer {
+  /**
+   * @param {!Object} report
+   */
+  constructor(report) {
+    this._report = report;
+  }
+
+  /**
+   * @param {!Element} element
+   */
+  render(element) {
+    const pre = document.createElement('pre');
+    pre.innerText = JSON.stringify(this._report, null, 2);
+    element.appendChild(pre);
+  }
+}
+
+const renderer = new ReportRenderer(window.__LIGHTHOUSE_JSON__);
+renderer.render(document.body);
diff --git a/lighthouse-core/report/v2/report-template.html b/lighthouse-core/report/v2/report-template.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
+  <title>Lighthouse Report</title>
+</head>
+<body>
+  <noscript>Lighthouse report requires JavaScript. Please enable.</noscript>
+  <script>window.__LIGHTHOUSE_JSON__ = %%LIGHTHOUSE_JSON%%</script>
+  <script>%%LIGHTHOUSE_JAVASCRIPT%%</script>
+</body>
+</html>