chore: build import registry source (#28978)

.eslintignore

@@ -4,6 +4,7 @@ test/assets/modernizr.js
 /packages/playwright-core/src/generated/*
 /packages/playwright-core/src/third_party/
 /packages/playwright-core/types/*
+/packages/playwright-ct-core/src/generated/*
 /index.d.ts
 utils/generate_types/overrides.d.ts
 utils/generate_types/test/test.ts

.gitignore

@@ -9,7 +9,8 @@ node_modules/
 .vscode
 .idea
 yarn.lock
-/packages/playwright-core/src/generated/*
+/packages/playwright-core/src/generated
+/packages/playwright-ct-core/src/generated
 packages/*/lib/
 drivers/
 .android-sdk/

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

@@ -1,2 +1,6 @@
-[importRegistry.ts]
+[vitePlugin.ts]
-../types/**
+generated/indexSource.ts
+
+[mount.ts]
+generated/serializers.ts
+injected/**

packages/playwright-ct-core/src/importRegistry.ts

@@ -1,59 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * 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.
- */
-
-import type { ImportRef } from '../types/component';
-
-export class ImportRegistry {
-  private _registry = new Map<string, () => Promise<any>>();
-
-  initialize(components: Record<string, () => Promise<any>>) {
-    for (const [name, value] of Object.entries(components))
-      this._registry.set(name, value);
-  }
-
-  async resolveImports(value: any): Promise<any> {
-    if (value === null || typeof value !== 'object')
-      return value;
-    if (this._isImportRef(value)) {
-      const importFunction = this._registry.get(value.id);
-      if (!importFunction)
-        throw new Error(`Unregistered component: ${value.id}. Following components are registered: ${[...this._registry.keys()]}`);
-      let importedObject = await importFunction();
-      if (!importedObject)
-        throw new Error(`Could not resolve component: ${value.id}.`);
-      if (value.property) {
-        importedObject = importedObject[value.property];
-        if (!importedObject)
-          throw new Error(`Could not instantiate component: ${value.id}.${value.property}.`);
-      }
-      return importedObject;
-    }
-    if (Array.isArray(value)) {
-      const result = [];
-      for (const item of value)
-        result.push(await this.resolveImports(item));
-      return result;
-    }
-    const result: any = {};
-    for (const [key, prop] of Object.entries(value))
-      result[key] = await this.resolveImports(prop);
-    return result;
-  }
-
-  private _isImportRef(value: any): value is ImportRef {
-    return typeof value === 'object' && value && value.__pw_type === 'importRef';
-  }
-}

packages/playwright-ct-core/src/injected/importRegistry.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * 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.
+ */
+
+export type ImportRef = {
+  __pw_type: 'importRef',
+  id: string,
+  property?: string,
+};
+
+export function isImportRef(value: any): value is ImportRef {
+  return typeof value === 'object' && value && value.__pw_type === 'importRef';
+}
+
+export class ImportRegistry {
+  private _registry = new Map<string, () => Promise<any>>();
+
+  initialize(components: Record<string, () => Promise<any>>) {
+    for (const [name, value] of Object.entries(components))
+      this._registry.set(name, value);
+  }
+
+  async resolveImportRef(importRef: ImportRef): Promise<any> {
+    const importFunction = this._registry.get(importRef.id);
+    if (!importFunction)
+      throw new Error(`Unregistered component: ${importRef.id}. Following components are registered: ${[...this._registry.keys()]}`);
+    let importedObject = await importFunction();
+    if (!importedObject)
+      throw new Error(`Could not resolve component: ${importRef.id}.`);
+    if (importRef.property) {
+      importedObject = importedObject[importRef.property];
+      if (!importedObject)
+        throw new Error(`Could not instantiate component: ${importRef.id}.${importRef.property}.`);
+    }
+    return importedObject;
+  }
+}

packages/playwright-ct-core/src/injected/index.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * 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.
+ */
+
+import { ImportRegistry } from './importRegistry';
+import { unwrapObject } from './serializers';
+
+window.__pwRegistry = new ImportRegistry();
+window.__pwUnwrapObject = unwrapObject;

packages/playwright-ct-core/src/injected/serializers.ts

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * 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.
+ */
+
+import { isImportRef } from './importRegistry';
+
+type FunctionRef = {
+  __pw_type: 'function';
+  ordinal: number;
+};
+
+function isFunctionRef(value: any): value is FunctionRef {
+  return value && typeof value === 'object' && value.__pw_type === 'function';
+}
+
+export function wrapObject(value: any, callbacks: Function[]): any {
+  if (typeof value === 'function') {
+    const ordinal = callbacks.length;
+    callbacks.push(value as Function);
+    const result: FunctionRef = {
+      __pw_type: 'function',
+      ordinal,
+    };
+    return result;
+  }
+  if (value === null || typeof value !== 'object')
+    return value;
+  if (Array.isArray(value)) {
+    const result = [];
+    for (const item of value)
+      result.push(wrapObject(item, callbacks));
+    return result;
+  }
+  const result: any = {};
+  for (const [key, prop] of Object.entries(value))
+    result[key] = wrapObject(prop, callbacks);
+  return result;
+}
+
+export async function unwrapObject(value: any): Promise<any> {
+  if (value === null || typeof value !== 'object')
+    return value;
+  if (isFunctionRef(value)) {
+    return (...args: any[]) => {
+      window.__ctDispatchFunction(value.ordinal, args);
+    };
+  }
+  if (isImportRef(value))
+    return window.__pwRegistry.resolveImportRef(value);
+
+  if (Array.isArray(value)) {
+    const result = [];
+    for (const item of value)
+      result.push(await unwrapObject(item));
+    return result;
+  }
+  const result: any = {};
+  for (const [key, prop] of Object.entries(value))
+    result[key] = await unwrapObject(prop);
+  return result;
+}

packages/playwright-ct-core/src/mount.ts

@@ -15,8 +15,10 @@
  */
 
 import type { Fixtures, Locator, Page, BrowserContextOptions, PlaywrightTestArgs, PlaywrightTestOptions, PlaywrightWorkerArgs, PlaywrightWorkerOptions, BrowserContext } from 'playwright/test';
-import type { Component, ImportRef, JsxComponent, MountOptions, ObjectComponentOptions } from '../types/component';
+import type { Component, JsxComponent, MountOptions, ObjectComponentOptions } from '../types/component';
 import type { ContextReuseMode, FullConfigInternal } from '../../playwright/src/common/config';
+import type { ImportRef } from './injected/importRegistry';
+import { wrapObject } from './injected/serializers';
 
 let boundCallbacksForMount: Function[] = [];
 
@@ -46,7 +48,7 @@ export const fixtures: Fixtures<TestFixtures, WorkerFixtures, BaseTestFixtures>
     if (!((info as any)._configInternal as FullConfigInternal).defineConfigWasUsed)
       throw new Error('Component testing requires the use of the defineConfig() in your playwright-ct.config.{ts,js}: https://aka.ms/playwright/ct-define-config');
     await (page as any)._wrapApiCall(async () => {
-      await page.exposeFunction('__ct_dispatch', (ordinal: number, args: any[]) => {
+      await page.exposeFunction('__ctDispatchFunction', (ordinal: number, args: any[]) => {
         boundCallbacksForMount[ordinal](...args);
       });
       await page.goto(process.env.PLAYWRIGHT_TEST_BASE_URL!);
@@ -83,59 +85,29 @@ function isJsxComponent(component: any): component is JsxComponent {
 }
 
 async function innerUpdate(page: Page, componentRef: JsxComponent | ImportRef, options: ObjectComponentOptions = {}): Promise<void> {
-  const component = createComponent(componentRef, options);
+  const component = wrapObject(createComponent(componentRef, options), boundCallbacksForMount);
-  wrapFunctions(component, page, boundCallbacksForMount);
 
   await page.evaluate(async ({ component }) => {
-    const unwrapFunctions = (object: any) => {
+    component = await window.__pwUnwrapObject(component);
-      for (const [key, value] of Object.entries(object)) {
-        if (typeof value === 'string' && (value as string).startsWith('__pw_func_')) {
-          const ordinal = +value.substring('__pw_func_'.length);
-          object[key] = (...args: any[]) => {
-            (window as any)['__ct_dispatch'](ordinal, args);
-          };
-        } else if (typeof value === 'object' && value) {
-          unwrapFunctions(value);
-        }
-      }
-    };
-
-    unwrapFunctions(component);
-    component = await window.__pwRegistry.resolveImports(component);
     const rootElement = document.getElementById('root')!;
     return await window.playwrightUpdate(rootElement, component);
   }, { component });
 }
 
 async function innerMount(page: Page, componentRef: JsxComponent | ImportRef, options: ObjectComponentOptions & MountOptions = {}): Promise<string> {
-  const component = createComponent(componentRef, options);
+  const component = wrapObject(createComponent(componentRef, options), boundCallbacksForMount);
-  wrapFunctions(component, page, boundCallbacksForMount);
 
   // WebKit does not wait for deferred scripts.
   await page.waitForFunction(() => !!window.playwrightMount);
 
   const selector = await page.evaluate(async ({ component, hooksConfig }) => {
-    const unwrapFunctions = (object: any) => {
+    component = await window.__pwUnwrapObject(component);
-      for (const [key, value] of Object.entries(object)) {
-        if (typeof value === 'string' && (value as string).startsWith('__pw_func_')) {
-          const ordinal = +value.substring('__pw_func_'.length);
-          object[key] = (...args: any[]) => {
-            (window as any)['__ct_dispatch'](ordinal, args);
-          };
-        } else if (typeof value === 'object' && value) {
-          unwrapFunctions(value);
-        }
-      }
-    };
-
-    unwrapFunctions(component);
     let rootElement = document.getElementById('root');
     if (!rootElement) {
       rootElement = document.createElement('div');
       rootElement.id = 'root';
       document.body.appendChild(rootElement);
     }
-    component = await window.__pwRegistry.resolveImports(component);
     await window.playwrightMount(component, rootElement, hooksConfig);
 
     return '#root >> internal:control=component';
@@ -152,16 +124,3 @@ function createComponent(component: JsxComponent | ImportRef, options: ObjectCom
     ...options,
   };
 }
-
-function wrapFunctions(object: any, page: Page, callbacks: Function[]) {
-  for (const [key, value] of Object.entries(object)) {
-    const type = typeof value;
-    if (type === 'function') {
-      const functionName = '__pw_func_' + callbacks.length;
-      callbacks.push(value as Function);
-      object[key] = functionName;
-    } else if (type === 'object' && value) {
-      wrapFunctions(value, page, callbacks);
-    }
-  }
-}

packages/playwright-ct-core/src/vitePlugin.ts

@@ -32,6 +32,7 @@ import { getPlaywrightVersion } from 'playwright-core/lib/utils';
 import { setExternalDependencies } from 'playwright/lib/transform/compilationCache';
 import { collectComponentUsages, importInfo } from './tsxTransform';
 import { version as viteVersion, build, preview, mergeConfig } from 'vite';
+import { source as injectedSource } from './generated/indexSource';
 import type { ImportInfo } from './tsxTransform';
 
 const log = debug('pw:vite');
@@ -115,13 +116,7 @@ export function createPlugin(
       let buildExists = false;
       let buildInfo: BuildInfo;
 
-      const importRegistryFile = await fs.promises.readFile(path.resolve(__dirname, 'importRegistry.js'), 'utf-8');
+      const registerSource = injectedSource + '\n' + await fs.promises.readFile(registerSourceFile, 'utf-8');
-      assert(importRegistryFile.includes(importRegistryPrefix));
-      assert(importRegistryFile.includes(importRegistrySuffix));
-      const importRegistrySource = importRegistryFile.replace(importRegistryPrefix, '').replace(importRegistrySuffix, '') + `
-      window.__pwRegistry = new ImportRegistry();
-      `;
-      const registerSource = importRegistrySource + await fs.promises.readFile(registerSourceFile, 'utf-8');
       const registerSourceHash = calculateSha1(registerSource);
 
       try {
@@ -436,13 +431,3 @@ function hasJSComponents(components: ComponentInfo[]): boolean {
   }
   return false;
 }
-
-
-const importRegistryPrefix = `"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ImportRegistry = void 0;`;
-
-const importRegistrySuffix = `exports.ImportRegistry = ImportRegistry;`;

packages/playwright-ct-core/types/component.d.ts

@@ -14,19 +14,13 @@
  * limitations under the License.
  */
 
-import type { ImportRegistry } from '../src/importRegistry';
+import type { ImportRegistry } from '../src/injected/importRegistry';
 
 type JsonPrimitive = string | number | boolean | null;
 type JsonValue = JsonPrimitive | JsonObject | JsonArray;
 type JsonArray = JsonValue[];
 export type JsonObject = { [Key in string]?: JsonValue };
 
-export type ImportRef = {
-  __pw_type: 'importRef',
-  id: string,
-  property?: string,
-};
-
 export type JsxComponent = {
   __pw_type: 'jsx',
   type: any,
@@ -62,5 +56,8 @@ declare global {
       params: { hooksConfig?: HooksConfig; [key: string]: any }
     ) => Promise<void>)[];
     __pwRegistry: ImportRegistry;
+    // Can't start with __pw due to core reuse bindings logic for __pw*.
+    __ctDispatchFunction: (ordinal: number, args: any[]) => void;
+    __pwUnwrapObject: (value: any) => Promise<any>;
   }
 }

utils/generate_injected.js

@@ -22,11 +22,40 @@ const path = require('path');
 const ROOT = path.join(__dirname, '..');
 const esbuild = require('esbuild');
 
+/**
+ * @type {[string, string, string, boolean][]}
+ */
 const injectedScripts = [
-  path.join(ROOT, 'packages', 'playwright-core', 'src', 'server', 'injected', 'utilityScript.ts'),
+  [
-  path.join(ROOT, 'packages', 'playwright-core', 'src', 'server', 'injected', 'injectedScript.ts'),
+    path.join(ROOT, 'packages', 'playwright-core', 'src', 'server', 'injected', 'utilityScript.ts'),
-  path.join(ROOT, 'packages', 'playwright-core', 'src', 'server', 'injected', 'consoleApi.ts'),
+    path.join(ROOT, 'packages', 'playwright-core', 'lib', 'server', 'injected', 'packed'),
-  path.join(ROOT, 'packages', 'playwright-core', 'src', 'server', 'injected', 'recorder.ts'),
+    path.join(ROOT, 'packages', 'playwright-core', 'src', 'generated'),
+    true,
+  ],
+  [
+    path.join(ROOT, 'packages', 'playwright-core', 'src', 'server', 'injected', 'injectedScript.ts'),
+    path.join(ROOT, 'packages', 'playwright-core', 'lib', 'server', 'injected', 'packed'),
+    path.join(ROOT, 'packages', 'playwright-core', 'src', 'generated'),
+    true,
+  ],
+  [
+    path.join(ROOT, 'packages', 'playwright-core', 'src', 'server', 'injected', 'consoleApi.ts'),
+    path.join(ROOT, 'packages', 'playwright-core', 'lib', 'server', 'injected', 'packed'),
+    path.join(ROOT, 'packages', 'playwright-core', 'src', 'generated'),
+    true,
+  ],
+  [
+    path.join(ROOT, 'packages', 'playwright-core', 'src', 'server', 'injected', 'recorder.ts'),
+    path.join(ROOT, 'packages', 'playwright-core', 'lib', 'server', 'injected', 'packed'),
+    path.join(ROOT, 'packages', 'playwright-core', 'src', 'generated'),
+    true,
+  ],
+  [
+    path.join(ROOT, 'packages', 'playwright-ct-core', 'src', 'injected', 'index.ts'),
+    path.join(ROOT, 'packages', 'playwright-ct-core', 'lib', 'injected', 'packed'),
+    path.join(ROOT, 'packages', 'playwright-ct-core', 'src', 'generated'),
+    false,
+  ]
 ];
 
 const modulePrefix = `
@@ -79,10 +108,8 @@ const inlineCSSPlugin = {
 };
 
 (async () => {
-  const generatedFolder = path.join(ROOT, 'packages', 'playwright-core', 'src', 'generated');
+  for (const [injected, outdir, generatedFolder, hasExports] of injectedScripts) {
-  await fs.promises.mkdir(generatedFolder, { recursive: true });
+    await fs.promises.mkdir(generatedFolder, { recursive: true });
-  for (const injected of injectedScripts) {
-    const outdir = path.join(ROOT, 'packages', 'playwright-core', 'lib', 'server', 'injected', 'packed');
     const buildOutput = await esbuild.build({
       entryPoints: [injected],
       bundle: true,
@@ -97,7 +124,8 @@ const inlineCSSPlugin = {
     const baseName = path.basename(injected);
     const outFileJs = path.join(outdir, baseName.replace('.ts', '.js'));
     let content = await fs.promises.readFile(outFileJs, 'utf-8');
-    content = await replaceEsbuildHeader(content, outFileJs);
+    if (hasExports)
+      content = await replaceEsbuildHeader(content, outFileJs);
     const newContent = `export const source = ${JSON.stringify(content)};`;
     await fs.promises.writeFile(path.join(generatedFolder, baseName.replace('.ts', 'Source.ts')), newContent);
   }