Merge pull request #16 from Webperf-se/pug

Added plugin tab in sitespeed.io HTML results

Author: 7h3Rabbit

lib/index.js

@@ -1,5 +1,9 @@
 import { SitespeedioPlugin } from '@sitespeed.io/plugin';
 import { HarAnalyzer } from './harAnalyzer.js';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import fs from 'node:fs';
+const fsp = fs.promises;
 
 // https://www.sitespeed.io/documentation/sitespeed.io/plugins/#create-your-own-plugin
 // node bin\sitespeed.js -n 1 --plugins.add analysisstorer --plugins.add ../../../plugin-css/lib/index.js --browsertime.chrome.includeResponseBodies all https://webperf.se
@@ -11,17 +15,38 @@ export default class CssPlugin extends SitespeedioPlugin {
     super({ name: pluginname, options, context, queue });
   }
 
-  open(context, options) {
+  async open(context, options) {
     this.make = context.messageMaker(pluginname).make;
     this.harAnalyzer = new HarAnalyzer();
+    const libFolder = fileURLToPath(new URL('..', import.meta.url));
+    this.pluginFolder = path.resolve(libFolder);
+
+    this.pug = await fsp.readFile(
+      path.resolve(this.pluginFolder, 'pug', 'index.pug'),
+      'utf8'
+    );
   }
 
   async processMessage(message, queue) {
     // const filterRegistry = this.filterRegistry;
     switch (message.type) {
       case 'sitespeedio.setup': {
-        // Let other plugins know that the pagenotfound plugin is alive
-        super.sendMessage('browsertime.setup');
+        queue.postMessage(
+          this.make('html.pug', {
+            id: pluginname,
+            name: 'CSS',
+            pug: this.pug,
+            type: 'pageSummary'
+          })
+        );
+        queue.postMessage(
+          this.make('html.pug', {
+            id: pluginname,
+            name: 'CSS',
+            pug: this.pug,
+            type: 'run'
+          })
+        );
         break;
       }
       case 'browsertime.har': {

pug/index.pug

@@ -0,0 +1,31 @@
+
+- let pluginData = pageInfo.data['webperf-plugin-css'].run ? pageInfo.data['webperf-plugin-css'].run : pageInfo.data['webperf-plugin-css'].pageSummary
+
+h1 Issues
+if pluginData.knowledgeData && pluginData.knowledgeData.issues && pluginData.knowledgeData.issues.length > 0
+    table
+        thead
+            tr
+                th URL
+                th Rule
+                th Category
+                th Severity
+                th Text
+                th Line
+                th Column
+        tbody
+            each issue in pluginData.knowledgeData.issues
+                tr
+                    td= issue.url
+                    td= issue.rule
+                    td= issue.category
+                    td= issue.severity
+                    td= issue.text
+                    td= issue.line
+                    td= issue.column
+else
+    p No issues found.
+
+h2 Debug: Plugin Data
+pre
+    code= JSON.stringify(pluginData, null, 3)