From 301896241c6fcb66520f64bc483bd1f9006e0380 Mon Sep 17 00:00:00 2001
From: sand4rt <info@mesander.com>
Date: Sun, 21 Apr 2024 22:12:55 +0200
Subject: [PATCH 1/2] feat(ct): resolve hooksConfig import refs

---
 packages/playwright-ct-core/src/mount.ts      |  1 +
 .../playwright-ct-core/types/component.d.ts   | 11 +++++-----
 packages/playwright-ct-vue/hooks.d.ts         |  7 ++++---
 packages/playwright-ct-vue/index.d.ts         | 12 +++++------
 .../ct-vue-vite/playwright/index.ts           | 20 ++++++++++---------
 .../ct-vue-vite/tests/slots/slots.spec.ts     |  6 +++++-
 .../tests/vue-router/vue-router.spec.ts       |  3 +--
 .../tests/vue-router/vue-router.spec.tsx      |  3 +--
 8 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/packages/playwright-ct-core/src/mount.ts b/packages/playwright-ct-core/src/mount.ts
index 7220916a4b8a9..e743a6aaa1924 100644
--- a/packages/playwright-ct-core/src/mount.ts
+++ b/packages/playwright-ct-core/src/mount.ts
@@ -102,6 +102,7 @@ async function innerMount(page: Page, componentRef: JsxComponent | ImportRef, op
 
   const selector = await page.evaluate(async ({ component, hooksConfig }) => {
     component = await window.__pwUnwrapObject(component);
+    hooksConfig = await window.__pwUnwrapObject(hooksConfig);
     let rootElement = document.getElementById('root');
     if (!rootElement) {
       rootElement = document.createElement('div');
diff --git a/packages/playwright-ct-core/types/component.d.ts b/packages/playwright-ct-core/types/component.d.ts
index 5bd5d7e017fb7..fc8d0eef58394 100644
--- a/packages/playwright-ct-core/types/component.d.ts
+++ b/packages/playwright-ct-core/types/component.d.ts
@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 
-type JsonPrimitive = string | number | boolean | null;
-type JsonValue = JsonPrimitive | JsonObject | JsonArray;
-type JsonArray = JsonValue[];
-export type JsonObject = { [Key in string]?: JsonValue };
+export interface RegisterHooksConfig {
+
+};
 
 export type JsxComponent = {
   __pw_type: 'jsx',
@@ -47,10 +46,10 @@ declare global {
     playwrightMount(component: Component, rootElement: Element, hooksConfig?: any): Promise<void>;
     playwrightUnmount(rootElement: Element): Promise<void>;
     playwrightUpdate(rootElement: Element, component: Component): Promise<void>;
-    __pw_hooks_before_mount?: (<HooksConfig extends JsonObject = JsonObject>(
+    __pw_hooks_before_mount?: (<HooksConfig extends RegisterHooksConfig = RegisterHooksConfig>(
       params: { hooksConfig?: HooksConfig; [key: string]: any }
     ) => Promise<any>)[];
-    __pw_hooks_after_mount?: (<HooksConfig extends JsonObject = JsonObject>(
+    __pw_hooks_after_mount?: (<HooksConfig extends RegisterHooksConfig = RegisterHooksConfig>(
       params: { hooksConfig?: HooksConfig; [key: string]: any }
     ) => Promise<void>)[];
     // Can't start with __pw due to core reuse bindings logic for __pw*.
diff --git a/packages/playwright-ct-vue/hooks.d.ts b/packages/playwright-ct-vue/hooks.d.ts
index 2a18496007e4d..a2848df1bf4de 100644
--- a/packages/playwright-ct-vue/hooks.d.ts
+++ b/packages/playwright-ct-vue/hooks.d.ts
@@ -15,12 +15,13 @@
  */
 
 import type { App, ComponentPublicInstance } from 'vue';
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
 
-export declare function beforeMount<HooksConfig extends JsonObject>(
+export interface RegisterHooksConfig {}
+
+export declare function beforeMount<HooksConfig = RegisterHooksConfig>(
   callback: (params: { app: App; hooksConfig?: HooksConfig }) => Promise<void>
 ): void;
-export declare function afterMount<HooksConfig extends JsonObject>(
+export declare function afterMount<HooksConfig = RegisterHooksConfig>(
   callback: (params: {
     app: App;
     hooksConfig?: HooksConfig;
diff --git a/packages/playwright-ct-vue/index.d.ts b/packages/playwright-ct-vue/index.d.ts
index 308e47c18cad7..0afd1dfed2618 100644
--- a/packages/playwright-ct-vue/index.d.ts
+++ b/packages/playwright-ct-vue/index.d.ts
@@ -15,7 +15,7 @@
  */
 
 import type { Locator } from 'playwright/test';
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
+import type { RegisterHooksConfig } from './hooks';
 import type { TestType } from '@playwright/experimental-ct-core';
 
 type ComponentSlot = string | string[];
@@ -29,14 +29,14 @@ type ComponentProps<T> =
 	T extends (props: infer P, ...args: any) => any ? P :
 	{};
 
-export interface MountOptions<HooksConfig extends JsonObject, Component> {
+export interface MountOptions<Component, HooksConfig extends RegisterHooksConfig> {
   props?: ComponentProps<Component>;
   slots?: ComponentSlots;
   on?: ComponentEvents;
   hooksConfig?: HooksConfig;
 }
 
-export interface MountOptionsJsx<HooksConfig extends JsonObject> {
+export interface MountOptionsJsx<HooksConfig extends RegisterHooksConfig> {
   hooksConfig?: HooksConfig;
 }
 
@@ -55,13 +55,13 @@ export interface MountResultJsx extends Locator {
 }
 
 export const test: TestType<{
-  mount<HooksConfig extends JsonObject>(
+  mount<HooksConfig extends RegisterHooksConfig>(
     component: JSX.Element,
     options: MountOptionsJsx<HooksConfig>
   ): Promise<MountResultJsx>;
-  mount<HooksConfig extends JsonObject, Component = unknown>(
+  mount<Component = unknown, HooksConfig extends RegisterHooksConfig>(
     component: Component,
-    options?: MountOptions<HooksConfig, Component>
+    options?: MountOptions<Component, HooksConfig>
   ): Promise<MountResult<Component>>;
 }>;
 
diff --git a/tests/components/ct-vue-vite/playwright/index.ts b/tests/components/ct-vue-vite/playwright/index.ts
index 977ee338459e1..ae20ce194523d 100644
--- a/tests/components/ct-vue-vite/playwright/index.ts
+++ b/tests/components/ct-vue-vite/playwright/index.ts
@@ -1,20 +1,22 @@
 import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks';
 import { router } from '../src/router';
-import Button from '../src/components/Button.vue';
 import '../src/assets/index.css';
 
-export type HooksConfig = {
-  route?: string;
-  routing?: boolean;
+declare module '@playwright/experimental-ct-vue/hooks' {
+  interface RegisterHooksConfig {
+    routing?: boolean;
+    components?: Record<string, any>;
+  }
 }
 
-beforeMount<HooksConfig>(async ({ app, hooksConfig }) => {
-  if (hooksConfig?.routing) 
+beforeMount(async ({ app, hooksConfig }) => {
+  if (hooksConfig?.routing)
     app.use(router as any); // TODO: remove any and fix the various installed conflicting Vue versions
-  app.component('Button', Button);
-  console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`);
+
+  for (const [name, component] of Object.entries(hooksConfig?.components || {}))
+    app.component(name, component);
 });
 
-afterMount<HooksConfig>(async ({ instance }) => {
+afterMount(async ({ instance }) => {
   console.log(`After mount el: ${instance.$el.constructor.name}`);
 });
diff --git a/tests/components/ct-vue-vite/tests/slots/slots.spec.ts b/tests/components/ct-vue-vite/tests/slots/slots.spec.ts
index 2af38036b593d..c7165df895701 100644
--- a/tests/components/ct-vue-vite/tests/slots/slots.spec.ts
+++ b/tests/components/ct-vue-vite/tests/slots/slots.spec.ts
@@ -1,6 +1,7 @@
 import { test, expect } from '@playwright/experimental-ct-vue';
 import DefaultSlot from '@/components/DefaultSlot.vue';
 import NamedSlots from '@/components/NamedSlots.vue';
+import Button from '@/components/Button.vue';
 
 test('render a default slot', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
@@ -14,8 +15,11 @@ test('render a default slot', async ({ mount }) => {
 test('render a component as slot', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
     slots: {
-      default: '<Button title="Submit" />', // component is registered globally in /playwright/index.ts
+      default: '<Button title="Submit" />',
     },
+    hooksConfig: {
+      components: { Button }
+    }
   });
   await expect(component).toContainText('Submit');
 });
diff --git a/tests/components/ct-vue-vite/tests/vue-router/vue-router.spec.ts b/tests/components/ct-vue-vite/tests/vue-router/vue-router.spec.ts
index 000715b368d05..0caa91f5446c7 100644
--- a/tests/components/ct-vue-vite/tests/vue-router/vue-router.spec.ts
+++ b/tests/components/ct-vue-vite/tests/vue-router/vue-router.spec.ts
@@ -1,9 +1,8 @@
 import { test, expect } from '@playwright/experimental-ct-vue';
-import type { HooksConfig } from '../../playwright';
 import App from '@/App.vue';
 
 test('navigate to a page by clicking a link', async ({ page, mount }) => {
-  const component = await mount<HooksConfig>(App, {
+  const component = await mount(App, {
     hooksConfig: { routing: true },
   });
   await expect(component.getByRole('main')).toHaveText('Login');
diff --git a/tests/components/ct-vue-vite/tests/vue-router/vue-router.spec.tsx b/tests/components/ct-vue-vite/tests/vue-router/vue-router.spec.tsx
index 48d7f6065b7d5..8541280071523 100644
--- a/tests/components/ct-vue-vite/tests/vue-router/vue-router.spec.tsx
+++ b/tests/components/ct-vue-vite/tests/vue-router/vue-router.spec.tsx
@@ -1,9 +1,8 @@
 import { test, expect } from '@playwright/experimental-ct-vue';
-import type { HooksConfig } from '../../playwright';
 import App from '@/App.vue';
 
 test('navigate to a page by clicking a link', async ({ page, mount }) => {
-  const component = await mount<HooksConfig>(<App />, {
+  const component = await mount(<App />, {
     hooksConfig: { routing: true },
   });
   await expect(component.getByRole('main')).toHaveText('Login');

From 81bca971f1863d4d78792543bd5f9513efb846b8 Mon Sep 17 00:00:00 2001
From: sand4rt <info@mesander.com>
Date: Fri, 26 Apr 2024 21:57:22 +0200
Subject: [PATCH 2/2] feat(ct): hooksConfig declaration merging

---
 .../playwright-ct-core/types/component.d.ts    | 14 +++++---------
 packages/playwright-ct-react/hooks.d.ts        |  6 +++---
 packages/playwright-ct-react/index.d.ts        |  6 +++---
 packages/playwright-ct-react17/hooks.d.ts      |  6 +++---
 packages/playwright-ct-react17/index.d.ts      |  6 +++---
 packages/playwright-ct-solid/hooks.d.ts        |  9 +++++----
 packages/playwright-ct-solid/index.d.ts        |  6 +++---
 packages/playwright-ct-svelte/hooks.d.ts       |  7 ++++---
 packages/playwright-ct-svelte/index.d.ts       |  6 +++---
 packages/playwright-ct-vue/index.d.ts          |  6 +++---
 packages/playwright-ct-vue2/hooks.d.ts         | 17 +++++++++--------
 packages/playwright-ct-vue2/index.d.ts         | 10 +++++-----
 .../ct-react-vite/playwright/index.tsx         | 11 ++++++-----
 .../ct-react-vite/tests/react-router.spec.tsx  |  7 +++----
 tests/components/ct-react-vite/tsconfig.json   |  1 -
 .../components/ct-react17/playwright/index.tsx | 11 ++++++-----
 .../ct-react17/tests/react-router.spec.tsx     |  5 ++---
 tests/components/ct-react17/tsconfig.json      |  4 ----
 tests/components/ct-solid/playwright/index.tsx | 11 ++++++-----
 .../ct-solid/tests/solid-router.spec.tsx       |  3 +--
 .../ct-svelte-vite/playwright/index.ts         | 12 ++++++------
 .../ct-svelte-vite/tests/render.spec.ts        |  3 +--
 tests/components/ct-svelte-vite/tsconfig.json  |  1 -
 tests/components/ct-svelte/playwright/index.ts | 12 +++++++-----
 .../components/ct-vue-cli/playwright/index.ts  | 18 ++++++++++--------
 .../ct-vue-cli/tests/slots/slots.spec.ts       |  6 +++++-
 .../tests/vue-router/vue-router.spec.ts        |  3 +--
 .../tests/vue-router/vue-router.spec.tsx       |  3 +--
 .../ct-vue-vite/tests/slots/slots.spec.js      |  4 ++++
 29 files changed, 108 insertions(+), 106 deletions(-)

diff --git a/packages/playwright-ct-core/types/component.d.ts b/packages/playwright-ct-core/types/component.d.ts
index fc8d0eef58394..9593431cd240e 100644
--- a/packages/playwright-ct-core/types/component.d.ts
+++ b/packages/playwright-ct-core/types/component.d.ts
@@ -14,10 +14,6 @@
  * limitations under the License.
  */
 
-export interface RegisterHooksConfig {
-
-};
-
 export type JsxComponent = {
   __pw_type: 'jsx',
   type: any,
@@ -46,15 +42,15 @@ declare global {
     playwrightMount(component: Component, rootElement: Element, hooksConfig?: any): Promise<void>;
     playwrightUnmount(rootElement: Element): Promise<void>;
     playwrightUpdate(rootElement: Element, component: Component): Promise<void>;
-    __pw_hooks_before_mount?: (<HooksConfig extends RegisterHooksConfig = RegisterHooksConfig>(
+    __pw_hooks_before_mount?: (<HooksConfig>(
       params: { hooksConfig?: HooksConfig; [key: string]: any }
     ) => Promise<any>)[];
-    __pw_hooks_after_mount?: (<HooksConfig extends RegisterHooksConfig = RegisterHooksConfig>(
+    __pw_hooks_after_mount?: (<HooksConfig>(
       params: { hooksConfig?: HooksConfig; [key: string]: any }
     ) => Promise<void>)[];
     // 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;
+    __ctDispatchFunction(ordinal: number, args: any[]): void;
+    __pwUnwrapObject(value: any): Promise<any>;
+    __pwTransformObject(value: any, mapping: (v: any) => { result: any } | undefined): any;
   }
 }
diff --git a/packages/playwright-ct-react/hooks.d.ts b/packages/playwright-ct-react/hooks.d.ts
index 0fa7cf3e1ac5c..16015a4ad0fd7 100644
--- a/packages/playwright-ct-react/hooks.d.ts
+++ b/packages/playwright-ct-react/hooks.d.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
+export interface RegisterHooksConfig {}
 
-export declare function beforeMount<HooksConfig extends JsonObject>(
+export declare function beforeMount<HooksConfig = RegisterHooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig; App: () => JSX.Element }) => Promise<void | JSX.Element>
 ): void;
-export declare function afterMount<HooksConfig extends JsonObject>(
+export declare function afterMount<HooksConfig = RegisterHooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig }) => Promise<void>
 ): void;
diff --git a/packages/playwright-ct-react/index.d.ts b/packages/playwright-ct-react/index.d.ts
index 7cfcf04ba0750..6c1c1214ae283 100644
--- a/packages/playwright-ct-react/index.d.ts
+++ b/packages/playwright-ct-react/index.d.ts
@@ -15,10 +15,10 @@
  */
 
 import type { Locator } from 'playwright/test';
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
 import type { TestType } from '@playwright/experimental-ct-core';
+import type { RegisterHooksConfig } from './hooks';
 
-export interface MountOptions<HooksConfig extends JsonObject> {
+export interface MountOptions<HooksConfig extends RegisterHooksConfig> {
   hooksConfig?: HooksConfig;
 }
 
@@ -28,7 +28,7 @@ export interface MountResult extends Locator {
 }
 
 export const test: TestType<{
-  mount<HooksConfig extends JsonObject>(
+  mount<HooksConfig extends RegisterHooksConfig>(
     component: JSX.Element,
     options?: MountOptions<HooksConfig>
   ): Promise<MountResult>;
diff --git a/packages/playwright-ct-react17/hooks.d.ts b/packages/playwright-ct-react17/hooks.d.ts
index 0fa7cf3e1ac5c..16015a4ad0fd7 100644
--- a/packages/playwright-ct-react17/hooks.d.ts
+++ b/packages/playwright-ct-react17/hooks.d.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
+export interface RegisterHooksConfig {}
 
-export declare function beforeMount<HooksConfig extends JsonObject>(
+export declare function beforeMount<HooksConfig = RegisterHooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig; App: () => JSX.Element }) => Promise<void | JSX.Element>
 ): void;
-export declare function afterMount<HooksConfig extends JsonObject>(
+export declare function afterMount<HooksConfig = RegisterHooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig }) => Promise<void>
 ): void;
diff --git a/packages/playwright-ct-react17/index.d.ts b/packages/playwright-ct-react17/index.d.ts
index 7cfcf04ba0750..6c1c1214ae283 100644
--- a/packages/playwright-ct-react17/index.d.ts
+++ b/packages/playwright-ct-react17/index.d.ts
@@ -15,10 +15,10 @@
  */
 
 import type { Locator } from 'playwright/test';
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
 import type { TestType } from '@playwright/experimental-ct-core';
+import type { RegisterHooksConfig } from './hooks';
 
-export interface MountOptions<HooksConfig extends JsonObject> {
+export interface MountOptions<HooksConfig extends RegisterHooksConfig> {
   hooksConfig?: HooksConfig;
 }
 
@@ -28,7 +28,7 @@ export interface MountResult extends Locator {
 }
 
 export const test: TestType<{
-  mount<HooksConfig extends JsonObject>(
+  mount<HooksConfig extends RegisterHooksConfig>(
     component: JSX.Element,
     options?: MountOptions<HooksConfig>
   ): Promise<MountResult>;
diff --git a/packages/playwright-ct-solid/hooks.d.ts b/packages/playwright-ct-solid/hooks.d.ts
index 38d483ec6d7fa..d095e13f307e2 100644
--- a/packages/playwright-ct-solid/hooks.d.ts
+++ b/packages/playwright-ct-solid/hooks.d.ts
@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
-import { JSXElement } from "solid-js";
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
+import type { JSXElement } from 'solid-js';
 
-export declare function beforeMount<HooksConfig extends JsonObject>(
+export interface RegisterHooksConfig {}
+
+export declare function beforeMount<HooksConfig extends RegisterHooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig, App: () => JSXElement }) => Promise<void | JSXElement>
 ): void;
-export declare function afterMount<HooksConfig extends JsonObject>(
+export declare function afterMount<HooksConfig extends RegisterHooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig }) => Promise<void>
 ): void;
diff --git a/packages/playwright-ct-solid/index.d.ts b/packages/playwright-ct-solid/index.d.ts
index 7cfcf04ba0750..6c1c1214ae283 100644
--- a/packages/playwright-ct-solid/index.d.ts
+++ b/packages/playwright-ct-solid/index.d.ts
@@ -15,10 +15,10 @@
  */
 
 import type { Locator } from 'playwright/test';
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
 import type { TestType } from '@playwright/experimental-ct-core';
+import type { RegisterHooksConfig } from './hooks';
 
-export interface MountOptions<HooksConfig extends JsonObject> {
+export interface MountOptions<HooksConfig extends RegisterHooksConfig> {
   hooksConfig?: HooksConfig;
 }
 
@@ -28,7 +28,7 @@ export interface MountResult extends Locator {
 }
 
 export const test: TestType<{
-  mount<HooksConfig extends JsonObject>(
+  mount<HooksConfig extends RegisterHooksConfig>(
     component: JSX.Element,
     options?: MountOptions<HooksConfig>
   ): Promise<MountResult>;
diff --git a/packages/playwright-ct-svelte/hooks.d.ts b/packages/playwright-ct-svelte/hooks.d.ts
index 03f801c3385bf..c819fa2f07199 100644
--- a/packages/playwright-ct-svelte/hooks.d.ts
+++ b/packages/playwright-ct-svelte/hooks.d.ts
@@ -15,15 +15,16 @@
  */
 
 import type { ComponentConstructorOptions, SvelteComponent } from 'svelte';
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
 
-export declare function beforeMount<HooksConfig extends JsonObject>(
+export interface RegisterHooksConfig {}
+
+export declare function beforeMount<HooksConfig extends RegisterHooksConfig>(
   callback: (params: {
     hooksConfig?: HooksConfig,
     App: new (options: Partial<ComponentConstructorOptions>) => SvelteComponent
   }) => Promise<SvelteComponent | void>
 ): void;
-export declare function afterMount<HooksConfig extends JsonObject>(
+export declare function afterMount<HooksConfig extends RegisterHooksConfig>(
   callback: (params: {
     hooksConfig?: HooksConfig;
     svelteComponent: SvelteComponent;
diff --git a/packages/playwright-ct-svelte/index.d.ts b/packages/playwright-ct-svelte/index.d.ts
index bd1ddd5b366f2..f3325178cd4c7 100644
--- a/packages/playwright-ct-svelte/index.d.ts
+++ b/packages/playwright-ct-svelte/index.d.ts
@@ -15,15 +15,15 @@
  */
 
 import type { Locator } from 'playwright/test';
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
 import type { SvelteComponent, ComponentProps } from 'svelte/types/runtime';
 import type { TestType } from '@playwright/experimental-ct-core';
+import type { RegisterHooksConfig } from './hooks';
 
 type ComponentSlot = string | string[];
 type ComponentSlots = Record<string, ComponentSlot> & { default?: ComponentSlot };
 type ComponentEvents = Record<string, Function>;
 
-export interface MountOptions<HooksConfig extends JsonObject, Component extends SvelteComponent> {
+export interface MountOptions<HooksConfig extends RegisterHooksConfig, Component extends SvelteComponent> {
   props?: ComponentProps<Component>;
   slots?: ComponentSlots;
   on?: ComponentEvents;
@@ -39,7 +39,7 @@ export interface MountResult<Component extends SvelteComponent> extends Locator
 }
 
 export const test: TestType<{
-  mount<HooksConfig extends JsonObject, Component extends SvelteComponent = SvelteComponent>(
+  mount<HooksConfig extends RegisterHooksConfig, Component extends SvelteComponent = SvelteComponent>(
     component: new (...args: any[]) => Component,
     options?: MountOptions<HooksConfig, Component>
   ): Promise<MountResult<Component>>;
diff --git a/packages/playwright-ct-vue/index.d.ts b/packages/playwright-ct-vue/index.d.ts
index 0afd1dfed2618..1cbea2fe3ac1c 100644
--- a/packages/playwright-ct-vue/index.d.ts
+++ b/packages/playwright-ct-vue/index.d.ts
@@ -29,7 +29,7 @@ type ComponentProps<T> =
 	T extends (props: infer P, ...args: any) => any ? P :
 	{};
 
-export interface MountOptions<Component, HooksConfig extends RegisterHooksConfig> {
+export interface MountOptions<HooksConfig extends RegisterHooksConfig, Component> {
   props?: ComponentProps<Component>;
   slots?: ComponentSlots;
   on?: ComponentEvents;
@@ -59,9 +59,9 @@ export const test: TestType<{
     component: JSX.Element,
     options: MountOptionsJsx<HooksConfig>
   ): Promise<MountResultJsx>;
-  mount<Component = unknown, HooksConfig extends RegisterHooksConfig>(
+  mount<HooksConfig extends RegisterHooksConfig, Component = unknown>(
     component: Component,
-    options?: MountOptions<Component, HooksConfig>
+    options?: MountOptions<HooksConfig, Component>
   ): Promise<MountResult<Component>>;
 }>;
 
diff --git a/packages/playwright-ct-vue2/hooks.d.ts b/packages/playwright-ct-vue2/hooks.d.ts
index 4c3a391117fb0..cb31f97cf5fe8 100644
--- a/packages/playwright-ct-vue2/hooks.d.ts
+++ b/packages/playwright-ct-vue2/hooks.d.ts
@@ -14,17 +14,18 @@
  * limitations under the License.
  */
 
-import { ComponentOptions } from 'vue';
-import { CombinedVueInstance, Vue, VueConstructor } from 'vue/types/vue';
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
+import type { ComponentOptions } from 'vue';
+import type { CombinedVueInstance, Vue, VueConstructor } from 'vue/types/vue';
 
-export declare function beforeMount<HooksConfig extends JsonObject>(
-  callback: (params: { 
-    hooksConfig?: HooksConfig, 
-    Vue: VueConstructor<Vue>, 
+export interface RegisterHooksConfig {}
+
+export declare function beforeMount<HooksConfig extends RegisterHooksConfig>(
+  callback: (params: {
+    hooksConfig?: HooksConfig,
+    Vue: VueConstructor<Vue>,
   }) => Promise<void | ComponentOptions<Vue> & Record<string, unknown>>
 ): void;
-export declare function afterMount<HooksConfig extends JsonObject>(
+export declare function afterMount<HooksConfig extends RegisterHooksConfig>(
   callback: (params: {
     hooksConfig?: HooksConfig;
     instance: CombinedVueInstance<
diff --git a/packages/playwright-ct-vue2/index.d.ts b/packages/playwright-ct-vue2/index.d.ts
index f76285fb8f1e8..15811dc662f1e 100644
--- a/packages/playwright-ct-vue2/index.d.ts
+++ b/packages/playwright-ct-vue2/index.d.ts
@@ -15,8 +15,8 @@
  */
 
 import type { Locator } from 'playwright/test';
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
 import type { TestType } from '@playwright/experimental-ct-core';
+import type { RegisterHooksConfig } from './hooks';
 
 type Slot = string | string[];
 type ComponentSlots = Record<string, Slot> & { default?: Slot };
@@ -29,14 +29,14 @@ type ComponentProps<T> =
 	T extends (props: infer P, ...args: any) => any ? P :
 	{};
 
-export interface MountOptions<HooksConfig extends JsonObject, Component> {
+export interface MountOptions<HooksConfig extends RegisterHooksConfig, Component> {
   props?: ComponentProps<Component>;
   slots?: ComponentSlots;
   on?: ComponentEvents;
   hooksConfig?: HooksConfig;
 }
 
-export interface MountOptionsJsx<HooksConfig extends JsonObject> {
+export interface MountOptionsJsx<HooksConfig extends RegisterHooksConfig> {
   hooksConfig?: HooksConfig;
 }
 
@@ -55,11 +55,11 @@ export interface MountResultJsx extends Locator {
 }
 
 export const test: TestType<{
-  mount<HooksConfig extends JsonObject>(
+  mount<HooksConfig extends RegisterHooksConfig>(
     component: JSX.Element,
     options?: MountOptionsJsx<HooksConfig>
   ): Promise<MountResultJsx>;
-  mount<HooksConfig extends JsonObject, Component = unknown>(
+  mount<HooksConfig extends RegisterHooksConfig, Component = unknown>(
     component: Component,
     options?: MountOptions<HooksConfig, Component>
   ): Promise<MountResult<Component>>;
diff --git a/tests/components/ct-react-vite/playwright/index.tsx b/tests/components/ct-react-vite/playwright/index.tsx
index fa0563dbcdf9d..9054dedfd231c 100644
--- a/tests/components/ct-react-vite/playwright/index.tsx
+++ b/tests/components/ct-react-vite/playwright/index.tsx
@@ -2,18 +2,19 @@ import { beforeMount, afterMount } from '@playwright/experimental-ct-react/hooks
 import { BrowserRouter } from 'react-router-dom';
 import '../src/assets/index.css';
 
-export type HooksConfig = {
-  route?: string;
-  routing?: boolean;
+declare module '@playwright/experimental-ct-react/hooks' {
+  interface RegisterHooksConfig {
+    routing?: boolean;
+  }
 }
 
-beforeMount<HooksConfig>(async ({ hooksConfig, App }) => {
+beforeMount(async ({ hooksConfig, App }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
 
   if (hooksConfig?.routing)
      return <BrowserRouter><App /></BrowserRouter>;
 });
 
-afterMount<HooksConfig>(async () => {
+afterMount(async () => {
   console.log(`After mount`);
 });
diff --git a/tests/components/ct-react-vite/tests/react-router.spec.tsx b/tests/components/ct-react-vite/tests/react-router.spec.tsx
index 939154e9d49e3..534db1c2e1e08 100644
--- a/tests/components/ct-react-vite/tests/react-router.spec.tsx
+++ b/tests/components/ct-react-vite/tests/react-router.spec.tsx
@@ -1,9 +1,8 @@
 import { test, expect } from '@playwright/experimental-ct-react';
 import App from '@/App';
-import type { HooksConfig } from '../playwright';
 
 test('navigate to a page by clicking a link', async ({ page, mount }) => {
-  const component = await mount<HooksConfig>(<App />, {
+  const component = await mount(<App />, {
     hooksConfig: { routing: true },
   });
   await expect(component.getByRole('main')).toHaveText('Login');
@@ -13,8 +12,8 @@ test('navigate to a page by clicking a link', async ({ page, mount }) => {
   await expect(page).toHaveURL('/dashboard');
 });
 
-test('update should not reset mount hooks', async ({ page, mount }) => {
-  const component = await mount<HooksConfig>(<App title='before'/>, {
+test('update should not reset mount hooks', async ({ mount }) => {
+  const component = await mount(<App title="before"/>, {
     hooksConfig: { routing: true },
   });
   await expect(component.getByRole('heading')).toHaveText('before');
diff --git a/tests/components/ct-react-vite/tsconfig.json b/tests/components/ct-react-vite/tsconfig.json
index e706497adb7fe..5e7831dc7bded 100644
--- a/tests/components/ct-react-vite/tsconfig.json
+++ b/tests/components/ct-react-vite/tsconfig.json
@@ -21,6 +21,5 @@
       "*": ["_"],
     }
   },
-  "include": ["src", "tests"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/tests/components/ct-react17/playwright/index.tsx b/tests/components/ct-react17/playwright/index.tsx
index eb152a3558bbe..f3d9aae75b1b7 100644
--- a/tests/components/ct-react17/playwright/index.tsx
+++ b/tests/components/ct-react17/playwright/index.tsx
@@ -2,18 +2,19 @@ import { beforeMount, afterMount } from '@playwright/experimental-ct-react17/hoo
 import { BrowserRouter } from 'react-router-dom';
 import '../src/assets/index.css';
 
-export type HooksConfig = {
-  route?: string;
-  routing?: boolean;
+declare module '@playwright/experimental-ct-react17/hooks' {
+  interface RegisterHooksConfig {
+    routing?: boolean;
+  }
 }
 
-beforeMount<HooksConfig>(async ({ hooksConfig, App }) => {
+beforeMount(async ({ hooksConfig, App }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
 
   if (hooksConfig?.routing)
      return <BrowserRouter><App /></BrowserRouter>;
 });
 
-afterMount<HooksConfig>(async () => {
+afterMount(async () => {
   console.log(`After mount`);
 });
diff --git a/tests/components/ct-react17/tests/react-router.spec.tsx b/tests/components/ct-react17/tests/react-router.spec.tsx
index 73c4a50c7e4f5..52fccc0dbc85a 100644
--- a/tests/components/ct-react17/tests/react-router.spec.tsx
+++ b/tests/components/ct-react17/tests/react-router.spec.tsx
@@ -1,9 +1,8 @@
 import { test, expect } from '@playwright/experimental-ct-react17';
 import App from '@/App';
-import type { HooksConfig } from '../playwright';
 
 test('navigate to a page by clicking a link', async ({ page, mount }) => {
-  const component = await mount<HooksConfig>(<App />, {
+  const component = await mount(<App />, {
     hooksConfig: { routing: true },
   });
   await expect(component.getByRole('main')).toHaveText('Login');
@@ -14,7 +13,7 @@ test('navigate to a page by clicking a link', async ({ page, mount }) => {
 });
 
 test('update should not reset mount hooks', async ({ page, mount }) => {
-  const component = await mount<HooksConfig>(<App title='before'/>, {
+  const component = await mount(<App title='before'/>, {
     hooksConfig: { routing: true },
   });
   await expect(component.getByRole('heading')).toHaveText('before');
diff --git a/tests/components/ct-react17/tsconfig.json b/tests/components/ct-react17/tsconfig.json
index 48864aeb82bcd..e90f25b628cd9 100644
--- a/tests/components/ct-react17/tsconfig.json
+++ b/tests/components/ct-react17/tsconfig.json
@@ -25,8 +25,4 @@
       "*": ["_"],
     }
   },
-  "include": [
-    "src",
-    "tests"
-  ]
 }
diff --git a/tests/components/ct-solid/playwright/index.tsx b/tests/components/ct-solid/playwright/index.tsx
index de3eea3285f5a..3871702a9ca1b 100644
--- a/tests/components/ct-solid/playwright/index.tsx
+++ b/tests/components/ct-solid/playwright/index.tsx
@@ -2,18 +2,19 @@ import { beforeMount, afterMount } from '@playwright/experimental-ct-solid/hooks
 import { Router } from "@solidjs/router";
 import '../src/assets/index.css';
 
-export type HooksConfig = {
-  route?: string;
-  routing?: boolean;
+declare module '@playwright/experimental-ct-solid/hooks' {
+  interface RegisterHooksConfig {
+    routing?: boolean;
+  }
 }
 
-beforeMount<HooksConfig>(async ({ hooksConfig, App }) => {
+beforeMount(async ({ hooksConfig, App }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
 
   if (hooksConfig?.routing)
     return <Router><App /></Router>;
 });
 
-afterMount<HooksConfig>(async () => {
+afterMount(async () => {
   console.log(`After mount`);
 });
diff --git a/tests/components/ct-solid/tests/solid-router.spec.tsx b/tests/components/ct-solid/tests/solid-router.spec.tsx
index 60f8f24367896..24bfa3b32bff9 100644
--- a/tests/components/ct-solid/tests/solid-router.spec.tsx
+++ b/tests/components/ct-solid/tests/solid-router.spec.tsx
@@ -1,9 +1,8 @@
 import { test, expect } from '@playwright/experimental-ct-solid';
 import App from '@/App';
-import type { HooksConfig } from '../playwright';
 
 test('navigate to a page by clicking a link', async ({ page, mount }) => {
-  const component = await mount<HooksConfig>(<App />, {
+  const component = await mount(<App />, {
     hooksConfig: { routing: true },
   });
   await expect(component.getByRole('main')).toHaveText('Login');
diff --git a/tests/components/ct-svelte-vite/playwright/index.ts b/tests/components/ct-svelte-vite/playwright/index.ts
index dcbcd47225bd0..e6d176bc1d407 100644
--- a/tests/components/ct-svelte-vite/playwright/index.ts
+++ b/tests/components/ct-svelte-vite/playwright/index.ts
@@ -1,13 +1,13 @@
 import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-svelte/hooks';
 
-export type HooksConfig = {
-  context?: string;
-  route?: string;
+declare module '@playwright/experimental-ct-svelte/hooks' {
+  interface RegisterHooksConfig {
+    context?: string;
+  }
 }
 
-beforeMount<HooksConfig>(async ({ hooksConfig, App }) => {
-  console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
+beforeMount(async ({ hooksConfig, App }) => {
   return new App({
     context: new Map([
       ['context-key', hooksConfig?.context]
@@ -15,6 +15,6 @@ beforeMount<HooksConfig>(async ({ hooksConfig, App }) => {
   });
 });
 
-afterMount<HooksConfig>(async () => {
+afterMount(async () => {
   console.log(`After mount`);
 });
diff --git a/tests/components/ct-svelte-vite/tests/render.spec.ts b/tests/components/ct-svelte-vite/tests/render.spec.ts
index bf830dd7152a8..b382fa879c442 100644
--- a/tests/components/ct-svelte-vite/tests/render.spec.ts
+++ b/tests/components/ct-svelte-vite/tests/render.spec.ts
@@ -1,5 +1,4 @@
 import { test, expect } from '@playwright/experimental-ct-svelte';
-import type { HooksConfig } from '../playwright';
 import Button from '@/components/Button.svelte';
 import Empty from '@/components/Empty.svelte';
 import Context from '@/components/Context.svelte';
@@ -21,7 +20,7 @@ test('get textContent of the empty component', async ({ mount }) => {
 });
 
 test('render context', async ({ mount }) => {
-  const component = await mount<HooksConfig>(Context, {
+  const component = await mount(Context, {
     hooksConfig: {
       context: 'context-value',
     }
diff --git a/tests/components/ct-svelte-vite/tsconfig.json b/tests/components/ct-svelte-vite/tsconfig.json
index 4dc15b75b04c0..ddad149c68704 100644
--- a/tests/components/ct-svelte-vite/tsconfig.json
+++ b/tests/components/ct-svelte-vite/tsconfig.json
@@ -21,6 +21,5 @@
       "*": ["_"],
     }
   },
-  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte", "src/**/*.spec.*/*", "tests/**/*.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/tests/components/ct-svelte/playwright/index.ts b/tests/components/ct-svelte/playwright/index.ts
index fe89c98e10d87..7ea357ae6802c 100644
--- a/tests/components/ct-svelte/playwright/index.ts
+++ b/tests/components/ct-svelte/playwright/index.ts
@@ -2,14 +2,16 @@
 import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-svelte/hooks';
 
-export type HooksConfig = {
-  route: string;
+declare module '@playwright/experimental-ct-svelte/hooks' {
+  interface RegisterHooksConfig {
+    route?: string;
+  }
 }
 
-beforeMount<HooksConfig>(async ({ hooksConfig }) => {
+beforeMount(async ({ hooksConfig }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
 });
-  
-afterMount<HooksConfig>(async () => {
+
+afterMount(async () => {
   console.log(`After mount`);
 });
diff --git a/tests/components/ct-vue-cli/playwright/index.ts b/tests/components/ct-vue-cli/playwright/index.ts
index 8940db58b8167..3a0c79be5aba2 100644
--- a/tests/components/ct-vue-cli/playwright/index.ts
+++ b/tests/components/ct-vue-cli/playwright/index.ts
@@ -1,20 +1,22 @@
 import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks';
 import { router } from '../src/router';
-import Button from '../src/components/Button.vue';
 import '../src/assets/index.css';
 
-export type HooksConfig = {
-  route?: string;
-  routing?: boolean;
+declare module '@playwright/experimental-ct-vue/hooks' {
+  interface RegisterHooksConfig {
+    routing?: boolean;
+    components?: Record<string, any>;
+  }
 }
 
-beforeMount<HooksConfig>(async ({ app, hooksConfig }) => {
+beforeMount(async ({ app, hooksConfig }) => {
   if (hooksConfig?.routing)
     app.use(router as any);
-  app.component('Button', Button);
-  console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`);
+
+  for (const [name, component] of Object.entries(hooksConfig?.components || {}))
+    app.component(name, component);
 });
 
-afterMount<HooksConfig>(async ({ instance }) => {
+afterMount(async ({ instance }) => {
   console.log(`After mount el: ${instance.$el.constructor.name}`);
 });
diff --git a/tests/components/ct-vue-cli/tests/slots/slots.spec.ts b/tests/components/ct-vue-cli/tests/slots/slots.spec.ts
index 2af38036b593d..ca0a92ff7a43c 100644
--- a/tests/components/ct-vue-cli/tests/slots/slots.spec.ts
+++ b/tests/components/ct-vue-cli/tests/slots/slots.spec.ts
@@ -1,6 +1,7 @@
 import { test, expect } from '@playwright/experimental-ct-vue';
 import DefaultSlot from '@/components/DefaultSlot.vue';
 import NamedSlots from '@/components/NamedSlots.vue';
+import Button from '@/components/Button.vue';
 
 test('render a default slot', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
@@ -14,7 +15,10 @@ test('render a default slot', async ({ mount }) => {
 test('render a component as slot', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
     slots: {
-      default: '<Button title="Submit" />', // component is registered globally in /playwright/index.ts
+      default: '<Button title="Submit" />',
+    },
+    hooksConfig: {
+      components: { Button },
     },
   });
   await expect(component).toContainText('Submit');
diff --git a/tests/components/ct-vue-cli/tests/vue-router/vue-router.spec.ts b/tests/components/ct-vue-cli/tests/vue-router/vue-router.spec.ts
index c268b2fbfbadd..0caa91f5446c7 100644
--- a/tests/components/ct-vue-cli/tests/vue-router/vue-router.spec.ts
+++ b/tests/components/ct-vue-cli/tests/vue-router/vue-router.spec.ts
@@ -1,9 +1,8 @@
 import { test, expect } from '@playwright/experimental-ct-vue';
 import App from '@/App.vue';
-import type { HooksConfig } from '../../playwright';
 
 test('navigate to a page by clicking a link', async ({ page, mount }) => {
-  const component = await mount<HooksConfig>(App, {
+  const component = await mount(App, {
     hooksConfig: { routing: true },
   });
   await expect(component.getByRole('main')).toHaveText('Login');
diff --git a/tests/components/ct-vue-cli/tests/vue-router/vue-router.spec.tsx b/tests/components/ct-vue-cli/tests/vue-router/vue-router.spec.tsx
index d5f02daf608ef..8541280071523 100644
--- a/tests/components/ct-vue-cli/tests/vue-router/vue-router.spec.tsx
+++ b/tests/components/ct-vue-cli/tests/vue-router/vue-router.spec.tsx
@@ -1,9 +1,8 @@
 import { test, expect } from '@playwright/experimental-ct-vue';
 import App from '@/App.vue';
-import type { HooksConfig } from '../../playwright';
 
 test('navigate to a page by clicking a link', async ({ page, mount }) => {
-  const component = await mount<HooksConfig>(<App />, {
+  const component = await mount(<App />, {
     hooksConfig: { routing: true },
   });
   await expect(component.getByRole('main')).toHaveText('Login');
diff --git a/tests/components/ct-vue-vite/tests/slots/slots.spec.js b/tests/components/ct-vue-vite/tests/slots/slots.spec.js
index 2af38036b593d..a33c9dac920fa 100644
--- a/tests/components/ct-vue-vite/tests/slots/slots.spec.js
+++ b/tests/components/ct-vue-vite/tests/slots/slots.spec.js
@@ -1,6 +1,7 @@
 import { test, expect } from '@playwright/experimental-ct-vue';
 import DefaultSlot from '@/components/DefaultSlot.vue';
 import NamedSlots from '@/components/NamedSlots.vue';
+import Button from '@/components/Button.vue';
 
 test('render a default slot', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
@@ -16,6 +17,9 @@ test('render a component as slot', async ({ mount }) => {
     slots: {
       default: '<Button title="Submit" />', // component is registered globally in /playwright/index.ts
     },
+    hooksConfig: {
+      components: { Button }
+    }
   });
   await expect(component).toContainText('Submit');
 });