Svelte 5 vs Svelte 4 .cursorrules prompt file

Author: Adam Shand

What you can build

Svelte 5 Interactive Playground: An interactive online platform that allows developers to experiment with Svelte 5's new features such as runes, reactive states, effects, and snippets in a live coding environment. It can provide side-by-side comparisons with Svelte 4 to illustrate differences and improvements.Svelte 5 Code Migration Tool: A web-based application that assists in migrating projects from Svelte 4 to Svelte 5. It automatically updates deprecated syntax like on: directive, and translates top-level let declarations, reactive variables, and more to the new Svelte 5 format.Svelte 5 Advanced Tutorial Series: A comprehensive tutorial series that offers detailed lessons, quizzes, and hands-on projects covering all the new Svelte 5 features, including $state, $derived, $effect, and snippets.Svelte 5 Developer Tools Extension: A Chrome or Firefox browser extension that helps developers debug and visualize Svelte 5 applications, with features to inspect $state changes, track dependencies, and render processes.Svelte 5 Code Snippet Library: A repository of reusable code snippets specifically for Svelte 5, including new reactive declarations and advanced $derived use cases. These snippets can be integrated into popular editors like VSCode or Sublime Text.Svelte 5 Project Boilerplate Generator: A CLI-based tool that generates starter project templates built with Svelte 5, providing setup for modern build tools, state management, and component organization.Svelte 5 Community Forum: An online forum dedicated to discussions, Q&A, and sharing best practices specifically focused on Svelte 5 and its new features. It could serve as a hub for developers to connect and learn from each other.Svelte 5 Performance Analyzer: A web tool that analyzes the performance of a Svelte 5 application, highlighting areas where $state.raw could improve performance, and suggesting optimizations for effects and derived states.Svelte 5 Component Marketplace: An online marketplace where developers can buy, sell, and share components built with Svelte 5, emphasizing compatibility with the new reactivity model and snippet handling.Svelte 5 Workshop Series: Workshops intended for teams or individuals to learn about Svelte 5, focusing on practical applications of the new features in real-world project scenarios, guided by experienced Svelte developers.Svelte 5 Visualization Library: A library or toolset that leverages Svelte 5’s $effect and $state features to create dynamic, real-time data visualizations, suitable for dashboards and analytics applications.Svelte 5 Event Modifiers Suggestion Tool: An app that assists developers in replacing deprecated event modifiers with wrapper functions, offering suggestions and best practices for using new event handling paradigms in Svelte 5.

Benefits

Synopsis

Developers upgrading from Svelte 4 to Svelte 5 would benefit by constructing applications with enhanced state management and reactivity using runes, $state, $effect, and updated event handler syntax.

Overview of .cursorrules prompt

The .cursorrules file provides a detailed overview of the changes introduced in Svelte 5 compared to Svelte 4. It highlights the introduction of runes, a set of advanced primitives designed to enhance control over reactivity. Key features and their purposes are presented, such as $state for declaring reactive state, $derived for derived state, and $effect for handling side-effects. It includes code examples to demonstrate the usage of each feature. The file also addresses component props with $props and bindable props using $bindable, and describes the deprecation of certain Svelte 4 constructs like on: directives. Furthermore, it covers snippets, a new concept for reusable markup, replacing slots with more flexible usage. The document explains how event handlers are simplified as properties and the deprecated use of event modifiers. Lastly, it provides before-and-after comparisons of common scenarios as examples, aiding in transitioning from Svelte 4 to Svelte 5.

.cursorrules Content

