chore: mark 1.41.1 (#29075 )

cherry-pick(#29069 ): Revert "feat(codegen): add range input recording support (#28767 )" (#29074 )
This PR cherry-picks the following commits: - e551506c9e Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
2024-01-20 00:05:04 +01:00 · 2024-01-19 22:08:43 +01:00 · 2024-01-19 11:12:07 -08:00 · 2024-01-18 11:44:08 -08:00 · 2024-01-18 11:43:45 -08:00 · 2024-01-18 11:43:21 -08:00
51 changed files with 1011 additions and 976 deletions
--- a/.eslintignore
+++ b/.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
--- a/.gitignore
+++ b/.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/
--- a/docs/src/test-snapshots-js.md
+++ b/docs/src/test-snapshots-js.md
@ -98,7 +98,7 @@ import { test, expect } from '@playwright/test';

 test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev');
-  await expect(page).toHaveScreenshot({ styleFile: path.join(__dirname, 'screenshot.css') });
+  await expect(page).toHaveScreenshot({ stylePath: path.join(__dirname, 'screenshot.css') });
 });
 ```

@ -109,7 +109,7 @@ import { defineConfig } from '@playwright/test';
 export default defineConfig({
  expect: {
    toHaveScreenshot: {
-      styleFile: './screenshot.css'
+      stylePath: './screenshot.css'
    },
  },
 });
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "playwright-internal",
-  "version": "1.41.0-next",
+  "version": "1.41.1",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "playwright-internal",
-      "version": "1.41.0-next",
+      "version": "1.41.1",
      "license": "Apache-2.0",
      "workspaces": [
        "packages/*"
@ -7530,10 +7530,10 @@
      }
    },
    "packages/playwright": {
-      "version": "1.41.0-next",
+      "version": "1.41.1",
      "license": "Apache-2.0",
      "dependencies": {
-        "playwright-core": "1.41.0-next"
+        "playwright-core": "1.41.1"
      },
      "bin": {
        "playwright": "cli.js"
@ -7547,11 +7547,11 @@
    },
    "packages/playwright-browser-chromium": {
      "name": "@playwright/browser-chromium",
-      "version": "1.41.0-next",
+      "version": "1.41.1",
      "hasInstallScript": true,
      "license": "Apache-2.0",
      "dependencies": {
-        "playwright-core": "1.41.0-next"
+        "playwright-core": "1.41.1"
      },
      "engines": {
        "node": ">=16"
@ -7559,11 +7559,11 @@
    },
    "packages/playwright-browser-firefox": {
      "name": "@playwright/browser-firefox",
-      "version": "1.41.0-next",
+      "version": "1.41.1",
      "hasInstallScript": true,
      "license": "Apache-2.0",
      "dependencies": {
-        "playwright-core": "1.41.0-next"
+        "playwright-core": "1.41.1"
      },
      "engines": {
        "node": ">=16"
@ -7571,22 +7571,22 @@
    },
    "packages/playwright-browser-webkit": {
      "name": "@playwright/browser-webkit",
-      "version": "1.41.0-next",
+      "version": "1.41.1",
      "hasInstallScript": true,
      "license": "Apache-2.0",
      "dependencies": {
-        "playwright-core": "1.41.0-next"
+        "playwright-core": "1.41.1"
      },
      "engines": {
        "node": ">=16"
      }
    },
    "packages/playwright-chromium": {
-      "version": "1.41.0-next",
+      "version": "1.41.1",
      "hasInstallScript": true,
      "license": "Apache-2.0",
      "dependencies": {
-        "playwright-core": "1.41.0-next"
+        "playwright-core": "1.41.1"
      },
      "bin": {
        "playwright": "cli.js"
@ -7596,7 +7596,7 @@
      }
    },
    "packages/playwright-core": {
-      "version": "1.41.0-next",
+      "version": "1.41.1",
      "license": "Apache-2.0",
      "bin": {
        "playwright-core": "cli.js"
@ -7607,11 +7607,11 @@
    },
    "packages/playwright-ct-core": {
      "name": "@playwright/experimental-ct-core",
-      "version": "1.41.0-next",
+      "version": "1.41.1",
      "license": "Apache-2.0",
      "dependencies": {
-        "playwright": "1.41.0-next",
-        "playwright-core": "1.41.0-next",
+        "playwright": "1.41.1",
+        "playwright-core": "1.41.1",
        "vite": "^4.4.12"
      },
      "bin": {
@ -7623,10 +7623,10 @@
    },
    "packages/playwright-ct-react": {
      "name": "@playwright/experimental-ct-react",
-      "version": "1.41.0-next",
+      "version": "1.41.1",
      "license": "Apache-2.0",
      "dependencies": {
-        "@playwright/experimental-ct-core": "1.41.0-next",
+        "@playwright/experimental-ct-core": "1.41.1",
        "@vitejs/plugin-react": "^4.0.0"
      },
      "bin": {
@ -7655,10 +7655,10 @@
    },
    "packages/playwright-ct-react17": {
      "name": "@playwright/experimental-ct-react17",
-      "version": "1.41.0-next",
+      "version": "1.41.1",
      "license": "Apache-2.0",
      "dependencies": {
-        "@playwright/experimental-ct-core": "1.41.0-next",
+        "@playwright/experimental-ct-core": "1.41.1",
        "@vitejs/plugin-react": "^4.0.0"
      },
      "bin": {
@ -7687,10 +7687,10 @@
    },
    "packages/playwright-ct-solid": {
      "name": "@playwright/experimental-ct-solid",
-      "version": "1.41.0-next",
+      "version": "1.41.1",
      "license": "Apache-2.0",
      "dependencies": {
-        "@playwright/experimental-ct-core": "1.41.0-next",
+        "@playwright/experimental-ct-core": "1.41.1",
        "vite-plugin-solid": "^2.7.0"
      },
      "bin": {
@ -7705,10 +7705,10 @@
    },
    "packages/playwright-ct-svelte": {
      "name": "@playwright/experimental-ct-svelte",
-      "version": "1.41.0-next",
+      "version": "1.41.1",
      "license": "Apache-2.0",
      "dependencies": {
-        "@playwright/experimental-ct-core": "1.41.0-next",
+        "@playwright/experimental-ct-core": "1.41.1",
        "@sveltejs/vite-plugin-svelte": "^3.0.1"
      },
      "bin": {
@ -7972,10 +7972,10 @@
    },
    "packages/playwright-ct-vue": {
      "name": "@playwright/experimental-ct-vue",
-      "version": "1.41.0-next",
+      "version": "1.41.1",
      "license": "Apache-2.0",
      "dependencies": {
-        "@playwright/experimental-ct-core": "1.41.0-next",
+        "@playwright/experimental-ct-core": "1.41.1",
        "@vitejs/plugin-vue": "^4.2.1"
      },
      "bin": {
@ -8023,10 +8023,10 @@
    },
    "packages/playwright-ct-vue2": {
      "name": "@playwright/experimental-ct-vue2",
-      "version": "1.41.0-next",
+      "version": "1.41.1",
      "license": "Apache-2.0",
      "dependencies": {
-        "@playwright/experimental-ct-core": "1.41.0-next",
+        "@playwright/experimental-ct-core": "1.41.1",
        "@vitejs/plugin-vue2": "^2.2.0"
      },
      "bin": {
@ -8040,11 +8040,11 @@
      }
    },
    "packages/playwright-firefox": {
-      "version": "1.41.0-next",
+      "version": "1.41.1",
      "hasInstallScript": true,
      "license": "Apache-2.0",
      "dependencies": {
-        "playwright-core": "1.41.0-next"
+        "playwright-core": "1.41.1"
      },
      "bin": {
        "playwright": "cli.js"
@ -8078,10 +8078,10 @@
    },
    "packages/playwright-test": {
      "name": "@playwright/test",
-      "version": "1.41.0-next",
+      "version": "1.41.1",
      "license": "Apache-2.0",
      "dependencies": {
-        "playwright": "1.41.0-next"
+        "playwright": "1.41.1"
      },
      "bin": {
        "playwright": "cli.js"
@ -8091,11 +8091,11 @@
      }
    },
    "packages/playwright-webkit": {
-      "version": "1.41.0-next",
+      "version": "1.41.1",
      "hasInstallScript": true,
      "license": "Apache-2.0",
      "dependencies": {
-        "playwright-core": "1.41.0-next"
+        "playwright-core": "1.41.1"
      },
      "bin": {
        "playwright": "cli.js"
@ -8973,33 +8973,33 @@
    "@playwright/browser-chromium": {
      "version": "file:packages/playwright-browser-chromium",
      "requires": {
-        "playwright-core": "1.41.0-next"
+        "playwright-core": "1.41.1"
      }
    },
    "@playwright/browser-firefox": {
      "version": "file:packages/playwright-browser-firefox",
      "requires": {
-        "playwright-core": "1.41.0-next"
+        "playwright-core": "1.41.1"
      }
    },
    "@playwright/browser-webkit": {
      "version": "file:packages/playwright-browser-webkit",
      "requires": {
-        "playwright-core": "1.41.0-next"
+        "playwright-core": "1.41.1"
      }
    },
    "@playwright/experimental-ct-core": {
      "version": "file:packages/playwright-ct-core",
      "requires": {
-        "playwright": "1.41.0-next",
-        "playwright-core": "1.41.0-next",
+        "playwright": "1.41.1",
+        "playwright-core": "1.41.1",
        "vite": "^4.4.12"
      }
    },
    "@playwright/experimental-ct-react": {
      "version": "file:packages/playwright-ct-react",
      "requires": {
-        "@playwright/experimental-ct-core": "1.41.0-next",
+        "@playwright/experimental-ct-core": "1.41.1",
        "@vitejs/plugin-react": "^4.0.0"
      },
      "dependencies": {
@ -9019,7 +9019,7 @@
    "@playwright/experimental-ct-react17": {
      "version": "file:packages/playwright-ct-react17",
      "requires": {
-        "@playwright/experimental-ct-core": "1.41.0-next",
+        "@playwright/experimental-ct-core": "1.41.1",
        "@vitejs/plugin-react": "^4.0.0"
      },
      "dependencies": {
@ -9039,7 +9039,7 @@
    "@playwright/experimental-ct-solid": {
      "version": "file:packages/playwright-ct-solid",
      "requires": {
-        "@playwright/experimental-ct-core": "1.41.0-next",
+        "@playwright/experimental-ct-core": "1.41.1",
        "solid-js": "^1.7.0",
        "vite-plugin-solid": "^2.7.0"
      }
@ -9047,7 +9047,7 @@
    "@playwright/experimental-ct-svelte": {
      "version": "file:packages/playwright-ct-svelte",
      "requires": {
-        "@playwright/experimental-ct-core": "1.41.0-next",
+        "@playwright/experimental-ct-core": "1.41.1",
        "@sveltejs/vite-plugin-svelte": "^3.0.1",
        "svelte": "^4.2.8"
      },
@ -9203,7 +9203,7 @@
    "@playwright/experimental-ct-vue": {
      "version": "file:packages/playwright-ct-vue",
      "requires": {
-        "@playwright/experimental-ct-core": "1.41.0-next",
+        "@playwright/experimental-ct-core": "1.41.1",
        "@vitejs/plugin-vue": "^4.2.1"
      },
      "dependencies": {
@ -9237,7 +9237,7 @@
    "@playwright/experimental-ct-vue2": {
      "version": "file:packages/playwright-ct-vue2",
      "requires": {
-        "@playwright/experimental-ct-core": "1.41.0-next",
+        "@playwright/experimental-ct-core": "1.41.1",
        "@vitejs/plugin-vue2": "^2.2.0",
        "vue": "^2.7.14"
      }
@ -9245,7 +9245,7 @@
    "@playwright/test": {
      "version": "file:packages/playwright-test",
      "requires": {
-        "playwright": "1.41.0-next"
+        "playwright": "1.41.1"
      }
    },
    "@rollup/rollup-android-arm-eabi": {
@ -12246,13 +12246,13 @@
      "version": "file:packages/playwright",
      "requires": {
        "fsevents": "2.3.2",
-        "playwright-core": "1.41.0-next"
+        "playwright-core": "1.41.1"
      }
    },
    "playwright-chromium": {
      "version": "file:packages/playwright-chromium",
      "requires": {
-        "playwright-core": "1.41.0-next"
+        "playwright-core": "1.41.1"
      }
    },
    "playwright-core": {
@ -12261,13 +12261,13 @@
    "playwright-firefox": {
      "version": "file:packages/playwright-firefox",
      "requires": {
-        "playwright-core": "1.41.0-next"
+        "playwright-core": "1.41.1"
      }
    },
    "playwright-webkit": {
      "version": "file:packages/playwright-webkit",
      "requires": {
-        "playwright-core": "1.41.0-next"
+        "playwright-core": "1.41.1"
      }
    },
    "postcss": {
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "playwright-internal",
  "private": true,
-  "version": "1.41.0-next",
+  "version": "1.41.1",
  "description": "A high-level API to automate web browsers",
  "repository": {
    "type": "git",
--- a/packages/playwright-browser-chromium/package.json
+++ b/packages/playwright-browser-chromium/package.json
@ -1,6 +1,6 @@
 {
  "name": "@playwright/browser-chromium",
-  "version": "1.41.0-next",
+  "version": "1.41.1",
  "description": "Playwright package that automatically installs Chromium",
  "repository": {
    "type": "git",
@ -27,6 +27,6 @@
    "install": "node install.js"
  },
  "dependencies": {
-    "playwright-core": "1.41.0-next"
+    "playwright-core": "1.41.1"
  }
 }
--- a/packages/playwright-browser-firefox/package.json
+++ b/packages/playwright-browser-firefox/package.json
@ -1,6 +1,6 @@
 {
  "name": "@playwright/browser-firefox",
-  "version": "1.41.0-next",
+  "version": "1.41.1",
  "description": "Playwright package that automatically installs Firefox",
  "repository": {
    "type": "git",
@ -27,6 +27,6 @@
    "install": "node install.js"
  },
  "dependencies": {
-    "playwright-core": "1.41.0-next"
+    "playwright-core": "1.41.1"
  }
 }
--- a/packages/playwright-browser-webkit/package.json
+++ b/packages/playwright-browser-webkit/package.json
@ -1,6 +1,6 @@
 {
  "name": "@playwright/browser-webkit",
-  "version": "1.41.0-next",
+  "version": "1.41.1",
  "description": "Playwright package that automatically installs WebKit",
  "repository": {
    "type": "git",
@ -27,6 +27,6 @@
    "install": "node install.js"
  },
  "dependencies": {
-    "playwright-core": "1.41.0-next"
+    "playwright-core": "1.41.1"
  }
 }
--- a/packages/playwright-chromium/package.json
+++ b/packages/playwright-chromium/package.json
@ -1,6 +1,6 @@
 {
  "name": "playwright-chromium",
-  "version": "1.41.0-next",
+  "version": "1.41.1",
  "description": "A high-level API to automate Chromium",
  "repository": {
    "type": "git",
@ -30,6 +30,6 @@
    "install": "node install.js"
  },
  "dependencies": {
-    "playwright-core": "1.41.0-next"
+    "playwright-core": "1.41.1"
  }
 }
--- a/packages/playwright-core/package.json
+++ b/packages/playwright-core/package.json
@ -1,6 +1,6 @@
 {
  "name": "playwright-core",
-  "version": "1.41.0-next",
+  "version": "1.41.1",
  "description": "A high-level API to automate web browsers",
  "repository": {
    "type": "git",
--- a/packages/playwright-core/src/server/injected/recorder.ts
+++ b/packages/playwright-core/src/server/injected/recorder.ts
@ -188,7 +188,7 @@ class RecordActionTool implements RecorderTool {
      return;
    if (this._actionInProgress(event))
      return;
-    if (this._consumedDueWrongTarget(event, this._hoveredModel))
+    if (this._consumedDueToNoModel(event, this._hoveredModel))
      return;

    const checkbox = asCheckbox(this._recorder.deepEventTarget(event));
@ -283,7 +283,7 @@ class RecordActionTool implements RecorderTool {
      }

      // Non-navigating actions are simply recorded by Playwright.
-      if (this._consumedDueWrongTarget(event, this._activeModel))
+      if (this._consumedDueWrongTarget(event))
        return;
      this._recorder.delegate.recordAction?.({
        name: 'fill',
@ -313,7 +313,7 @@ class RecordActionTool implements RecorderTool {
      this._expectProgrammaticKeyUp = true;
      return;
    }
-    if (this._consumedDueWrongTarget(event, this._activeModel))
+    if (this._consumedDueWrongTarget(event))
      return;
    // Similarly to click, trigger checkbox on key event, not input.
    if (event.key === ' ') {
@ -373,7 +373,7 @@ class RecordActionTool implements RecorderTool {
    const nodeName = target.nodeName;
    if (nodeName === 'SELECT' || nodeName === 'OPTION')
      return true;
-    if (nodeName === 'INPUT' && ['date', 'range'].includes((target as HTMLInputElement).type))
+    if (nodeName === 'INPUT' && ['date'].includes((target as HTMLInputElement).type))
      return true;
    return false;
  }
@ -387,8 +387,15 @@ class RecordActionTool implements RecorderTool {
    return false;
  }

-  private _consumedDueWrongTarget(event: Event, model: HighlightModel | null): boolean {
-    if (model && model.elements[0] === this._recorder.deepEventTarget(event))
+  private _consumedDueToNoModel(event: Event, model: HighlightModel | null): boolean {
+    if (model)
+      return false;
+    consumeEvent(event);
+    return true;
+  }
+
+  private _consumedDueWrongTarget(event: Event): boolean {
+    if (this._activeModel && this._activeModel.elements[0] === this._recorder.deepEventTarget(event))
      return false;
    consumeEvent(event);
    return true;
--- a/packages/playwright-ct-core/package.json
+++ b/packages/playwright-ct-core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@playwright/experimental-ct-core",
-  "version": "1.41.0-next",
+  "version": "1.41.1",
  "description": "Playwright Component Testing Helpers",
  "repository": {
    "type": "git",
@ -27,9 +27,9 @@
    }
  },
  "dependencies": {
-    "playwright-core": "1.41.0-next",
+    "playwright-core": "1.41.1",
    "vite": "^4.4.12",
-    "playwright": "1.41.0-next"
+    "playwright": "1.41.1"
  },
  "bin": {
    "playwright": "cli.js"
--- a/packages/playwright-ct-core/src/DEPS.list
+++ b/packages/playwright-ct-core/src/DEPS.list
@ -0,0 +1,6 @@
+[vitePlugin.ts]
+generated/indexSource.ts
+
+[mount.ts]
+generated/serializers.ts
+injected/**
--- a/packages/playwright-ct-core/src/injected/importRegistry.ts
+++ b/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;
+  }
+}
--- a/packages/playwright-ct-core/src/injected/index.ts
+++ b/packages/playwright-ct-core/src/injected/index.ts
@ -0,0 +1,22 @@
+/**
+ * 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 { transformObject, unwrapObject } from './serializers';
+
+window.__pwRegistry = new ImportRegistry();
+window.__pwUnwrapObject = unwrapObject;
+window.__pwTransformObject = transformObject;
--- a/packages/playwright-ct-core/src/injected/serializers.ts
+++ b/packages/playwright-ct-core/src/injected/serializers.ts
@ -0,0 +1,93 @@
+/**
+ * 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 {
+  return transformObject(value, (v: any) => {
+    if (typeof v === 'function') {
+      const ordinal = callbacks.length;
+      callbacks.push(v as Function);
+      const result: FunctionRef = {
+        __pw_type: 'function',
+        ordinal,
+      };
+      return { result };
+    }
+  });
+}
+
+export async function unwrapObject(value: any): Promise<any> {
+  return transformObjectAsync(value, async (v: any) => {
+    if (isFunctionRef(v)) {
+      const result = (...args: any[]) => {
+        window.__ctDispatchFunction(v.ordinal, args);
+      };
+      return { result };
+    }
+    if (isImportRef(v))
+      return { result: await window.__pwRegistry.resolveImportRef(v) };
+  });
+}
+
+export function transformObject(value: any, mapping: (v: any) => { result: any } | undefined): any {
+  const result = mapping(value);
+  if (result)
+    return result.result;
+  if (value === null || typeof value !== 'object')
+    return value;
+  if (value instanceof Date || value instanceof RegExp || value instanceof URL)
+    return value;
+  if (Array.isArray(value)) {
+    const result = [];
+    for (const item of value)
+      result.push(transformObject(item, mapping));
+    return result;
+  }
+  const result2: any = {};
+  for (const [key, prop] of Object.entries(value))
+    result2[key] = transformObject(prop, mapping);
+  return result2;
+}
+
+export async function transformObjectAsync(value: any, mapping: (v: any) => Promise<{ result: any } | undefined>): Promise<any> {
+  const result = await mapping(value);
+  if (result)
+    return result.result;
+  if (value === null || typeof value !== 'object')
+    return value;
+  if (value instanceof Date || value instanceof RegExp || value instanceof URL)
+    return value;
+  if (Array.isArray(value)) {
+    const result = [];
+    for (const item of value)
+      result.push(await transformObjectAsync(item, mapping));
+    return result;
+  }
+  const result2: any = {};
+  for (const [key, prop] of Object.entries(value))
+    result2[key] = await transformObjectAsync(prop, mapping);
+  return result2;
+}
--- a/packages/playwright-ct-core/src/mount.ts
+++ b/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, JsxComponent, MountOptions } 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[] = [];

@ -25,12 +27,16 @@ interface MountResult extends Locator {
  update(options: Omit<MountOptions, 'hooksConfig'> | string | JsxComponent): Promise<void>;
 }

-export const fixtures: Fixtures<
-  PlaywrightTestArgs & PlaywrightTestOptions & {
+type TestFixtures = PlaywrightTestArgs & PlaywrightTestOptions & {
  mount: (component: any, options: any) => Promise<MountResult>;
-  },
-  PlaywrightWorkerArgs & PlaywrightWorkerOptions & { _ctWorker: { context: BrowserContext | undefined, hash: string } },
-  { _contextFactory: (options?: BrowserContextOptions) => Promise<BrowserContext>, _contextReuseMode: ContextReuseMode }> = {
+};
+type WorkerFixtures = PlaywrightWorkerArgs & PlaywrightWorkerOptions & { _ctWorker: { context: BrowserContext | undefined, hash: string } };
+type BaseTestFixtures = {
+  _contextFactory: (options?: BrowserContextOptions) => Promise<BrowserContext>,
+  _contextReuseMode: ContextReuseMode
+};
+
+export const fixtures: Fixtures<TestFixtures, WorkerFixtures, BaseTestFixtures> = {

  _contextReuseMode: 'when-possible',

@ -42,7 +48,7 @@ export const fixtures: Fixtures<
    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!);
@ -51,9 +57,9 @@ export const fixtures: Fixtures<
  },

  mount: async ({ page }, use) => {
-      await use(async (component: JsxComponent | string, options?: MountOptions) => {
+    await use(async (componentRef: JsxComponent | ImportRef, options?: ObjectComponentOptions & MountOptions) => {
      const selector = await (page as any)._wrapApiCall(async () => {
-          return await innerMount(page, component, options);
+        return await innerMount(page, componentRef, options);
      }, true);
      const locator = page.locator(selector);
      return Object.assign(locator, {
@ -63,74 +69,45 @@ export const fixtures: Fixtures<
            await window.playwrightUnmount(rootElement);
          });
        },
-          update: async (options: JsxComponent | Omit<MountOptions, 'hooksConfig'>) => {
-            if (isJsxApi(options))
+        update: async (options: JsxComponent | ObjectComponentOptions) => {
+          if (isJsxComponent(options))
            return await innerUpdate(page, options);
-            await innerUpdate(page, component, options);
+          await innerUpdate(page, componentRef, options);
        }
      });
    });
    boundCallbacksForMount = [];
  },
-  };
+};

-function isJsxApi(options: Record<string, unknown>): options is JsxComponent {
-  return options?.kind === 'jsx';
+function isJsxComponent(component: any): component is JsxComponent {
+  return typeof component === 'object' && component && component.__pw_type === 'jsx';
 }

-async function innerUpdate(page: Page, jsxOrType: JsxComponent | string, options: Omit<MountOptions, 'hooksConfig'> = {}): Promise<void> {
-  const component = createComponent(jsxOrType, options);
-  wrapFunctions(component, page, boundCallbacksForMount);
+async function innerUpdate(page: Page, componentRef: JsxComponent | ImportRef, options: ObjectComponentOptions = {}): Promise<void> {
+  const component = wrapObject(createComponent(componentRef, options), boundCallbacksForMount);

  await page.evaluate(async ({ component }) => {
-    const unwrapFunctions = (object: any) => {
-      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.__pwUnwrapObject(component);
    const rootElement = document.getElementById('root')!;
    return await window.playwrightUpdate(rootElement, component);
  }, { component });
 }

-async function innerMount(page: Page, jsxOrType: JsxComponent | string, options: MountOptions = {}): Promise<string> {
-  const component = createComponent(jsxOrType, options);
-  wrapFunctions(component, page, boundCallbacksForMount);
+async function innerMount(page: Page, componentRef: JsxComponent | ImportRef, options: ObjectComponentOptions & MountOptions = {}): Promise<string> {
+  const component = wrapObject(createComponent(componentRef, options), 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) => {
-      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.__pwUnwrapObject(component);
    let rootElement = document.getElementById('root');
    if (!rootElement) {
      rootElement = document.createElement('div');
      rootElement.id = 'root';
      document.body.appendChild(rootElement);
    }
-
    await window.playwrightMount(component, rootElement, hooksConfig);

    return '#root >> internal:control=component';
@ -138,20 +115,12 @@ async function innerMount(page: Page, jsxOrType: JsxComponent | string, options:
  return selector;
 }

-function createComponent(jsxOrType: JsxComponent | string, options: Omit<MountOptions, 'hooksConfig'> = {}): Component {
-  if (typeof jsxOrType !== 'string') return jsxOrType;
-  return { __pw_component_marker: true, kind: 'object', type: jsxOrType, 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);
-    }
-  }
+function createComponent(component: JsxComponent | ImportRef, options: ObjectComponentOptions = {}): Component {
+  if (component.__pw_type === 'jsx')
+    return component;
+  return {
+    __pw_type: 'object-component',
+    type: component,
+    ...options,
+  };
 }
--- a/packages/playwright-ct-core/src/tsxTransform.ts
+++ b/packages/playwright-ct-core/src/tsxTransform.ts
@ -18,11 +18,11 @@ import path from 'path';
 import type { T, BabelAPI, PluginObj } from 'playwright/src/transform/babelBundle';
 import { types, declare, traverse } from 'playwright/lib/transform/babelBundle';
 import { resolveImportSpecifierExtension } from 'playwright/lib/util';
+import { setTransformData } from 'playwright/lib/transform/transform';
 const t: typeof T = types;

-const fullNames = new Map<string, string | undefined>();
-let componentNames: Set<string>;
-let componentIdentifiers: Set<T.Identifier>;
+let jsxComponentNames: Set<string>;
+let importInfos: Map<string, ImportInfo>;

 export default declare((api: BabelAPI) => {
  api.assertVersion(7);
@ -30,11 +30,42 @@ export default declare((api: BabelAPI) => {
  const result: PluginObj = {
    name: 'playwright-debug-transform',
    visitor: {
-      Program(path) {
-        fullNames.clear();
-        const result = collectComponentUsages(path.node);
-        componentNames = result.names;
-        componentIdentifiers = result.identifiers;
+      Program: {
+        enter(path) {
+          jsxComponentNames = collectJsxComponentUsages(path.node);
+          importInfos = new Map();
+        },
+        exit(path) {
+          let firstDeclaration: any;
+          let lastImportDeclaration: any;
+          path.get('body').forEach(p => {
+            if (p.isImportDeclaration())
+              lastImportDeclaration = p;
+            else if (!firstDeclaration)
+              firstDeclaration = p;
+          });
+          const insertionPath = lastImportDeclaration || firstDeclaration;
+          if (!insertionPath)
+            return;
+
+          for (const [localName, componentImport] of [...importInfos.entries()].reverse()) {
+            insertionPath.insertAfter(
+                t.variableDeclaration(
+                    'const',
+                    [
+                      t.variableDeclarator(
+                          t.identifier(localName),
+                          t.objectExpression([
+                            t.objectProperty(t.identifier('__pw_type'), t.stringLiteral('importRef')),
+                            t.objectProperty(t.identifier('id'), t.stringLiteral(componentImport.id)),
+                          ]),
+                      )
+                    ]
+                )
+            );
+          }
+          setTransformData('playwright-ct-core', [...importInfos.values()]);
+        }
      },

      ImportDeclaration(p) {
@ -42,176 +73,109 @@ export default declare((api: BabelAPI) => {
        if (!t.isStringLiteral(importNode.source))
          return;

-        let components = 0;
+        const ext = path.extname(importNode.source.value);
+
+        // Convert all non-JS imports into refs.
+        if (!allJsExtensions.has(ext)) {
          for (const specifier of importNode.specifiers) {
-          const specifierName = specifier.local.name;
-          const componentName = componentNames.has(specifierName) ? specifierName : [...componentNames].find(c => c.startsWith(specifierName + '.'));
-          if (!componentName)
-            continue;
            if (t.isImportNamespaceSpecifier(specifier))
              continue;
-          const { fullName } = componentInfo(specifier, importNode.source.value, this.filename!, componentName);
-          fullNames.set(componentName, fullName);
-          ++components;
+            const { localName, info } = importInfo(importNode, specifier, this.filename!);
+            importInfos.set(localName, info);
+          }
+          p.skip();
+          p.remove();
+          return;
        }

-        // All the imports were components => delete.
-        if (components && components === importNode.specifiers.length) {
+        // Convert JS imports that are used as components in JSX expressions into refs.
+        let importCount = 0;
+        for (const specifier of importNode.specifiers) {
+          if (t.isImportNamespaceSpecifier(specifier))
+            continue;
+          const { localName, info } = importInfo(importNode, specifier, this.filename!);
+          if (jsxComponentNames.has(localName)) {
+            importInfos.set(localName, info);
+            ++importCount;
+          }
+        }
+
+        // All the imports were from JSX => delete.
+        if (importCount && importCount === importNode.specifiers.length) {
          p.skip();
          p.remove();
        }
      },

-      Identifier(p) {
-        if (componentIdentifiers.has(p.node)) {
-          const componentName = fullNames.get(p.node.name) || p.node.name;
-          p.replaceWith(t.stringLiteral(componentName));
-        }
-      },
-
-      JSXElement(path) {
-        const jsxElement = path.node;
-        const jsxName = jsxElement.openingElement.name;
-        let nameOrExpression: string = '';
-        if (t.isJSXIdentifier(jsxName))
-          nameOrExpression = jsxName.name;
-        else if (t.isJSXMemberExpression(jsxName) && t.isJSXIdentifier(jsxName.object) && t.isJSXIdentifier(jsxName.property))
-          nameOrExpression = jsxName.object.name + '.' + jsxName.property.name;
-        if (!nameOrExpression)
+      MemberExpression(path) {
+        if (!t.isIdentifier(path.node.object))
          return;
-        const componentName = fullNames.get(nameOrExpression) || nameOrExpression;
-
-        const props: (T.ObjectProperty | T.SpreadElement)[] = [];
-
-        for (const jsxAttribute of jsxElement.openingElement.attributes) {
-          if (t.isJSXAttribute(jsxAttribute)) {
-            let namespace: T.JSXIdentifier | undefined;
-            let name: T.JSXIdentifier | undefined;
-            if (t.isJSXNamespacedName(jsxAttribute.name)) {
-              namespace = jsxAttribute.name.namespace;
-              name = jsxAttribute.name.name;
-            } else if (t.isJSXIdentifier(jsxAttribute.name)) {
-              name = jsxAttribute.name;
-            }
-            if (!name)
-              continue;
-            const attrName = (namespace ? namespace.name + ':' : '') + name.name;
-            if (t.isStringLiteral(jsxAttribute.value))
-              props.push(t.objectProperty(t.stringLiteral(attrName), jsxAttribute.value));
-            else if (t.isJSXExpressionContainer(jsxAttribute.value) && t.isExpression(jsxAttribute.value.expression))
-              props.push(t.objectProperty(t.stringLiteral(attrName), jsxAttribute.value.expression));
-            else if (jsxAttribute.value === null)
-              props.push(t.objectProperty(t.stringLiteral(attrName), t.booleanLiteral(true)));
-            else
-              props.push(t.objectProperty(t.stringLiteral(attrName), t.nullLiteral()));
-          } else if (t.isJSXSpreadAttribute(jsxAttribute)) {
-            props.push(t.spreadElement(jsxAttribute.argument));
-          }
-        }
-
-        const children: (T.Expression | T.SpreadElement)[] = [];
-        for (const child of jsxElement.children) {
-          if (t.isJSXText(child))
-            children.push(t.stringLiteral(child.value));
-          else if (t.isJSXElement(child))
-            children.push(child);
-          else if (t.isJSXExpressionContainer(child) && !t.isJSXEmptyExpression(child.expression))
-            children.push(child.expression);
-          else if (t.isJSXSpreadChild(child))
-            children.push(t.spreadElement(child.expression));
-        }
-
-        const component: T.ObjectProperty[] = [
-          t.objectProperty(t.identifier('__pw_component_marker'), t.booleanLiteral(true)),
-          t.objectProperty(t.identifier('kind'), t.stringLiteral('jsx')),
-          t.objectProperty(t.identifier('type'), t.stringLiteral(componentName)),
-          t.objectProperty(t.identifier('props'), t.objectExpression(props)),
-        ];
-        if (children.length)
-          component.push(t.objectProperty(t.identifier('children'), t.arrayExpression(children)));
-
-        path.replaceWith(t.objectExpression(component));
-      }
+        if (!importInfos.has(path.node.object.name))
+          return;
+        if (!t.isIdentifier(path.node.property))
+          return;
+        path.replaceWith(
+            t.objectExpression([
+              t.spreadElement(t.identifier(path.node.object.name)),
+              t.objectProperty(t.identifier('property'), t.stringLiteral(path.node.property.name)),
+            ])
+        );
+      },
    }
  };
  return result;
 });

-export function collectComponentUsages(node: T.Node) {
-  const importedLocalNames = new Set<string>();
+function collectJsxComponentUsages(node: T.Node): Set<string> {
  const names = new Set<string>();
-  const identifiers = new Set<T.Identifier>();
  traverse(node, {
    enter: p => {
-
-      // First look at all the imports.
-      if (t.isImportDeclaration(p.node)) {
-        const importNode = p.node;
-        if (!t.isStringLiteral(importNode.source))
-          return;
-
-        for (const specifier of importNode.specifiers) {
-          if (t.isImportNamespaceSpecifier(specifier))
-            continue;
-          importedLocalNames.add(specifier.local.name);
-        }
-      }
-
      // Treat JSX-everything as component usages.
      if (t.isJSXElement(p.node)) {
        if (t.isJSXIdentifier(p.node.openingElement.name))
          names.add(p.node.openingElement.name.name);
        if (t.isJSXMemberExpression(p.node.openingElement.name) && t.isJSXIdentifier(p.node.openingElement.name.object) && t.isJSXIdentifier(p.node.openingElement.name.property))
-          names.add(p.node.openingElement.name.object.name + '.' + p.node.openingElement.name.property.name);
-      }
-
-      // Treat mount(identifier, ...) as component usage if it is in the importedLocalNames list.
-      if (t.isAwaitExpression(p.node) && t.isCallExpression(p.node.argument) && t.isIdentifier(p.node.argument.callee) && p.node.argument.callee.name === 'mount') {
-        const callExpression = p.node.argument;
-        const arg = callExpression.arguments[0];
-        if (!t.isIdentifier(arg) || !importedLocalNames.has(arg.name))
-          return;
-
-        names.add(arg.name);
-        identifiers.add(arg);
+          names.add(p.node.openingElement.name.object.name);
      }
    }
  });
-  return { names, identifiers };
+  return names;
 }

-export type ComponentInfo = {
-  fullName: string;
-  importPath: string;
+export type ImportInfo = {
+  id: string;
  isModuleOrAlias: boolean;
-  importedName?: string;
-  importedNameProperty?: string;
-  deps: string[];
+  importPath: string;
+  remoteName: string | undefined;
 };

-export function componentInfo(specifier: T.ImportSpecifier | T.ImportDefaultSpecifier, importSource: string, filename: string, componentName: string): ComponentInfo {
+export function importInfo(importNode: T.ImportDeclaration, specifier: T.ImportSpecifier | T.ImportDefaultSpecifier, filename: string): { localName: string, info: ImportInfo } {
+  const importSource = importNode.source.value;
  const isModuleOrAlias = !importSource.startsWith('.');
  const unresolvedImportPath = path.resolve(path.dirname(filename), importSource);
  // Support following notations for Button.tsx:
  // - import { Button } from './Button.js' - via resolveImportSpecifierExtension
  // - import { Button } from './Button' - via require.resolve
  const importPath = isModuleOrAlias ? importSource : resolveImportSpecifierExtension(unresolvedImportPath) || require.resolve(unresolvedImportPath);
-  const prefix = importPath.replace(/[^\w_\d]/g, '_');
-  const pathInfo = { importPath, isModuleOrAlias };
+  const idPrefix = importPath.replace(/[^\w_\d]/g, '_');

-  const specifierName = specifier.local.name;
-  let fullNameSuffix = '';
-  let importedNameProperty = '';
-  if (componentName !== specifierName) {
-    const suffix = componentName.substring(specifierName.length + 1);
-    fullNameSuffix = '_' + suffix;
-    importedNameProperty = '.' + suffix;
+  const result: ImportInfo = {
+    id: idPrefix,
+    importPath,
+    isModuleOrAlias,
+    remoteName: undefined,
+  };
+
+  if (t.isImportDefaultSpecifier(specifier)) {
+  } else if (t.isIdentifier(specifier.imported)) {
+    result.remoteName = specifier.imported.name;
+  } else {
+    result.remoteName = specifier.imported.value;
  }

-  if (t.isImportDefaultSpecifier(specifier))
-    return { fullName: prefix + fullNameSuffix, importedNameProperty, deps: [], ...pathInfo };
-
-  if (t.isIdentifier(specifier.imported))
-    return { fullName: prefix + '_' + specifier.imported.name + fullNameSuffix, importedName: specifier.imported.name, importedNameProperty, deps: [], ...pathInfo };
-  return { fullName: prefix + '_' + specifier.imported.value + fullNameSuffix, importedName: specifier.imported.value, importedNameProperty, deps: [], ...pathInfo };
+  if (result.remoteName)
+    result.id += '_' + result.remoteName;
+  return { localName: specifier.local.name, info: result };
 }
+
+const allJsExtensions = new Set(['.js', '.jsx', '.cjs', '.mjs', '.ts', '.tsx', '.cts', '.mts', '']);
--- a/packages/playwright-ct-core/src/vitePlugin.ts
+++ b/packages/playwright-ct-core/src/vitePlugin.ts
@ -19,20 +19,19 @@ import type { PlaywrightTestConfig as BasePlaywrightTestConfig, FullConfig } fro

 import type { InlineConfig, Plugin, ResolveFn, ResolvedConfig, UserConfig } from 'vite';
 import type { TestRunnerPlugin } from '../../playwright/src/plugins';
-import type { ComponentInfo } from './tsxTransform';
 import type { AddressInfo } from 'net';
 import type { PluginContext } from 'rollup';
 import { debug } from 'playwright-core/lib/utilsBundle';

 import fs from 'fs';
 import path from 'path';
-import { parse, traverse, types as t } from 'playwright/lib/transform/babelBundle';
 import { stoppable } from 'playwright/lib/utilsBundle';
 import { assert, calculateSha1 } from 'playwright-core/lib/utils';
 import { getPlaywrightVersion } from 'playwright-core/lib/utils';
-import { setExternalDependencies } from 'playwright/lib/transform/compilationCache';
-import { collectComponentUsages, componentInfo } from './tsxTransform';
+import { getUserData, internalDependenciesForTestFile, setExternalDependencies } from 'playwright/lib/transform/compilationCache';
 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');

@ -107,7 +106,7 @@ export function createPlugin(
      let buildExists = false;
      let buildInfo: BuildInfo;

-      const registerSource = await fs.promises.readFile(registerSourceFile, 'utf-8');
+      const registerSource = injectedSource + '\n' + await fs.promises.readFile(registerSourceFile, 'utf-8');
      const registerSourceHash = calculateSha1(registerSource);

      try {
@ -122,16 +121,16 @@ export function createPlugin(
          viteVersion,
          registerSourceHash,
          components: [],
-          tests: {},
          sources: {},
+          deps: {},
        };
      }
      log('build exists:', buildExists);

      const componentRegistry: ComponentRegistry = new Map();
-      // 1. Re-parse changed tests and collect required components.
-      const hasNewTests = await checkNewTests(suite, buildInfo, componentRegistry);
-      log('has new tests:', hasNewTests);
+      const componentsByImportingFile = new Map<string, string[]>();
+      // 1. Populate component registry based on tests' component imports.
+      await populateComponentsFromTests(componentRegistry, componentsByImportingFile);

      // 2. Check if the set of required components has changed.
      const hasNewComponents = await checkNewComponents(buildInfo, componentRegistry);
@ -168,8 +167,9 @@ export function createPlugin(
        frameworkOverrides.plugins = [await frameworkPluginFactory()];

      // But only add out own plugin when we actually build / transform.
+      const depsCollector = new Map<string, string[]>();
      if (sourcesDirty)
-        frameworkOverrides.plugins!.push(vitePlugin(registerSource, templateDir, buildInfo, componentRegistry));
+        frameworkOverrides.plugins!.push(vitePlugin(registerSource, templateDir, buildInfo, componentRegistry, depsCollector));

      frameworkOverrides.build = {
        target: 'esnext',
@ -189,20 +189,31 @@ export function createPlugin(
        log('build');
        await build(finalConfig);
        await fs.promises.rename(`${finalConfig.build.outDir}/${relativeTemplateDir}/index.html`, `${finalConfig.build.outDir}/index.html`);
+        buildInfo.deps = Object.fromEntries(depsCollector.entries());
      }

-      if (hasNewTests || hasNewComponents || sourcesDirty) {
+      if (hasNewComponents || sourcesDirty) {
        log('write manifest');
        await fs.promises.writeFile(buildInfoFile, JSON.stringify(buildInfo, undefined, 2));
      }

-      for (const [filename, testInfo] of Object.entries(buildInfo.tests)) {
+      for (const projectSuite of suite.suites) {
+        for (const fileSuite of projectSuite.suites) {
+          // For every test file...
+          const testFile = fileSuite.location!.file;
          const deps = new Set<string>();
-        for (const componentName of testInfo.components) {
-          const component = componentRegistry.get(componentName);
-          component?.deps.forEach(d => deps.add(d));
+          // Collect its JS dependencies (helpers).
+          for (const file of [testFile, ...(internalDependenciesForTestFile(testFile) || [])]) {
+            // For each helper, get all the imported components.
+            for (const componentFile of componentsByImportingFile.get(file) || []) {
+              // For each component, get all the dependencies.
+              for (const d of depsCollector.get(componentFile) || [])
+                deps.add(d);
+            }
+          }
+          // Now we have test file => all components along with dependencies.
+          setExternalDependencies(testFile, [...deps]);
        }
-        setExternalDependencies(filename, [...deps]);
      }

      const previewServer = await preview(finalConfig);
@ -231,16 +242,13 @@ type BuildInfo = {
      timestamp: number;
    }
  };
-  components: ComponentInfo[];
-  tests: {
-    [key: string]: {
-      timestamp: number;
-      components: string[];
+  components: ImportInfo[];
+  deps: {
+    [key: string]: string[];
  }
-  };
 };

-type ComponentRegistry = Map<string, ComponentInfo>;
+type ComponentRegistry = Map<string, ImportInfo>;

 async function checkSources(buildInfo: BuildInfo): Promise<boolean> {
  for (const [source, sourceInfo] of Object.entries(buildInfo.sources)) {
@ -258,32 +266,18 @@ async function checkSources(buildInfo: BuildInfo): Promise<boolean> {
  return false;
 }

-async function checkNewTests(suite: Suite, buildInfo: BuildInfo, componentRegistry: ComponentRegistry): Promise<boolean> {
-  const testFiles = new Set<string>();
-  for (const project of suite.suites) {
-    for (const file of project.suites)
-      testFiles.add(file.location!.file);
+async function populateComponentsFromTests(componentRegistry: ComponentRegistry, componentsByImportingFile: Map<string, string[]>) {
+  const importInfos: Map<string, ImportInfo[]> = await getUserData('playwright-ct-core');
+  for (const [file, importList] of importInfos) {
+    for (const importInfo of importList)
+      componentRegistry.set(importInfo.id, importInfo);
+    componentsByImportingFile.set(file, importList.filter(i => !i.isModuleOrAlias).map(i => i.importPath));
  }
-
-  let hasNewTests = false;
-  for (const testFile of testFiles) {
-    const timestamp = (await fs.promises.stat(testFile)).mtimeMs;
-    if (buildInfo.tests[testFile]?.timestamp !== timestamp) {
-      const components = await parseTestFile(testFile);
-      log('changed test:', testFile);
-      for (const component of components)
-        componentRegistry.set(component.fullName, component);
-      buildInfo.tests[testFile] = { timestamp, components: components.map(c => c.fullName) };
-      hasNewTests = true;
-    }
-  }
-
-  return hasNewTests;
 }

 async function checkNewComponents(buildInfo: BuildInfo, componentRegistry: ComponentRegistry): Promise<boolean> {
  const newComponents = [...componentRegistry.keys()];
-  const oldComponents = new Map(buildInfo.components.map(c => [c.fullName, c]));
+  const oldComponents = new Map(buildInfo.components.map(c => [c.id, c]));

  let hasNewComponents = false;
  for (const c of newComponents) {
@ -293,42 +287,12 @@ async function checkNewComponents(buildInfo: BuildInfo, componentRegistry: Compo
    }
  }
  for (const c of oldComponents.values())
-    componentRegistry.set(c.fullName, c);
+    componentRegistry.set(c.id, c);

  return hasNewComponents;
 }

-async function parseTestFile(testFile: string): Promise<ComponentInfo[]> {
-  const text = await fs.promises.readFile(testFile, 'utf-8');
-  const ast = parse(text, { errorRecovery: true, plugins: ['typescript', 'jsx'], sourceType: 'module' });
-  const componentUsages = collectComponentUsages(ast);
-  const componentNames = componentUsages.names;
-  const result: ComponentInfo[] = [];
-
-  traverse(ast, {
-    enter: p => {
-      if (t.isImportDeclaration(p.node)) {
-        const importNode = p.node;
-        if (!t.isStringLiteral(importNode.source))
-          return;
-
-        for (const specifier of importNode.specifiers) {
-          const specifierName = specifier.local.name;
-          const componentName = componentNames.has(specifierName) ? specifierName : [...componentNames].find(c => c.startsWith(specifierName + '.'));
-          if (!componentName)
-            continue;
-          if (t.isImportNamespaceSpecifier(specifier))
-            continue;
-          result.push(componentInfo(specifier, importNode.source.value, testFile, componentName));
-        }
-      }
-    }
-  });
-
-  return result;
-}
-
-function vitePlugin(registerSource: string, templateDir: string, buildInfo: BuildInfo, componentRegistry: ComponentRegistry): Plugin {
+function vitePlugin(registerSource: string, templateDir: string, buildInfo: BuildInfo, importInfos: Map<string, ImportInfo>, depsCollector: Map<string, string[]>): Plugin {
  buildInfo.sources = {};
  let moduleResolver: ResolveFn;
  return {
@ -368,15 +332,12 @@ function vitePlugin(registerSource: string, templateDir: string, buildInfo: Buil
      const lines = [content, ''];
      lines.push(registerSource);

-      for (const [alias, value] of componentRegistry) {
+      for (const value of importInfos.values()) {
        const importPath = value.isModuleOrAlias ? value.importPath : './' + path.relative(folder, value.importPath).replace(/\\/g, '/');
-        if (value.importedName)
-          lines.push(`const ${alias} = () => import('${importPath}').then((mod) => mod.${value.importedName + (value.importedNameProperty || '')});`);
-        else
-          lines.push(`const ${alias} = () => import('${importPath}').then((mod) => mod.default${value.importedNameProperty || ''});`);
+        lines.push(`const ${value.id} = () => import('${importPath}').then((mod) => mod.${value.remoteName || 'default'});`);
      }

-      lines.push(`pwRegister({ ${[...componentRegistry.keys()].join(',\n  ')} });`);
+      lines.push(`__pwRegistry.initialize({ ${[...importInfos.keys()].join(',\n  ')} });`);
      return {
        code: lines.join('\n'),
        map: { mappings: '' }
@ -384,13 +345,13 @@ function vitePlugin(registerSource: string, templateDir: string, buildInfo: Buil
    },

    async writeBundle(this: PluginContext) {
-      for (const component of componentRegistry.values()) {
-        const id = (await moduleResolver(component.importPath));
+      for (const importInfo of importInfos.values()) {
+        const deps = new Set<string>();
+        const id = await moduleResolver(importInfo.importPath);
        if (!id)
          continue;
-        const deps = new Set<string>();
        collectViteModuleDependencies(this, id, deps);
-        component.deps = [...deps];
+        depsCollector.set(importInfo.importPath, [...deps]);
      }
    },
  };
@ -410,7 +371,7 @@ function collectViteModuleDependencies(context: PluginContext, id: string, deps:
    collectViteModuleDependencies(context, importedId, deps);
 }

-function hasJSComponents(components: ComponentInfo[]): boolean {
+function hasJSComponents(components: ImportInfo[]): boolean {
  for (const component of components) {
    const extname = path.extname(component.importPath);
    if (extname === '.js' || !extname && fs.existsSync(component.importPath + '.js'))
--- a/packages/playwright-ct-core/types/component.d.ts
+++ b/packages/playwright-ct-core/types/component.d.ts
@ -14,33 +14,32 @@
 * limitations under the License.
 */

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

-// JsxComponentChild can be anything, consider cases like: <>{1}</>, <>{null}</>
-export type JsxComponentChild = JsxComponent | string | number | boolean | null;
 export type JsxComponent = {
-  __pw_component_marker: true,
-  kind: 'jsx',
-  type: string,
+  __pw_type: 'jsx',
+  type: any,
  props: Record<string, any>,
-  children?: JsxComponentChild[],
 };

 export type MountOptions = {
-  props?: Record<string, any>,
-  slots?: Record<string, string | string[]>,
-  on?: Record<string, Function>,
  hooksConfig?: any,
 };

-export type ObjectComponent = {
-  __pw_component_marker: true,
-  kind: 'object',
-  type: string,
-  options?: MountOptions
+export type ObjectComponentOptions = {
+  props?: Record<string, any>;
+  slots?: Record<string, string | string[]>;
+  on?: Record<string, Function>;
+};
+
+export type ObjectComponent = ObjectComponentOptions & {
+  __pw_type: 'object-component',
+  type: any,
 };

 export type Component = JsxComponent | ObjectComponent;
@ -56,5 +55,10 @@ declare global {
    __pw_hooks_after_mount?: (<HooksConfig extends JsonObject = JsonObject>(
      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>;
+    __pwTransformObject: (value: any, mapping: (v: any) => { result: any } | undefined) => any;
  }
 }
--- a/packages/playwright-ct-react/package.json
+++ b/packages/playwright-ct-react/package.json
@ -1,6 +1,6 @@
 {
  "name": "@playwright/experimental-ct-react",
-  "version": "1.41.0-next",
+  "version": "1.41.1",
  "description": "Playwright Component Testing for React",
  "repository": {
    "type": "git",
@ -29,7 +29,7 @@
    }
  },
  "dependencies": {
-    "@playwright/experimental-ct-core": "1.41.0-next",
+    "@playwright/experimental-ct-core": "1.41.1",
    "@vitejs/plugin-react": "^4.0.0"
  },
  "bin": {
--- a/packages/playwright-ct-react/registerSource.mjs
+++ b/packages/playwright-ct-react/registerSource.mjs
@ -17,130 +17,38 @@
 // @ts-check
 // This file is injected into the registry as text, no dependencies are allowed.

-import * as __pwReact from 'react';
+import __pwReact from 'react';
 import { createRoot as __pwCreateRoot } from 'react-dom/client';
-
-/** @typedef {import('../playwright-ct-core/types/component').JsxComponentChild} JsxComponentChild */
 /** @typedef {import('../playwright-ct-core/types/component').JsxComponent} JsxComponent */
-/** @typedef {import('react').FunctionComponent} FrameworkComponent */

-/** @type {Map<string, () => Promise<FrameworkComponent>>} */
-const __pwLoaderRegistry = new Map();
-/** @type {Map<string, FrameworkComponent>} */
-const __pwRegistry = new Map();
 /** @type {Map<Element, import('react-dom/client').Root>} */
 const __pwRootRegistry = new Map();

-/**
- * @param {Record<string, () => Promise<FrameworkComponent>>} components
- */
-export function pwRegister(components) {
-  for (const [name, value] of Object.entries(components))
-    __pwLoaderRegistry.set(name, value);
-}
-
 /**
 * @param {any} component
 * @returns {component is JsxComponent}
 */
-function isComponent(component) {
-  return component.__pw_component_marker === true && component.kind === 'jsx';
+function isJsxComponent(component) {
+  return typeof component === 'object' && component && component.__pw_type === 'jsx';
 }

 /**
- * @param {JsxComponent | JsxComponentChild} component
+ * @param {any} value
 */
-async function __pwResolveComponent(component) {
-  if (!isComponent(component))
-    return;
-
-  let componentFactory = __pwLoaderRegistry.get(component.type);
-  if (!componentFactory) {
-    // Lookup by shorthand.
-    for (const [name, value] of __pwLoaderRegistry) {
-      if (component.type.endsWith(`_${name}`)) {
-        componentFactory = value;
-        break;
+function __pwRender(value) {
+  return window.__pwTransformObject(value, v => {
+    if (isJsxComponent(v)) {
+      const component = v;
+      const props = component.props ? __pwRender(component.props) : {};
+      return { result: __pwReact.createElement(/** @type { any } */ (component.type), { ...props, children: undefined }, props.children) };
    }
-    }
-  }
-
-  if (!componentFactory && component.type[0].toUpperCase() === component.type[0])
-    throw new Error(`Unregistered component: ${component.type}. Following components are registered: ${[...__pwRegistry.keys()]}`);
-
-  if (componentFactory)
-    __pwRegistry.set(component.type, await componentFactory());
-
-  if (component.children?.length)
-    await Promise.all(component.children.map(child => __pwResolveComponent(child)));
-
-  if (component.props)
-    await __resolveProps(component.props);
-}
-
-/**
-  * @param {Record<string, any>} props
-  */
-async function __resolveProps(props) {
-  for (const prop of Object.values(props)) {
-    if (Array.isArray(prop))
-      await Promise.all(prop.map(child => __pwResolveComponent(child)));
-    else if (isComponent(prop))
-      await __pwResolveComponent(prop);
-    else if (typeof prop === 'object' && prop !== null)
-      await __resolveProps(prop);
-  }
-}
-
-/**
- * @param {JsxComponentChild} child
- */
-function __renderChild(child) {
-  if (Array.isArray(child))
-    return child.map(grandChild => __renderChild(grandChild));
-  if (isComponent(child))
-    return __pwRender(child);
-  return child;
-}
-
-/**
-  * @param {Record<string, any>} props
-  */
-function __renderProps(props) {
-  const newProps = {};
-  for (const [key, prop] of Object.entries(props)) {
-    if (Array.isArray(prop))
-      newProps[key] = prop.map(child => __renderChild(child));
-    else if (isComponent(prop))
-      newProps[key] = __renderChild(prop);
-    else if (typeof prop === 'object' && prop !== null)
-      newProps[key] = __renderProps(prop);
-    else
-      newProps[key] = prop;
-  }
-  return newProps;
-}
-
-/**
- * @param {JsxComponent} component
- */
-function __pwRender(component) {
-  const componentFunc = __pwRegistry.get(component.type);
-  const props = __renderProps(component.props || {});
-  const children = component.children?.map(child => __renderChild(child)).filter(child => {
-    if (typeof child === 'string')
-      return !!child.trim();
-    return true;
  });
-  const reactChildren = Array.isArray(children) && children.length === 1 ? children[0] : children;
-  return __pwReact.createElement(componentFunc || component.type, props, reactChildren);
 }

 window.playwrightMount = async (component, rootElement, hooksConfig) => {
-  if (component.kind !== 'jsx')
+  if (!isJsxComponent(component))
    throw new Error('Object mount notation is not supported');

-  await __pwResolveComponent(component);
  let App = () => __pwRender(component);
  for (const hook of window.__pw_hooks_before_mount || []) {
    const wrapper = await hook({ App, hooksConfig });
@ -171,10 +79,9 @@ window.playwrightUnmount = async rootElement => {
 };

 window.playwrightUpdate = async (rootElement, component) => {
-  if (component.kind !== 'jsx')
+  if (!isJsxComponent(component))
    throw new Error('Object mount notation is not supported');

-  await __pwResolveComponent(component);
  const root = __pwRootRegistry.get(rootElement);
  if (root === undefined)
    throw new Error('Component was not mounted');
--- a/packages/playwright-ct-react17/package.json
+++ b/packages/playwright-ct-react17/package.json
@ -1,6 +1,6 @@
 {
  "name": "@playwright/experimental-ct-react17",
-  "version": "1.41.0-next",
+  "version": "1.41.1",
  "description": "Playwright Component Testing for React",
  "repository": {
    "type": "git",
@ -29,7 +29,7 @@
    }
  },
  "dependencies": {
-    "@playwright/experimental-ct-core": "1.41.0-next",
+    "@playwright/experimental-ct-core": "1.41.1",
    "@vitejs/plugin-react": "^4.0.0"
  },
  "bin": {
--- a/packages/playwright-ct-react17/registerSource.mjs
+++ b/packages/playwright-ct-react17/registerSource.mjs
@ -17,93 +17,35 @@
 // @ts-check
 // This file is injected into the registry as text, no dependencies are allowed.

-// Don't clash with the user land.
 import __pwReact from 'react';
 import __pwReactDOM from 'react-dom';
-
-/** @typedef {import('../playwright-ct-core/types/component').JsxComponentChild} JsxComponentChild */
 /** @typedef {import('../playwright-ct-core/types/component').JsxComponent} JsxComponent */
-/** @typedef {import('react').FunctionComponent} FrameworkComponent */
-
-/** @type {Map<string, () => Promise<FrameworkComponent>>} */
-const __pwLoaderRegistry = new Map();
-/** @type {Map<string, FrameworkComponent>} */
-const __pwRegistry = new Map();
-
-/**
- * @param {{[key: string]: () => Promise<FrameworkComponent>}} components
- */
-export function pwRegister(components) {
-  for (const [name, value] of Object.entries(components))
-    __pwLoaderRegistry.set(name, value);
-}

 /**
 * @param {any} component
 * @returns {component is JsxComponent}
 */
-function isComponent(component) {
-  return !(typeof component !== 'object' || Array.isArray(component));
+function isJsxComponent(component) {
+  return typeof component === 'object' && component && component.__pw_type === 'jsx';
 }

 /**
- * @param {JsxComponent | JsxComponentChild} component
+ * @param {any} value
 */
-async function __pwResolveComponent(component) {
-  if (!isComponent(component))
-    return;
-
-  let componentFactory = __pwLoaderRegistry.get(component.type);
-  if (!componentFactory) {
-    // Lookup by shorthand.
-    for (const [name, value] of __pwLoaderRegistry) {
-      if (component.type.endsWith(`_${name}`)) {
-        componentFactory = value;
-        break;
+function __pwRender(value) {
+  return window.__pwTransformObject(value, v => {
+    if (isJsxComponent(v)) {
+      const component = v;
+      const props = component.props ? __pwRender(component.props) : {};
+      return { result: __pwReact.createElement(/** @type { any } */ (component.type), { ...props, children: undefined }, props.children) };
    }
-    }
-  }
-
-  if (!componentFactory && component.type[0].toUpperCase() === component.type[0])
-    throw new Error(`Unregistered component: ${component.type}. Following components are registered: ${[...__pwRegistry.keys()]}`);
-
-  if (componentFactory)
-    __pwRegistry.set(component.type, await componentFactory());
-
-  if (component.children?.length)
-    await Promise.all(component.children.map(child => __pwResolveComponent(child)));
-}
-
-/**
- * @param {JsxComponentChild} child
- */
-function __renderChild(child) {
-  if (Array.isArray(child))
-    return child.map(grandChild => __renderChild(grandChild));
-  if (isComponent(child))
-    return __pwRender(child);
-  return child;
-}
-
-/**
- * @param {JsxComponent} component
- */
-function __pwRender(component) {
-  const componentFunc = __pwRegistry.get(component.type);
-  const children = component.children?.map(child => __renderChild(child)).filter(child => {
-    if (typeof child === 'string')
-      return !!child.trim();
-    return true;
  });
-  const reactChildren = Array.isArray(children) && children.length === 1 ? children[0] : children;
-  return __pwReact.createElement(componentFunc || component.type, component.props, reactChildren);
 }

 window.playwrightMount = async (component, rootElement, hooksConfig) => {
-  if (component.kind !== 'jsx')
+  if (!isJsxComponent(component))
    throw new Error('Object mount notation is not supported');

-  await __pwResolveComponent(component);
  let App = () => __pwRender(component);
  for (const hook of window.__pw_hooks_before_mount || []) {
    const wrapper = await hook({ App, hooksConfig });
@ -123,9 +65,8 @@ window.playwrightUnmount = async rootElement => {
 };

 window.playwrightUpdate = async (rootElement, component) => {
-  if (component.kind !== 'jsx')
+  if (!isJsxComponent(component))
    throw new Error('Object mount notation is not supported');

-  await __pwResolveComponent(component);
  __pwReactDOM.render(__pwRender(component), rootElement);
 };
--- a/packages/playwright-ct-solid/package.json
+++ b/packages/playwright-ct-solid/package.json
@ -1,6 +1,6 @@
 {
  "name": "@playwright/experimental-ct-solid",
-  "version": "1.41.0-next",
+  "version": "1.41.1",
  "description": "Playwright Component Testing for Solid",
  "repository": {
    "type": "git",
@ -29,7 +29,7 @@
    }
  },
  "dependencies": {
-    "@playwright/experimental-ct-core": "1.41.0-next",
+    "@playwright/experimental-ct-core": "1.41.1",
    "vite-plugin-solid": "^2.7.0"
  },
  "devDependencies": {
--- a/packages/playwright-ct-solid/registerSource.mjs
+++ b/packages/playwright-ct-solid/registerSource.mjs
@ -20,94 +20,62 @@
 import { render as __pwSolidRender, createComponent as __pwSolidCreateComponent } from 'solid-js/web';
 import __pwH from 'solid-js/h';

-/** @typedef {import('../playwright-ct-core/types/component').JsxComponentChild} JsxComponentChild */
 /** @typedef {import('../playwright-ct-core/types/component').JsxComponent} JsxComponent */
 /** @typedef {() => import('solid-js').JSX.Element} FrameworkComponent */

-/** @type {Map<string, () => Promise<FrameworkComponent>>} */
-const __pwLoaderRegistry = new Map();
-/** @type {Map<string, FrameworkComponent>} */
-const __pwRegistry = new Map();
-
-/**
- * @param {{[key: string]: () => Promise<FrameworkComponent>}} components
- */
-export function pwRegister(components) {
-  for (const [name, value] of Object.entries(components))
-    __pwLoaderRegistry.set(name, value);
-}
-
 /**
 * @param {any} component
 * @returns {component is JsxComponent}
 */
-function isComponent(component) {
-  return !(typeof component !== 'object' || Array.isArray(component));
+function isJsxComponent(component) {
+  return typeof component === 'object' && component && component.__pw_type === 'jsx';
 }

 /**
- * @param {JsxComponent | JsxComponentChild} component
- */
-async function __pwResolveComponent(component) {
-  if (!isComponent(component))
-    return;
-
-  let componentFactory = __pwLoaderRegistry.get(component.type);
-  if (!componentFactory) {
-    // Lookup by shorthand.
-    for (const [name, value] of __pwLoaderRegistry) {
-      if (component.type.endsWith(`_${name}`)) {
-        componentFactory = value;
-        break;
-      }
-    }
-  }
-
-  if (!componentFactory && component.type[0].toUpperCase() === component.type[0])
-    throw new Error(`Unregistered component: ${component.type}. Following components are registered: ${[...__pwRegistry.keys()]}`);
-
-  if (componentFactory)
-    __pwRegistry.set(component.type, await componentFactory());
-
-  if (component.children?.length)
-    await Promise.all(component.children.map(child => __pwResolveComponent(child)));
-}
-
-/**
- * @param {JsxComponentChild} child
+ * @param {any} child
 */
 function __pwCreateChild(child) {
  if (Array.isArray(child))
    return child.map(grandChild => __pwCreateChild(grandChild));
-  if (isComponent(child))
+  if (isJsxComponent(child))
    return __pwCreateComponent(child);
  return child;
 }

+/**
+ * @param {JsxComponent} component
+ * @returns {any[] | undefined}
+ */
+function __pwJsxChildArray(component) {
+  if (!component.props.children)
+    return;
+  if (Array.isArray(component.props.children))
+    return component.props.children;
+  return [component.props.children];
+}
+
 /**
 * @param {JsxComponent} component
 */
 function __pwCreateComponent(component) {
-  const componentFunc = __pwRegistry.get(component.type);
-  const children = component.children?.map(child => __pwCreateChild(child)).filter(child => {
+  const children = __pwJsxChildArray(component)?.map(child => __pwCreateChild(child)).filter(child => {
    if (typeof child === 'string')
      return !!child.trim();
    return true;
  });

-  if (!componentFunc)
+  if (typeof component.type === 'string')
    return __pwH(component.type, component.props, children);

-  return __pwSolidCreateComponent(componentFunc, { ...component.props, children });
+  return __pwSolidCreateComponent(component.type, { ...component.props, children });
 }

 const __pwUnmountKey = Symbol('unmountKey');

 window.playwrightMount = async (component, rootElement, hooksConfig) => {
-  if (component.kind !== 'jsx')
+  if (!isJsxComponent(component))
    throw new Error('Object mount notation is not supported');

-  await __pwResolveComponent(component);
  let App = () => __pwCreateComponent(component);
  for (const hook of window.__pw_hooks_before_mount || []) {
    const wrapper = await hook({ App, hooksConfig });
@ -131,7 +99,7 @@ window.playwrightUnmount = async rootElement => {
 };

 window.playwrightUpdate = async (rootElement, component) => {
-  if (component.kind !== 'jsx')
+  if (!isJsxComponent(component))
    throw new Error('Object mount notation is not supported');

  window.playwrightUnmount(rootElement);
--- a/packages/playwright-ct-svelte/package.json
+++ b/packages/playwright-ct-svelte/package.json
@ -1,6 +1,6 @@
 {
  "name": "@playwright/experimental-ct-svelte",
-  "version": "1.41.0-next",
+  "version": "1.41.1",
  "description": "Playwright Component Testing for Svelte",
  "repository": {
    "type": "git",
@ -29,7 +29,7 @@
    }
  },
  "dependencies": {
-    "@playwright/experimental-ct-core": "1.41.0-next",
+    "@playwright/experimental-ct-core": "1.41.1",
    "@sveltejs/vite-plugin-svelte": "^3.0.1"
  },
  "devDependencies": {
--- a/packages/playwright-ct-svelte/registerSource.mjs
+++ b/packages/playwright-ct-svelte/registerSource.mjs
@ -25,50 +25,12 @@ import { detach as __pwDetach, insert as __pwInsert, noop as __pwNoop } from 'sv
 /** @typedef {any} FrameworkComponent */
 /** @typedef {import('svelte').SvelteComponent} SvelteComponent */

-/** @type {Map<string, () => Promise<FrameworkComponent>>} */
-const __pwLoaderRegistry = new Map();
-/** @type {Map<string, FrameworkComponent>} */
-const __pwRegistry = new Map();
-
-/**
- * @param {{[key: string]: () => Promise<FrameworkComponent>}} components
- */
-export function pwRegister(components) {
-  for (const [name, value] of Object.entries(components))
-    __pwLoaderRegistry.set(name, value);
-}
-
 /**
 * @param {any} component
 * @returns {component is ObjectComponent}
 */
-function isComponent(component) {
-  return !(typeof component !== 'object' || Array.isArray(component));
-}
-
-/**
- * @param {ObjectComponent} component
- */
-async function __pwResolveComponent(component) {
-  if (!isComponent(component))
-    return;
-
-  let componentFactory = __pwLoaderRegistry.get(component.type);
-  if (!componentFactory) {
-    // Lookup by shorthand.
-    for (const [name, value] of __pwLoaderRegistry) {
-      if (component.type.endsWith(`_${name}_svelte`)) {
-        componentFactory = value;
-        break;
-      }
-    }
-  }
-
-  if (!componentFactory)
-    throw new Error(`Unregistered component: ${component.type}. Following components are registered: ${[...__pwRegistry.keys()]}`);
-
-  if (componentFactory)
-    __pwRegistry.set(component.type, await componentFactory());
+function isObjectComponent(component) {
+  return typeof component === 'object' && component && component.__pw_type === 'object-component';
 }

 /**
@ -105,19 +67,19 @@ function __pwCreateSlots(slots) {
 const __pwSvelteComponentKey = Symbol('svelteComponent');

 window.playwrightMount = async (component, rootElement, hooksConfig) => {
-  if (component.kind !== 'object')
+  if (!isObjectComponent(component))
    throw new Error('JSX mount notation is not supported');

-  await __pwResolveComponent(component);
-  const componentCtor = __pwRegistry.get(component.type);
+  const objectComponent = component;
+  const componentCtor = component.type;

  class App extends componentCtor {
    constructor(options = {}) {
      super({
        target: rootElement,
        props: {
-          ...component.options?.props,
-          $$slots: __pwCreateSlots(component.options?.slots),
+          ...objectComponent.props,
+          $$slots: __pwCreateSlots(objectComponent.slots),
          $$scope: {},
        },
        ...options
@ -134,7 +96,7 @@ window.playwrightMount = async (component, rootElement, hooksConfig) => {

  rootElement[__pwSvelteComponentKey] = svelteComponent;

-  for (const [key, listener] of Object.entries(component.options?.on || {}))
+  for (const [key, listener] of Object.entries(objectComponent.on || {}))
    svelteComponent.$on(key, event => listener(event.detail));

  for (const hook of window.__pw_hooks_after_mount || [])
@ -149,17 +111,16 @@ window.playwrightUnmount = async rootElement => {
 };

 window.playwrightUpdate = async (rootElement, component) => {
-  if (component.kind !== 'object')
+  if (!isObjectComponent(component))
    throw new Error('JSX mount notation is not supported');

-  await __pwResolveComponent(component);
  const svelteComponent = /** @type {SvelteComponent} */ (rootElement[__pwSvelteComponentKey]);
  if (!svelteComponent)
    throw new Error('Component was not mounted');

-  for (const [key, listener] of Object.entries(component.options?.on || {}))
+  for (const [key, listener] of Object.entries(component.on || {}))
    svelteComponent.$on(key, event => listener(event.detail));

-  if (component.options?.props)
-    svelteComponent.$set(component.options.props);
+  if (component.props)
+    svelteComponent.$set(component.props);
 };
--- a/packages/playwright-ct-vue/package.json
+++ b/packages/playwright-ct-vue/package.json
@ -1,6 +1,6 @@
 {
  "name": "@playwright/experimental-ct-vue",
-  "version": "1.41.0-next",
+  "version": "1.41.1",
  "description": "Playwright Component Testing for Vue",
  "repository": {
    "type": "git",
@ -29,7 +29,7 @@
    }
  },
  "dependencies": {
-    "@playwright/experimental-ct-core": "1.41.0-next",
+    "@playwright/experimental-ct-core": "1.41.1",
    "@vitejs/plugin-vue": "^4.2.1"
  },
  "bin": {
--- a/packages/playwright-ct-vue/registerSource.mjs
+++ b/packages/playwright-ct-vue/registerSource.mjs
@ -22,69 +22,35 @@ import { compile as __pwCompile } from '@vue/compiler-dom';
 import * as __pwVue from 'vue';

 /** @typedef {import('../playwright-ct-core/types/component').Component} Component */
-/** @typedef {import('../playwright-ct-core/types/component').JsxComponentChild} JsxComponentChild */
 /** @typedef {import('../playwright-ct-core/types/component').JsxComponent} JsxComponent */
 /** @typedef {import('../playwright-ct-core/types/component').ObjectComponent} ObjectComponent */
 /** @typedef {import('vue').Component} FrameworkComponent */

-/** @type {Map<string, () => Promise<FrameworkComponent>>} */
-const __pwLoaderRegistry = new Map();
-/** @type {Map<string, FrameworkComponent>} */
-const __pwRegistry = new Map();
+const __pwAllListeners = new Map();

 /**
- * @param {{[key: string]: () => Promise<FrameworkComponent>}} components
+ * @param {any} component
+ * @returns {component is ObjectComponent}
 */
-export function pwRegister(components) {
-  for (const [name, value] of Object.entries(components))
-    __pwLoaderRegistry.set(name, value);
+function isObjectComponent(component) {
+  return typeof component === 'object' && component && component.__pw_type === 'object-component';
 }

 /**
 * @param {any} component
- * @returns {component is Component}
+ * @returns {component is JsxComponent}
 */
-function isComponent(component) {
-  return !(typeof component !== 'object' || Array.isArray(component));
+function isJsxComponent(component) {
+  return typeof component === 'object' && component && component.__pw_type === 'jsx';
 }

 /**
- * @param {Component | JsxComponentChild} component
- */
-async function __pwResolveComponent(component) {
-  if (!isComponent(component))
-    return;
-
-  let componentFactory = __pwLoaderRegistry.get(component.type);
-  if (!componentFactory) {
-    // Lookup by shorthand.
-    for (const [name, value] of __pwLoaderRegistry) {
-      if (component.type.endsWith(`_${name}_vue`)) {
-        componentFactory = value;
-        break;
-      }
-    }
-  }
-
-  if (!componentFactory && component.type[0].toUpperCase() === component.type[0])
-    throw new Error(`Unregistered component: ${component.type}. Following components are registered: ${[...__pwRegistry.keys()]}`);
-
-  if (componentFactory)
-    __pwRegistry.set(component.type, await componentFactory());
-
-  if ('children' in component && component.children?.length)
-    await Promise.all(component.children.map(child => __pwResolveComponent(child)));
-}
-
-const __pwAllListeners = new Map();
-
-/**
- * @param {JsxComponentChild} child
+ * @param {any} child
 */
 function __pwCreateChild(child) {
  if (Array.isArray(child))
    return child.map(grandChild => __pwCreateChild(grandChild));
-  if (isComponent(child))
+  if (isJsxComponent(child) || isObjectComponent(child))
    return __pwCreateWrapper(child);
  return child;
 }
@ -132,14 +98,23 @@ function __pwSlotToFunction(slot) {
  throw Error(`Invalid slot received.`);
 }

+/**
+ * @param {JsxComponent} component
+ * @returns {any[] | undefined}
+ */
+function __pwJsxChildArray(component) {
+  if (!component.props.children)
+    return;
+  if (Array.isArray(component.props.children))
+    return component.props.children;
+  return [component.props.children];
+}
+
 /**
 * @param {Component} component
 */
 function __pwCreateComponent(component) {
-  let componentFunc = __pwRegistry.get(component.type);
-  componentFunc = componentFunc || component.type;
-
-  const isVueComponent = componentFunc !== component.type;
+  const isVueComponent = typeof component.type !== 'string';

  /**
   * @type {(import('vue').VNode | string)[]}
@ -151,12 +126,12 @@ function __pwCreateComponent(component) {
  /** @type {{[key: string]: any}} */
  let props = {};

-  if (component.kind === 'jsx') {
-    for (const child of component.children || []) {
-      if (typeof child !== 'string' && child.type === 'template' && child.kind === 'jsx') {
+  if (component.__pw_type === 'jsx') {
+    for (const child of __pwJsxChildArray(component) || []) {
+      if (isJsxComponent(child) && child.type === 'template') {
        const slotProperty = Object.keys(child.props).find(k => k.startsWith('v-slot:'));
        const slot = slotProperty ? slotProperty.substring('v-slot:'.length) : 'default';
-        slots[slot] = child.children?.map(__pwCreateChild);
+        slots[slot] = __pwJsxChildArray(child)?.map(__pwCreateChild);
      } else {
        children.push(__pwCreateChild(child));
      }
@ -175,16 +150,16 @@ function __pwCreateComponent(component) {
    }
  }

-  if (component.kind === 'object') {
+  if (component.__pw_type === 'object-component') {
    // Vue test util syntax.
-    for (const [key, value] of Object.entries(component.options?.slots || {})) {
+    for (const [key, value] of Object.entries(component.slots || {})) {
      if (key === 'default')
        children.push(__pwSlotToFunction(value));
      else
        slots[key] = __pwSlotToFunction(value);
    }
-    props = component.options?.props || {};
-    for (const [key, value] of Object.entries(component.options?.on || {}))
+    props = component.props || {};
+    for (const [key, value] of Object.entries(component.on || {}))
      listeners[key] = value;
  }

@ -197,7 +172,7 @@ function __pwCreateComponent(component) {
    lastArg = children;
  }

-  return { Component: componentFunc, props, slots: lastArg, listeners };
+  return { Component: component.type, props, slots: lastArg, listeners };
 }

 function __pwWrapFunctions(slots) {
@ -248,7 +223,6 @@ const __pwAppKey = Symbol('appKey');
 const __pwWrapperKey = Symbol('wrapperKey');

 window.playwrightMount = async (component, rootElement, hooksConfig) => {
-  await __pwResolveComponent(component);
  const app = __pwCreateApp({
    render: () => {
      const wrapper = __pwCreateWrapper(component);
@ -275,7 +249,6 @@ window.playwrightUnmount = async rootElement => {
 };

 window.playwrightUpdate = async (rootElement, component) => {
-  await __pwResolveComponent(component);
  const wrapper = rootElement[__pwWrapperKey];
  if (!wrapper)
    throw new Error('Component was not mounted');
--- a/packages/playwright-ct-vue2/package.json
+++ b/packages/playwright-ct-vue2/package.json
@ -1,6 +1,6 @@
 {
  "name": "@playwright/experimental-ct-vue2",
-  "version": "1.41.0-next",
+  "version": "1.41.1",
  "description": "Playwright Component Testing for Vue2",
  "repository": {
    "type": "git",
@ -29,7 +29,7 @@
    }
  },
  "dependencies": {
-    "@playwright/experimental-ct-core": "1.41.0-next",
+    "@playwright/experimental-ct-core": "1.41.1",
    "@vitejs/plugin-vue2": "^2.2.0"
  },
  "devDependencies": {
--- a/packages/playwright-ct-vue2/registerSource.mjs
+++ b/packages/playwright-ct-vue2/registerSource.mjs
@ -21,67 +21,33 @@
 import __pwVue, { h as __pwH } from 'vue';

 /** @typedef {import('../playwright-ct-core/types/component').Component} Component */
-/** @typedef {import('../playwright-ct-core/types/component').JsxComponentChild} JsxComponentChild */
 /** @typedef {import('../playwright-ct-core/types/component').JsxComponent} JsxComponent */
 /** @typedef {import('../playwright-ct-core/types/component').ObjectComponent} ObjectComponent */
 /** @typedef {import('vue').Component} FrameworkComponent */

-/** @type {Map<string, () => Promise<FrameworkComponent>>} */
-const __pwLoaderRegistry = new Map();
-/** @type {Map<string, FrameworkComponent>} */
-const __pwRegistry = new Map();
-
 /**
- * @param {{[key: string]: () => Promise<FrameworkComponent>}} components
+ * @param {any} component
+ * @returns {component is ObjectComponent}
 */
-export function pwRegister(components) {
-  for (const [name, value] of Object.entries(components))
-    __pwLoaderRegistry.set(name, value);
+function isObjectComponent(component) {
+  return typeof component === 'object' && component && component.__pw_type === 'object-component';
 }

 /**
 * @param {any} component
- * @returns {component is Component}
+ * @returns {component is JsxComponent}
 */
-function isComponent(component) {
-  return !(typeof component !== 'object' || Array.isArray(component));
+function isJsxComponent(component) {
+  return typeof component === 'object' && component && component.__pw_type === 'jsx';
 }

 /**
- * @param {Component | JsxComponentChild} component
- */
-async function __pwResolveComponent(component) {
-  if (!isComponent(component))
-    return;
-
-  let componentFactory = __pwLoaderRegistry.get(component.type);
-  if (!componentFactory) {
-    // Lookup by shorthand.
-    for (const [name, value] of __pwLoaderRegistry) {
-      if (component.type.endsWith(`_${name}_vue`)) {
-        componentFactory = value;
-        break;
-      }
-    }
-  }
-
-  if (!componentFactory && component.type[0].toUpperCase() === component.type[0])
-    throw new Error(`Unregistered component: ${component.type}. Following components are registered: ${[...__pwRegistry.keys()]}`);
-
-  if (componentFactory)
-    __pwRegistry.set(component.type, await componentFactory());
-
-  if ('children' in component && component.children?.length)
-    await Promise.all(component.children.map(child => __pwResolveComponent(child)));
-}
-
-/**
- * @param {Component | JsxComponentChild} child
+ * @param {any} child
 */
 function __pwCreateChild(child) {
  if (Array.isArray(child))
    return child.map(grandChild => __pwCreateChild(grandChild));
-  if (isComponent(child))
+  if (isJsxComponent(child) || isObjectComponent(child))
    return __pwCreateWrapper(child);
  return child;
 }
@ -94,18 +60,26 @@ function __pwCreateChild(child) {
 * @return {boolean}
 */
 function __pwComponentHasKeyInProps(Component, key) {
-  if (Array.isArray(Component.props))
-    return Component.props.includes(key);
+  return typeof Component.props === 'object' && Component.props && key in Component.props;
+}

-  return Object.entries(Component.props).flat().includes(key);
+/**
+ * @param {JsxComponent} component
+ * @returns {any[] | undefined}
+ */
+function __pwJsxChildArray(component) {
+  if (!component.props.children)
+    return;
+  if (Array.isArray(component.props.children))
+    return component.props.children;
+  return [component.props.children];
 }

 /**
 * @param {Component} component
 */
 function __pwCreateComponent(component) {
-  const componentFunc = __pwRegistry.get(component.type) || component.type;
-  const isVueComponent = componentFunc !== component.type;
+  const isVueComponent = typeof component.type !== 'string';

  /**
   * @type {(import('vue').VNode | string)[]}
@ -119,12 +93,12 @@ function __pwCreateComponent(component) {
  nodeData.scopedSlots = {};
  nodeData.on = {};

-  if (component.kind === 'jsx') {
-    for (const child of component.children || []) {
-      if (typeof child !== 'string' && child.type === 'template' && child.kind === 'jsx') {
+  if (component.__pw_type === 'jsx') {
+    for (const child of __pwJsxChildArray(component) || []) {
+      if (isJsxComponent(child) && child.type === 'template') {
        const slotProperty = Object.keys(child.props).find(k => k.startsWith('v-slot:'));
        const slot = slotProperty ? slotProperty.substring('v-slot:'.length) : 'default';
-        nodeData.scopedSlots[slot] = () => child.children?.map(c => __pwCreateChild(c));
+        nodeData.scopedSlots[slot] = () => __pwJsxChildArray(child)?.map(c => __pwCreateChild(c));
      } else {
        children.push(__pwCreateChild(child));
      }
@ -135,7 +109,7 @@ function __pwCreateComponent(component) {
        const event = key.substring('v-on:'.length);
        nodeData.on[event] = value;
      } else {
-        if (isVueComponent && __pwComponentHasKeyInProps(componentFunc, key))
+        if (isVueComponent && __pwComponentHasKeyInProps(component.type, key))
          nodeData.props[key] = value;
        else
          nodeData.attrs[key] = value;
@ -143,18 +117,17 @@ function __pwCreateComponent(component) {
    }
  }

-  if (component.kind === 'object') {
+  if (component.__pw_type === 'object-component') {
    // Vue test util syntax.
-    const options = component.options || {};
-    for (const [key, value] of Object.entries(options.slots || {})) {
+    for (const [key, value] of Object.entries(component.slots || {})) {
      const list = (Array.isArray(value) ? value : [value]).map(v => __pwCreateChild(v));
      if (key === 'default')
        children.push(...list);
      else
        nodeData.scopedSlots[key] = () => list;
    }
-    nodeData.props = options.props || {};
-    for (const [key, value] of Object.entries(options.on || {}))
+    nodeData.props = component.props || {};
+    for (const [key, value] of Object.entries(component.on || {}))
      nodeData.on[key] = value;
  }

@ -167,7 +140,7 @@ function __pwCreateComponent(component) {
    lastArg = children;
  }

-  return { Component: componentFunc, nodeData, slots: lastArg };
+  return { Component: component.type, nodeData, slots: lastArg };
 }

 /**
@ -184,7 +157,6 @@ const instanceKey = Symbol('instanceKey');
 const wrapperKey = Symbol('wrapperKey');

 window.playwrightMount = async (component, rootElement, hooksConfig) => {
-  await __pwResolveComponent(component);
  let options = {};
  for (const hook of window.__pw_hooks_before_mount || [])
    options = await hook({ hooksConfig, Vue: __pwVue });
@ -213,7 +185,6 @@ window.playwrightUnmount = async rootElement => {
 };

 window.playwrightUpdate = async (element, options) => {
-  await __pwResolveComponent(options);
  const wrapper = /** @type {any} */(element)[wrapperKey];
  if (!wrapper)
    throw new Error('Component was not mounted');
--- a/packages/playwright-firefox/package.json
+++ b/packages/playwright-firefox/package.json
@ -1,6 +1,6 @@
 {
  "name": "playwright-firefox",
-  "version": "1.41.0-next",
+  "version": "1.41.1",
  "description": "A high-level API to automate Firefox",
  "repository": {
    "type": "git",
@ -30,6 +30,6 @@
    "install": "node install.js"
  },
  "dependencies": {
-    "playwright-core": "1.41.0-next"
+    "playwright-core": "1.41.1"
  }
 }
--- a/packages/playwright-test/package.json
+++ b/packages/playwright-test/package.json
@ -1,6 +1,6 @@
 {
  "name": "@playwright/test",
-  "version": "1.41.0-next",
+  "version": "1.41.1",
  "description": "A high-level API to automate web browsers",
  "repository": {
    "type": "git",
@ -30,6 +30,6 @@
  },
  "scripts": {},
  "dependencies": {
-    "playwright": "1.41.0-next"
+    "playwright": "1.41.1"
  }
 }
--- a/packages/playwright-webkit/package.json
+++ b/packages/playwright-webkit/package.json
@ -1,6 +1,6 @@
 {
  "name": "playwright-webkit",
-  "version": "1.41.0-next",
+  "version": "1.41.1",
  "description": "A high-level API to automate WebKit",
  "repository": {
    "type": "git",
@ -30,6 +30,6 @@
    "install": "node install.js"
  },
  "dependencies": {
-    "playwright-core": "1.41.0-next"
+    "playwright-core": "1.41.1"
  }
 }
--- a/packages/playwright/bundles/babel/src/babelBundleImpl.ts
+++ b/packages/playwright/bundles/babel/src/babelBundleImpl.ts
@ -66,6 +66,7 @@ function babelTransformOptions(isTypeScript: boolean, isModule: boolean, plugins

  // Support JSX/TSX at all times, regardless of the file extension.
  plugins.push([require('@babel/plugin-transform-react-jsx'), {
+    throwIfNamespace: false,
    runtime: 'automatic',
    importSource: path.dirname(require.resolve('playwright')),
  }]);
--- a/packages/playwright/jsx-runtime.js
+++ b/packages/playwright/jsx-runtime.js
@ -16,6 +16,7 @@

 function jsx(type, props) {
  return {
+    __pw_type: 'jsx',
    type,
    props,
  };
@ -23,6 +24,7 @@ function jsx(type, props) {

 function jsxs(type, props) {
  return {
+    __pw_type: 'jsx',
    type,
    props,
  };
--- a/packages/playwright/package.json
+++ b/packages/playwright/package.json
@ -1,6 +1,6 @@
 {
  "name": "playwright",
-  "version": "1.41.0-next",
+  "version": "1.41.1",
  "description": "A high-level API to automate web browsers",
  "repository": {
    "type": "git",
@ -24,6 +24,7 @@
    "./lib/transform/babelBundle": "./lib/transform/babelBundle.js",
    "./lib/transform/compilationCache": "./lib/transform/compilationCache.js",
    "./lib/transform/esmLoader": "./lib/transform/esmLoader.js",
+    "./lib/transform/transform": "./lib/transform/transform.js",
    "./lib/internalsForTest": "./lib/internalsForTest.js",
    "./lib/plugins": "./lib/plugins/index.js",
    "./jsx-runtime": {
@ -54,7 +55,7 @@
  },
  "license": "Apache-2.0",
  "dependencies": {
-    "playwright-core": "1.41.0-next"
+    "playwright-core": "1.41.1"
  },
  "optionalDependencies": {
    "fsevents": "2.3.2"
--- a/packages/playwright/src/transform/compilationCache.ts
+++ b/packages/playwright/src/transform/compilationCache.ts
@ -23,9 +23,17 @@ import { isWorkerProcess } from '../common/globals';
 export type MemoryCache = {
  codePath: string;
  sourceMapPath: string;
+  dataPath: string;
  moduleUrl?: string;
 };

+type SerializedCompilationCache = {
+  sourceMaps: [string, string][],
+  memoryCache: [string, MemoryCache][],
+  fileDependencies: [string, string[]][],
+  externalDependencies: [string, string[]][],
+};
+
 // Assumptions for the compilation cache:
 // - Files in the temp directory we work with can disappear at any moment, either some of them or all together.
 // - Multiple workers can be trying to read from the compilation cache at the same time.
@ -84,12 +92,12 @@ export function installSourceMapSupportIfNeeded() {
  });
 }

-function _innerAddToCompilationCache(filename: string, options: { codePath: string, sourceMapPath: string, moduleUrl?: string }) {
-  sourceMaps.set(options.moduleUrl || filename, options.sourceMapPath);
-  memoryCache.set(filename, options);
+function _innerAddToCompilationCache(filename: string, entry: MemoryCache) {
+  sourceMaps.set(entry.moduleUrl || filename, entry.sourceMapPath);
+  memoryCache.set(filename, entry);
 }

-export function getFromCompilationCache(filename: string, hash: string, moduleUrl?: string): { cachedCode?: string, addToCache?: (code: string, map?: any) => void } {
+export function getFromCompilationCache(filename: string, hash: string, moduleUrl?: string): { cachedCode?: string, addToCache?: (code: string, map: any | undefined | null, data: Map<string, any>) => void } {
  // First check the memory cache by filename, this cache will always work in the worker,
  // because we just compiled this file in the loader.
  const cache = memoryCache.get(filename);
@ -105,27 +113,30 @@ export function getFromCompilationCache(filename: string, hash: string, moduleUr
  const cachePath = calculateCachePath(filename, hash);
  const codePath = cachePath + '.js';
  const sourceMapPath = cachePath + '.map';
+  const dataPath = cachePath + '.data';
  try {
    const cachedCode = fs.readFileSync(codePath, 'utf8');
-    _innerAddToCompilationCache(filename, { codePath, sourceMapPath, moduleUrl });
+    _innerAddToCompilationCache(filename, { codePath, sourceMapPath, dataPath, moduleUrl });
    return { cachedCode };
  } catch {
  }

  return {
-    addToCache: (code: string, map: any) => {
+    addToCache: (code: string, map: any | undefined | null, data: Map<string, any>) => {
      if (isWorkerProcess())
        return;
      fs.mkdirSync(path.dirname(cachePath), { recursive: true });
      if (map)
        fs.writeFileSync(sourceMapPath, JSON.stringify(map), 'utf8');
+      if (data.size)
+        fs.writeFileSync(dataPath, JSON.stringify(Object.fromEntries(data.entries()), undefined, 2), 'utf8');
      fs.writeFileSync(codePath, code, 'utf8');
-      _innerAddToCompilationCache(filename, { codePath, sourceMapPath, moduleUrl });
+      _innerAddToCompilationCache(filename, { codePath, sourceMapPath, dataPath, moduleUrl });
    }
  };
 }

-export function serializeCompilationCache(): any {
+export function serializeCompilationCache(): SerializedCompilationCache {
  return {
    sourceMaps: [...sourceMaps.entries()],
    memoryCache: [...memoryCache.entries()],
@ -200,6 +211,10 @@ export function collectAffectedTestFiles(dependency: string, testFileCollector:
  }
 }

+export function internalDependenciesForTestFile(filename: string): Set<string> | undefined{
+  return fileDependencies.get(filename);
+}
+
 export function dependenciesForTestFile(filename: string): Set<string> {
  const result = new Set<string>();
  for (const dep of fileDependencies.get(filename) || [])
@ -224,3 +239,17 @@ export function belongsToNodeModules(file: string) {
    return true;
  return false;
 }
+
+export async function getUserData(pluginName: string): Promise<Map<string, any>> {
+  const result = new Map<string, any>();
+  for (const [fileName, cache] of memoryCache) {
+    if (!cache.dataPath)
+      continue;
+    if (!fs.existsSync(cache.dataPath))
+      continue;
+    const data = JSON.parse(await fs.promises.readFile(cache.dataPath, 'utf8'));
+    if (data[pluginName])
+      result.set(fileName, data[pluginName]);
+  }
+  return result;
+}
--- a/packages/playwright/src/transform/transform.ts
+++ b/packages/playwright/src/transform/transform.ts
@ -16,8 +16,8 @@

 import crypto from 'crypto';
 import path from 'path';
-import { sourceMapSupport, pirates } from '../utilsBundle';
 import url from 'url';
+import { sourceMapSupport, pirates } from '../utilsBundle';
 import type { Location } from '../../types/testReporter';
 import type { TsConfigLoaderResult } from '../third_party/tsconfig-loader';
 import { tsConfigLoader } from '../third_party/tsconfig-loader';
@ -159,6 +159,12 @@ export function shouldTransform(filename: string): boolean {
  return !belongsToNodeModules(filename);
 }

+let transformData: Map<string, any>;
+
+export function setTransformData(pluginName: string, value: any) {
+  transformData.set(pluginName, value);
+}
+
 export function transformHook(originalCode: string, filename: string, moduleUrl?: string): string {
  const isTypeScript = filename.endsWith('.ts') || filename.endsWith('.tsx') || filename.endsWith('.mts') || filename.endsWith('.cts');
  const hasPreprocessor =
@ -177,9 +183,10 @@ export function transformHook(originalCode: string, filename: string, moduleUrl?
  process.env.BROWSERSLIST_IGNORE_OLD_DATA = 'true';

  const { babelTransform }: { babelTransform: BabelTransformFunction } = require('./babelBundle');
+  transformData = new Map<string, any>();
  const { code, map } = babelTransform(originalCode, filename, isTypeScript, !!moduleUrl, pluginsPrologue, pluginsEpilogue);
  if (code)
-    addToCache!(code, map);
+    addToCache!(code, map, transformData);
  return code || '';
 }

--- a/packages/trace-viewer/src/traceModelBackends.ts
+++ b/packages/trace-viewer/src/traceModelBackends.ts
@ -32,7 +32,7 @@ export class ZipTraceModelBackend implements TraceModelBackend {
    this._traceURL = traceURL;
    zipjs.configure({ baseURL: self.location.href } as any);
    this._zipReader = new zipjs.ZipReader(
-        new zipjs.HttpReader(formatUrl(traceURL), { mode: 'cors', credentials: 'include', preventHeadRequest: true } as any),
+        new zipjs.HttpReader(formatUrl(traceURL), { mode: 'cors', preventHeadRequest: true } as any),
        { useWebWorkers: false });
    this._entriesPromise = this._zipReader.getEntries({ onprogress: progress }).then(entries => {
      const map = new Map<string, zip.Entry>();
--- a/packages/web/src/components/splitView.spec.tsx
+++ b/packages/web/src/components/splitView.spec.tsx
@ -76,3 +76,4 @@ test('drag resize', async ({ page, mount }) => {
  expect.soft(mainBox).toEqual({ x: 0, y: 0, width: 500, height: 100 });
  expect.soft(sidebarBox).toEqual({ x: 0, y: 101, width: 500, height: 399 });
 });
+
--- a/tests/components/ct-react17/tsconfig.json
+++ b/tests/components/ct-react17/tsconfig.json
@ -1,6 +1,6 @@
 {
  "compilerOptions": {
-    "target": "es5",
+    "target": "ES2015",
    "lib": [
      "dom",
      "dom.iterable",
--- a/tests/library/inspector/cli-codegen-1.spec.ts
+++ b/tests/library/inspector/cli-codegen-1.spec.ts
@ -746,32 +746,4 @@ await page.GetByText("Click me").ClickAsync(new LocatorClickOptions
    Button = MouseButton.Middle,
 });`);
  });
