feat(svelte): add support for svelte5 #34715

shfx · 2025-02-10T20:17:24Z

Adding support for svelte5.

This change works for us but I need some additional eyes and hands to verify if this is what you might need to upgrade to svelte5. Keep in mind this PR is using somewhat legacy api that is there just to help migration and should be rewritten to "native" before they ditch it (somewhere around svelte6)

Closes #30278

shfx · 2025-02-10T20:18:24Z

@microsoft-github-policy-service agree

agg23 · 2025-02-11T13:19:38Z

There's a lot of diff here because of auto-formatting. Please remove these changes.

mxschmitt · 2025-02-11T13:27:08Z

tests/components/ct-svelte-vite/package.json

@@ -18,6 +18,6 @@
    "vite": "^5.2.8"
  },
  "dependencies": {
-    "svelte": "^4.2.8"
+    "svelte": "^5.19.9"


I think we actually want to introduce ct-svelte4-vite to keep testing for vite4, wdyt @agg23

Sure, I'll will try to do that today. Thanks for the input.

agg23 · 2025-02-18T13:39:44Z

No rush, but you still have a bunch of formatting changes and stuff that doesn't pass the linter.

shfx · 2025-02-18T19:19:49Z

Ugh, some issues after a rebase. I will fix those issues tomorrow, both linting and npm issue as I don't have much time after my 9-5 job.

I also don't think I can fully make it backward compatible as there is no option to attach slots to svelte4 components like there was in the previous version of the library.

shfx · 2025-02-18T19:27:56Z

I think bumping vite to 6.1.0 in the project root broke my pipelines.

shfx · 2025-02-18T22:27:10Z

Will try to rebase tomorrow if there is a fix for that.

shfx · 2025-02-20T23:05:53Z

I don't think I can fix the pipeline without someone bumping dependencies for react

❯ npm i        
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @vitejs/plugin-react@4.2.1
npm error Found: vite@6.1.0
npm error node_modules/vite
npm error   dev vite@"^6.1.0" from the root project
npm error   peer vite@"^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" from @vitejs/plugin-basic-ssl@1.2.0
npm error   node_modules/@vitejs/plugin-basic-ssl
npm error     dev @vitejs/plugin-basic-ssl@"^1.2.0" from the root project
npm error   4 more (@sveltejs/vite-plugin-svelte, ...)
npm error
npm error Could not resolve dependency:
npm error peer vite@"^4.2.0 || ^5.0.0" from @vitejs/plugin-react@4.2.1
npm error node_modules/@vitejs/plugin-react
npm error   dev @vitejs/plugin-react@"^4.2.1" from the root project
npm error   @vitejs/plugin-react@"^4.2.1" from @playwright/experimental-ct-react@1.51.0-next
npm error   packages/playwright-ct-react
npm error     @playwright/experimental-ct-react@1.51.0-next
npm error     node_modules/@playwright/experimental-ct-react
npm error       workspace packages/playwright-ct-react from the root project
npm error   1 more (@playwright/experimental-ct-react17)
npm error
npm error Conflicting peer dependency: vite@5.4.14
npm error node_modules/vite
npm error   peer vite@"^4.2.0 || ^5.0.0" from @vitejs/plugin-react@4.2.1
npm error   node_modules/@vitejs/plugin-react
npm error     dev @vitejs/plugin-react@"^4.2.1" from the root project
npm error     @vitejs/plugin-react@"^4.2.1" from @playwright/experimental-ct-react@1.51.0-next
npm error     packages/playwright-ct-react
npm error       @playwright/experimental-ct-react@1.51.0-next
npm error       node_modules/@playwright/experimental-ct-react
npm error         workspace packages/playwright-ct-react from the root project
npm error     1 more (@playwright/experimental-ct-react17)
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error

agg23 · 2025-02-21T13:59:09Z

I think you should be able to update @vitejs/plugin-react without issue.

shfx · 2025-02-21T14:03:15Z

I can, was not sure if I should do it in this PR. Gonna try it today.

agg23 · 2025-02-24T13:32:49Z

I think you may have messed up package-lock.json, and as a result, CI is failing to build.

agg23 · 2025-02-24T18:46:42Z

packages/playwright-ct-svelte/index.d.ts

-  props?: ComponentProps<Component>;
+export interface MountOptions<
+  HooksConfig,
+  Component extends (new (...args: any[]) => V4Component) | V5Component


Can we remove any here?

Please abstract this into a shared type so we don't have to keep typing it.

Component extends (new (...args: any[]) => V4Component) | V5Component

agg23 · 2025-02-24T18:48:21Z

packages/playwright-ct-svelte/registerSource.mjs

@@ -18,12 +18,13 @@

 // This file is injected into the registry as text, no dependencies are allowed.

-import { detach as __pwDetach, insert as __pwInsert, noop as __pwNoop } from 'svelte/internal';
+import { asClassComponent } from 'svelte/legacy';


Add a comment to remove when removing v4 support.

agg23 · 2025-02-24T18:49:46Z

packages/playwright-ct-svelte/registerSource.mjs

-        .createContextualFragment(slots[slotName]);
-    svelteSlots[slotName] = [createSlotFn(template)];
-  }
+/** @type {( component: ObjectComponent ) => Record<string, any>} */


