chore(tracing): remove dependency from sourcemaps

Instead, we wrap all API async calls to run inside a zone that registers the corresponding API call (see src/client/api.ts)

Refs: #7

examples/recorder-crx/src/background.ts

@@ -16,12 +16,10 @@
 
 import type { Mode } from '@recorder/recorderTypes';
 import type { CrxApplication } from 'playwright-crx';
-import playwright, { crx, registerSourceMap, _debug, _setUnderTest, _isUnderTest as isUnderTest } from 'playwright-crx';
+import playwright, { crx, _debug, _setUnderTest, _isUnderTest as isUnderTest } from 'playwright-crx';
 import type { CrxSettings } from './settings';
 import { addSettingsChangedListener, defaultSettings, loadSettings } from './settings';
 
-registerSourceMap().catch(() => {});
-
 type CrxMode = Mode | 'detached';
 
 const stoppedModes: CrxMode[] = ['none', 'standby', 'detached'];

examples/todomvc-crx/src/background.ts

@@ -14,11 +14,9 @@
  * limitations under the License.
  */
 
-import { crx, registerSourceMap } from 'playwright-crx';
+import { crx } from 'playwright-crx';
 import { createTodos } from './todos';
 
-registerSourceMap().catch(() => {});
-
 chrome.action.onClicked.addListener(async ({ id: tabId }) => {
   await chrome.action.disable();
 

index.d.ts

@@ -18,20 +18,9 @@ import type { Crx } from './src/types/types';
 
 export * from './src/types/types';
 
-export interface RawSourceMap {
-  version: number;
-  sources: string[];
-  names: string[];
-  sourceRoot?: string;
-  sourcesContent?: string[];
-  mappings: string;
-  file: string;
-}
-
 export const crx: Crx;
 export function _setUnderTest(): void;
 export function _isUnderTest(): boolean;
-export const registerSourceMap: (url?: string, sourceMapUrl?: string | RawSourceMap) => Promise<void>;
 export const _debug: {
   enable(namespaces: string): void;
   enabled(namespaces: string): boolean;

package.json

@@ -89,7 +89,6 @@
     "rimraf": "^5.0.5",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "setimmediate": "^1.0.5",
-    "source-map": "github:mozilla/source-map#3cb92cc3b73bfab27c146bae4ef2bc09dbb4e5ed",
     "stream-http": "^3.2.0",
     "string_decoder": "^1.3.0",
     "test-utils-bundle": "file:./playwright/packages/playwright/bundles/utils",

src/client/api.ts

@@ -0,0 +1,161 @@
+/**
+ * Copyright (c) Rui Figueira.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// some types are commented out because they are not used in the extension
+import {
+  Accessibility,
+  Browser,
+  BrowserContext,
+  BrowserType,
+  Clock,
+  ConsoleMessage,
+  Coverage,
+  Dialog,
+  Download,
+  // Electron,
+  // ElectronApplication,
+  Locator,
+  FrameLocator,
+  ElementHandle,
+  FileChooser,
+  TimeoutError,
+  Frame,
+  Keyboard,
+  Mouse,
+  Touchscreen,
+  JSHandle,
+  Route,
+  WebSocket,
+  WebSocketRoute,
+  // APIRequest,
+  // APIRequestContext,
+  // APIResponse,
+  Page,
+  Selectors,
+  Tracing,
+  Video,
+  Worker,
+  CDPSession,
+  Playwright,
+  WebError,
+} from 'playwright-core/lib/client/api';
+
+import { zones } from 'playwright-core/lib/utils';
+
+type ApiTypeMap = {
+  'accessibility': Accessibility,
+  // 'android': Android,
+  // 'androidDevice': AndroidDevice,
+  // 'androidWebView': AndroidWebView,
+  // 'androidInput': AndroidInput,
+  // 'androidSocket': AndroidSocket,
+  'browser': Browser,
+  'browserContext': BrowserContext,
+  'browserType': BrowserType,
+  'clock': Clock,
+  'consoleMessage': ConsoleMessage,
+  'coverage': Coverage,
+  'dialog': Dialog,
+  'download': Download,
+  // 'electron': Electron,
+  // 'electronApplication': ElectronApplication,
+  'locator': Locator,
+  'frameLocator': FrameLocator,
+  'elementHandle': ElementHandle,
+  'fileChooser': FileChooser,
+  'timeoutError': TimeoutError,
+  'frame': Frame,
+  'keyboard': Keyboard,
+  'mouse': Mouse,
+  'touchscreen': Touchscreen,
+  'jSHandle': JSHandle,
+  'route': Route,
+  'webSocket': WebSocket,
+  'webSocketRoute': WebSocketRoute,
+  // 'request': APIRequest,
+  // 'requestContext': APIRequestContext,
+  // 'response': APIResponse,
+  'page': Page,
+  'selectors': Selectors,
+  'tracing': Tracing,
+  'video': Video,
+  'worker': Worker,
+  'session': CDPSession,
+  'playwright': Playwright,
+  'webError': WebError,
+};
+
+type KeysOfAsyncMethods<T> = {
+  [K in keyof T]: T[K] extends (...args: any[]) => Promise<any> ? (K extends `_${string}` ? never : K) : never;
+}[Extract<keyof T, string>];
+
+const apis: { [K in keyof ApiTypeMap]: [ApiTypeMap[K], ...Array<KeysOfAsyncMethods<ApiTypeMap[K]>>] } = {
+  accessibility: [Accessibility.prototype, 'snapshot'],
+  // android: [Android.prototype],
+  // androidDevice: [AndroidDevice.prototype],
+  // androidWebView: [AndroidWebView.prototype],
+  // androidInput: [AndroidInput.prototype],
+  // androidSocket: [AndroidSocket.prototype],
+  browser: [Browser.prototype, 'newContext', 'newPage', 'newBrowserCDPSession', 'startTracing', 'stopTracing', 'close'],
+  browserContext: [BrowserContext.prototype, 'newPage', 'cookies', 'addCookies', 'clearCookies', 'grantPermissions', 'clearPermissions', 'setGeolocation', 'setExtraHTTPHeaders', 'setOffline', 'setHTTPCredentials', 'addInitScript', 'exposeBinding', 'exposeFunction', 'route', 'routeWebSocket', 'routeFromHAR', 'unrouteAll', 'unroute', 'waitForEvent', 'storageState', 'newCDPSession', 'close'],
+  browserType: [BrowserType.prototype, 'launch', 'launchServer', 'launchPersistentContext', 'connect', 'connectOverCDP', 'removeAllListeners'],
+  clock: [Clock.prototype, 'install', 'fastForward', 'pauseAt', 'resume', 'runFor', 'setFixedTime', 'setSystemTime'],
+  consoleMessage: [ConsoleMessage.prototype],
+  coverage: [Coverage.prototype, 'startCSSCoverage', 'stopCSSCoverage', 'startJSCoverage', 'stopJSCoverage'],
+  dialog: [Dialog.prototype, 'accept', 'dismiss'],
+  download: [Download.prototype, 'path', 'failure', 'delete', 'saveAs'],
+  // electron: [Electron.prototype],
+  // electronApplication: [ElectronApplication.prototype],
+  locator: [Locator.prototype, 'setInputFiles', 'inputValue', 'click', 'hover', 'check', 'uncheck', 'selectOption', 'fill', 'press', 'focus', 'type', 'press', 'scrollIntoViewIfNeeded', 'boundingBox', 'screenshot', 'textContent', 'innerText', 'innerHTML', 'getAttribute', 'hover', 'click', 'dblclick', 'selectOption', 'fill', 'type', 'press', 'check', 'uncheck', 'scrollIntoViewIfNeeded', 'boundingBox', 'screenshot', 'textContent', 'innerText', 'innerHTML', 'getAttribute'],
+  frameLocator: [FrameLocator.prototype],
+  elementHandle: [ElementHandle.prototype, 'ownerFrame', 'contentFrame', 'getAttribute', 'inputValue', 'textContent', 'innerText', 'innerHTML', 'isChecked', 'isDisabled', 'isEditable', 'isEnabled', 'isHidden', 'isVisible', 'dispatchEvent', 'scrollIntoViewIfNeeded', 'hover', 'click', 'dblclick', 'tap', 'selectOption', 'fill', 'selectText', 'setInputFiles', 'focus', 'type', 'press', 'check', 'uncheck', 'setChecked', 'boundingBox', 'screenshot', '$', '$$', '$eval', '$$eval', 'waitForElementState', 'waitForSelector'],
+  fileChooser: [FileChooser.prototype, 'setFiles'],
+  timeoutError: [TimeoutError.prototype],
+  frame: [Frame.prototype, 'goto', 'waitForNavigation', 'waitForLoadState', 'waitForURL', 'frameElement', 'evaluateHandle', 'evaluate', '$', 'waitForSelector', 'dispatchEvent', '$eval', '$$', 'content', 'setContent', 'addScriptTag', 'addStyleTag', 'click', 'dblclick', 'dragAndDrop', 'tap', 'fill', 'focus', 'textContent', 'innerText', 'innerHTML', 'getAttribute', 'inputValue', 'isChecked', 'isDisabled', 'isEditable', 'isEnabled', 'isHidden', 'isVisible', 'hover', 'selectOption', 'setInputFiles', 'type', 'press', 'check', 'uncheck', 'setChecked', 'waitForTimeout', 'waitForFunction', 'title'],
+  keyboard: [Keyboard.prototype, 'down', 'up', 'insertText', 'type', 'press'],
+  mouse: [Mouse.prototype, 'click', 'dblclick', 'down', 'up', 'move', 'wheel'],
+  touchscreen: [Touchscreen.prototype, 'tap'],
+  jSHandle: [JSHandle.prototype, 'evaluate', 'evaluateHandle', 'getProperty', 'jsonValue', 'getProperties', 'dispose'],
+  route: [Route.prototype, 'fallback', 'abort', 'fetch', 'fulfill', 'continue'],
+  webSocket: [WebSocket.prototype, 'waitForEvent'],
+  webSocketRoute: [WebSocketRoute.prototype, 'close'],
+  // request: [APIRequest.prototype],
+  // requestContext: [APIRequestContext.prototype],
+  // response: [APIResponse.prototype],
+  page: [Page.prototype, 'opener', '$', '$$', 'waitForSelector', 'dispatchEvent', 'evaluateHandle', '$eval', '$$eval', 'addScriptTag', 'addStyleTag', 'exposeFunction', 'exposeBinding', 'setExtraHTTPHeaders', 'content', 'setContent', 'goto', 'reload', 'addLocatorHandler', 'removeLocatorHandler', 'waitForLoadState', 'waitForNavigation', 'waitForURL', 'waitForRequest', 'waitForResponse', 'waitForEvent', 'goBack', 'goForward', 'requestGC', 'emulateMedia', 'setViewportSize', 'evaluate', 'addInitScript', 'route', 'routeFromHAR', 'routeWebSocket', 'unrouteAll', 'unroute', 'screenshot', 'title', 'bringToFront', 'close', 'click', 'dragAndDrop', 'dblclick', 'tap', 'fill', 'focus', 'textContent', 'innerText', 'innerHTML', 'getAttribute', 'inputValue', 'isChecked', 'isDisabled', 'isEditable', 'isEnabled', 'isHidden', 'isVisible', 'hover', 'selectOption', 'setInputFiles', 'type', 'press', 'check', 'uncheck', 'setChecked', 'waitForTimeout', 'waitForFunction', 'pause', 'pdf'],
+  selectors: [Selectors.prototype, 'register'],
+  tracing: [Tracing.prototype, 'group', 'groupEnd', 'removeAllListeners', 'start', 'startChunk', 'stop', 'stopChunk'],
+  video: [Video.prototype, 'delete', 'path', 'saveAs'],
+  worker: [Worker.prototype, 'evaluate', 'evaluateHandle'],
+  session: [CDPSession.prototype, 'send', 'detach'],
+  playwright: [Playwright.prototype],
+  webError: [WebError.prototype],
+};
+
+for (const [typeName, [proto, ...props]] of Object.entries(apis)) {
+  for (const key of props) {
+    const originalFn = (proto as any)[key!];
+    if (!originalFn || typeof originalFn !== 'function')
+      throw new Error(`Method ${key} not found in ${typeName}`);
+
+    (proto as any)[key!] = async function(...args: any[]) {
+      const apiName = zones.zoneData<{ apiName: string }>('crxZone');
+      if (apiName)
+        return await originalFn.apply(this, args);
+      return await zones.run('crxZone', { apiName: `${typeName}.${key}` }, async () => await originalFn.apply(this, args));
+    };
+  }
+}

src/index.ts

@@ -25,7 +25,6 @@ import { CrxPlaywright } from './server/crxPlaywright';
 import { CrxPlaywrightDispatcher } from './server/dispatchers/crxPlaywrightDispatcher';
 import { PageBinding } from 'playwright-core/lib/server/page';
 
-export { registerSourceMap } from './utils/sourceMapUtils';
 export { debug as _debug } from 'debug';
 export { setUnderTest as _setUnderTest, isUnderTest as _isUnderTest } from 'playwright-core/lib/utils';
 
@@ -56,3 +55,5 @@ clientConnection.toImpl = (x: any) => x ? dispatcherConnection._dispatchers.get(
 
 export const { _crx: crx, selectors } = playwrightAPI;
 export default playwrightAPI;
+
+import './client/api';