refactor(wpt): refactor wpt tools system changing reporter objective to functional functions

Author: Seolhun

README.md

@@ -34,8 +34,8 @@ Read lighthouse contents, [Here](https://developer.chrome.com/docs/lighthouse/ov
       "pathname": "/web-performance-tester"
     }
   }],                                       // Required                        
-  "timeout": 20000,                         // default : 20000
-  "concurrency": 1,                         // default : 1
+  "timeout": 30000,                         // default : 30000
+  "useReporter": true,                      // default : true
   "options": {
     "chromeFlags": ["--headless"],          // default : ["--headless"]  - ["--show-paint-rects", "--headless", "--disable-gpu"]
     "formFactor": "desktop",                // default : "mobile"       - desktop, mobile

examples/default/wpt.config.json

@@ -7,7 +7,8 @@
       "pathname": "/web-performance-tester"
     }
   ],
-  "timeout": 20000,
+  "timeout": 30000,
+  "useReporter": true,
   "options": {
     "chromeFlags": ["--headless"],
     "formFactor": "desktop",

src/wpt/Wpt.ts

@@ -4,31 +4,20 @@ import { launch } from 'chrome-launcher';
 import { pipe, concurrent, toAsync, toArray, map } from '@fxts/core';
 import EventEmitter from 'events';
 
-import { Reporter } from './tools';
-import { WptContext, WptConfig, WptAuditPath } from './context';
+import { WptContext, WptConfig } from './context';
 import * as constants from './constants';
-import { WptEventHandlersEventMap } from './Wpt.types';
-
-export interface WebPerformanceTesterProps {
-  reporter?: Reporter;
-}
-
-export interface WptAuditPathItem extends WptAuditPath {
-  url: string;
-}
+import { WptAuditPathItem, WptEventHandlersEventMap } from './Wpt.types';
+import { writeAuditsReportJsonFile, writeResultReportFile } from './tools';
 
 const context = WptContext();
 
 class WebPerformanceTester extends EventEmitter {
-  private reporter: Reporter;
-
-  constructor(props?: WebPerformanceTesterProps) {
+  constructor() {
     super();
-    this.reporter = props?.reporter ?? new Reporter();
-    this.typedEmit('onReadyWpt', { context });
+    this._emit('onReadyWpt', { context });
   }
 
-  private typedEmit(
+  private _emit(
     eventName: keyof WptEventHandlersEventMap,
     eventArgs: WptEventHandlersEventMap[keyof WptEventHandlersEventMap],
   ) {
@@ -39,10 +28,12 @@ class WebPerformanceTester extends EventEmitter {
     lighthouseResult: RunnerResult,
     auditPath: WptAuditPathItem,
   ) {
-    this.typedEmit('onReportStart', { auditPath, context });
-    this.reporter.saveAuditsReportFile(lighthouseResult.report, auditPath.name);
-    await this.reporter.createAuditsReport(lighthouseResult.lhr.audits);
-    this.typedEmit('onReportEnd', { auditPath, context });
+    if (context.config.useReporter) {
+      this._emit('onReportStart', { auditPath, context });
+      writeResultReportFile(lighthouseResult.report, auditPath.name);
+      writeAuditsReportJsonFile(lighthouseResult.lhr.audits, auditPath.name);
+      this._emit('onReportEnd', { auditPath, context });
+    }
   }
 
   private async runLighthouse(
@@ -55,22 +46,21 @@ class WebPerformanceTester extends EventEmitter {
       port: options.port + index,
     });
     try {
-      this.typedEmit('onStartedLighthouse', { auditPath, context });
+      this._emit('onStartedLighthouse', { auditPath, context });
+      const isDesktop = options.formFactor === 'desktop';
       const lighthouseResult: RunnerResult = await lighthouse(auditPath.url, {
         ...options,
-        screenEmulation:
-          options.formFactor === 'desktop' &&
-          constants.ScreenEmulationMetrics.desktop,
+        screenEmulation: isDesktop && constants.ScreenEmulationMetrics.desktop,
         maxWaitForLoad: context.config.timeout,
         port: options.port + index,
       });
       await this.createLighthouseReport(lighthouseResult, auditPath);
-      this.typedEmit('onFinishedLighthouse', { auditPath, context });
+      this._emit('onFinishedLighthouse', { auditPath, context });
     } catch (error) {
       if (error instanceof Error) {
-        this.typedEmit('onErrorLighthouse', { auditPath, context, error });
+        this._emit('onErrorLighthouse', { auditPath, context, error });
       } else {
-        this.typedEmit('onErrorLighthouse', { auditPath, context });
+        this._emit('onErrorLighthouse', { auditPath, context });
       }
     } finally {
       chrome.kill();
@@ -79,7 +69,7 @@ class WebPerformanceTester extends EventEmitter {
 
   async run() {
     try {
-      this.typedEmit('onStartedWpt', { context });
+      this._emit('onStartedWpt', { context });
       let index = 0;
       const { concurrency, options } = context.config;
       await pipe(
@@ -92,12 +82,12 @@ class WebPerformanceTester extends EventEmitter {
         concurrent(concurrency),
         (values) => toArray(values),
       );
-      this.typedEmit('onFinishedWpt', { context });
+      this._emit('onFinishedWpt', { context });
     } catch (error) {
       if (error instanceof Error) {
-        this.typedEmit('onErrorWpt', { context, error });
+        this._emit('onErrorWpt', { context, error });
       } else {
-        this.typedEmit('onErrorWpt', { context });
+        this._emit('onErrorWpt', { context });
       }
     }
   }

src/wpt/Wpt.types.ts

@@ -1,5 +1,4 @@
 import { WptContextValue } from './context';
-import { WptAuditPathItem } from './Wpt';
 
 export interface WptErrorEvent {
   error: Error;
@@ -28,3 +27,12 @@ export interface WptEventHandlersEventMap {
   onReportStart: WptReportEvent;
   onReportEnd: WptReportEvent;
 }
+
+export interface WptAuditPath {
+  name: string;
+  pathname: string;
+}
+
+export interface WptAuditPathItem extends WptAuditPath {
+  url: string;
+}

src/wpt/context/Wpt.Config.ts

@@ -1,14 +1,10 @@
 import fs from 'fs';
+import { WptAuditPath } from '../Wpt.types';
 import {
   WptLighthouseConfig,
   WptLighthouseConfigProps,
 } from './Wpt.LighthouseConfig';
 
-export interface WptAuditPath {
-  name: string;
-  pathname: string;
-}
-
 export interface WptConfigProps {
   name: string;
 
@@ -21,6 +17,12 @@ export interface WptConfigProps {
    */
   timeout?: number;
 
+  /**
+   * @default true
+   * Whether to use the default "Wpt" reporter system.
+   */
+  useReporter?: boolean;
+
   /**
    * @see https://github.com/GoogleChrome/lighthouse/issues/7187#issuecomment-569133443
    * @default 1
@@ -42,27 +44,29 @@ class WptConfig implements WptConfigProps {
   origin: string;
   auditPaths: WptAuditPath[];
   timeout: number;
+  useReporter: boolean;
   concurrency: number;
   options: WptLighthouseConfig;
 
   constructor() {
     const jsonConfigPath = `${process.cwd()}/wpt.config.json`;
     const configString = fs.readFileSync(jsonConfigPath, 'utf-8') ?? '{}';
     const config = JSON.parse(configString) as WptConfigProps;
+
     if (!config?.name) {
       throw new Error('name is required');
     }
     if (!config?.origin) {
       throw new Error('origin is required');
     }
-    if (!config?.auditPaths) {
+    if (!Array.isArray(config?.auditPaths) || config?.auditPaths.length === 0) {
       throw new Error('auditPaths are required');
     }
-
     this.name = config.name;
     this.origin = config.origin;
     this.auditPaths = config.auditPaths ?? [];
     this.timeout = config.timeout ?? 30000;
+    this.useReporter = config.useReporter ?? true;
     this.concurrency = config.concurrency ?? 1;
     this.options = new WptLighthouseConfig(config.options ?? {});
   }

src/wpt/context/Wpt.Context.ts

@@ -1,6 +1,6 @@
 import { pipe, map, toArray } from '@fxts/core';
 
-import { WptAuditPathItem } from '../Wpt';
+import { WptAuditPathItem } from '../Wpt.types';
 import { WptConfig } from './Wpt.Config';
 import { WptLighthouseConfig } from './Wpt.LighthouseConfig';
 

src/wpt/tools/reporter/Reporter.ts

@@ -1,2 +1,3 @@
 export * from './Reporter.types';
-export * from './Reporter';
+export * from './writeAuditsReportJsonFile';
+export * from './writeResultReportFile';

src/wpt/tools/reporter/index.ts

@@ -0,0 +1,25 @@
+import fs from 'fs';
+import path from 'path';
+import { pipe, filter, join } from '@fxts/core';
+
+import { WptContext } from '../../context';
+
+const context = WptContext();
+
+const rootDirectoryPath = path.resolve(
+  process.cwd(),
+  context.lighthouseConfig.outputPath,
+);
+
+export function makeReportDirectories(directoryName: string) {
+  const reportDirectoryPath = pipe(
+    [rootDirectoryPath, directoryName],
+    filter((value) => value),
+    join('/'),
+  );
+
+  if (!fs.existsSync(reportDirectoryPath)) {
+    fs.mkdirSync(reportDirectoryPath, { recursive: true });
+  }
+  return reportDirectoryPath;
+}

src/wpt/tools/reporter/makeReportDirectories.ts

@@ -0,0 +1,20 @@
+import fs from 'fs';
+import dayjs from 'dayjs';
+import { pipe, join } from '@fxts/core';
+
+import { makeReportDirectories } from './makeReportDirectories';
+import { WptLightAuditResult } from './Reporter.types';
+
+export function writeAuditsReportJsonFile(
+  lighthouseAudits: WptLightAuditResult,
+  directoryName = '',
+) {
+  const targetDirectoryPath = makeReportDirectories(directoryName);
+
+  const outputName = dayjs().format('YY-MM-DD_HH:mm');
+  const reportFile = `${outputName}_audits.json`;
+  const targetPath = pipe([targetDirectoryPath, reportFile], join('/'));
+
+  const data = JSON.stringify(lighthouseAudits, null, 2);
+  fs.writeFileSync(targetPath, data, 'utf-8');
+}