@playwright/experimental-ct-svelte 1.55.0-alpha-1754386682000 → 1.55.0-alpha-2025-08-06

package/index.d.ts

@@ -14,21 +14,24 @@
  * limitations under the License.
  */
 
-import type { SvelteComponent, ComponentProps } from 'svelte/types/runtime';
+import type { ComponentProps, Component, SvelteComponent } from 'svelte';
 import type { TestType, Locator } from '@playwright/experimental-ct-core';
 
-type ComponentSlot = string | string[];
+type ComponentSlot = Snippet | string;
 type ComponentSlots = Record<string, ComponentSlot> & { default?: ComponentSlot };
 type ComponentEvents = Record<string, Function>;
 
-export interface MountOptions<HooksConfig, Component extends SvelteComponent> {
+// TODO: Remove after Svelte has removed S4 fallback TypeScript types for `*.svelte` files
+type InteropComponent = (new (...args: unknown[]) => SvelteComponent) | Component<any, any, any>;
+
+export interface MountOptions<HooksConfig, Component extends InteropComponent> {
   props?: ComponentProps<Component>;
   slots?: ComponentSlots;
   on?: ComponentEvents;
   hooksConfig?: HooksConfig;
 }
 
-export interface MountResult<Component extends SvelteComponent> extends Locator {
+export interface MountResult<Component extends InteropComponent> extends Locator {
   unmount(): Promise<void>;
   update(options: {
     props?: Partial<ComponentProps<Component>>;
@@ -37,8 +40,8 @@ export interface MountResult<Component extends SvelteComponent> extends Locator
 }
 
 export const test: TestType<{
-  mount<HooksConfig, Component extends SvelteComponent = SvelteComponent>(
-    component: new (...args: any[]) => Component,
+  mount<HooksConfig, Component extends InteropComponent = InteropComponent>(
+    component: Component,
     options?: MountOptions<HooksConfig, Component>
   ): Promise<MountResult<Component>>;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playwright/experimental-ct-svelte",
-  "version": "1.55.0-alpha-1754386682000",
+  "version": "1.55.0-alpha-2025-08-06",
   "description": "Playwright Component Testing for Svelte",
   "repository": {
     "type": "git",
@@ -30,11 +30,11 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@playwright/experimental-ct-core": "1.55.0-alpha-1754386682000",
-    "@sveltejs/vite-plugin-svelte": "^3.0.1"
+    "@playwright/experimental-ct-core": "1.55.0-alpha-2025-08-06",
+    "@sveltejs/vite-plugin-svelte": "^5.1.0"
   },
   "devDependencies": {
-    "svelte": "^4.2.19"
+    "svelte": "^5.37.3"
   },
   "bin": {
     "playwright": "cli.js"

package/registerSource.mjs

@@ -17,10 +17,10 @@
 // @ts-check
 
 // This file is injected into the registry as text, no dependencies are allowed.
+import { createRawSnippet } from 'svelte';
+import { asClassComponent } from 'svelte/legacy';
 
-import { detach as __pwDetach, insert as __pwInsert, noop as __pwNoop } from 'svelte/internal';
-
-/** @typedef {import('../playwright-ct-core/types/component').Component} Component */
+/** @typedef {import('../playwright-ct-core/types/component').Component} PlaywrightComponent */
 /** @typedef {import('../playwright-ct-core/types/component').ObjectComponent} ObjectComponent */
 /** @typedef {any} FrameworkComponent */
 /** @typedef {import('svelte').SvelteComponent} SvelteComponent */
@@ -33,36 +33,23 @@ function isObjectComponent(component) {
   return typeof component === 'object' && component && component.__pw_type === 'object-component';
 }
 
-/**
- * TODO: remove this function when the following issue is fixed:
- * https://github.com/sveltejs/svelte/issues/2588
- */
-function __pwCreateSlots(slots) {
-  const svelteSlots = {};
-
-  for (const slotName in slots) {
-    const template = document
-        .createRange()
-        .createContextualFragment(slots[slotName]);
-    svelteSlots[slotName] = [createSlotFn(template)];
-  }
+/** @type {( component: ObjectComponent ) => Record<string, any>} */
+function extractProps(component) {
+  let { props, slots } = component;
 
-  function createSlotFn(element) {
-    return function() {
-      return {
-        c: __pwNoop,
-        m: function mount(target, anchor) {
-          __pwInsert(target, element, anchor);
-        },
-        d: function destroy(detaching) {
-          if (detaching)
-            __pwDetach(element);
-        },
-        l: __pwNoop,
-      };
-    };
-  }
-  return svelteSlots;
+  // Svelte 5 dropped support for the old slot implementation in exchange for prop-based "snippets". Continue
+  // supporting string snippets in Playwright
+  slots = Object.fromEntries(
+    Object.entries(slots ?? {}).map(([key, snippet]) => {
+      if (typeof snippet === "string") {
+        return [key, createRawSnippet(() => ({ render: () => snippet }))];
+      }
+
+      return [key, snippet]
+    })
+  );
+
+  return { ...props, ...slots };
 }
 
 const __pwSvelteComponentKey = Symbol('svelteComponent');
@@ -71,23 +58,20 @@ window.playwrightMount = async (component, rootElement, hooksConfig) => {
   if (!isObjectComponent(component))
     throw new Error('JSX mount notation is not supported');
 
-  const objectComponent = component;
-  const componentCtor = component.type;
+  const componentCtor = asClassComponent(component.type);
+  const props = extractProps(component);
 
   class App extends componentCtor {
     constructor(options = {}) {
       super({
         target: rootElement,
-        props: {
-          ...objectComponent.props,
-          $$slots: __pwCreateSlots(objectComponent.slots),
-          $$scope: {},
-        },
+        props,
         ...options
       });
     }
   }
 
+  /** @type {SvelteComponent | undefined} */
   let svelteComponent;
   for (const hook of window.__pw_hooks_before_mount || [])
     svelteComponent = await hook({ hooksConfig, App });
@@ -97,9 +81,6 @@ window.playwrightMount = async (component, rootElement, hooksConfig) => {
 
   rootElement[__pwSvelteComponentKey] = svelteComponent;
 
-  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 || [])
     await hook({ hooksConfig, svelteComponent });
 };
@@ -120,9 +101,5 @@ window.playwrightUpdate = async (rootElement, component) => {
   if (!svelteComponent)
     throw new Error('Component was not mounted');
 
-  for (const [key, listener] of Object.entries(component.on || {}))
-    svelteComponent.$on(key, event => listener(event.detail));
-
-  if (component.props)
-    svelteComponent.$set(component.props);
+  svelteComponent.$set(extractProps(component));
 };