Skip to content

feat(svelte): Add Svelte 5 support #11807

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Apr 26, 2024
Merged

feat(svelte): Add Svelte 5 support #11807

merged 8 commits into from
Apr 26, 2024

Conversation

Lms24
Copy link
Member

@Lms24 Lms24 commented Apr 26, 2024

This PR updates our Svelte and SvelteKit SDKs to support Svelte 5 (tested with latest Svelte 5 preview version).
Concrete changes and adjustments:

  • Removed current_component import from Svelte SDK trackComponent function, due to the export no longer being available in Svelte 5
    • This means, the trackComponent utility can no longer auto-obtain the component name. Instead, a component name needs to be provided when calling the function or it falls back to a default const name.
    • While not ideal for Svelte <5 users; users are instructed to use our component tracking preprocessor which automatically already injects the correct component name.
    • I checked and the preprocessor doesn't work in SvelteKit apps (regardless of Svelte version). This is somewhat expected as we never added 1st class support for tracking components in SvelteKit (only pure Svelte apps), lest did we document it properly.
  • Added a dummy/no-op trackComponent utility to the Server-side of the SvelteKit SDK. Component tracking doesn't make much sense in SSR but only in client-side hydration and subsequent navigations. With this change, users can now manually call trackComponent within their pages/components.
    • For automatic component tracking I wanna add injecting the function call with our sentrySvelteKit vite plugin. This is much better DX than making the withSentryConfig wrapper work with SvelteKit apps. We can do this at any point in time, I opened Add SvelteKit component tracking auto instrumentation #11808 to track it.
  • Adjusted peer dependencies in the Svelte SDK to permit svelte@5.x whenever it's released. I don't think we should add the preview versions here but happy to change/remove for now if reviewers prefer.
  • Added SvelteKit 2 + Svelte 5 E2E test app with latest preview release with all the tests from the older SvelteKit E2E test apps. Also added a test for manual component tracking and backported it to the other Sveltekit E2E tests

closes #10275
closes #10318

@@ -52,3 +52,5 @@ export declare function flush(timeout?: number | undefined): PromiseLike<boolean
export declare const continueTrace: typeof clientSdk.continueTrace;

export declare const metrics: typeof clientSdk.metrics & typeof serverSdk.metrics;

export declare function trackComponent(options: clientSdk.TrackingOptions): ReturnType<typeof clientSdk.trackComponent>;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isomorphic type definition. This function no-ops on the server, so we can safely take the client-side types here.

@Lms24 Lms24 marked this pull request as ready for review April 26, 2024 11:47
@Lms24 Lms24 requested review from a team, stephanie-anderson, lforst, s1gr1d and AbhiPrasad and removed request for a team and stephanie-anderson April 26, 2024 11:52
},
"dependencies": {
"@sentry/sveltekit": "latest || *",
"@spotlightjs/spotlight": "2.0.0-alpha.1"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just to clarify, to we want to leave this in here?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah I think it doesn't hurt and it helped with local inspection of envelope payloads.

Copy link
Member

@mydea mydea left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sweet!

@Lms24 Lms24 merged commit 58a36e4 into develop Apr 26, 2024
@Lms24 Lms24 deleted the lms/feat-svelte-5-compat branch April 26, 2024 13:21
Lms24 added a commit that referenced this pull request Apr 26, 2024
In #11807 I added a SvelteKit+Svelte 5 E2E test. Let's also add a small
Svelte 5 standalone/SPA app ensure we cover such apps as well.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Prepare for Svelte 5 support error no matching export current_component - svelte 5 and sveltekit ^2.0
4 participants