diff --git a/.changeset/README.md b/.changeset/README.md
new file mode 100644
index 000000000000..e5b6d8d6a67a
--- /dev/null
+++ b/.changeset/README.md
@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
diff --git a/.changeset/config.json b/.changeset/config.json
new file mode 100644
index 000000000000..b56077a9220c
--- /dev/null
+++ b/.changeset/config.json
@@ -0,0 +1,11 @@
+{
+ "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
+ "changelog": ["@svitejs/changesets-changelog-github-compact", { "repo": "sveltejs/svelte" }],
+ "commit": false,
+ "fixed": [],
+ "linked": [],
+ "access": "public",
+ "baseBranch": "main",
+ "bumpVersionsWithWorkspaceProtocolOnly": true,
+ "ignore": ["!(@sveltejs/*|svelte)"]
+}
diff --git a/.editorconfig b/.editorconfig
index ed2a319d5843..2f52d9993f71 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -11,6 +11,5 @@ trim_trailing_whitespace = true
[test/**/expected.css]
insert_final_newline = false
-[{package.json,.travis.yml,.eslintrc.json}]
+[package.json]
indent_style = space
-indent_size = 2
diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index a0ca1e55c847..000000000000
--- a/.eslintignore
+++ /dev/null
@@ -1,14 +0,0 @@
-**/_actual.js
-**/expected.js
-test/*/samples/*/output.js
-node_modules
-
-# output files
-animate/*.js
-esing/*.js
-internal/*.js
-motion/*.js
-store/*.js
-transition/*.js
-index.js
-compiler.js
diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 722b0e906749..000000000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,80 +0,0 @@
-{
- "root": true,
- "rules": {
- "indent": "off",
- "no-unused-vars": "off",
- "semi": [2, "always"],
- "keyword-spacing": [2, { "before": true, "after": true }],
- "space-before-blocks": [2, "always"],
- "no-mixed-spaces-and-tabs": [2, "smart-tabs"],
- "no-cond-assign": 0,
- "object-shorthand": [2, "always"],
- "no-const-assign": 2,
- "no-class-assign": 2,
- "no-this-before-super": 2,
- "no-var": 2,
- "no-unreachable": 2,
- "valid-typeof": 2,
- "quote-props": [2, "as-needed"],
- "one-var": [2, "never"],
- "prefer-arrow-callback": 2,
- "prefer-const": [2, { "destructuring": "all" }],
- "arrow-spacing": 2,
- "no-inner-declarations": 0,
- "require-atomic-updates": "off",
- "@typescript-eslint/indent": ["error", "tab", {
- "SwitchCase": 1,
- "ignoredNodes": ["TemplateLiteral"]
- }],
- "@typescript-eslint/camelcase": "off",
- "@typescript-eslint/no-use-before-define": "off",
- "@typescript-eslint/array-type": ["error", "array-simple"],
- "@typescript-eslint/explicit-function-return-type": "off",
- "@typescript-eslint/no-explicit-any": "off",
- "@typescript-eslint/explicit-member-accessibility": "off",
- "@typescript-eslint/no-unused-vars": ["error", {
- "argsIgnorePattern": "^_"
- }],
- "@typescript-eslint/no-object-literal-type-assertion": ["error", {
- "allowAsParameter": true
- }],
- "@typescript-eslint/no-unused-vars": "off"
- },
- "globals": {
- "globalThis": false
- },
- "env": {
- "es6": true,
- "browser": true,
- "node": true,
- "mocha": true
- },
- "extends": [
- "eslint:recommended",
- "plugin:import/errors",
- "plugin:import/warnings",
- "plugin:import/typescript",
- "plugin:@typescript-eslint/recommended"
- ],
- "parserOptions": {
- "ecmaVersion": 9,
- "sourceType": "module"
- },
- "settings": {
- "import/core-modules": [
- "svelte",
- "svelte/internal",
- "svelte/store",
- "svelte/easing",
- "estree"
- ]
- },
- "overrides": [
- {
- "files": ["*.js"],
- "rules": {
- "@typescript-eslint/no-var-requires": "off"
- }
- }
- ]
-}
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 000000000000..a299a4435ae8
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,3 @@
+/site/** -linguist-detectable
+/test/**/samples/** -linguist-detectable
+/**/*.svelte linguist-detectable
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 000000000000..d632634540e5
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1 @@
+open_collective: svelte
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
index e7bd60d3f410..220af118345e 100644
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,21 +1,28 @@
-
+- _Repeatable steps to reproduce the issue_
+
+## Thanks for being part of Svelte!
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
new file mode 100644
index 000000000000..2e484e5ca26d
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -0,0 +1,50 @@
+name: "\U0001F41E Bug report"
+description: Report an issue with Svelte
+labels: ['triage: bug']
+body:
+ - type: markdown
+ attributes:
+ value: |
+ Thanks for taking the time to fill out this bug report!
+ - type: textarea
+ id: bug-description
+ attributes:
+ label: Describe the bug
+ description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!
+ placeholder: Bug description
+ validations:
+ required: true
+ - type: textarea
+ id: reproduction
+ attributes:
+ label: Reproduction
+ description: Please provide a link to a repo or REPL that can reproduce the problem you ran into. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "need reproduction" label. If no reproduction is provided within a reasonable time-frame, the issue will be closed.
+ placeholder: Reproduction
+ validations:
+ required: true
+ - type: textarea
+ id: logs
+ attributes:
+ label: Logs
+ description: 'Please include browser console and server logs around the time this bug occurred. Optional if provided reproduction. Please try not to insert an image but copy paste the log text.'
+ render: shell
+ - type: textarea
+ id: system-info
+ attributes:
+ label: System Info
+ description: Output of `npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers`
+ render: shell
+ placeholder: System, Binaries, Browsers
+ validations:
+ required: true
+ - type: dropdown
+ id: severity
+ attributes:
+ label: Severity
+ description: Select the severity of this issue
+ options:
+ - annoyance
+ - blocking an upgrade
+ - blocking all usage of svelte
+ validations:
+ required: true
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 000000000000..ee3e5a41b982
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+ - name: Discord Chat
+ url: https://svelte.dev/chat
+ about: Ask questions and discuss with other Svelte users in real time.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
new file mode 100644
index 000000000000..d79e8b2e21f3
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -0,0 +1,35 @@
+name: 'Feature Request'
+description: Request a new Svelte feature
+labels: [enhancement]
+body:
+ - type: markdown
+ attributes:
+ value: |
+ Thanks for taking the time to request this feature! If your feature request is complex or substantial enough to warrant in-depth discussion, maintainers may close the issue and ask you to open an [RFC](https://github.com/sveltejs/rfcs).
+ - type: textarea
+ id: problem
+ attributes:
+ label: Describe the problem
+ description: Please provide a clear and concise description the problem this feature would solve. The more information you can provide here, the better.
+ placeholder: I'm always frustrated when...
+ validations:
+ required: true
+ - type: textarea
+ id: solution
+ attributes:
+ label: Describe the proposed solution
+ description: Please provide a clear and concise description of what you would like to happen.
+ placeholder: I would like to see...
+ validations:
+ required: true
+ - type: dropdown
+ id: importance
+ attributes:
+ label: Importance
+ description: How important is this feature to you?
+ options:
+ - nice to have
+ - would make my life easier
+ - i cannot use svelte without it
+ validations:
+ required: true
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index d2882acf4ac2..aa5f9732b6d3 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,7 +1,11 @@
-
+- [ ] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
+- [ ] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`.
+- [ ] This message body should clearly illustrate what problems it solves.
+- [ ] Ideally, include a test that fails without this PR but passes with it.
+- [ ] If this PR changes code within `packages/svelte/src`, add a changeset (`npx changeset`).
+
+### Tests and linting
+
+- [ ] Run the tests with `pnpm test` and lint the project with `pnpm lint`
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 000000000000..cf73a1f6cb02
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,79 @@
+name: CI
+on:
+ push:
+ branches: [main]
+ pull_request:
+permissions:
+ contents: read # to fetch code (actions/checkout)
+
+env:
+ # We only install Chromium manually
+ PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'
+
+jobs:
+ Tests:
+ permissions: {}
+ runs-on: ${{ matrix.os }}
+ timeout-minutes: 15
+ strategy:
+ matrix:
+ include:
+ - node-version: 18
+ os: windows-latest
+ - node-version: 18
+ os: macOS-latest
+ - node-version: 18
+ os: ubuntu-latest
+ - node-version: 20
+ os: ubuntu-latest
+ - node-version: 22
+ os: ubuntu-latest
+
+ steps:
+ - uses: actions/checkout@v4
+ - uses: pnpm/action-setup@v4
+ - uses: actions/setup-node@v4
+ with:
+ node-version: ${{ matrix.node-version }}
+ cache: pnpm
+ - run: pnpm install --frozen-lockfile
+ - run: pnpm playwright install chromium
+ - run: pnpm test
+ env:
+ CI: true
+ Lint:
+ permissions: {}
+ runs-on: ubuntu-latest
+ timeout-minutes: 5
+ steps:
+ - uses: actions/checkout@v4
+ - uses: pnpm/action-setup@v4
+ - uses: actions/setup-node@v4
+ with:
+ node-version: 18
+ cache: pnpm
+ - name: install
+ run: pnpm install --frozen-lockfile
+ - name: type check
+ run: pnpm check
+ - name: lint
+ if: (${{ success() }} || ${{ failure() }}) # ensures this step runs even if previous steps fail (avoids multiple runs uncovering different issues at different steps)
+ run: pnpm lint
+ - name: build and check generated types
+ if: (${{ success() }} || ${{ failure() }}) # ensures this step runs even if previous steps fail
+ run: pnpm build && { [ "`git status --porcelain=v1`" == "" ] || (echo "Generated types have changed — please regenerate types locally with `cd packages/svelte && pnpm generate:types` and commit the changes after you have reviewed them"; git diff; exit 1); }
+ Benchmarks:
+ permissions: {}
+ runs-on: ubuntu-latest
+ timeout-minutes: 15
+ steps:
+ - uses: actions/checkout@v4
+ - uses: pnpm/action-setup@v4
+ - uses: actions/setup-node@v4
+ with:
+ node-version: 18
+ cache: pnpm
+ - run: pnpm install --frozen-lockfile
+ - run: pnpm bench
+ env:
+ CI: true
diff --git a/.github/workflows/ecosystem-ci-trigger.yml b/.github/workflows/ecosystem-ci-trigger.yml
new file mode 100644
index 000000000000..71df3242e8f1
--- /dev/null
+++ b/.github/workflows/ecosystem-ci-trigger.yml
@@ -0,0 +1,94 @@
+name: ecosystem-ci trigger
+
+on:
+ issue_comment:
+ types: [created]
+
+jobs:
+ trigger:
+ runs-on: ubuntu-latest
+ if: github.repository == 'sveltejs/svelte' && github.event.issue.pull_request && startsWith(github.event.comment.body, '/ecosystem-ci run')
+ steps:
+ - uses: GitHubSecurityLab/actions-permissions/monitor@v1
+ - uses: actions/github-script@v6
+ with:
+ script: |
+ const user = context.payload.sender.login
+ console.log(`Validate user: ${user}`)
+
+ let hasTriagePermission = false
+ try {
+ const { data } = await github.rest.repos.getCollaboratorPermissionLevel({
+ owner: context.repo.owner,
+ repo: context.repo.repo,
+ username: user,
+ });
+ hasTriagePermission = data.user.permissions.triage
+ } catch (e) {
+ console.warn(e)
+ }
+
+ if (hasTriagePermission) {
+ console.log('Allowed')
+ await github.rest.reactions.createForIssueComment({
+ owner: context.repo.owner,
+ repo: context.repo.repo,
+ comment_id: context.payload.comment.id,
+ content: '+1',
+ })
+ } else {
+ console.log('Not allowed')
+ await github.rest.reactions.createForIssueComment({
+ owner: context.repo.owner,
+ repo: context.repo.repo,
+ comment_id: context.payload.comment.id,
+ content: '-1',
+ })
+ throw new Error('not allowed')
+ }
+ - uses: actions/github-script@v6
+ id: get-pr-data
+ with:
+ script: |
+ console.log(`Get PR info: ${context.repo.owner}/${context.repo.repo}#${context.issue.number}`)
+ const { data: pr } = await github.rest.pulls.get({
+ owner: context.repo.owner,
+ repo: context.repo.repo,
+ pull_number: context.issue.number
+ })
+ return {
+ num: context.issue.number,
+ branchName: pr.head.ref,
+ repo: pr.head.repo.full_name
+ }
+ - id: generate-token
+ uses: tibdex/github-app-token@b62528385c34dbc9f38e5f4225ac829252d1ea92 #keep pinned for security reasons, currently 1.8.0
+ with:
+ app_id: ${{ secrets.ECOSYSTEM_CI_GITHUB_APP_ID }}
+ private_key: ${{ secrets.ECOSYSTEM_CI_GITHUB_APP_PRIVATE_KEY }}
+ repository: '${{ github.repository_owner }}/svelte-ecosystem-ci'
+ - uses: actions/github-script@v6
+ id: trigger
+ env:
+ COMMENT: ${{ github.event.comment.body }}
+ with:
+ github-token: ${{ steps.generate-token.outputs.token }}
+ result-encoding: string
+ script: |
+ const comment = process.env.COMMENT.trim()
+ const prData = ${{ steps.get-pr-data.outputs.result }}
+
+ const suite = comment.split('\n')[0].replace(/^\/ecosystem-ci run/, '').trim()
+
+ await github.rest.actions.createWorkflowDispatch({
+ owner: context.repo.owner,
+ repo: 'svelte-ecosystem-ci',
+ workflow_id: 'ecosystem-ci-from-pr.yml',
+ ref: 'main',
+ inputs: {
+ prNumber: '' + prData.num,
+ branchName: prData.branchName,
+ repo: prData.repo,
+ suite: suite === '' ? '-' : suite
+ }
+ })
diff --git a/.github/workflows/pkg.pr.new-comment.yml b/.github/workflows/pkg.pr.new-comment.yml
new file mode 100644
index 000000000000..3f1fca5a0bea
--- /dev/null
+++ b/.github/workflows/pkg.pr.new-comment.yml
@@ -0,0 +1,116 @@
+name: Update pkg.pr.new comment
+
+on:
+ workflow_run:
+ workflows: ['Publish Any Commit']
+ types:
+ - completed
+
+permissions:
+ pull-requests: write
+
+jobs:
+ build:
+ name: 'Update comment'
+ runs-on: ubuntu-latest
+ steps:
+ - uses: GitHubSecurityLab/actions-permissions/monitor@v1
+ - name: Download artifact
+ uses: actions/download-artifact@v4
+ with:
+ name: output
+ github-token: ${{ secrets.GITHUB_TOKEN }}
+ run-id: ${{ github.event.workflow_run.id }}
+
+ - run: ls -R .
+ - name: 'Post or update comment'
+ uses: actions/github-script@v6
+ with:
+ github-token: ${{ secrets.GITHUB_TOKEN }}
+ script: |
+ const fs = require('fs');
+ const output = JSON.parse(fs.readFileSync('output.json', 'utf8'));
+
+ const bot_comment_identifier = ``;
+
+ const body = (number) => `${bot_comment_identifier}
+
+ [Playground](https://svelte.dev/playground?version=pr-${number})
+
+ \`\`\`
+ ${output.packages.map((p) => `pnpm add https://pkg.pr.new/${p.name}@${number}`).join('\n')}
+ \`\`\`
+ `;
+
+ async function find_bot_comment(issue_number) {
+ if (!issue_number) return null;
+ const comments = await github.rest.issues.listComments({
+ owner: context.repo.owner,
+ repo: context.repo.repo,
+ issue_number: issue_number,
+ });
+ return comments.data.find((comment) =>
+ comment.body.includes(bot_comment_identifier)
+ );
+ }
+
+ async function create_or_update_comment(issue_number) {
+ if (!issue_number) {
+ console.log('No issue number provided. Cannot post or update comment.');
+ return;
+ }
+
+ const existing_comment = await find_bot_comment(issue_number);
+ if (existing_comment) {
+ await github.rest.issues.updateComment({
+ owner: context.repo.owner,
+ repo: context.repo.repo,
+ comment_id: existing_comment.id,
+ body: body(issue_number),
+ });
+ } else {
+ await github.rest.issues.createComment({
+ issue_number: issue_number,
+ owner: context.repo.owner,
+ repo: context.repo.repo,
+ body: body(issue_number),
+ });
+ }
+ }
+
+ async function log_publish_info() {
+ const svelte_package = output.packages.find(p => p.name === 'svelte');
+ const svelte_sha = svelte_package.url.replace(/^.+@([^@]+)$/, '$1');
+ console.log('\n' + '='.repeat(50));
+ console.log('Publish Information');
+ console.log('='.repeat(50));
+ console.log('\nPublished Packages:');
+ console.log(output.packages.map((p) => `${p.name} - pnpm add https://pkg.pr.new/${p.name}@${p.url.replace(/^.+@([^@]+)$/, '$1')}`).join('\n'));
+ if(svelte_sha){
+ console.log('\nPlayground URL:');
+ console.log(`\nhttps://svelte.dev/playground?version=commit-${svelte_sha}`)
+ }
+ console.log('\n' + '='.repeat(50));
+ }
+
+ if (output.event_name === 'pull_request') {
+ if (output.number) {
+ await create_or_update_comment(output.number);
+ }
+ } else if (output.event_name === 'push') {
+ const pull_requests = await github.rest.pulls.list({
+ owner: context.repo.owner,
+ repo: context.repo.repo,
+ state: 'open',
+ head: `${context.repo.owner}:${output.ref.replace('refs/heads/', '')}`,
+ });
+
+ if (pull_requests.data.length > 0) {
+ await create_or_update_comment(pull_requests.data[0].number);
+ } else {
+ console.log(
+ 'No open pull request found for this push. Logging publish information to console:'
+ );
+ await log_publish_info();
+ }
+ }
diff --git a/.github/workflows/pkg.pr.new.yml b/.github/workflows/pkg.pr.new.yml
new file mode 100644
index 000000000000..90d219faae6a
--- /dev/null
+++ b/.github/workflows/pkg.pr.new.yml
@@ -0,0 +1,47 @@
+name: Publish Any Commit
+on: [push, pull_request]
+
+jobs:
+ build:
+ permissions: {}
+
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Checkout code
+ uses: actions/checkout@v4
+
+ - name: install corepack
+ run: npm i -g corepack@0.31.0
+
+ - run: corepack enable
+ - uses: actions/setup-node@v4
+ with:
+ node-version: 18.x
+ cache: pnpm
+
+ - name: Install dependencies
+ run: pnpm install --frozen-lockfile
+
+ - name: Build
+ run: pnpm build
+
+ - run: pnpx pkg-pr-new publish --comment=off --json output.json --compact --no-template './packages/svelte'
+ - name: Add metadata to output
+ uses: actions/github-script@v6
+ with:
+ github-token: ${{ secrets.GITHUB_TOKEN }}
+ script: |
+ const fs = require('fs');
+ const output = JSON.parse(fs.readFileSync('output.json', 'utf8'));
+ output.number = context.issue.number;
+ output.event_name = context.eventName;
+ output.ref = context.ref;
+ fs.writeFileSync('output.json', JSON.stringify(output), 'utf8');
+ - name: Upload output
+ uses: actions/upload-artifact@v4
+ with:
+ name: output
+ path: ./output.json
+
+ - run: ls -R .
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
new file mode 100644
index 000000000000..6debe5662a88
--- /dev/null
+++ b/.github/workflows/release.yml
@@ -0,0 +1,48 @@
+name: Release
+
+on:
+ push:
+ branches:
+ - main
+
+permissions: {}
+jobs:
+ release:
+ # prevents this action from running on forks
+ if: github.repository == 'sveltejs/svelte'
+ permissions:
+ contents: write # to create release (changesets/action)
+ id-token: write # OpenID Connect token needed for provenance
+ pull-requests: write # to create pull request (changesets/action)
+ name: Release
+ runs-on: ubuntu-latest
+ steps:
+ - uses: GitHubSecurityLab/actions-permissions/monitor@v1
+ - name: Checkout Repo
+ uses: actions/checkout@v4
+ with:
+ # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
+ fetch-depth: 0
+ - uses: pnpm/action-setup@v4
+ - name: Setup Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: 18.x
+ cache: pnpm
+
+ - name: Install
+ run: pnpm install --frozen-lockfile
+
+ - name: Build
+ run: pnpm build && { [ "`git status --porcelain=v1`" == "" ] || (echo "Generated types have changed — please regenerate types locally with `cd packages/svelte && pnpm generate:types` and commit the changes after you have reviewed them"; git diff; exit 1); }
+
+ - name: Create Release Pull Request or Publish to npm
+ id: changesets
+ uses: changesets/action@v1
+ with:
+ version: pnpm changeset:version
+ publish: pnpm changeset:publish
+ env:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ NPM_CONFIG_PROVENANCE: true
+ NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.gitignore b/.gitignore
index 590bd1d88e01..d50343766485 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,35 +1,26 @@
+# Dependency directories
+node_modules/
+
+# IDE related
.idea
+
+# Test coverage
+coverage
+*.lcov
+
+# Optional eslint cache
+.eslintcache
+
+# dotenv environment variables file
+.env
+.env.test
+
+# build output
+.vercel
+
+# OS-specific
.DS_Store
-.nyc_output
-node_modules
-*.map
-/src/compiler/compile/internal_exports.ts
-/compiler.d.ts
-/compiler.*js
-/index.*js
-/internal
-/store
-/easing
-/motion
-/transition
-/animate
-/scratch/
-/coverage/
-/coverage.lcov/
-/test/sourcemaps/samples/*/output.js
-/test/sourcemaps/samples/*/output.js.map
-/test/sourcemaps/samples/*/output.css
-/test/sourcemaps/samples/*/output.css.map
-/yarn-error.log
-_actual*.*
-/types
-
-/site/cypress/screenshots/
-/site/__sapper__/
-/site/.env
-/site/.sessions
-/site/static/svelte-app.json
-/site/static/contributors.jpg
-/site/static/workers
-/site/scripts/svelte-app
-/site/src/routes/_contributors.js
+
+tmp
+
+benchmarking/compare/.results
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 000000000000..33484750d05a
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+playwright_skip_browser_download=1
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000000..d5c124353c37
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,47 @@
+documentation/docs/
+
+packages/**/dist/*.js
+packages/**/build/*.js
+packages/**/npm/**/*
+packages/**/config/*.js
+
+# packages/svelte
+packages/svelte/messages/**/*.md
+packages/svelte/src/compiler/errors.js
+packages/svelte/src/compiler/warnings.js
+packages/svelte/src/internal/client/errors.js
+packages/svelte/src/internal/client/warnings.js
+packages/svelte/src/internal/shared/errors.js
+packages/svelte/src/internal/shared/warnings.js
+packages/svelte/src/internal/server/errors.js
+packages/svelte/tests/migrate/samples/*/output.svelte
+packages/svelte/tests/**/*.svelte
+packages/svelte/tests/**/_expected*
+packages/svelte/tests/**/_actual*
+packages/svelte/tests/**/expected*
+packages/svelte/tests/**/_output
+packages/svelte/tests/**/shards/*.test.js
+packages/svelte/tests/hydration/samples/*/_expected.html
+packages/svelte/tests/hydration/samples/*/_override.html
+packages/svelte/types
+packages/svelte/compiler/index.js
+playgrounds/sandbox/input/**.svelte
+playgrounds/sandbox/output
+
+# sites/svelte.dev
+sites/svelte.dev/static/svelte-app.json
+sites/svelte.dev/scripts/svelte-app/
+sites/svelte.dev/src/routes/_components/Supporters/contributors.jpg
+sites/svelte.dev/src/routes/_components/Supporters/contributors.js
+sites/svelte.dev/src/routes/_components/Supporters/donors.jpg
+sites/svelte.dev/src/routes/_components/Supporters/donors.js
+sites/svelte.dev/src/lib/generated
+
+**/node_modules
+**/.svelte-kit
+**/.vercel
+.github/CODEOWNERS
+.prettierignore
+.changeset
+pnpm-lock.yaml
+pnpm-workspace.yaml
diff --git a/.prettierrc b/.prettierrc
index 81451039faf5..c4fd5d9f2f73 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,3 +1,28 @@
-useTabs: true
-singleQuote: true
-trailingComma: es5
+{
+ "useTabs": true,
+ "singleQuote": true,
+ "trailingComma": "none",
+ "printWidth": 100,
+ "plugins": ["prettier-plugin-svelte"],
+ "overrides": [
+ {
+ "files": ["*.svelte"],
+ "options": {
+ "bracketSameLine": false
+ }
+ },
+ {
+ "files": ["README.md", "packages/*/README.md", "**/package.json"],
+ "options": {
+ "useTabs": false,
+ "tabWidth": 2
+ }
+ },
+ {
+ "files": ["sites/svelte-5-preview/src/routes/docs/content/**/*.md"],
+ "options": {
+ "printWidth": 60
+ }
+ }
+ ]
+}
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index a4603a26e2cc..000000000000
--- a/.travis.yml
+++ /dev/null
@@ -1,20 +0,0 @@
-language: node_js
-node_js:
- - "8"
- - "10"
- - "12"
-env:
- global:
- - BUILD_TIMEOUT=20000
-
-addons:
- apt:
- packages:
- - xvfb
-
-install:
- - export DISPLAY=':99.0'
- - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
- - npm ci || npm install
-
-after_success: npm run codecov
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 000000000000..142965ada292
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,14 @@
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "node",
+ "request": "launch",
+ "name": "Run sandbox",
+ "program": "${workspaceFolder}/playgrounds/sandbox/run.js",
+ "env": {
+ "NODE_OPTIONS": "--stack-trace-limit=10000"
+ }
+ }
+ ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000000..21a2a11c84e3
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+ "search.exclude": {
+ "sites/svelte-5-preview/static/*": true
+ },
+ "typescript.tsdk": "node_modules/typescript/lib"
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
deleted file mode 100644
index 340ef8c17633..000000000000
--- a/CHANGELOG.md
+++ /dev/null
@@ -1,1568 +0,0 @@
-# Svelte changelog
-
-## 3.6.4
-
-* Run `onMount` functions in correct order, and before initial `afterUpdate` functions ([#2281](https://github.com/sveltejs/svelte/issues/2281))
-* Fix code transformation for shorthand methods ([#2906](https://github.com/sveltejs/svelte/issues/2906))
-* Fix assignments in inline functions ([#3038](https://github.com/sveltejs/svelte/issues/3038))
-
-## 3.6.3
-
-* Fix await block mounting inside removed if block ([#1496](https://github.com/sveltejs/svelte/issues/1496))
-* Update when element references are removed ([#2034](https://github.com/sveltejs/svelte/issues/2034))
-* Don't attempt to serialize non-string values in server-rendered bindings ([#2135](https://github.com/sveltejs/svelte/issues/2135))
-* Recognise dependencies in function expressions ([#2693](https://github.com/sveltejs/svelte/issues/2693))
-* Scope pseudo-class selectors without class/type ([#1705](https://github.com/sveltejs/svelte/issues/1705))
-* Allow nested at-rules ([#3135](https://github.com/sveltejs/svelte/issues/3135))
-* Allow attributes to contain `=` characters ([#3149](https://github.com/sveltejs/svelte/pull/3149))
-
-## 3.6.2
-
-* Fix placement of each-else block ([#2917](https://github.com/sveltejs/svelte/issues/2917))
-* Make context accessible to `bind:this` ([#2806](https://github.com/sveltejs/svelte/issues/2806))
-* Pass hoisted values to slots ([#2586](https://github.com/sveltejs/svelte/issues/2586))
-
-## 3.6.1
-
-* Fix escaping of `@` in dev mode debug filename ([#3114](https://github.com/sveltejs/svelte/pull/3114))
-
-## 3.6.0
-
-* Add `innerHTML` and `textContent` bindings for `contenteditable` elements ([#2996](https://github.com/sveltejs/svelte/pull/2996))
-* Fix destructuring assignments where targets are member expressions ([#3092](https://github.com/sveltejs/svelte/issues/3092))
-* Deconflict with used globals ([#2963](https://github.com/sveltejs/svelte/pull/2963))
-* Always run `onDestroy` functions, not just for detaching components ([#3058](https://github.com/sveltejs/svelte/issues/3058))
-* Fix scope analysis around catch clauses ([#3064](https://github.com/sveltejs/svelte/issues/3064))
-* Add error constructors to known globals ([#3064](https://github.com/sveltejs/svelte/issues/3064))
-* Always bail out of hoisting on encountering local state in function definition ([#3044](https://github.com/sveltejs/svelte/issues/3044))
-* Fix incorrect merging of top-level text nodes ([#3027](https://github.com/sveltejs/svelte/issues/3027))
-* Handle removal of components in each blocks without props ([#3035](https://github.com/sveltejs/svelte/issues/3035))
-* Only call subscriber once when resubscribing to a store ([#3022](https://github.com/sveltejs/svelte/issues/3022))
-* Check for existence of dynamic component before introing ([#3054](https://github.com/sveltejs/svelte/issues/3054))
-* Sanitize names of bubbled event handlers ([#2923](https://github.com/sveltejs/svelte/issues/2923))
-
-
-## 3.5.4
-
-* Preserve whitespace at the boundaries of `{#each}` blocks ([#713](https://github.com/sveltejs/svelte/issues/713))
-* Fix dynamic `bind:this` on components ([#2333](https://github.com/sveltejs/svelte/issues/2333))
-* Fix binding to values in a component when it uses `$$props` ([#2725](https://github.com/sveltejs/svelte/issues/2725))
-* Fix parsing ambiguous HTML entities ([#3071](https://github.com/sveltejs/svelte/pull/3071))
-
-## 3.5.3
-
-* Don't double-destroy keyed each blocks with outros ([#3055](https://github.com/sveltejs/svelte/issues/3055))
-
-## 3.5.2
-
-* Prevent duplicated outros causing errors ([#3001](https://github.com/sveltejs/svelte/issues/3001))
-* Fix automatic name generation ([#2843](https://github.com/sveltejs/svelte/issues/2843))
-* Fix .d.ts stubs ([#3009](https://github.com/sveltejs/svelte/pull/3009))
-* Don't strip non-breaking spaces ([#3014](https://github.com/sveltejs/svelte/issues/3014))
-* Fix `requestAnimationFrame` context ([#2933](https://github.com/sveltejs/svelte/issues/2933))
-* Allow space before attribute value ([#3026](https://github.com/sveltejs/svelte/issues/3026))
-* Remove null/undefined attributes ([#1434](https://github.com/sveltejs/svelte/issues/1434))
-* Fix whitespace in static markup ([#3030](https://github.com/sveltejs/svelte/pull/3030))
-
-## 3.5.1
-
-* Accommodate webpack idiosyncracies
-
-## 3.5.0
-
-* Update package folder structure ([#2887](https://github.com/sveltejs/svelte/pull/2887))
-* Support `once` modifier on component events ([#2654](https://github.com/sveltejs/svelte/issues/2654))
-* Allow empty `` tags ([#2980](https://github.com/sveltejs/svelte/issues/2980))
-* Render textarea binding values inside element ([#2975](https://github.com/sveltejs/svelte/pull/2975))
-* Fix delayed animation glitch ([#2871](https://github.com/sveltejs/svelte/issues/2871))
-* Solve diamond dependencies problem with stores ([#2660](https://github.com/sveltejs/svelte/issues/2660))
-* Fix missing outros inside each blocks ([#2689](https://github.com/sveltejs/svelte/issues/2689))
-* Support animations without transitions ([#2908](https://github.com/sveltejs/svelte/issues/2908))
-* Add missing transition events ([#2912](https://github.com/sveltejs/svelte/pull/2912))
-
-
-## 3.4.4
-
-* Publish type declaration files ([#2874](https://github.com/sveltejs/svelte/issues/2874))
-* Don't trigger updates for unreferenced values ([#2865](https://github.com/sveltejs/svelte/pull/2865))
-* Omit readonly bindings from SSR output ([#2339](https://github.com/sveltejs/svelte/issues/2339))
-* Prevent outdated animation CSS ([#2871](https://github.com/sveltejs/svelte/issues/2871))
-* Repair dynamic `{@html ...}` in head ([#2880](https://github.com/sveltejs/svelte/pull/2880))
-* Don't create unknown prop warnings for internal props, or if component has `$$props` ([#2881](https://github.com/sveltejs/svelte/pull/2881))
-
-
-## 3.4.3
-
-* Add type declaration files for everything ([#2842](https://github.com/sveltejs/svelte/pull/2842))
-* Prevent `svelte/store` being bundled ([#2786](https://github.com/sveltejs/svelte/issues/2786))
-* Warn on unknown props in dev mode ([#2840](https://github.com/sveltejs/svelte/pull/2840))
-* Treat `requestAnimationFrame` as a no-op on the server ([#2856](https://github.com/sveltejs/svelte/pull/2856))
-* Add `raw` property to AST's `Text` nodes ([#2714](https://github.com/sveltejs/svelte/issues/2714))
-* Add `<details bind:open>` ([#2854](https://github.com/sveltejs/svelte/issues/2854))
-
-## 3.4.2
-
-* Use empty string for empty data attributes ([#2804](https://github.com/sveltejs/svelte/pull/2804))
-* Support `customElement: true` with no `<svelte:options>` ([#2821](https://github.com/sveltejs/svelte/issues/2821))
-* Add docstrings to `svelte/store` ([#2795](https://github.com/sveltejs/svelte/pull/2795))
-
-## 3.4.1
-
-* Handle non-falsy non-function return values from derivers ([#2780](https://github.com/sveltejs/svelte/issues/2780))
-* Allow `spring` to work server-side ([#2773](https://github.com/sveltejs/svelte/issues/2773))
-
-## 3.4.0
-
-* Allow custom element to be defined without a `tag` ([#2417](https://github.com/sveltejs/svelte/issues/2417))
-* Fix parsing of quote marks inside attribute values ([#2715](https://github.com/sveltejs/svelte/pull/2754))
-* Convert `svelte/store` to TypeScript ([#2733](https://github.com/sveltejs/svelte/pull/2733))
-* Allow `debug` tags to include hoisted values ([#2764](https://github.com/sveltejs/svelte/issues/2764))
-* Parse error if attribute name is missing `=` ([#1513](https://github.com/sveltejs/svelte/pull/2770))
-* Allow reactive declarations to depend on mutated `const` values ([#2728](https://github.com/sveltejs/svelte/issues/2728))
-
-## 3.3.0
-
-* Allow multiple event listeners on a single node ([#2688](https://github.com/sveltejs/svelte/issues/2688))
-* Allow derivers to return a cleanup function ([#2553](https://github.com/sveltejs/svelte/issues/2553))
-* Support namespaced components (`<Foo.Bar/>`) ([#2743](https://github.com/sveltejs/svelte/pull/2743))
-
-## 3.2.2
-
-* Add `window` and `document` to expected globals ([#2722](https://github.com/sveltejs/svelte/pull/2722))
-* Prevent hoisting of functions that depend on reactive state ([#2703](https://github.com/sveltejs/svelte/pull/2703))
-* Generate correct code when slot has no changes ([#2697](https://github.com/sveltejs/svelte/issues/2697))
-* Prevent `Object.prototype`-related bugs ([#2696](https://github.com/sveltejs/svelte/pull/2696))
-
-## 3.2.1
-
-* Use same comparison logic for `derived` as for other stores ([#2644](https://github.com/sveltejs/svelte/issues/2644))
-* Invalidate dependencies of reactive declarations ([#2444](https://github.com/sveltejs/svelte/issues/2444))
-* Fix instrumentation of auto-subscription self-assignments ([#2681](https://github.com/sveltejs/svelte/issues/2681))
-* Warn on non-top-level or module-context statements labeled with `$:` ([#2176](https://github.com/sveltejs/svelte/issues/2176))
-
-## 3.2.0
-
-* Improve `spring` animations, and add `hard`/`soft` options ([#2627](https://github.com/sveltejs/svelte/pull/2627))
-* Expose `parse` and `walk` functions ([#2661](https://github.com/sveltejs/svelte/issues/2661), [#2534](https://github.com/sveltejs/svelte/pull/2534))
-* Support array/object rest in `each` block destructuring patterns ([#2647](https://github.com/sveltejs/svelte/issues/2647), [#2658](https://github.com/sveltejs/svelte/pull/2658))
-* Use `setAttribute` to change `form` property on form elements ([#1742](https://github.com/sveltejs/svelte/issues/1742))
-* Fix a11y warning when `<figcaption>` is non-direct descendant of `<figure>` ([#2582](https://github.com/sveltejs/svelte/issues/2582))
-* Squelch erroneous 'empty block' warnings ([#1716](https://github.com/sveltejs/svelte/issues/1716))
-* Fix IE9/10 error with `insertBefore` ([#2573](https://github.com/sveltejs/svelte/issues/2573))
-* Prevent `$$scope` from being spread onto an element ([#2520](https://github.com/sveltejs/svelte/issues/2520))
-* Resubscribe to stores that are assigned to in `<script>` ([#2435](https://github.com/sveltejs/svelte/issues/2435))
-* Allow reactive declarations to depend on `const` variables ([#2285](https://github.com/sveltejs/svelte/issues/2285))
-* Trigger store changes on UpdateExpression ([#2625](https://github.com/sveltejs/svelte/issues/2625))
-* Squelch missing prop warning if variable is initialised ([#2635](https://github.com/sveltejs/svelte/issues/2635))
-* Add `alert`, `confirm` and `prompt` to known globals ([#2648](https://github.com/sveltejs/svelte/issues/2648))
-
-
-## 3.1.0
-
-* Allow store subscribe functions to return an object with an `unsubscribe` method, providing native RxJS support ([#2549](https://github.com/sveltejs/svelte/issues/2549))
-
-## 3.0.1
-
-* Prevent text input cursor jumping in Safari ([#2506](https://github.com/sveltejs/svelte/issues/2506))
-* Allow assignments to member expressions ([#2510](https://github.com/sveltejs/svelte/issues/2510))
-* Prevent mutually dependent functions causing an infinite during hoisting ([#2542](https://github.com/sveltejs/svelte/issues/2542))
-* Reuse scheduler promise instead of creating new one each time ([#2555](https://github.com/sveltejs/svelte/pull/2555))
-* Various site/docs fixes
-
-## 3.0.0
-
-* Everything
-
-## 2.15.4
-
-* IE `classList` fix ([#1868](https://github.com/sveltejs/svelte/pull/1868))
-
-## 2.15.3
-
-* Don't mutate AST
-
-## 2.15.2
-
-* Expose `stats.props` ([#1837](https://github.com/sveltejs/svelte/issues/1837))
-
-## 2.15.1
-
-* Don't throw missing store error when store is declared in component ([#1828](https://github.com/sveltejs/svelte/issues/1828))
-
-## 2.15.0
-
-* Event modifiers ([#1088](https://github.com/sveltejs/svelte/issues/1088))
-* Wheel and touch events are passive by default ([#1088](https://github.com/sveltejs/svelte/issues/1088))
-* Add `<svelte:document>` tag ([#1484](https://github.com/sveltejs/svelte/issues/1484))
-* Include binding values in server-rendered HTML ([#1205](https://github.com/sveltejs/svelte/issues/1205))
-* Remove attributes when value is undefined/null ([#1434](https://github.com/sveltejs/svelte/issues/1434))
-* Initialise window scroll from component data ([#938](https://github.com/sveltejs/svelte/issues/938))
-* Remove references to unused properties in generated code ([#1187](https://github.com/sveltejs/svelte/issues/1187))
-* Add TypeScript definitions for store ([#1207](https://github.com/sveltejs/svelte/issues/1207))
-* Better error for missing store ([#1807](https://github.com/sveltejs/svelte/issues/1807))
-
-## 2.14.3
-
-* Account for directive dependencies ([#1793](https://github.com/sveltejs/svelte/issues/1793))
-* Detach each block iterations in each blocks with no update method ([#1795](https://github.com/sveltejs/svelte/issues/1795))
-
-## 2.14.2
-
-* Fix issue with nested `{#if}` blocks ([#1780](https://github.com/sveltejs/svelte/issues/1780))
-
-## 2.14.1
-
-* Fix block insertion order regression ([#1778](https://github.com/sveltejs/svelte/issues/1778))
-* Fix blocks inside `<svelte:head>` ([#1774](https://github.com/sveltejs/svelte/issues/1774))
-* Better attribute parsing ([#1772](https://github.com/sveltejs/svelte/issues/1772))
-* Fix parse errors inside directives ([#1788](https://github.com/sveltejs/svelte/issues/1788))
-
-
-## 2.14.0
-
-* Refactor internals ([#1678](https://github.com/sveltejs/svelte/issues/1678))
-* Deprecate `onerror` option ([#1745](https://github.com/sveltejs/svelte/issues/1745))
-* Handle edge cases where `destroy` is called before `mount` ([#1653](https://github.com/sveltejs/svelte/pull/1653))
-* Make `scroll` binding more efficient ([#1579](https://github.com/sveltejs/svelte/pull/1770))
-* Make 'readonly property' store error more informative ([#1761](https://github.com/sveltejs/svelte/pull/1761))
-
-## 2.13.5
-
-* Fix missing dependencies in shorthand class directives ([#1739](https://github.com/sveltejs/svelte/issues/1739))
-
-## 2.13.4
-
-* Support dynamic `import()` in template expressions
-
-## 2.13.3
-
-* Fix bug with keyed each blocks and nested components ([#1706](https://github.com/sveltejs/svelte/issues/1706))
-
-## 2.13.2
-
-* Coalesce simultaneous store/component updates ([#1520](https://github.com/sveltejs/svelte/issues/1520))
-* Fix nested transitions preventing each block item removal ([#1617](https://github.com/sveltejs/svelte/issues/1617))
-* Add `class` directive shorthand and encapsulate styles ([#1695](https://github.com/sveltejs/svelte/pull/1695))
-* Prevent erroneous updates of bound inputs ([#1699](https://github.com/sveltejs/svelte/issues/1699))
-
-## 2.13.1
-
-* Coerce second argument to `toggleClass` ([#1685](https://github.com/sveltejs/svelte/issues/1685))
-
-## 2.13.0
-
-* Add `class` directive ([#890](https://github.com/sveltejs/svelte/issues/890))
-* Remove sourcemaps from npm package ([#1690](https://github.com/sveltejs/svelte/pull/1690))
-
-## 2.12.1
-
-* Allow actions to take any expression ([#1676](https://github.com/sveltejs/svelte/issues/1676))
-* Run transitions in component context ([#1675](https://github.com/sveltejs/svelte/issues/1675))
-* Correctly set select value on mount ([#1666](https://github.com/sveltejs/svelte/issues/1666))
-* Support `{@debug}` in SSR ([#1659](https://github.com/sveltejs/svelte/issues/1659))
-* Don't treat ` ` as empty whitespace ([#1658](https://github.com/sveltejs/svelte/issues/1658))
-* Fix outros for if blocks with no else ([#1688](https://github.com/sveltejs/svelte/pull/1688))
-* Set `style.cssText` in spread attributes ([#1684](https://github.com/sveltejs/svelte/pull/1684))
-
-
-## 2.12.0
-
-* Initialise actions on mount rather than hydrate ([#1653](https://github.com/sveltejs/svelte/pull/1653))
-* Allow non-existent components to be destroyed ([#1677](https://github.com/sveltejs/svelte/pull/1677))
-* Pass AMD ID from CLI correctly ([#1672](https://github.com/sveltejs/svelte/pull/1672))
-* Minor AST tweaks ([#1673](https://github.com/sveltejs/svelte/pull/1673), [#1674](https://github.com/sveltejs/svelte/pull/1674))
-* Reduce code duplication in component initialisation ([#1670](https://github.com/sveltejs/svelte/pull/1670))
-
-
-## 2.11.0
-
-* Add `--shared` CLI option ([#1649](https://github.com/sveltejs/svelte/pull/1649))
-* Run first `onstate` *before* fragment is rendered ([#1522](https://github.com/sveltejs/svelte/issues/1522))
-* Exclude current computed prop from state object ([#1544](https://github.com/sveltejs/svelte/issues/1544))
-
-
-## 2.10.1
-
-* Add sourcemaps to `{@debug}` tags ([#1647](https://github.com/sveltejs/svelte/pull/1647))
-
-## 2.10.0
-
-* Add a `{@debug}` tag, for inspecting values in templates in dev mode ([#1635](https://github.com/sveltejs/svelte/issues/1635))
-* Fix dimension bindings in iOS ([#1642](https://github.com/sveltejs/svelte/pull/1642))
-
-## 2.9.11
-
-* Pass props to custom elements rather than setting attributes, where appropriate ([#875](https://github.com/sveltejs/svelte/issues/875))
-* Handle whitespace in lists consistently between SSR and DOM renderers ([#1637](https://github.com/sveltejs/svelte/pull/1637))
-* Improve error for invalid `ref` names ([#1613](https://github.com/sveltejs/svelte/issues/1613))
-
-## 2.9.10
-
-* Handle `null` consistently in tags ([#1598](https://github.com/sveltejs/svelte/issues/1598))
-* Support object rest in computed properties ([#1540](https://github.com/sveltejs/svelte/issues/1540))
-* Always update dynamic components when expression changes ([#1621](https://github.com/sveltejs/svelte/issues/1621))
-* Encapsulate local styles inside global styles ([#1618](https://github.com/sveltejs/svelte/issues/1618))
-
-## 2.9.9
-
-* Fix attribute name regex ([#1623](https://github.com/sveltejs/svelte/pull/1623))
-
-## 2.9.8
-
-* Sanitize spread attributes in SSR — fixes vulnerability CVE-2018-6341 ([#1623](https://github.com/sveltejs/svelte/pull/1623))
-
-## 2.9.7
-
-* Allow `<input type=file bind:files>` ([#1608](https://github.com/sveltejs/svelte/issues/1608))
-* Ensure child window exists before removing listener in `addResizeHandler` ([#1600](https://github.com/sveltejs/svelte/issues/1600))
-* Handle transitions in `else` block ([#1589](https://github.com/sveltejs/svelte/issues/1589))
-
-## 2.9.6
-
-* Provide more useful error if SSR component attempts to render non-SSR component ([#1605](https://github.com/sveltejs/svelte/issues/1605))
-
-## 2.9.5
-
-* Null out refs to dynamic components ([#1596](https://github.com/sveltejs/svelte/issues/1596))
-
-## 2.9.4
-
-* Make identifier optional for `then` and `catch` blocks ([#1507](https://github.com/sveltejs/svelte/issues/1507))
-* Group outros correctly ([#1575](https://github.com/sveltejs/svelte/issues/1575))
-
-## 2.9.3
-
-* Fix bug when an each block contains transitions but its else branch does not ([#1559](https://github.com/sveltejs/svelte/issues/1559))
-* If an event handler throws an exception, don't block all future calls to that handler ([#1573](https://github.com/sveltejs/svelte/issues/1573))
-
-## 2.9.2
-
-* Fix conflict when using multiple if-else blocks, some of which use outros and some of which do not ([#1580](https://github.com/sveltejs/svelte/issues/1580))
-* Fix some cases where `.innerHTML` was being used to create child elements when it shouldn't ([#1581](https://github.com/sveltejs/svelte/issues/1581))
-
-## 2.9.1
-
-* Use `template.content` instead of `template` where appropriate ([#1571](https://github.com/sveltejs/svelte/issues/1571))
-
-## 2.9.0
-
-* Play outro transitions on `<svelte:component>` if `nestedTransitions` is true ([#1568](https://github.com/sveltejs/svelte/issues/1568))
-* Allow illegal identifiers to be component prop names, for e.g. spreading `data-foo` props ([#887](https://github.com/sveltejs/svelte/issues/887))
-* Abort transition when node is detached ([#1561](https://github.com/sveltejs/svelte/issues/1561))
-* Only include `transitionManager` when necessary ([#1514](https://github.com/sveltejs/svelte/issues/1514))
-
-## 2.8.1
-
-* Fix prefixed animation name replacement ([#1556](https://github.com/sveltejs/svelte/pull/1556))
-
-## 2.8.0
-
-* Correctly set store on nested components (to parent store, not root store) ([#1538](https://github.com/sveltejs/svelte/issues/1538))
-
-## 2.7.2
-
-* Prevent unnecessary remounts ([#1527](https://github.com/sveltejs/svelte/issues/1527))
-* Allow `refs.*` as callee ([#1526](https://github.com/sveltejs/svelte/pull/1526))
-* Handle empty lists when outroing ([#1532](https://github.com/sveltejs/svelte/issues/1532))
-
-## 2.7.1
-
-* Fix spread props with multiple dependencies ([#1515](https://github.com/sveltejs/svelte/issues/1515))
-
-## 2.7.0
-
-* Add `__svelte_meta` object to elements in dev mode, containing source info ([#1499](https://github.com/sveltejs/svelte/issues/1499))
-* Fix `bind:online` in dev mode ([#1502](https://github.com/sveltejs/svelte/issues/1502))
-* Update v1 warnings/errors ([#1508](https://github.com/sveltejs/svelte/pull/1508))
-* Transform prefixed keyframes ([#1504](https://github.com/sveltejs/svelte/issues/1504))
-
-## 2.6.6
-
-* Fix nested transition bug ([#1497](https://github.com/sveltejs/svelte/issues/1497))
-
-## 2.6.5
-
-* Handle cases where only some `if` block branches have outros ([#1492](https://github.com/sveltejs/svelte/issues/1492))
-
-## 2.6.4
-
-* Web worker support ([#1487](https://github.com/sveltejs/svelte/issues/1487))
-* Update dynamic component bindings when component changes ([#1489](https://github.com/sveltejs/svelte/issues/1489))
-
-## 2.6.3
-
-* Nested transitions respect `skipIntroByDefault` ([#1460](https://github.com/sveltejs/svelte/issues/1460))
-* Always create outro for top-level block ([#1470](https://github.com/sveltejs/svelte/issues/1470))
-
-## 2.6.2
-
-* Fix spread+bindings on dynamic components ([#1433](https://github.com/sveltejs/svelte/issues/1433))
-* Abort in-progress animations, if a new one starts ([#1458](https://github.com/sveltejs/svelte/issues/1458))
-* Allow animations to be parameterised ([#1462](https://github.com/sveltejs/svelte/issues/1462))
-
-## 2.6.1
-
-* Absolutely position outroing animated nodes ([#1457](https://github.com/sveltejs/svelte/pull/1457))
-
-## 2.6.0
-
-* Add `animate` directive ([#1454](https://github.com/sveltejs/svelte/pull/1454))
-* Add `skipIntroByDefault` compiler option and `intro: true` init option ([#1448](https://github.com/sveltejs/svelte/pull/1448))
-* Add `nestedTransitions` compiler option ([#1451](https://github.com/sveltejs/svelte/pull/1451))
-* Component outros, if `nestedTransitions` is true ([#1211](https://github.com/sveltejs/svelte/issues/1211))
-* Allow transition functions to return a function, for inter-transition coordination ([#1453](https://github.com/sveltejs/svelte/pull/1453))
-* Pass `1 - t` as second argument to transition functions ([#1452](https://github.com/sveltejs/svelte/pull/1452))
-
-## 2.5.1
-
-* Add new ARIA attributes ([#1436](https://github.com/sveltejs/svelte/pull/1436))
-* Add `Promise` to whitelisted globals ([#1441](https://github.com/sveltejs/svelte/issues/1441))
-* Allow spaces around reserved keyword attributes ([#1445](https://github.com/sveltejs/svelte/issues/1445))
-
-## 2.5.0
-
-* Support transitions in `await` blocks ([#956](https://github.com/sveltejs/svelte/issues/956))
-* Abort outros if block is recreated ([#1425](https://github.com/sveltejs/svelte/issues/1425))
-* Wait until transitions have completed before removing styles ([#648](https://github.com/sveltejs/svelte/issues/648))
-* Support event shorthand on dynamic components ([#1427](https://github.com/sveltejs/svelte/pull/1427))
-* Various codegen improvements ([#1419](https://github.com/sveltejs/svelte/pull/1419), [#1421](https://github.com/sveltejs/svelte/pull/1421), [#1422](https://github.com/sveltejs/svelte/pull/1422), [#1424](https://github.com/sveltejs/svelte/pull/1424))
-* Correctly handle `await` blocks with no dynamic content ([#1417](https://github.com/sveltejs/svelte/issues/1417))
-* Allow spread props on elements with static attribute tests ([#1429](https://github.com/sveltejs/svelte/pull/1429))
-
-
-## 2.4.4
-
-* Declare missing variable in Store ([#1415](https://github.com/sveltejs/svelte/issues/1415))
-* ALways declare spread levels ([#1413](https://github.com/sveltejs/svelte/issues/1413))
-
-## 2.4.3
-
-* `ref` directives prevent HTMLified content ([#1407](https://github.com/sveltejs/svelte/issues/1407))
-* Store computed properties update components immediately upon declaration ([#1327](https://github.com/sveltejs/svelte/issues/1327))
-
-## 2.4.2
-
-* Evaluate `each` key in child scope ([#1397](https://github.com/sveltejs/svelte/issues/1397))
-* Prevent false negatives and positives when detecting cyclical computed store properties ([#1399](https://github.com/sveltejs/svelte/issues/1399))
-* Only update dynamic component props ([#1394](https://github.com/sveltejs/svelte/issues/1394))
-
-## 2.4.1
-
-* Fix DOM event context ([#1390](https://github.com/sveltejs/svelte/issues/1390))
-
-## 2.4.0
-
-* Integrate CLI ([#1360](https://github.com/sveltejs/svelte/issues/1360))
-* Allow arbitrary destructuring for each block items, with binding ([#1385](https://github.com/sveltejs/svelte/pull/1385))
-* Each block keys can use arbitrary expressions ([#703](https://github.com/sveltejs/svelte/issues/703))
-* `bind:offsetWidth`, `bind:offsetHeight`, `bind:clientWidth` and `bind:clientHeight` ([#984](https://github.com/sveltejs/svelte/issues/984))
-* Leaner generated code for `each` blocks ([#1287](https://github.com/sveltejs/svelte/issues/1287))
-
-
-## 2.3.0
-
-* Allow computed properties to have entire state object as dependency ([#1303](https://github.com/sveltejs/svelte/issues/1303))
-* Fix `stats` when `options.generate` is `false` ([#1368](https://github.com/sveltejs/svelte/issues/1368))
-* Assign custom methods to custom elements ([#1369](https://github.com/sveltejs/svelte/issues/1369))
-* Fix `this` value in custom event handlers ([#1297](https://github.com/sveltejs/svelte/issues/1297))
-* Re-evaluate `each` values lazily ([#1286](https://github.com/sveltejs/svelte/issues/1286))
-* Preserve outer context in `await` blocks ([#1251](https://github.com/sveltejs/svelte/issues/1251))
-
-## 2.2.0
-
-* Internal refactoring ([#1367](https://github.com/sveltejs/svelte/pull/1367))
-
-## 2.1.1
-
-* Report initial `changed` based on state, not expected props ([#1356](https://github.com/sveltejs/svelte/issues/1356))
-* Set state to empty object, not null, on destroy ([#1354](https://github.com/sveltejs/svelte/issues/1354))
-* Prevent stale state in component event handlers ([#1353](https://github.com/sveltejs/svelte/issues/1353))
-
-## 2.1.0
-
-* Allow shorthand imports ([#1038](https://github.com/sveltejs/svelte/issues/1038))
-* Update spread props inside each blocks ([#1337](https://github.com/sveltejs/svelte/issues/1337))
-
-## 2.0.0
-
-*See [the blog post](https://svelte.dev/blog/version-2) for information on how to upgrade your apps*
-
-* New template syntax ([#1318](https://github.com/sveltejs/svelte/issues/1318))
-* Emit ES2015 code, not ES5 ([#1348](https://github.com/sveltejs/svelte/pull/1348))
-* Add `onstate` and `onupdate` hooks, remove `component.observe` method ([#1197](https://github.com/sveltejs/svelte/issues/1197))
-* Use destructuring syntax for computed properties ([#1069](https://github.com/sveltejs/svelte/issues/1069)
-* Change signature of `svelte.compile` ([#1298](https://github.com/sveltejs/svelte/pull/1298))
-* Remove `validate` and `Stylesheet` from public API ([#1348](https://github.com/sveltejs/svelte/pull/1348))
-* Don't typecast numeric attributes ([#657](https://github.com/sveltejs/svelte/issues/657))
-* Always compile with `Store` support, and cascading disabled ([#1348](https://github.com/sveltejs/svelte/pull/1348))
-* Remove unused `hash` property from AST ([#1348](https://github.com/sveltejs/svelte/pull/1348))
-* Rename `loc` property to `start` in warnings and errors ([#1348](https://github.com/sveltejs/svelte/pull/1348))
-
-## 1.64.1
-
-* Fix computed properties in SSR renderer ([#1349](https://github.com/sveltejs/svelte/issues/1349))
-
-## 1.64.0
-
-* Deprecate passing a string argument to `component.get` ([#1347](https://github.com/sveltejs/svelte/pull/1347))
-
-## 1.63.1
-
-* Allow `observe` method to be overwritten
-
-## 1.63.0
-
-* Add `onstate` and `onupdate` lifecycle hooks and deprecate `component.observe` ([#1197](https://github.com/sveltejs/svelte/issues/1197))
-* Add `on` and `fire` to `Store`, deprecate `onchange` and `observe` ([#1344](https://github.com/sveltejs/svelte/pull/1344))
-* Require computed properties to have destructured argument in v2 mode ([#1069](https://github.com/sveltejs/svelte/issues/1069))
-
-## 1.62.0
-
-* Add a `code` field to errors and warnings ([#474](https://github.com/sveltejs/svelte/issues/474))
-* When using v2 syntax, do not use interpolation in non-root `<style>` tags ([#1339](https://github.com/sveltejs/svelte/issues/1339))
-
-## 1.61.0
-
-* Support v2 syntax with `parser: 'v2'` option ([#1318](https://github.com/sveltejs/svelte/issues/1318))
-
-## 1.60.3
-
-* Fix validation of `multiple` attributes on bound `<select>` elements ([#1331](https://github.com/sveltejs/svelte/issues/1331))
-
-## 1.60.2
-
-* Fix order of insertions for keyed each blocks with siblings ([#1306](https://github.com/sveltejs/svelte/issues/1306))
-* Bail out of CSS DCE if element has spread attribute ([#1300](https://github.com/sveltejs/svelte/issues/1300))
-* Allow `console` etc in component events ([#1278](https://github.com/sveltejs/svelte/issues/1278))
-* Deconflict against inherited contexts ([#1275](https://github.com/sveltejs/svelte/issues/1275))
-* Make CSS DCE case insensitive ([#1269](https://github.com/sveltejs/svelte/issues/1269))
-* Error on dynamic `multiple` attribute for bound select ([#1270](https://github.com/sveltejs/svelte/issues/1270))
-* Allow custom events on `<:Window>` ([#1268](https://github.com/sveltejs/svelte/issues/1268))
-
-## 1.60.1
-
-* Fix spread updates on dynamic components ([#1307](https://github.com/sveltejs/svelte/issues/1307))
-
-## 1.60.0
-
-* Spread properties ([#195](https://github.com/sveltejs/svelte/issues/195))
-* `svelte.compile` returns an object with `{ js, css, ast }` properties, where `js` and `css` are `{ code, map }` objects ([#1298](https://github.com/sveltejs/svelte/pull/1298))
-* Fixed broken compile errors when using Rollup ([#1296](https://github.com/sveltejs/svelte/pull/1296))
-
-## 1.59.0
-
-* Deprecate `teardown` in custom event handlers ([#531](https://github.com/sveltejs/svelte/issues/531))
-* Allow static content in keyed `each` block ([#1291](https://github.com/sveltejs/svelte/issues/1291))
-* Allow empty content in keyed `each` block ([#1295](https://github.com/sveltejs/svelte/issues/1295))
-* Only delete applicable transitions ([#1290](https://github.com/sveltejs/svelte/issues/1290))
-
-## 1.58.5
-
-* Allow backtick string literals for `svg`, `tag`, and `props` properties ([#1284](https://github.com/sveltejs/svelte/issues/1284))
-* Fix removal of transition styles under Firefox ([#1288](https://github.com/sveltejs/svelte/pull/1288))
-
-## 1.58.4
-
-* Fix initial state regression ([#1283](https://github.com/sveltejs/svelte/pull/1283))
-
-## 1.58.3
-
-* Actions run in the context of the component ([#1279](https://github.com/sveltejs/svelte/pull/1279))
-* Set refs when mounting dynamic components ([#1280](https://github.com/sveltejs/svelte/pull/1280))
-
-## 1.58.2
-
-* (1.58.1 failed to publish)
-
-## 1.58.1
-
-* Actions ([#1247](https://github.com/sveltejs/svelte/pull/1247))
-* Support `preserveComments` option in SSR mode ([#1265](https://github.com/sveltejs/svelte/issues/1265))
-* Fix performance regression ([#1274](https://github.com/sveltejs/svelte/pull/1274))
-
-## 1.58.0
-
-* Fast row swapping ([#588](https://github.com/sveltejs/svelte/issues/588))
-* Better error messages for invalid directives ([#1242](https://github.com/sveltejs/svelte/pull/1242))
-* Fix local context variable bugs ([#1240](https://github.com/sveltejs/svelte/pull/1243), [#1254](https://github.com/sveltejs/svelte/pull/1254))
-* Skip missing property warnings for computed/global properties in dev mode ([#1246](https://github.com/sveltejs/svelte/pull/1246))
-* Add end position to warnings ([#1250](https://github.com/sveltejs/svelte/pull/1250))
-
-## 1.57.4
-
-* Deconflict context names ([#1229](https://github.com/sveltejs/svelte/issues/1229))
-* Use `setAttribute` to set input types ([#1209](https://github.com/sveltejs/svelte/issues/1209))
-* Scale transition duration correctly ([#1221](https://github.com/sveltejs/svelte/issues/1221))
-
-## 1.57.3
-
-* Fix scoped CSS on static child elements ([#1223](https://github.com/sveltejs/svelte/issues/1223))
-
-## 1.57.2
-
-* Fix scoped CSS on SVG elements ([#1224](https://github.com/sveltejs/svelte/issues/1224))
-
-## 1.57.1
-
-* Add each_value to contextProps ([#1206](https://github.com/sveltejs/svelte/issues/1206))
-
-## 1.57.0
-
-* Use classes (not attributes) for style encapsulation, and base36-encode hashes ([#1118](https://github.com/sveltejs/svelte/issues/1118))
-
-## 1.56.4
-
-* Allow `component` and `state` to be context names ([#1213](https://github.com/sveltejs/svelte/issues/1213))
-* Don't remove `@supports` rules when `cascade: false` ([#1215](https://github.com/sveltejs/svelte/issues/1215))
-
-## 1.56.3
-
-* Top-level transitions work inside nested components ([#1188](https://github.com/sveltejs/svelte/issues/1188))
-* Always use internal `_mount` method ([#1201](https://github.com/sveltejs/svelte/issues/1201))
-
-## 1.56.2
-
-* Null out `key` for children of keyed each blocks ([#1202](https://github.com/sveltejs/svelte/issues/1202))
-
-## 1.56.1
-
-* Fix if-in-each bug ([#1195](https://github.com/sveltejs/svelte/issues/1195))
-* Cross-browser `scrollX`/`scrollY` support ([#1175](https://github.com/sveltejs/svelte/issues/1175))
-
-## 1.56.0
-
-* Internal refactor ([#1122](https://github.com/sveltejs/svelte/issues/1122))
-* Use correct context for component events ([#1184](https://github.com/sveltejs/svelte/issues/1184))
-* Allow observing `$foo` in dev mode ([#1181](https://github.com/sveltejs/svelte/issues/1181))
-* Handle dynamic data in default slot ([#1144](https://github.com/sveltejs/svelte/issues/1144))
-
-## 1.55.1
-
-* Fix cancellation of store `onchange` handlers ([#1177](https://github.com/sveltejs/svelte/issues/1177))
-* Write `["default"]` instead of `.default` in legacy mode ([#1166](https://github.com/sveltejs/svelte/issues/1166))
-* Upgrade Acorn ([#1182](https://github.com/sveltejs/svelte/pull/1182))
-* Don't warn about capitalisation if `options.name` begins with non-alphabetical character ([#1179](https://github.com/sveltejs/svelte/pull/1179))
-
-## 1.55.0
-
-* Add `immutable` compiler option for Svelte and runtime option for `Store` ([#1146](https://github.com/sveltejs/svelte/issues/1146))
-* Fix component store bindings ([#1100](https://github.com/sveltejs/svelte/issues/1100))
-* Fire `oncreate` when custom element is attached ([#1117](https://github.com/sveltejs/svelte/issues/1117))
-* Downgrade empty blocks to a warning ([#1156](https://github.com/sveltejs/svelte/pull/1156))
-* Error on unclosed comment ([#1156](https://github.com/sveltejs/svelte/pull/1156))
-
-## 1.54.2
-
-* Prevent `await` blocks using stale state ([#1131](https://github.com/sveltejs/svelte/issues/1131))
-* Prevent erroneous missing data warnings for custom elements ([#1065](https://github.com/sveltejs/svelte/issues/1065))
-* Remove empty selectors in prod mode ([#1138](https://github.com/sveltejs/svelte/issues/1138))
-* Escape attribute values in SSR mode ([#1155](https://github.com/sveltejs/svelte/pull/1155))
-* Remove `<noscript>` elements in DOM mode ([#1108](https://github.com/sveltejs/svelte/issues/1108))
-* Allow hydration of non-root `<script>`/`<style>` tags ([#1163](https://github.com/sveltejs/svelte/pull/1163))
-* Allow interpolation in non-root `<style>` tags ([#1163](https://github.com/sveltejs/svelte/pull/1163))
-
-## 1.54.1
-
-* Hoist destructured references ([#1139](https://github.com/sveltejs/svelte/issues/1139))
-* Add `bind:volume` for media elements ([#1143](https://github.com/sveltejs/svelte/issues/1143))
-
-## 1.54.0
-
-* Run `oncreate` hooks depth-first, top-to-bottom ([#1135](https://github.com/sveltejs/svelte/issues/1135))
-* Render boolean attributes correctly in SSR mode ([#1109](https://github.com/sveltejs/svelte/issues/1109))
-* Add `feed` aria role to expected roles when doing a11y checks ([#1124](https://github.com/sveltejs/svelte/pull/1124))
-* More complete fix for case sensitive attributes ([#1062](https://github.com/sveltejs/svelte/issues/1062))
-* Handle CLRF line endings in await block comments ([#1132](https://github.com/sveltejs/svelte/issues/1132))
-
-## 1.53.0
-
-* Base scoping selectors on `<style>` contents alone ([#1091](https://github.com/sveltejs/svelte/issues/1091))
-
-## 1.52.0
-
-* Deconflict referenced globals ([#1079](https://github.com/sveltejs/svelte/issues/1079))
-* Validate contents of `await` blocks ([#1061](https://github.com/sveltejs/svelte/issues/1061))
-* Fire `oncreate` for components in `await` blocks ([#1061](https://github.com/sveltejs/svelte/issues/1061))
-* Automatically fix attribute casing ([#1062](https://github.com/sveltejs/svelte/issues/1062))
-* Fix escaping in `<script>` and `<style>` ([#1082](https://github.com/sveltejs/svelte/issues/1082))
-* Error if invalid characters are used in computed properties, and allow any valid identifier in props ([#1083](https://github.com/sveltejs/svelte/issues/1083))
-* Don't run a11y tests on components ([#1110](https://github.com/sveltejs/svelte/issues/1110))
-* Respect `store` option in SSR mode ([#1107](https://github.com/sveltejs/svelte/issues/1107))
-
-## 1.51.1
-
-* Only escape <, > and & characters ([#1082](https://github.com/sveltejs/svelte/issues/1082))
-
-## 1.51.0
-
-* Lock `scroll` bindings ([#1071](https://github.com/sveltejs/svelte/issues/1071))
-* Escape HTML entities when compiling to static HTML ([#1066](https://github.com/sveltejs/svelte/issues/1066))
-* Apply a11y warnings to SVG `<a>` attributes with `xlink:href` ([#1008](https://github.com/sveltejs/svelte/issues/1008))
-
-## 1.50.1
-
-* Prevent main fragment being created twice in custom elements ([#1064](https://github.com/sveltejs/svelte/pull/1064))
-
-## 1.50.0
-
-* Detect unused/misplaced components ([#1039](https://github.com/sveltejs/svelte/issues/1039))
-* Warn on unused event definitions/transitions ([#1051](https://github.com/sveltejs/svelte/issues/1051))
-* Remove whitespace inside `<:Head>` ([#1026](https://github.com/sveltejs/svelte/issues/1026))
-* Optimise `<title>` ([#1027](https://github.com/sveltejs/svelte/issues/1027))
-* Add `bind: false` option to disable two-way binding ([#54](https://github.com/sveltejs/svelte/issues/54))
-
-## 1.49.3
-
-* Return `html` from SSR compiler `render().toString()` methods ([#1044](https://github.com/sveltejs/svelte/issues/1044))
-* Correctly reinitialise dynamic components ([#1040](https://github.com/sveltejs/svelte/issues/1040))
-* Allow `<option>` outside `<select>` ([#1022](https://github.com/sveltejs/svelte/issues/1022))
-* Fix data references in await-block event handlers ([#1032](https://github.com/sveltejs/svelte/issues/1032))
-
-## 1.49.2
-
-* Add `store.umd.js` ([#967](https://github.com/sveltejs/svelte/issues/967))
-* Warn on use of `this` inside computed properties ([#1033](https://github.com/sveltejs/svelte/pull/1033))
-
-## 1.49.1
-
-* Pass `store` to children in SSR mode ([#1029](https://github.com/sveltejs/svelte/pull/1029))
-
-## 1.49.0
-
-* Support `store` as a component property ([#1028](https://github.com/sveltejs/svelte/pull/1028))
-
-## 1.48.0
-
-* Added `<:Head>` component for injecting contents into document head ([#1013](https://github.com/sveltejs/svelte/issues/1013)))
-* SSR `render(...)` method now returns a `{ html, css: { code, map }, head }` object ([#1013](https://github.com/sveltejs/svelte/issues/1013))
-* SSR `renderCss(...)` method is deprecated ([#1013](https://github.com/sveltejs/svelte/issues/1013))
-* Add a `preload` function to components ([#1015](https://github.com/sveltejs/svelte/issues/1015))
-* Expose `this.root` on nested components ([#1023](https://github.com/sveltejs/svelte/pull/1023))
-
-## 1.47.2
-
-* Deconflict computed properties against arguments to `_recompute` ([#1012](https://github.com/sveltejs/svelte/issues/1012))
-* Allow `await` blocks in slots ([#1018](https://github.com/sveltejs/svelte/issues/1018))
-* Allow components without slots to have whitespace as only child ([#1007](https://github.com/sveltejs/svelte/issues/1007))
-* Correctly set `toString` on `CompileError` ([#1016](https://github.com/sveltejs/svelte/pull/1016))
-
-## 1.47.1
-
-* Sanitize filenames in SSR mode ([#1005](https://github.com/sveltejs/svelte/issues/1005))
-
-## 1.47.0
-
-* Support dynamic `import(...)` inside `<script>` tags ([#1003](https://github.com/sveltejs/svelte/issues/1003))
-
-## 1.46.1
-
-* `await...then` shorthand ([#957](https://github.com/sveltejs/svelte/issues/957))
-* Allow dynamic components inside elements ([#993](https://github.com/sveltejs/svelte/issues/993))
-* Don't use `dataset` on SVG nodes ([#982](https://github.com/sveltejs/svelte/issues/982))
-* Fix erroneous `<figcaption>` a11y warning ([#991](https://github.com/sveltejs/svelte/issues/991))
-* Handle empty classes when pruning unused selectors ([#978](https://github.com/sveltejs/svelte/issues/978))
-* Better trimming of SSR'd output ([#976](https://github.com/sveltejs/svelte/issues/976))
-* Don't add `event` to `expectedProperties` ([#972](https://github.com/sveltejs/svelte/issues/972))
-* Emit error on bad `set` arguments in dev mode ([#990](https://github.com/sveltejs/svelte/issues/990))
-
-## 1.46.0
-
-* Pass `filename` through to preprocessors ([#983](https://github.com/sveltejs/svelte/issues/983))
-
-## 1.45.0
-
-* Dynamic components ([#971](https://github.com/sveltejs/svelte/pull/971))
-
-## 1.44.2
-
-* Fix `await` blocks with siblings ([#974](https://github.com/sveltejs/svelte/issues/974))
-* Fix `await` blocks inside `if` blocks ([#975](https://github.com/sveltejs/svelte/issues/975))
-
-## 1.44.1
-
-* Fix bidirectional transitions that reference state ([#962](https://github.com/sveltejs/svelte/issues/962))
-
-## 1.44.0
-
-* Add `svelte.preprocess` ([#181](https://github.com/sveltejs/svelte/issues/181), [#876](https://github.com/sveltejs/svelte/issues/876))
-* Add `{{#await ...}}` blocks ([#654](https://github.com/sveltejs/svelte/issues/654))
-
-## 1.43.1
-
-* Fix parameterised transitions ([#962](https://github.com/sveltejs/svelte/issues/962))
-* Prevent boolean attributes breaking estree-walker expectations ([#961](https://github.com/sveltejs/svelte/issues/961))
-* Throw error on cyclical store computations ([#964](https://github.com/sveltejs/svelte/pull/964))
-
-## 1.43.0
-
-* Export `Store` class to manage global state ([#930](https://github.com/sveltejs/svelte/issues/930))
-* Recognise `aria-current` ([#953](https://github.com/sveltejs/svelte/pull/953))
-* Support SSR register options including `extensions` ([#939](https://github.com/sveltejs/svelte/issues/939))
-* Friendlier error for illegal contexts ([#934](https://github.com/sveltejs/svelte/issues/934))
-* Remove whitespace around `<:Window>` components ([#943](https://github.com/sveltejs/svelte/issues/943))
-
-## 1.42.1
-
-* Correctly append items inside a slotted `each` block ([#932](https://github.com/sveltejs/svelte/pull/932))
-* Fix `<:Window bind:online/>` ([#936](https://github.com/sveltejs/svelte/issues/936))
-* Attach globals to state upon initialisation ([#908](https://github.com/sveltejs/svelte/issues/908))
-
-## 1.42.0
-
-* Implement `indeterminate` binding for checkbox inputs ([#910](https://github.com/sveltejs/svelte/issues/910))
-* Use `<option>` children as `value` attribute if none exists ([#928](https://github.com/sveltejs/svelte/issues/928))
-* Allow quoted property names in default export and sub-properties ([#914](https://github.com/sveltejs/svelte/issues/914))
-* Various improvements to generated code for bindings
-
-## 1.41.4
-
-* Handle self-destructive bindings ([#917](https://github.com/sveltejs/svelte/issues/917))
-* Prevent `innerHTML` with `<option>` elements ([#915](https://github.com/sveltejs/svelte/issues/915))
-* Use `dataset` unless `legacy` is true ([#858](https://github.com/sveltejs/svelte/issues/858))
-* Add `prepare` script to facilitate installing from git ([#923](https://github.com/sveltejs/svelte/pull/923))
-
-## 1.41.3
-
-* Prevent argument name clashes ([#911](https://github.com/sveltejs/svelte/issues/911))
-* Fix UMD factory arguments ([#918](https://github.com/sveltejs/svelte/pull/918))
-* Don't attempt to set computed values ([#893](https://github.com/sveltejs/svelte/issues/893))
-* Fix TypeScript build error ([#919](https://github.com/sveltejs/svelte/issues/919))
-
-## 1.41.2
-
-* Handle attribute selectors with no value ([#905](https://github.com/sveltejs/svelte/issues/905))
-* Retain `async` keyword when extracting functions ([#904](https://github.com/sveltejs/svelte/issues/904))
-* Shallow clone `data` on initialisation ([#891](https://github.com/sveltejs/svelte/pull/891))
-
-## 1.41.1
-
-* Fix updates of destructured each blocks ([#897](https://github.com/sveltejs/svelte/pull/897))
-* Don't warn on `options.*` event handler callee ([#900](https://github.com/sveltejs/svelte/pull/900))
-
-## 1.41.0
-
-* `onwarn` and `onerror` receive default handlers as second arguments ([#883](https://github.com/sveltejs/svelte/pull/883))
-* Recognise `muted` as boolean property on `<audio>` elements ([#886](https://github.com/sveltejs/svelte/pull/886))
-* Array destructuring for `each` block contexts ([#889](https://github.com/sveltejs/svelte/pull/889))
-
-## 1.40.2
-
-* Ignore `@apply` and similar in CSS ([#871](https://github.com/sveltejs/svelte/issues/871))
-* Properly escape CSS in custom elements ([#872](https://github.com/sveltejs/svelte/issues/872))
-
-## 1.40.1
-
-* Always use explicit closing tags with `innerHTML` ([#866](https://github.com/sveltejs/svelte/issues/866))
-* Escape text in `textContent` and `innerHTML` expressions ([#868](https://github.com/sveltejs/svelte/issues/868))
-
-## 1.40.0
-
-* Short fragment method names ([#863](https://github.com/sveltejs/svelte/pull/863))
-* Extract declarations out of default export ([#756](https://github.com/sveltejs/svelte/issues/756))
-
-## 1.39.4
-
-* Extract shared init logic ([#855](https://github.com/sveltejs/svelte/pull/855))
-* Allow `console.*` calls in event handlers ([#782](https://github.com/sveltejs/svelte/issues/782))
-* Marker comments in output ([#823](https://github.com/sveltejs/svelte/issues/823))
-* Use `textContent` and `innerHTML` where appropriate ([#23](https://github.com/sveltejs/svelte/issues/23))
-* Various improvements to generated code
-
-## 1.39.3
-
-* Allow `slot='...'` inside custom elements ([#827](https://github.com/sveltejs/svelte/issues/827))
-* Disallow `slot='...'` inside if/each blocks ([#849](https://github.com/sveltejs/svelte/issues/849))
-* Use correct parent node for slotted if blocks ([#850](https://github.com/sveltejs/svelte/issues/850))
-
-## 1.39.2
-
-* Escape CSS in shadow DOM ([#840](https://github.com/sveltejs/svelte/issues/840))
-* Fix missing anchor bug inside SVG elements ([#843](https://github.com/sveltejs/svelte/issues/843))
-
-## 1.39.1
-
-* Always use anchors for slotted content ([#822](https://github.com/sveltejs/svelte/issues/822))
-* Prevent ES6 in helpers ([#838](https://github.com/sveltejs/svelte/issues/838))
-* Correctly determine whether to use `timeRangesToArray` ([#837](https://github.com/sveltejs/svelte/pull/837))
-
-## 1.39.0
-
-* Always attach fragment to shadow root ([#821](https://github.com/sveltejs/svelte/issues/821))
-* Add `buffered`, `seekable`, `played` bindings to media elements ([#819](https://github.com/sveltejs/svelte/pull/819))
-* Quote `class` properties in legacy mode ([#830](https://github.com/sveltejs/svelte/issues/830))
-* Warn on missing `lang` attribute on `<html>` ([#828](https://github.com/sveltejs/svelte/pull/828))
-
-## 1.38.0
-
-* Compile-time a11y warnings ([#815](https://github.com/sveltejs/svelte/pull/815))
-* Remove redundant input blowback guards ([#645](https://github.com/sveltejs/svelte/issues/645))
-* Use component name in debugging messages ([#781](https://github.com/sveltejs/svelte/issues/781))
-
-## 1.37.0
-
-* Experimental support for compiling to custom elements ([#797](https://github.com/sveltejs/svelte/issues/797))
-
-## 1.36.0
-
-* Optimize `style` attributes where possible ([#455](https://github.com/sveltejs/svelte/issues/455))
-
-## 1.35.0
-
-* `set` and `get` continue to work until `destroy` is complete ([#788](https://github.com/sveltejs/svelte/issues/788))
-* Observers of unchanged bound values don't fire incorrectly ([#804](https://github.com/sveltejs/svelte/issues/804))
-* Nested components with slotted content render correctly in SSR mode ([#801](https://github.com/sveltejs/svelte/issues/801))
-* More efficient rendering of raw and slotted content ([#637](https://github.com/sveltejs/svelte/issues/637))
-* Handle unquoted attributes in attribute selectors ([#798](https://github.com/sveltejs/svelte/issues/798))
-
-## 1.34.0
-
-* Support nested `<slot>` elements ([#790](https://github.com/sveltejs/svelte/issues/790))
-* Attach `options` to instance ([#550](https://github.com/sveltejs/svelte/issues/550), [#777](https://github.com/sveltejs/svelte/issues/777))
-* Error if transitions are applied to component ([#791](https://github.com/sveltejs/svelte/issues/791))
-* Handle CSS variables in `<style>` tag ([#757](https://github.com/sveltejs/svelte/issues/757))
-
-## 1.33.0
-
-* Replace `{{yield}}` with `<slot>` — adds fallback content named slots, and `options.slots` ([#763](https://github.com/sveltejs/svelte/issues/763))
-
-## 1.32.0
-
-* Allow `anchor` initialisation option, alongside `target` ([#784](https://github.com/sveltejs/svelte/issues/784))
-* Remove leading CSS selectors safely ([#783](https://github.com/sveltejs/svelte/issues/783))
-
-## 1.31.0
-
-* Add `legacy` compile option, which adds IE9 compatibility ([#773](https://github.com/sveltejs/svelte/issues/773))
-
-## 1.30.0
-
-* Update all component bindings simultaneously ([#760](https://github.com/sveltejs/svelte/issues/760))
-* Fix `@keyframes` atrules with `from` and `to` selectors ([#774](https://github.com/sveltejs/svelte/issues/774))
-
-## 1.29.3
-
-* Only recompute tag and attribute values if they could have changed ([#768](https://github.com/sveltejs/svelte/issues/768))
-* Fix CSS scoping with multiple levels of descendant selectors ([#767](https://github.com/sveltejs/svelte/issues/767))
-
-## 1.29.2
-
-* Preserve space before non-parenthesized media query expression ([#759](https://github.com/sveltejs/svelte/issues/759))
-* Call `create()` on new iterations of static each blocks ([#762](https://github.com/sveltejs/svelte/issues/762))
-* Use `change` events as well as `input` events to bind range inputs ([#740](https://github.com/sveltejs/svelte/issues/740))
-
-## 1.29.1
-
-* Replace `set` and `destroy` with `noop` when component is destroyed ([#744](https://github.com/sveltejs/svelte/issues/744))
-
-## 1.29.0
-
-* Add static `setup` method ([#578](https://github.com/sveltejs/svelte/issues/578))
-* Hoist if block selectors ([#751](https://github.com/sveltejs/svelte/pull/751))
-* More sigil escaping fixes ([#750](https://github.com/sveltejs/svelte/pull/750))
-
-## 1.28.1
-
-* Fix unescaping of special words in SSR mode ([#741](https://github.com/sveltejs/svelte/issues/741))
-
-## 1.28.0
-
-* Support `ref:foo` as a CSS selector ([#693](https://github.com/sveltejs/svelte/issues/693))
-* Prevent magic-string bugs by only minifying CSS combinators if `cascade: false` ([#743](https://github.com/sveltejs/svelte/issues/743))
-* Don't throw an error if component is destroyed twice ([#643](https://github.com/sveltejs/svelte/issues/643))
-
-## 1.27.0
-
-* Minify CSS and remove unused styles ([#697](https://github.com/sveltejs/svelte/issues/697))
-* Optimize ternary expressions when excluding unused CSS ([#696](https://github.com/sveltejs/svelte/issues/696))
-* Clear refs after `ondestroy` callbacks fire ([#706](https://github.com/sveltejs/svelte/issues/706))
-* Prevent certain forms of component binding blowback ([#721](https://github.com/sveltejs/svelte/issues/721))
-* Use helper to encapsulate styles ([#375](https://github.com/sveltejs/svelte/issues/375))
-* Event propagation shorthand — `on:foo` equals `on:foo='fire("foo", event)` ([#638](https://github.com/sveltejs/svelte/issues/638))
-* Allow `refs.*` in event handlers, and validate them ([#686](https://github.com/sveltejs/svelte/issues/686))
-
-## 1.26.2
-
-* Unescape `#` characters ([#722](https://github.com/sveltejs/svelte/issues/722))
-
-## 1.26.1
-
-* Fix select binding regression ([#724](https://github.com/sveltejs/svelte/issues/724))
-
-## 1.26.0
-
-* Enforce correct order of operations when initialising ([#708](https://github.com/sveltejs/svelte/issues/708) and [#714](https://github.com/sveltejs/svelte/issues/714))
-* Ensure data is up-to-date when re-rendering yield block ([#711](https://github.com/sveltejs/svelte/issues/711))
-* Fix unescaping of strings, preserve at-rules in CSS ([#712](https://github.com/sveltejs/svelte/issues/712))
-* Preserve whitespace at end of each blocks ([#713](https://github.com/sveltejs/svelte/issues/713))
-
-## 1.25.1
-
-* Better CSS sourcemaps ([#716](https://github.com/sveltejs/svelte/pull/716))
-
-## 1.25.0
-
-* Fix hoisted event handlers ([#699](https://github.com/sveltejs/svelte/issues/699))
-* Fire `intro.start` and `outro.start` events ([#702](https://github.com/sveltejs/svelte/issues/702))
-* Preserve order of components in keyed each blocks ([#700](https://github.com/sveltejs/svelte/issues/700))
-* Add `cssMap` property to compiler output ([#698](https://github.com/sveltejs/svelte/pull/698/))
-
-## 1.24.0
-
-* Deconflict names with imports in SSR compiler ([#655](https://github.com/sveltejs/svelte/issues/655))
-* Improved transition performance ([#670](https://github.com/sveltejs/svelte/pull/670))
-* Run transitions on initial render ([#651](https://github.com/sveltejs/svelte/issues/651))
-* Add dev mode warning if `hydrate` is true but `hydratable` was false ([#664](https://github.com/sveltejs/svelte/issues/664))
-* Manipulate sourcemap to make missing loop values obvious ([#683](https://github.com/sveltejs/svelte/pull/683))
-* Only add CSS scoping attributes where necessary ([#679](https://github.com/sveltejs/svelte/issues/679))
-* Warn on unused CSS selectors ([#678](https://github.com/sveltejs/svelte/issues/678))
-* Fix `<select>` binding in loop ([#685](https://github.com/sveltejs/svelte/issues/685))
-* Prevent bindings from calling `oncreate` functions prematurely ([#694](https://github.com/sveltejs/svelte/pull/694))
-* Simpler codegen ([#673](https://github.com/sveltejs/svelte/pull/673))
-
-## 1.23.4
-
-* Don't recreate if blocks incorrectly ([#669](https://github.com/sveltejs/svelte/pull/669))
-
-## 1.23.3
-
-* Pass parameters to `get_block` ([#667](https://github.com/sveltejs/svelte/issues/667))
-
-## 1.23.2
-
-* Fix if blocks being recreated on update ([#665](https://github.com/sveltejs/svelte/issues/665))
-
-## 1.23.1
-
-* Fix each-else blocks that are empty on initial render ([#662](https://github.com/sveltejs/svelte/issues/662))
-
-## 1.23.0
-
-* Hydration ([#649](https://github.com/sveltejs/svelte/pull/649))
-* Correctly transform CSS selectors with pseudo-elements ([#658](https://github.com/sveltejs/svelte/issues/658))
-
-## 1.22.5
-
-* Fix nested component unmounting bug ([#643](https://github.com/sveltejs/svelte/issues/643))
-
-## 1.22.4
-
-* Include `ast` in `svelte.compile` return value ([#632](https://github.com/sveltejs/svelte/issues/632))
-* Set initial value of `<select>` binding, if unspecified ([#639](https://github.com/sveltejs/svelte/issues/639))
-* Mark indirect dependencies of `<select>` bindings (i.e. the dependencies of their `<option>` values) ([#639](https://github.com/sveltejs/svelte/issues/639))
-
-## 1.22.3
-
-* Fix nested component unmounting bug ([#625](https://github.com/sveltejs/svelte/issues/625))
-* Allow components to have computed member expression bindings ([#624](https://github.com/sveltejs/svelte/issues/624))
-* Handle empty `<style>` tags ([#634](https://github.com/sveltejs/svelte/issues/634))
-* Warn on missing component ([#623](https://github.com/sveltejs/svelte/issues/623))
-* Allow dynamic `type` attribute for unbound inputs ([#620](https://github.com/sveltejs/svelte/issues/620))
-* Rename `addEventListener` and `removeEventListener` directives ([#621](https://github.com/sveltejs/svelte/issues/621))
-
-## 1.22.2
-
-* Escape template strings correctly in SSR output ([#616](https://github.com/sveltejs/svelte/issues/616))
-* Prevent magic-string deprecation warning ([#617](https://github.com/sveltejs/svelte/pull/617))
-
-## 1.22.1
-
-* Sanitise event handler names ([#612](https://github.com/sveltejs/svelte/issues/612))
-
-## 1.22.0
-
-* Symmetry between `mount` and `unmount`. This is potentially a breaking change if your components import other components that were precompiled with an earlier version of Svelte ([#592](https://github.com/sveltejs/svelte/issues/592))
-* Add `cascade` option, which prevents styles affecting child components if `false`, unless selectors are wrapped in `:global(...)` and keyframe declaration IDs are prefixed with `-global-`. This will become the default behaviour in v2 ([#583](https://github.com/sveltejs/svelte/issues/583))
-* Support binding to computed member expressions ([#602](https://github.com/sveltejs/svelte/issues/602))
-* Coerce empty string in `number`/`range` inputs to `undefined`, not `0` ([#584](https://github.com/sveltejs/svelte/issues/584))
-* Fix insert location of DOM elements in each/if/nested component edge cases ([#610](https://github.com/sveltejs/svelte/issues/610))
-
-## 1.21.0
-
-* Always use `helpers` if referenced, not just for call expressions ([#575](https://github.com/sveltejs/svelte/issues/575))
-* Fix parsing of `<textarea>` children ([#599](https://github.com/sveltejs/svelte/pull/599))
-* Treat `<textarea>` value attributes and children as equivalent, and fail validation if both are present ([#599](https://github.com/sveltejs/svelte/pull/599))
-* Fix `<textarea>` SSR ([#599](https://github.com/sveltejs/svelte/pull/599))
-* Apply CSS transition styles immediately if transition has delay ([#574](https://github.com/sveltejs/svelte/issues/574))
-* Ensure `transitionManager` is treeshakeable ([#593](https://github.com/sveltejs/svelte/issues/593))
-* Fix for environments where `node.style.animation` is undefined ([#587](https://github.com/sveltejs/svelte/issues/587))
-* Fix order of operations when dealing with `<select>` elements ([#590](https://github.com/sveltejs/svelte/issues/590))
-* Downgrade 'invalid callee' to a warning ([#579](https://github.com/sveltejs/svelte/issues/579))
-* Convert to TypeScript ([#573](https://github.com/sveltejs/svelte/pull/573))
-
-## 1.20.2
-
-* Fix destruction of compound if-blocks with outros ([#572](https://github.com/sveltejs/svelte/pull/572))
-
-## 1.20.1
-
-* Fix insertion order of `if` blocks and their anchors ([#569](https://github.com/sveltejs/svelte/issues/569))
-
-## 1.20.0
-
-* Faster, better updates of keyed each blocks ([#373](https://github.com/sveltejs/svelte/issues/373), [#543](https://github.com/sveltejs/svelte/issues/543))
-* Use element IDs to robustly track dynamically injected `<style>` tags ([#554](https://github.com/sveltejs/svelte/issues/554))
-* Abort outros before corresponding intros ([#546](https://github.com/sveltejs/svelte/issues/546))
-* Generate less code for `if` blocks with `else` blocks ([#540](https://github.com/sveltejs/svelte/issues/540))
-* Ensure `{{yield}}` block content is injected into the right place ([#561](https://github.com/sveltejs/svelte/issues/561))
-* Simpler, more readable codegen code ([#559](https://github.com/sveltejs/svelte/pull/559))
-* Validate transition directives ([#564](https://github.com/sveltejs/svelte/issues/564))
-* Apply delays to bidirectional transitions ([#562](https://github.com/sveltejs/svelte/issues/562))
-* Handle all valid HTML entities ([#565](https://github.com/sveltejs/svelte/pull/565))
-* Fix outros on compound `if` blocks ([#565](https://github.com/sveltejs/svelte/pull/565))
-* Validation for `<:Window>` tags ([#565](https://github.com/sveltejs/svelte/pull/565))
-* Increased test coverage ([#565](https://github.com/sveltejs/svelte/pull/565))
-
-## 1.19.1
-
-* Export `generateKeyframes`, so that CSS transitions work
-
-## 1.19.0
-
-* Experimental support for transitions ([#7](https://github.com/sveltejs/svelte/issues/7))
-* Use `querySelector(':checked')` instead of `selectedOptions` ([#539](https://github.com/sveltejs/svelte/issues/539))
-* Stringify helpers before bundling them, to avoid renaming errors ([#538](https://github.com/sveltejs/svelte/issues/538))
-
-## 1.18.2
-
-* Parenthesize if-block conditions ([#532](https://github.com/sveltejs/svelte/issues/532))
-* Fix parsing of parenthesized expressions ([#534](https://github.com/sveltejs/svelte/issues/534))
-* Fix error on `bind:checked` that doesn't belong to a checkbox input ([#529](https://github.com/sveltejs/svelte/pull/529))
-
-## 1.18.1
-
-* Allow `destroy()` in event handlers ([#523](https://github.com/sveltejs/svelte/issues/523))
-* Fix bug with `{{yield}}` blocks following elements ([#524](https://github.com/sveltejs/svelte/issues/524))
-
-## 1.18.0
-
-* Visit `<select>` attributes after children, to ensure options are in the right state ([#521](https://github.com/sveltejs/svelte/pull/521))
-* Use sibling elements as anchors rather than creating comment nodes wherever possible ([#3](https://github.com/sveltejs/svelte/issues/3))
-
-## 1.17.2
-
-* Replace bad characters when creating variable names based on element names ([#516](https://github.com/sveltejs/svelte/issues/516))
-
-## 1.17.1
-
-* Fixes for static each-else and yield blocks ([#509](https://github.com/sveltejs/svelte/issues/509)), ([#514](https://github.com/sveltejs/svelte/issues/514))
-* Code generation tweaks ([#504](https://github.com/sveltejs/svelte/issues/504)), ([#507](https://github.com/sveltejs/svelte/issues/507))
-
-## 1.17.0
-
-* Add `currentTime`, `duration` and `paused` bindings for media elements ([#406](https://github.com/sveltejs/svelte/issues/406))
-* Don't treat helpers as dependencies ([#492](https://github.com/sveltejs/svelte/issues/492))
-* Allow `<:Window>` event handlers to access component state ([#497](https://github.com/sveltejs/svelte/pull/497))
-* Allow two-way binding to properties named 'component' ([#495](https://github.com/sveltejs/svelte/issues/495))
-* Group checkbox bindings correctly, to avoid erroneously unchecking siblings ([#498](https://github.com/sveltejs/svelte/issues/498))
-* Validate two-way bindings ([#494](https://github.com/sveltejs/svelte/pull/494))
-* Allow dynamic each-block to have static else-block ([#501](https://github.com/sveltejs/svelte/pull/501))
-* Initialise `<select>` value correctly ([#502](https://github.com/sveltejs/svelte/pull/502))
-
-## 1.16.0
-
-* Better code generation ([#489](https://github.com/sveltejs/svelte/pull/489)), ([#490](https://github.com/sveltejs/svelte/pull/490)), ([#491](https://github.com/sveltejs/svelte/pull/491))
-* Prevent binding blowback on initial render ([#488](https://github.com/sveltejs/svelte/pull/488))
-
-## 1.15.1
-
-* Clone data before merging it with state ([#479](https://github.com/sveltejs/svelte/issues/479))
-* Apply binding event handlers before user event handlers ([#486](https://github.com/sveltejs/svelte/issues/486))
-
-## 1.15.0
-
-* Dev mode — downgrade 'missing data' to a warning, and ignore whitelisted globals ([#475](https://github.com/sveltejs/svelte/issues/475))
-* Fix `<select>` value binding when options are updated late ([#476](https://github.com/sveltejs/svelte/issues/476))
-* Throw at compile time if event handler references invalid callee ([#473](https://github.com/sveltejs/svelte/pull/473))
-* Check for helper function purity ([#473](https://github.com/sveltejs/svelte/pull/473))
-* Validate `namespace` option ([#473](https://github.com/sveltejs/svelte/pull/473))
-
-## 1.14.1
-
-* Replace bad characters when creating variable names based on attributes ([#470](https://github.com/sveltejs/svelte/issues/470))
-
-## 1.14.0
-
-* Better guard against naming conflicts ([#465](https://github.com/sveltejs/svelte/issues/465))
-* Better error if getters and setters are used with `methods` ([#425](https://github.com/sveltejs/svelte/issues/425))
-* Don't create whitespace nodes inside elements that can't use them ([#189](https://github.com/sveltejs/svelte/issues/189))
-* Collapse consecutive `if` statements with the same condition ([#450](https://github.com/sveltejs/svelte/issues/450))
-* Window `scroll` bindings are bidirectional ([#404](https://github.com/sveltejs/svelte/issues/404))
-* Add `bind:online` to window ([#404](https://github.com/sveltejs/svelte/issues/404))
-* In dev mode, throw if read-only properties are set ([#404](https://github.com/sveltejs/svelte/issues/404))
-* Prevent conflicts with component name ([#464](https://github.com/sveltejs/svelte/pull/464))
-* Ensure event handler names are deconflicted ([#466](https://github.com/sveltejs/svelte/issues/466))
-
-## 1.13.7
-
-* Fix observers — `defer: true` now triggers callback after DOM is updated ([#441](https://github.com/sveltejs/svelte/issues/441))
-* Handle empty `computed` property ([#452](https://github.com/sveltejs/svelte/issues/452))
-* Correctly bind one-way `<select>` value attributes with objects ([#423](https://github.com/sveltejs/svelte/issues/423))
-* Hoist event handlers inside each blocks, where possible ([#456](https://github.com/sveltejs/svelte/pull/456))
-* Don't bind event handler callbacks ([#433](https://github.com/sveltejs/svelte/issues/433))
-* Internal refactoring and neater code generation ([#453](https://github.com/sveltejs/svelte/pull/453))
-
-## 1.13.6
-
-* Use `assign` helper instead of `Object.assign` for better performance and legacy compatibility ([#431](https://github.com/sveltejs/svelte/issues/431))
-* Improved code generation ([#419](https://github.com/sveltejs/svelte/issues/419)), ([#440](https://github.com/sveltejs/svelte/issues/440)), ([#442](https://github.com/sveltejs/svelte/issues/442))
-
-## 1.13.5
-
-* Read `range` and `number` input values as numbers ([#436](https://github.com/sveltejs/svelte/issues/436))
-* Better error for `bind:value='{{foo}}'` ([#437](https://github.com/sveltejs/svelte/issues/437))
-
-## 1.13.4
-
-* Prevent unclosed `<script>` tag causing infinite loop ([#435](https://github.com/sveltejs/svelte/pull/435))
-
-## 1.13.3
-
-* Correctly handle `{{true}}`, `{{false}}` and `{{null}}` ([#424](https://github.com/sveltejs/svelte/issues/424))
-* Update `<select>` value attributes correctly ([#423](https://github.com/sveltejs/svelte/issues/423))
-* Bind custom event handler callbacks ([#428](https://github.com/sveltejs/svelte/issues/428))
-* Disallow `import root` ([#430](https://github.com/sveltejs/svelte/pull/430))
-* Prevent component bindings mutating the wrong object ([#432](https://github.com/sveltejs/svelte/pull/432))
-
-## 1.13.2
-
-* Fix deep component bindings ([#420](https://github.com/sveltejs/svelte/issues/420))
-* Include `css` property in compiler output ([#409](https://github.com/sveltejs/svelte/issues/409))
-* Treat functions as mutable objects when recomputing ([#413](https://github.com/sveltejs/svelte/issues/413)
-* Include magic-string in bundle ([#410](https://github.com/sveltejs/svelte/issues/410))
-* Disable unneeded Bublé transformations for slimmer output ([#411](https://github.com/sveltejs/svelte/pull/411))
-
-## 1.13.1
-
-* Prevent infinite loops with pathological component bindings ([#398](https://github.com/sveltejs/svelte/issues/398))
-* More robust deconflicting ([#401](https://github.com/sveltejs/svelte/pull/401))
-
-## 1.13.0
-
-* Add `<:Window>` meta tag with event listeners, and a handful of bindings ([#371](https://github.com/sveltejs/svelte/issues/371))
-* Don't uncheck radios incorrectly ([#399](https://github.com/sveltejs/svelte/issues/399))
-
-## 1.12.1
-
-* Deconflict non-helper functions (`addCss` etc) ([#388](https://github.com/sveltejs/svelte/issues/388))
-* Allow reserved words in tags, e.g. `{{class}}` ([#383](https://github.com/sveltejs/svelte/issues/383))
-
-## 1.12.0
-
-* Shorthand attributes — `<Widget :foo/>` is equivalent to `<Widget foo='{{foo}}'/>` ([#384](https://github.com/sveltejs/svelte/pull/384))
-* Support `bind:group` for radio and checkbox inputs ([#311](https://github.com/sveltejs/svelte/issues/311), [#312](https://github.com/sveltejs/svelte/issues/312))
-* Better sourcemap support for two-way bindings
-
-## 1.11.4
-
-* Dev mode warning for bad `component.observe` arguments ([#369](https://github.com/sveltejs/svelte/issues/369))
-* Translate `component.on('teardown', ...)` to `component.on('destroy', ...)` and add dev warning ([#365](https://github.com/sveltejs/svelte/issues/365))
-* Use shared prototype to save bytes ([#378](https://github.com/sveltejs/svelte/pull/378))
-
-## 1.11.3
-
-* Undo CSS behaviour change in 1.11.2 ([#372](https://github.com/sveltejs/svelte/issues/372))
-* Pin version of css-tree ([#370](https://github.com/sveltejs/svelte/pull/370))
-
-## 1.11.2
-
-* Add component CSS to each document a component is rendered to ([#331](https://github.com/sveltejs/svelte/issues/331))
-
-## 1.11.1
-
-* Fix two-way binding for components inside `each` blocks ([#356](https://github.com/sveltejs/svelte/issues/356))
-
-## 1.11.0
-
-* Add `format: 'eval'` and `svelte.create`, to create components directly from source code ([#345](https://github.com/sveltejs/svelte/issues/345))
-* Node 4 compatibility ([#109](https://github.com/sveltejs/svelte/issues/109))
-
-## 1.10.3
-
-* Prevent `'</script>'` string occurence breaking pages ([#349](https://github.com/sveltejs/svelte/pull/349))
-* Allow reference to whitelisted globals without properties ([#333](https://github.com/sveltejs/svelte/pull/333))
-* Don't remove ` ` incorrectly ([#348](https://github.com/sveltejs/svelte/issues/348))
-* `let` -> `var` in `addCss` block ([#351](https://github.com/sveltejs/svelte/pull/351))
-
-## 1.10.2
-
-* Accept any case for doctype declarations ([#336](https://github.com/sveltejs/svelte/issues/336))
-* Allow non-top-level `<script>` and `<style>` tags to pass through without processing ([#335](https://github.com/sveltejs/svelte/issues/335))
-
-## 1.10.1
-
-* typecheck argument in _set when in dev mode ([#342](https://github.com/sveltejs/svelte/issues/342))
-* Prevent duplicate helpers in non-shared mode ([#337](https://github.com/sveltejs/svelte/issues/337))
-
-## 1.10.0
-
-* Component self-references with `<:Self/>` ([#51](https://github.com/sveltejs/svelte/issues/51))
-* Two-way binding with `<select multiple>` ([#313](https://github.com/sveltejs/svelte/issues/313))
-
-## 1.9.1
-
-* Better error for malformed event handlers ([#220](https://github.com/sveltejs/svelte/issues/220))
-* Allow function expressions in tags ([#269](https://github.com/sveltejs/svelte/issues/269))
-
-## 1.9.0
-
-* Add development warnings ([#13](https://github.com/sveltejs/svelte/issues/13)), ([#320](https://github.com/sveltejs/svelte/pull/320)), ([#177](https://github.com/sveltejs/svelte/issues/177)), ([#249](https://github.com/sveltejs/svelte/issues/249))
-* Better error if parser encounters an unmatched closing tag ([#321](https://github.com/sveltejs/svelte/issues/321))
-
-## 1.8.1
-
-* Allow implicitly closed elements ([#318](https://github.com/sveltejs/svelte/pull/318))
-* More informative error messages for unclosed elements/blocks ([#258](https://github.com/sveltejs/svelte/issues/258))
-* Deprecate `onrender` and `onteardown` in favour of `oncreate` and `ondestroy` ([#40](https://github.com/sveltejs/svelte/issues/40))
-
-## 1.8.0
-
-* Prevent duplicate imports ([#308](https://github.com/sveltejs/svelte/issues/308))
-* Use `input` events (not `change`) for all input elements other than `checkbox` and `radio`, and textareas ([#309](https://github.com/sveltejs/svelte/pull/309))
-* Encapsulate keyframe declarations ([#245](https://github.com/sveltejs/svelte/issues/245))
-
-## 1.7.1
-
-* Deconflict imports and shared helpers ([#222](https://github.com/sveltejs/svelte/issues/222))
-* Deconflict each-block contexts and reserved words ([#222](https://github.com/sveltejs/svelte/issues/222))
-* Allow shorthand properties in expressions ([#296](https://github.com/sveltejs/svelte/issues/296))
-
-## 1.7.0
-
-* Include CSS AST in `svelte.parse` output ([#302](https://github.com/sveltejs/svelte/pull/302))
-* Better handling of CSS parse errors ([#302](https://github.com/sveltejs/svelte/pull/302))
-* Initialise `<select>` elements with two-way binding correctly ([#301](https://github.com/sveltejs/svelte/issues/301))
-* Allow local context in component event handlers inside `each` blocks ([#290](https://github.com/sveltejs/svelte/issues/290))
-* Fix two-way binding for components inside `each` blocks ([#290](https://github.com/sveltejs/svelte/issues/290))
-
-## 1.6.11
-
-* Initialise dynamic `<option>` value correctly ([#291](https://github.com/sveltejs/svelte/issues/291))
-
-## 1.6.10
-
-* Ensure `sources` and `sourcesContent` are populated in sourcemaps, even if none of the original code is used ([#295](https://github.com/sveltejs/svelte/pull/295))
-* Add `outputFilename` option to populate `file` and `sources` sourcemap properties correctly ([#295](https://github.com/sveltejs/svelte/pull/295))
-
-## 1.6.9
-
-* Don't trigger bindings for torn-down components ([#277](https://github.com/sveltejs/svelte/issues/277))
-* SSR: Handle two-way bindings ([#275](https://github.com/sveltejs/svelte/issues/275))
-* Improve performance by checking data has changed before updates ([#279](https://github.com/sveltejs/svelte/pull/279))
-* Parse CSS with css-tree to prevent transformation errors with unconventional styles ([#288](https://github.com/sveltejs/svelte/issues/288))
-
-## 1.6.8
-
-* Always trigger `onrender`, including when change initiator is a nested component ([#263](https://github.com/sveltejs/svelte/issues/263))
-* Handle default function parameters in computations ([#274](https://github.com/sveltejs/svelte/issues/274))
-
-## 1.6.7
-
-* SSR: Fix apostrophes ([#267](https://github.com/sveltejs/svelte/issues/267))
-* Add `xmlns` attributes to SVGs ([#262](https://github.com/sveltejs/svelte/pull/262))
-
-## 1.6.6
-
-* Omit text from comment anchors ([#247](https://github.com/sveltejs/svelte/issues/247))
-* Handle `xlink` attributes ([#264](https://github.com/sveltejs/svelte/issues/264))
-
-## 1.6.5
-
-* Handle `<!doctype>` declarations ([#255](https://github.com/sveltejs/svelte/pull/255))
-
-## 1.6.4
-
-* Fix updates of yields inside each blocks ([20e1b05](https://github.com/sveltejs/svelte/commit/20e1b05c45dc9fcddfe2e7c5c9fc3109f0d45fa9))
-* SSR: Handle attributes with values that begin with a number ([#248](https://github.com/sveltejs/svelte/issues/248))
-* Handle multiline comments in CSS ([#252](https://github.com/sveltejs/svelte/issues/252))
-
-## 1.6.3
-
-* Fix `{{yield}}` bugs for components inside `if` and `each` blocks ([#230](https://github.com/sveltejs/svelte/issues/230), [#231](https://github.com/sveltejs/svelte/issues/231))
-* Set attributes on `<svg>` elements correctly ([#233](https://github.com/sveltejs/svelte/issues/233))
-* Add `svelte.VERSION` property to compiler
-
-## 1.6.2
-
-* Use helpers for `addEventListener`, `removeEventListener`, `setAttribute` ([#227](https://github.com/sveltejs/svelte/pull/227))
-* Escape `sharedPath` ([#229](https://github.com/sveltejs/svelte/pull/229))
-* Handle attributes with values that begin with a number ([#234](https://github.com/sveltejs/svelte/issues/234))
-* Update dependencies
-
-## 1.6.1
-
-* SSR: Handle component directives at arbitrary positions ([#221](https://github.com/sveltejs/svelte/issues/221))
-* Provide useful feedback on invalid void closing tag ([#224](https://github.com/sveltejs/svelte/issues/224))
-
-## 1.6.0
-
-* Replace `standalone: false` with `shared: true`, or `shared: 'custom/path/to/shared.js'` ([#218](https://github.com/sveltejs/svelte/issues/218))
-* Include `shared.js` in package
-
-## 1.5.0
-
-* Implement `standalone: false` ([#9](https://github.com/sveltejs/svelte/issues/9))
-* SSR: Handle component directives ([216](https://github.com/sveltejs/svelte/issues/216))
-
-## 1.4.0
-
-* Keyed `each` blocks ([#81](https://github.com/sveltejs/svelte/issues/81))
-
-## 1.3.1
-
-* Remove file extensions from AMD dependencies ([#144](https://github.com/sveltejs/svelte/issues/144))
-* Throw if `options.name` is illegal ([#102](https://github.com/sveltejs/svelte/issues/102))
-
-## 1.3.0
-
-* SSR compiler: Support `format` option ([#196](https://github.com/sveltejs/svelte/issues/196))
-* SSR compiler: Don't self-close 'normal' elements ([#200](https://github.com/sveltejs/svelte/issues/200))
-* Remove leading spaces from scoped CSS ([#140](https://github.com/sveltejs/svelte/issues/140))
-* Internal refactoring
-
-## 1.2.5
-
-* Allow whitelisted globals in templates ([#185](https://github.com/sveltejs/svelte/issues/185))
-* Intercept parse errors with `options.onerror`
-
-## 1.2.4
-
-* SSR compiler: Implement `{{{triples}}}` ([#197](https://github.com/sveltejs/svelte/issues/197))
-* SSR compiler: Escape HTML in tags ([#197](https://github.com/sveltejs/svelte/issues/197))
-
-## 1.2.3
-
-* Add support for `namespace` declaration for SVG (etc) components ([#147](https://github.com/sveltejs/svelte/issues/147))
-* Throw error if methods or lifecycle hooks are arrow functions that use `this` or `arguments` ([#179](https://github.com/sveltejs/svelte/issues/179))
-* Use `setAttribute()` for `list` attributes, to preserve link to `<datalist>` ([#178](https://github.com/sveltejs/svelte/issues/178))
-* Throw error if default export is not an object literal ([#190](https://github.com/sveltejs/svelte/pull/190))
-* Internal refactoring
-
-## 1.2.2
-
-* Omit directives in server-side rendering ([#163](https://github.com/sveltejs/svelte/issues/167))
-* Handle comments in SSR ([#165](https://github.com/sveltejs/svelte/issues/165))
-* Support calling methods of `event`/`this` in event handlers ([#162](https://github.com/sveltejs/svelte/issues/162))
-* Remove `mount` from public API ([#150](https://github.com/sveltejs/svelte/issues/150))
-
-## 1.2.1
-
-* Server-side rendering is available as a compiler option (`generate: 'ssr'`) ([#159](https://github.com/sveltejs/svelte/pull/159))
-* Allow call expressions where function is not in `helpers` ([#163](https://github.com/sveltejs/svelte/issues/163))
-
-## 1.2.0
-
-* Server-side rendering of HTML ([#148](https://github.com/sveltejs/svelte/pull/148)) and CSS ([#154](https://github.com/sveltejs/svelte/pull/154))
-
-## 1.1.3
-
-* Handle `xmlns` attributes correctly ([#142](https://github.com/sveltejs/svelte/issues/142))
-* Error on duplicate `<style>`/`<script>` tags rather than failing silently ([#142](https://github.com/sveltejs/svelte/issues/142))
-* Don't create whitespace text nodes inside SVG elements ([#142](https://github.com/sveltejs/svelte/issues/142))
-* Require void elements to be lowercase, to eliminate confusion with components ([#137](https://github.com/sveltejs/svelte/issues/137))
-
-## 1.1.2
-
-* Deconflict variable names ([#88](https://github.com/sveltejs/svelte/issues/88), [#126](https://github.com/sveltejs/svelte/issues/126))
-
-## 1.1.1
-
-* Support multiple SVG elements in a component ([#130](https://github.com/sveltejs/svelte/issues/130))
-
-## 1.1.0
-
-* Separate fragment creation from `mount` ([#91](https://github.com/sveltejs/svelte/pull/91))
-* Trigger `onrender` hook at correct time for nested components ([#103](https://github.com/sveltejs/svelte/pull/103))
-* Fix keypath dynamic attributes in components ([#46](https://github.com/sveltejs/svelte/issues/46))
-* Implement `{{yield}}` ([#112](https://github.com/sveltejs/svelte/pull/112))
-* Optimise teardown ([#99](https://github.com/sveltejs/svelte/issues/99))
-* Require computed properties to have at least one dependency ([#115](https://github.com/sveltejs/svelte/pull/115))
-* Support `{{#each ...}}...{{else}}...{{/each}}` ([#90](https://github.com/sveltejs/svelte/issues/90))
-* Triple mustaches ([#35](https://github.com/sveltejs/svelte/issues/35))
-
-## 1.0.7
-
-* Correctly escape HTML entities ([#85](https://github.com/sveltejs/svelte/issues/85))
-
-## 1.0.6
-
-* Generate useful sourcemaps ([#60](https://github.com/sveltejs/svelte/issues/60))
-
-## 1.0.5
-
-* Ensure compiler only generates ES5 code ([#75](https://github.com/sveltejs/svelte/issues/75))
-* `get()` without arguments returns entire state object ([#73](https://github.com/sveltejs/svelte/issues/73))
-
-## 1.0.4
-
-* Handle empty attributes in elements and components ([#63](https://github.com/sveltejs/svelte/issues/63))
-* Detach top-level text nodes inside departing each blocks ([#62](https://github.com/sveltejs/svelte/issues/62))
-
-## 1.0.3
-
-* Better generated code for `if` blocks, especially with `else`/`elseif` chains ([#28](https://github.com/sveltejs/svelte/pull/28))
-* Trim unnecessary whitespace from `else`/`elseif` blocks ([#49](https://github.com/sveltejs/svelte/pull/49))
-* Handle trailing comments in script tags ([#64](https://github.com/sveltejs/svelte/issues/64))
-
-## 1.0.2
-
-Set `style.cssText` rather than `style` ([#44](https://github.com/sveltejs/svelte/issues/44))
-
-## 1.0.1
-
-* Preserve SVG namespace inside each blocks
-* Always use `setAttribute` with SVG elements
-
-## 1.0.0
-
-* Generate AMD, CJS, IIFE and UMD builds
-* Correctly insert text nodes before anchors ([#31](https://github.com/sveltejs/svelte/pull/31))
-
-## 0.3.0
-
-* Fix bug where departing element would unset `ref` incorrectly ([#24](https://github.com/sveltejs/svelte/issues/24))
-* Basic template validation ([#6](https://github.com/sveltejs/svelte/issues/6))
-* Fire `onrender` hooks once component is in DOM ([#18](https://github.com/sveltejs/svelte/issues/18))
-* Only detach nodes when necessary to do so ([#26](https://github.com/sveltejs/svelte/issues/26))
-
-## 0.2.2
-
-* On second thoughts, don't transpile build. Was only really for Uglify's benefit, which is daft
-
-## 0.2.1
-
-* Transpile build
-
-## 0.2.0
-
-* Only generate UMD build, for now
-* Include dependencies in the build, treat as `devDependencies`
-* Faster initial render
-* Parent data overrides child defaults
-* Remove top-level text nodes on teardown
-* Handle `readUntil` errors in parser
-* Basic `<select>` binding
-* Handle missing data
-* Prevent infinite set/observe loops
-* Add `bind:foo` shorthand
-* `else` and `elseif` blocks
-* Hoist imports
-
-## 0.1.1
-
-* Support unquoted attributes
-* Handle entities in attributes
-* Inline nested components
-* `fire` and `on` methods
-
-## 0.1.0
-
-* Breaking change – Svelte compiler now generates constructor functions rather than factories ([#2](https://github.com/sveltejs/svelte/issues/2))
-* SVG support
-
-## 0.0.2
-
-* First release capable of building TodoMVC
-
-## 0.0.1
-
-* Just squatting on the package name
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
new file mode 100644
index 000000000000..65d86fe76ab7
--- /dev/null
+++ b/CODE_OF_CONDUCT.md
@@ -0,0 +1,3 @@
+This repository is governed by the Svelte Code of Conduct.
+
+https://github.com/sveltejs/community/blob/main/CODE_OF_CONDUCT.md
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 000000000000..0e2628f84f77
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,171 @@
+# Contributing to Svelte
+
+Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.
+
+The [Open Source Guides](https://opensource.guide/) website has a collection of resources for individuals, communities, and companies. These resources help people who want to learn how to run and contribute to open source projects. Contributors and people new to open source alike will find the following guides especially useful:
+
+- [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/)
+- [Building Welcoming Communities](https://opensource.guide/building-community/)
+
+## Get involved
+
+There are many ways to contribute to Svelte, and many of them do not involve writing any code. Here's a few ideas to get started:
+
+- Simply start using Svelte. Go through the [Getting Started](https://svelte.dev/docs#getting-started) guide. Does everything work as expected? If not, we're always looking for improvements. Let us know by [opening an issue](#reporting-new-issues).
+- Look through the [open issues](https://github.com/sveltejs/svelte/issues). A good starting point would be issues tagged [good first issue](https://github.com/sveltejs/svelte/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22). Provide workarounds, ask for clarification, or suggest labels. Help [triage issues](#triaging-issues-and-pull-requests).
+- If you find an issue you would like to fix, [open a pull request](#pull-requests).
+- Read through our [tutorials](https://svelte.dev/tutorial). If you find anything that is confusing or can be improved, you can make edits by clicking "Edit this page" at the bottom left of the tutorial page.
+- Take a look at the [features requested](https://github.com/sveltejs/svelte/labels/feature%20request) by others in the community and consider opening a pull request if you see something you want to work on.
+
+Contributions are very welcome. If you think you need help planning your contribution, please ping us on Discord at [svelte.dev/chat](https://svelte.dev/chat) and let us know you are looking for a bit of help.
+
+### Triaging issues and pull requests
+
+One great way you can contribute to the project without writing any code is to help triage issues and pull requests as they come in.
+
+- Ask for more information if you believe the issue does not provide all the details required to solve it.
+- Flag issues that are stale or that should be closed.
+- Ask for test plans and review code.
+
+## Our process
+
+### RFCs
+
+If you'd like to propose an implementation for a large new feature or change then please [create an RFC](https://github.com/sveltejs/rfcs) to discuss it up front.
+
+### Roadmap
+
+When deciding where to contribute, you may wish to take a look at [our roadmap](https://svelte.dev/roadmap). The Svelte team generally works on a single major effort at a time. This has a couple benefits for us as maintainers. First, it allows us to focus and make noticeable progress in an area being proactive rather than reactive. Secondly, it allows us to handle related issues and PRs together. By batching issues and PRs together we’re able to ensure implementations and fixes holistically address the set of problems and use cases encountered by our users.
+
+### Maintainer meetings
+
+The maintainers meet on the final Saturday of each month. While these meetings are not open publicly, we will report back by leaving a comment on each issue discussed. We will generally discuss items aligning with our roadmap, but major PRs needing discussion amongst the maintainers can be added to the agenda for the monthly maintainer’s meeting. However, we typically are only able to get to a couple of items that are not aligned with our current priority.
+
+### Prioritization
+
+We do our best to review PRs and RFCs as they are sent, but it is difficult to keep up. We welcome help in reviewing PRs, RFCs, and issues. If an item aligns with the current priority on our [roadmap](https://svelte.dev/roadmap), it is more likely to be reviewed quickly. PRs to the most important and active ones repositories get reviewed more quickly while PRs to smaller inactive repos may sit for a bit before we periodically come by and review the pending PRs in a batch.
+
+## Bugs
+
+We use [GitHub issues](https://github.com/sveltejs/svelte/issues) for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you are certain this is a new unreported bug, you can submit a [bug report](#reporting-new-issues).
+
+If you have questions about using Svelte, contact us on Discord at [svelte.dev/chat](https://svelte.dev/chat), and we will do our best to answer your questions.
+
+If you see anything you'd like to be implemented, create a [feature request issue](https://github.com/sveltejs/svelte/issues/new?template=feature_request.yml).
+
+### Reporting new issues
+
+When [opening a new issue](https://github.com/sveltejs/svelte/issues/new/choose), always make sure to fill out the issue template. **This step is very important!** Not doing so may result in your issue not being managed in a timely fashion. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template.
+
+- **One issue, one bug:** Please report a single bug per issue.
+- **Provide reproduction steps:** List all the steps necessary to reproduce the issue. The person reading your bug report should be able to follow these steps to reproduce your issue with minimal effort. If possible, use the [REPL](https://svelte.dev/repl) to create your reproduction.
+
+## Pull requests
+
+### Proposing a change
+
+If you would like to request a new feature or enhancement but are not yet thinking about opening a pull request, you can also file an issue with [feature template](https://github.com/sveltejs/svelte/issues/new?template=feature_request.yml).
+
+If you're only fixing a bug, it's fine to submit a pull request right away, but we still recommend that you file an issue detailing what you're fixing. This is helpful in case we don't accept that specific fix but want to keep track of the issue.
+
+Small pull requests are much easier to review and more likely to get merged.
+
+### Installation
+
+Ensure you have [pnpm](https://pnpm.io/installation) installed. After cloning the repository, run `pnpm install`.
+
+### Developing
+
+To build the UMD version of `svelte/compiler` (this is only necessary for CommonJS consumers, or in-browser use), run `pnpm build` inside `packages/svelte`. To rebuild whenever source files change, run `pnpm dev`.
+
+### Creating a branch
+
+Fork [the repository](https://github.com/sveltejs/svelte) and create your branch from `main`. If you've never sent a GitHub pull request before, you can learn how from [this free video series](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github).
+
+### Testing
+
+A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI.
+
+- If you've changed APIs, update the documentation.
+
+#### Writing tests
+
+All tests are located in `/test` folder.
+
+Test samples are kept in `/test/xxx/samples` folder.
+
+#### Running tests
+
+> PREREQUISITE: Install chromium via playwright by running `pnpm playwright install chromium`
+
+1. To run test, run `pnpm test`.
+1. To run a particular test suite, use `pnpm test <suite-name>`, for example:
+
+ ```bash
+ pnpm test validator
+ ```
+
+1. To filter tests _within_ a test suite, use `pnpm test <suite-name> -- -t <test-name>`, for example:
+
+ ```bash
+ pnpm test validator -- -t a11y-alt-text
+ ```
+
+ (You can also do `FILTER=<test-name> pnpm test <suite-name>` which removes other tests rather than simply skipping them — this will result in faster and more compact test results, but it's non-idiomatic. Choose your fighter.)
+
+##### Updating `.expected` files
+
+1. Tests suites like `snapshot` and `parser` assert that the generated output matches the existing snapshot.
+1. To update these snapshots, run `UPDATE_SNAPSHOTS=true pnpm test`.
+
+### Typechecking
+
+To typecheck the codebase, run `pnpm check` inside `packages/svelte`. To typecheck in watch mode, run `pnpm check:watch`.
+
+### Style guide
+
+[Eslint](https://eslint.org) will catch most styling issues that may exist in your code. You can check the status of your code styling by simply running `pnpm lint`.
+
+#### Code conventions
+
+- `snake_case` for internal variable names and methods.
+- `camelCase` for public variable names and methods.
+
+### Generating types
+
+Types are auto-generated from the source, but the result is checked in to ensure no accidental changes slip through. Run `pnpm generate:types` to regenerate the types.
+
+### Sending your pull request
+
+Please make sure the following is done when submitting a pull request:
+
+1. Describe your **test plan** in your pull request description. Make sure to test your changes.
+1. Make sure your code lints (`pnpm lint`).
+1. Make sure your tests pass (`pnpm test`).
+
+All pull requests should be opened against the `main` branch. Make sure the PR does only one thing, otherwise please split it. If this change should contribute to a version bump, run `npx changeset` at the root of the repository after a code change and select the appropriate packages.
+
+#### Breaking changes
+
+When adding a new breaking change, follow this template in your pull request:
+
+```md
+### New breaking change here
+
+- **Who does this affect**:
+- **How to migrate**:
+- **Why make this breaking change**:
+- **Severity (number of people affected x effort)**:
+```
+
+### Reviewing pull requests
+
+If you'd like to manually test a pull request in another pnpm project, you can do so by running `pnpm add -D "github:sveltejs/svelte#path:packages/svelte&branch-name"` in that project.
+
+## License
+
+By contributing to Svelte, you agree that your contributions will be licensed under its [MIT license](https://github.com/sveltejs/svelte/blob/master/LICENSE.md).
+
+## Questions
+
+Feel free to ask in [#contributing](https://discord.com/channels/457912077277855764/750401468569354431) on [Discord](https://svelte.dev/chat) if you have questions about our process, how to proceed, etc.
diff --git a/FUNDING.json b/FUNDING.json
new file mode 100644
index 000000000000..7ed51db691e6
--- /dev/null
+++ b/FUNDING.json
@@ -0,0 +1,7 @@
+{
+ "drips": {
+ "ethereum": {
+ "ownedBy": "0xCE08E02c37d90d75C2bf7D9e55f7606C8DB80E70"
+ }
+ }
+}
diff --git a/LICENSE b/LICENSE
deleted file mode 100644
index b63fe48148fa..000000000000
--- a/LICENSE
+++ /dev/null
@@ -1,7 +0,0 @@
-Copyright (c) 2016-19 [these people](https://github.com/sveltejs/svelte/graphs/contributors)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 000000000000..f872adf738de
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,7 @@
+Copyright (c) 2016-2025 [Svelte Contributors](https://github.com/sveltejs/svelte/graphs/contributors)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
index dc747668b0c3..7ea71647521a 100644
--- a/README.md
+++ b/README.md
@@ -1,26 +1,11 @@
-<p>
- <a href="https://svelte.dev">
- <img alt="Cybernetically enhanced web apps: Svelte" src="https://svelte-assets.surge.sh/banner.png">
- </a>
-
- <a href="https://www.npmjs.com/package/svelte">
- <img src="https://img.shields.io/npm/v/svelte.svg" alt="npm version">
- </a>
-
- <a href="https://packagephobia.now.sh/result?p=svelte">
- <img src="https://packagephobia.now.sh/badge?p=svelte" alt="install size">
- </a>
-
- <a href="https://travis-ci.org/sveltejs/svelte">
- <img src="https://api.travis-ci.org/sveltejs/svelte.svg?branch=master"
- alt="build status">
- </a>
-
- <a href="https://github.com/sveltejs/svelte/blob/master/LICENSE">
- <img src="https://img.shields.io/npm/l/svelte.svg" alt="license">
- </a>
-</p>
+<a href="https://svelte.dev">
+ <picture>
+ <source media="(prefers-color-scheme: dark)" srcset="assets/banner_dark.png">
+ <img src="assets/banner.png" alt="Svelte - web development for the rest of us" />
+ </picture>
+</a>
+[](LICENSE.md) [](https://svelte.dev/chat)
## What is Svelte?
@@ -28,63 +13,26 @@ Svelte is a new way to build web applications. It's a compiler that takes your d
Learn more at the [Svelte website](https://svelte.dev), or stop by the [Discord chatroom](https://svelte.dev/chat).
+## Supporting Svelte
-## Development
-
-Pull requests are encouraged and always welcome. [Pick an issue](https://github.com/sveltejs/svelte/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) and help us out!
-
-To install and work on Svelte locally:
-
-```bash
-git clone https://github.com/sveltejs/svelte.git
-cd svelte
-npm install
-```
-
-> Many tests depend on newlines being preserved as `<LF>`. On Windows, you can ensure this by cloning with:
-> ```bash
-> git -c core.autocrlf=false clone https://github.com/sveltejs/svelte.git
-> ```
-
-To build the compiler, and all the other modules included in the package:
-
-```bash
-npm run build
-```
-
-To watch for changes and continually rebuild the package (this is useful if you're using [npm link](https://docs.npmjs.com/cli/link.html) to test out changes in a project locally):
-
-```bash
-npm run dev
-```
-
-The compiler is written in [TypeScript](https://www.typescriptlang.org/), but don't let that put you off — it's basically just JavaScript with type annotations. You'll pick it up in no time. If you're using an editor other than [Visual Studio Code](https://code.visualstudio.com/) you may need to install a plugin in order to get syntax highlighting and code hints etc.
-
-
-### Running Tests
+Svelte is an MIT-licensed open source project with its ongoing development made possible entirely by fantastic volunteers. If you'd like to support their efforts, please consider:
-```bash
-npm run test
-```
+- [Becoming a backer on Open Collective](https://opencollective.com/svelte).
-To filter tests, use `-g` (aka `--grep`). For example, to only run tests involving transitions:
+Funds donated via Open Collective will be used for compensating expenses related to Svelte's development such as hosting costs. If sufficient donations are received, funds may also be used to support Svelte's development more directly.
-```bash
-npm run test -- -g transition
-```
+## Roadmap
+You may view [our roadmap](https://svelte.dev/roadmap) if you'd like to see what we're currently working on.
-## svelte.dev
+## Contributing
-The source code for https://svelte.dev, including all the documentation, lives in the [site](site) directory. The site is built with [Sapper](https://sapper.svelte.dev). To develop locally:
+Please see the [Contributing Guide](CONTRIBUTING.md) and the [`svelte`](packages/svelte) package for information on contributing to Svelte.
-```bash
-cd site
-npm install && npm run update
-npm run dev
-```
+## Is svelte.dev down?
+Probably not, but it's possible. If you can't seem to access any `.dev` sites, check out [this SuperUser question and answer](https://superuser.com/q/1413402).
## License
-[MIT](LICENSE)
+[MIT](LICENSE.md)
diff --git a/appveyor.yml b/appveyor.yml
deleted file mode 100644
index 23a3ac3505cc..000000000000
--- a/appveyor.yml
+++ /dev/null
@@ -1,31 +0,0 @@
-# http://www.appveyor.com/docs/appveyor-yml
-
-version: "{build}"
-
-clone_depth: 10
-
-init:
- - git config --global core.autocrlf false
-
-environment:
- matrix:
- - nodejs_version: 8
- - nodejs_version: 10
- - nodejs_version: 12
-
-install:
- - ps: Update-NodeJsInstallation (Get-NodeJsLatestBuild $env:nodejs_version)
- - npm ci || npm install
-
-build: off
-
-test_script:
- - node --version && npm --version
- - npm test
-
-matrix:
- fast_finish: false
-
-# cache:
-# - C:\Users\appveyor\AppData\Roaming\npm-cache -> package.json # npm cache
-# - node_modules -> package.json # local npm modules
diff --git a/assets/banner.png b/assets/banner.png
new file mode 100644
index 000000000000..3428b278bfa3
Binary files /dev/null and b/assets/banner.png differ
diff --git a/assets/banner_dark.png b/assets/banner_dark.png
new file mode 100644
index 000000000000..1adba40d8e2f
Binary files /dev/null and b/assets/banner_dark.png differ
diff --git a/banner.png b/banner.png
deleted file mode 100644
index 0d117c3c09d4..000000000000
Binary files a/banner.png and /dev/null differ
diff --git a/benchmarking/.gitignore b/benchmarking/.gitignore
new file mode 100644
index 000000000000..53752db253e3
--- /dev/null
+++ b/benchmarking/.gitignore
@@ -0,0 +1 @@
+output
diff --git a/benchmarking/benchmarks/reactivity/index.js b/benchmarking/benchmarks/reactivity/index.js
new file mode 100644
index 000000000000..58b3f5cb295b
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/index.js
@@ -0,0 +1,55 @@
+import { kairo_avoidable_owned, kairo_avoidable_unowned } from './kairo/kairo_avoidable.js';
+import { kairo_broad_owned, kairo_broad_unowned } from './kairo/kairo_broad.js';
+import { kairo_deep_owned, kairo_deep_unowned } from './kairo/kairo_deep.js';
+import { kairo_diamond_owned, kairo_diamond_unowned } from './kairo/kairo_diamond.js';
+import { kairo_mux_unowned, kairo_mux_owned } from './kairo/kairo_mux.js';
+import { kairo_repeated_unowned, kairo_repeated_owned } from './kairo/kairo_repeated.js';
+import { kairo_triangle_owned, kairo_triangle_unowned } from './kairo/kairo_triangle.js';
+import { kairo_unstable_owned, kairo_unstable_unowned } from './kairo/kairo_unstable.js';
+import { mol_bench_owned, mol_bench_unowned } from './mol_bench.js';
+import {
+ sbench_create_0to1,
+ sbench_create_1000to1,
+ sbench_create_1to1,
+ sbench_create_1to1000,
+ sbench_create_1to2,
+ sbench_create_1to4,
+ sbench_create_1to8,
+ sbench_create_2to1,
+ sbench_create_4to1,
+ sbench_create_signals
+} from './sbench.js';
+
+// This benchmark has been adapted from the js-reactivity-benchmark (https://github.com/milomg/js-reactivity-benchmark)
+// Not all tests are the same, and many parts have been tweaked to capture different data.
+
+export const reactivity_benchmarks = [
+ sbench_create_signals,
+ sbench_create_0to1,
+ sbench_create_1to1,
+ sbench_create_2to1,
+ sbench_create_4to1,
+ sbench_create_1000to1,
+ sbench_create_1to2,
+ sbench_create_1to4,
+ sbench_create_1to8,
+ sbench_create_1to1000,
+ kairo_avoidable_owned,
+ kairo_avoidable_unowned,
+ kairo_broad_owned,
+ kairo_broad_unowned,
+ kairo_deep_owned,
+ kairo_deep_unowned,
+ kairo_diamond_owned,
+ kairo_diamond_unowned,
+ kairo_triangle_owned,
+ kairo_triangle_unowned,
+ kairo_mux_owned,
+ kairo_mux_unowned,
+ kairo_repeated_owned,
+ kairo_repeated_unowned,
+ kairo_unstable_owned,
+ kairo_unstable_unowned,
+ mol_bench_owned,
+ mol_bench_unowned
+];
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_avoidable.js b/benchmarking/benchmarks/reactivity/kairo/kairo_avoidable.js
new file mode 100644
index 000000000000..9daea6de99cb
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/kairo/kairo_avoidable.js
@@ -0,0 +1,91 @@
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
+import { busy } from './util.js';
+
+function setup() {
+ let head = $.state(0);
+ let computed1 = $.derived(() => $.get(head));
+ let computed2 = $.derived(() => ($.get(computed1), 0));
+ let computed3 = $.derived(() => (busy(), $.get(computed2) + 1)); // heavy computation
+ let computed4 = $.derived(() => $.get(computed3) + 2);
+ let computed5 = $.derived(() => $.get(computed4) + 3);
+
+ const destroy = $.effect_root(() => {
+ $.render_effect(() => {
+ $.get(computed5);
+ busy(); // heavy side effect
+ });
+ });
+
+ return {
+ destroy,
+ run() {
+ $.flush(() => {
+ $.set(head, 1);
+ });
+ assert($.get(computed5) === 6);
+ for (let i = 0; i < 1000; i++) {
+ $.flush(() => {
+ $.set(head, i);
+ });
+ assert($.get(computed5) === 6);
+ }
+ }
+ };
+}
+
+export async function kairo_avoidable_unowned() {
+ // Do 10 loops to warm up JIT
+ for (let i = 0; i < 10; i++) {
+ const { run, destroy } = setup();
+ run();
+ destroy();
+ }
+
+ const { run, destroy } = setup();
+
+ const { timing } = await fastest_test(10, () => {
+ for (let i = 0; i < 1000; i++) {
+ run();
+ }
+ });
+
+ destroy();
+
+ return {
+ benchmark: 'kairo_avoidable_unowned',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
+
+export async function kairo_avoidable_owned() {
+ let run, destroy;
+
+ const destroy_owned = $.effect_root(() => {
+ // Do 10 loops to warm up JIT
+ for (let i = 0; i < 10; i++) {
+ const { run, destroy } = setup();
+ run();
+ destroy();
+ }
+
+ ({ run, destroy } = setup());
+ });
+
+ const { timing } = await fastest_test(10, () => {
+ for (let i = 0; i < 1000; i++) {
+ run();
+ }
+ });
+
+ // @ts-ignore
+ destroy();
+ destroy_owned();
+
+ return {
+ benchmark: 'kairo_avoidable_owned',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_broad.js b/benchmarking/benchmarks/reactivity/kairo/kairo_broad.js
new file mode 100644
index 000000000000..8dc5710c87db
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/kairo/kairo_broad.js
@@ -0,0 +1,97 @@
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
+
+function setup() {
+ let head = $.state(0);
+ let last = head;
+ let counter = 0;
+
+ const destroy = $.effect_root(() => {
+ for (let i = 0; i < 50; i++) {
+ let current = $.derived(() => {
+ return $.get(head) + i;
+ });
+ let current2 = $.derived(() => {
+ return $.get(current) + 1;
+ });
+ $.render_effect(() => {
+ $.get(current2);
+ counter++;
+ });
+ last = current2;
+ }
+ });
+
+ return {
+ destroy,
+ run() {
+ $.flush(() => {
+ $.set(head, 1);
+ });
+ counter = 0;
+ for (let i = 0; i < 50; i++) {
+ $.flush(() => {
+ $.set(head, i);
+ });
+ assert($.get(last) === i + 50);
+ }
+ assert(counter === 50 * 50);
+ }
+ };
+}
+
+export async function kairo_broad_unowned() {
+ // Do 10 loops to warm up JIT
+ for (let i = 0; i < 10; i++) {
+ const { run, destroy } = setup();
+ run();
+ destroy();
+ }
+
+ const { run, destroy } = setup();
+
+ const { timing } = await fastest_test(10, () => {
+ for (let i = 0; i < 1000; i++) {
+ run();
+ }
+ });
+
+ destroy();
+
+ return {
+ benchmark: 'kairo_broad_unowned',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
+
+export async function kairo_broad_owned() {
+ let run, destroy;
+
+ const destroy_owned = $.effect_root(() => {
+ // Do 10 loops to warm up JIT
+ for (let i = 0; i < 10; i++) {
+ const { run, destroy } = setup();
+ run();
+ destroy();
+ }
+
+ ({ run, destroy } = setup());
+ });
+
+ const { timing } = await fastest_test(10, () => {
+ for (let i = 0; i < 1000; i++) {
+ run();
+ }
+ });
+
+ // @ts-ignore
+ destroy();
+ destroy_owned();
+
+ return {
+ benchmark: 'kairo_broad_owned',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_deep.js b/benchmarking/benchmarks/reactivity/kairo/kairo_deep.js
new file mode 100644
index 000000000000..8690c85f864a
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/kairo/kairo_deep.js
@@ -0,0 +1,97 @@
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
+
+let len = 50;
+const iter = 50;
+
+function setup() {
+ let head = $.state(0);
+ let current = head;
+ for (let i = 0; i < len; i++) {
+ let c = current;
+ current = $.derived(() => {
+ return $.get(c) + 1;
+ });
+ }
+ let counter = 0;
+
+ const destroy = $.effect_root(() => {
+ $.render_effect(() => {
+ $.get(current);
+ counter++;
+ });
+ });
+
+ return {
+ destroy,
+ run() {
+ $.flush(() => {
+ $.set(head, 1);
+ });
+ counter = 0;
+ for (let i = 0; i < iter; i++) {
+ $.flush(() => {
+ $.set(head, i);
+ });
+ assert($.get(current) === len + i);
+ }
+ assert(counter === iter);
+ }
+ };
+}
+
+export async function kairo_deep_unowned() {
+ // Do 10 loops to warm up JIT
+ for (let i = 0; i < 10; i++) {
+ const { run, destroy } = setup();
+ run();
+ destroy();
+ }
+
+ const { run, destroy } = setup();
+
+ const { timing } = await fastest_test(10, () => {
+ for (let i = 0; i < 1000; i++) {
+ run();
+ }
+ });
+
+ destroy();
+
+ return {
+ benchmark: 'kairo_deep_unowned',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
+
+export async function kairo_deep_owned() {
+ let run, destroy;
+
+ const destroy_owned = $.effect_root(() => {
+ // Do 10 loops to warm up JIT
+ for (let i = 0; i < 10; i++) {
+ const { run, destroy } = setup();
+ run();
+ destroy();
+ }
+
+ ({ run, destroy } = setup());
+ });
+
+ const { timing } = await fastest_test(10, () => {
+ for (let i = 0; i < 1000; i++) {
+ run();
+ }
+ });
+
+ // @ts-ignore
+ destroy();
+ destroy_owned();
+
+ return {
+ benchmark: 'kairo_deep_owned',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_diamond.js b/benchmarking/benchmarks/reactivity/kairo/kairo_diamond.js
new file mode 100644
index 000000000000..bf4e07ee8962
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/kairo/kairo_diamond.js
@@ -0,0 +1,101 @@
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
+
+let width = 5;
+
+function setup() {
+ let head = $.state(0);
+ let current = [];
+ for (let i = 0; i < width; i++) {
+ current.push(
+ $.derived(() => {
+ return $.get(head) + 1;
+ })
+ );
+ }
+ let sum = $.derived(() => {
+ return current.map((x) => $.get(x)).reduce((a, b) => a + b, 0);
+ });
+ let counter = 0;
+
+ const destroy = $.effect_root(() => {
+ $.render_effect(() => {
+ $.get(sum);
+ counter++;
+ });
+ });
+
+ return {
+ destroy,
+ run() {
+ $.flush(() => {
+ $.set(head, 1);
+ });
+ assert($.get(sum) === 2 * width);
+ counter = 0;
+ for (let i = 0; i < 500; i++) {
+ $.flush(() => {
+ $.set(head, i);
+ });
+ assert($.get(sum) === (i + 1) * width);
+ }
+ assert(counter === 500);
+ }
+ };
+}
+
+export async function kairo_diamond_unowned() {
+ // Do 10 loops to warm up JIT
+ for (let i = 0; i < 10; i++) {
+ const { run, destroy } = setup();
+ run();
+ destroy();
+ }
+
+ const { run, destroy } = setup();
+
+ const { timing } = await fastest_test(10, () => {
+ for (let i = 0; i < 1000; i++) {
+ run();
+ }
+ });
+
+ destroy();
+
+ return {
+ benchmark: 'kairo_diamond_unowned',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
+
+export async function kairo_diamond_owned() {
+ let run, destroy;
+
+ const destroy_owned = $.effect_root(() => {
+ // Do 10 loops to warm up JIT
+ for (let i = 0; i < 10; i++) {
+ const { run, destroy } = setup();
+ run();
+ destroy();
+ }
+
+ ({ run, destroy } = setup());
+ });
+
+ const { timing } = await fastest_test(10, () => {
+ for (let i = 0; i < 1000; i++) {
+ run();
+ }
+ });
+
+ // @ts-ignore
+ destroy();
+ destroy_owned();
+
+ return {
+ benchmark: 'kairo_diamond_owned',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_mux.js b/benchmarking/benchmarks/reactivity/kairo/kairo_mux.js
new file mode 100644
index 000000000000..fc252a27b5f8
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/kairo/kairo_mux.js
@@ -0,0 +1,94 @@
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
+
+function setup() {
+ let heads = new Array(100).fill(null).map((_) => $.state(0));
+ const mux = $.derived(() => {
+ return Object.fromEntries(heads.map((h) => $.get(h)).entries());
+ });
+ const splited = heads
+ .map((_, index) => $.derived(() => $.get(mux)[index]))
+ .map((x) => $.derived(() => $.get(x) + 1));
+
+ const destroy = $.effect_root(() => {
+ splited.forEach((x) => {
+ $.render_effect(() => {
+ $.get(x);
+ });
+ });
+ });
+
+ return {
+ destroy,
+ run() {
+ for (let i = 0; i < 10; i++) {
+ $.flush(() => {
+ $.set(heads[i], i);
+ });
+ assert($.get(splited[i]) === i + 1);
+ }
+ for (let i = 0; i < 10; i++) {
+ $.flush(() => {
+ $.set(heads[i], i * 2);
+ });
+ assert($.get(splited[i]) === i * 2 + 1);
+ }
+ }
+ };
+}
+
+export async function kairo_mux_unowned() {
+ // Do 10 loops to warm up JIT
+ for (let i = 0; i < 10; i++) {
+ const { run, destroy } = setup();
+ run();
+ destroy();
+ }
+
+ const { run, destroy } = setup();
+
+ const { timing } = await fastest_test(10, () => {
+ for (let i = 0; i < 1000; i++) {
+ run();
+ }
+ });
+
+ destroy();
+
+ return {
+ benchmark: 'kairo_mux_unowned',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
+
+export async function kairo_mux_owned() {
+ let run, destroy;
+
+ const destroy_owned = $.effect_root(() => {
+ // Do 10 loops to warm up JIT
+ for (let i = 0; i < 10; i++) {
+ const { run, destroy } = setup();
+ run();
+ destroy();
+ }
+
+ ({ run, destroy } = setup());
+ });
+
+ const { timing } = await fastest_test(10, () => {
+ for (let i = 0; i < 1000; i++) {
+ run();
+ }
+ });
+
+ // @ts-ignore
+ destroy();
+ destroy_owned();
+
+ return {
+ benchmark: 'kairo_mux_owned',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_repeated.js b/benchmarking/benchmarks/reactivity/kairo/kairo_repeated.js
new file mode 100644
index 000000000000..3bee06ca0e8f
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/kairo/kairo_repeated.js
@@ -0,0 +1,98 @@
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
+
+let size = 30;
+
+function setup() {
+ let head = $.state(0);
+ let current = $.derived(() => {
+ let result = 0;
+ for (let i = 0; i < size; i++) {
+ result += $.get(head);
+ }
+ return result;
+ });
+
+ let counter = 0;
+
+ const destroy = $.effect_root(() => {
+ $.render_effect(() => {
+ $.get(current);
+ counter++;
+ });
+ });
+
+ return {
+ destroy,
+ run() {
+ $.flush(() => {
+ $.set(head, 1);
+ });
+ assert($.get(current) === size);
+ counter = 0;
+ for (let i = 0; i < 100; i++) {
+ $.flush(() => {
+ $.set(head, i);
+ });
+ assert($.get(current) === i * size);
+ }
+ assert(counter === 100);
+ }
+ };
+}
+
+export async function kairo_repeated_unowned() {
+ // Do 10 loops to warm up JIT
+ for (let i = 0; i < 10; i++) {
+ const { run, destroy } = setup();
+ run();
+ destroy();
+ }
+
+ const { run, destroy } = setup();
+
+ const { timing } = await fastest_test(10, () => {
+ for (let i = 0; i < 1000; i++) {
+ run();
+ }
+ });
+
+ destroy();
+
+ return {
+ benchmark: 'kairo_repeated_unowned',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
+
+export async function kairo_repeated_owned() {
+ let run, destroy;
+
+ const destroy_owned = $.effect_root(() => {
+ // Do 10 loops to warm up JIT
+ for (let i = 0; i < 10; i++) {
+ const { run, destroy } = setup();
+ run();
+ destroy();
+ }
+
+ ({ run, destroy } = setup());
+ });
+
+ const { timing } = await fastest_test(10, () => {
+ for (let i = 0; i < 1000; i++) {
+ run();
+ }
+ });
+
+ // @ts-ignore
+ destroy();
+ destroy_owned();
+
+ return {
+ benchmark: 'kairo_repeated_owned',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_triangle.js b/benchmarking/benchmarks/reactivity/kairo/kairo_triangle.js
new file mode 100644
index 000000000000..11a419a52e7b
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/kairo/kairo_triangle.js
@@ -0,0 +1,111 @@
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
+
+let width = 10;
+
+function count(number) {
+ return new Array(number)
+ .fill(0)
+ .map((_, i) => i + 1)
+ .reduce((x, y) => x + y, 0);
+}
+
+function setup() {
+ let head = $.state(0);
+ let current = head;
+ let list = [];
+ for (let i = 0; i < width; i++) {
+ let c = current;
+ list.push(current);
+ current = $.derived(() => {
+ return $.get(c) + 1;
+ });
+ }
+ let sum = $.derived(() => {
+ return list.map((x) => $.get(x)).reduce((a, b) => a + b, 0);
+ });
+
+ let counter = 0;
+
+ const destroy = $.effect_root(() => {
+ $.render_effect(() => {
+ $.get(sum);
+ counter++;
+ });
+ });
+
+ return {
+ destroy,
+ run() {
+ const constant = count(width);
+ $.flush(() => {
+ $.set(head, 1);
+ });
+ assert($.get(sum) === constant);
+ counter = 0;
+ for (let i = 0; i < 100; i++) {
+ $.flush(() => {
+ $.set(head, i);
+ });
+ assert($.get(sum) === constant - width + i * width);
+ }
+ assert(counter === 100);
+ }
+ };
+}
+
+export async function kairo_triangle_unowned() {
+ // Do 10 loops to warm up JIT
+ for (let i = 0; i < 10; i++) {
+ const { run, destroy } = setup();
+ run();
+ destroy();
+ }
+
+ const { run, destroy } = setup();
+
+ const { timing } = await fastest_test(10, () => {
+ for (let i = 0; i < 1000; i++) {
+ run();
+ }
+ });
+
+ destroy();
+
+ return {
+ benchmark: 'kairo_triangle_unowned',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
+
+export async function kairo_triangle_owned() {
+ let run, destroy;
+
+ const destroy_owned = $.effect_root(() => {
+ // Do 10 loops to warm up JIT
+ for (let i = 0; i < 10; i++) {
+ const { run, destroy } = setup();
+ run();
+ destroy();
+ }
+
+ ({ run, destroy } = setup());
+ });
+
+ const { timing } = await fastest_test(10, () => {
+ for (let i = 0; i < 1000; i++) {
+ run();
+ }
+ });
+
+ // @ts-ignore
+ destroy();
+ destroy_owned();
+
+ return {
+ benchmark: 'kairo_triangle_owned',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_unstable.js b/benchmarking/benchmarks/reactivity/kairo/kairo_unstable.js
new file mode 100644
index 000000000000..54eb732cb29d
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/kairo/kairo_unstable.js
@@ -0,0 +1,97 @@
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
+
+function setup() {
+ let head = $.state(0);
+ const double = $.derived(() => $.get(head) * 2);
+ const inverse = $.derived(() => -$.get(head));
+ let current = $.derived(() => {
+ let result = 0;
+ for (let i = 0; i < 20; i++) {
+ result += $.get(head) % 2 ? $.get(double) : $.get(inverse);
+ }
+ return result;
+ });
+
+ let counter = 0;
+
+ const destroy = $.effect_root(() => {
+ $.render_effect(() => {
+ $.get(current);
+ counter++;
+ });
+ });
+
+ return {
+ destroy,
+ run() {
+ $.flush(() => {
+ $.set(head, 1);
+ });
+ assert($.get(current) === 40);
+ counter = 0;
+ for (let i = 0; i < 100; i++) {
+ $.flush(() => {
+ $.set(head, i);
+ });
+ }
+ assert(counter === 100);
+ }
+ };
+}
+
+export async function kairo_unstable_unowned() {
+ // Do 10 loops to warm up JIT
+ for (let i = 0; i < 10; i++) {
+ const { run, destroy } = setup();
+ run();
+ destroy();
+ }
+
+ const { run, destroy } = setup();
+
+ const { timing } = await fastest_test(10, () => {
+ for (let i = 0; i < 1000; i++) {
+ run();
+ }
+ });
+
+ destroy();
+
+ return {
+ benchmark: 'kairo_unstable_unowned',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
+
+export async function kairo_unstable_owned() {
+ let run, destroy;
+
+ const destroy_owned = $.effect_root(() => {
+ // Do 10 loops to warm up JIT
+ for (let i = 0; i < 10; i++) {
+ const { run, destroy } = setup();
+ run();
+ destroy();
+ }
+
+ ({ run, destroy } = setup());
+ });
+
+ const { timing } = await fastest_test(10, () => {
+ for (let i = 0; i < 1000; i++) {
+ run();
+ }
+ });
+
+ // @ts-ignore
+ destroy();
+ destroy_owned();
+
+ return {
+ benchmark: 'kairo_unstable_owned',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
diff --git a/benchmarking/benchmarks/reactivity/kairo/util.js b/benchmarking/benchmarks/reactivity/kairo/util.js
new file mode 100644
index 000000000000..75e3641ab964
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/kairo/util.js
@@ -0,0 +1,6 @@
+export function busy() {
+ let a = 0;
+ for (let i = 0; i < 1_00; i++) {
+ a++;
+ }
+}
diff --git a/benchmarking/benchmarks/reactivity/mol_bench.js b/benchmarking/benchmarks/reactivity/mol_bench.js
new file mode 100644
index 000000000000..536b078d74a4
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/mol_bench.js
@@ -0,0 +1,121 @@
+import { assert, fastest_test } from '../../utils.js';
+import * as $ from 'svelte/internal/client';
+
+/**
+ * @param {number} n
+ */
+function fib(n) {
+ if (n < 2) return 1;
+ return fib(n - 1) + fib(n - 2);
+}
+
+/**
+ * @param {number} n
+ */
+function hard(n) {
+ return n + fib(16);
+}
+
+const numbers = Array.from({ length: 5 }, (_, i) => i);
+
+function setup() {
+ let res = [];
+ const A = $.state(0);
+ const B = $.state(0);
+ const C = $.derived(() => ($.get(A) % 2) + ($.get(B) % 2));
+ const D = $.derived(() => numbers.map((i) => i + ($.get(A) % 2) - ($.get(B) % 2)));
+ D.equals = function (/** @type {number[]} */ l) {
+ var r = this.v;
+ return r !== null && l.length === r.length && l.every((v, i) => v === r[i]);
+ };
+ const E = $.derived(() => hard($.get(C) + $.get(A) + $.get(D)[0]));
+ const F = $.derived(() => hard($.get(D)[0] && $.get(B)));
+ const G = $.derived(() => $.get(C) + ($.get(C) || $.get(E) % 2) + $.get(D)[0] + $.get(F));
+
+ const destroy = $.effect_root(() => {
+ $.render_effect(() => {
+ res.push(hard($.get(G)));
+ });
+ $.render_effect(() => {
+ res.push($.get(G));
+ });
+ $.render_effect(() => {
+ res.push(hard($.get(F)));
+ });
+ });
+
+ return {
+ destroy,
+ /**
+ * @param {number} i
+ */
+ run(i) {
+ res.length = 0;
+ $.flush(() => {
+ $.set(B, 1);
+ $.set(A, 1 + i * 2);
+ });
+ $.flush(() => {
+ $.set(A, 2 + i * 2);
+ $.set(B, 2);
+ });
+ assert(res[0] === 3198 && res[1] === 1601 && res[2] === 3195 && res[3] === 1598);
+ }
+ };
+}
+
+export async function mol_bench_owned() {
+ let run, destroy;
+
+ const destroy_owned = $.effect_root(() => {
+ // Do 10 loops to warm up JIT
+ for (let i = 0; i < 10; i++) {
+ const { run, destroy } = setup();
+ run(0);
+ destroy();
+ }
+
+ ({ run, destroy } = setup());
+ });
+
+ const { timing } = await fastest_test(10, () => {
+ for (let i = 0; i < 1e4; i++) {
+ run(i);
+ }
+ });
+
+ // @ts-ignore
+ destroy();
+ destroy_owned();
+
+ return {
+ benchmark: 'mol_bench_owned',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
+
+export async function mol_bench_unowned() {
+ // Do 10 loops to warm up JIT
+ for (let i = 0; i < 10; i++) {
+ const { run, destroy } = setup();
+ run(0);
+ destroy();
+ }
+
+ const { run, destroy } = setup();
+
+ const { timing } = await fastest_test(10, () => {
+ for (let i = 0; i < 1e4; i++) {
+ run(i);
+ }
+ });
+
+ destroy();
+
+ return {
+ benchmark: 'mol_bench_unowned',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
diff --git a/benchmarking/benchmarks/reactivity/sbench.js b/benchmarking/benchmarks/reactivity/sbench.js
new file mode 100644
index 000000000000..ddeaef251485
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/sbench.js
@@ -0,0 +1,366 @@
+import { fastest_test } from '../../utils.js';
+import * as $ from '../../../packages/svelte/src/internal/client/index.js';
+
+const COUNT = 1e5;
+
+/**
+ * @param {number} n
+ * @param {any[]} sources
+ */
+function create_data_signals(n, sources) {
+ for (let i = 0; i < n; i++) {
+ sources[i] = $.state(i);
+ }
+ return sources;
+}
+
+/**
+ * @param {number} i
+ */
+function create_computation_0(i) {
+ $.derived(() => i);
+}
+
+/**
+ * @param {any} s1
+ */
+function create_computation_1(s1) {
+ $.derived(() => $.get(s1));
+}
+/**
+ * @param {any} s1
+ * @param {any} s2
+ */
+function create_computation_2(s1, s2) {
+ $.derived(() => $.get(s1) + $.get(s2));
+}
+
+function create_computation_1000(ss, offset) {
+ $.derived(() => {
+ let sum = 0;
+ for (let i = 0; i < 1000; i++) {
+ sum += $.get(ss[offset + i]);
+ }
+ return sum;
+ });
+}
+
+/**
+ * @param {number} n
+ */
+function create_computations_0to1(n) {
+ for (let i = 0; i < n; i++) {
+ create_computation_0(i);
+ }
+}
+
+/**
+ * @param {number} n
+ * @param {any[]} sources
+ */
+function create_computations_1to1(n, sources) {
+ for (let i = 0; i < n; i++) {
+ const source = sources[i];
+ create_computation_1(source);
+ }
+}
+
+/**
+ * @param {number} n
+ * @param {any[]} sources
+ */
+function create_computations_2to1(n, sources) {
+ for (let i = 0; i < n; i++) {
+ create_computation_2(sources[i * 2], sources[i * 2 + 1]);
+ }
+}
+
+function create_computation_4(s1, s2, s3, s4) {
+ $.derived(() => $.get(s1) + $.get(s2) + $.get(s3) + $.get(s4));
+}
+
+function create_computations_1000to1(n, sources) {
+ for (let i = 0; i < n; i++) {
+ create_computation_1000(sources, i * 1000);
+ }
+}
+
+function create_computations_1to2(n, sources) {
+ for (let i = 0; i < n / 2; i++) {
+ const source = sources[i];
+ create_computation_1(source);
+ create_computation_1(source);
+ }
+}
+
+function create_computations_1to4(n, sources) {
+ for (let i = 0; i < n / 4; i++) {
+ const source = sources[i];
+ create_computation_1(source);
+ create_computation_1(source);
+ create_computation_1(source);
+ create_computation_1(source);
+ }
+}
+
+function create_computations_1to8(n, sources) {
+ for (let i = 0; i < n / 8; i++) {
+ const source = sources[i];
+ create_computation_1(source);
+ create_computation_1(source);
+ create_computation_1(source);
+ create_computation_1(source);
+ create_computation_1(source);
+ create_computation_1(source);
+ create_computation_1(source);
+ create_computation_1(source);
+ }
+}
+
+function create_computations_1to1000(n, sources) {
+ for (let i = 0; i < n / 1000; i++) {
+ const source = sources[i];
+ for (let j = 0; j < 1000; j++) {
+ create_computation_1(source);
+ }
+ }
+}
+
+function create_computations_4to1(n, sources) {
+ for (let i = 0; i < n; i++) {
+ create_computation_4(
+ sources[i * 4],
+ sources[i * 4 + 1],
+ sources[i * 4 + 2],
+ sources[i * 4 + 3]
+ );
+ }
+}
+
+/**
+ * @param {any} fn
+ * @param {number} count
+ * @param {number} scount
+ */
+function bench(fn, count, scount) {
+ let sources = create_data_signals(scount, []);
+
+ fn(count, sources);
+}
+
+export async function sbench_create_signals() {
+ // Do 3 loops to warm up JIT
+ for (let i = 0; i < 3; i++) {
+ bench(create_data_signals, COUNT, COUNT);
+ }
+
+ const { timing } = await fastest_test(10, () => {
+ for (let i = 0; i < 100; i++) {
+ bench(create_data_signals, COUNT, COUNT);
+ }
+ });
+
+ return {
+ benchmark: 'sbench_create_signals',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
+
+export async function sbench_create_0to1() {
+ // Do 3 loops to warm up JIT
+ for (let i = 0; i < 3; i++) {
+ bench(create_computations_0to1, COUNT, 0);
+ }
+
+ const { timing } = await fastest_test(10, () => {
+ const destroy = $.effect_root(() => {
+ for (let i = 0; i < 10; i++) {
+ bench(create_computations_0to1, COUNT, 0);
+ }
+ });
+ destroy();
+ });
+
+ return {
+ benchmark: 'sbench_create_0to1',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
+
+export async function sbench_create_1to1() {
+ // Do 3 loops to warm up JIT
+ for (let i = 0; i < 3; i++) {
+ bench(create_computations_1to1, COUNT, COUNT);
+ }
+
+ const { timing } = await fastest_test(10, () => {
+ const destroy = $.effect_root(() => {
+ for (let i = 0; i < 10; i++) {
+ bench(create_computations_1to1, COUNT, COUNT);
+ }
+ });
+ destroy();
+ });
+
+ return {
+ benchmark: 'sbench_create_1to1',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
+
+export async function sbench_create_2to1() {
+ // Do 3 loops to warm up JIT
+ for (let i = 0; i < 3; i++) {
+ bench(create_computations_2to1, COUNT / 2, COUNT);
+ }
+
+ const { timing } = await fastest_test(10, () => {
+ const destroy = $.effect_root(() => {
+ for (let i = 0; i < 10; i++) {
+ bench(create_computations_2to1, COUNT / 2, COUNT);
+ }
+ });
+ destroy();
+ });
+
+ return {
+ benchmark: 'sbench_create_2to1',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
+
+export async function sbench_create_4to1() {
+ // Do 3 loops to warm up JIT
+ for (let i = 0; i < 3; i++) {
+ bench(create_computations_4to1, COUNT / 4, COUNT);
+ }
+
+ const { timing } = await fastest_test(10, () => {
+ const destroy = $.effect_root(() => {
+ for (let i = 0; i < 10; i++) {
+ bench(create_computations_4to1, COUNT / 4, COUNT);
+ }
+ });
+ destroy();
+ });
+
+ return {
+ benchmark: 'sbench_create_4to1',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
+
+export async function sbench_create_1000to1() {
+ // Do 3 loops to warm up JIT
+ for (let i = 0; i < 3; i++) {
+ bench(create_computations_1000to1, COUNT / 1000, COUNT);
+ }
+
+ const { timing } = await fastest_test(10, () => {
+ const destroy = $.effect_root(() => {
+ for (let i = 0; i < 10; i++) {
+ bench(create_computations_1000to1, COUNT / 1000, COUNT);
+ }
+ });
+ destroy();
+ });
+
+ return {
+ benchmark: 'sbench_create_1000to1',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
+
+export async function sbench_create_1to2() {
+ // Do 3 loops to warm up JIT
+ for (let i = 0; i < 3; i++) {
+ bench(create_computations_1to2, COUNT, COUNT / 2);
+ }
+
+ const { timing } = await fastest_test(10, () => {
+ const destroy = $.effect_root(() => {
+ for (let i = 0; i < 10; i++) {
+ bench(create_computations_1to2, COUNT, COUNT / 2);
+ }
+ });
+ destroy();
+ });
+
+ return {
+ benchmark: 'sbench_create_1to2',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
+
+export async function sbench_create_1to4() {
+ // Do 3 loops to warm up JIT
+ for (let i = 0; i < 3; i++) {
+ bench(create_computations_1to4, COUNT, COUNT / 4);
+ }
+
+ const { timing } = await fastest_test(10, () => {
+ const destroy = $.effect_root(() => {
+ for (let i = 0; i < 10; i++) {
+ bench(create_computations_1to4, COUNT, COUNT / 4);
+ }
+ });
+ destroy();
+ });
+
+ return {
+ benchmark: 'sbench_create_1to4',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
+
+export async function sbench_create_1to8() {
+ // Do 3 loops to warm up JIT
+ for (let i = 0; i < 3; i++) {
+ bench(create_computations_1to8, COUNT, COUNT / 8);
+ }
+
+ const { timing } = await fastest_test(10, () => {
+ const destroy = $.effect_root(() => {
+ for (let i = 0; i < 10; i++) {
+ bench(create_computations_1to8, COUNT, COUNT / 8);
+ }
+ });
+ destroy();
+ });
+
+ return {
+ benchmark: 'sbench_create_1to8',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
+
+export async function sbench_create_1to1000() {
+ // Do 3 loops to warm up JIT
+ for (let i = 0; i < 3; i++) {
+ bench(create_computations_1to1000, COUNT, COUNT / 1000);
+ }
+
+ const { timing } = await fastest_test(10, () => {
+ const destroy = $.effect_root(() => {
+ for (let i = 0; i < 10; i++) {
+ bench(create_computations_1to1000, COUNT, COUNT / 1000);
+ }
+ });
+ destroy();
+ });
+
+ return {
+ benchmark: 'sbench_create_1to1000',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
diff --git a/benchmarking/benchmarks/ssr/index.js b/benchmarking/benchmarks/ssr/index.js
new file mode 100644
index 000000000000..667137d1ed12
--- /dev/null
+++ b/benchmarking/benchmarks/ssr/index.js
@@ -0,0 +1,3 @@
+import { wrapper_bench } from './wrapper/wrapper_bench.js';
+
+export const ssr_benchmarks = [wrapper_bench];
diff --git a/benchmarking/benchmarks/ssr/wrapper/App.svelte b/benchmarking/benchmarks/ssr/wrapper/App.svelte
new file mode 100644
index 000000000000..93f031f2bc9a
--- /dev/null
+++ b/benchmarking/benchmarks/ssr/wrapper/App.svelte
@@ -0,0 +1,31 @@
+<script>
+ const wrapperWidth = 960;
+ const wrapperHeight = 720;
+ const cellSize = 10;
+ const centerX = wrapperWidth / 2;
+ const centerY = wrapperHeight / 2;
+
+ let angle = 0;
+ let radius = 0;
+
+ let tiles = [];
+ const step = cellSize;
+
+ while (radius < Math.min(wrapperWidth, wrapperHeight) / 2) {
+ let x = centerX + Math.cos(angle) * radius;
+ let y = centerY + Math.sin(angle) * radius;
+
+ if (x >= 0 && x <= wrapperWidth - cellSize && y >= 0 && y <= wrapperHeight - cellSize) {
+ tiles.push({ x, y });
+ }
+
+ angle += 0.2;
+ radius += step * 0.015;
+ }
+</script>
+
+<div id="wrapper">
+ {#each tiles as { x, y }}
+ <div class="tile" style="left: {x.toFixed(2)}px; top: {y.toFixed(2)}px;"></div>
+ {/each}
+</div>
diff --git a/benchmarking/benchmarks/ssr/wrapper/wrapper_bench.js b/benchmarking/benchmarks/ssr/wrapper/wrapper_bench.js
new file mode 100644
index 000000000000..ba0457b80ea7
--- /dev/null
+++ b/benchmarking/benchmarks/ssr/wrapper/wrapper_bench.js
@@ -0,0 +1,36 @@
+import { render } from 'svelte/server';
+import { fastest_test, read_file, write } from '../../../utils.js';
+import { compile } from 'svelte/compiler';
+
+const dir = `${process.cwd()}/benchmarking/benchmarks/ssr/wrapper`;
+
+async function compile_svelte() {
+ const output = compile(read_file(`${dir}/App.svelte`), {
+ generate: 'server'
+ });
+ write(`${dir}/output/App.js`, output.js.code);
+
+ const module = await import(`${dir}/output/App.js`);
+
+ return module.default;
+}
+
+export async function wrapper_bench() {
+ const App = await compile_svelte();
+ // Do 3 loops to warm up JIT
+ for (let i = 0; i < 3; i++) {
+ render(App);
+ }
+
+ const { timing } = await fastest_test(10, () => {
+ for (let i = 0; i < 100; i++) {
+ render(App);
+ }
+ });
+
+ return {
+ benchmark: 'wrapper_bench',
+ time: timing.time.toFixed(2),
+ gc_time: timing.gc_time.toFixed(2)
+ };
+}
diff --git a/benchmarking/compare/index.js b/benchmarking/compare/index.js
new file mode 100644
index 000000000000..9d8d279c353a
--- /dev/null
+++ b/benchmarking/compare/index.js
@@ -0,0 +1,89 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { execSync, fork } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+
+// if (execSync('git status --porcelain').toString().trim()) {
+// console.error('Working directory is not clean');
+// process.exit(1);
+// }
+
+const filename = fileURLToPath(import.meta.url);
+const runner = path.resolve(filename, '../runner.js');
+const outdir = path.resolve(filename, '../.results');
+
+if (fs.existsSync(outdir)) fs.rmSync(outdir, { recursive: true });
+fs.mkdirSync(outdir);
+
+const branches = [];
+
+for (const arg of process.argv.slice(2)) {
+ if (arg.startsWith('--')) continue;
+ if (arg === filename) continue;
+
+ branches.push(arg);
+}
+
+if (branches.length === 0) {
+ branches.push(
+ execSync('git symbolic-ref --short -q HEAD || git rev-parse --short HEAD').toString().trim()
+ );
+}
+
+if (branches.length === 1) {
+ branches.push('main');
+}
+
+process.on('exit', () => {
+ execSync(`git checkout ${branches[0]}`);
+});
+
+for (const branch of branches) {
+ console.group(`Benchmarking ${branch}`);
+
+ execSync(`git checkout ${branch}`);
+
+ await new Promise((fulfil, reject) => {
+ const child = fork(runner);
+
+ child.on('message', (results) => {
+ fs.writeFileSync(`${outdir}/${branch}.json`, JSON.stringify(results, null, ' '));
+ fulfil();
+ });
+
+ child.on('error', reject);
+ });
+
+ console.groupEnd();
+}
+
+const results = branches.map((branch) => {
+ return JSON.parse(fs.readFileSync(`${outdir}/${branch}.json`, 'utf-8'));
+});
+
+for (let i = 0; i < results[0].length; i += 1) {
+ console.group(`${results[0][i].benchmark}`);
+
+ for (const metric of ['time', 'gc_time']) {
+ const times = results.map((result) => +result[i][metric]);
+ let min = Infinity;
+ let min_index = -1;
+
+ for (let b = 0; b < times.length; b += 1) {
+ if (times[b] < min) {
+ min = times[b];
+ min_index = b;
+ }
+ }
+
+ if (min !== 0) {
+ console.group(`${metric}: fastest is ${branches[min_index]}`);
+ times.forEach((time, b) => {
+ console.log(`${branches[b]}: ${time.toFixed(2)}ms (${((time / min) * 100).toFixed(2)}%)`);
+ });
+ console.groupEnd();
+ }
+ }
+
+ console.groupEnd();
+}
diff --git a/benchmarking/compare/runner.js b/benchmarking/compare/runner.js
new file mode 100644
index 000000000000..a2e864637969
--- /dev/null
+++ b/benchmarking/compare/runner.js
@@ -0,0 +1,10 @@
+import { reactivity_benchmarks } from '../benchmarks/reactivity/index.js';
+
+const results = [];
+for (const benchmark of reactivity_benchmarks) {
+ const result = await benchmark();
+ console.error(result.benchmark);
+ results.push(result);
+}
+
+process.send(results);
diff --git a/benchmarking/run.js b/benchmarking/run.js
new file mode 100644
index 000000000000..bd96b9c2dc5a
--- /dev/null
+++ b/benchmarking/run.js
@@ -0,0 +1,55 @@
+import * as $ from '../packages/svelte/src/internal/client/index.js';
+import { reactivity_benchmarks } from './benchmarks/reactivity/index.js';
+import { ssr_benchmarks } from './benchmarks/ssr/index.js';
+
+let total_time = 0;
+let total_gc_time = 0;
+
+const suites = [
+ { benchmarks: reactivity_benchmarks, name: 'reactivity benchmarks' },
+ { benchmarks: ssr_benchmarks, name: 'server-side rendering benchmarks' }
+];
+
+// eslint-disable-next-line no-console
+console.log('\x1b[1m', '-- Benchmarking Started --', '\x1b[0m');
+$.push({}, true);
+try {
+ for (const { benchmarks, name } of suites) {
+ let suite_time = 0;
+ let suite_gc_time = 0;
+ // eslint-disable-next-line no-console
+ console.log(`\nRunning ${name}...\n`);
+
+ for (const benchmark of benchmarks) {
+ const results = await benchmark();
+ // eslint-disable-next-line no-console
+ console.log(results);
+ total_time += Number(results.time);
+ total_gc_time += Number(results.gc_time);
+ suite_time += Number(results.time);
+ suite_gc_time += Number(results.gc_time);
+ }
+
+ console.log(`\nFinished ${name}.\n`);
+
+ // eslint-disable-next-line no-console
+ console.log({
+ suite_time: suite_time.toFixed(2),
+ suite_gc_time: suite_gc_time.toFixed(2)
+ });
+ }
+} catch (e) {
+ // eslint-disable-next-line no-console
+ console.log('\x1b[1m', '\n-- Benchmarking Failed --\n', '\x1b[0m');
+ // eslint-disable-next-line no-console
+ console.error(e);
+ process.exit(1);
+}
+$.pop();
+// eslint-disable-next-line no-console
+console.log('\x1b[1m', '\n-- Benchmarking Complete --\n', '\x1b[0m');
+// eslint-disable-next-line no-console
+console.log({
+ total_time: total_time.toFixed(2),
+ total_gc_time: total_gc_time.toFixed(2)
+});
diff --git a/benchmarking/tsconfig.json b/benchmarking/tsconfig.json
new file mode 100644
index 000000000000..81fe19744ac3
--- /dev/null
+++ b/benchmarking/tsconfig.json
@@ -0,0 +1,17 @@
+{
+ "compilerOptions": {
+ "moduleResolution": "Bundler",
+ "target": "ESNext",
+ "module": "ESNext",
+ "verbatimModuleSyntax": true,
+ "isolatedModules": true,
+ "resolveJsonModule": true,
+ "sourceMap": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+ "allowJs": true,
+ "checkJs": true
+ },
+ "include": ["./run.js", "./utils.js", "./benchmarks"]
+}
diff --git a/benchmarking/utils.js b/benchmarking/utils.js
new file mode 100644
index 000000000000..684d2ee02b4d
--- /dev/null
+++ b/benchmarking/utils.js
@@ -0,0 +1,119 @@
+import { performance, PerformanceObserver } from 'node:perf_hooks';
+import v8 from 'v8-natives';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+
+// Credit to https://github.com/milomg/js-reactivity-benchmark for the logic for timing + GC tracking.
+
+class GarbageTrack {
+ track_id = 0;
+ observer = new PerformanceObserver((list) => this.perf_entries.push(...list.getEntries()));
+ perf_entries = [];
+ periods = [];
+
+ watch(fn) {
+ this.track_id++;
+ const start = performance.now();
+ const result = fn();
+ const end = performance.now();
+ this.periods.push({ track_id: this.track_id, start, end });
+
+ return { result, track_id: this.track_id };
+ }
+
+ /**
+ * @param {number} track_id
+ */
+ async gcDuration(track_id) {
+ await promise_delay(10);
+
+ const period = this.periods.find((period) => period.track_id === track_id);
+ if (!period) {
+ // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
+ return Promise.reject('no period found');
+ }
+
+ const entries = this.perf_entries.filter(
+ (e) => e.startTime >= period.start && e.startTime < period.end
+ );
+ return entries.reduce((t, e) => e.duration + t, 0);
+ }
+
+ destroy() {
+ this.observer.disconnect();
+ }
+
+ constructor() {
+ this.observer.observe({ entryTypes: ['gc'] });
+ }
+}
+
+function promise_delay(timeout = 0) {
+ return new Promise((resolve) => setTimeout(resolve, timeout));
+}
+
+/**
+ * @param {{ (): void; (): any; }} fn
+ */
+function run_timed(fn) {
+ const start = performance.now();
+ const result = fn();
+ const time = performance.now() - start;
+ return { result, time };
+}
+
+/**
+ * @param {() => void} fn
+ */
+async function run_tracked(fn) {
+ v8.collectGarbage();
+ const gc_track = new GarbageTrack();
+ const { result: wrappedResult, track_id } = gc_track.watch(() => run_timed(fn));
+ const gc_time = await gc_track.gcDuration(track_id);
+ const { result, time } = wrappedResult;
+ gc_track.destroy();
+ return { result, timing: { time, gc_time } };
+}
+
+/**
+ * @param {number} times
+ * @param {() => void} fn
+ */
+export async function fastest_test(times, fn) {
+ const results = [];
+ for (let i = 0; i < times; i++) {
+ const run = await run_tracked(fn);
+ results.push(run);
+ }
+ const fastest = results.reduce((a, b) => (a.timing.time < b.timing.time ? a : b));
+
+ return fastest;
+}
+
+/**
+ * @param {boolean} a
+ */
+export function assert(a) {
+ if (!a) {
+ throw new Error('Assertion failed');
+ }
+}
+
+/**
+ * @param {string} file
+ */
+export function read_file(file) {
+ return fs.readFileSync(file, 'utf-8').replace(/\r\n/g, '\n');
+}
+
+/**
+ * @param {string} file
+ * @param {string} contents
+ */
+export function write(file, contents) {
+ try {
+ fs.mkdirSync(path.dirname(file), { recursive: true });
+ } catch {}
+
+ fs.writeFileSync(file, contents);
+}
diff --git a/documentation/docs/01-introduction/01-overview.md b/documentation/docs/01-introduction/01-overview.md
new file mode 100644
index 000000000000..5acbe4897bf5
--- /dev/null
+++ b/documentation/docs/01-introduction/01-overview.md
@@ -0,0 +1,30 @@
+---
+title: Overview
+---
+
+Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript...
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+ function greet() {
+ alert('Welcome to Svelte!');
+ }
+</script>
+
+<button onclick={greet}>click me</button>
+
+<style>
+ button {
+ font-size: 2em;
+ }
+</style>
+```
+
+...into lean, tightly optimized JavaScript.
+
+You can use it to build anything on the web, from standalone components to ambitious full stack apps (using Svelte's companion application framework, [SvelteKit](../kit)) and everything in between.
+
+These pages serve as reference documentation. If you're new to Svelte, we recommend starting with the [interactive tutorial](/tutorial) and coming back here when you have questions.
+
+You can also try Svelte online in the [playground](/playground) or, if you need a more fully-featured environment, on [StackBlitz](https://sveltekit.new).
diff --git a/documentation/docs/01-introduction/02-getting-started.md b/documentation/docs/01-introduction/02-getting-started.md
new file mode 100644
index 000000000000..c7351729ff17
--- /dev/null
+++ b/documentation/docs/01-introduction/02-getting-started.md
@@ -0,0 +1,32 @@
+---
+title: Getting started
+---
+
+We recommend using [SvelteKit](../kit), which lets you [build almost anything](../kit/project-types). It's the official application framework from the Svelte team and powered by [Vite](https://vite.dev/). Create a new project with:
+
+```bash
+npx sv create myapp
+cd myapp
+npm install
+npm run dev
+```
+
+Don't worry if you don't know Svelte yet! You can ignore all the nice features SvelteKit brings on top for now and dive into it later.
+
+## Alternatives to SvelteKit
+
+You can also use Svelte directly with Vite by running `npm create vite@latest` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS, and CSS files inside the `dist` directory using [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). In most cases, you will probably need to [choose a routing library](faq#Is-there-a-router) as well.
+
+>[!NOTE] Vite is often used in standalone mode to build [single page apps (SPAs)](../kit/glossary#SPA), which you can also [build with SvelteKit](../kit/single-page-apps).
+
+There are also plugins for [Rollup](https://github.com/sveltejs/rollup-plugin-svelte), [Webpack](https://github.com/sveltejs/svelte-loader) [and a few others](https://sveltesociety.dev/packages?category=build-plugins), but we recommend Vite.
+
+## Editor tooling
+
+The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), and there are integrations with various other [editors](https://sveltesociety.dev/resources#editor-support) and tools as well.
+
+You can also check your code from the command line using [sv check](https://github.com/sveltejs/cli).
+
+## Getting help
+
+Don't be shy about asking for help in the [Discord chatroom](/chat)! You can also find answers on [Stack Overflow](https://stackoverflow.com/questions/tagged/svelte).
diff --git a/documentation/docs/01-introduction/03-svelte-files.md b/documentation/docs/01-introduction/03-svelte-files.md
new file mode 100644
index 000000000000..cd98652370f3
--- /dev/null
+++ b/documentation/docs/01-introduction/03-svelte-files.md
@@ -0,0 +1,71 @@
+---
+title: .svelte files
+---
+
+Components are the building blocks of Svelte applications. They are written into `.svelte` files, using a superset of HTML.
+
+All three sections — script, styles and markup — are optional.
+
+<!-- prettier-ignore -->
+```svelte
+/// file: MyComponent.svelte
+<script module>
+ // module-level logic goes here
+ // (you will rarely use this)
+</script>
+
+<script>
+ // instance-level logic goes here
+</script>
+
+<!-- markup (zero or more items) goes here -->
+
+<style>
+ /* styles go here */
+</style>
+```
+
+## `<script>`
+
+A `<script>` block contains JavaScript (or TypeScript, when adding the `lang="ts"` attribute) that runs when a component instance is created. Variables declared (or imported) at the top level can be referenced in the component's markup.
+
+In addition to normal JavaScript, you can use _runes_ to declare [component props]($props) and add reactivity to your component. Runes are covered in the next section.
+
+<!-- TODO describe behaviour of `export` -->
+
+## `<script module>`
+
+A `<script>` tag with a `module` attribute runs once when the module first evaluates, rather than for each component instance. Variables declared in this block can be referenced elsewhere in the component, but not vice versa.
+
+```svelte
+<script module>
+ let total = 0;
+</script>
+
+<script>
+ total += 1;
+ console.log(`instantiated ${total} times`);
+</script>
+```
+
+You can `export` bindings from this block, and they will become exports of the compiled module. You cannot `export default`, since the default export is the component itself.
+
+> [!NOTE] If you are using TypeScript and import such exports from a `module` block into a `.ts` file, make sure to have your editor setup so that TypeScript knows about them. This is the case for our VS Code extension and the IntelliJ plugin, but in other cases you might need to setup our [TypeScript editor plugin](https://www.npmjs.com/package/typescript-svelte-plugin).
+
+> [!LEGACY]
+> In Svelte 4, this script tag was created using `<script context="module">`
+
+## `<style>`
+
+CSS inside a `<style>` block will be scoped to that component.
+
+```svelte
+<style>
+ p {
+ /* this will only affect <p> elements in this component */
+ color: burlywood;
+ }
+</style>
+```
+
+For more information, head to the section on [styling](scoped-styles).
diff --git a/documentation/docs/01-introduction/04-svelte-js-files.md b/documentation/docs/01-introduction/04-svelte-js-files.md
new file mode 100644
index 000000000000..0e05484299db
--- /dev/null
+++ b/documentation/docs/01-introduction/04-svelte-js-files.md
@@ -0,0 +1,10 @@
+---
+title: .svelte.js and .svelte.ts files
+---
+
+Besides `.svelte` files, Svelte also operates on `.svelte.js` and `.svelte.ts` files.
+
+These behave like any other `.js` or `.ts` module, except that you can use runes. This is useful for creating reusable reactive logic, or sharing reactive state across your app.
+
+> [!LEGACY]
+> This is a concept that didn't exist prior to Svelte 5
diff --git a/documentation/docs/01-introduction/index.md b/documentation/docs/01-introduction/index.md
new file mode 100644
index 000000000000..8f14f7a7c90b
--- /dev/null
+++ b/documentation/docs/01-introduction/index.md
@@ -0,0 +1,3 @@
+---
+title: Introduction
+---
diff --git a/documentation/docs/01-introduction/xx-props.md b/documentation/docs/01-introduction/xx-props.md
new file mode 100644
index 000000000000..cad854d8785d
--- /dev/null
+++ b/documentation/docs/01-introduction/xx-props.md
@@ -0,0 +1,139 @@
+---
+title: Public API of a component
+---
+
+### Public API of a component
+
+Svelte uses the `$props` rune to declare _properties_ or _props_, which means describing the public interface of the component which becomes accessible to consumers of the component.
+
+> [!NOTE] `$props` is one of several runes, which are special hints for Svelte's compiler to make things reactive.
+
+```svelte
+<script>
+ let { foo, bar, baz } = $props();
+
+ // Values that are passed in as props
+ // are immediately available
+ console.log({ foo, bar, baz });
+</script>
+```
+
+You can specify a fallback value for a prop. It will be used if the component's consumer doesn't specify the prop on the component when instantiating the component, or if the passed value is `undefined` at some point.
+
+```svelte
+<script>
+ let { foo = 'optional default initial value' } = $props();
+</script>
+```
+
+To get all properties, use rest syntax:
+
+```svelte
+<script>
+ let { a, b, c, ...everythingElse } = $props();
+</script>
+```
+
+You can use reserved words as prop names.
+
+```svelte
+<script>
+ // creates a `class` property, even
+ // though it is a reserved word
+ let { class: className } = $props();
+</script>
+```
+
+If you're using TypeScript, you can declare the prop types:
+
+```svelte
+<script lang="ts">
+ interface Props {
+ required: string;
+ optional?: number;
+ [key: string]: unknown;
+ }
+
+ let { required, optional, ...everythingElse }: Props = $props();
+</script>
+```
+
+If you're using JavaScript, you can declare the prop types using JSDoc:
+
+```svelte
+<script>
+ /** @type {{ x: string }} */
+ let { x } = $props();
+
+ // or use @typedef if you want to document the properties:
+
+ /**
+ * @typedef {Object} MyProps
+ * @property {string} y Some documentation
+ */
+
+ /** @type {MyProps} */
+ let { y } = $props();
+</script>
+```
+
+If you export a `const`, `class` or `function`, it is readonly from outside the component.
+
+```svelte
+<script>
+ export const thisIs = 'readonly';
+
+ export function greet(name) {
+ alert(`hello ${name}!`);
+ }
+</script>
+```
+
+Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](bindings#bind:this).
+
+### Reactive variables
+
+To change component state and trigger a re-render, just assign to a locally declared variable that was declared using the `$state` rune.
+
+Update expressions (`count += 1`) and property assignments (`obj.x = y`) have the same effect.
+
+```svelte
+<script>
+ let count = $state(0);
+
+ function handleClick() {
+ // calling this function will trigger an
+ // update if the markup references `count`
+ count = count + 1;
+ }
+</script>
+```
+
+Svelte's `<script>` blocks are run only when the component is created, so assignments within a `<script>` block are not automatically run again when a prop updates.
+
+```svelte
+<script>
+ let { person } = $props();
+ // this will only set `name` on component creation
+ // it will not update when `person` does
+ let { name } = person;
+</script>
+```
+
+If you'd like to react to changes to a prop, use the `$derived` or `$effect` runes instead.
+
+```svelte
+<script>
+ let count = $state(0);
+
+ let double = $derived(count * 2);
+
+ $effect(() => {
+ if (count > 10) {
+ alert('Too high!');
+ }
+ });
+</script>
+```
+
+For more information on reactivity, read the documentation around runes.
diff --git a/documentation/docs/01-introduction/xx-reactivity-fundamentals.md b/documentation/docs/01-introduction/xx-reactivity-fundamentals.md
new file mode 100644
index 000000000000..d5e67ada71c8
--- /dev/null
+++ b/documentation/docs/01-introduction/xx-reactivity-fundamentals.md
@@ -0,0 +1,144 @@
+---
+title: Reactivity fundamentals
+---
+
+Reactivity is at the heart of interactive UIs. When you click a button, you expect some kind of response. It's your job as a developer to make this happen. It's Svelte's job to make your job as intuitive as possible, by providing a good API to express reactive systems.
+
+## Runes
+
+Svelte 5 uses _runes_, a powerful set of primitives for controlling reactivity inside your Svelte components and inside `.svelte.js` and `.svelte.ts` modules.
+
+Runes are function-like symbols that provide instructions to the Svelte compiler. You don't need to import them from anywhere — when you use Svelte, they're part of the language.
+
+The following sections introduce the most important runes for declare state, derived state and side effects at a high level. For more details refer to the later sections on [state](state) and [side effects](side-effects).
+
+## `$state`
+
+Reactive state is declared with the `$state` rune:
+
+```svelte
+<script>
+ let count = $state(0);
+</script>
+
+<button onclick={() => count++}>
+ clicks: {count}
+</button>
+```
+
+You can also use `$state` in class fields (whether public or private):
+
+```js
+// @errors: 7006 2554
+class Todo {
+ done = $state(false);
+ text = $state();
+
+ constructor(text) {
+ this.text = text;
+ }
+}
+```
+
+> [!LEGACY]
+> In Svelte 4, state was implicitly reactive if the variable was declared at the top level
+>
+> ```svelte
+> <script>
+> let count = 0;
+> </script>
+>
+> <button on:click={() => count++}>
+> clicks: {count}
+> </button>
+> ```
+
+## `$derived`
+
+Derived state is declared with the `$derived` rune:
+
+```svelte
+<script>
+ let count = $state(0);
+ let doubled = $derived(count * 2);
+</script>
+
+<button onclick={() => count++}>
+ {doubled}
+</button>
+
+<p>{count} doubled is {doubled}</p>
+```
+
+The expression inside `$derived(...)` should be free of side-effects. Svelte will disallow state changes (e.g. `count++`) inside derived expressions.
+
+As with `$state`, you can mark class fields as `$derived`.
+
+> [!LEGACY]
+> In Svelte 4, you could use reactive statements for this.
+>
+> ```svelte
+> <script>
+> let count = 0;
+> $: doubled = count * 2;
+> </script>
+>
+> <button on:click={() => count++}>
+> {doubled}
+> </button>
+>
+> <p>{count} doubled is {doubled}</p>
+> ```
+>
+> This only worked at the top level of a component.
+
+## `$effect`
+
+To run _side-effects_ when the component is mounted to the DOM, and when values change, we can use the `$effect` rune ([demo](/playground/untitled#H4sIAAAAAAAAE31T24rbMBD9lUG7kAQ2sbdlX7xOYNk_aB_rQhRpbAsU2UiTW0P-vbrYubSlYGzmzMzROTPymdVKo2PFjzMzfIusYB99z14YnfoQuD1qQh-7bmdFQEonrOppVZmKNBI49QthCc-OOOH0LZ-9jxnR6c7eUpOnuv6KeT5JFdcqbvbcBcgDz1jXKGg6ncFyBedYR6IzLrAZwiN5vtSxaJA-EzadfJEjKw11C6GR22-BLH8B_wxdByWpvUYtqqal2XB6RVkG1CoHB6U1WJzbnYFDiwb3aGEdDa3Bm1oH12sQLTcNPp7r56m_00mHocSG97_zd7ICUXonA5fwKbPbkE2ZtMJGGVkEdctzQi4QzSwr9prnFYNk5hpmqVuqPQjNnfOJoMF22lUsrq_UfIN6lfSVyvQ7grB3X2mjMZYO3XO9w-U5iLx42qg29md3BP_ni5P4gy9ikTBlHxjLzAtPDlyYZmRdjAbGq7HprEQ7p64v4LU_guu0kvAkhBim3nMplWl8FreQD-CW20aZR0wq12t-KqDWeBywhvexKC3memmDwlHAv9q4Vo2ZK8KtK0CgX7u9J8wXbzdKv-nRnfF_2baTqlYoWUF2h5efl9-n0O6koAMAAA==)):
+
+```svelte
+<script>
+ let size = $state(50);
+ let color = $state('#ff3e00');
+
+ let canvas;
+
+ $effect(() => {
+ const context = canvas.getContext('2d');
+ context.clearRect(0, 0, canvas.width, canvas.height);
+
+ // this will re-run whenever `color` or `size` change
+ context.fillStyle = color;
+ context.fillRect(0, 0, size, size);
+ });
+</script>
+
+<canvas bind:this={canvas} width="100" height="100" />
+```
+
+The function passed to `$effect` will run when the component mounts, and will re-run after any changes to the values it reads that were declared with `$state` or `$derived` (including those passed in with `$props`). Re-runs are batched (i.e. changing `color` and `size` in the same moment won't cause two separate runs), and happen after any DOM updates have been applied.
+
+> [!LEGACY]
+> In Svelte 4, you could use reactive statements for this.
+>
+> ```svelte
+> <script>
+> let size = 50;
+> let color = '#ff3e00';
+>
+> let canvas;
+>
+> $: {
+> const context = canvas.getContext('2d');
+> context.clearRect(0, 0, canvas.width, canvas.height);
+>
+> // this will re-run whenever `color` or `size` change
+> context.fillStyle = color;
+> context.fillRect(0, 0, size, size);
+> }
+> </script>
+>
+> <canvas bind:this={canvas} width="100" height="100" />
+> ```
+>
+> This only worked at the top level of a component.
diff --git a/documentation/docs/02-runes/01-what-are-runes.md b/documentation/docs/02-runes/01-what-are-runes.md
new file mode 100644
index 000000000000..59c371eb4909
--- /dev/null
+++ b/documentation/docs/02-runes/01-what-are-runes.md
@@ -0,0 +1,24 @@
+---
+title: What are runes?
+---
+
+> [!NOTE] **rune** /ruːn/ _noun_
+>
+> A letter or mark used as a mystical or magic symbol.
+
+Runes are symbols that you use in `.svelte` and `.svelte.js`/`.svelte.ts` files to control the Svelte compiler. If you think of Svelte as a language, runes are part of the syntax — they are _keywords_.
+
+Runes have a `$` prefix and look like functions:
+
+```js
+let message = $state('hello');
+```
+
+They differ from normal JavaScript functions in important ways, however:
+
+- You don't need to import them — they are part of the language
+- They're not values — you can't assign them to a variable or pass them as arguments to a function
+- Just like JavaScript keywords, they are only valid in certain positions (the compiler will help you if you put them in the wrong place)
+
+> [!LEGACY]
+> Runes didn't exist prior to Svelte 5.
diff --git a/documentation/docs/02-runes/02-$state.md b/documentation/docs/02-runes/02-$state.md
new file mode 100644
index 000000000000..49e17cd08ff3
--- /dev/null
+++ b/documentation/docs/02-runes/02-$state.md
@@ -0,0 +1,252 @@
+---
+title: $state
+---
+
+The `$state` rune allows you to create _reactive state_, which means that your UI _reacts_ when it changes.
+
+```svelte
+<script>
+ let count = $state(0);
+</script>
+
+<button onclick={() => count++}>
+ clicks: {count}
+</button>
+```
+
+Unlike other frameworks you may have encountered, there is no API for interacting with state — `count` is just a number, rather than an object or a function, and you can update it like you would update any other variable.
+
+### Deep state
+
+If `$state` is used with an array or a simple object, the result is a deeply reactive _state proxy_. [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) allow Svelte to run code when you read or write properties, including via methods like `array.push(...)`, triggering granular updates.
+
+> [!NOTE] Classes like `Set` and `Map` will not be proxied, but Svelte provides reactive implementations for various built-ins like these that can be imported from [`svelte/reactivity`](./svelte-reactivity).
+
+State is proxified recursively until Svelte finds something other than an array or simple object. In a case like this...
+
+```js
+let todos = $state([
+ {
+ done: false,
+ text: 'add more todos'
+ }
+]);
+```
+
+...modifying an individual todo's property will trigger updates to anything in your UI that depends on that specific property:
+
+```js
+let todos = [{ done: false, text: 'add more todos' }];
+// ---cut---
+todos[0].done = !todos[0].done;
+```
+
+If you push a new object to the array, it will also be proxified:
+
+```js
+let todos = [{ done: false, text: 'add more todos' }];
+// ---cut---
+todos.push({
+ done: false,
+ text: 'eat lunch'
+});
+```
+
+> [!NOTE] When you update properties of proxies, the original object is _not_ mutated.
+
+Note that if you destructure a reactive value, the references are not reactive — as in normal JavaScript, they are evaluated at the point of destructuring:
+
+```js
+let todos = [{ done: false, text: 'add more todos' }];
+// ---cut---
+let { done, text } = todos[0];
+
+// this will not affect the value of `done`
+todos[0].done = !todos[0].done;
+```
+
+### Classes
+
+You can also use `$state` in class fields (whether public or private):
+
+```js
+// @errors: 7006 2554
+class Todo {
+ done = $state(false);
+ text = $state();
+
+ constructor(text) {
+ this.text = text;
+ }
+
+ reset() {
+ this.text = '';
+ this.done = false;
+ }
+}
+```
+
+> [!NOTE] The compiler transforms `done` and `text` into `get`/`set` methods on the class prototype referencing private fields. This means the properties are not enumerable.
+
+When calling methods in JavaScript, the value of [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) matters. This won't work, because `this` inside the `reset` method will be the `<button>` rather than the `Todo`:
+
+```svelte
+<button onclick={todo.reset}>
+ reset
+</button>
+```
+
+You can either use an inline function...
+
+```svelte
+<button onclick=+++{() => todo.reset()}>+++
+ reset
+</button>
+```
+
+...or use an arrow function in the class definition:
+
+```js
+// @errors: 7006 2554
+class Todo {
+ done = $state(false);
+ text = $state();
+
+ constructor(text) {
+ this.text = text;
+ }
+
+ +++reset = () => {+++
+ this.text = '';
+ this.done = false;
+ }
+}
+```
+
+## `$state.raw`
+
+In cases where you don't want objects and arrays to be deeply reactive you can use `$state.raw`.
+
+State declared with `$state.raw` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:
+
+```js
+let person = $state.raw({
+ name: 'Heraclitus',
+ age: 49
+});
+
+// this will have no effect
+person.age += 1;
+
+// this will work, because we're creating a new person
+person = {
+ name: 'Heraclitus',
+ age: 50
+};
+```
+
+This can improve performance with large arrays and objects that you weren't planning to mutate anyway, since it avoids the cost of making them reactive. Note that raw state can _contain_ reactive state (for example, a raw array of reactive objects).
+
+## `$state.snapshot`
+
+To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
+
+```svelte
+<script>
+ let counter = $state({ count: 0 });
+
+ function onclick() {
+ // Will log `{ count: ... }` rather than `Proxy { ... }`
+ console.log($state.snapshot(counter));
+ }
+</script>
+```
+
+This is handy when you want to pass some state to an external library or API that doesn't expect a proxy, such as `structuredClone`.
+
+## Passing state into functions
+
+JavaScript is a _pass-by-value_ language — when you call a function, the arguments are the _values_ rather than the _variables_. In other words:
+
+```js
+/// file: index.js
+// @filename: index.js
+// ---cut---
+/**
+ * @param {number} a
+ * @param {number} b
+ */
+function add(a, b) {
+ return a + b;
+}
+
+let a = 1;
+let b = 2;
+let total = add(a, b);
+console.log(total); // 3
+
+a = 3;
+b = 4;
+console.log(total); // still 3!
+```
+
+If `add` wanted to have access to the _current_ values of `a` and `b`, and to return the current `total` value, you would need to use functions instead:
+
+```js
+/// file: index.js
+// @filename: index.js
+// ---cut---
+/**
+ * @param {() => number} getA
+ * @param {() => number} getB
+ */
+function add(+++getA, getB+++) {
+ return +++() => getA() + getB()+++;
+}
+
+let a = 1;
+let b = 2;
+let total = add+++(() => a, () => b)+++;
+console.log(+++total()+++); // 3
+
+a = 3;
+b = 4;
+console.log(+++total()+++); // 7
+```
+
+State in Svelte is no different — when you reference something declared with the `$state` rune...
+
+```js
+let a = +++$state(1)+++;
+let b = +++$state(2)+++;
+```
+
+...you're accessing its _current value_.
+
+Note that 'functions' is broad — it encompasses properties of proxies and [`get`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get)/[`set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set) properties...
+
+```js
+/// file: index.js
+// @filename: index.js
+// ---cut---
+/**
+ * @param {{ a: number, b: number }} input
+ */
+function add(input) {
+ return {
+ get value() {
+ return input.a + input.b;
+ }
+ };
+}
+
+let input = $state({ a: 1, b: 2 });
+let total = add(input);
+console.log(total.value); // 3
+
+input.a = 3;
+input.b = 4;
+console.log(total.value); // 7
+```
+
+...though if you find yourself writing code like that, consider using [classes](#Classes) instead.
diff --git a/documentation/docs/02-runes/03-$derived.md b/documentation/docs/02-runes/03-$derived.md
new file mode 100644
index 000000000000..2464aa929550
--- /dev/null
+++ b/documentation/docs/02-runes/03-$derived.md
@@ -0,0 +1,112 @@
+---
+title: $derived
+---
+
+Derived state is declared with the `$derived` rune:
+
+```svelte
+<script>
+ let count = $state(0);
+ let doubled = $derived(count * 2);
+</script>
+
+<button onclick={() => count++}>
+ {doubled}
+</button>
+
+<p>{count} doubled is {doubled}</p>
+```
+
+The expression inside `$derived(...)` should be free of side-effects. Svelte will disallow state changes (e.g. `count++`) inside derived expressions.
+
+As with `$state`, you can mark class fields as `$derived`.
+
+> [!NOTE] Code in Svelte components is only executed once at creation. Without the `$derived` rune, `doubled` would maintain its original value even when `count` changes.
+
+## `$derived.by`
+
+Sometimes you need to create complex derivations that don't fit inside a short expression. In these cases, you can use `$derived.by` which accepts a function as its argument.
+
+```svelte
+<script>
+ let numbers = $state([1, 2, 3]);
+ let total = $derived.by(() => {
+ let total = 0;
+ for (const n of numbers) {
+ total += n;
+ }
+ return total;
+ });
+</script>
+
+<button onclick={() => numbers.push(numbers.length + 1)}>
+ {numbers.join(' + ')} = {total}
+</button>
+```
+
+In essence, `$derived(expression)` is equivalent to `$derived.by(() => expression)`.
+
+## Understanding dependencies
+
+Anything read synchronously inside the `$derived` expression (or `$derived.by` function body) is considered a _dependency_ of the derived state. When the state changes, the derived will be marked as _dirty_ and recalculated when it is next read.
+
+To exempt a piece of state from being treated as a dependency, use [`untrack`](svelte#untrack).
+
+## Overriding derived values
+
+Derived expressions are recalculated when their dependencies change, but you can temporarily override their values by reassigning them (unless they are declared with `const`). This can be useful for things like _optimistic UI_, where a value is derived from the 'source of truth' (such as data from your server) but you'd like to show immediate feedback to the user:
+
+```svelte
+<script>
+ let { post, like } = $props();
+
+ let likes = $derived(post.likes);
+
+ async function onclick() {
+ // increment the `likes` count immediately...
+ likes += 1;
+
+ // and tell the server, which will eventually update `post`
+ try {
+ await like();
+ } catch {
+ // failed! roll back the change
+ likes -= 1;
+ }
+ }
+</script>
+
+<button {onclick}>🧡 {likes}</button>
+```
+
+> [!NOTE] Prior to Svelte 5.25, deriveds were read-only.
+
+## Deriveds and reactivity
+
+Unlike `$state`, which converts objects and arrays to [deeply reactive proxies]($state#Deep-state), `$derived` values are left as-is. For example, [in a case like this](/playground/untitled#H4sIAAAAAAAAE4VU22rjMBD9lUHd3aaQi9PdstS1A3t5XvpQ2Ic4D7I1iUUV2UjjNMX431eS7TRdSosxgjMzZ45mjt0yzffIYibvy0ojFJWqDKCQVBk2ZVup0LJ43TJ6rn2aBxw-FP2o67k9oCKP5dziW3hRaUJNjoYltjCyplWmM1JIIAn3FlL4ZIkTTtYez6jtj4w8WwyXv9GiIXiQxLVs9pfTMR7EuoSLIuLFbX7Z4930bZo_nBrD1bs834tlfvsBz9_SyX6PZXu9XaL4gOWn4sXjeyzftv4ZWfyxubpzxzg6LfD4MrooxELEosKCUPigQCMPKCZh0OtQE1iSxcsmdHuBvCiHZXALLXiN08EL3RRkaJ_kDVGle0HcSD5TPEeVtj67O4Nrg9aiSNtBY5oODJkrL5QsHtN2cgXp6nSJMWzpWWGasdlsGEMbzi5jPr5KFr0Ep7pdeM2-TCelCddIhDxAobi1jqF3cMaC1RKp64bAW9iFAmXGIHfd4wNXDabtOLN53w8W53VvJoZLh7xk4Rr3CoL-UNoLhWHrT1JQGcM17u96oES5K-kc2XOzkzqGCKL5De79OUTyyrg1zgwXsrEx3ESfx4Bz0M5UjVMHB24mw9SuXtXFoN13fYKOM1tyUT3FbvbWmSWCZX2Er-41u5xPoml45svRahl9Wb9aasbINJixDZwcPTbyTLZSUsAvrg_cPuCR7s782_WU8343Y72Qtlb8OYatwuOQvuN13M_hJKNfxann1v1U_B1KZ_D_mzhzhz24fw85CSz2irtN9w9HshBK7AQAAA==)...
+
+```svelte
+let items = $state([...]);
+
+let index = $state(0);
+let selected = $derived(items[index]);
+```
+
+...you can change (or `bind:` to) properties of `selected` and it will affect the underlying `items` array. If `items` was _not_ deeply reactive, mutating `selected` would have no effect.
+
+## Update propagation
+
+Svelte uses something called _push-pull reactivity_ — when state is updated, everything that depends on the state (whether directly or indirectly) is immediately notified of the change (the 'push'), but derived values are not re-evaluated until they are actually read (the 'pull').
+
+If the new value of a derived is referentially identical to its previous value, downstream updates will be skipped. In other words, Svelte will only update the text inside the button when `large` changes, not when `count` changes, even though `large` depends on `count`:
+
+```svelte
+<script>
+ let count = $state(0);
+ let large = $derived(count > 10);
+</script>
+
+<button onclick={() => count++}>
+ {large}
+</button>
+```
diff --git a/documentation/docs/02-runes/04-$effect.md b/documentation/docs/02-runes/04-$effect.md
new file mode 100644
index 000000000000..ae1a2146c9d4
--- /dev/null
+++ b/documentation/docs/02-runes/04-$effect.md
@@ -0,0 +1,317 @@
+---
+title: $effect
+---
+
+Effects are functions that run when state updates, and can be used for things like calling third-party libraries, drawing on `<canvas>` elements, or making network requests. They only run in the browser, not during server-side rendering.
+
+Generally speaking, you should _not_ update state inside effects, as it will make code more convoluted and will often lead to never-ending update cycles. If you find yourself doing so, see [when not to use `$effect`](#When-not-to-use-$effect) to learn about alternative approaches.
+
+You can create an effect with the `$effect` rune ([demo](/playground/untitled#H4sIAAAAAAAAE31S246bMBD9lZF3pSRSAqTVvrCAVPUP2sdSKY4ZwJJjkD0hSVH-vbINuWxXfQH5zMyZc2ZmZLVUaFn6a2R06ZGlHmBrpvnBvb71fWQHVOSwPbf4GS46TajJspRlVhjZU1HqkhQSWPkHIYdXS5xw-Zas3ueI6FRn7qHFS11_xSRZhIxbFtcDtw7SJb1iXaOg5XIFeQGjzyPRaevYNOGZIJ8qogbpe8CWiy_VzEpTXiQUcvPDkSVrSNZz1UlW1N5eLcqmpdXUvaQ4BmqlhZNUCgxuzFHDqUWNAxrYeUM76AzsnOsdiJbrBp_71lKpn3RRbii-4P3f-IMsRxS-wcDV_bL4PmSdBa2wl7pKnbp8DMgVvJm8ZNskKRkEM_OzyOKQFkgqOYBQ3Nq89Ns0nbIl81vMFN-jKoLMTOr-SOBOJS-Z8f5Y6D1wdcR8dFqvEBdetK-PHwj-z-cH8oHPY54wRJ8Ys7iSQ3Bg3VA9azQbmC9k35kKzYa6PoVtfwbbKVnBixBiGn7Pq0rqJoUtHiCZwAM3jdTPWCVtr_glhVrhecIa3vuksJ_b7TqFs4DPyriSjd5IwoNNQaAmNI-ESfR2p8zimzvN1swdCkvJHPH6-_oX8o1SgcIDAAA=)):
+
+```svelte
+<script>
+ let size = $state(50);
+ let color = $state('#ff3e00');
+
+ let canvas;
+
+ $effect(() => {
+ const context = canvas.getContext('2d');
+ context.clearRect(0, 0, canvas.width, canvas.height);
+
+ // this will re-run whenever `color` or `size` change
+ context.fillStyle = color;
+ context.fillRect(0, 0, size, size);
+ });
+</script>
+
+<canvas bind:this={canvas} width="100" height="100" />
+```
+
+When Svelte runs an effect function, it tracks which pieces of state (and derived state) are accessed (unless accessed inside [`untrack`](svelte#untrack)), and re-runs the function when that state later changes.
+
+> [!NOTE] If you're having difficulty understanding why your `$effect` is rerunning or is not running see [understanding dependencies](#Understanding-dependencies). Effects are triggered differently than the `$:` blocks you may be used to if coming from Svelte 4.
+
+### Understanding lifecycle
+
+Your effects run after the component has been mounted to the DOM, and in a [microtask](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) after state changes. Re-runs are batched (i.e. changing `color` and `size` in the same moment won't cause two separate runs), and happen after any DOM updates have been applied.
+
+You can use `$effect` anywhere, not just at the top level of a component, as long as it is called while a parent effect is running.
+
+> [!NOTE] Svelte uses effects internally to represent logic and expressions in your template — this is how `<h1>hello {name}!</h1>` updates when `name` changes.
+
+An effect can return a _teardown function_ which will run immediately before the effect re-runs ([demo](/playground/untitled#H4sIAAAAAAAAE42SQVODMBCF_8pOxkPRKq3HCsx49K4n64xpskjGkDDJ0tph-O8uINo6HjxB3u7HvrehE07WKDbiyZEhi1osRWksRrF57gQdm6E2CKx_dd43zU3co6VB28mIf-nKO0JH_BmRRRVMQ8XWbXkAgfKtI8jhIpIkXKySu7lSG2tNRGZ1_GlYr1ZTD3ddYFmiosUigbyAbpC2lKbwWJkIB8ZhhxBQBWRSw6FCh3sM8GrYTthL-wqqku4N44TyqEgwF3lmRHr4Op0PGXoH31c5rO8mqV-eOZ49bikgtcHBL55tmhIkEMqg_cFB2TpFxjtg703we6NRL8HQFCS07oSUCZi6Rm04lz1yytIHBKoQpo1w6Gsm4gmyS8b8Y5PydeMdX8gwS2Ok4I-ov5NZtvQde95GMsccn_1wzNKfu3RZtS66cSl9lvL7qO1aIk7knbJGvefdtIOzi73M4bYvovUHDFk6AcX_0HRESxnpBOW_jfCDxIZCi_1L_wm4xGQ60wIAAA==)).
+
+```svelte
+<script>
+ let count = $state(0);
+ let milliseconds = $state(1000);
+
+ $effect(() => {
+ // This will be recreated whenever `milliseconds` changes
+ const interval = setInterval(() => {
+ count += 1;
+ }, milliseconds);
+
+ return () => {
+ // if a teardown function is provided, it will run
+ // a) immediately before the effect re-runs
+ // b) when the component is destroyed
+ clearInterval(interval);
+ };
+ });
+</script>
+
+<h1>{count}</h1>
+
+<button onclick={() => (milliseconds *= 2)}>slower</button>
+<button onclick={() => (milliseconds /= 2)}>faster</button>
+```
+
+Teardown functions also run when the effect is destroyed, which happens when its parent is destroyed (for example, a component is unmounted) or the parent effect re-runs.
+
+### Understanding dependencies
+
+`$effect` automatically picks up any reactive values (`$state`, `$derived`, `$props`) that are _synchronously_ read inside its function body (including indirectly, via function calls) and registers them as dependencies. When those dependencies change, the `$effect` schedules a re-run.
+
+If `$state` and `$derived` are used directly inside the `$effect` (for example, during creation of a [reactive class](https://svelte.dev/docs/svelte/$state#Classes)), those values will _not_ be treated as dependencies.
+
+Values that are read _asynchronously_ — after an `await` or inside a `setTimeout`, for example — will not be tracked. Here, the canvas will be repainted when `color` changes, but not when `size` changes ([demo](/playground/untitled#H4sIAAAAAAAAE31T246bMBD9lZF3pWSlBEirfaEQqdo_2PatVIpjBrDkGGQPJGnEv1e2IZfVal-wfHzmzJyZ4cIqqdCy9M-F0blDlnqArZjmB3f72XWRHVCRw_bc4me4aDWhJstSlllhZEfbQhekkMDKfwg5PFvihMvX5OXH_CJa1Zrb0-Kpqr5jkiwC48rieuDWQbqgZ6wqFLRcvkC-hYvnkWi1dWqa8ESQTxFRjfQWsOXiWzmr0sSLhEJu3p1YsoJkNUcdZUnN9dagrBu6FVRQHAM10sJRKgUG16bXcGxQ44AGdt7SDkTDdY02iqLHnJVU6hedlWuIp94JW6Tf8oBt_8GdTxlF0b4n0C35ZLBzXb3mmYn3ae6cOW74zj0YVzDNYXRHFt9mprNgHfZSl6mzml8CMoLvTV6wTZIUDEJv5us2iwMtiJRyAKG4tXnhl8O0yhbML0Wm-B7VNlSSSd31BG7z8oIZZ6dgIffAVY_5xdU9Qrz1Bnx8fCfwtZ7v8Qc9j3nB8PqgmMWlHIID6-bkVaPZwDySfWtKNGtquxQ23Qlsq2QJT0KIqb8dL0up6xQ2eIBkAg_c1FI_YqW0neLnFCqFpwmreedJYT7XX8FVOBfwWRhXstZrSXiwKQjUhOZeMIleb5JZfHWn2Yq5pWEpmR7Hv-N_wEqT8hEEAAA=)):
+
+```ts
+// @filename: index.ts
+declare let canvas: {
+ width: number;
+ height: number;
+ getContext(type: '2d', options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D;
+};
+declare let color: string;
+declare let size: number;
+
+// ---cut---
+$effect(() => {
+ const context = canvas.getContext('2d');
+ context.clearRect(0, 0, canvas.width, canvas.height);
+
+ // this will re-run whenever `color` changes...
+ context.fillStyle = color;
+
+ setTimeout(() => {
+ // ...but not when `size` changes
+ context.fillRect(0, 0, size, size);
+ }, 0);
+});
+```
+
+An effect only reruns when the object it reads changes, not when a property inside it changes. (If you want to observe changes _inside_ an object at dev time, you can use [`$inspect`]($inspect).)
+
+```svelte
+<script>
+ let state = $state({ value: 0 });
+ let derived = $derived({ value: state.value * 2 });
+
+ // this will run once, because `state` is never reassigned (only mutated)
+ $effect(() => {
+ state;
+ });
+
+ // this will run whenever `state.value` changes...
+ $effect(() => {
+ state.value;
+ });
+
+ // ...and so will this, because `derived` is a new object each time
+ $effect(() => {
+ derived;
+ });
+</script>
+
+<button onclick={() => (state.value += 1)}>
+ {state.value}
+</button>
+
+<p>{state.value} doubled is {derived.value}</p>
+```
+
+An effect only depends on the values that it read the last time it ran. This has interesting implications for effects that have conditional code.
+
+For instance, if `a` is `true` in the code snippet below, the code inside the `if` block will run and `b` will be evaluated. As such, changes to either `a` or `b` [will cause the effect to re-run](/playground/untitled#H4sIAAAAAAAAE3VQzWrDMAx-FdUU4kBp71li6EPstOxge0ox8-QQK2PD-N1nLy2F0Z2Evj9_chKkP1B04pnYscc3cRCT8xhF95IEf8-Vq0DBr8rzPB_jJ3qumNERH-E2ECNxiRF9tIubWY00lgcYNAywj6wZJS8rtk83wjwgCrXHaULLUrYwKEgVGrnkx-Dx6MNFNstK5OjSbFGbwE0gdXuT_zGYrjmAuco515Hr1p_uXak3K3MgCGS9s-9D2grU-judlQYXIencnzad-tdR79qZrMyvw9wd5Z8Yv1h09dz8mn8AkM7Pfo0BAAA=).
+
+Conversely, if `a` is `false`, `b` will not be evaluated, and the effect will _only_ re-run when `a` changes.
+
+```ts
+let a = false;
+let b = false;
+// ---cut---
+$effect(() => {
+ console.log('running');
+
+ if (a) {
+ console.log('b:', b);
+ }
+});
+```
+
+## `$effect.pre`
+
+In rare cases, you may need to run code _before_ the DOM updates. For this we can use the `$effect.pre` rune:
+
+```svelte
+<script>
+ import { tick } from 'svelte';
+
+ let div = $state();
+ let messages = $state([]);
+
+ // ...
+
+ $effect.pre(() => {
+ if (!div) return; // not yet mounted
+
+ // reference `messages` array length so that this code re-runs whenever it changes
+ messages.length;
+
+ // autoscroll when new messages are added
+ if (div.offsetHeight + div.scrollTop > div.scrollHeight - 20) {
+ tick().then(() => {
+ div.scrollTo(0, div.scrollHeight);
+ });
+ }
+ });
+</script>
+
+<div bind:this={div}>
+ {#each messages as message}
+ <p>{message}</p>
+ {/each}
+</div>
+```
+
+Apart from the timing, `$effect.pre` works exactly like `$effect`.
+
+## `$effect.tracking`
+
+The `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template ([demo](/playground/untitled#H4sIAAAAAAAACn3PwYrCMBDG8VeZDYIt2PYeY8Dn2HrIhqkU08nQjItS-u6buAt7UDzmz8ePyaKGMWBS-nNRcmdU-hHUTpGbyuvI3KZvDFLal0v4qvtIgiSZUSb5eWSxPfWSc4oB2xDP1XYk8HHiSHkICeXKeruDDQ4Demlldv4y0rmq6z10HQwuJMxGVv4mVVXDwcJS0jP9u3knynwtoKz1vifT_Z9Jhm0WBCcOTlDD8kyspmML5qNpHg40jc3fFryJ0iWsp_UHgz3180oBAAA=)):
+
+```svelte
+<script>
+ console.log('in component setup:', $effect.tracking()); // false
+
+ $effect(() => {
+ console.log('in effect:', $effect.tracking()); // true
+ });
+</script>
+
+<p>in template: {$effect.tracking()}</p> <!-- true -->
+```
+
+It is used to implement abstractions like [`createSubscriber`](/docs/svelte/svelte-reactivity#createSubscriber), which will create listeners to update reactive values but _only_ if those values are being tracked (rather than, for example, read inside an event handler).
+
+## `$effect.root`
+
+The `$effect.root` rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for nested effects that you want to manually control. This rune also allows for the creation of effects outside of the component initialisation phase.
+
+```svelte
+<script>
+ let count = $state(0);
+
+ const cleanup = $effect.root(() => {
+ $effect(() => {
+ console.log(count);
+ });
+
+ return () => {
+ console.log('effect root cleanup');
+ };
+ });
+</script>
+```
+
+## When not to use `$effect`
+
+In general, `$effect` is best considered something of an escape hatch — useful for things like analytics and direct DOM manipulation — rather than a tool you should use frequently. In particular, avoid using it to synchronise state. Instead of this...
+
+```svelte
+<script>
+ let count = $state(0);
+ let doubled = $state();
+
+ // don't do this!
+ $effect(() => {
+ doubled = count * 2;
+ });
+</script>
+```
+
+...do this:
+
+```svelte
+<script>
+ let count = $state(0);
+ let doubled = $derived(count * 2);
+</script>
+```
+
+> [!NOTE] For things that are more complicated than a simple expression like `count * 2`, you can also use `$derived.by`.
+
+If you're using an effect because you want to be able to reassign the derived value (to build an optimistic UI, for example) note that [deriveds can be directly overridden]($derived#Overriding-derived-values) as of Svelte 5.25.
+
+You might be tempted to do something convoluted with effects to link one value to another. The following example shows two inputs for "money spent" and "money left" that are connected to each other. If you update one, the other should update accordingly. Don't use effects for this ([demo](/playground/untitled#H4sIAAAAAAAACpVRy26DMBD8FcvKgUhtoIdeHBwp31F6MGSJkBbHwksEQvx77aWQqooq9bgzOzP7mGTdIHipPiZJowOpGJAv0po2VmfnDv4OSBErjYdneHWzBJaCjcx91TWOToUtCIEE3cig0OIty44r5l1oDtjOkyFIsv3GINQ_CNYyGegd1DVUlCR7oU9iilDUcP8S8roYs9n8p2wdYNVFm4csTx872BxNCcjr5I11fdgonEkXsjP2CoUUZWMv6m6wBz2x7yxaM-iJvWeRsvSbSVeUy5i0uf8vKA78NIeJLSZWv1I8jQjLdyK4XuTSeIdmVKJGGI4LdjVOiezwDu1yG74My8PLCQaSiroe5s_5C2PHrkVGAgAA)):
+
+```svelte
+<script>
+ let total = 100;
+ let spent = $state(0);
+ let left = $state(total);
+
+ $effect(() => {
+ left = total - spent;
+ });
+
+ $effect(() => {
+ spent = total - left;
+ });
+</script>
+
+<label>
+ <input type="range" bind:value={spent} max={total} />
+ {spent}/{total} spent
+</label>
+
+<label>
+ <input type="range" bind:value={left} max={total} />
+ {left}/{total} left
+</label>
+```
+
+Instead, use `oninput` callbacks or — better still — [function bindings](bind#Function-bindings) where possible ([demo](/playground/untitled#H4sIAAAAAAAAE51SsW6DMBT8FcvqABINdOhCIFKXTt06lg4GHpElYyz8iECIf69tcIIipo6-u3f3fPZMJWuBpvRzkBXyTpKSy5rLq6YRbbgATdOfmeKkrMgCBt9GPpQ66RsItFjJNBzhVScRJBobmumq5wovhSxQABLskAmSk7ckOXtMKyM22ItGhhAk4Z0R0OwIN-tIQzd-90HVhvy2HsGNiQFCMltBgd7XoecV2xzXNV7XaEcth7ZfRv7kujnsTX2Qd7USb5rFjwZkJlgJwpWRcakG04cpOS9oz-QVCuoeInXW-RyEJL-sG0b7Wy6kZWM-u7CFxM5tdrIl9qg72vB74H-y7T2iXROHyVb0CLanp1yNk4D1A1jQ91hzrQSbUtIIGLcir0ylJDm9Q7urz42bX4UwIk2xH2D5Xf4A7SeMcMQCAAA=)):
+
+```svelte
+<script>
+ let total = 100;
+ let spent = $state(0);
+ let left = $state(total);
+
+ function updateSpent(value) {
+ spent = value;
+ left = total - spent;
+ }
+
+ function updateLeft(value) {
+ left = value;
+ spent = total - left;
+ }
+</script>
+
+<label>
+ <input type="range" bind:value={() => spent, updateSpent} max={total} />
+ {spent}/{total} spent
+</label>
+
+<label>
+ <input type="range" bind:value={() => left, updateLeft} max={total} />
+ {left}/{total} left
+</label>
+```
+
+If you absolutely have to update `$state` within an effect and run into an infinite loop because you read and write to the same `$state`, use [untrack](svelte#untrack).
diff --git a/documentation/docs/02-runes/05-$props.md b/documentation/docs/02-runes/05-$props.md
new file mode 100644
index 000000000000..f300fb239d77
--- /dev/null
+++ b/documentation/docs/02-runes/05-$props.md
@@ -0,0 +1,222 @@
+---
+title: $props
+---
+
+The inputs to a component are referred to as _props_, which is short for _properties_. You pass props to components just like you pass attributes to elements:
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+ import MyComponent from './MyComponent.svelte';
+</script>
+
+<MyComponent adjective="cool" />
+```
+
+On the other side, inside `MyComponent.svelte`, we can receive props with the `$props` rune...
+
+```svelte
+<!--- file: MyComponent.svelte --->
+<script>
+ let props = $props();
+</script>
+
+<p>this component is {props.adjective}</p>
+```
+
+...though more commonly, you'll [_destructure_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) your props:
+
+```svelte
+<!--- file: MyComponent.svelte --->
+<script>
+ let +++{ adjective }+++ = $props();
+</script>
+
+<p>this component is {+++adjective+++}</p>
+```
+
+## Fallback values
+
+Destructuring allows us to declare fallback values, which are used if the parent component does not set a given prop:
+
+```js
+let { adjective = 'happy' } = $props();
+```
+
+> [!NOTE] Fallback values are not turned into reactive state proxies (see [Updating props](#Updating-props) for more info)
+
+## Renaming props
+
+We can also use the destructuring assignment to rename props, which is necessary if they're invalid identifiers, or a JavaScript keyword like `super`:
+
+```js
+let { super: trouper = 'lights are gonna find me' } = $props();
+```
+
+## Rest props
+
+Finally, we can use a _rest property_ to get, well, the rest of the props:
+
+```js
+let { a, b, c, ...others } = $props();
+```
+
+## Updating props
+
+References to a prop inside a component update when the prop itself updates — when `count` changes in `App.svelte`, it will also change inside `Child.svelte`. But the child component is able to temporarily override the prop value, which can be useful for unsaved ephemeral state ([demo](/playground/untitled#H4sIAAAAAAAAE6WQ0WrDMAxFf0WIQR0Wmu3VTQJln7HsIfVcZubIxlbGRvC_DzuBraN92qPula50tODZWB1RPi_IX16jLALWSOOUq6P3-_ihLWftNEZ9TVeOWBNHlNhGFYznfqCBzeRdYHh6M_YVzsFNsNs3pdpGd4eBcqPVDMrNxNDBXeSRtXioDgO1zU8ataeZ2RE4Utao924RFXQ9iHXwvoPHKpW1xY4g_Bg0cSVhKS0p560Za95612ZC02ONrD8ZJYdZp_rGQ37ff_mSP86Np2TWZaNNmdcH56P4P67K66_SXoK9pG-5dF5Z9QEAAA==)):
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+ import Child from './Child.svelte';
+
+ let count = $state(0);
+</script>
+
+<button onclick={() => (count += 1)}>
+ clicks (parent): {count}
+</button>
+
+<Child {count} />
+```
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+ let { count } = $props();
+</script>
+
+<button onclick={() => (count += 1)}>
+ clicks (child): {count}
+</button>
+```
+
+While you can temporarily _reassign_ props, you should not _mutate_ props unless they are [bindable]($bindable).
+
+If the prop is a regular object, the mutation will have no effect ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwU7DMBBEf2W1QmorQgJXk0RC3PkBwiExG9WQrC17U4Es_ztKUkQp9OjxzM7bjcjtSKjwyfKNp1aLORA4b13ADHszUED1HFE-3eyaBcy-Mw_O5eFAg8xa1wb6T9eWhVgCKiyD9sZJ3XAjZnTWCzzuzfAKvbcjbPJieR2jm_uGy-InweXqtd0baaliBG0nFgW3kBIUNWYo9CGoxE-UsgvIpw2_oc9-LmAPJBCPDJCggqvlVtvdH9puErEMlvVg9HsVtzuoaojzkKKAfRuALVDfk5ZZW0fmy05wXcFdwyktlUs-KIinljTXrRVnm7-kL9dYLVbUAQAA)):
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+ import Child from './Child.svelte';
+</script>
+
+<Child object={{ count: 0 }} />
+```
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+ let { object } = $props();
+</script>
+
+<button onclick={() => {
+ // has no effect
+ object.count += 1
+}}>
+ clicks: {object.count}
+</button>
+```
+
+If the prop is a reactive state proxy, however, then mutations _will_ have an effect but you will see an [`ownership_invalid_mutation`](runtime-warnings#Client-warnings-ownership_invalid_mutation) warning, because the component is mutating state that does not 'belong' to it ([demo](/playground/untitled#H4sIAAAAAAAAE3WR0U7DMAxFf8VESBuiauG1WycheOEbKA9p67FA6kSNszJV-XeUZhMw2GN8r-1znUmQ7FGU4pn2UqsOes-SlSGRia3S6ET5Mgk-2OiJBZGdOh6szd0eNcdaIx3-V28NMRI7UYq1awdleVNTzaq3ZmB43CndwXYwPSzyYn4dWxermqJRI4Np3rFlqODasWRcTtAaT1zCHYSbVU3r4nsyrdPMKTUFKDYiE4yfLEoePIbsQpqfy3_nOVMuJIqg0wk1RFg7GOuWfwEbz2wIDLVatR_VtLyBagNTHFIUMCqtoZXeIfAOU1JoUJsR2IC3nWTMjt7GM4yKdyBhlAMpesvhydCC0y_i0ZagHByMh26WzUhXUUxKnpbcVnBfUwhznJnNlac7JkuIURL-2VVfwxflyrWcSQIAAA==)):
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+ import Child from './Child.svelte';
+
+ let object = $state({count: 0});
+</script>
+
+<Child {object} />
+```
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+ let { object } = $props();
+</script>
+
+<button onclick={() => {
+ // will cause the count below to update,
+ // but with a warning. Don't mutate
+ // objects you don't own!
+ object.count += 1
+}}>
+ clicks: {object.count}
+</button>
+```
+
+The fallback value of a prop not declared with `$bindable` is left untouched — it is not turned into a reactive state proxy — meaning mutations will not cause updates ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwU7DMBBEf2VkIbUVoYFraCIh7vwA4eC4G9Wta1vxpgJZ_nfkBEQp9OjxzOzTRGHlkUQlXpy9G0gq1idCL43ppDrAD84HUYheGwqieo2CP3y2Z0EU3-En79fhRIaz1slA_-nKWSbLQVRiE9SgPTetbVkfvRsYzztttugHd8RiXU6vr-jisbWb8idhN7O3bEQhmN5ZVDyMlIorcOddv_Eufq4AGmJEuG5PilEjQrnRcoV7JCTUuJlGWq7-YHYjs7NwVhmtDnVcrlA3iLmzLLGTAdaB-j736h68Oxv-JM1I0AFjoG1OzPfX023c1nhobUoT39QeKsRzS8owM8DFTG_pE6dcVl70AQAA))
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+ let { object = { count: 0 } } = $props();
+</script>
+
+<button onclick={() => {
+ // has no effect if the fallback value is used
+ object.count += 1
+}}>
+ clicks: {object.count}
+</button>
+```
+
+In summary: don't mutate props. Either use callback props to communicate changes, or — if parent and child should share the same object — use the [`$bindable`]($bindable) rune.
+
+## Type safety
+
+You can add type safety to your components by annotating your props, as you would with any other variable declaration. In TypeScript that might look like this...
+
+```svelte
+<script lang="ts">
+ let { adjective }: { adjective: string } = $props();
+</script>
+```
+
+...while in JSDoc you can do this:
+
+```svelte
+<script>
+ /** @type {{ adjective: string }} */
+ let { adjective } = $props();
+</script>
+```
+
+You can, of course, separate the type declaration from the annotation:
+
+```svelte
+<script lang="ts">
+ interface Props {
+ adjective: string;
+ }
+
+ let { adjective }: Props = $props();
+</script>
+```
+
+> [!NOTE] Interfaces for native DOM elements are provided in the `svelte/elements` module (see [Typing wrapper components](typescript#Typing-wrapper-components))
+
+Adding types is recommended, as it ensures that people using your component can easily discover which props they should provide.
+
+
+## `$props.id()`
+
+This rune, added in version 5.20.0, generates an ID that is unique to the current component instance. When hydrating a server-rendered component, the value will be consistent between server and client.
+
+This is useful for linking elements via attributes like `for` and `aria-labelledby`.
+
+```svelte
+<script>
+ const uid = $props.id();
+</script>
+
+<form>
+ <label for="{uid}-firstname">First Name: </label>
+ <input id="{uid}-firstname" type="text" />
+
+ <label for="{uid}-lastname">Last Name: </label>
+ <input id="{uid}-lastname" type="text" />
+</form>
+```
\ No newline at end of file
diff --git a/documentation/docs/02-runes/06-$bindable.md b/documentation/docs/02-runes/06-$bindable.md
new file mode 100644
index 000000000000..c12c2bf4903e
--- /dev/null
+++ b/documentation/docs/02-runes/06-$bindable.md
@@ -0,0 +1,54 @@
+---
+title: $bindable
+---
+
+Ordinarily, props go one way, from parent to child. This makes it easy to understand how data flows around your app.
+
+In Svelte, component props can be _bound_, which means that data can also flow _up_ from child to parent. This isn't something you should do often, but it can simplify your code if used sparingly and carefully.
+
+It also means that a state proxy can be _mutated_ in the child.
+
+> [!NOTE] Mutation is also possible with normal props, but is strongly discouraged — Svelte will warn you if it detects that a component is mutating state it does not 'own'.
+
+To mark a prop as bindable, we use the `$bindable` rune:
+
+<!-- prettier-ignore -->
+```svelte
+/// file: FancyInput.svelte
+<script>
+ let { value = $bindable(), ...props } = $props();
+</script>
+
+<input bind:value={value} {...props} />
+
+<style>
+ input {
+ font-family: 'Comic Sans MS';
+ color: deeppink;
+ }
+</style>
+```
+
+Now, a component that uses `<FancyInput>` can add the [`bind:`](bind) directive ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwWrDMBBEf2URBSfg2nfFMZRCoYeecqx6UJx1IyqvhLUONcb_XqSkTUOSk1az7DBvJtEai0HI90nw6FHIJIhckO7i78n7IhzQctS2OuAtvXHESByEFFVoeuO5VqTYdN71DC-amvGV_MDQ9q6DrCjP0skkWymKJxYZOgxBfyKs4SGwZlxke7TWZcuVoqo8-1P1z3lraCcP2g64nk4GM5S1osrXf0JV-lrkgvGbheR-wDm_g30V8JL-1vpOCZFogpQsEsWcemtxscyhKArfOx9gjps0Lq4hzRVfemaYfu-PoIqqwKPFY_XpaIqj4tYRP7a6M3aUkD27zjSw0RTgbZN6Z8WNs66XsEP03tBXUueUJFlelvYx_wCuI3leNwIAAA==)):
+
+<!-- prettier-ignore -->
+```svelte
+/// file: App.svelte
+<script>
+ import FancyInput from './FancyInput.svelte';
+
+ let message = $state('hello');
+</script>
+
+<FancyInput bind:value={message} />
+<p>{message}</p>
+```
+
+The parent component doesn't _have_ to use `bind:` — it can just pass a normal prop. Some parents don't want to listen to what their children have to say.
+
+In this case, you can specify a fallback value for when no prop is passed at all:
+
+```js
+/// file: FancyInput.svelte
+let { value = $bindable('fallback'), ...props } = $props();
+```
diff --git a/documentation/docs/02-runes/07-$inspect.md b/documentation/docs/02-runes/07-$inspect.md
new file mode 100644
index 000000000000..ff3d64757b6b
--- /dev/null
+++ b/documentation/docs/02-runes/07-$inspect.md
@@ -0,0 +1,61 @@
+---
+title: $inspect
+---
+
+> [!NOTE] `$inspect` only works during development. In a production build it becomes a noop.
+
+The `$inspect` rune is roughly equivalent to `console.log`, with the exception that it will re-run whenever its argument changes. `$inspect` tracks reactive state deeply, meaning that updating something inside an object or array using fine-grained reactivity will cause it to re-fire ([demo](/playground/untitled#H4sIAAAAAAAACkWQ0YqDQAxFfyUMhSotdZ-tCvu431AXtGOqQ2NmmMm0LOK_r7Utfby5JzeXTOpiCIPKT5PidkSVq2_n1F7Jn3uIcEMSXHSw0evHpAjaGydVzbUQCmgbWaCETZBWMPlKj29nxBDaHj_edkAiu12JhdkYDg61JGvE_s2nR8gyuBuiJZuDJTyQ7eE-IEOzog1YD80Lb0APLfdYc5F9qnFxjiKWwbImo6_llKRQVs-2u91c_bD2OCJLkT3JZasw7KLA2XCX31qKWE6vIzNk1fKE0XbmYrBTufiI8-_8D2cUWBA_AQAA)):
+
+```svelte
+<script>
+ let count = $state(0);
+ let message = $state('hello');
+
+ $inspect(count, message); // will console.log when `count` or `message` change
+</script>
+
+<button onclick={() => count++}>Increment</button>
+<input bind:value={message} />
+```
+
+## $inspect(...).with
+
+`$inspect` returns a property `with`, which you can invoke with a callback, which will then be invoked instead of `console.log`. The first argument to the callback is either `"init"` or `"update"`; subsequent arguments are the values passed to `$inspect` ([demo](/playground/untitled#H4sIAAAAAAAACkVQ24qDMBD9lSEUqlTqPlsj7ON-w7pQG8c2VCchmVSK-O-bKMs-DefKYRYx6BG9qL4XQd2EohKf1opC8Nsm4F84MkbsTXAqMbVXTltuWmp5RAZlAjFIOHjuGLOP_BKVqB00eYuKs82Qn2fNjyxLtcWeyUE2sCRry3qATQIpJRyD7WPVMf9TW-7xFu53dBcoSzAOrsqQNyOe2XUKr0Xi5kcMvdDB2wSYO-I9vKazplV1-T-d6ltgNgSG1KjVUy7ZtmdbdjqtzRcphxMS1-XubOITJtPrQWMvKnYB15_1F7KKadA_AQAA)):
+
+```svelte
+<script>
+ let count = $state(0);
+
+ $inspect(count).with((type, count) => {
+ if (type === 'update') {
+ debugger; // or `console.trace`, or whatever you want
+ }
+ });
+</script>
+
+<button onclick={() => count++}>Increment</button>
+```
+
+A convenient way to find the origin of some change is to pass `console.trace` to `with`:
+
+```js
+// @errors: 2304
+$inspect(stuff).with(console.trace);
+```
+
+## $inspect.trace(...)
+
+This rune, added in 5.14, causes the surrounding function to be _traced_ in development. Any time the function re-runs as part of an [effect]($effect) or a [derived]($derived), information will be printed to the console about which pieces of reactive state caused the effect to fire.
+
+```svelte
+<script>
+ import { doSomeWork } from './elsewhere';
+
+ $effect(() => {
+ +++$inspect.trace();+++
+ doSomeWork();
+ });
+</script>
+```
+
+`$inspect.trace` takes an optional first argument which will be used as the label.
diff --git a/documentation/docs/02-runes/08-$host.md b/documentation/docs/02-runes/08-$host.md
new file mode 100644
index 000000000000..ba6f0a5b5b40
--- /dev/null
+++ b/documentation/docs/02-runes/08-$host.md
@@ -0,0 +1,37 @@
+---
+title: $host
+---
+
+When compiling a component as a [custom element](custom-elements), the `$host` rune provides access to the host element, allowing you to (for example) dispatch custom events ([demo](/playground/untitled#H4sIAAAAAAAAE41Ry2rDMBD8FSECtqkTt1fHFpSSL-ix7sFRNkTEXglrnTYY_3uRlDgxTaEHIfYxs7szA9-rBizPPwZOZwM89wmecqxbF70as7InaMjltrWFR3mpkQDJ8pwXVnbKkKiwItUa3RGLVtk7gTHQXRDR2lXda4CY1D0SK9nCUk0QPyfrCovsRoNFe17aQOAwGncgO2gBqRzihJXiQrEs2csYOhQ-7HgKHaLIbpRhhBG-I2eD_8ciM4KnnOCbeE5dD2P6h0Dz0-Yi_arNhPLJXBtSGi2TvSXdbpqwdsXvjuYsC1veabvvUTog2ylrapKH2G2XsMFLS4uDthQnq2t1cwKkGOGLvYU5PvaQxLsxOkPmsm97Io1Mo2yUPF6VnOZFkw1RMoopKLKAE_9gmGxyDFMwMcwN-Bx_ABXQWmOtAgAA)):
+
+<!-- prettier-ignore -->
+```svelte
+/// file: Stepper.svelte
+<svelte:options customElement="my-stepper" />
+
+<script>
+ function dispatch(type) {
+ +++$host()+++.dispatchEvent(new CustomEvent(type));
+ }
+</script>
+
+<button onclick={() => dispatch('decrement')}>decrement</button>
+<button onclick={() => dispatch('increment')}>increment</button>
+```
+
+<!-- prettier-ignore -->
+```svelte
+/// file: App.svelte
+<script>
+ import './Stepper.svelte';
+
+ let count = $state(0);
+</script>
+
+<my-stepper
+ ondecrement={() => count -= 1}
+ onincrement={() => count += 1}
+></my-stepper>
+
+<p>count: {count}</p>
+```
diff --git a/documentation/docs/02-runes/index.md b/documentation/docs/02-runes/index.md
new file mode 100644
index 000000000000..8ade901351fb
--- /dev/null
+++ b/documentation/docs/02-runes/index.md
@@ -0,0 +1,3 @@
+---
+title: Runes
+---
diff --git a/documentation/docs/03-template-syntax/01-basic-markup.md b/documentation/docs/03-template-syntax/01-basic-markup.md
new file mode 100644
index 000000000000..5e8b4342d3c5
--- /dev/null
+++ b/documentation/docs/03-template-syntax/01-basic-markup.md
@@ -0,0 +1,213 @@
+---
+title: Basic markup
+---
+
+Markup inside a Svelte component can be thought of as HTML++.
+
+## Tags
+
+A lowercase tag, like `<div>`, denotes a regular HTML element. A capitalised tag or a tag that uses dot notation, such as `<Widget>` or `<my.stuff>`, indicates a _component_.
+
+```svelte
+<script>
+ import Widget from './Widget.svelte';
+</script>
+
+<div>
+ <Widget />
+</div>
+```
+
+## Element attributes
+
+By default, attributes work exactly like their HTML counterparts.
+
+```svelte
+<div class="foo">
+ <button disabled>can't touch this</button>
+</div>
+```
+
+As in HTML, values may be unquoted.
+
+<!-- prettier-ignore -->
+```svelte
+<input type=checkbox />
+```
+
+Attribute values can contain JavaScript expressions.
+
+```svelte
+<a href="page/{p}">page {p}</a>
+```
+
+Or they can _be_ JavaScript expressions.
+
+```svelte
+<button disabled={!clickable}>...</button>
+```
+
+Boolean attributes are included on the element if their value is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and excluded if it's [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).
+
+All other attributes are included unless their value is [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish) (`null` or `undefined`).
+
+```svelte
+<input required={false} placeholder="This input field is not required" />
+<div title={null}>This div has no title attribute</div>
+```
+
+> [!NOTE] Quoting a singular expression does not affect how the value is parsed, but in Svelte 6 it will cause the value to be coerced to a string:
+>
+> <!-- prettier-ignore -->
+> ```svelte
+> <button disabled="{number !== 42}">...</button>
+> ```
+
+When the attribute name and value match (`name={name}`), they can be replaced with `{name}`.
+
+```svelte
+<button {disabled}>...</button>
+<!-- equivalent to
+<button disabled={disabled}>...</button>
+-->
+```
+
+## Component props
+
+By convention, values passed to components are referred to as _properties_ or _props_ rather than _attributes_, which are a feature of the DOM.
+
+As with elements, `name={name}` can be replaced with the `{name}` shorthand.
+
+```svelte
+<Widget foo={bar} answer={42} text="hello" />
+```
+
+_Spread attributes_ allow many attributes or properties to be passed to an element or component at once.
+
+An element or component can have multiple spread attributes, interspersed with regular ones.
+
+```svelte
+<Widget {...things} />
+```
+
+## Events
+
+Listening to DOM events is possible by adding attributes to the element that start with `on`. For example, to listen to the `click` event, add the `onclick` attribute to a button:
+
+```svelte
+<button onclick={() => console.log('clicked')}>click me</button>
+```
+
+Event attributes are case sensitive. `onclick` listens to the `click` event, `onClick` listens to the `Click` event, which is different. This ensures you can listen to custom events that have uppercase characters in them.
+
+Because events are just attributes, the same rules as for attributes apply:
+
+- you can use the shorthand form: `<button {onclick}>click me</button>`
+- you can spread them: `<button {...thisSpreadContainsEventAttributes}>click me</button>`
+
+Timing-wise, event attributes always fire after events from bindings (e.g. `oninput` always fires after an update to `bind:value`). Under the hood, some event handlers are attached directly with `addEventListener`, while others are _delegated_.
+
+When using `ontouchstart` and `ontouchmove` event attributes, the handlers are [passive](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) for better performance. This greatly improves responsiveness by allowing the browser to scroll the document immediately, rather than waiting to see if the event handler calls `event.preventDefault()`.
+
+In the very rare cases that you need to prevent these event defaults, you should use [`on`](svelte-events#on) instead (for example inside an action).
+
+### Event delegation
+
+To reduce memory footprint and increase performance, Svelte uses a technique called event delegation. This means that for certain events — see the list below — a single event listener at the application root takes responsibility for running any handlers on the event's path.
+
+There are a few gotchas to be aware of:
+
+- when you manually dispatch an event with a delegated listener, make sure to set the `{ bubbles: true }` option or it won't reach the application root
+- when using `addEventListener` directly, avoid calling `stopPropagation` or the event won't reach the application root and handlers won't be invoked. Similarly, handlers added manually inside the application root will run _before_ handlers added declaratively deeper in the DOM (with e.g. `onclick={...}`), in both capturing and bubbling phases. For these reasons it's better to use the `on` function imported from `svelte/events` rather than `addEventListener`, as it will ensure that order is preserved and `stopPropagation` is handled correctly.
+
+The following event handlers are delegated:
+
+- `beforeinput`
+- `click`
+- `change`
+- `dblclick`
+- `contextmenu`
+- `focusin`
+- `focusout`
+- `input`
+- `keydown`
+- `keyup`
+- `mousedown`
+- `mousemove`
+- `mouseout`
+- `mouseover`
+- `mouseup`
+- `pointerdown`
+- `pointermove`
+- `pointerout`
+- `pointerover`
+- `pointerup`
+- `touchend`
+- `touchmove`
+- `touchstart`
+
+## Text expressions
+
+A JavaScript expression can be included as text by surrounding it with curly braces.
+
+```svelte
+{expression}
+```
+
+Curly braces can be included in a Svelte template by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings: `{`, `{`, or `{` for `{` and `}`, `}`, or `}` for `}`.
+
+If you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses.
+
+<!-- prettier-ignore -->
+```svelte
+<h1>Hello {name}!</h1>
+<p>{a} + {b} = {a + b}.</p>
+
+<div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>
+```
+
+The expression will be stringified and escaped to prevent code injections. If you want to render HTML, use the `{@html}` tag instead.
+
+```svelte
+{@html potentiallyUnsafeHtmlString}
+```
+
+> [!NOTE] Make sure that you either escape the passed string or only populate it with values that are under your control in order to prevent [XSS attacks](https://owasp.org/www-community/attacks/xss/)
+
+## Comments
+
+You can use HTML comments inside components.
+
+```svelte
+<!-- this is a comment! --><h1>Hello world</h1>
+```
+
+Comments beginning with `svelte-ignore` disable warnings for the next block of markup. Usually, these are accessibility warnings; make sure that you're disabling them for a good reason.
+
+```svelte
+<!-- svelte-ignore a11y_autofocus -->
+<input bind:value={name} autofocus />
+```
+
+You can add a special comment starting with `@component` that will show up when hovering over the component name in other files.
+
+````svelte
+<!--
+@component
+- You can use markdown here.
+- You can also use code blocks here.
+- Usage:
+ ```html
+ <Main name="Arethra">
+ ```
+-->
+<script>
+ let { name } = $props();
+</script>
+
+<main>
+ <h1>
+ Hello, {name}
+ </h1>
+</main>
+````
diff --git a/documentation/docs/03-template-syntax/02-if.md b/documentation/docs/03-template-syntax/02-if.md
new file mode 100644
index 000000000000..1378733e6f29
--- /dev/null
+++ b/documentation/docs/03-template-syntax/02-if.md
@@ -0,0 +1,40 @@
+---
+title: {#if ...}
+---
+
+```svelte
+<!--- copy: false --->
+{#if expression}...{/if}
+```
+
+```svelte
+<!--- copy: false --->
+{#if expression}...{:else if expression}...{/if}
+```
+
+```svelte
+<!--- copy: false --->
+{#if expression}...{:else}...{/if}
+```
+
+Content that is conditionally rendered can be wrapped in an if block.
+
+```svelte
+{#if answer === 42}
+ <p>what was the question?</p>
+{/if}
+```
+
+Additional conditions can be added with `{:else if expression}`, optionally ending in an `{:else}` clause.
+
+```svelte
+{#if porridge.temperature > 100}
+ <p>too hot!</p>
+{:else if 80 > porridge.temperature}
+ <p>too cold!</p>
+{:else}
+ <p>just right!</p>
+{/if}
+```
+
+(Blocks don't have to wrap elements, they can also wrap text within elements.)
diff --git a/documentation/docs/03-template-syntax/03-each.md b/documentation/docs/03-template-syntax/03-each.md
new file mode 100644
index 000000000000..70666f6a5798
--- /dev/null
+++ b/documentation/docs/03-template-syntax/03-each.md
@@ -0,0 +1,114 @@
+---
+title: {#each ...}
+---
+
+```svelte
+<!--- copy: false --->
+{#each expression as name}...{/each}
+```
+
+```svelte
+<!--- copy: false --->
+{#each expression as name, index}...{/each}
+```
+
+Iterating over values can be done with an each block. The values in question can be arrays, array-like objects (i.e. anything with a `length` property), or iterables like `Map` and `Set` — in other words, anything that can be used with `Array.from`.
+
+```svelte
+<h1>Shopping list</h1>
+<ul>
+ {#each items as item}
+ <li>{item.name} x {item.qty}</li>
+ {/each}
+</ul>
+```
+
+An each block can also specify an _index_, equivalent to the second argument in an `array.map(...)` callback:
+
+```svelte
+{#each items as item, i}
+ <li>{i + 1}: {item.name} x {item.qty}</li>
+{/each}
+```
+
+## Keyed each blocks
+
+```svelte
+<!--- copy: false --->
+{#each expression as name (key)}...{/each}
+```
+
+```svelte
+<!--- copy: false --->
+{#each expression as name, index (key)}...{/each}
+```
+
+If a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to diff the list when data changes, rather than adding or removing items at the end. The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.
+
+```svelte
+{#each items as item (item.id)}
+ <li>{item.name} x {item.qty}</li>
+{/each}
+
+<!-- or with additional index value -->
+{#each items as item, i (item.id)}
+ <li>{i + 1}: {item.name} x {item.qty}</li>
+{/each}
+```
+
+You can freely use destructuring and rest patterns in each blocks.
+
+```svelte
+{#each items as { id, name, qty }, i (id)}
+ <li>{i + 1}: {name} x {qty}</li>
+{/each}
+
+{#each objects as { id, ...rest }}
+ <li><span>{id}</span><MyComponent {...rest} /></li>
+{/each}
+
+{#each items as [id, ...rest]}
+ <li><span>{id}</span><MyComponent values={rest} /></li>
+{/each}
+```
+
+## Each blocks without an item
+
+```svelte
+<!--- copy: false --->
+{#each expression}...{/each}
+```
+
+```svelte
+<!--- copy: false --->
+{#each expression, index}...{/each}
+```
+
+In case you just want to render something `n` times, you can omit the `as` part ([demo](/playground/untitled#H4sIAAAAAAAAE3WR0W7CMAxFf8XKNAk0WsSeUEaRpn3Guoc0MbQiJFHiMlDVf18SOrZJ48259_jaVgZmxBEZZ28thgCNFV6xBdt1GgPj7wOji0t2EqI-wa_OleGEmpLWiID_6dIaQkMxhm1UdwKpRQhVzWSaVORJNdvWpqbhAYVsYQCNZk8thzWMC_DCHMZk3wPSThNQ088I3mghD9UwSwHwlLE5PMIzVFUFq3G7WUZ2OyUvU3JOuZU332wCXTRmtPy1NgzXZtUFp8WFw9536uWqpbIgPEaDsJBW90cTOHh0KGi2XsBq5-cT6-3nPauxXqHnsHJnCFZ3CvJVkyuCQ0mFF9TZyCQ162WGvteLKfG197Y3iv_pz_fmS68Hxt8iPBPj5HscP8YvCNX7uhYCAAA=)):
+
+```svelte
+<div class="chess-board">
+ {#each { length: 8 }, rank}
+ {#each { length: 8 }, file}
+ <div class:black={(rank + file) % 2 === 1}></div>
+ {/each}
+ {/each}
+</div>
+```
+
+## Else blocks
+
+```svelte
+<!--- copy: false --->
+{#each expression as name}...{:else}...{/each}
+```
+
+An each block can also have an `{:else}` clause, which is rendered if the list is empty.
+
+```svelte
+{#each todos as todo}
+ <p>{todo.text}</p>
+{:else}
+ <p>No tasks today!</p>
+{/each}
+```
diff --git a/documentation/docs/03-template-syntax/04-key.md b/documentation/docs/03-template-syntax/04-key.md
new file mode 100644
index 000000000000..10b6ab435824
--- /dev/null
+++ b/documentation/docs/03-template-syntax/04-key.md
@@ -0,0 +1,24 @@
+---
+title: {#key ...}
+---
+
+```svelte
+<!--- copy: false --->
+{#key expression}...{/key}
+```
+
+Key blocks destroy and recreate their contents when the value of an expression changes. When used around components, this will cause them to be reinstantiated and reinitialised:
+
+```svelte
+{#key value}
+ <Component />
+{/key}
+```
+
+It's also useful if you want a transition to play whenever a value changes:
+
+```svelte
+{#key value}
+ <div transition:fade>{value}</div>
+{/key}
+```
diff --git a/documentation/docs/03-template-syntax/05-await.md b/documentation/docs/03-template-syntax/05-await.md
new file mode 100644
index 000000000000..842b3c7e325d
--- /dev/null
+++ b/documentation/docs/03-template-syntax/05-await.md
@@ -0,0 +1,79 @@
+---
+title: {#await ...}
+---
+
+```svelte
+<!--- copy: false --->
+{#await expression}...{:then name}...{:catch name}...{/await}
+```
+
+```svelte
+<!--- copy: false --->
+{#await expression}...{:then name}...{/await}
+```
+
+```svelte
+<!--- copy: false --->
+{#await expression then name}...{/await}
+```
+
+```svelte
+<!--- copy: false --->
+{#await expression catch name}...{/await}
+```
+
+Await blocks allow you to branch on the three possible states of a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) — pending, fulfilled or rejected.
+
+```svelte
+{#await promise}
+ <!-- promise is pending -->
+ <p>waiting for the promise to resolve...</p>
+{:then value}
+ <!-- promise was fulfilled or not a Promise -->
+ <p>The value is {value}</p>
+{:catch error}
+ <!-- promise was rejected -->
+ <p>Something went wrong: {error.message}</p>
+{/await}
+```
+
+> [!NOTE] During server-side rendering, only the pending branch will be rendered.
+>
+> If the provided expression is not a `Promise`, only the `:then` branch will be rendered, including during server-side rendering.
+
+The `catch` block can be omitted if you don't need to render anything when the promise rejects (or no error is possible).
+
+```svelte
+{#await promise}
+ <!-- promise is pending -->
+ <p>waiting for the promise to resolve...</p>
+{:then value}
+ <!-- promise was fulfilled -->
+ <p>The value is {value}</p>
+{/await}
+```
+
+If you don't care about the pending state, you can also omit the initial block.
+
+```svelte
+{#await promise then value}
+ <p>The value is {value}</p>
+{/await}
+```
+
+Similarly, if you only want to show the error state, you can omit the `then` block.
+
+```svelte
+{#await promise catch error}
+ <p>The error is {error}</p>
+{/await}
+```
+
+> [!NOTE] You can use `#await` with [`import(...)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) to render components lazily:
+>
+> ```svelte
+> {#await import('./Component.svelte') then { default: Component }}
+> <Component />
+> {/await}
+> ```
+
diff --git a/documentation/docs/03-template-syntax/06-snippet.md b/documentation/docs/03-template-syntax/06-snippet.md
new file mode 100644
index 000000000000..c9951d3f3414
--- /dev/null
+++ b/documentation/docs/03-template-syntax/06-snippet.md
@@ -0,0 +1,272 @@
+---
+title: {#snippet ...}
+---
+
+```svelte
+<!--- copy: false --->
+{#snippet name()}...{/snippet}
+```
+
+```svelte
+<!--- copy: false --->
+{#snippet name(param1, param2, paramN)}...{/snippet}
+```
+
+Snippets, and [render tags](@render), are a way to create reusable chunks of markup inside your components. Instead of writing duplicative code like [this](/playground/untitled#H4sIAAAAAAAAE5VUYW-kIBD9K8Tmsm2yXXRzvQ-s3eR-R-0HqqOQKhAZb9sz_vdDkV1t000vRmHewMx7w2AflbIGG7GnPlK8gYhFv42JthG-m9Gwf6BGcLbVXZuPSGrzVho8ZirDGpDIhldgySN5GpEMez9kaNuckY1ANJZRamRuu2ZnhEZt6a84pvs43mzD4pMsUDDi8DMkQFYCGdkvsJwblFq5uCik9bmJ4JZwUkv1eoknWigX2eGNN6aGXa6bjV8ybP-X7sM36T58SVcrIIV2xVIaA41xeD5kKqWXuqpUJEefOqVuOkL9DfBchGrzWfu0vb-RpTd3o-zBR045Ga3HfuE5BmJpKauuhbPtENlUF2sqR9jqpsPSxWsMrlngyj3VJiyYjJXb1-lMa7IWC-iSk2M5Zzh-SJjShe-siq5kpZRPs55BbSGU5YPyte4vVV_VfFXxVb10dSLf17pS2lM5HnpPxw4Zpv6x-F57p0jI3OKlVnhv5V9wPQrNYQQ9D_f6aGHlC89fq1Z3qmDkJCTCweOGF4VUFSPJvD_DhreVdA0eu8ehJJ5x91dBaBkpWm3ureCFPt3uzRv56d4kdp-2euG38XZ6dsnd3ZmPG9yRBCrzRUvi-MccOdwz3qE-fOZ7AwAhlrtTUx3c76vRhSwlFBHDtoPhefgHX3dM0PkEAAA=)...
+
+```svelte
+{#each images as image}
+ {#if image.href}
+ <a href={image.href}>
+ <figure>
+ <img src={image.src} alt={image.caption} width={image.width} height={image.height} />
+ <figcaption>{image.caption}</figcaption>
+ </figure>
+ </a>
+ {:else}
+ <figure>
+ <img src={image.src} alt={image.caption} width={image.width} height={image.height} />
+ <figcaption>{image.caption}</figcaption>
+ </figure>
+ {/if}
+{/each}
+```
+
+...you can write [this](/playground/untitled#H4sIAAAAAAAAE5VUYW-bMBD9KxbRlERKY4jWfSA02n5H6QcXDmwVbMs-lnaI_z6D7TTt1moTAnPvzvfenQ_GpBEd2CS_HxPJekjy5IfWyS7BFz0b9id0CM62ajDVjBS2MkLjqZQldoBE9KwFS-7I_YyUOPqlRGuqnKw5orY5pVpUduj3mitUln5LU3pI0_UuBp9FjTwnDr9AHETLMSeHK6xiGoWSLi9yYT034cwSRjohn17zcQPNFTs8s153sK9Uv_Yh0-5_5d7-o9zbD-UqCaRWrllSYZQxLw_HUhb0ta-y4NnJUxfUvc7QuLJSaO0a3oh2MLBZat8u-wsPnXzKQvTtVVF34xK5d69ThFmHEQ4SpzeVRediTG8rjD5vBSeN3E5JyHh6R1DQK9-iml5kjzQUN_lSgVU8DhYLx7wwjSvRkMDvTjiwF4zM1kXZ7DlF1eN3A7IG85e-zRrYEjjm0FkI4Cc7Ripm0pHOChexhcWXzreeZyRMU6Mk3ljxC9w4QH-cQZ_b3T5pjHxk1VNr1CDrnJy5QDh6XLO6FrLNSRb2l9gz0wo3S6m7HErSgLsPGMHkpDZK31jOanXeHPQz-eruLHUP0z6yTbpbrn223V70uMXNSpQSZjpL0y8hcxxpNqA6_ql3BQAxlxvfpQ_uT9GrWjQC6iRHM8D0MP0GQsIi92QEAAA=):
+
+```svelte
+{#snippet figure(image)}
+ <figure>
+ <img src={image.src} alt={image.caption} width={image.width} height={image.height} />
+ <figcaption>{image.caption}</figcaption>
+ </figure>
+{/snippet}
+
+{#each images as image}
+ {#if image.href}
+ <a href={image.href}>
+ {@render figure(image)}
+ </a>
+ {:else}
+ {@render figure(image)}
+ {/if}
+{/each}
+```
+
+Like function declarations, snippets can have an arbitrary number of parameters, which can have default values, and you can destructure each parameter. You cannot use rest parameters, however.
+
+## Snippet scope
+
+Snippets can be declared anywhere inside your component. They can reference values declared outside themselves, for example in the `<script>` tag or in `{#each ...}` blocks ([demo](/playground/untitled#H4sIAAAAAAAAE12P0QrCMAxFfyWrwhSEvc8p-h1OcG5RC10bmkyQ0n-3HQPBx3vCPUmCemiDrOpLULYbUdXqTKR2Sj6UA7_RCKbMbvJ9Jg33XpMcW9uKQYEAIzJ3T4QD3LSUDE-PnYA4YET4uOkGMc3W5B3xZrtvbVP9HDas2GqiZHqhMW6Tr9jGbG_oOCMImcUCwrIpFk1FqRyqpRpn0cmjHdAvnrIzuscyq_4nd3dPPD01ukE_NA6qFj9hvMYvGjJADw8BAAA=))...
+
+```svelte
+<script>
+ let { message = `it's great to see you!` } = $props();
+</script>
+
+{#snippet hello(name)}
+ <p>hello {name}! {message}!</p>
+{/snippet}
+
+{@render hello('alice')}
+{@render hello('bob')}
+```
+
+...and they are 'visible' to everything in the same lexical scope (i.e. siblings, and children of those siblings):
+
+```svelte
+<div>
+ {#snippet x()}
+ {#snippet y()}...{/snippet}
+
+ <!-- this is fine -->
+ {@render y()}
+ {/snippet}
+
+ <!-- this will error, as `y` is not in scope -->
+ {@render y()}
+</div>
+
+<!-- this will also error, as `x` is not in scope -->
+{@render x()}
+```
+
+Snippets can reference themselves and each other ([demo](/playground/untitled#H4sIAAAAAAAAE2WPTQqDMBCFrxLiRqH1Zysi7TlqF1YnENBJSGJLCYGeo5tesUeosfYH3c2bee_jjaWMd6BpfrAU6x5oTvdS0g01V-mFPkNnYNRaDKrxGxto5FKCIaeu1kYwFkauwsoUWtZYPh_3W5FMY4U2mb3egL9kIwY0rbhgiO-sDTgjSEqSTvIDs-jiOP7i_MHuFGAL6p9BtiSbOTl0GtzCuihqE87cqtyam6WRGz_vRcsZh5bmRg3gju4Fptq_kzQBAAA=)):
+
+```svelte
+{#snippet blastoff()}
+ <span>🚀</span>
+{/snippet}
+
+{#snippet countdown(n)}
+ {#if n > 0}
+ <span>{n}...</span>
+ {@render countdown(n - 1)}
+ {:else}
+ {@render blastoff()}
+ {/if}
+{/snippet}
+
+{@render countdown(10)}
+```
+
+## Passing snippets to components
+
+Within the template, snippets are values just like any other. As such, they can be passed to components as props ([demo](/playground/untitled#H4sIAAAAAAAAE3VS247aMBD9lZGpBGwDASRegonaPvQL2qdlH5zYEKvBNvbQLbL875VzAcKyj3PmzJnLGU8UOwqSkd8KJdaCk4TsZS0cyV49wYuJuQiQpGd-N2bu_ooaI1YwJ57hpVYoFDqSEepKKw3mO7VDeTTaIvxiRS1gb_URxvO0ibrS8WanIrHUyiHs7Vmigy28RmyHHmKvDMbMmFq4cQInvGSwTsBYWYoMVhCSB2rBFFPsyl0uruTlR3JZCWvlTXl1Yy_mawiR_rbZKZrellJ-5JQ0RiBUgnFhJ9OGR7HKmwVoilXeIye8DOJGfYCgRlZ3iE876TBsZPX7hPdteO75PC4QaIo8vwNPePmANQ2fMeEFHrLD7rR1jTNkW986E8C3KwfwVr8HSHOSEBT_kGRozyIkn_zQveXDL3rIfPJHtUDwzShJd_Qk3gQCbOGLsdq4yfTRJopRuin3I7nv6kL7ARRjmLdBDG3uv1mhuLA3V2mKtqNEf_oCn8p9aN-WYqH5peP4kWBl1UwJzAEPT9U7K--0fRrrWnPTXpCm1_EVdXjpNmlA8G1hPPyM1fKgMqjFHjctXGjLhZ05w0qpDhksGrybuNEHtJnCalZWsuaTlfq6nPaaBSv_HKw-K57BjzOiVj9ZKQYKzQjZodYFqydYTRN4gPhVzTDO2xnma3HsVWjaLjT8nbfwHy7Q5f2dBAAA)):
+
+```svelte
+<script>
+ import Table from './Table.svelte';
+
+ const fruits = [
+ { name: 'apples', qty: 5, price: 2 },
+ { name: 'bananas', qty: 10, price: 1 },
+ { name: 'cherries', qty: 20, price: 0.5 }
+ ];
+</script>
+
+{#snippet header()}
+ <th>fruit</th>
+ <th>qty</th>
+ <th>price</th>
+ <th>total</th>
+{/snippet}
+
+{#snippet row(d)}
+ <td>{d.name}</td>
+ <td>{d.qty}</td>
+ <td>{d.price}</td>
+ <td>{d.qty * d.price}</td>
+{/snippet}
+
+<Table data={fruits} {header} {row} />
+```
+
+Think about it like passing content instead of data to a component. The concept is similar to slots in web components.
+
+As an authoring convenience, snippets declared directly _inside_ a component implicitly become props _on_ the component ([demo](/playground/untitled#H4sIAAAAAAAAE3VSTa_aMBD8Kyu_SkAbCA-JSzBR20N_QXt6vIMTO8SqsY29tI2s_PcqTiB8vaPHs7MzuxuIZgdBMvJLo0QlOElIJZXwJHsLBBvb_XUASc7Mb9Yu_B-hsMMK5sUzvDQahUZPMkJ96aTFfKd3KA_WOISfrFACKmcOMFmk8TWUTjY73RFLoz1C5U4SPWzhrcN2GKDrlcGEWauEnyRwxCaDdQLWyVJksII2uaMWTDPNLtzX5YX8-kgua-GcHJVXI3u5WEPb0d83O03TMZSmfRzOkG1Db7mNacOL19JagVALxoWbztq-H8U6j0SaYp2P2BGbOyQ2v8PQIFMXLKRDk177pq0zf6d8bMrzwBdd0pamyPMb-IjNEzS2f86Gz_Dwf-2F9nvNSUJQ_EOSoTuJNvngqK5v4Pas7n4-OCwlEEJcQTIMO-nSQwtb-GSdsX46e9gbRoP9yGQ11I0rEuycunu6PHx1QnPhxm3SFN15MOlYEFJZtf0dUywMbwZOeBGsrKNLYB54-1R9WNqVdki7usim6VmQphf7mnpshiQRhNAXdoOfMyX3OgMlKtz0cGEcF27uLSul3mewjPjgOOoDukxjPS9rqfh0pb-8zs6aBSt_7505aZ7B9xOi0T9YKW4UooVsr0zB1BTrWQJ3EL-oWcZ572GxFoezCk37QLe3897-B2i2U62uBAAA)):
+
+```svelte
+<!-- this is semantically the same as the above -->
+<Table data={fruits}>
+ {#snippet header()}
+ <th>fruit</th>
+ <th>qty</th>
+ <th>price</th>
+ <th>total</th>
+ {/snippet}
+
+ {#snippet row(d)}
+ <td>{d.name}</td>
+ <td>{d.qty}</td>
+ <td>{d.price}</td>
+ <td>{d.qty * d.price}</td>
+ {/snippet}
+</Table>
+```
+
+Any content inside the component tags that is _not_ a snippet declaration implicitly becomes part of the `children` snippet ([demo](/playground/untitled#H4sIAAAAAAAAE3WOQQrCMBBFrzIMggql3ddY1Du4si5sOmIwnYRkFKX07lKqglqX8_7_w2uRDw1hjlsWI5ZqTPBoLEXMdy3K3fdZDzB5Ndfep_FKVnpWHSKNce1YiCVijirqYLwUJQOYxrsgsLmIOIZjcA1M02w4n-PpomSVvTclqyEutDX6DA2pZ7_ABIVugrmEC3XJH92P55_G39GodCmWBFrQJ2PrQAwdLGHig_NxNv9xrQa1dhWIawrv1Wzeqawa8953D-8QOmaEAQAA)):
+
+```svelte
+<!--- file: App.svelte --->
+<Button>click me</Button>
+```
+
+```svelte
+<!--- file: Button.svelte --->
+<script>
+ let { children } = $props();
+</script>
+
+<!-- result will be <button>click me</button> -->
+<button>{@render children()}</button>
+```
+
+> [!NOTE] Note that you cannot have a prop called `children` if you also have content inside the component — for this reason, you should avoid having props with that name
+
+You can declare snippet props as being optional. You can either use optional chaining to not render anything if the snippet isn't set...
+
+```svelte
+<script>
+ let { children } = $props();
+</script>
+
+{@render children?.()}
+```
+
+...or use an `#if` block to render fallback content:
+
+```svelte
+<script>
+ let { children } = $props();
+</script>
+
+{#if children}
+ {@render children()}
+{:else}
+ fallback content
+{/if}
+```
+
+## Typing snippets
+
+Snippets implement the `Snippet` interface imported from `'svelte'`:
+
+```svelte
+<script lang="ts">
+ import type { Snippet } from 'svelte';
+
+ interface Props {
+ data: any[];
+ children: Snippet;
+ row: Snippet<[any]>;
+ }
+
+ let { data, children, row }: Props = $props();
+</script>
+```
+
+With this change, red squigglies will appear if you try and use the component without providing a `data` prop and a `row` snippet. Notice that the type argument provided to `Snippet` is a tuple, since snippets can have multiple parameters.
+
+We can tighten things up further by declaring a generic, so that `data` and `row` refer to the same type:
+
+```svelte
+<script lang="ts" generics="T">
+ import type { Snippet } from 'svelte';
+
+ let {
+ data,
+ children,
+ row
+ }: {
+ data: T[];
+ children: Snippet;
+ row: Snippet<[T]>;
+ } = $props();
+</script>
+```
+
+## Exporting snippets
+
+Snippets declared at the top level of a `.svelte` file can be exported from a `<script module>` for use in other components, provided they don't reference any declarations in a non-module `<script>` (whether directly or indirectly, via other snippets) ([demo](/playground/untitled#H4sIAAAAAAAAE3WPwY7CMAxEf8UyB1hRgdhjl13Bga8gHFJipEqtGyUGFUX5dxJUtEB3b9bYM_MckHVLWOKut50TMuC5tpbEY4GnuiGP5T6gXG0-ykLSB8vW2oW_UCNZq7Snv_Rjx0Kc4kpc-6OrrfwoVlK3uQ4CaGMgwsl1LUwXy0f54J9-KV4vf20cNo7YkMu22aqAz4-oOLUI9YKluDPF4h_at-hX5PFyzA1tZ84N3fGpf8YfUU6GvDumLqDKmEqCjjCHUEX4hqDTWCU5PJ6Or38c4g1cPu9tnAEAAA==)):
+
+```svelte
+<script module>
+ export { add };
+</script>
+
+{#snippet add(a, b)}
+ {a} + {b} = {a + b}
+{/snippet}
+```
+
+> [!NOTE]
+> This requires Svelte 5.5.0 or newer
+
+## Programmatic snippets
+
+Snippets can be created programmatically with the [`createRawSnippet`](svelte#createRawSnippet) API. This is intended for advanced use cases.
+
+## Snippets and slots
+
+In Svelte 4, content can be passed to components using [slots](legacy-slots). Snippets are more powerful and flexible, and as such slots are deprecated in Svelte 5.
diff --git a/documentation/docs/03-template-syntax/07-@render.md b/documentation/docs/03-template-syntax/07-@render.md
new file mode 100644
index 000000000000..ecdf5cc216fc
--- /dev/null
+++ b/documentation/docs/03-template-syntax/07-@render.md
@@ -0,0 +1,39 @@
+---
+title: {@render ...}
+---
+
+To render a [snippet](snippet), use a `{@render ...}` tag.
+
+```svelte
+{#snippet sum(a, b)}
+ <p>{a} + {b} = {a + b}</p>
+{/snippet}
+
+{@render sum(1, 2)}
+{@render sum(3, 4)}
+{@render sum(5, 6)}
+```
+
+The expression can be an identifier like `sum`, or an arbitrary JavaScript expression:
+
+```svelte
+{@render (cool ? coolSnippet : lameSnippet)()}
+```
+
+## Optional snippets
+
+If the snippet is potentially undefined — for example, because it's an incoming prop — then you can use optional chaining to only render it when it _is_ defined:
+
+```svelte
+{@render children?.()}
+```
+
+Alternatively, use an [`{#if ...}`](if) block with an `:else` clause to render fallback content:
+
+```svelte
+{#if children}
+ {@render children()}
+{:else}
+ <p>fallback content</p>
+{/if}
+```
diff --git a/documentation/docs/03-template-syntax/08-@html.md b/documentation/docs/03-template-syntax/08-@html.md
new file mode 100644
index 000000000000..30456fa666eb
--- /dev/null
+++ b/documentation/docs/03-template-syntax/08-@html.md
@@ -0,0 +1,51 @@
+---
+title: {@html ...}
+---
+
+To inject raw HTML into your component, use the `{@html ...}` tag:
+
+```svelte
+<article>
+ {@html content}
+</article>
+```
+
+> [!NOTE] Make sure that you either escape the passed string or only populate it with values that are under your control in order to prevent [XSS attacks](https://owasp.org/www-community/attacks/xss/). Never render unsanitized content.
+
+The expression should be valid standalone HTML — this will not work, because `</div>` is not valid HTML:
+
+```svelte
+{@html '<div>'}content{@html '</div>'}
+```
+
+It also will not compile Svelte code.
+
+## Styling
+
+Content rendered this way is 'invisible' to Svelte and as such will not receive [scoped styles](scoped-styles) — in other words, this will not work, and the `a` and `img` styles will be regarded as unused:
+
+<!-- prettier-ignore -->
+```svelte
+<article>
+ {@html content}
+</article>
+
+<style>
+ article {
+ a { color: hotpink }
+ img { width: 100% }
+ }
+</style>
+```
+
+Instead, use the `:global` modifier to target everything inside the `<article>`:
+
+<!-- prettier-ignore -->
+```svelte
+<style>
+ article +++:global+++ {
+ a { color: hotpink }
+ img { width: 100% }
+ }
+</style>
+```
diff --git a/documentation/docs/03-template-syntax/09-@const.md b/documentation/docs/03-template-syntax/09-@const.md
new file mode 100644
index 000000000000..2a587b7a3d7c
--- /dev/null
+++ b/documentation/docs/03-template-syntax/09-@const.md
@@ -0,0 +1,14 @@
+---
+title: {@const ...}
+---
+
+The `{@const ...}` tag defines a local constant.
+
+```svelte
+{#each boxes as box}
+ {@const area = box.width * box.height}
+ {box.width} * {box.height} = {area}
+{/each}
+```
+
+`{@const}` is only allowed as an immediate child of a block — `{#if ...}`, `{#each ...}`, `{#snippet ...}` and so on — a `<Component />` or a `<svelte:boundary>`.
diff --git a/documentation/docs/03-template-syntax/10-@debug.md b/documentation/docs/03-template-syntax/10-@debug.md
new file mode 100644
index 000000000000..15e32dcae99f
--- /dev/null
+++ b/documentation/docs/03-template-syntax/10-@debug.md
@@ -0,0 +1,35 @@
+---
+title: {@debug ...}
+---
+
+The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.
+
+```svelte
+<script>
+ let user = {
+ firstname: 'Ada',
+ lastname: 'Lovelace'
+ };
+</script>
+
+{@debug user}
+
+<h1>Hello {user.firstname}!</h1>
+```
+
+`{@debug ...}` accepts a comma-separated list of variable names (not arbitrary expressions).
+
+```svelte
+<!-- Compiles -->
+{@debug user}
+{@debug user1, user2, user3}
+
+<!-- WON'T compile -->
+{@debug user.firstname}
+{@debug myArray[0]}
+{@debug !isReady}
+{@debug typeof user === 'object'}
+```
+
+The `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when _any_ state changes, as opposed to the specified variables.
+
diff --git a/documentation/docs/03-template-syntax/11-bind.md b/documentation/docs/03-template-syntax/11-bind.md
new file mode 100644
index 000000000000..c23f3b52327c
--- /dev/null
+++ b/documentation/docs/03-template-syntax/11-bind.md
@@ -0,0 +1,364 @@
+---
+title: bind:
+---
+
+Data ordinarily flows down, from parent to child. The `bind:` directive allows data to flow the other way, from child to parent.
+
+The general syntax is `bind:property={expression}`, where `expression` is an _lvalue_ (i.e. a variable or an object property). When the expression is an identifier with the same name as the property, we can omit the expression — in other words these are equivalent:
+
+<!-- prettier-ignore -->
+```svelte
+<input bind:value={value} />
+<input bind:value />
+```
+
+
+Svelte creates an event listener that updates the bound value. If an element already has a listener for the same event, that listener will be fired before the bound value is updated.
+
+Most bindings are _two-way_, meaning that changes to the value will affect the element and vice versa. A few bindings are _readonly_, meaning that changing their value will have no effect on the element.
+
+## Function bindings
+
+You can also use `bind:property={get, set}`, where `get` and `set` are functions, allowing you to perform validation and transformation:
+
+```svelte
+<input bind:value={
+ () => value,
+ (v) => value = v.toLowerCase()}
+/>
+```
+
+In the case of readonly bindings like [dimension bindings](#Dimensions), the `get` value should be `null`:
+
+```svelte
+<div
+ bind:clientWidth={null, redraw}
+ bind:clientHeight={null, redraw}
+>...</div>
+```
+
+> [!NOTE]
+> Function bindings are available in Svelte 5.9.0 and newer.
+
+## `<input bind:value>`
+
+A `bind:value` directive on an `<input>` element binds the input's `value` property:
+
+<!-- prettier-ignore -->
+```svelte
+<script>
+ let message = $state('hello');
+</script>
+
+<input bind:value={message} />
+<p>{message}</p>
+```
+
+In the case of a numeric input (`type="number"` or `type="range"`), the value will be coerced to a number ([demo](/playground/untitled#H4sIAAAAAAAAE6WPwYoCMQxAfyWEPeyiOOqx2w74Hds9pBql0IllmhGXYf5dKqwiyILsLXnwwsuI-5i4oPkaUX8yo7kCnKNQV7dNzoty4qSVBSr8jG-Poixa0KAt2z5mbb14TaxA4OCtKCm_rz4-f2m403WltrlrYhMFTtcLNkoeFGqZ8yhDF7j3CCHKzpwoDexGmqCL4jwuPUJHZ-dxVcfmyYGe5MAv-La5pbxYFf5Z9Zf_UJXb-sEMquFgJJhBmGyTW5yj8lnRaD_w9D1dAKSSj7zqAQAA)):
+
+```svelte
+<script>
+ let a = $state(1);
+ let b = $state(2);
+</script>
+
+<label>
+ <input type="number" bind:value={a} min="0" max="10" />
+ <input type="range" bind:value={a} min="0" max="10" />
+</label>
+
+<label>
+ <input type="number" bind:value={b} min="0" max="10" />
+ <input type="range" bind:value={b} min="0" max="10" />
+</label>
+
+<p>{a} + {b} = {a + b}</p>
+```
+
+If the input is empty or invalid (in the case of `type="number"`), the value is `undefined`.
+
+Since 5.6.0, if an `<input>` has a `defaultValue` and is part of a form, it will revert to that value instead of the empty string when the form is reset. Note that for the initial render the value of the binding takes precedence unless it is `null` or `undefined`.
+
+```svelte
+<script>
+ let value = $state('');
+</script>
+
+<form>
+ <input bind:value defaultValue="not the empty string">
+ <input type="reset" value="Reset">
+</form>
+```
+
+> [!NOTE]
+> Use reset buttons sparingly, and ensure that users won't accidentally click them while trying to submit the form.
+
+## `<input bind:checked>`
+
+Checkbox and radio inputs can be bound with `bind:checked`:
+
+```svelte
+<label>
+ <input type="checkbox" bind:checked={accepted} />
+ Accept terms and conditions
+</label>
+```
+
+Since 5.6.0, if an `<input>` has a `defaultChecked` attribute and is part of a form, it will revert to that value instead of `false` when the form is reset. Note that for the initial render the value of the binding takes precedence unless it is `null` or `undefined`.
+
+```svelte
+<script>
+ let checked = $state(true);
+</script>
+
+<form>
+ <input type="checkbox" bind:checked defaultChecked={true}>
+ <input type="reset" value="Reset">
+</form>
+```
+
+## `<input bind:group>`
+
+Inputs that work together can use `bind:group`.
+
+```svelte
+<script>
+ let tortilla = $state('Plain');
+
+ /** @type {Array<string>} */
+ let fillings = $state([]);
+</script>
+
+<!-- grouped radio inputs are mutually exclusive -->
+<input type="radio" bind:group={tortilla} value="Plain" />
+<input type="radio" bind:group={tortilla} value="Whole wheat" />
+<input type="radio" bind:group={tortilla} value="Spinach" />
+
+<!-- grouped checkbox inputs populate an array -->
+<input type="checkbox" bind:group={fillings} value="Rice" />
+<input type="checkbox" bind:group={fillings} value="Beans" />
+<input type="checkbox" bind:group={fillings} value="Cheese" />
+<input type="checkbox" bind:group={fillings} value="Guac (extra)" />
+```
+
+> [!NOTE] `bind:group` only works if the inputs are in the same Svelte component.
+
+## `<input bind:files>`
+
+On `<input>` elements with `type="file"`, you can use `bind:files` to get the [`FileList` of selected files](https://developer.mozilla.org/en-US/docs/Web/API/FileList). When you want to update the files programmatically, you always need to use a `FileList` object. Currently `FileList` objects cannot be constructed directly, so you need to create a new [`DataTransfer`](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer) object and get `files` from there.
+
+```svelte
+<script>
+ let files = $state();
+
+ function clear() {
+ files = new DataTransfer().files; // null or undefined does not work
+ }
+</script>
+
+<label for="avatar">Upload a picture:</label>
+<input accept="image/png, image/jpeg" bind:files id="avatar" name="avatar" type="file" />
+<button onclick={clear}>clear</button>
+```
+
+`FileList` objects also cannot be modified, so if you want to e.g. delete a single file from the list, you need to create a new `DataTransfer` object and add the files you want to keep.
+
+> [!NOTE] `DataTransfer` may not be available in server-side JS runtimes. Leaving the state that is bound to `files` uninitialized prevents potential errors if components are server-side rendered.
+
+## `<select bind:value>`
+
+A `<select>` value binding corresponds to the `value` property on the selected `<option>`, which can be any value (not just strings, as is normally the case in the DOM).
+
+```svelte
+<select bind:value={selected}>
+ <option value={a}>a</option>
+ <option value={b}>b</option>
+ <option value={c}>c</option>
+</select>
+```
+
+A `<select multiple>` element behaves similarly to a checkbox group. The bound variable is an array with an entry corresponding to the `value` property of each selected `<option>`.
+
+```svelte
+<select multiple bind:value={fillings}>
+ <option value="Rice">Rice</option>
+ <option value="Beans">Beans</option>
+ <option value="Cheese">Cheese</option>
+ <option value="Guac (extra)">Guac (extra)</option>
+</select>
+```
+
+When the value of an `<option>` matches its text content, the attribute can be omitted.
+
+```svelte
+<select multiple bind:value={fillings}>
+ <option>Rice</option>
+ <option>Beans</option>
+ <option>Cheese</option>
+ <option>Guac (extra)</option>
+</select>
+```
+
+You can give the `<select>` a default value by adding a `selected` attribute to the`<option>` (or options, in the case of `<select multiple>`) that should be initially selected. If the `<select>` is part of a form, it will revert to that selection when the form is reset. Note that for the initial render the value of the binding takes precedence if it's not `undefined`.
+
+```svelte
+<select bind:value={selected}>
+ <option value={a}>a</option>
+ <option value={b} selected>b</option>
+ <option value={c}>c</option>
+</select>
+```
+
+## `<audio>`
+
+`<audio>` elements have their own set of bindings — five two-way ones...
+
+- [`currentTime`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime)
+- [`playbackRate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate)
+- [`paused`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused)
+- [`volume`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume)
+- [`muted`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted)
+
+...and six readonly ones:
+
+- [`duration`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration)
+- [`buffered`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/buffered)
+- [`seekable`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekable)
+- [`seeking`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event)
+- [`ended`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended)
+- [`readyState`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState)
+
+```svelte
+<audio src={clip} bind:duration bind:currentTime bind:paused></audio>
+```
+
+## `<video>`
+
+`<video>` elements have all the same bindings as [`<audio>`](#audio) elements, plus readonly [`videoWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoWidth) and [`videoHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoHeight) bindings.
+
+## `<img>`
+
+`<img>` elements have two readonly bindings:
+
+- [`naturalWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth)
+- [`naturalHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight)
+
+## `<details bind:open>`
+
+`<details>` elements support binding to the `open` property.
+
+```svelte
+<details bind:open={isOpen}>
+ <summary>How do you comfort a JavaScript bug?</summary>
+ <p>You console it.</p>
+</details>
+```
+
+## Contenteditable bindings
+
+Elements with the `contenteditable` attribute support the following bindings:
+
+- [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)
+- [`innerText`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText)
+- [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+
+> [!NOTE] There are [subtle differences between `innerText` and `textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext).
+
+<!-- for some reason puts the comment and html on same line -->
+<!-- prettier-ignore -->
+```svelte
+<div contenteditable="true" bind:innerHTML={html}></div>
+```
+
+## Dimensions
+
+All visible elements have the following readonly bindings, measured with a `ResizeObserver`:
+
+- [`clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth)
+- [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)
+- [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)
+- [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)
+
+```svelte
+<div bind:offsetWidth={width} bind:offsetHeight={height}>
+ <Chart {width} {height} />
+</div>
+```
+
+> [!NOTE] `display: inline` elements do not have a width or height (except for elements with 'intrinsic' dimensions, like `<img>` and `<canvas>`), and cannot be observed with a `ResizeObserver`. You will need to change the `display` style of these elements to something else, such as `inline-block`.
+
+## bind:this
+
+```svelte
+<!--- copy: false --->
+bind:this={dom_node}
+```
+
+To get a reference to a DOM node, use `bind:this`. The value will be `undefined` until the component is mounted — in other words, you should read it inside an effect or an event handler, but not during component initialisation:
+
+```svelte
+<script>
+ /** @type {HTMLCanvasElement} */
+ let canvas;
+
+ $effect(() => {
+ const ctx = canvas.getContext('2d');
+ drawStuff(ctx);
+ });
+</script>
+
+<canvas bind:this={canvas}></canvas>
+```
+
+Components also support `bind:this`, allowing you to interact with component instances programmatically.
+
+```svelte
+<!--- file: App.svelte --->
+<ShoppingCart bind:this={cart} />
+
+<button onclick={() => cart.empty()}> Empty shopping cart </button>
+```
+
+```svelte
+<!--- file: ShoppingCart.svelte --->
+<script>
+ // All instance exports are available on the instance object
+ export function empty() {
+ // ...
+ }
+</script>
+```
+
+## bind:_property_ for components
+
+```svelte
+bind:property={variable}
+```
+
+You can bind to component props using the same syntax as for elements.
+
+```svelte
+<Keypad bind:value={pin} />
+```
+
+While Svelte props are reactive without binding, that reactivity only flows downward into the component by default. Using `bind:property` allows changes to the property from within the component to flow back up out of the component.
+
+To mark a property as bindable, use the [`$bindable`]($bindable) rune:
+
+```svelte
+<script>
+ let { readonlyProperty, bindableProperty = $bindable() } = $props();
+</script>
+```
+
+Declaring a property as bindable means it _can_ be used using `bind:`, not that it _must_ be used using `bind:`.
+
+Bindable properties can have a fallback value:
+
+```svelte
+<script>
+ let { bindableProperty = $bindable('fallback value') } = $props();
+</script>
+```
+
+This fallback value _only_ applies when the property is _not_ bound. When the property is bound and a fallback value is present, the parent is expected to provide a value other than `undefined`, else a runtime error is thrown. This prevents hard-to-reason-about situations where it's unclear which value should apply.
diff --git a/documentation/docs/03-template-syntax/12-use.md b/documentation/docs/03-template-syntax/12-use.md
new file mode 100644
index 000000000000..45de0235782b
--- /dev/null
+++ b/documentation/docs/03-template-syntax/12-use.md
@@ -0,0 +1,80 @@
+---
+title: use:
+---
+
+Actions are functions that are called when an element is mounted. They are added with the `use:` directive, and will typically use an `$effect` so that they can reset any state when the element is unmounted:
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+ /** @type {import('svelte/action').Action} */
+ function myaction(node) {
+ // the node has been mounted in the DOM
+
+ $effect(() => {
+ // setup goes here
+
+ return () => {
+ // teardown goes here
+ };
+ });
+ }
+</script>
+
+<div use:myaction>...</div>
+```
+
+An action can be called with an argument:
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+ /** @type {import('svelte/action').Action} */
+ function myaction(node, +++data+++) {
+ // ...
+ }
+</script>
+
+<div use:myaction={+++data+++}>...</div>
+```
+
+The action is only called once (but not during server-side rendering) — it will _not_ run again if the argument changes.
+
+> [!LEGACY]
+> Prior to the `$effect` rune, actions could return an object with `update` and `destroy` methods, where `update` would be called with the latest value of the argument if it changed. Using effects is preferred.
+
+## Typing
+
+The `Action` interface receives three optional type arguments — a node type (which can be `Element`, if the action applies to everything), a parameter, and any custom event handlers created by the action:
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+ /**
+ * @type {import('svelte/action').Action<
+ * HTMLDivElement,
+ * undefined,
+ * {
+ * onswiperight: (e: CustomEvent) => void;
+ * onswipeleft: (e: CustomEvent) => void;
+ * // ...
+ * }
+ * >}
+ */
+ function gestures(node) {
+ $effect(() => {
+ // ...
+ node.dispatchEvent(new CustomEvent('swipeleft'));
+
+ // ...
+ node.dispatchEvent(new CustomEvent('swiperight'));
+ });
+ }
+</script>
+
+<div
+ use:gestures
+ onswipeleft={next}
+ onswiperight={prev}
+>...</div>
+```
diff --git a/documentation/docs/03-template-syntax/13-transition.md b/documentation/docs/03-template-syntax/13-transition.md
new file mode 100644
index 000000000000..51c11e8b34e9
--- /dev/null
+++ b/documentation/docs/03-template-syntax/13-transition.md
@@ -0,0 +1,171 @@
+---
+title: transition:
+---
+
+A _transition_ is triggered by an element entering or leaving the DOM as a result of a state change.
+
+When a block (such as an `{#if ...}` block) is transitioning out, all elements inside it, including those that do not have their own transitions, are kept in the DOM until every transition in the block has been completed.
+
+The `transition:` directive indicates a _bidirectional_ transition, which means it can be smoothly reversed while the transition is in progress.
+
+```svelte
+<script>
+ +++import { fade } from 'svelte/transition';+++
+
+ let visible = $state(false);
+</script>
+
+<button onclick={() => visible = !visible}>toggle</button>
+
+{#if visible}
+ <div +++transition:fade+++>fades in and out</div>
+{/if}
+```
+
+## Built-in transitions
+
+A selection of built-in transitions can be imported from the [`svelte/transition`](svelte-transition) module.
+
+## Local vs global
+
+Transitions are local by default. Local transitions only play when the block they belong to is created or destroyed, _not_ when parent blocks are created or destroyed.
+
+```svelte
+{#if x}
+ {#if y}
+ <p transition:fade>fades in and out only when y changes</p>
+
+ <p transition:fade|global>fades in and out when x or y change</p>
+ {/if}
+{/if}
+```
+
+## Transition parameters
+
+Transitions can have parameters.
+
+(The double `{{curlies}}` aren't a special syntax; this is an object literal inside an expression tag.)
+
+```svelte
+{#if visible}
+ <div transition:fade={{ duration: 2000 }}>fades in and out over two seconds</div>
+{/if}
+```
+
+## Custom transition functions
+
+```js
+/// copy: false
+// @noErrors
+transition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out' | 'both' }) => {
+ delay?: number,
+ duration?: number,
+ easing?: (t: number) => number,
+ css?: (t: number, u: number) => string,
+ tick?: (t: number, u: number) => void
+}
+```
+
+Transitions can use custom functions. If the returned object has a `css` function, Svelte will generate keyframes for a [web animation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+
+The `t` argument passed to `css` is a value between `0` and `1` after the `easing` function has been applied. _In_ transitions run from `0` to `1`, _out_ transitions run from `1` to `0` — in other words, `1` is the element's natural state, as though no transition had been applied. The `u` argument is equal to `1 - t`.
+
+The function is called repeatedly _before_ the transition begins, with different `t` and `u` arguments.
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+ import { elasticOut } from 'svelte/easing';
+
+ /** @type {boolean} */
+ export let visible;
+
+ /**
+ * @param {HTMLElement} node
+ * @param {{ delay?: number, duration?: number, easing?: (t: number) => number }} params
+ */
+ function whoosh(node, params) {
+ const existingTransform = getComputedStyle(node).transform.replace('none', '');
+
+ return {
+ delay: params.delay || 0,
+ duration: params.duration || 400,
+ easing: params.easing || elasticOut,
+ css: (t, u) => `transform: ${existingTransform} scale(${t})`
+ };
+ }
+</script>
+
+{#if visible}
+ <div in:whoosh>whooshes in</div>
+{/if}
+```
+
+A custom transition function can also return a `tick` function, which is called _during_ the transition with the same `t` and `u` arguments.
+
+> [!NOTE] If it's possible to use `css` instead of `tick`, do so — web animations can run off the main thread, preventing jank on slower devices.
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+ export let visible = false;
+
+ /**
+ * @param {HTMLElement} node
+ * @param {{ speed?: number }} params
+ */
+ function typewriter(node, { speed = 1 }) {
+ const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
+
+ if (!valid) {
+ throw new Error(`This transition only works on elements with a single text node child`);
+ }
+
+ const text = node.textContent;
+ const duration = text.length / (speed * 0.01);
+
+ return {
+ duration,
+ tick: (t) => {
+ const i = ~~(text.length * t);
+ node.textContent = text.slice(0, i);
+ }
+ };
+ }
+</script>
+
+{#if visible}
+ <p in:typewriter={{ speed: 1 }}>The quick brown fox jumps over the lazy dog</p>
+{/if}
+```
+
+If a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](/tutorial/deferred-transitions) possible.
+
+Transition functions also receive a third argument, `options`, which contains information about the transition.
+
+Available values in the `options` object are:
+
+- `direction` - one of `in`, `out`, or `both` depending on the type of transition
+
+## Transition events
+
+An element with transitions will dispatch the following events in addition to any standard DOM events:
+
+- `introstart`
+- `introend`
+- `outrostart`
+- `outroend`
+
+```svelte
+{#if visible}
+ <p
+ transition:fly={{ y: 200, duration: 2000 }}
+ onintrostart={() => (status = 'intro started')}
+ onoutrostart={() => (status = 'outro started')}
+ onintroend={() => (status = 'intro ended')}
+ onoutroend={() => (status = 'outro ended')}
+ >
+ Flies in and out
+ </p>
+{/if}
+```
diff --git a/documentation/docs/03-template-syntax/14-in-and-out.md b/documentation/docs/03-template-syntax/14-in-and-out.md
new file mode 100644
index 000000000000..f4e37c845ee8
--- /dev/null
+++ b/documentation/docs/03-template-syntax/14-in-and-out.md
@@ -0,0 +1,22 @@
+---
+title: in: and out:
+---
+
+The `in:` and `out:` directives are identical to [`transition:`](transition), except that the resulting transitions are not bidirectional — an `in` transition will continue to 'play' alongside the `out` transition, rather than reversing, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.
+
+```svelte
+<script>
+ import { fade, fly } from 'svelte/transition';
+
+ let visible = $state(false);
+</script>
+
+<label>
+ <input type="checkbox" bind:checked={visible}>
+ visible
+</label>
+
+{#if visible}
+ <div in:fly={{ y: 200 }} out:fade>flies in, fades out</div>
+{/if}
+```
diff --git a/documentation/docs/03-template-syntax/15-animate.md b/documentation/docs/03-template-syntax/15-animate.md
new file mode 100644
index 000000000000..a54e37f0b12d
--- /dev/null
+++ b/documentation/docs/03-template-syntax/15-animate.md
@@ -0,0 +1,114 @@
+---
+title: animate:
+---
+
+An animation is triggered when the contents of a [keyed each block](each#Keyed-each-blocks) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an _immediate_ child of a keyed each block.
+
+Animations can be used with Svelte's [built-in animation functions](svelte-animate) or [custom animation functions](#Custom-animation-functions).
+
+```svelte
+<!-- When `list` is reordered the animation will run -->
+{#each list as item, index (item)}
+ <li animate:flip>{item}</li>
+{/each}
+```
+
+## Animation Parameters
+
+As with actions and transitions, animations can have parameters.
+
+(The double `{{curlies}}` aren't a special syntax; this is an object literal inside an expression tag.)
+
+```svelte
+{#each list as item, index (item)}
+ <li animate:flip={{ delay: 500 }}>{item}</li>
+{/each}
+```
+
+## Custom animation functions
+
+```js
+/// copy: false
+// @noErrors
+animation = (node: HTMLElement, { from: DOMRect, to: DOMRect } , params: any) => {
+ delay?: number,
+ duration?: number,
+ easing?: (t: number) => number,
+ css?: (t: number, u: number) => string,
+ tick?: (t: number, u: number) => void
+}
+```
+
+Animations can use custom functions that provide the `node`, an `animation` object and any `parameters` as arguments. The `animation` parameter is an object containing `from` and `to` properties each containing a [DOMRect](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect#Properties) describing the geometry of the element in its `start` and `end` positions. The `from` property is the DOMRect of the element in its starting position, and the `to` property is the DOMRect of the element in its final position after the list has been reordered and the DOM updated.
+
+If the returned object has a `css` method, Svelte will create a [web animation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) that plays on the element.
+
+The `t` argument passed to `css` is a value that goes from `0` and `1` after the `easing` function has been applied. The `u` argument is equal to `1 - t`.
+
+The function is called repeatedly _before_ the animation begins, with different `t` and `u` arguments.
+
+<!-- TODO: Types -->
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+ import { cubicOut } from 'svelte/easing';
+
+ /**
+ * @param {HTMLElement} node
+ * @param {{ from: DOMRect; to: DOMRect }} states
+ * @param {any} params
+ */
+ function whizz(node, { from, to }, params) {
+ const dx = from.left - to.left;
+ const dy = from.top - to.top;
+
+ const d = Math.sqrt(dx * dx + dy * dy);
+
+ return {
+ delay: 0,
+ duration: Math.sqrt(d) * 120,
+ easing: cubicOut,
+ css: (t, u) => `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t * 360}deg);`
+ };
+ }
+</script>
+
+{#each list as item, index (item)}
+ <div animate:whizz>{item}</div>
+{/each}
+```
+
+A custom animation function can also return a `tick` function, which is called _during_ the animation with the same `t` and `u` arguments.
+
+> [!NOTE] If it's possible to use `css` instead of `tick`, do so — web animations can run off the main thread, preventing jank on slower devices.
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+ import { cubicOut } from 'svelte/easing';
+
+ /**
+ * @param {HTMLElement} node
+ * @param {{ from: DOMRect; to: DOMRect }} states
+ * @param {any} params
+ */
+ function whizz(node, { from, to }, params) {
+ const dx = from.left - to.left;
+ const dy = from.top - to.top;
+
+ const d = Math.sqrt(dx * dx + dy * dy);
+
+ return {
+ delay: 0,
+ duration: Math.sqrt(d) * 120,
+ easing: cubicOut,
+ tick: (t, u) => Object.assign(node.style, { color: t > 0.5 ? 'Pink' : 'Blue' })
+ };
+ }
+</script>
+
+{#each list as item, index (item)}
+ <div animate:whizz>{item}</div>
+{/each}
+```
diff --git a/documentation/docs/03-template-syntax/17-style.md b/documentation/docs/03-template-syntax/17-style.md
new file mode 100644
index 000000000000..749376c6e2a6
--- /dev/null
+++ b/documentation/docs/03-template-syntax/17-style.md
@@ -0,0 +1,41 @@
+---
+title: style:
+---
+
+The `style:` directive provides a shorthand for setting multiple styles on an element.
+
+```svelte
+<!-- These are equivalent -->
+<div style:color="red">...</div>
+<div style="color: red;">...</div>
+```
+
+The value can contain arbitrary expressions:
+
+```svelte
+<div style:color={myColor}>...</div>
+```
+
+The shorthand form is allowed:
+
+```svelte
+<div style:color>...</div>
+```
+
+Multiple styles can be set on a single element:
+
+```svelte
+<div style:color style:width="12rem" style:background-color={darkMode ? 'black' : 'white'}>...</div>
+```
+
+To mark a style as important, use the `|important` modifier:
+
+```svelte
+<div style:color|important="red">...</div>
+```
+
+When `style:` directives are combined with `style` attributes, the directives will take precedence:
+
+```svelte
+<div style="color: blue;" style:color="red">This will be red</div>
+```
diff --git a/documentation/docs/03-template-syntax/18-class.md b/documentation/docs/03-template-syntax/18-class.md
new file mode 100644
index 000000000000..1ea4a208dfdc
--- /dev/null
+++ b/documentation/docs/03-template-syntax/18-class.md
@@ -0,0 +1,102 @@
+---
+title: class
+---
+
+There are two ways to set classes on elements: the `class` attribute, and the `class:` directive.
+
+## Attributes
+
+Primitive values are treated like any other attribute:
+
+```svelte
+<div class={large ? 'large' : 'small'}>...</div>
+```
+
+> [!NOTE]
+> For historical reasons, falsy values (like `false` and `NaN`) are stringified (`class="false"`), though `class={undefined}` (or `null`) cause the attribute to be omitted altogether. In a future version of Svelte, all falsy values will cause `class` to be omitted.
+
+### Objects and arrays
+
+Since Svelte 5.16, `class` can be an object or array, and is converted to a string using [clsx](https://github.com/lukeed/clsx).
+
+If the value is an object, the truthy keys are added:
+
+```svelte
+<script>
+ let { cool } = $props();
+</script>
+
+<!-- results in `class="cool"` if `cool` is truthy,
+ `class="lame"` otherwise -->
+<div class={{ cool, lame: !cool }}>...</div>
+```
+
+If the value is an array, the truthy values are combined:
+
+```svelte
+<!-- if `faded` and `large` are both truthy, results in
+ `class="saturate-0 opacity-50 scale-200"` -->
+<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>...</div>
+```
+
+Note that whether we're using the array or object form, we can set multiple classes simultaneously with a single condition, which is particularly useful if you're using things like Tailwind.
+
+Arrays can contain arrays and objects, and clsx will flatten them. This is useful for combining local classes with props, for example:
+
+```svelte
+<!--- file: Button.svelte --->
+<script>
+ let props = $props();
+</script>
+
+<button {...props} class={['cool-button', props.class]}>
+ {@render props.children?.()}
+</button>
+```
+
+The user of this component has the same flexibility to use a mixture of objects, arrays and strings:
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+ import Button from './Button.svelte';
+ let useTailwind = $state(false);
+</script>
+
+<Button
+ onclick={() => useTailwind = true}
+ class={{ 'bg-blue-700 sm:w-1/2': useTailwind }}
+>
+ Accept the inevitability of Tailwind
+</Button>
+```
+
+Svelte also exposes the `ClassValue` type, which is the type of value that the `class` attribute on elements accept. This is useful if you want to use a type-safe class name in component props:
+
+```svelte
+<script lang="ts">
+ import type { ClassValue } from 'svelte/elements';
+
+ const props: { class: ClassValue } = $props();
+</script>
+
+<div class={['original', props.class]}>...</div>
+```
+
+## The `class:` directive
+
+Prior to Svelte 5.16, the `class:` directive was the most convenient way to set classes on elements conditionally.
+
+```svelte
+<!-- These are equivalent -->
+<div class={{ cool, lame: !cool }}>...</div>
+<div class:cool={cool} class:lame={!cool}>...</div>
+```
+
+As with other directives, we can use a shorthand when the name of the class coincides with the value:
+
+```svelte
+<div class:cool class:lame={!cool}>...</div>
+```
+
+> [!NOTE] Unless you're using an older version of Svelte, consider avoiding `class:`, since the attribute is more powerful and composable.
diff --git a/documentation/docs/03-template-syntax/index.md b/documentation/docs/03-template-syntax/index.md
new file mode 100644
index 000000000000..3c4523cb9275
--- /dev/null
+++ b/documentation/docs/03-template-syntax/index.md
@@ -0,0 +1,3 @@
+---
+title: Template syntax
+---
diff --git a/documentation/docs/03-template-syntax/xx-control-flow.md b/documentation/docs/03-template-syntax/xx-control-flow.md
new file mode 100644
index 000000000000..b73917997bc5
--- /dev/null
+++ b/documentation/docs/03-template-syntax/xx-control-flow.md
@@ -0,0 +1,111 @@
+---
+title: Control flow
+---
+
+- if
+- each
+- await (or move that into some kind of data loading section?)
+- NOT: key (move into transition section, because that's the common use case)
+
+Svelte augments HTML with control flow blocks to be able to express conditionally rendered content or lists.
+
+The syntax between these blocks is the same:
+
+- `{#` denotes the start of a block
+- `{:` denotes a different branch part of the block. Depending on the block, there can be multiple of these
+- `{/` denotes the end of a block
+
+## {#if ...}
+
+## {#each ...}
+
+```svelte
+<!--- copy: false --->
+{#each expression as name}...{/each}
+```
+
+```svelte
+<!--- copy: false --->
+{#each expression as name, index}...{/each}
+```
+
+```svelte
+<!--- copy: false --->
+{#each expression as name (key)}...{/each}
+```
+
+```svelte
+<!--- copy: false --->
+{#each expression as name, index (key)}...{/each}
+```
+
+```svelte
+<!--- copy: false --->
+{#each expression as name}...{:else}...{/each}
+```
+
+Iterating over lists of values can be done with an each block.
+
+```svelte
+<h1>Shopping list</h1>
+<ul>
+ {#each items as item}
+ <li>{item.name} x {item.qty}</li>
+ {/each}
+</ul>
+```
+
+You can use each blocks to iterate over any array or array-like value — that is, any object with a `length` property.
+
+An each block can also specify an _index_, equivalent to the second argument in an `array.map(...)` callback:
+
+```svelte
+{#each items as item, i}
+ <li>{i + 1}: {item.name} x {item.qty}</li>
+{/each}
+```
+
+If a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to diff the list when data changes, rather than adding or removing items at the end. The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.
+
+```svelte
+{#each items as item (item.id)}
+ <li>{item.name} x {item.qty}</li>
+{/each}
+
+<!-- or with additional index value -->
+{#each items as item, i (item.id)}
+ <li>{i + 1}: {item.name} x {item.qty}</li>
+{/each}
+```
+
+You can freely use destructuring and rest patterns in each blocks.
+
+```svelte
+{#each items as { id, name, qty }, i (id)}
+ <li>{i + 1}: {name} x {qty}</li>
+{/each}
+
+{#each objects as { id, ...rest }}
+ <li><span>{id}</span><MyComponent {...rest} /></li>
+{/each}
+
+{#each items as [id, ...rest]}
+ <li><span>{id}</span><MyComponent values={rest} /></li>
+{/each}
+```
+
+An each block can also have an `{:else}` clause, which is rendered if the list is empty.
+
+```svelte
+{#each todos as todo}
+ <p>{todo.text}</p>
+{:else}
+ <p>No tasks today!</p>
+{/each}
+```
+
+It is possible to iterate over iterables like `Map` or `Set`. Iterables need to be finite and static (they shouldn't change while being iterated over). Under the hood, they are transformed to an array using `Array.from` before being passed off to rendering. If you're writing performance-sensitive code, try to avoid iterables and use regular arrays as they are more performant.
+
+## Other block types
+
+Svelte also provides [`#snippet`](snippets), [`#key`](transitions-and-animations) and [`#await`](data-fetching) blocks. You can find out more about them in their respective sections.
diff --git a/documentation/docs/03-template-syntax/xx-data-fetching.md b/documentation/docs/03-template-syntax/xx-data-fetching.md
new file mode 100644
index 000000000000..4526d5133561
--- /dev/null
+++ b/documentation/docs/03-template-syntax/xx-data-fetching.md
@@ -0,0 +1,20 @@
+---
+title: Data fetching
+---
+
+Fetching data is a fundamental part of apps interacting with the outside world. Svelte is unopinionated with how you fetch your data. The simplest way would be using the built-in `fetch` method:
+
+```svelte
+<script>
+ let response = $state();
+ fetch('/api/data').then(async (r) => (response = r.json()));
+</script>
+```
+
+While this works, it makes working with promises somewhat unergonomic. Svelte alleviates this problem using the `#await` block.
+
+## {#await ...}
+
+## SvelteKit loaders
+
+Fetching inside your components is great for simple use cases, but it's prone to data loading waterfalls and makes code harder to work with because of the promise handling. SvelteKit solves this problem by providing a opinionated data loading story that is coupled to its router. Learn more about it [in the docs](../kit).
diff --git a/documentation/docs/04-styling/01-scoped-styles.md b/documentation/docs/04-styling/01-scoped-styles.md
new file mode 100644
index 000000000000..eae26d0cb1ca
--- /dev/null
+++ b/documentation/docs/04-styling/01-scoped-styles.md
@@ -0,0 +1,39 @@
+---
+title: Scoped styles
+---
+
+Svelte components can include a `<style>` element containing CSS that belongs to the component. This CSS is _scoped_ by default, meaning that styles will not apply to any elements on the page outside the component in question.
+
+This works by adding a class to affected elements, which is based on a hash of the component styles (e.g. `svelte-123xyz`).
+
+```svelte
+<style>
+ p {
+ /* this will only affect <p> elements in this component */
+ color: burlywood;
+ }
+</style>
+```
+
+## Specificity
+
+Each scoped selector receives a [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) increase of 0-1-0, as a result of the scoping class (e.g. `.svelte-123xyz`) being added to the selector. This means that (for example) a `p` selector defined in a component will take precedence over a `p` selector defined in a global stylesheet, even if the global stylesheet is loaded later.
+
+In some cases, the scoping class must be added to a selector multiple times, but after the first occurrence it is added with `:where(.svelte-xyz123)` in order to not increase specificity further.
+
+## Scoped keyframes
+
+If a component defines `@keyframes`, the name is scoped to the component using the same hashing approach. Any `animation` rules in the component will be similarly adjusted:
+
+```svelte
+<style>
+ .bouncy {
+ animation: bounce 10s;
+ }
+
+ /* these keyframes are only accessible inside this component */
+ @keyframes bounce {
+ /* ... */
+ }
+</style>
+```
diff --git a/documentation/docs/04-styling/02-global-styles.md b/documentation/docs/04-styling/02-global-styles.md
new file mode 100644
index 000000000000..8e9cf8d0cbec
--- /dev/null
+++ b/documentation/docs/04-styling/02-global-styles.md
@@ -0,0 +1,65 @@
+---
+title: Global styles
+---
+
+## :global(...)
+
+To apply styles to a single selector globally, use the `:global(...)` modifier:
+
+```svelte
+<style>
+ :global(body) {
+ /* applies to <body> */
+ margin: 0;
+ }
+
+ div :global(strong) {
+ /* applies to all <strong> elements, in any component,
+ that are inside <div> elements belonging
+ to this component */
+ color: goldenrod;
+ }
+
+ p:global(.big.red) {
+ /* applies to all <p> elements belonging to this component
+ with `class="big red"`, even if it is applied
+ programmatically (for example by a library) */
+ }
+</style>
+```
+
+If you want to make @keyframes that are accessible globally, you need to prepend your keyframe names with `-global-`.
+
+The `-global-` part will be removed when compiled, and the keyframe will then be referenced using just `my-animation-name` elsewhere in your code.
+
+```svelte
+<style>
+ @keyframes -global-my-animation-name {
+ /* code goes here */
+ }
+</style>
+```
+
+## :global
+
+To apply styles to a group of selectors globally, create a `:global {...}` block:
+
+```svelte
+<style>
+ :global {
+ /* applies to every <div> in your application */
+ div { ... }
+
+ /* applies to every <p> in your application */
+ p { ... }
+ }
+
+ .a :global {
+ /* applies to every `.b .c .d` element, in any component,
+ that is inside an `.a` element in this component */
+ .b .c .d {...}
+ }
+</style>
+```
+
+> [!NOTE] The second example above could also be written as an equivalent `.a :global .b .c .d` selector, where everything after the `:global` is unscoped, though the nested form is preferred.
diff --git a/documentation/docs/04-styling/03-custom-properties.md b/documentation/docs/04-styling/03-custom-properties.md
new file mode 100644
index 000000000000..49984c6ce4bc
--- /dev/null
+++ b/documentation/docs/04-styling/03-custom-properties.md
@@ -0,0 +1,57 @@
+---
+title: Custom properties
+---
+
+You can pass CSS custom properties — both static and dynamic — to components:
+
+```svelte
+<Slider
+ bind:value
+ min={0}
+ max={100}
+ --track-color="black"
+ --thumb-color="rgb({r} {g} {b})"
+/>
+```
+
+The above code essentially desugars to this:
+
+```svelte
+<svelte-css-wrapper style="display: contents; --track-color: black; --thumb-color: rgb({r} {g} {b})">
+ <Slider
+ bind:value
+ min={0}
+ max={100}
+ />
+</svelte-css-wrapper>
+```
+
+For an SVG element, it would use `<g>` instead:
+
+```svelte
+<g style="--track-color: black; --thumb-color: rgb({r} {g} {b})">
+ <Slider
+ bind:value
+ min={0}
+ max={100}
+ />
+</g>
+```
+
+Inside the component, we can read these custom properties (and provide fallback values) using [`var(...)`](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties):
+
+```svelte
+<style>
+ .track {
+ background: var(--track-color, #aaa);
+ }
+
+ .thumb {
+ background: var(--thumb-color, blue);
+ }
+</style>
+```
+
+You don't _have_ to specify the values directly on the component; as long as the custom properties are defined on a parent element, the component can use them. It's common to define custom properties on the `:root` element in a global stylesheet so that they apply to your entire application.
+
+> [!NOTE] While the extra element will not affect layout, it _will_ affect any CSS selectors that (for example) use the `>` combinator to target an element directly inside the component's container.
diff --git a/documentation/docs/04-styling/04-nested-style-elements.md b/documentation/docs/04-styling/04-nested-style-elements.md
new file mode 100644
index 000000000000..4fc5cfa5213a
--- /dev/null
+++ b/documentation/docs/04-styling/04-nested-style-elements.md
@@ -0,0 +1,21 @@
+---
+title: Nested <style> elements
+---
+
+There can only be one top-level `<style>` tag per component.
+
+However, it is possible to have a `<style>` tag nested inside other elements or logic blocks.
+
+In that case, the `<style>` tag will be inserted as-is into the DOM; no scoping or processing will be done on the `<style>` tag.
+
+```svelte
+<div>
+ <style>
+ /* this style tag will be inserted as-is */
+ div {
+ /* this will apply to all `<div>` elements in the DOM */
+ color: red;
+ }
+ </style>
+</div>
+```
diff --git a/documentation/docs/04-styling/index.md b/documentation/docs/04-styling/index.md
new file mode 100644
index 000000000000..5245bd516b53
--- /dev/null
+++ b/documentation/docs/04-styling/index.md
@@ -0,0 +1,3 @@
+---
+title: Styling
+---
diff --git a/documentation/docs/05-special-elements/01-svelte-boundary.md b/documentation/docs/05-special-elements/01-svelte-boundary.md
new file mode 100644
index 000000000000..f5439b4b83e7
--- /dev/null
+++ b/documentation/docs/05-special-elements/01-svelte-boundary.md
@@ -0,0 +1,82 @@
+---
+title: <svelte:boundary>
+---
+
+```svelte
+<svelte:boundary onerror={handler}>...</svelte:boundary>
+```
+
+> [!NOTE]
+> This feature was added in 5.3.0
+
+Boundaries allow you to guard against errors in part of your app from breaking the app as a whole, and to recover from those errors.
+
+If an error occurs while rendering or updating the children of a `<svelte:boundary>`, or running any [`$effect`]($effect) functions contained therein, the contents will be removed.
+
+Errors occurring outside the rendering process (for example, in event handlers or after a `setTimeout` or async work) are _not_ caught by error boundaries.
+
+## Properties
+
+For the boundary to do anything, one or both of `failed` and `onerror` must be provided.
+
+### `failed`
+
+If a `failed` snippet is provided, it will be rendered with the error that was thrown, and a `reset` function that recreates the contents ([demo](/playground/hello-world#H4sIAAAAAAAAE3VRy26DMBD8lS2tFCIh6JkAUlWp39Cq9EBg06CAbdlLArL87zWGKk8ORnhmd3ZnrD1WtOjFXqKO2BDGW96xqpBD5gXerm5QefG39mgQY9EIWHxueRMinLosti0UPsJLzggZKTeilLWgLGc51a3gkuCjKQ7DO7cXZotgJ3kLqzC6hmex1SZnSXTWYHcrj8LJjWTk0PHoZ8VqIdCOKayPykcpuQxAokJaG1dGybYj4gw4K5u6PKTasSbjXKgnIDlA8VvUdo-pzonraBY2bsH7HAl78mKSHZpgIcuHjq9jXSpZSLixRlveKYQUXhQVhL6GPobXAAb7BbNeyvNUs4qfRg3OnELLj5hqH9eQZqCnoBwR9lYcQxuVXeBzc8kMF8yXY4yNJ5oGiUzP_aaf_waTRGJib5_Ad3P_vbCuaYxzeNpbU0eUMPAOKh7Yw1YErgtoXyuYlPLzc10_xo_5A91zkQL_AgAA)):
+
+```svelte
+<svelte:boundary>
+ <FlakyComponent />
+
+ {#snippet failed(error, reset)}
+ <button onclick={reset}>oops! try again</button>
+ {/snippet}
+</svelte:boundary>
+```
+
+> [!NOTE]
+> As with [snippets passed to components](snippet#Passing-snippets-to-components), the `failed` snippet can be passed explicitly as a property...
+>
+> ```svelte
+> <svelte:boundary {failed}>...</svelte:boundary>
+> ```
+>
+> ...or implicitly by declaring it directly inside the boundary, as in the example above.
+
+### `onerror`
+
+If an `onerror` function is provided, it will be called with the same two `error` and `reset` arguments. This is useful for tracking the error with an error reporting service...
+
+```svelte
+<svelte:boundary onerror={(e) => report(e)}>
+ ...
+</svelte:boundary>
+```
+
+...or using `error` and `reset` outside the boundary itself:
+
+```svelte
+<script>
+ let error = $state(null);
+ let reset = $state(() => {});
+
+ function onerror(e, r) {
+ error = e;
+ reset = r;
+ }
+</script>
+
+<svelte:boundary {onerror}>
+ <FlakyComponent />
+</svelte:boundary>
+
+{#if error}
+ <button onclick={() => {
+ error = null;
+ reset();
+ }}>
+ oops! try again
+ </button>
+{/if}
+```
+
+If an error occurs inside the `onerror` function (or if you rethrow the error), it will be handled by a parent boundary if such exists.
diff --git a/documentation/docs/05-special-elements/02-svelte-window.md b/documentation/docs/05-special-elements/02-svelte-window.md
new file mode 100644
index 000000000000..d4aab36f3b27
--- /dev/null
+++ b/documentation/docs/05-special-elements/02-svelte-window.md
@@ -0,0 +1,44 @@
+---
+title: <svelte:window>
+---
+
+```svelte
+<svelte:window onevent={handler} />
+```
+
+```svelte
+<svelte:window bind:prop={value} />
+```
+
+The `<svelte:window>` element allows you to add event listeners to the `window` object without worrying about removing them when the component is destroyed, or checking for the existence of `window` when server-side rendering.
+
+This element may only appear at the top level of your component — it cannot be inside a block or element.
+
+```svelte
+<script>
+ function handleKeydown(event) {
+ alert(`pressed the ${event.key} key`);
+ }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+```
+
+You can also bind to the following properties:
+
+- `innerWidth`
+- `innerHeight`
+- `outerWidth`
+- `outerHeight`
+- `scrollX`
+- `scrollY`
+- `online` — an alias for `window.navigator.onLine`
+- `devicePixelRatio`
+
+All except `scrollX` and `scrollY` are readonly.
+
+```svelte
+<svelte:window bind:scrollY={y} />
+```
+
+> [!NOTE] Note that the page will not be scrolled to the initial value to avoid accessibility issues. Only subsequent changes to the bound variable of `scrollX` and `scrollY` will cause scrolling. If you have a legitimate reason to scroll when the component is rendered, call `scrollTo()` in an `$effect`.
diff --git a/documentation/docs/05-special-elements/03-svelte-document.md b/documentation/docs/05-special-elements/03-svelte-document.md
new file mode 100644
index 000000000000..43f02865e6ef
--- /dev/null
+++ b/documentation/docs/05-special-elements/03-svelte-document.md
@@ -0,0 +1,28 @@
+---
+title: <svelte:document>
+---
+
+```svelte
+<svelte:document onevent={handler} />
+```
+
+```svelte
+<svelte:document bind:prop={value} />
+```
+
+Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document`, such as `visibilitychange`, which don't fire on `window`. It also lets you use [actions](use) on `document`.
+
+As with `<svelte:window>`, this element may only appear the top level of your component and must never be inside a block or element.
+
+```svelte
+<svelte:document onvisibilitychange={handleVisibilityChange} use:someAction />
+```
+
+You can also bind to the following properties:
+
+- `activeElement`
+- `fullscreenElement`
+- `pointerLockElement`
+- `visibilityState`
+
+All are readonly.
diff --git a/documentation/docs/05-special-elements/04-svelte-body.md b/documentation/docs/05-special-elements/04-svelte-body.md
new file mode 100644
index 000000000000..d6536b0b7424
--- /dev/null
+++ b/documentation/docs/05-special-elements/04-svelte-body.md
@@ -0,0 +1,15 @@
+---
+title: <svelte:body>
+---
+
+```svelte
+<svelte:body onevent={handler} />
+```
+
+Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](use) on the `<body>` element.
+
+As with `<svelte:window>` and `<svelte:document>`, this element may only appear the top level of your component and must never be inside a block or element.
+
+```svelte
+<svelte:body onmouseenter={handleMouseenter} onmouseleave={handleMouseleave} use:someAction />
+```
diff --git a/documentation/docs/05-special-elements/05-svelte-head.md b/documentation/docs/05-special-elements/05-svelte-head.md
new file mode 100644
index 000000000000..f7cd7ca20a58
--- /dev/null
+++ b/documentation/docs/05-special-elements/05-svelte-head.md
@@ -0,0 +1,18 @@
+---
+title: <svelte:head>
+---
+
+```svelte
+<svelte:head>...</svelte:head>
+```
+
+This element makes it possible to insert elements into `document.head`. During server-side rendering, `head` content is exposed separately to the main `body` content.
+
+As with `<svelte:window>`, `<svelte:document>` and `<svelte:body>`, this element may only appear at the top level of your component and must never be inside a block or element.
+
+```svelte
+<svelte:head>
+ <title>Hello world!
+
+
+```
diff --git a/documentation/docs/05-special-elements/06-svelte-element.md b/documentation/docs/05-special-elements/06-svelte-element.md
new file mode 100644
index 000000000000..ef7dc320662f
--- /dev/null
+++ b/documentation/docs/05-special-elements/06-svelte-element.md
@@ -0,0 +1,33 @@
+---
+title:
+---
+
+```svelte
+
+```
+
+The `` element lets you render an element that is unknown at author time, for example because it comes from a CMS. Any properties and event listeners present will be applied to the element.
+
+The only supported binding is `bind:this`, since Svelte's built-in bindings do not work with generic elements.
+
+If `this` has a nullish value, the element and its children will not be rendered.
+
+If `this` is the name of a [void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element) (e.g., `br`) and `` has child elements, a runtime error will be thrown in development mode:
+
+```svelte
+
+
+
+ This text cannot appear inside an hr element
+
+```
+
+Svelte tries its best to infer the correct namespace from the element's surroundings, but it's not always possible. You can make it explicit with an `xmlns` attribute:
+
+```svelte
+
+```
+
+`this` needs to be a valid DOM element tag, things like `#text` or `svelte:head` will not work.
diff --git a/documentation/docs/05-special-elements/07-svelte-options.md b/documentation/docs/05-special-elements/07-svelte-options.md
new file mode 100644
index 000000000000..d29042e278d4
--- /dev/null
+++ b/documentation/docs/05-special-elements/07-svelte-options.md
@@ -0,0 +1,27 @@
+---
+title:
+---
+
+```svelte
+
+```
+
+The `` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](svelte-compiler#compile). The possible options are:
+
+- `runes={true}` — forces a component into _runes mode_ (see the [Legacy APIs](legacy-overview) section)
+- `runes={false}` — forces a component into _legacy mode_
+- `namespace="..."` — the namespace where this component will be used, can be "html" (the default), "svg" or "mathml"
+- `customElement={...}` — the [options](custom-elements#Component-options) to use when compiling this component as a custom element. If a string is passed, it is used as the `tag` option
+- `css="injected"` — the component will inject its styles inline: During server side rendering, it's injected as a `
+```
+
+### element_invalid_self_closing_tag
+
+```
+Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...>` rather than `<%name% ... />`
+```
+
+In HTML, there's [no such thing as a self-closing tag](https://jakearchibald.com/2023/against-self-closing-tags-in-html/). While this _looks_ like a self-contained element with some text next to it...
+
+```html
+
+ some text!
+
+```
+
+...a spec-compliant HTML parser (such as a browser) will in fact parse it like this, with the text _inside_ the icon:
+
+```html
+
+ some text!
+
+```
+
+Some templating languages (including Svelte) will 'fix' HTML by turning `` into ``. Others adhere to the spec. Both result in ambiguity and confusion when copy-pasting code between different contexts, and as such Svelte prompts you to resolve the ambiguity directly by having an explicit closing tag.
+
+To automate this, run the dedicated migration:
+
+```bash
+npx sv migrate self-closing-tags
+```
+
+In a future version of Svelte, self-closing tags may be upgraded from a warning to an error.
+
+### event_directive_deprecated
+
+```
+Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead
+```
+
+See [the migration guide](v5-migration-guide#Event-changes) for more info.
+
+### export_let_unused
+
+```
+Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`
+```
+
+### legacy_code
+
+```
+`%code%` is no longer valid — please use `%suggestion%` instead
+```
+
+### legacy_component_creation
+
+```
+Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.
+```
+
+See the [migration guide](v5-migration-guide#Components-are-no-longer-classes) for more info.
+
+### node_invalid_placement_ssr
+
+```
+%message%. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), likely resulting in a `hydration_mismatch` warning
+```
+
+HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
+
+- `
hello
world
` will result in `
hello
world
` (the `
` autoclosed the `
` because `
` cannot contain block-level elements)
+- `` will result in `` (the `
` is removed)
+- `
cell
` will result in `
cell
` (a `` is auto-inserted)
+
+This code will work when the component is rendered on the client (which is why this is a warning rather than an error), but if you use server rendering it will cause hydration to fail.
+
+### non_reactive_update
+
+```
+`%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates
+```
+
+This warning is thrown when the compiler detects the following:
+- a variable was declared without `$state` or `$state.raw`
+- the variable is reassigned
+- the variable is read in a reactive context
+
+In this case, changing the value will not correctly trigger updates. Example:
+
+```svelte
+
+
+
This value updates: {reactive}
+
This value does not update: {stale}
+
+
+```
+
+To fix this, wrap your variable declaration with `$state`.
+
+### options_deprecated_accessors
+
+```
+The `accessors` option has been deprecated. It will have no effect in runes mode
+```
+
+### options_deprecated_immutable
+
+```
+The `immutable` option has been deprecated. It will have no effect in runes mode
+```
+
+### options_missing_custom_element
+
+```
+The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?
+```
+
+### options_removed_enable_sourcemap
+
+```
+The `enableSourcemap` option has been removed. Source maps are always generated now, and tooling can choose to ignore them
+```
+
+### options_removed_hydratable
+
+```
+The `hydratable` option has been removed. Svelte components are always hydratable now
+```
+
+### options_removed_loop_guard_timeout
+
+```
+The `loopGuardTimeout` option has been removed
+```
+
+### options_renamed_ssr_dom
+
+```
+`generate: "dom"` and `generate: "ssr"` options have been renamed to "client" and "server" respectively
+```
+
+### perf_avoid_inline_class
+
+```
+Avoid 'new class' — instead, declare the class at the top level scope
+```
+
+### perf_avoid_nested_class
+
+```
+Avoid declaring classes below the top level scope
+```
+
+### reactive_declaration_invalid_placement
+
+```
+Reactive declarations only exist at the top level of the instance script
+```
+
+### reactive_declaration_module_script_dependency
+
+```
+Reassignments of module-level declarations will not cause reactive statements to update
+```
+
+### script_context_deprecated
+
+```
+`context="module"` is deprecated, use the `module` attribute instead
+```
+
+```svelte
+
+```
+
+### script_unknown_attribute
+
+```
+Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it
+```
+
+### slot_element_deprecated
+
+```
+Using `` to render parent content is deprecated. Use `{@render ...}` tags instead
+```
+
+See [the migration guide](v5-migration-guide#Snippets-instead-of-slots) for more info.
+
+### state_referenced_locally
+
+```
+State referenced in its own scope will never update. Did you mean to reference it inside a closure?
+```
+
+This warning is thrown when the compiler detects the following:
+- A reactive variable is declared
+- the variable is reassigned
+- the variable is referenced inside the same scope it is declared and it is a non-reactive context
+
+In this case, the state reassignment will not be noticed by whatever you passed it to. For example, if you pass the state to a function, that function will not notice the updates:
+
+```svelte
+
+
+
+
+```
+
+```svelte
+
+
+
+
+
The count is {count}
+```
+
+To fix this, reference the variable such that it is lazily evaluated. For the above example, this can be achieved by wrapping `count` in a function:
+
+```svelte
+
+
+
+
+```
+
+```svelte
+
+
+
+
+
The count is {+++count()+++}
+```
+
+For more info, see [Passing state into functions]($state#Passing-state-into-functions).
+
+### store_rune_conflict
+
+```
+It looks like you're using the `$%name%` rune, but there is a local binding called `%name%`. Referencing a local variable with a `$` prefix will create a store subscription. Please rename `%name%` to avoid the ambiguity
+```
+
+### svelte_component_deprecated
+
+```
+`` is deprecated in runes mode — components are dynamic by default
+```
+
+In previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted `` to re-render when `X` changed, you would either have to use `` or put the component inside a `{#key X}...{/key}` block.
+
+In Svelte 5 this is no longer true — if `X` changes, `` re-renders.
+
+In some cases `` syntax can be used as a replacement; a lowercased variable with property access is recognized as a component in Svelte 5.
+
+For complex component resolution logic, an intermediary, capitalized variable may be necessary. E.g. in places where `@const` can be used:
+
+
+```svelte
+{#each items as item}
+ ------
+ +++{@const Component = item.condition ? Y : Z}+++
+ ++++++
+{/each}
+```
+
+A derived value may be used in other contexts:
+
+
+```svelte
+
+
+------
+++++++
+```
+
+### svelte_element_invalid_this
+
+```
+`this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte
+```
+
+### svelte_self_deprecated
+
+```
+`` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead
+```
+
+See [the note in the docs](legacy-svelte-self) for more info.
+
+### unknown_code
+
+```
+`%code%` is not a recognised code
+```
+
+```
+`%code%` is not a recognised code (did you mean `%suggestion%`?)
+```
diff --git a/documentation/docs/98-reference/.generated/server-errors.md b/documentation/docs/98-reference/.generated/server-errors.md
new file mode 100644
index 000000000000..c3e8b53c3145
--- /dev/null
+++ b/documentation/docs/98-reference/.generated/server-errors.md
@@ -0,0 +1,9 @@
+
+
+### lifecycle_function_unavailable
+
+```
+`%name%(...)` is not available on the server
+```
+
+Certain methods such as `mount` cannot be invoked while running in a server context. Avoid calling them eagerly, i.e. not during render.
diff --git a/documentation/docs/98-reference/.generated/shared-errors.md b/documentation/docs/98-reference/.generated/shared-errors.md
new file mode 100644
index 000000000000..0102aafcbca1
--- /dev/null
+++ b/documentation/docs/98-reference/.generated/shared-errors.md
@@ -0,0 +1,67 @@
+
+
+### invalid_default_snippet
+
+```
+Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
+```
+
+This error would be thrown in a setup like this:
+
+```svelte
+
+
+ {entry}
+
+```
+
+```svelte
+
+
+
+
+ {#each items as item}
+
{@render children(item)}
+ {/each}
+
+```
+
+Here, `List.svelte` is using `{@render children(item)` which means it expects `Parent.svelte` to use snippets. Instead, `Parent.svelte` uses the deprecated `let:` directive. This combination of APIs is incompatible, hence the error.
+
+### lifecycle_outside_component
+
+```
+`%name%(...)` can only be used during component initialisation
+```
+
+Certain lifecycle methods can only be used during component initialisation. To fix this, make sure you're invoking the method inside the _top level of the instance script_ of your component.
+
+```svelte
+
+
+
+```
+
+### store_invalid_shape
+
+```
+`%name%` is not a store with a `subscribe` method
+```
+
+### svelte_element_invalid_this_value
+
+```
+The `this` prop on `` must be a string, if defined
+```
diff --git a/documentation/docs/98-reference/.generated/shared-warnings.md b/documentation/docs/98-reference/.generated/shared-warnings.md
new file mode 100644
index 000000000000..f449a4031ebf
--- /dev/null
+++ b/documentation/docs/98-reference/.generated/shared-warnings.md
@@ -0,0 +1,28 @@
+
+
+### dynamic_void_element_content
+
+```
+`` is a void element — it cannot have content
+```
+
+Elements such as `` cannot have content, any children passed to these elements will be ignored.
+
+### state_snapshot_uncloneable
+
+```
+Value cannot be cloned with `$state.snapshot` — the original value was returned
+```
+
+```
+The following properties cannot be cloned with `$state.snapshot` — the return value contains the originals:
+
+%properties%
+```
+
+`$state.snapshot` tries to clone the given value in order to return a reference that no longer changes. Certain objects may not be cloneable, in which case the original value is returned. In the following example, `property` is cloned, but `window` is not, because DOM elements are uncloneable:
+
+```js
+const object = $state({ property: 'this is cloneable', window })
+const snapshot = $state.snapshot(object);
+```
diff --git a/documentation/docs/98-reference/20-svelte.md b/documentation/docs/98-reference/20-svelte.md
new file mode 100644
index 000000000000..3295ab68de65
--- /dev/null
+++ b/documentation/docs/98-reference/20-svelte.md
@@ -0,0 +1,5 @@
+---
+title: svelte
+---
+
+> MODULE: svelte
diff --git a/documentation/docs/98-reference/21-svelte-action.md b/documentation/docs/98-reference/21-svelte-action.md
new file mode 100644
index 000000000000..53423ec4090e
--- /dev/null
+++ b/documentation/docs/98-reference/21-svelte-action.md
@@ -0,0 +1,5 @@
+---
+title: svelte/action
+---
+
+> MODULE: svelte/action
diff --git a/documentation/docs/98-reference/21-svelte-animate.md b/documentation/docs/98-reference/21-svelte-animate.md
new file mode 100644
index 000000000000..e8f135d07de0
--- /dev/null
+++ b/documentation/docs/98-reference/21-svelte-animate.md
@@ -0,0 +1,5 @@
+---
+title: svelte/animate
+---
+
+> MODULE: svelte/animate
diff --git a/documentation/docs/98-reference/21-svelte-compiler.md b/documentation/docs/98-reference/21-svelte-compiler.md
new file mode 100644
index 000000000000..a6cc99d3b155
--- /dev/null
+++ b/documentation/docs/98-reference/21-svelte-compiler.md
@@ -0,0 +1,5 @@
+---
+title: svelte/compiler
+---
+
+> MODULE: svelte/compiler
diff --git a/documentation/docs/98-reference/21-svelte-easing.md b/documentation/docs/98-reference/21-svelte-easing.md
new file mode 100644
index 000000000000..3f47963cde9a
--- /dev/null
+++ b/documentation/docs/98-reference/21-svelte-easing.md
@@ -0,0 +1,5 @@
+---
+title: svelte/easing
+---
+
+> MODULE: svelte/easing
diff --git a/documentation/docs/98-reference/21-svelte-events.md b/documentation/docs/98-reference/21-svelte-events.md
new file mode 100644
index 000000000000..00c7a14ee203
--- /dev/null
+++ b/documentation/docs/98-reference/21-svelte-events.md
@@ -0,0 +1,5 @@
+---
+title: svelte/events
+---
+
+> MODULE: svelte/events
diff --git a/documentation/docs/98-reference/21-svelte-legacy.md b/documentation/docs/98-reference/21-svelte-legacy.md
new file mode 100644
index 000000000000..f313baca0b45
--- /dev/null
+++ b/documentation/docs/98-reference/21-svelte-legacy.md
@@ -0,0 +1,7 @@
+---
+title: svelte/legacy
+---
+
+This module provides various functions for use during the migration, since some features can't be replaced one to one with new features. All imports are marked as deprecated and should be migrated away from over time.
+
+> MODULE: svelte/legacy
diff --git a/documentation/docs/98-reference/21-svelte-motion.md b/documentation/docs/98-reference/21-svelte-motion.md
new file mode 100644
index 000000000000..f1d5a6ce5757
--- /dev/null
+++ b/documentation/docs/98-reference/21-svelte-motion.md
@@ -0,0 +1,5 @@
+---
+title: svelte/motion
+---
+
+> MODULE: svelte/motion
diff --git a/documentation/docs/98-reference/21-svelte-reactivity-window.md b/documentation/docs/98-reference/21-svelte-reactivity-window.md
new file mode 100644
index 000000000000..cc544dc5ba3f
--- /dev/null
+++ b/documentation/docs/98-reference/21-svelte-reactivity-window.md
@@ -0,0 +1,15 @@
+---
+title: svelte/reactivity/window
+---
+
+This module exports reactive versions of various `window` values, each of which has a reactive `current` property that you can reference in reactive contexts (templates, [deriveds]($derived) and [effects]($effect)) without using [``](svelte-window) bindings or manually creating your own event listeners.
+
+```svelte
+
+
+
{innerWidth.current}x{innerHeight.current}
+```
+
+> MODULE: svelte/reactivity/window
diff --git a/documentation/docs/98-reference/21-svelte-reactivity.md b/documentation/docs/98-reference/21-svelte-reactivity.md
new file mode 100644
index 000000000000..6857c1dba80d
--- /dev/null
+++ b/documentation/docs/98-reference/21-svelte-reactivity.md
@@ -0,0 +1,25 @@
+---
+title: svelte/reactivity
+---
+
+Svelte provides reactive versions of various built-ins like `SvelteMap`, `SvelteSet` and `SvelteURL`. These can be imported from `svelte/reactivity` and used just like their native counterparts.
+
+```svelte
+
+
+
+
+
+
+
+
+
+
+
+```
+
+> MODULE: svelte/reactivity
diff --git a/documentation/docs/98-reference/21-svelte-server.md b/documentation/docs/98-reference/21-svelte-server.md
new file mode 100644
index 000000000000..7a3fc3c6a2ba
--- /dev/null
+++ b/documentation/docs/98-reference/21-svelte-server.md
@@ -0,0 +1,5 @@
+---
+title: svelte/server
+---
+
+> MODULE: svelte/server
diff --git a/documentation/docs/98-reference/21-svelte-store.md b/documentation/docs/98-reference/21-svelte-store.md
new file mode 100644
index 000000000000..23ff6c5e376f
--- /dev/null
+++ b/documentation/docs/98-reference/21-svelte-store.md
@@ -0,0 +1,5 @@
+---
+title: svelte/store
+---
+
+> MODULE: svelte/store
diff --git a/documentation/docs/98-reference/21-svelte-transition.md b/documentation/docs/98-reference/21-svelte-transition.md
new file mode 100644
index 000000000000..396bc0aebf69
--- /dev/null
+++ b/documentation/docs/98-reference/21-svelte-transition.md
@@ -0,0 +1,5 @@
+---
+title: svelte/transition
+---
+
+> MODULE: svelte/transition
diff --git a/documentation/docs/98-reference/30-compiler-errors.md b/documentation/docs/98-reference/30-compiler-errors.md
new file mode 100644
index 000000000000..ae22029155d3
--- /dev/null
+++ b/documentation/docs/98-reference/30-compiler-errors.md
@@ -0,0 +1,5 @@
+---
+title: 'Compiler errors'
+---
+
+@include .generated/compile-errors.md
diff --git a/documentation/docs/98-reference/30-compiler-warnings.md b/documentation/docs/98-reference/30-compiler-warnings.md
new file mode 100644
index 000000000000..43ba71250f5b
--- /dev/null
+++ b/documentation/docs/98-reference/30-compiler-warnings.md
@@ -0,0 +1,21 @@
+---
+title: 'Compiler warnings'
+---
+
+Svelte warns you at compile time if it catches potential mistakes, such as writing inaccessible markup.
+
+Some warnings may be incorrect in your concrete use case. You can disable such false positives by placing a `` comment above the line that causes the warning. Example:
+
+```svelte
+
+
+```
+
+You can list multiple rules in a single comment (separated by commas), and add an explanatory note (in parentheses) alongside them:
+
+```svelte
+
+
...
+```
+
+@include .generated/compile-warnings.md
diff --git a/documentation/docs/98-reference/30-runtime-errors.md b/documentation/docs/98-reference/30-runtime-errors.md
new file mode 100644
index 000000000000..43ce98958751
--- /dev/null
+++ b/documentation/docs/98-reference/30-runtime-errors.md
@@ -0,0 +1,15 @@
+---
+title: 'Runtime errors'
+---
+
+## Client errors
+
+@include .generated/client-errors.md
+
+## Server errors
+
+@include .generated/server-errors.md
+
+## Shared errors
+
+@include .generated/shared-errors.md
diff --git a/documentation/docs/98-reference/30-runtime-warnings.md b/documentation/docs/98-reference/30-runtime-warnings.md
new file mode 100644
index 000000000000..edc5890ac0fa
--- /dev/null
+++ b/documentation/docs/98-reference/30-runtime-warnings.md
@@ -0,0 +1,11 @@
+---
+title: 'Runtime warnings'
+---
+
+## Client warnings
+
+@include .generated/client-warnings.md
+
+## Shared warnings
+
+@include .generated/shared-warnings.md
diff --git a/documentation/docs/98-reference/index.md b/documentation/docs/98-reference/index.md
new file mode 100644
index 000000000000..b98302768eb0
--- /dev/null
+++ b/documentation/docs/98-reference/index.md
@@ -0,0 +1,3 @@
+---
+title: Reference
+---
diff --git a/documentation/docs/99-legacy/00-legacy-overview.md b/documentation/docs/99-legacy/00-legacy-overview.md
new file mode 100644
index 000000000000..638a77ec1a76
--- /dev/null
+++ b/documentation/docs/99-legacy/00-legacy-overview.md
@@ -0,0 +1,14 @@
+---
+title: Overview
+---
+
+Svelte 5 introduced some significant changes to Svelte's API, including [runes](what-are-runes), [snippets](snippet) and event attributes. As a result, some Svelte 3/4 features are deprecated (though supported for now, unless otherwise specified) and will eventually be removed. We recommend that you incrementally [migrate your existing code](v5-migration-guide).
+
+The following pages document these features for
+
+- people still using Svelte 3/4
+- people using Svelte 5, but with components that haven't yet been migrated
+
+Since Svelte 3/4 syntax still works in Svelte 5, we will distinguish between _legacy mode_ and _runes mode_. Once a component is in runes mode (which you can opt into by using runes, or by explicitly setting the `runes: true` compiler option), legacy mode features are no longer available.
+
+If you're exclusively interested in the Svelte 3/4 syntax, you can browse its documentation at [v4.svelte.dev](https://v4.svelte.dev).
diff --git a/documentation/docs/99-legacy/01-legacy-let.md b/documentation/docs/99-legacy/01-legacy-let.md
new file mode 100644
index 000000000000..0d1a0a72bf11
--- /dev/null
+++ b/documentation/docs/99-legacy/01-legacy-let.md
@@ -0,0 +1,34 @@
+---
+title: Reactive let/var declarations
+---
+
+In runes mode, reactive state is explicitly declared with the [`$state` rune]($state).
+
+In legacy mode, variables declared at the top level of a component are automatically considered _reactive_. Reassigning or mutating these variables (`count += 1` or `object.x = y`) will cause the UI to update.
+
+```svelte
+
+
+
+```
+
+Because Svelte's legacy mode reactivity is based on _assignments_, using array methods like `.push()` and `.splice()` won't automatically trigger updates. A subsequent assignment is required to 'tell' the compiler to update the UI:
+
+```svelte
+
+```
diff --git a/documentation/docs/99-legacy/02-legacy-reactive-assignments.md b/documentation/docs/99-legacy/02-legacy-reactive-assignments.md
new file mode 100644
index 000000000000..5abd481bfc74
--- /dev/null
+++ b/documentation/docs/99-legacy/02-legacy-reactive-assignments.md
@@ -0,0 +1,87 @@
+---
+title: Reactive $: statements
+---
+
+In runes mode, reactions to state updates are handled with the [`$derived`]($derived) and [`$effect`]($effect) runes.
+
+In legacy mode, any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with a `$:` [label](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label). These statements run after other code in the `
+```
+
+Statements are ordered _topologically_ by their dependencies and their assignments: since the `console.log` statement depends on `sum`, `sum` is calculated first even though it appears later in the source.
+
+Multiple statements can be combined by putting them in a block:
+
+```js
+// @noErrors
+$: {
+ // recalculate `total` when `items` changes
+ total = 0;
+
+ for (const item of items) {
+ total += item.value;
+ }
+}
+```
+
+The left-hand side of a reactive assignments can be an identifier, or it can be a destructuring assignment:
+
+```js
+// @noErrors
+$: ({ larry, moe, curly } = stooges);
+```
+
+## Understanding dependencies
+
+The dependencies of a `$:` statement are determined at compile time — they are whichever variables are referenced (but not assigned to) inside the statement.
+
+In other words, a statement like this will _not_ re-run when `count` changes, because the compiler cannot 'see' the dependency:
+
+```js
+// @noErrors
+let count = 0;
+let double = () => count * 2;
+
+$: doubled = double();
+```
+
+Similarly, topological ordering will fail if dependencies are referenced indirectly: `z` will never update, because `y` is not considered 'dirty' when the update occurs. Moving `$: z = y` below `$: setY(x)` will fix it:
+
+```svelte
+
+```
+
+## Browser-only code
+
+Reactive statements run during server-side rendering as well as in the browser. This means that any code that should only run in the browser must be wrapped in an `if` block:
+
+```js
+// @noErrors
+$: if (browser) {
+ document.title = title;
+}
+```
diff --git a/documentation/docs/99-legacy/03-legacy-export-let.md b/documentation/docs/99-legacy/03-legacy-export-let.md
new file mode 100644
index 000000000000..877e105b1fa2
--- /dev/null
+++ b/documentation/docs/99-legacy/03-legacy-export-let.md
@@ -0,0 +1,72 @@
+---
+title: export let
+---
+
+In runes mode, [component props](basic-markup#Component-props) are declared with the [`$props`]($props) rune, allowing parent components to pass in data.
+
+In legacy mode, props are marked with the `export` keyword, and can have a default value:
+
+```svelte
+
+```
+
+The default value is used if it would otherwise be `undefined` when the component is created.
+
+> [!NOTE] Unlike in runes mode, if the parent component changes a prop from a defined value to `undefined`, it does not revert to the initial value.
+
+Props without default values are considered _required_, and Svelte will print a warning during development if no value is provided, which you can squelch by specifying `undefined` as the default value:
+
+```js
+export let foo +++= undefined;+++
+```
+
+## Component exports
+
+An exported `const`, `class` or `function` declaration is _not_ considered a prop — instead, it becomes part of the component's API:
+
+```svelte
+
+
+```
+
+```svelte
+
+
+
+
+
+
+```
+
+## Renaming props
+
+The `export` keyword can appear separately from the declaration. This is useful for renaming props, for example in the case of a reserved word:
+
+```svelte
+
+
+```
diff --git a/documentation/docs/99-legacy/04-legacy-$$props-and-$$restProps.md b/documentation/docs/99-legacy/04-legacy-$$props-and-$$restProps.md
new file mode 100644
index 000000000000..33cac97035af
--- /dev/null
+++ b/documentation/docs/99-legacy/04-legacy-$$props-and-$$restProps.md
@@ -0,0 +1,30 @@
+---
+title: $$props and $$restProps
+---
+
+In runes mode, getting an object containing all the props that were passed in is easy, using the [`$props`]($props) rune.
+
+In legacy mode, we use `$$props` and `$$restProps`:
+
+- `$$props` contains all the props that were passed in, including ones that are not individually declared with the `export` keyword
+- `$$restProps` contains all the props that were passed in _except_ the ones that were individually declared
+
+For example, a `