I'm using svelte 5 instead of svelte 4 here is an overview of the changes.Svelte 5 introduces runes, a set of advanced primitives for controlling reactivity. The runes replace certain non-runes features and provide more explicit control over state and effects.Snippets, along with render tags, help create reusable chunks of markup inside your components, reducing duplication and enhancing maintainability.Sure! Here are the succinct instructions for handling Event Handlers in Svelte 5, tailored for the AI-integrated code editor to help it understand and utilize these features effectively.In Svelte 5, event handlers are treated as properties, simplifying their use and integrating them more closely with the rest of the properties in the component.Svelte 4 vs. Svelte 5:Before:```html<script>let count = 0;$: double = count * 2;$: {if (count > 10) alert('Too high!');}</script><button on:click="{()" ="">count++}> {count} / {double}</button>```After:```html<script>let count = $state(0);let double = $derived(count * 2);$effect(() => {if (count > 10) alert('Too high!');});</script><button onclick="{()" ="">count++}> {count} / {double}</button>```Svelte 4 vs. Svelte 5:Before:```html<script>let a = 0;let b = 0;$: sum = add(a, b);function add(x, y) {return x + y;}</script><button on:click="{()" ="">a++}>a++</button><button on:click="{()" ="">b++}>b++</button><p>{a} + {b} = {sum}</p>```After:```html<script>let a = $state(0);let b = $state(0);let sum = $derived(add());function add() {return a + b;}</script><button onclick="{()" ="">a++}>a++</button><button onclick="{()" ="">b++}>b++</button><p>{a} + {b} = {sum}</p>```Svelte 4 vs. Svelte 5:Before:```html<script>let a = 0;let b = 0;$: sum = a + noTrack(b);function noTrack(value) {return value;}</script><button on:click="{()" ="">a++}>a++</button><button on:click="{()" ="">b++}>b++</button><p>{a} + {b} = {sum}</p>```After:```html<script>import { untrack } from 'svelte';let a = $state(0);let b = $state(0);let sum = $derived(add());function add() {return a + untrack(() => b);}</script><button onclick="{()" ="">a++}>a++</button><button onclick="{()" ="">b++}>b++</button><p>{a} + {b} = {sum}</p>```Svelte 5:```html<script>let { count = 0 } = $props();</script>{count}```Svelte 5:```html<script>let { class: classname, ...others } = $props();</script><pre class="{classname}">{JSON.stringify(others)}</pre>```Svelte 4 vs. Svelte 5:Before:```html<script>import { tick, beforeUpdate } from 'svelte';let theme = 'dark';let messages = [];let viewport;let updatingMessages = false;beforeUpdate(() => {if (updatingMessages) {const autoscroll =viewport && viewport.offsetHeight + viewport.scrollTop > viewport.scrollHeight - 50;if (autoscroll) {tick().then(() => viewport.scrollTo(0, viewport.scrollHeight));}}});function handleKeydown(event) {if (event.key === 'Enter') {const text = event.target.value;if (text) {messages = [...messages, text];updatingMessages = true;event.target.value = '';}}}function toggle() {theme = theme === 'dark' ? 'light' : 'dark';}</script><div class:dark="{theme" ="" ="" ="dark" }><div bind:this="{viewport}">{#each messages as message}<p>{message}</p>{/each}</div><input on:keydown="{handleKeydown}" /><button on:click="{toggle}">Toggle dark mode</button></div>```After:```html<script>import { tick } from 'svelte';let theme = $state('dark');let messages = $state([]);let viewport;$effect.pre(() => {messages;const autoscroll =viewport && viewport.offsetHeight + viewport.scrollTop > viewport.scrollHeight - 50;if (autoscroll) {tick().then(() => viewport.scrollTo(0, viewport.scrollHeight));}});function handleKeydown(event) {if (event.key === 'Enter') {const text = event.target.value;if (text) {messages = [...messages, text];event.target.value = '';}}}function toggle() {theme = theme === 'dark' ? 'light' : 'dark';}</script><div class:dark="{theme" ="" ="" ="dark" }><div bind:this="{viewport}">{#each messages as message}<p>{message}</p>{/each}</div><input onkeydown="{handleKeydown}" /><button onclick="{toggle}">Toggle dark mode</button></div>```Svelte 5:```html<script>let { ...props } = $props();</script><button {...props}>a button</button>```Passing content using snippets:```html<!-- consumer --><script>import Button from './Button.svelte';</script><button>{#snippet children(prop)} click {prop} {/snippet}</button><!-- provider (Button.svelte) --><script>let { children } = $props();</script><button>{@render children("some value")}</button>```