Fix recorder

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<void> {
-        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<void> {
+    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 });
+  }
 }

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<Step, {
-  type: MeasureModes,
-}>;*/
 export type MeasurementStep = {
-  type: MeasureModes;
-  stepOptions?: { name?: string; }
-  url?: string;
-}
+  [K in MeasureModes]: { type: K } & {
+    stepOptions: Parameters<LhUserFLow[K]>[0];
+  };
+}[MeasureModes];
 
 export type UserFlowRecordingStep = MeasurementStep | Step;
 
-export type UserFlowReportJson = Modify<UserFlow, {
-  steps: UserFlowRecordingStep[];
-}>;
+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 };

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;
 }