refactor(svelte): migrate component props to Svelte 5 syntax #2332
Conversation
switched the data props which is coming from the parent component to use the svelte 5 runes
changes :
export let data;
to
let { data } = $props();
and this works as well
|
The preview deployment failed. 🔴 Last updated at: 2025-08-30 06:28:02 CET |
appwrite.ioProject ID: Note Appwrite has a Discord community with over 16 000 members. |
WalkthroughThe change updates prop handling in src/routes/docs/tutorials/sveltekit/step-7/+page.markdoc. The page no longer declares an exported prop (export let data). Instead, it retrieves the prop via internal destructuring from $props(), using let { data } = $props(). No other logic or UI changes are introduced. Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
src/routes/docs/tutorials/sveltekit/step-7/+page.markdoc (4)
54-55: Optional: align event handlers with Svelte 5 style.For consistency with Svelte 5 docs, consider switching
on:submit/on:clicktoonsubmit/onclickin the snippet. (svelte.dev)Apply this minimal diff to the snippet:
- <form on:submit={add}> + <form onsubmit={add}> ... - <button type="button" on:click={() => remove(idea.$id)}>Remove</button> + <button type="button" onclick={() => remove(idea.$id)}>Remove</button>Also applies to: 85-86
26-26: Nit: use “svelte” code fence for better highlighting.Change the code block language from
htmltosveltefor accurate syntax highlighting in docs.-```html +```svelte
32-33: Docs enhancement: add a TS-typed variant.If the tutorial targets TS users, show the typed form using
PageProps(added in SvelteKit 2.16.0). (svelte.io, svelte.dev)Add alongside the JS example:
<script lang="ts"> import type { PageProps } from './$types'; let { data }: PageProps = $props(); </script>
4-4: Grammar: fix description text.“pagining” → “pagination”; “you SvelteKit” → “your SvelteKit”.
-description: Add pagining and ordering to you SvelteKit application powered by Appwrite Databases. +description: Add pagination and ordering to your SvelteKit application powered by Appwrite Databases.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
src/routes/docs/tutorials/sveltekit/step-7/+page.markdoc(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: build
- GitHub Check: tests
- GitHub Check: format
🔇 Additional comments (1)
src/routes/docs/tutorials/sveltekit/step-7/+page.markdoc (1)
32-32: Svelte 5 props migration looks correct.Using
let { data } = $props();is the recommended replacement forexport let data;in Svelte 5/SvelteKit pages. No functional changes needed. (svelte.dev)
1 participant
Summary
This PR updates components to use the new Svelte 5 syntax for handling props.
Changes
Replaced the old Svelte 4 style:
With the new Svelte 5 destructured props syntax:
let { data } = $props();Why
Svelte 5 introduces a new $props() API for working with props, replacing the export let ... syntax used in Svelte 4.
This migration ensures the codebase is compatible with Svelte 5 and avoids deprecated syntax.
Additional Notes
No functional logic was changed — only syntax was updated.
All components now follow Svelte 5 standards for prop definitions