move codegen to isomorphic, generate code on the client side

Author: dgozman

packages/playwright-core/src/client/DEPS.list

@@ -1,3 +1,4 @@
 [*]
 ../protocol/
 ../utils/isomorphic
+../utils/isomorphic/codegen

packages/playwright-core/src/client/browserContext.ts

@@ -40,6 +40,7 @@ import { headersObjectToArray } from '../utils/isomorphic/headers';
 import { urlMatchesEqual } from '../utils/isomorphic/urlMatch';
 import { isRegExp, isString } from '../utils/isomorphic/rtti';
 import { rewriteErrorMessage } from '../utils/isomorphic/stackTrace';
+import { generateCode, languageSet } from '../utils/isomorphic/codegen/codegen';
 
 import type { BrowserContextOptions, Headers, SetStorageState, StorageState, WaitForEventOptions } from './types';
 import type * as structs from '../../types/structs';
@@ -78,7 +79,6 @@ export class BrowserContext extends ChannelOwner<channels.BrowserContextChannel>
   _closingStatus: 'none' | 'closing' | 'closed' = 'none';
   private _closeReason: string | undefined;
   private _harRouters: HarRouter[] = [];
-  private _onRecorderEventSink: RecorderEventSink | undefined;
 
   static from(context: channels.BrowserContextChannel): BrowserContext {
     return (context as any)._object;
@@ -148,14 +148,6 @@ export class BrowserContext extends ChannelOwner<channels.BrowserContextChannel>
     this._channel.on('requestFailed', ({ request, failureText, responseEndTiming, page }) => this._onRequestFailed(network.Request.from(request), responseEndTiming, failureText, Page.fromNullable(page)));
     this._channel.on('requestFinished', params => this._onRequestFinished(params));
     this._channel.on('response', ({ response, page }) => this._onResponse(network.Response.from(response), Page.fromNullable(page)));
-    this._channel.on('recorderEvent', ({ event, data, page, code }) => {
-      if (event === 'actionAdded')
-        this._onRecorderEventSink?.actionAdded?.(Page.from(page), data as actions.ActionInContext, code);
-      else if (event === 'actionUpdated')
-        this._onRecorderEventSink?.actionUpdated?.(Page.from(page), data as actions.ActionInContext, code);
-      else if (event === 'signalAdded')
-        this._onRecorderEventSink?.signalAdded?.(Page.from(page), data as actions.SignalInContext);
-    });
     this._closedPromise = new Promise(f => this.once(Events.BrowserContext.Close, f));
 
     this._setEventToSubscriptionMapping(new Map<string, channels.BrowserContextUpdateSubscriptionParams['event']>([
@@ -520,13 +512,35 @@ export class BrowserContext extends ChannelOwner<channels.BrowserContextChannel>
   }
 
   async _enableRecorder(params: channels.BrowserContextEnableRecorderParams, eventSink?: RecorderEventSink) {
-    if (eventSink)
-      this._onRecorderEventSink = eventSink;
+    if (eventSink) {
+      const languages = [...languageSet()];
+      const languageGeneratorOptions = {
+        browserName: this._browser?._name ?? 'chromium',
+        launchOptions: { headless: false, ...params.launchOptions, tracesDir: undefined },
+        contextOptions: { ...params.contextOptions },
+        deviceName: params.device,
+        saveStorage: params.saveStorage,
+      };
+      const languageGenerator = languages.find(l => l.id === params.language) ?? languages.find(l => l.id === 'playwright-test')!;
+
+      this._channel.on('recorderEvent', ({ event, data, page }) => {
+        if (event === 'actionAdded') {
+          const action = data as actions.ActionInContext;
+          const { actionTexts } = generateCode([action], languageGenerator, languageGeneratorOptions);
+          eventSink.actionAdded?.(Page.from(page), action, actionTexts.join('\n'));
+        } else if (event === 'actionUpdated') {
+          const action = data as actions.ActionInContext;
+          const { actionTexts } = generateCode([action], languageGenerator, languageGeneratorOptions);
+          eventSink.actionUpdated?.(Page.from(page), action, actionTexts.join('\n'));
+        } else if (event === 'signalAdded') {
+          eventSink.signalAdded?.(Page.from(page), data as actions.SignalInContext);
+        }
+      });
+    }
     await this._channel.enableRecorder(params);
   }
 
   async _disableRecorder() {
-    this._onRecorderEventSink = undefined;
     await this._channel.disableRecorder();
   }
 }

packages/playwright-core/src/protocol/validator.ts

@@ -968,7 +968,6 @@ scheme.BrowserContextRecorderEventEvent = tObject({
   event: tEnum(['actionAdded', 'actionUpdated', 'signalAdded']),
   data: tAny,
   page: tChannel(['Page']),
-  code: tString,
 });
 scheme.BrowserContextAddCookiesParams = tObject({
   cookies: tArray(tType('SetNetworkCookie')),

packages/playwright-core/src/server/DEPS.list

@@ -3,6 +3,7 @@
 ../protocol/
 ../utils
 ../utils/isomorphic/
+../utils/isomorphic/codegen
 ../utilsBundle.ts
 ../zipBundle.ts
 ./

packages/playwright-core/src/server/browserContext.ts

@@ -64,7 +64,6 @@ export abstract class BrowserContext extends SdkObject {
     RequestContinued: 'requestcontinued',
     BeforeClose: 'beforeclose',
     VideoStarted: 'videostarted',
-    RecorderEvent: 'recorderevent',
   };
 
   readonly _pageBindings = new Map<string, PageBinding>();

packages/playwright-core/src/server/codegen/DEPS.list

@@ -21,8 +21,8 @@ import { asLocator  } from '../utils';
 import { parseAriaSnapshotUnsafe } from '../utils/isomorphic/ariaSnapshot';
 import { yaml } from '../utilsBundle';
 import { unsafeLocatorOrSelectorAsSelector } from '../utils/isomorphic/locatorParser';
-import { generateCode } from './codegen/language';
-import { JavaScriptLanguageGenerator } from './codegen/javascript';
+import { generateCode } from '../utils/isomorphic/codegen/codegen';
+import { JavaScriptLanguageGenerator } from '../utils/isomorphic/codegen/javascript';
 
 import type { Language } from '../utils';
 import type { BrowserContext } from './browserContext';

packages/playwright-core/src/server/codegen/languages.ts

@@ -34,8 +34,9 @@ import { WebSocketRouteDispatcher } from './webSocketRouteDispatcher';
 import { WritableStreamDispatcher } from './writableStreamDispatcher';
 import { createGuid } from '../utils/crypto';
 import { urlMatches } from '../../utils/isomorphic/urlMatch';
-import { Recorder } from '../recorder';
+import { Recorder, RecorderEvent } from '../recorder';
 import { RecorderApp } from '../recorder/recorderApp';
+import { eventsHelper, RegisteredListener } from '../utils/eventsHelper';
 
 import type { Artifact } from '../artifact';
 import type { ConsoleMessage } from '../console';
@@ -45,6 +46,7 @@ import type { InitScript, Page, PageBinding } from '../page';
 import type { DispatcherScope } from './dispatcher';
 import type * as channels from '@protocol/channels';
 import type { Progress } from '@protocol/progress';
+import type * as actions from '@recorder/actions';
 
 export class BrowserContextDispatcher extends Dispatcher<BrowserContext, channels.BrowserContextChannel, DispatcherScope> implements channels.BrowserContextChannel {
   _type_EventTarget = true;
@@ -59,6 +61,7 @@ export class BrowserContextDispatcher extends Dispatcher<BrowserContext, channel
   private _requestInterceptor: RouteHandler;
   private _interceptionUrlMatchers: (string | RegExp)[] = [];
   private _routeWebSocketInitScript: InitScript | undefined;
+  private _recorderListeners: RegisteredListener[] = [];
 
   static from(parentScope: DispatcherScope, context: BrowserContext): BrowserContextDispatcher {
     const result = parentScope.connection.existingDispatcher<BrowserContextDispatcher>(context);
@@ -200,9 +203,6 @@ export class BrowserContextDispatcher extends Dispatcher<BrowserContext, channel
         page: PageDispatcher.fromNullable(this, request.frame()?._page.initializedOrUndefined()),
       });
     });
-    this.addObjectListener(BrowserContext.Events.RecorderEvent, ({ event, data, page, code }: { event: 'actionAdded' | 'actionUpdated' | 'signalAdded', data: any, page: Page, code: string }) => {
-      this._dispatchEvent('recorderEvent', { event, data, code, page: PageDispatcher.from(this, page) });
-    });
   }
 
   private _shouldDispatchNetworkEvent(request: Request, event: channels.BrowserContextUpdateSubscriptionParams['event'] & channels.PageUpdateSubscriptionParams['event']): boolean {
@@ -340,13 +340,37 @@ export class BrowserContextDispatcher extends Dispatcher<BrowserContext, channel
   }
 
   async enableRecorder(params: channels.BrowserContextEnableRecorderParams, progress: Progress): Promise<void> {
-    await RecorderApp.show(this._context, params);
+    if (params.recorderMode !== 'api') {
+      await RecorderApp.show(this._context, params);
+      return;
+    }
+
+    const findPageByGuid = (guid: string) => this._context.pages().find(p => p.guid === guid);
+    const recorder = await Recorder.forContext(this._context, params);
+    this._recorderListeners = [
+      eventsHelper.addEventListener(recorder, RecorderEvent.ActionAdded, (action: actions.ActionInContext) => {
+        const page = findPageByGuid(action.frame.pageGuid);
+        if (page)
+          this._dispatchEvent('recorderEvent', { event: 'actionAdded', data: action, page: PageDispatcher.from(this, page) });
+      }),
+      eventsHelper.addEventListener(recorder, RecorderEvent.ActionUpdated, (action: actions.ActionInContext) => {
+        const page = findPageByGuid(action.frame.pageGuid);
+        if (page)
+          this._dispatchEvent('recorderEvent', { event: 'actionUpdated', data: action, page: PageDispatcher.from(this, page) });
+      }),
+      eventsHelper.addEventListener(recorder, RecorderEvent.SignalAdded, (signal: actions.SignalInContext) => {
+        const page = findPageByGuid(signal.frame.pageGuid);
+        if (page)
+          this._dispatchEvent('recorderEvent', { event: 'signalAdded', data: signal, page: PageDispatcher.from(this, page) });
+      }),
+    ];
   }
 
   async disableRecorder(params: channels.BrowserContextDisableRecorderParams, progress: Progress): Promise<void> {
     const recorder = Recorder.existingForContext(this._context);
     if (recorder)
       recorder.setMode('none');
+    eventsHelper.removeEventListeners(this._recorderListeners);
   }
 
   async pause(params: channels.BrowserContextPauseParams, progress: Progress) {
@@ -442,5 +466,6 @@ export class BrowserContextDispatcher extends Dispatcher<BrowserContext, channel
     if (this._clockPaused)
       this._context.clock.resumeNoReply();
     this._clockPaused = false;
+    eventsHelper.removeEventListeners(this._recorderListeners);
   }
 }