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/[email protected]
npm error Found: [email protected]
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/[email protected]
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/[email protected]
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/[email protected]
npm error   packages/playwright-ct-react
npm error     @playwright/[email protected]
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: [email protected]
npm error node_modules/vite
npm error   peer vite@"^4.2.0 || ^5.0.0" from @vitejs/[email protected]
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/[email protected]
npm error     packages/playwright-ct-react
npm error       @playwright/[email protected]
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.

github-actions · 2025-02-24T17:29:33Z

Test results for "tests 1"

8 flaky

⚠️ [firefox-page] › tests/page/page-evaluate.spec.ts:403:3 › should throw for too deep reference chain @firefox-ubuntu-22.04-node18
⚠️ [installation tests] › tests/playwright-test-package-managers.spec.ts:54:5 › npm: uninstalling ct removes playwright bin @package-installations-macos-latest
⚠️ [chromium-library] › tests/library/proxy.spec.ts:93:11 › should proxy local network requests › by default › link-local @ubuntu-20.04-chromium-tip-of-tree
⚠️ [webkit-library] › tests/library/browsercontext-proxy.spec.ts:27:3 › should work when passing the proxy only on the context level @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/selector-generator.spec.ts:428:5 › selector generator › should work without CSS.escape @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/trace-viewer.spec.ts:109:1 › should show tracing.group in the action list with location @webkit-ubuntu-22.04-node18
⚠️ [webkit-page] › tests/page/page-event-popup.spec.ts:28:3 › should work with window features @webkit-ubuntu-22.04-node18
⚠️ [webkit-page] › tests/page/page-set-input-files.spec.ts:146:5 › should upload large file @webkit-ubuntu-22.04-node18

38671 passed, 793 skipped
✔️✔️✔️

Merge workflow run.

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?

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?

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.

This comment has been minimized.

Sign in 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.

Sign in 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 added 8 commits February 21, 2025 15:59

feat(svelte): add support for svelte5

b1659fb

chore: bump svelte versions in test packages

3e0a192

refactor: make all components svelte5 compliant and update tests

53d6d57

refactor: revert some style changes and clean some code

0d97d5b

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

c2c3b1d

refactor: remove unnecessary variable assignment

cbcc65c

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

8930566

refactor: remove typing when it's not needed

14b4002

shfx added 3 commits February 21, 2025 15:59

refactor: remove unnecessary console.log

de8b522

refactor: add a svelte4 version of tests

9e37767

chore: upgrade required dependencies

2ff43b3

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

This comment has been minimized.

Sign in to view

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

This comment has been minimized.

Sign in to view

shfx added 2 commits February 24, 2025 16:58

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

642b074

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

1a47fc3

This comment has been minimized.

Sign in to view

chore: upgrade vite svelte plugin

0c91275

This comment has been minimized.

Sign in to view

agg23 reviewed Feb 24, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(svelte): add support for svelte5 #34715

feat(svelte): add support for svelte5 #34715

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

mxschmitt Feb 11, 2025

agg23 Feb 11, 2025

shfx Feb 13, 2025

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.

github-actions bot commented Feb 24, 2025

agg23 Feb 24, 2025

agg23 Feb 24, 2025

agg23 Feb 24, 2025

agg23 Feb 24, 2025

agg23 Feb 24, 2025

agg23 Feb 24, 2025

agg23 Feb 24, 2025

agg23 Feb 24, 2025

agg23 Feb 24, 2025

agg23 Feb 24, 2025

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.

github-actions bot commented Feb 24, 2025

Test results for "tests 1"

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

shfx commented Feb 10, 2025 •

edited

Loading