Does this do anything?

This just adds a type to extractParam function. I usually type functions when it's helpful, this is not a TS file to jsdoc types is only thing we get :D

agg23 · 2025-02-24T18:53:06Z

packages/playwright-ct-svelte/registerSource.mjs


  class App extends componentCtor {
    constructor(options = {}) {
+      if (!isObjectComponent(component))
+        throw new Error('JSX mount notation is not supported');


Before this change we were unable to use JSX?

Fixed that. Moved a function call outside as it was not atomic and we had to double check it's type. Not it should be much cleaner.

agg23 · 2025-02-24T18:54:48Z

packages/playwright-ct-svelte/registerSource.mjs

-  }
-  return svelteSlots;
+  slots = Object.fromEntries(
+    Object.entries(slots ?? {}).map(([key, snippet]) => {


Probably add some comments for what is happening in this method. You're rewriting the old props and slots to match the new form? Is on only used in v4, so you don't have to worry about rewriting v5 onclick or whatever?

agg23 · 2025-02-24T18:55:26Z

packages/playwright-ct-svelte/registerSource.mjs

  let svelteComponent;
-  for (const hook of window.__pw_hooks_before_mount || [])
+  for (const hook of window.__pw_hooks_before_mount || []) {


This is fake diff due to formatting changes. Please revert.

agg23 · 2025-02-24T18:56:24Z

packages/playwright-ct-svelte/registerSource.mjs

  for (const hook of window.__pw_hooks_after_mount || [])
    await hook({ hooksConfig, svelteComponent });
+
+  for (const [key, listener] of Object.entries(component.on || {}))


Why did this move? Makes sense to me that we would register all listeners before firing after hooks.

agg23 · 2025-02-24T18:57:25Z

tests/components/ct-svelte-vite/src/components/Counter.svelte

 update();
 </script>

-<button on:click={() => dispatch('submit', 'hello')}>
+<button onclick={() => onsubmit?.('hello')}>


onsubmit isn't optional.

agg23 · 2025-02-24T18:58:06Z

tests/components/ct-svelte/src/components/Counter.svelte

 update();
 </script>

-<button on:click={() => dispatch('submit', 'hello')}>
+<button onclick={() => onsubmit?.('hello')}>


Optional again.

github-actions · 2025-03-02T19:45:36Z

Test results for "tests 1"

2 failed
❌ [playwright-test] › tests/runner.spec.ts:118:5 › should ignore subprocess creation error because of SIGINT @macos-latest-node18-1
❌ [playwright-test] › tests/test-server.spec.ts:170:1 › start dev server @ubuntu-latest-node22-1

5 flaky

⚠️ [firefox-page] › tests/page/page-evaluate.spec.ts:403:3 › should throw for too deep reference chain @firefox-ubuntu-22.04-node18
⚠️ [playwright-test] › tests/ui-mode-test-ct.spec.ts:155:5 › should watch test @macos-latest-node18-1
⚠️ [webkit-page] › tests/page/page-screenshot.spec.ts:345:5 › page screenshot › should work while navigating @webkit-ubuntu-22.04-node18
⚠️ [playwright-test] › tests/ui-mode-test-update.spec.ts:38:5 › should pick new / deleted files @windows-latest-node18-1
⚠️ [playwright-test] › tests/ui-mode-test-watch.spec.ts:145:5 › should watch all @windows-latest-node18-1

38640 passed, 793 skipped
✔️✔️✔️

Merge workflow run.

pavelfeldman · 2025-03-04T01:03:30Z

We do not accept patches with support for new frameworks / new versions of frameworks at this point. Let me check back with the team on why we are reviewing it. Sorry for wasting your time, I understand this might be very frustrating.

shfx · 2025-03-04T10:34:00Z

Sad. May I know why? Are you redesigning your codebase or are ditching CT all together?

This comment has been minimized.

# to view

mxschmitt reviewed Feb 11, 2025

View reviewed changes

shfx marked this pull request as draft February 13, 2025 10:18

shfx force-pushed the main branch 2 times, most recently from bc06d07 to 0d076a0 Compare February 15, 2025 16:18

This comment has been minimized.

# to view

shfx force-pushed the main branch 2 times, most recently from 7942ab7 to ee03658 Compare February 18, 2025 18:54

shfx force-pushed the main branch 2 times, most recently from f051d3c to bbd4642 Compare February 20, 2025 22:55

shfx force-pushed the main branch from 651d7c1 to 2ff43b3 Compare February 21, 2025 14:59

This comment has been minimized.

# to view

shfx marked this pull request as ready for review February 22, 2025 19:15

This comment has been minimized.

# to view

agg23 reviewed Feb 24, 2025

View reviewed changes

shfx added 15 commits March 2, 2025 19:39

feat(svelte): add support for svelte5

599c925

chore: bump svelte versions in test packages

22d60a3

refactor: make all components svelte5 compliant and update tests

dd4b035

refactor: revert some style changes and clean some code

384da4c

refactor: update components to svelte5 in ct-svelte-vite package

444d63c

refactor: remove unnecessary variable assignment

9b348cc

refactor: add types to svelte components to pleasure svelte-check

1267a57

refactor: remove typing when it's not needed

d49ab0c

refactor: remove unnecessary console.log

06ca1be

refactor: add a svelte4 version of tests

a3f6607

chore: upgrade required dependencies

e07eb93

fix: reset package-lock.json and apply upgrades once again

6add1f8

fix: fixed event reassignment on update and removed slot tests for v4

ea9e3f0

chore: upgrade vite svelte plugin

c9f4373

refactor: removed unnecessary optional chaining, unused render calls

f48267c

shfx force-pushed the main branch from 0c91275 to f48267c Compare March 2, 2025 18:41

This comment has been minimized.

# to view

shfx added 2 commits March 2, 2025 20:00

refactor: add comments to our temporary extractParams function

f37b2bd

refactor: move props outside of class definition to satisfy typechecker

ec6c2ab

shfx force-pushed the main branch from 42460ff to ec6c2ab Compare March 2, 2025 19:01

This comment has been minimized.

# to view

feat(svelte): add support for svelte5 #34715

Are you sure you want to change the base?

feat(svelte): add support for svelte5 #34715

Conversation

shfx commented Feb 10, 2025 • edited Loading

shfx commented Feb 10, 2025

This comment has been minimized.

This comment has been minimized.

agg23 commented Feb 11, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

agg23 commented Feb 18, 2025

shfx commented Feb 18, 2025

shfx commented Feb 18, 2025

shfx commented Feb 18, 2025

shfx commented Feb 20, 2025

agg23 commented Feb 21, 2025

shfx commented Feb 21, 2025

This comment has been minimized.

This comment has been minimized.

agg23 commented Feb 24, 2025

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment has been minimized.

This comment has been minimized.

github-actions bot commented Mar 2, 2025

Test results for "tests 1"

pavelfeldman commented Mar 4, 2025

shfx commented Mar 4, 2025

shfx commented Feb 10, 2025 •

edited

Loading