diff --git a/packages/cli/src/lib/commands/collect/utils/replay/runner-extension.ts b/packages/cli/src/lib/commands/collect/utils/replay/runner-extension.ts index d62bc445..5a8db607 100644 --- a/packages/cli/src/lib/commands/collect/utils/replay/runner-extension.ts +++ b/packages/cli/src/lib/commands/collect/utils/replay/runner-extension.ts @@ -1,32 +1,34 @@ -import {PuppeteerRunnerExtension, Step, UserFlow as UserFlowRecording} from "@puppeteer/replay"; -import {Browser, Page} from "puppeteer"; +import { + PuppeteerRunnerExtension, + Step, + UserFlow as UserFlowRecording, +} from '@puppeteer/replay'; +import { Browser, Page } from 'puppeteer'; import { MeasurementStep, UserFlowRecordingStep } from './types.js'; -import {isMeasureType} from "./utils.js"; -// @ts-ignore -import {UserFlow} from 'lighthouse'; +import { isMeasureType } from './utils.js'; +import { UserFlow } from 'lighthouse'; export class UserFlowRunnerExtension extends PuppeteerRunnerExtension { + constructor( + browser: Browser, + page: Page, + private flow: UserFlow, + opts?: { + timeout?: number; + }, + ) { + super(browser, page, opts); + } - constructor(browser: Browser, page: Page, private flow: UserFlow, opts?: { - timeout?: number; - }) { - super(browser, page, opts); - } - - override async runStep(step: UserFlowRecordingStep, flowRecording: UserFlowRecording): Promise { - if (isMeasureType(step.type) && !this.flow?.currentTimespan) { - const userFlowStep = step as MeasurementStep; - const stepOptions = userFlowStep?.stepOptions; - if (userFlowStep.type === 'navigate') { - // TODO fix (Changes to Flow API) - // @ts-ignore - return this.flow[userFlowStep.type](userFlowStep?.url, {...stepOptions}); - } - // TODO fix (Changes to Flow API) - // @ts-ignore - return this.flow[userFlowStep.type]({...stepOptions}); - } else { - return super.runStep(step as Step, flowRecording); - } + override async runStep( + step: UserFlowRecordingStep, + flowRecording: UserFlowRecording, + ): Promise { + if (!isMeasureType(step.type)) { + return super.runStep(step as Step, flowRecording); } + const userFlowStep = step as MeasurementStep; + const stepOptions = userFlowStep?.stepOptions; + return this.flow[userFlowStep.type]({ ...stepOptions }); + } } diff --git a/packages/cli/src/lib/commands/collect/utils/replay/types.ts b/packages/cli/src/lib/commands/collect/utils/replay/types.ts index 499b85e7..013106bf 100644 --- a/packages/cli/src/lib/commands/collect/utils/replay/types.ts +++ b/packages/cli/src/lib/commands/collect/utils/replay/types.ts @@ -1,27 +1,31 @@ import { UserFlow, Step } from '@puppeteer/replay'; +import { UserFlow as LhUserFLow } from 'lighthouse'; import { Modify } from '../../../../core/types.js'; -/** - * 'navigation' is already covered by `@puppeteer/replay` - */ -export type MeasureModes = 'navigate' |'snapshot' | 'startTimespan' | 'endTimespan'; +export const MEASURE_MODES = [ + 'startNavigation', + 'endNavigation', + 'snapshot', + 'startTimespan', + 'endTimespan', +] as const; + +export type MeasureModes = (typeof MEASURE_MODES)[number]; -/* -// Consider modify the Step type - | Modify;*/ export type MeasurementStep = { - type: MeasureModes; - stepOptions?: { name?: string; } - url?: string; -} + [K in MeasureModes]: { type: K } & { + stepOptions: Parameters[0]; + }; +}[MeasureModes]; export type UserFlowRecordingStep = MeasurementStep | Step; -export type UserFlowReportJson = Modify; +export type UserFlowReportJson = Modify< + UserFlow, + { + steps: UserFlowRecordingStep[]; + } +>; -export type ReadFileExtTypes = { json: {}, html: string, text: string }; -export type ReadFileConfig = { fail?: boolean, ext?: keyof ReadFileExtTypes}; +export type ReadFileExtTypes = { json: {}; html: string; text: string }; +export type ReadFileConfig = { fail?: boolean; ext?: keyof ReadFileExtTypes }; diff --git a/packages/cli/src/lib/commands/collect/utils/replay/utils.ts b/packages/cli/src/lib/commands/collect/utils/replay/utils.ts index 7264005f..08d97df8 100644 --- a/packages/cli/src/lib/commands/collect/utils/replay/utils.ts +++ b/packages/cli/src/lib/commands/collect/utils/replay/utils.ts @@ -2,29 +2,33 @@ import { CustomStep, Step, StepType } from '@puppeteer/replay'; import { MeasureModes, UserFlowRecordingStep } from './types.js'; export function isMeasureType(str: string) { - switch (str as MeasureModes) { - case 'navigate': - case 'snapshot': - case 'startTimespan': - case 'endTimespan': - return true; - default: - return false; - } + switch (str as MeasureModes) { + case 'startNavigation': + case 'endNavigation': + case 'snapshot': + case 'startTimespan': + case 'endTimespan': + return true; + default: + return false; + } } -export function stringify(enrichedRecordingJson: { title: string, steps: UserFlowRecordingStep[] }): string { +export function stringify(enrichedRecordingJson: { + title: string; + steps: UserFlowRecordingStep[]; +}): string { const { title, steps } = enrichedRecordingJson; const standardizedJson = { title, - steps: (steps).map( - (step) => { - if (isMeasureType(step.type)) { - return userFlowStepToCustomStep(step as unknown as UserFlowRecordingStep); - } - return step; + steps: steps.map((step) => { + if (isMeasureType(step.type)) { + return userFlowStepToCustomStep( + step as unknown as UserFlowRecordingStep, + ); } - ) + return step; + }), }; return JSON.stringify(standardizedJson); } @@ -34,7 +38,7 @@ function userFlowStepToCustomStep(step: UserFlowRecordingStep): Step { const stdStp: CustomStep = { type: StepType.CustomStep, name, - parameters + parameters, }; return stdStp; }