Skip to content

Commit 810bee2

Browse files
7h3Rabbit7h3Rabbit
authored
Merge pull request #22 from Webperf-se/tab
Add Webperf Core plugin tab
2 parents 0039e6e + 3d350c9 commit 810bee2

File tree

2 files changed

+174
-43
lines changed

2 files changed

+174
-43
lines changed

‎lib/index.js‎

Lines changed: 95 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
import { SitespeedioPlugin } from '@sitespeed.io/plugin';
2+
import { readFileSync } from 'node:fs';
3+
import path from 'node:path';
4+
import { fileURLToPath } from 'node:url';
5+
import fs from 'node:fs';
6+
const fsp = fs.promises;
7+
8+
const pluginname = 'plugin-webperf-core'
29

310
export default class WebPerfPlugin extends SitespeedioPlugin {
411
// Requires
@@ -10,23 +17,66 @@ export default class WebPerfPlugin extends SitespeedioPlugin {
1017
// node node_modules/sitespeed.io/bin/sitespeed.js --plugins.add ../../../webperf-sitespeedio-plugin/index.js -n 1 https://webperf.se/
1118
// node bin\sitespeed.js -n 1 --plugins.add ../../../plugin-pagenotfound/lib/index.js --plugins.add ../../../plugin-webperf-core/lib/index.js --browsertime.chrome.includeResponseBodies all https://webperf.se
1219
constructor(options, context, queue) {
13-
super({ name: 'plugin-webperf-core', options, context, queue });
20+
super({ name: pluginname, options, context, queue });
21+
22+
const libFolder = fileURLToPath(new URL('..', import.meta.url));
23+
this.pluginFolder = path.resolve(libFolder, '..');
24+
const packagePath = path.resolve(libFolder, 'package.json');
25+
this.package = JSON.parse(readFileSync(packagePath, 'utf8'));
26+
this.dependencies = this.package.dependencies;
27+
this.version = this.package.version;
1428
}
1529
// We only want to run one Lighthouse test at a time to make sure they
1630
// do not interfer with each other
1731
concurrency = 1;
1832

19-
async open() {
33+
async open(context, options) {
34+
this.make = context.messageMaker(pluginname).make;
2035
this.usingBrowsertime = false;
2136
this.urls = [];
2237
this.alias = {};
23-
this.data = {};
38+
this.data = {
39+
'version': this.version,
40+
'dependencies': this.dependencies,
41+
'groups': {}
42+
};
2443

2544
this.storageManager = super.getStorageManager();
45+
46+
const libFolder = fileURLToPath(new URL('..', import.meta.url));
47+
this.pluginFolder = path.resolve(libFolder);
48+
this.options = options;
49+
50+
this.pug = await fsp.readFile(
51+
path.resolve(this.pluginFolder, 'pug', 'index.pug'),
52+
'utf8'
53+
);
2654
}
27-
async processMessage(message) {
55+
async processMessage(message, queue) {
2856
// super.log(`processMessage type: ${message.type}`);
2957
switch (message.type) {
58+
case 'sitespeedio.setup': {
59+
// Let other plugins know that the pagenotfound plugin is alive
60+
// queue.postMessage(this.make(pluginname + '.setup'));
61+
// Add the HTML pugs
62+
queue.postMessage(
63+
this.make('html.pug', {
64+
id: pluginname,
65+
name: 'Webperf Core',
66+
pug: this.pug,
67+
type: 'pageSummary'
68+
})
69+
);
70+
queue.postMessage(
71+
this.make('html.pug', {
72+
id: pluginname,
73+
name: 'Webperf Core',
74+
pug: this.pug,
75+
type: 'run'
76+
})
77+
);
78+
break;
79+
}
3080
case 'browsertime.setup': {
3181
// We know we will use Browsertime so we wanna keep track of Browseertime summaries
3282
this.usingBrowsertime = true;
@@ -131,56 +181,58 @@ export default class WebPerfPlugin extends SitespeedioPlugin {
131181
this.appendIssuesToData(message.data.knowledgeData);
132182
break;
133183
}
184+
case 'sitespeedio.summarize': {
185+
186+
for (let group of Object.keys(this.data.groups)) {
187+
for (let url of Object.keys(this.data.groups[group].pages)) {
188+
const page = this.data.groups[group].pages[url];
189+
super.sendMessage(
190+
// The HTML plugin will pickup every message names *.pageSummary
191+
// and publish the data under pageInfo.data.*.pageSummary
192+
// in this case pageInfo.data.gpsi.pageSummary
193+
pluginname + '.pageSummary',
194+
page,
195+
{
196+
url,
197+
group
198+
}
199+
);
200+
}
201+
202+
super.sendMessage(pluginname + '.summary', this.data.groups[group], {
203+
group
204+
});
205+
}
206+
break;
207+
}
134208
}
135209
}
136210
async appendIssuesToData(knowledgeData) {
137211
for (const entry of knowledgeData) {
138212
const group = entry.group;
139213

140-
if (!this.data.hasOwnProperty(group)) {
141-
this.data[group] = {
142-
totalIssues: 0, // Initialize totalIssues
143-
nofIssuesWithCritical: 0,
144-
nofIssuesWithError: 0,
145-
nofIssuesWithWarning: 0,
146-
totalGroupedIssues: 0, // Initialize totalGroupedIssues
147-
allIssues: [],
148-
criticalIssues: [],
149-
errorIssues: [],
150-
warningIssues: [],
151-
groupedIssues: {} // Initialize groupedIssues
214+
if (!this.data.groups.hasOwnProperty(group)) {
215+
this.data.groups[group] = {
216+
issues: [],
217+
pages: {},
218+
totalIssues: 0
152219
};
153220
}
154221

155-
this.data[group].allIssues.push(...entry.issues);
156-
this.data[group].totalIssues = this.data[group].allIssues.length; // Update totalIssues
157222

158-
// Group issues by rule
159-
for (const issue of entry.issues) {
160-
const rule = issue.rule;
161-
if (!this.data[group].groupedIssues.hasOwnProperty(rule)) {
162-
this.data[group].groupedIssues[rule] = [];
163-
}
164-
this.data[group].groupedIssues[rule].push(issue);
165-
switch (issue.severity) {
166-
case 'critical':
167-
this.data[group].criticalIssues.push(issue);
168-
break;
169-
case 'error':
170-
this.data[group].errorIssues.push(issue);
171-
break;
172-
case 'warning':
173-
this.data[group].warningIssues.push(issue);
174-
break;
175-
}
176-
}
177-
178-
// Update totalGroupedIssues
179-
this.data[group].totalGroupedIssues = Object.keys(this.data[group].groupedIssues).length;
223+
let issues = Object.values(entry.issues);
224+
this.data.groups[group].issues.push(...issues);
225+
this.data.groups[group].totalIssues = this.data.groups[group].issues.length; // Update totalIssues
180226

181-
this.data[group].nofIssuesWithCritical = this.data[group].criticalIssues.length;
182-
this.data[group].nofIssuesWithError = this.data[group].errorIssues.length;
183-
this.data[group].nofIssuesWithWarning = this.data[group].warningIssues.length;
227+
if (!this.data.groups[group].pages.hasOwnProperty(entry.url)) {
228+
this.data.groups[group].pages[entry.url] = {
229+
'version': this.version,
230+
'dependencies': this.dependencies,
231+
url: entry.url,
232+
issues: []
233+
};
234+
}
235+
this.data.groups[group].pages[entry.url].issues.push(...issues);
184236
}
185237

186238
await this.storageManager.writeData(

‎pug/index.pug‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
- let pluginData = pageInfo.data['plugin-webperf-core'].run ? pageInfo.data['plugin-webperf-core'].run : pageInfo.data['plugin-webperf-core'].pageSummary
2+
3+
h2 Webperf Core
4+
p This plugin is to combine many plugins into one place and give you hint on what gives you the best improvements, one small improvement at a time.
5+
br
6+
span Using plugin-webperf-core v#{pluginData.version}
7+
span with dependencies:
8+
each version, name in pluginData.dependencies
9+
span #{name} v#{version},
10+
11+
if pluginData.issues && Object.keys(pluginData.issues).length > 0
12+
- const severityOrder = { critical: 4, error: 3, warning: 2, info: 1, resolved: 0 };
13+
- let sortedIssues = pluginData.issues.sort((a, b) => {
14+
- if (severityOrder[b.severity] !== severityOrder[a.severity]) {
15+
- return severityOrder[b.severity] - severityOrder[a.severity];
16+
- }
17+
- return b.subIssues.length - a.subIssues.length;
18+
- });
19+
20+
h3 Issues
21+
table
22+
thead
23+
tr
24+
th Rule
25+
th Category
26+
th Sub Issue Count
27+
th Severity
28+
tbody
29+
each value in sortedIssues
30+
tr
31+
td
32+
a(href=`#rule-${value.rule}`)= value.rule
33+
td= value.category
34+
td= value.subIssues.length
35+
td
36+
if value.severity === 'resolved'
37+
span.label.ok Resolved
38+
else if value.severity === 'warning'
39+
span.label.warning Warning
40+
else if value.severity === 'error'
41+
span.label.error Error
42+
else if value.severity === 'info'
43+
span.label.info Info
44+
else
45+
= value.severity
46+
47+
// Add tables for each rule
48+
each value in sortedIssues
49+
h4(id=`rule-${value.rule}`)= `${value.rule}`
50+
p
51+
strong Category:
52+
= value.category
53+
br
54+
strong Severity:
55+
= value.severity
56+
57+
- if (value.subIssues.length > 100)
58+
p Note: Only the first 100 issues are displayed.
59+
table
60+
thead
61+
tr
62+
th URL
63+
th Text
64+
th Line
65+
th Column
66+
tbody
67+
- let limitedIssues = value.subIssues.slice(0, 100);
68+
each issue in limitedIssues
69+
tr
70+
td= issue.url
71+
td= issue.text
72+
td= issue.line
73+
td= issue.column
74+
else
75+
p No issues found.
76+
77+
//- h2 Debug: Plugin Data
78+
//- pre
79+
//- code= JSON.stringify(pluginData, null, 3)

0 commit comments

Comments
 (0)