-
-  test('should record slider', async ({ page, openRecorder }) => {
-    const recorder = await openRecorder();
-
-    await recorder.setContentAndWait(`<input type="range" min="0" max="10" value="5">`);
-
-    const dragSlider = async () => {
-      await page.locator('input').focus();
-      const { x, y, width, height } = await page.locator('input').boundingBox();
-      await page.mouse.move(x + width / 2, y + height / 2);
-      await page.mouse.down();
-      await page.mouse.move(x + width, y + height / 2);
-      await page.mouse.up();
-    };
-
-    const [sources] = await Promise.all([
-      recorder.waitForOutput('JavaScript', 'fill'),
-      dragSlider(),
-    ]);
-
-    await expect(page.locator('input')).toHaveValue('10');
-
-    expect(sources.get('JavaScript')!.text).toContain(`
-  await page.getByRole('slider').fill('10');`);
-
-    expect(sources.get('JavaScript')!.text).not.toContain(`
-  await page.getByRole('slider').click();`);
-  });
 });
--- a/tests/playwright-test/loader.spec.ts
+++ b/tests/playwright-test/loader.spec.ts
@ -523,11 +523,13 @@ test('should load jsx with top-level component', async ({ runInlineTest }) => {
      const component = <div>Hello <span>world</span></div>;
      test('succeeds', () => {
        expect(component).toEqual({
+          __pw_type: 'jsx',
          type: 'div',
          props: {
            children: [
              'Hello ',
              {
+                __pw_type: 'jsx',
                type: 'span',
                props: {
                  children: 'world'
--- a/tests/playwright-test/playwright-test-fixtures.ts
+++ b/tests/playwright-test/playwright-test-fixtures.ts
@ -76,6 +76,8 @@ export async function writeFiles(testInfo: TestInfo, files: Files, initial: bool

  await Promise.all(Object.keys(files).map(async name => {
    const fullName = path.join(baseDir, name);
+    if (files[name] === undefined)
+      return;
    await fs.promises.mkdir(path.dirname(fullName), { recursive: true });
    await fs.promises.writeFile(fullName, files[name]);
  }));
--- a/tests/playwright-test/playwright.ct-build.spec.ts
+++ b/tests/playwright-test/playwright.ct-build.spec.ts
@ -44,7 +44,7 @@ test('should work with the empty component list', async ({ runInlineTest }, test
  const metainfo = JSON.parse(fs.readFileSync(testInfo.outputPath('playwright/.cache/metainfo.json'), 'utf-8'));
  expect(metainfo.version).toEqual(require('playwright-core/package.json').version);
  expect(metainfo.viteVersion).toEqual(require('vite/package.json').version);
-  expect(Object.entries(metainfo.tests)).toHaveLength(1);
+  expect(Object.entries(metainfo.deps)).toHaveLength(0);
  expect(Object.entries(metainfo.sources)).toHaveLength(9);
 });

@ -135,102 +135,61 @@ test('should extract component list', async ({ runInlineTest }, testInfo) => {
  });

  expect(metainfo.components).toEqual([{
-    fullName: expect.stringContaining('playwright_test_src_button_tsx_Button'),
-    importedName: 'Button',
-    importedNameProperty: '',
+    id: expect.stringContaining('playwright_test_src_button_tsx_Button'),
+    remoteName: 'Button',
    importPath: expect.stringContaining('button.tsx'),
    isModuleOrAlias: false,
-    deps: [
-      expect.stringContaining('button.tsx'),
-      expect.stringContaining('jsx-runtime.js'),
-    ]
  }, {
-    fullName: expect.stringContaining('playwright_test_src_clashingNames1_tsx_ClashingName'),
-    importedName: 'ClashingName',
-    importedNameProperty: '',
+    id: expect.stringContaining('playwright_test_src_clashingNames1_tsx_ClashingName'),
+    remoteName: 'ClashingName',
    importPath: expect.stringContaining('clashingNames1.tsx'),
    isModuleOrAlias: false,
-    deps: [
-      expect.stringContaining('clashingNames1.tsx'),
-      expect.stringContaining('jsx-runtime.js'),
-    ]
  }, {
-    fullName: expect.stringContaining('playwright_test_src_clashingNames2_tsx_ClashingName'),
-    importedName: 'ClashingName',
-    importedNameProperty: '',
+    id: expect.stringContaining('playwright_test_src_clashingNames2_tsx_ClashingName'),
+    remoteName: 'ClashingName',
    importPath: expect.stringContaining('clashingNames2.tsx'),
    isModuleOrAlias: false,
-    deps: [
-      expect.stringContaining('clashingNames2.tsx'),
-      expect.stringContaining('jsx-runtime.js'),
-    ]
  }, {
-    fullName: expect.stringContaining('playwright_test_src_components_tsx_Component1'),
-    importedName: 'Component1',
-    importedNameProperty: '',
+    id: expect.stringContaining('playwright_test_src_components_tsx_Component1'),
+    remoteName: 'Component1',
    importPath: expect.stringContaining('components.tsx'),
    isModuleOrAlias: false,
-    deps: [
-      expect.stringContaining('components.tsx'),
-      expect.stringContaining('jsx-runtime.js'),
-    ]
  }, {
-    fullName: expect.stringContaining('playwright_test_src_components_tsx_Component2'),
-    importedName: 'Component2',
-    importedNameProperty: '',
+    id: expect.stringContaining('playwright_test_src_components_tsx_Component2'),
+    remoteName: 'Component2',
    importPath: expect.stringContaining('components.tsx'),
    isModuleOrAlias: false,
-    deps: [
-      expect.stringContaining('components.tsx'),
-      expect.stringContaining('jsx-runtime.js'),
-    ]
  }, {
-    fullName: expect.stringContaining('playwright_test_src_defaultExport_tsx'),
+    id: expect.stringContaining('playwright_test_src_defaultExport_tsx'),
    importPath: expect.stringContaining('defaultExport.tsx'),
-    importedNameProperty: '',
    isModuleOrAlias: false,
-    deps: [
-      expect.stringContaining('defaultExport.tsx'),
-      expect.stringContaining('jsx-runtime.js'),
-    ]
  }]);

-  for (const [file, test] of Object.entries(metainfo.tests)) {
-    if (file.endsWith('clashing-imports.spec.tsx')) {
-      expect(test).toEqual({
-        timestamp: expect.any(Number),
-        components: [
-          expect.stringContaining('clashingNames1_tsx_ClashingName'),
-          expect.stringContaining('clashingNames2_tsx_ClashingName'),
-        ],
-      });
-    }
-    if (file.endsWith('default-import.spec.tsx')) {
-      expect(test).toEqual({
-        timestamp: expect.any(Number),
-        components: [
-          expect.stringContaining('defaultExport_tsx'),
-        ],
-      });
-    }
-    if (file.endsWith('named-imports.spec.tsx')) {
-      expect(test).toEqual({
-        timestamp: expect.any(Number),
-        components: [
-          expect.stringContaining('components_tsx_Component1'),
-          expect.stringContaining('components_tsx_Component2'),
-        ],
-      });
-    }
-    if (file.endsWith('one-import.spec.tsx')) {
-      expect(test).toEqual({
-        timestamp: expect.any(Number),
-        components: [
-          expect.stringContaining('button_tsx_Button'),
-        ],
-      });
-    }
-  }
+  for (const [, value] of Object.entries(metainfo.deps))
+    (value as string[]).sort();
+
+  expect(Object.entries(metainfo.deps)).toEqual([
+    [expect.stringContaining('clashingNames1.tsx'), [
+      expect.stringContaining('jsx-runtime.js'),
+      expect.stringContaining('clashingNames1.tsx'),
+    ]],
+    [expect.stringContaining('clashingNames2.tsx'), [
+      expect.stringContaining('jsx-runtime.js'),
+      expect.stringContaining('clashingNames2.tsx'),
+    ]],
+    [expect.stringContaining('defaultExport.tsx'), [
+      expect.stringContaining('jsx-runtime.js'),
+      expect.stringContaining('defaultExport.tsx'),
+    ]],
+    [expect.stringContaining('components.tsx'), [
+      expect.stringContaining('jsx-runtime.js'),
+      expect.stringContaining('components.tsx'),
+    ]],
+    [expect.stringContaining('button.tsx'), [
+      expect.stringContaining('jsx-runtime.js'),
+      expect.stringContaining('button.tsx'),
+    ]],
+  ]);
 });

 test('should cache build', async ({ runInlineTest }, testInfo) => {
@ -497,26 +456,160 @@ test('should retain deps when test changes', async ({ runInlineTest }, testInfo)
  const metainfo = JSON.parse(fs.readFileSync(testInfo.outputPath('playwright/.cache/metainfo.json'), 'utf-8'));

  expect(metainfo.components).toEqual([{
-    fullName: expect.stringContaining('playwright_test_src_button_tsx_Button'),
-    importedName: 'Button',
-    importedNameProperty: '',
+    id: expect.stringContaining('playwright_test_src_button_tsx_Button'),
+    remoteName: 'Button',
    importPath: expect.stringContaining('button.tsx'),
    isModuleOrAlias: false,
-    deps: [
-      expect.stringContaining('button.tsx'),
-      expect.stringContaining('jsx-runtime.js'),
-    ]
  }]);

-  expect(Object.entries(metainfo.tests)).toEqual([
+  for (const [, value] of Object.entries(metainfo.deps))
+    (value as string[]).sort();
+
+  expect(Object.entries(metainfo.deps)).toEqual([
    [
-      expect.stringContaining('button.test.tsx'),
-      {
-        components: [
-          expect.stringContaining('src_button_tsx_Button'),
+      expect.stringContaining('button.tsx'),
+      [
+        expect.stringContaining('jsx-runtime.js'),
+        expect.stringContaining('button.tsx'),
      ],
-        timestamp: expect.any(Number)
-      }
    ]
  ]);
 });
+
+test('should render component via re-export', async ({ runInlineTest }, testInfo) => {
+  const result = await runInlineTest({
+    'playwright.config.ts': playwrightConfig,
+    'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
+    'playwright/index.ts': ``,
+    'src/button.tsx': `
+      export const Button = () => <button>Button</button>;
+    `,
+    'src/buttonHelper.ts': `
+      import { Button } from './button.tsx';
+      export { Button };
+    `,
+    'src/button.test.tsx': `
+      import { test, expect } from '@playwright/experimental-ct-react';
+      import { Button } from './buttonHelper';
+      test('pass', async ({ mount }) => {
+        const component = await mount(<Button></Button>);
+        await expect(component).toHaveText('Button');
+      });
+    `,
+  }, { workers: 1 });
+
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
+});
+
+test('should render component exported via fixture', async ({ runInlineTest }, testInfo) => {
+  const result = await runInlineTest({
+    'playwright.config.ts': playwrightConfig,
+    'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
+    'playwright/index.ts': ``,
+    'src/button.tsx': `
+      export const Button = () => <button>Button</button>;
+    `,
+    'src/buttonFixture.tsx': `
+      import { Button } from './button';
+      import { test as baseTest } from '@playwright/experimental-ct-react';
+      export { expect } from '@playwright/experimental-ct-react';
+      export const test = baseTest.extend({
+        button: async ({ mount }, use) => {
+          await use(await mount(<Button></Button>));
+        }
+      });
+    `,
+    'src/button.test.tsx': `
+      import { test, expect } from './buttonFixture';
+      test('pass', async ({ button }) => {
+        await expect(button).toHaveText('Button');
+      });
+    `,
+  }, { workers: 1 });
+
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
+});
+
+test('should pass imported images from test to component', async ({ runInlineTest }, testInfo) => {
+  const result = await runInlineTest({
+    'playwright.config.ts': playwrightConfig,
+    'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
+    'playwright/index.ts': ``,
+    'src/image.png': Buffer.from('iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAACMElEQVRYw+1XT0tCQRD/9Qci0Cw7mp1C6BMYnt5niMhPEEFCh07evNk54XnuGkhFehA/QxHkqYMEFWXpscMTipri7fqeu+vbfY+EoBkQ3Zn5zTo7MzsL/NNfoClkUUQNN3jCJ/ETfavRSpYkkSmFQzz8wMr4gaSp8OBJ2HCU4Iwd0kqGgd9GPxCccZ+0jWgWVW1wxlWy0qR51I3hv7lOllq7b4SC/+aGzr+QBadjEKgAykvzJGXwr/Lj4JfRk5hUSLKIa00HPUJRki0xeMWSWxVXmi5sddXKymqTyxdwquXAUVV3WREeLx3gTcNFWQY/jXtB8QIzgt4qTvAR4OCe0ATKCmrnmFMEM0Pp2BvrIisaFUdUjgKKZgYWSjjDLR5J+x13lATHuHSti6JBzQP+gq2QHXjfRaiJojbPgYqbmGFow0VpiyIW0/VIF9QKLzeBWA2MHmwCu8QJQV++Ps/joHQQH4HpuO0uobUeVztgIcr4Vnf4we9orWfUIWKHbEVyYKkPmaVpIVKICuo0ZYXWjHTITXWhsVYxkIDpUoKsla1i2Oz2QjvYG9fshu36GbFQ8DGyHNOuvRdOKZSDUtCFM7wyHeSM4XN8e7bOpd9F2gg+TRYal753bGkbuEjzMg0YW/yDV1czUDm+e43Byz86OnRwsYDMKXlmkYbeAOwffrtU/nGpXpwkXfPhVza+D9AiMAtrtOMYfVr0q8Wr1nh8n8ADZCJPqAk8AifyjP2n36cvkA6/Wln9MokAAAAASUVORK5CYII=', 'base64'),
+    'src/image.test.tsx': `
+      import { test, expect } from '@playwright/experimental-ct-react';
+      import imageSrc from './image.png';
+      test('pass', async ({ mount }) => {
+        const component = await mount(<img src={imageSrc}></img>);
+        await expect(component).toHaveJSProperty('naturalWidth', 48);
+      });
+    `,
+  }, { workers: 1 });
+
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
+});
+
+test('should pass dates, regex, urls and bigints', async ({ runInlineTest }) => {
+  const result = await runInlineTest({
+    'playwright.config.ts': playwrightConfig,
+    'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
+    'playwright/index.ts': ``,
+    'src/button.tsx': `
+      export const Button = ({ props }: any) => {
+        const { date, url, bigint, regex } = props;
+        const types = [
+          date instanceof Date,
+          url instanceof URL,
+          typeof bigint === 'bigint',
+          regex instanceof RegExp,
+        ];
+        return <div>{types.join(' ')}</div>;
+      };
+    `,
+    'src/component.spec.tsx': `
+      import { test, expect } from '@playwright/experimental-ct-react';
+      import { Button } from './button';
+
+      test('renders props with builtin types', async ({ mount, page }) => {
+        const component = await mount(<Button props={{
+          date: new Date(),
+          url: new URL('https://example.com'),
+          bigint: BigInt(42),
+          regex: /foo/,
+        }} />);
+        await expect(component).toHaveText('true true true true');
+      });
+    `,
+  }, { workers: 1 });
+
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
+});
+
+test('should pass undefined value as param', async ({ runInlineTest }) => {
+  const result = await runInlineTest({
+    'playwright.config.ts': playwrightConfig,
+    'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
+    'playwright/index.ts': ``,
+    'src/component.tsx': `
+      export const Component = ({ value }: { value?: number }) => {
+        return <div>{typeof value}</div>;
+      };
+    `,
+    'src/component.spec.tsx': `
+      import { test, expect } from '@playwright/experimental-ct-react';
+      import { Component } from './component';
+
+      test('renders props with undefined type', async ({ mount, page }) => {
+        const component = await mount(<Component value={undefined} />);
+        await expect(component).toHaveText('undefined');
+      });
+    `,
+  }, { workers: 1 });
+
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
+});
--- a/tests/playwright-test/playwright.ct-react.spec.ts
+++ b/tests/playwright-test/playwright.ct-react.spec.ts
@ -196,7 +196,7 @@ test('should work with stray JSX import', async ({ runInlineTest }) => {
  expect(result.passed).toBe(1);
 });

-test.fixme('should work with stray JS import', async ({ runInlineTest }) => {
+test('should work with stray JS import', async ({ runInlineTest }) => {
  const result = await runInlineTest({
    'playwright.config.ts': playwrightConfig,
    'playwright/index.html': `<script type="module" src="./index.js"></script>`,
@ -481,7 +481,7 @@ test('should normalize children', async ({ runInlineTest }) => {
      import { OneChild, OtherComponent } from './component';

      test("can pass an HTML element to OneChild", async ({ mount }) => {
-        const component = await mount(<OneChild><p>child</p> </OneChild>);
+        const component = await mount(<OneChild><p>child</p></OneChild>);
        await expect(component).toHaveText("child");
      });
      
@ -495,3 +495,23 @@ test('should normalize children', async ({ runInlineTest }) => {
  expect(result.exitCode).toBe(0);
  expect(result.passed).toBe(2);
 });
+
+test('should allow props children', async ({ runInlineTest }) => {
+  const result = await runInlineTest({
+    'playwright.config.ts': playwrightConfig,
+    'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
+    'playwright/index.ts': ``,
+    'src/component.spec.tsx': `
+      import { test, expect } from '@playwright/experimental-ct-react';
+
+      test("renders children from props object", async ({ mount, page }) => {
+        const props = { children: 'test' };
+        await mount(<button {...props} />);
+        await expect(page.getByText('test')).toBeVisible();
+      });
+    `,
+  }, { workers: 1 });
+
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
+});
--- a/tests/playwright-test/ui-mode-test-ct.spec.ts
+++ b/tests/playwright-test/ui-mode-test-ct.spec.ts
@ -207,3 +207,81 @@ test('should watch component', async ({ runUITest, writeFiles }) => {
        ❌ pass <=
  `);
 });
+
+test('should watch component via util', async ({ runUITest, writeFiles }) => {
+  const { page } = await runUITest({
+    ...basicTestTree,
+    'src/button.tsx': undefined,
+    'src/button.ts': `
+      import { Button } from './buttonComponent';
+      export { Button };
+    `,
+    'src/buttonComponent.tsx': `
+      export const Button = () => <button>Button</button>;
+    `,
+  });
+  await expect.poll(dumpTestTree(page)).toBe(`
+    ▼ ◯ button.test.tsx
+        ◯ pass
+  `);
+
+  await page.getByTitle('Watch all').click();
+  await page.getByTitle('Run all').click();
+
+  await expect.poll(dumpTestTree(page)).toBe(`
+    ▼ ✅ button.test.tsx
+        ✅ pass
+  `);
+
+  await writeFiles({
+    'src/buttonComponent.tsx': `
+      export const Button = () => <button>Button2</button>;
+    `
+  });
+
+  await expect.poll(dumpTestTree(page)).toBe(`
+    ▼ ❌ button.test.tsx
+        ❌ pass <=
+  `);
+});
+
+test('should watch component when editing util', async ({ runUITest, writeFiles }) => {
+  const { page } = await runUITest({
+    ...basicTestTree,
+    'src/button.tsx': undefined,
+    'src/button.ts': `
+      import { Button } from './buttonComponent';
+      export { Button };
+    `,
+    'src/buttonComponent.tsx': `
+      export const Button = () => <button>Button</button>;
+    `,
+    'src/buttonComponent2.tsx': `
+      export const Button = () => <button>Button2</button>;
+    `,
+  });
+  await expect.poll(dumpTestTree(page)).toBe(`
+    ▼ ◯ button.test.tsx
+        ◯ pass
+  `);
+
+  await page.getByTitle('Watch all').click();
+  await page.getByTitle('Run all').click();
+
+  await expect.poll(dumpTestTree(page)).toBe(`
+    ▼ ✅ button.test.tsx
+        ✅ pass
+  `);
+
+  await writeFiles({
+    'src/button.ts': `
+      import { Button } from './buttonComponent2';
+      export { Button };
+    `,
+  });
+
+  await expect.poll(dumpTestTree(page)).toBe(`
+    ▼ ❌ button.test.tsx
+        ❌ pass <=
+  `);
+});
--- a/utils/build/build.js
+++ b/utils/build/build.js
@ -304,6 +304,7 @@ steps.push({
 onChanges.push({
  inputs: [
    'packages/playwright-core/src/server/injected/**',
+    'packages/playwright-ct-core/src/injected/**',
    'packages/playwright-core/src/utils/isomorphic/**',
    'utils/generate_injected.js',
  ],
--- a/utils/generate_injected.js
+++ b/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', 'lib', 'server', 'injected', 'packed'),
+    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 });
-  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,6 +124,7 @@ 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');
+    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);
Author	SHA1	Message	Date
Max Schmitt	8f0163f3f4	chore: mark 1.41.1 (#29075 )	2024-01-20 00:05:04 +01:00
Playwright Service	98a661824d	cherry-pick(#29069 ): Revert "feat(codegen): add range input recording support (#28767 )" (#29074 ) This PR cherry-picks the following commits: - `e551506c9e` Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>	2024-01-19 22:08:43 +01:00
Sander	50f1f08e9c	cherry-pick(#29070 ): chore(ct): revert export mount result	2024-01-19 11:12:07 -08:00
Pavel Feldman	e5d201b459	cherry-pick(#29031 ): fix(ct): allow passing date, url, bigint as properties	2024-01-18 11:44:08 -08:00
Pavel Feldman	8ee2d81143	cherry-pick(#29026 ): test: add a props.children test	2024-01-18 11:43:45 -08:00
Pavel Feldman	50a8e4f52a	cherry-pick(#29016 ): chore: add an image import component test	2024-01-18 11:43:21 -08:00
Pavel Feldman	cb6c64cc33	cherry-pick(#28986 ): fix(ct): move import list into the compilation cache data	2024-01-18 11:42:56 -08:00
Pavel Feldman	06518b2091	cherry-pick(#28978 ): chore: build import registry source	2024-01-18 11:42:04 -08:00
Pavel Feldman	d47ed6a076	cherry-pick(#28975 ): chore: refactor import processing in ct	2024-01-18 11:41:24 -08:00
Playwright Service	4d9f923dfe	cherry-pick(#29034 ): docs: fix typo for stylePath (#29035 ) This PR cherry-picks the following commits: - `a217d6a08d` Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>	2024-01-18 10:06:32 +01:00
Dmitry Gozman	ece2a97702	Revert "feat(trace): allow Trace Viewer to include credentials when fetching traces cross-origin (#28502 )" (#29024 ) This reverts commit `3f3f332060`. References #29019.	2024-01-17 10:41:44 -08:00
Max Schmitt	38d699f64f	chore: mark 1.41.0 (#29007 )	2024-01-16 19:27:23 +01:00