getting started

20 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Recommended way to create Svelte project

The recommended way to create a new Svelte project is using SvelteKit. Create a new project by running: npx sv create myapp, then cd myapp, npm install, and npm run dev. SvelteKit is the official application framework from the Svelte team and is powered by Vite.

Using Svelte with Vite directly

Svelte can be used directly with Vite via the vite-plugin-svelte plugin. Create a project using npm create vite@latest and select the svelte option, or add the plugin to an existing vite.config.js file. Running npm run build generates HTML, JS, and CSS files inside the dist directory. For most projects, you will need to choose a routing library separately.

Minimum browser versions for Svelte

Svelte is expected to work in the following minimum browser versions: Chrome/Edge 87, Firefox 83, Safari 14, Opera 73, Opera (Android) 62, Samsung Internet 14.0, Android WebView 87. Internet Explorer is not supported. This represents a Baseline target of 2020.

vite-plugin-svelte minimum version for Svelte 4

If using Vite without SvelteKit with Svelte 4, upgrade vite-plugin-svelte to 2.4.1 or newer.

webpack requirement for Svelte 4

If using webpack with Svelte 4, upgrade to webpack 5 or higher and svelte-loader 3.1.8 or higher. Earlier versions are no longer supported.

Rollup requirement for Svelte 4

If using Rollup with Svelte 4, upgrade rollup-plugin-svelte to 7.1.5 or higher.

TypeScript version for Svelte 4

If using TypeScript with Svelte 4, upgrade to TypeScript 5 or higher. Lower versions might still work but no guarantees are made.

Bundler browser condition requirement in Svelte 4

Bundlers must now specify the 'browser' condition when building a frontend bundle for the browser. SvelteKit and Vite handle this automatically. For Rollup, set browser: true in @rollup/plugin-node-resolve options. For webpack, add 'browser' to the conditionNames array.

CommonJS output removed in Svelte 4

Svelte 4 no longer supports CommonJS (CJS) format for compiler output. The svelte/register hook and CJS runtime version have been removed. To stay on CJS output format, use a bundler to convert Svelte's ESM output to CJS in a post-build step.

SvelteKit minimum version for Svelte 4

If using SvelteKit with Svelte 4, upgrade to 1.20.4 or newer.

Node version requirement for Svelte 4

Svelte 4 requires Node 16 or higher. Earlier versions are no longer supported.

Svelte v2 maintenance status

Svelte v2 is no longer receiving new features. Bugs will probably only be fixed if they are extremely severe or present a security vulnerability. Documentation for Svelte v2 is still available at v2.svelte.dev/guide.

SvelteKit as official routing solution

The official routing library for Svelte is SvelteKit. It provides a filesystem router, server-side rendering (SSR), and hot module reloading (HMR) in one package. SvelteKit shares similarities with Next.js for React and Nuxt.js for Vue. It also supports hash-based routing for client-side applications.

Mobile app development with Svelte

You can leverage existing Svelte components when building mobile apps by turning a SvelteKit SPA into a mobile app with Tauri or Capacitor. Mobile features like the camera, geolocation, and push notifications are available via plugins for both platforms. Custom renderer support in Svelte 5 is under development but not yet available. Svelte Native was supported in Svelte 4 for NativeScript apps but is not currently supported in Svelte 5.

Event modifier helpers from svelte/legacy

Event modifiers are replaced with function helpers from 'svelte/legacy' like preventDefault. These should be migrated away from in favor of using event.preventDefault() directly.

createEventDispatcher not automatically migrated

The migration script does not automatically convert createEventDispatcher calls because it cannot determine if it's safe. Manual conversion to callback props is required.

beforeUpdate/afterUpdate not automatically migrated

The migration script does not convert beforeUpdate/afterUpdate because the intent cannot be determined. Manually replace with $effect.pre() and $effect() or tick() as appropriate.

Svelte 5 supports mixing old and new syntax

Svelte 5 still supports Svelte 4 syntax. You can mix and match components using the new runes syntax with components using the old syntax and vice versa.

Migration script available for upgrading to Svelte 5

Run 'npx sv migrate svelte-5' to automatically migrate most of your Svelte 4 code to Svelte 5. The script updates dependencies, migrates runes, event attributes, slots to snippets, and component instantiation.

run function from svelte/legacy for certain $: statements

When migrating, some $: statements may be converted to a run function imported from 'svelte/legacy'. This is a stopgap for side effects that ran on the server. Prefer using $effect instead.

Give your agent this brain