[ { "path": ".changeset/README.md", "content": "# Changesets\n\nHello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works\nwith multi-package repos, or single-package repos to help you version and publish your code. You can\nfind the full documentation for it [in our repository](https://github.com/changesets/changesets)\n\nWe have a quick list of common questions to get you started engaging with this project in\n[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)\n" }, { "path": ".changeset/config.json", "content": "{\n\t\"$schema\": \"https://unpkg.com/@changesets/config@2.3.0/schema.json\",\n\t\"changelog\": [\"@svitejs/changesets-changelog-github-compact\", { \"repo\": \"sveltejs/svelte\" }],\n\t\"commit\": false,\n\t\"fixed\": [],\n\t\"linked\": [],\n\t\"access\": \"public\",\n\t\"baseBranch\": \"main\",\n\t\"bumpVersionsWithWorkspaceProtocolOnly\": true,\n\t\"ignore\": [\"!(@sveltejs/*|svelte)\"]\n}\n" }, { "path": ".changeset/const-tags.md", "content": "---\n'svelte': patch\n---\n\nfix: invalidate `@const` tags based on visible references in legacy mode\n" }, { "path": ".changeset/evil-chicken-attend.md", "content": "---\n'svelte': patch\n---\n\nfix: disallow `--` in `idPrefix`\n" }, { "path": ".changeset/orange-geckos-rest.md", "content": "---\n'svelte': patch\n---\n\nfix: don't override `$destroy/set/on` instance methods in dev mode\n" }, { "path": ".editorconfig", "content": "root = true\n\n[*]\nend_of_line = lf\ninsert_final_newline = true\nindent_style = tab\ncharset = utf-8\ntrim_trailing_whitespace = true\n\n[test/**/expected.css]\ninsert_final_newline = false\n\n[package.json]\nindent_style = space\n" }, { "path": ".gitattributes", "content": "/site/** -linguist-detectable\n/test/**/samples/** -linguist-detectable\n/**/*.svelte linguist-detectable\n" }, { "path": ".github/FUNDING.yml", "content": "open_collective: svelte\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.yml", "content": "name: \"\\U0001F41E Bug report\"\ndescription: Report an issue with Svelte\nlabels: ['triage: bug']\nbody:\n - type: markdown\n attributes:\n value: |\n Thanks for taking the time to fill out this bug report!\n - type: textarea\n id: bug-description\n attributes:\n label: Describe the bug\n 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!\n placeholder: Bug description\n validations:\n required: true\n - type: textarea\n id: reproduction\n attributes:\n label: Reproduction\n 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.\n placeholder: Reproduction\n validations:\n required: true\n - type: textarea\n id: logs\n attributes:\n label: Logs\n 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.'\n render: shell\n - type: textarea\n id: system-info\n attributes:\n label: System Info\n description: Output of `npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers`\n render: shell\n placeholder: System, Binaries, Browsers\n validations:\n required: true\n - type: dropdown\n id: severity\n attributes:\n label: Severity\n description: Select the severity of this issue\n options:\n - annoyance\n - blocking an upgrade\n - blocking all usage of svelte\n validations:\n required: true\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "blank_issues_enabled: false\ncontact_links:\n - name: Discord Chat\n url: https://svelte.dev/chat\n about: Ask questions and discuss with other Svelte users in real time.\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.yml", "content": "name: 'Feature Request'\ndescription: Request a new Svelte feature\nlabels: [enhancement]\nbody:\n - type: markdown\n attributes:\n value: |\n 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).\n - type: textarea\n id: problem\n attributes:\n label: Describe the problem\n description: Please provide a clear and concise description the problem this feature would solve. The more information you can provide here, the better.\n placeholder: I'm always frustrated when...\n validations:\n required: true\n - type: textarea\n id: solution\n attributes:\n label: Describe the proposed solution\n description: Please provide a clear and concise description of what you would like to happen.\n placeholder: I would like to see...\n validations:\n required: true\n - type: dropdown\n id: importance\n attributes:\n label: Importance\n description: How important is this feature to you?\n options:\n - nice to have\n - would make my life easier\n - i cannot use svelte without it\n validations:\n required: true\n" }, { "path": ".github/ISSUE_TEMPLATE.md", "content": "---\nBefore filing an issue we'd appreciate it if you could take a moment to ensure\nthere isn't already an open issue or pull-request.\n---\n\nIf there's an existing issue, please add a :+1: reaction to the description of\nthe issue. One way we prioritize issues is by the number of :+1: reactions on\ntheir descriptions. Please DO NOT add `+1` or :+1: comments.\n\n### Feature requests and proposals\n\nWe're excited to hear how we can make Svelte better. Please add as much detail\nas you can on your use case. To propose an implementation of a large feature or\nchange, please create an [RFC](https://github.com/sveltejs/rfcs).\n\n### Bugs\n\nIf you're filing an issue about a bug please include as much information\nas you can including the following.\n\n- Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10)\n- Your operating system: (e.x. OS X 10, Windows XP, etc)\n- Svelte version (Please check you can reproduce the issue with the latest release!)\n- Whether your project uses Webpack or Rollup\n\n- _Repeatable steps to reproduce the issue_\n\n## Thanks for being part of Svelte!\n" }, { "path": ".github/PULL_REQUEST_TEMPLATE.md", "content": "### Before submitting the PR, please make sure you do the following\n\n- [ ] 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\n- [ ] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`.\n- [ ] This message body should clearly illustrate what problems it solves.\n- [ ] Ideally, include a test that fails without this PR but passes with it.\n- [ ] If this PR changes code within `packages/svelte/src`, add a changeset (`npx changeset`).\n\n### Tests and linting\n\n- [ ] Run the tests with `pnpm test` and lint the project with `pnpm lint`\n" }, { "path": ".github/workflows/autofix.yml", "content": "name: Autofix Lint\n\non:\n issue_comment:\n types: [created]\n workflow_dispatch:\n\npermissions: {}\n\njobs:\n autofix-lint:\n permissions:\n contents: write # to push the generated types commit\n pull-requests: read # to resolve the PR head ref\n # prevents this action from running on forks\n if: |\n github.repository == 'sveltejs/svelte' &&\n (\n github.event_name == 'workflow_dispatch' ||\n (\n github.event.issue.pull_request != null &&\n github.event.comment.body == '/autofix' &&\n contains(fromJSON('[\"OWNER\", \"MEMBER\", \"COLLABORATOR\"]'), github.event.comment.author_association)\n )\n )\n runs-on: ubuntu-latest\n steps:\n - name: Get PR ref\n if: github.event_name != 'workflow_dispatch'\n id: pr\n uses: actions/github-script@v8\n with:\n script: |\n const { data: pull } = await github.rest.pulls.get({\n owner: context.repo.owner,\n repo: context.repo.repo,\n pull_number: context.issue.number\n });\n if (pull.head.repo.full_name !== `${context.repo.owner}/${context.repo.repo}`) {\n await github.rest.issues.createComment({\n owner: context.repo.owner,\n repo: context.repo.repo,\n issue_number: context.issue.number,\n body: 'Cannot autofix: this PR is from a forked repository. The autofix workflow can only push to branches within this repository.'\n });\n core.setFailed('PR is from a fork');\n }\n core.setOutput('ref', pull.head.ref);\n - uses: actions/checkout@v6\n if: github.event_name == 'workflow_dispatch' || steps.pr.outcome == 'success'\n with:\n ref: ${{ github.event_name == 'workflow_dispatch' && github.ref || steps.pr.outputs.ref }}\n - uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0\n - uses: actions/setup-node@v6\n with:\n node-version: 24\n cache: pnpm\n - run: pnpm install --frozen-lockfile\n - name: Build\n run: pnpm -F svelte build\n - name: Run prettier\n run: pnpm format\n - name: Commit changes\n run: |\n git config user.name \"github-actions[bot]\"\n git config user.email \"github-actions[bot]@users.noreply.github.com\"\n git add -A\n git diff --staged --quiet || git commit -m \"chore: autofix\"\n git push origin HEAD\n" }, { "path": ".github/workflows/ci.yml", "content": "name: CI\non:\n push:\n branches: [main]\n pull_request:\npermissions:\n contents: read # to fetch code (actions/checkout)\n\nenv:\n # We only install Chromium manually\n PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'\n\njobs:\n Tests:\n permissions: {}\n runs-on: ${{ matrix.os }}\n timeout-minutes: 15\n strategy:\n matrix:\n include:\n - node-version: 18\n os: windows-latest\n - node-version: 18\n os: macOS-latest\n - node-version: 18\n os: ubuntu-latest\n - node-version: 20\n os: ubuntu-latest\n - node-version: 22\n os: ubuntu-latest\n - node-version: 24\n os: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v6\n - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4\n - uses: actions/setup-node@v6\n with:\n node-version: ${{ matrix.node-version }}\n cache: pnpm\n - run: pnpm install --frozen-lockfile\n - run: pnpm playwright install chromium\n - run: pnpm test\n env:\n CI: true\n TestNoAsync:\n permissions: {}\n runs-on: ubuntu-latest\n timeout-minutes: 10\n steps:\n - uses: actions/checkout@v6\n - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4\n - uses: actions/setup-node@v6\n with:\n node-version: 22\n cache: pnpm\n - run: pnpm install --frozen-lockfile\n - run: pnpm playwright install chromium\n - run: pnpm test runtime-runes\n env:\n CI: true\n SVELTE_NO_ASYNC: true\n TSGo:\n permissions: {}\n runs-on: ubuntu-latest\n timeout-minutes: 5\n steps:\n - uses: actions/checkout@v6\n - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4\n - uses: actions/setup-node@v6\n with:\n node-version: 24\n cache: pnpm\n - name: install\n run: pnpm install --frozen-lockfile\n - name: install tsgo\n run: cd packages/svelte && pnpm i -D @typescript/native-preview\n - name: type check\n run: cd packages/svelte && pnpm check:tsgo\n Lint:\n permissions: {}\n runs-on: ubuntu-latest\n timeout-minutes: 5\n steps:\n - uses: actions/checkout@v6\n - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4\n - uses: actions/setup-node@v6\n with:\n node-version: 24\n cache: pnpm\n - name: install\n run: pnpm install --frozen-lockfile\n - name: type check\n run: pnpm check\n - name: lint\n if: (${{ success() }} || ${{ failure() }}) # ensures this step runs even if previous steps fail (avoids multiple runs uncovering different issues at different steps)\n run: pnpm lint\n - name: build and check generated types\n if: (${{ success() }} || ${{ failure() }}) # ensures this step runs even if previous steps fail\n 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); }\n Benchmarks:\n permissions: {}\n runs-on: ubuntu-latest\n timeout-minutes: 15\n steps:\n - uses: actions/checkout@v6\n - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4\n - uses: actions/setup-node@v6\n with:\n node-version: 24\n cache: pnpm\n - run: pnpm install --frozen-lockfile\n - run: pnpm bench\n env:\n CI: true\n" }, { "path": ".github/workflows/ecosystem-ci-trigger.yml", "content": "name: ecosystem-ci trigger\n\non:\n issue_comment:\n types: [created]\n\npermissions: {}\n\njobs:\n trigger:\n runs-on: ubuntu-latest\n if: github.repository == 'sveltejs/svelte' && github.event.issue.pull_request && startsWith(github.event.comment.body, '/ecosystem-ci run')\n permissions:\n issues: write # to add / delete reactions, post comments\n pull-requests: write # to read PR data, and to add labels\n actions: read # to check workflow status\n contents: read # to clone the repo\n steps:\n - name: Check User Permissions\n uses: actions/github-script@v8\n id: check-permissions\n with:\n script: |\n const user = context.payload.sender.login\n console.log(`Validate user: ${user}`)\n\n let hasTriagePermission = false\n try {\n const { data } = await github.rest.repos.getCollaboratorPermissionLevel({\n owner: context.repo.owner,\n repo: context.repo.repo,\n username: user,\n });\n hasTriagePermission = data.user.permissions.triage\n } catch (e) {\n console.warn(e)\n }\n\n if (hasTriagePermission) {\n console.log('User is allowed. Adding +1 reaction.')\n await github.rest.reactions.createForIssueComment({\n owner: context.repo.owner,\n repo: context.repo.repo,\n comment_id: context.payload.comment.id,\n content: '+1',\n })\n } else {\n console.log('User is not allowed. Adding -1 reaction.')\n await github.rest.reactions.createForIssueComment({\n owner: context.repo.owner,\n repo: context.repo.repo,\n comment_id: context.payload.comment.id,\n content: '-1',\n })\n throw new Error('User does not have the necessary permissions.')\n }\n\n - name: Get PR Data\n uses: actions/github-script@v8\n id: get-pr-data\n with:\n script: |\n console.log(`Get PR info: ${context.repo.owner}/${context.repo.repo}#${context.issue.number}`)\n const { data: pr } = await github.rest.pulls.get({\n owner: context.repo.owner,\n repo: context.repo.repo,\n pull_number: context.issue.number\n })\n\n const commentCreatedAt = new Date(context.payload.comment.created_at)\n const commitPushedAt = new Date(pr.head.repo.pushed_at)\n\n console.log(`Comment created at: ${commentCreatedAt.toISOString()}`)\n console.log(`PR last pushed at: ${commitPushedAt.toISOString()}`)\n\n // Check if any commits were pushed after the comment was created\n if (commitPushedAt > commentCreatedAt) {\n const errorMsg = [\n '⚠️ Security warning: PR was updated after the trigger command was posted.',\n '',\n `Comment posted at: ${commentCreatedAt.toISOString()}`,\n `PR last pushed at: ${commitPushedAt.toISOString()}`,\n '',\n 'This could indicate an attempt to inject code after approval.',\n 'Please review the latest changes and re-run /ecosystem-ci run if they are acceptable.'\n ].join('\\n')\n\n core.setFailed(errorMsg)\n\n await github.rest.issues.createComment({\n owner: context.repo.owner,\n repo: context.repo.repo,\n issue_number: context.issue.number,\n body: errorMsg\n })\n\n throw new Error('PR was pushed to after comment was created')\n }\n\n return {\n num: context.issue.number,\n branchName: pr.head.ref,\n commit: pr.head.sha,\n repo: pr.head.repo.full_name\n }\n\n - name: Generate Token\n id: generate-token\n uses: actions/create-github-app-token@v2\n with:\n app-id: ${{ secrets.ECOSYSTEM_CI_GITHUB_APP_ID }}\n private-key: ${{ secrets.ECOSYSTEM_CI_GITHUB_APP_PRIVATE_KEY }}\n repositories: |\n svelte\n svelte-ecosystem-ci\n\n - name: Trigger Downstream Workflow\n uses: actions/github-script@v8\n id: trigger\n env:\n COMMENT: ${{ github.event.comment.body }}\n PR_DATA: ${{ steps.get-pr-data.outputs.result }}\n with:\n github-token: ${{ steps.generate-token.outputs.token }}\n script: |\n const comment = process.env.COMMENT.trim()\n const prData = JSON.parse(process.env.PR_DATA)\n\n const suite = comment.split('\\n')[0].replace(/^\\/ecosystem-ci run/, '').trim()\n\n await github.rest.actions.createWorkflowDispatch({\n owner: context.repo.owner,\n repo: 'svelte-ecosystem-ci',\n workflow_id: 'ecosystem-ci-from-pr.yml',\n ref: 'main',\n inputs: {\n prNumber: '' + prData.num,\n branchName: prData.branchName,\n repo: prData.repo,\n commit: prData.commit,\n suite: suite === '' ? '-' : suite\n }\n })\n" }, { "path": ".github/workflows/pkg.pr.new.yml", "content": "name: pkg.pr.new\non:\n pull_request_target:\n types: [opened, synchronize]\n push:\n branches: [main]\n workflow_dispatch:\n inputs:\n sha:\n description: 'Commit SHA to build'\n required: true\n type: string\n pr:\n description: 'PR number to comment on'\n required: true\n type: number\n\npermissions: {}\n\njobs:\n build:\n # Skip pull_request_target events from forks — maintainers can use workflow_dispatch instead\n if: >\n github.event_name != 'pull_request_target' ||\n github.event.pull_request.head.repo.full_name == github.repository\n runs-on: ubuntu-latest\n # No permissions — this job runs user-controlled code\n permissions: {}\n\n steps:\n - uses: actions/checkout@v6\n with:\n # For pull_request_target, check out the PR head.\n # For workflow_dispatch, check out the manually specified SHA.\n # For push, fall back to the push SHA.\n ref: ${{ github.event.pull_request.head.sha || inputs.sha || github.sha }}\n\n - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4\n - uses: actions/setup-node@v6\n with:\n node-version: 22.x\n cache: pnpm\n\n - name: Install dependencies\n run: pnpm install --frozen-lockfile\n\n - name: Build\n run: pnpm build\n\n - run: pnpx pkg-pr-new publish --comment=off --json output.json --compact --no-template './packages/svelte'\n\n - name: Upload output\n uses: actions/upload-artifact@v4\n with:\n name: output\n path: ./output.json\n\n # Sanitizes the untrusted output from the build job before it's consumed by\n # jobs with elevated permissions. This ensures that only known package names\n # and valid SHA prefixes make it through.\n sanitize:\n needs: build\n runs-on: ubuntu-latest\n\n permissions: {}\n\n steps:\n - name: Download artifact\n uses: actions/download-artifact@v7\n with:\n name: output\n\n - name: Sanitize output\n uses: actions/github-script@v8\n with:\n script: |\n const fs = require('fs');\n const raw = JSON.parse(fs.readFileSync('output.json', 'utf8'));\n\n const ALLOWED_PACKAGES = new Set(['svelte']);\n const SHA_PATTERN = /^[0-9a-f]{7}$/;\n\n const packages = (raw.packages || [])\n .filter(p => {\n if (!ALLOWED_PACKAGES.has(p.name)) {\n console.log(`Skipping unexpected package: ${JSON.stringify(p.name)}`);\n return false;\n }\n const sha = p.url?.replace(/^.+@([^@]+)$/, '$1');\n if (!sha || !SHA_PATTERN.test(sha)) {\n console.log(`Skipping package with invalid SHA: ${JSON.stringify(p.url)}`);\n return false;\n }\n return true;\n })\n .map(p => ({\n name: p.name,\n sha: p.url.replace(/^.+@([^@]+)$/, '$1'),\n }));\n\n fs.writeFileSync('sanitized-output.json', JSON.stringify({ packages }), 'utf8');\n\n - name: Upload sanitized output\n uses: actions/upload-artifact@v4\n with:\n name: sanitized-output\n path: ./sanitized-output.json\n\n comment:\n needs: sanitize\n if: github.event_name == 'pull_request_target' || github.event_name == 'workflow_dispatch'\n runs-on: ubuntu-latest\n\n permissions:\n contents: read\n pull-requests: write\n\n steps:\n - name: Download sanitized artifact\n uses: actions/download-artifact@v7\n with:\n name: sanitized-output\n\n - name: Resolve PR number\n id: pr\n uses: actions/github-script@v8\n with:\n script: |\n if (context.eventName === 'pull_request_target') {\n core.setOutput('number', context.issue.number);\n return;\n }\n\n // For workflow_dispatch, use the explicitly provided PR number.\n // We can't use listPullRequestsAssociatedWithCommit because fork\n // commits don't exist in the base repo, so the API returns nothing.\n const pr = Number('${{ inputs.pr }}');\n if (!pr || isNaN(pr)) {\n core.setFailed('workflow_dispatch requires a valid pr input');\n return;\n }\n\n core.setOutput('number', pr);\n\n - name: Post or update comment\n uses: actions/github-script@v8\n with:\n github-token: ${{ secrets.GITHUB_TOKEN }}\n script: |\n const fs = require('fs');\n const { packages } = JSON.parse(fs.readFileSync('sanitized-output.json', 'utf8'));\n\n if (packages.length === 0) {\n console.log('No valid packages found. Skipping comment.');\n return;\n }\n\n const issue_number = parseInt('${{ steps.pr.outputs.number }}', 10);\n\n const bot_comment_identifier = ``;\n\n const body = `${bot_comment_identifier}\n\n [Playground](https://svelte.dev/playground?version=pr-${issue_number})\n\n \\`\\`\\`\n ${packages.map(p => `pnpm add https://pkg.pr.new/${p.name}@${issue_number}`).join('\\n')}\n \\`\\`\\`\n `;\n\n const comments = await github.rest.issues.listComments({\n owner: context.repo.owner,\n repo: context.repo.repo,\n issue_number,\n });\n const existing = comments.data.find(c => c.body.includes(bot_comment_identifier));\n\n if (existing) {\n await github.rest.issues.updateComment({\n owner: context.repo.owner,\n repo: context.repo.repo,\n comment_id: existing.id,\n body,\n });\n } else {\n await github.rest.issues.createComment({\n owner: context.repo.owner,\n repo: context.repo.repo,\n issue_number,\n body,\n });\n }\n\n log:\n needs: sanitize\n if: github.event_name == 'push'\n runs-on: ubuntu-latest\n\n permissions: {}\n\n steps:\n - name: Download sanitized artifact\n uses: actions/download-artifact@v7\n with:\n name: sanitized-output\n\n - name: Log publish info\n uses: actions/github-script@v8\n with:\n script: |\n const fs = require('fs');\n const { packages } = JSON.parse(fs.readFileSync('sanitized-output.json', 'utf8'));\n\n if (packages.length === 0) {\n console.log('No valid packages found.');\n return;\n }\n\n console.log('\\n' + '='.repeat(50));\n console.log('Publish Information');\n console.log('='.repeat(50));\n for (const p of packages) {\n console.log(`${p.name} - pnpm add https://pkg.pr.new/${p.name}@${p.sha}`);\n }\n const svelte = packages.find(p => p.name === 'svelte');\n if (svelte) {\n console.log(`\\nPlayground: https://svelte.dev/playground?version=commit-${svelte.sha}`);\n }\n console.log('='.repeat(50));\n" }, { "path": ".github/workflows/release.yml", "content": "name: Release\n\non:\n push:\n branches:\n - main\n\nconcurrency:\n # prevent two release workflows from running at once\n # race conditions here can result in releases failing\n group: ${{ github.workflow }}\n\npermissions: {}\njobs:\n release:\n # prevents this action from running on forks\n if: github.repository == 'sveltejs/svelte'\n permissions:\n contents: write # to create release (changesets/action)\n id-token: write # OpenID Connect token needed for provenance\n pull-requests: write # to create pull request (changesets/action)\n name: Release\n runs-on: ubuntu-latest\n steps:\n - name: Checkout Repo\n uses: actions/checkout@v6\n with:\n # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits\n fetch-depth: 0\n - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4\n - name: Setup Node.js\n uses: actions/setup-node@v6\n with:\n node-version: 24.x\n cache: pnpm\n\n - name: Install\n run: pnpm install --frozen-lockfile\n\n - name: Build\n 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); }\n\n - name: Create Release Pull Request or Publish to npm\n id: changesets\n uses: changesets/action@6a0a831ff30acef54f2c6aa1cbbc1096b066edaf # v1\n with:\n version: pnpm changeset:version\n publish: pnpm changeset:publish\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n NPM_CONFIG_PROVENANCE: true\n" }, { "path": ".gitignore", "content": "# Dependency directories\nnode_modules/\n\n# IDE related\n.idea\n\n# Test coverage\ncoverage\n*.lcov\n\n# Optional eslint cache\n.eslintcache\n\n# dotenv environment variables file\n.env\n.env.test\n\n# build output\n.vercel\n\n# OS-specific\n.DS_Store\n\ntmp\n\nbenchmarking/.profiles\nbenchmarking/compare/.results\nbenchmarking/compare/.profiles\n" }, { "path": ".npmrc", "content": "playwright_skip_browser_download=1" }, { "path": ".prettierignore", "content": "documentation/docs/\n\npackages/**/dist/*.js\npackages/**/build/*.js\npackages/**/npm/**/*\npackages/**/config/*.js\n\n# packages/svelte\npackages/svelte/messages/**/*.md\npackages/svelte/scripts/_bundle.js\npackages/svelte/src/compiler/errors.js\npackages/svelte/src/compiler/warnings.js\npackages/svelte/src/internal/client/errors.js\npackages/svelte/src/internal/client/warnings.js\npackages/svelte/src/internal/shared/errors.js\npackages/svelte/src/internal/shared/warnings.js\npackages/svelte/src/internal/server/errors.js\npackages/svelte/src/internal/server/warnings.js\npackages/svelte/tests/migrate/samples/*/output.svelte\npackages/svelte/tests/**/*.svelte\npackages/svelte/tests/**/_expected*\npackages/svelte/tests/**/_actual*\npackages/svelte/tests/**/expected*\npackages/svelte/tests/**/_output\npackages/svelte/tests/**/shards/*.test.js\npackages/svelte/tests/hydration/samples/*/_expected.html\npackages/svelte/tests/hydration/samples/*/_override.html\npackages/svelte/tests/parser-legacy/samples/*/_actual.json\npackages/svelte/tests/parser-legacy/samples/*/output.json\npackages/svelte/tests/parser-modern/samples/*/_actual.json\npackages/svelte/tests/parser-modern/samples/*/output.json\npackages/svelte/types\npackages/svelte/compiler/index.js\nplaygrounds/sandbox/dist/*\nplaygrounds/sandbox/output/*\nplaygrounds/sandbox/src/*\n\n**/node_modules\n**/.svelte-kit\n**/.vercel\n.github/CODEOWNERS\n.prettierignore\n.changeset\npnpm-lock.yaml\npnpm-workspace.yaml\n" }, { "path": ".prettierrc", "content": "{\n\t\"useTabs\": true,\n\t\"singleQuote\": true,\n\t\"trailingComma\": \"none\",\n\t\"printWidth\": 100,\n\t\"plugins\": [\"prettier-plugin-svelte\"],\n\t\"overrides\": [\n\t\t{\n\t\t\t\"files\": [\"*.svelte\"],\n\t\t\t\"options\": {\n\t\t\t\t\"bracketSameLine\": false\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\t\"files\": [\"README.md\", \"packages/*/README.md\", \"**/package.json\"],\n\t\t\t\"options\": {\n\t\t\t\t\"useTabs\": false,\n\t\t\t\t\"tabWidth\": 2\n\t\t\t}\n\t\t}\n\t]\n}\n" }, { "path": ".vscode/launch.json", "content": "{\n\t\"version\": \"0.2.0\",\n\t\"configurations\": [\n\t\t{\n\t\t\t\"type\": \"node\",\n\t\t\t\"request\": \"launch\",\n\t\t\t\"name\": \"Run sandbox\",\n\t\t\t\"program\": \"${workspaceFolder}/playgrounds/sandbox/run.js\",\n\t\t\t\"env\": {\n\t\t\t\t\"NODE_OPTIONS\": \"--stack-trace-limit=10000\"\n\t\t\t}\n\t\t}\n\t]\n}\n" }, { "path": ".vscode/settings.json", "content": "{\n\t\"typescript.tsdk\": \"node_modules/typescript/lib\"\n}\n" }, { "path": ".well-known/funding-manifest-urls", "content": "https://svelte.dev/funding.json\n\n" }, { "path": "CODE_OF_CONDUCT.md", "content": "This repository is governed by the Svelte Code of Conduct.\n\nhttps://github.com/sveltejs/community/blob/main/CODE_OF_CONDUCT.md\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing to Svelte\n\nSvelte 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.\n\nThe [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:\n\n- [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/)\n- [Building Welcoming Communities](https://opensource.guide/building-community/)\n\n## Get involved\n\nThere are many ways to contribute to Svelte, and many of them do not involve writing any code. Here are a few ideas to get started:\n\n- 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).\n- 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).\n- If you find an issue you would like to fix, [open a pull request](#pull-requests).\n- 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.\n- 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.\n\nContributions 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.\n\n### Triaging issues and pull requests\n\nOne great way you can contribute to the project without writing any code is to help triage issues and pull requests as they come in.\n\n- Ask for more information if you believe the issue does not provide all the details required to solve it.\n- Flag issues that are stale or that should be closed.\n- Ask for test plans and review code.\n\n## Our process\n\n### RFCs\n\nIf 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.\n\n### Roadmap\n\nWhen 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.\n\n### Maintainer meetings\n\nThe 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.\n\n### Prioritization\n\nWe 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.\n\n## Bugs\n\nWe 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).\n\nIf 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.\n\nIf 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).\n\n### Reporting new issues\n\nWhen [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.\n\n- **One issue, one bug:** Please report a single bug per issue.\n- **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.\n\n## Pull requests\n\n### Proposing a change\n\nIf 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).\n\nIf 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.\n\nSmall pull requests are much easier to review and more likely to get merged.\n\n### Installation\n\nEnsure you have [pnpm](https://pnpm.io/installation) installed. After cloning the repository, run `pnpm install`.\n\n### Developing\n\nTo 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`.\n\n### Creating a branch\n\nFork [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).\n\n### Testing\n\nA good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI.\n\n- If you've changed APIs, update the documentation.\n\n#### Writing tests\n\nAll tests are located in the `/tests` folder.\n\nTest samples are kept in `/tests/xxx/samples` folders.\n\n#### Running tests\n\n> PREREQUISITE: Install chromium via playwright by running `pnpm playwright install chromium`\n\n1. To run test, run `pnpm test`.\n1. To run a particular test suite, use `pnpm test `, for example:\n\n ```sh\n pnpm test validator\n ```\n\n1. To filter tests _within_ a test suite, use `pnpm test -t `, for example:\n\n ```sh\n pnpm test validator -t a11y-alt-text\n ```\n\n (You can also do `FILTER= pnpm test ` 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.)\n\n##### Updating `.expected` files\n\n1. Tests suites like `snapshot` and `parser` assert that the generated output matches the existing snapshot.\n1. To update these snapshots, run `UPDATE_SNAPSHOTS=true pnpm test`.\n\n### Typechecking\n\nTo typecheck the codebase, run `pnpm check` inside `packages/svelte`. To typecheck in watch mode, run `pnpm check:watch`.\n\n### Style guide\n\n[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`.\n\n#### Code conventions\n\n- `snake_case` for internal variable names and methods.\n- `camelCase` for public variable names and methods.\n\n### Generating types\n\nTypes 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.\n\n### Sending your pull request\n\nPlease make sure the following is done when submitting a pull request:\n\n1. Describe your **test plan** in your pull request description. Make sure to test your changes.\n1. Make sure your code lints (`pnpm lint`).\n1. Make sure your tests pass (`pnpm test`).\n\nAll 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.\n\n#### Breaking changes\n\nWhen adding a new breaking change, follow this template in your pull request:\n\n```md\n### New breaking change here\n\n- **Who does this affect**:\n- **How to migrate**:\n- **Why make this breaking change**:\n- **Severity (number of people affected x effort)**:\n```\n\n### Reviewing pull requests\n\nIf 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.\n\n## License\n\nBy contributing to Svelte, you agree that your contributions will be licensed under its [MIT license](https://github.com/sveltejs/svelte/blob/master/LICENSE.md).\n\n## Questions\n\nFeel 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.\n" }, { "path": "FUNDING.json", "content": "{\n\t\"drips\": {\n\t\t\"ethereum\": {\n\t\t\t\"ownedBy\": \"0xCE08E02c37d90d75C2bf7D9e55f7606C8DB80E70\"\n\t\t}\n\t}\n}\n" }, { "path": "LICENSE.md", "content": "Copyright (c) 2016-2025 [Svelte Contributors](https://github.com/sveltejs/svelte/graphs/contributors)\n\nPermission 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:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE 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.\n" }, { "path": "README.md", "content": "\n\t\n\t\t\n\t\t\"Svelte\n\t\n\n\n[![License](https://img.shields.io/npm/l/svelte.svg)](LICENSE.md) [![Chat](https://img.shields.io/discord/457912077277855764?label=chat&logo=discord)](https://svelte.dev/chat)\n\n## What is Svelte?\n\nSvelte 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.\n\nLearn more at the [Svelte website](https://svelte.dev), or stop by the [Discord chatroom](https://svelte.dev/chat).\n\n## Supporting Svelte\n\nSvelte 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:\n\n- [Becoming a backer on Open Collective](https://opencollective.com/svelte).\n\nFunds 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.\n\n## Roadmap\n\nYou may view [our roadmap](https://svelte.dev/roadmap) if you'd like to see what we're currently working on.\n\n## Contributing\n\nPlease see the [Contributing Guide](CONTRIBUTING.md) and the [`svelte`](packages/svelte) package for information on contributing to Svelte.\n\n## Is svelte.dev down?\n\nProbably 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).\n\n## License\n\n[MIT](LICENSE.md)\n" }, { "path": "benchmarking/.gitignore", "content": "output\n" }, { "path": "benchmarking/benchmarks/reactivity/index.js", "content": "import fs from 'node:fs';\nimport path from 'node:path';\nimport {\n\tsbench_create_0to1,\n\tsbench_create_1000to1,\n\tsbench_create_1to1,\n\tsbench_create_1to1000,\n\tsbench_create_1to2,\n\tsbench_create_1to4,\n\tsbench_create_1to8,\n\tsbench_create_2to1,\n\tsbench_create_4to1,\n\tsbench_create_signals\n} from './sbench.js';\nimport { fileURLToPath } from 'node:url';\nimport { create_test } from './util.js';\n\n// This benchmark has been adapted from the js-reactivity-benchmark (https://github.com/milomg/js-reactivity-benchmark)\n// Not all tests are the same, and many parts have been tweaked to capture different data.\n\nconst dirname = path.dirname(fileURLToPath(import.meta.url));\n\nexport const reactivity_benchmarks = [\n\tsbench_create_signals,\n\tsbench_create_0to1,\n\tsbench_create_1to1,\n\tsbench_create_2to1,\n\tsbench_create_4to1,\n\tsbench_create_1000to1,\n\tsbench_create_1to2,\n\tsbench_create_1to4,\n\tsbench_create_1to8,\n\tsbench_create_1to1000\n];\n\nfor (const file of fs.readdirSync(`${dirname}/tests`)) {\n\tif (!file.includes('.bench.')) continue;\n\n\tconst name = file.replace('.bench.js', '');\n\n\tconst module = await import(`${dirname}/tests/${file}`);\n\tconst { owned, unowned } = create_test(name, module.default);\n\n\treactivity_benchmarks.push(owned, unowned);\n}\n" }, { "path": "benchmarking/benchmarks/reactivity/sbench.js", "content": "/** @import { Source } from '../../../packages/svelte/src/internal/client/types.js' */\nimport { fastest_test } from '../../utils.js';\nimport * as $ from '../../../packages/svelte/src/internal/client/index.js';\n\nconst COUNT = 1e5;\n\n/**\n * @param {number} n\n * @param {any[]} sources\n */\nfunction create_sources(n, sources) {\n\tfor (let i = 0; i < n; i++) {\n\t\tsources[i] = $.state(i);\n\t}\n\n\treturn sources;\n}\n\n/**\n * @param {Source} source\n */\nfunction create_derived(source) {\n\t$.derived(() => $.get(source));\n}\n\n/**\n *\n * @param {string} label\n * @param {(n: number, sources: Array>) => void} fn\n * @param {number} count\n * @param {number} num_sources\n */\nfunction create_sbench_test(label, count, num_sources, fn) {\n\treturn {\n\t\tlabel,\n\t\tfn: async () => {\n\t\t\t// Do 3 loops to warm up JIT\n\t\t\tfor (let i = 0; i < 3; i++) {\n\t\t\t\tfn(count, create_sources(num_sources, []));\n\t\t\t}\n\n\t\t\treturn await fastest_test(10, () => {\n\t\t\t\tconst destroy = $.effect_root(() => {\n\t\t\t\t\tfor (let i = 0; i < 10; i++) {\n\t\t\t\t\t\tfn(count, create_sources(num_sources, []));\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tdestroy();\n\t\t\t});\n\t\t}\n\t};\n}\n\nexport const sbench_create_signals = create_sbench_test(\n\t'sbench_create_signals',\n\tCOUNT,\n\tCOUNT,\n\tcreate_sources\n);\n\nexport const sbench_create_0to1 = create_sbench_test('sbench_create_0to1', COUNT, 0, (n) => {\n\tfor (let i = 0; i < n; i++) {\n\t\t$.derived(() => i);\n\t}\n});\n\nexport const sbench_create_1to1 = create_sbench_test(\n\t'sbench_create_1to1',\n\tCOUNT,\n\tCOUNT,\n\t(n, sources) => {\n\t\tfor (let i = 0; i < n; i++) {\n\t\t\tcreate_derived(sources[i]);\n\t\t}\n\t}\n);\n\nexport const sbench_create_2to1 = create_sbench_test(\n\t'sbench_create_2to1',\n\tCOUNT / 2,\n\tCOUNT,\n\t(n, sources) => {\n\t\tfor (let i = 0; i < n; i++) {\n\t\t\t$.derived(() => $.get(sources[i * 2]) + $.get(sources[i * 2 + 1]));\n\t\t}\n\t}\n);\n\nexport const sbench_create_4to1 = create_sbench_test(\n\t'sbench_create_4to1',\n\tCOUNT / 4,\n\tCOUNT,\n\t(n, sources) => {\n\t\tfor (let i = 0; i < n; i++) {\n\t\t\t$.derived(\n\t\t\t\t() =>\n\t\t\t\t\t$.get(sources[i * 4]) +\n\t\t\t\t\t$.get(sources[i * 4 + 1]) +\n\t\t\t\t\t$.get(sources[i * 4 + 2]) +\n\t\t\t\t\t$.get(sources[i * 4 + 3])\n\t\t\t);\n\t\t}\n\t}\n);\n\nexport const sbench_create_1000to1 = create_sbench_test(\n\t'sbench_create_1000to1',\n\tCOUNT / 1000,\n\tCOUNT,\n\t(n, sources) => {\n\t\tfor (let i = 0; i < n; i++) {\n\t\t\tconst offset = i * 1000;\n\n\t\t\t$.derived(() => {\n\t\t\t\tlet sum = 0;\n\t\t\t\tfor (let i = 0; i < 1000; i++) {\n\t\t\t\t\tsum += $.get(sources[offset + i]);\n\t\t\t\t}\n\t\t\t\treturn sum;\n\t\t\t});\n\t\t}\n\t}\n);\n\nexport const sbench_create_1to2 = create_sbench_test(\n\t'sbench_create_1to2',\n\tCOUNT,\n\tCOUNT / 2,\n\t(n, sources) => {\n\t\tfor (let i = 0; i < n / 2; i++) {\n\t\t\tconst source = sources[i];\n\t\t\tcreate_derived(source);\n\t\t\tcreate_derived(source);\n\t\t}\n\t}\n);\n\nexport const sbench_create_1to4 = create_sbench_test(\n\t'sbench_create_1to4',\n\tCOUNT,\n\tCOUNT / 4,\n\t(n, sources) => {\n\t\tfor (let i = 0; i < n / 4; i++) {\n\t\t\tconst source = sources[i];\n\t\t\tcreate_derived(source);\n\t\t\tcreate_derived(source);\n\t\t\tcreate_derived(source);\n\t\t\tcreate_derived(source);\n\t\t}\n\t}\n);\n\nexport const sbench_create_1to8 = create_sbench_test(\n\t'sbench_create_1to8',\n\tCOUNT,\n\tCOUNT / 8,\n\t(n, sources) => {\n\t\tfor (let i = 0; i < n / 8; i++) {\n\t\t\tconst source = sources[i];\n\t\t\tcreate_derived(source);\n\t\t\tcreate_derived(source);\n\t\t\tcreate_derived(source);\n\t\t\tcreate_derived(source);\n\t\t\tcreate_derived(source);\n\t\t\tcreate_derived(source);\n\t\t\tcreate_derived(source);\n\t\t\tcreate_derived(source);\n\t\t}\n\t}\n);\n\nexport const sbench_create_1to1000 = create_sbench_test(\n\t'sbench_create_1to1000',\n\tCOUNT,\n\tCOUNT / 1000,\n\t(n, sources) => {\n\t\tfor (let i = 0; i < n / 1000; i++) {\n\t\t\tconst source = sources[i];\n\t\t\tfor (let j = 0; j < 1000; j++) {\n\t\t\t\tcreate_derived(source);\n\t\t\t}\n\t\t}\n\t}\n);\n" }, { "path": "benchmarking/benchmarks/reactivity/tests/kairo_avoidable.bench.js", "content": "import assert from 'node:assert';\nimport * as $ from 'svelte/internal/client';\nimport { busy } from '../util.js';\n\nexport default () => {\n\tlet head = $.state(0);\n\tlet computed1 = $.derived(() => $.get(head));\n\tlet computed2 = $.derived(() => ($.get(computed1), 0));\n\tlet computed3 = $.derived(() => (busy(), $.get(computed2) + 1)); // heavy computation\n\tlet computed4 = $.derived(() => $.get(computed3) + 2);\n\tlet computed5 = $.derived(() => $.get(computed4) + 3);\n\n\tconst destroy = $.effect_root(() => {\n\t\t$.render_effect(() => {\n\t\t\t$.get(computed5);\n\t\t\tbusy(); // heavy side effect\n\t\t});\n\t});\n\n\treturn {\n\t\tdestroy,\n\t\trun() {\n\t\t\t$.flush(() => {\n\t\t\t\t$.set(head, 1);\n\t\t\t});\n\t\t\tassert.equal($.get(computed5), 6);\n\t\t\tfor (let i = 0; i < 1000; i++) {\n\t\t\t\t$.flush(() => {\n\t\t\t\t\t$.set(head, i);\n\t\t\t\t});\n\t\t\t\tassert.equal($.get(computed5), 6);\n\t\t\t}\n\t\t}\n\t};\n};\n" }, { "path": "benchmarking/benchmarks/reactivity/tests/kairo_broad.bench.js", "content": "import assert from 'node:assert';\nimport * as $ from 'svelte/internal/client';\n\nexport default () => {\n\tlet head = $.state(0);\n\tlet last = head;\n\tlet counter = 0;\n\n\tconst destroy = $.effect_root(() => {\n\t\tfor (let i = 0; i < 50; i++) {\n\t\t\tlet current = $.derived(() => {\n\t\t\t\treturn $.get(head) + i;\n\t\t\t});\n\t\t\tlet current2 = $.derived(() => {\n\t\t\t\treturn $.get(current) + 1;\n\t\t\t});\n\t\t\t$.render_effect(() => {\n\t\t\t\t$.get(current2);\n\t\t\t\tcounter++;\n\t\t\t});\n\t\t\tlast = current2;\n\t\t}\n\t});\n\n\treturn {\n\t\tdestroy,\n\t\trun() {\n\t\t\t$.flush(() => {\n\t\t\t\t$.set(head, 1);\n\t\t\t});\n\t\t\tcounter = 0;\n\t\t\tfor (let i = 0; i < 50; i++) {\n\t\t\t\t$.flush(() => {\n\t\t\t\t\t$.set(head, i);\n\t\t\t\t});\n\t\t\t\tassert.equal($.get(last), i + 50);\n\t\t\t}\n\t\t\tassert.equal(counter, 50 * 50);\n\t\t}\n\t};\n};\n" }, { "path": "benchmarking/benchmarks/reactivity/tests/kairo_deep.bench.js", "content": "import assert from 'node:assert';\nimport * as $ from 'svelte/internal/client';\n\nlet len = 50;\nconst iter = 50;\n\nexport default () => {\n\tlet head = $.state(0);\n\tlet current = head;\n\tfor (let i = 0; i < len; i++) {\n\t\tlet c = current;\n\t\tcurrent = $.derived(() => {\n\t\t\treturn $.get(c) + 1;\n\t\t});\n\t}\n\tlet counter = 0;\n\n\tconst destroy = $.effect_root(() => {\n\t\t$.render_effect(() => {\n\t\t\t$.get(current);\n\t\t\tcounter++;\n\t\t});\n\t});\n\n\treturn {\n\t\tdestroy,\n\t\trun() {\n\t\t\t$.flush(() => {\n\t\t\t\t$.set(head, 1);\n\t\t\t});\n\t\t\tcounter = 0;\n\t\t\tfor (let i = 0; i < iter; i++) {\n\t\t\t\t$.flush(() => {\n\t\t\t\t\t$.set(head, i);\n\t\t\t\t});\n\t\t\t\tassert.equal($.get(current), len + i);\n\t\t\t}\n\t\t\tassert.equal(counter, iter);\n\t\t}\n\t};\n};\n" }, { "path": "benchmarking/benchmarks/reactivity/tests/kairo_diamond.bench.js", "content": "import assert from 'node:assert';\nimport * as $ from 'svelte/internal/client';\n\nlet width = 5;\n\nexport default () => {\n\tlet head = $.state(0);\n\tlet current = [];\n\tfor (let i = 0; i < width; i++) {\n\t\tcurrent.push(\n\t\t\t$.derived(() => {\n\t\t\t\treturn $.get(head) + 1;\n\t\t\t})\n\t\t);\n\t}\n\tlet sum = $.derived(() => {\n\t\treturn current.map((x) => $.get(x)).reduce((a, b) => a + b, 0);\n\t});\n\tlet counter = 0;\n\n\tconst destroy = $.effect_root(() => {\n\t\t$.render_effect(() => {\n\t\t\t$.get(sum);\n\t\t\tcounter++;\n\t\t});\n\t});\n\n\treturn {\n\t\tdestroy,\n\t\trun() {\n\t\t\t$.flush(() => {\n\t\t\t\t$.set(head, 1);\n\t\t\t});\n\t\t\tassert.equal($.get(sum), 2 * width);\n\t\t\tcounter = 0;\n\t\t\tfor (let i = 0; i < 500; i++) {\n\t\t\t\t$.flush(() => {\n\t\t\t\t\t$.set(head, i);\n\t\t\t\t});\n\t\t\t\tassert.equal($.get(sum), (i + 1) * width);\n\t\t\t}\n\t\t\tassert.equal(counter, 500);\n\t\t}\n\t};\n};\n" }, { "path": "benchmarking/benchmarks/reactivity/tests/kairo_mux.bench.js", "content": "import assert from 'node:assert';\nimport * as $ from 'svelte/internal/client';\n\nexport default () => {\n\tlet heads = new Array(100).fill(null).map((_) => $.state(0));\n\tconst mux = $.derived(() => {\n\t\treturn Object.fromEntries(heads.map((h) => $.get(h)).entries());\n\t});\n\tconst splited = heads\n\t\t.map((_, index) => $.derived(() => $.get(mux)[index]))\n\t\t.map((x) => $.derived(() => $.get(x) + 1));\n\n\tconst destroy = $.effect_root(() => {\n\t\tsplited.forEach((x) => {\n\t\t\t$.render_effect(() => {\n\t\t\t\t$.get(x);\n\t\t\t});\n\t\t});\n\t});\n\n\treturn {\n\t\tdestroy,\n\t\trun() {\n\t\t\tfor (let i = 0; i < 10; i++) {\n\t\t\t\t$.flush(() => {\n\t\t\t\t\t$.set(heads[i], i);\n\t\t\t\t});\n\t\t\t\tassert.equal($.get(splited[i]), i + 1);\n\t\t\t}\n\t\t\tfor (let i = 0; i < 10; i++) {\n\t\t\t\t$.flush(() => {\n\t\t\t\t\t$.set(heads[i], i * 2);\n\t\t\t\t});\n\t\t\t\tassert.equal($.get(splited[i]), i * 2 + 1);\n\t\t\t}\n\t\t}\n\t};\n};\n" }, { "path": "benchmarking/benchmarks/reactivity/tests/kairo_repeated.bench.js", "content": "import assert from 'node:assert';\nimport * as $ from 'svelte/internal/client';\n\nlet size = 30;\n\nexport default () => {\n\tlet head = $.state(0);\n\tlet current = $.derived(() => {\n\t\tlet result = 0;\n\t\tfor (let i = 0; i < size; i++) {\n\t\t\tresult += $.get(head);\n\t\t}\n\t\treturn result;\n\t});\n\n\tlet counter = 0;\n\n\tconst destroy = $.effect_root(() => {\n\t\t$.render_effect(() => {\n\t\t\t$.get(current);\n\t\t\tcounter++;\n\t\t});\n\t});\n\n\treturn {\n\t\tdestroy,\n\t\trun() {\n\t\t\t$.flush(() => {\n\t\t\t\t$.set(head, 1);\n\t\t\t});\n\t\t\tassert.equal($.get(current), size);\n\t\t\tcounter = 0;\n\t\t\tfor (let i = 0; i < 100; i++) {\n\t\t\t\t$.flush(() => {\n\t\t\t\t\t$.set(head, i);\n\t\t\t\t});\n\t\t\t\tassert.equal($.get(current), i * size);\n\t\t\t}\n\t\t\tassert.equal(counter, 100);\n\t\t}\n\t};\n};\n" }, { "path": "benchmarking/benchmarks/reactivity/tests/kairo_triangle.bench.js", "content": "import assert from 'node:assert';\nimport * as $ from 'svelte/internal/client';\n\nlet width = 10;\n\nfunction count(number) {\n\treturn new Array(number)\n\t\t.fill(0)\n\t\t.map((_, i) => i + 1)\n\t\t.reduce((x, y) => x + y, 0);\n}\n\nexport default () => {\n\tlet head = $.state(0);\n\tlet current = head;\n\tlet list = [];\n\tfor (let i = 0; i < width; i++) {\n\t\tlet c = current;\n\t\tlist.push(current);\n\t\tcurrent = $.derived(() => {\n\t\t\treturn $.get(c) + 1;\n\t\t});\n\t}\n\tlet sum = $.derived(() => {\n\t\treturn list.map((x) => $.get(x)).reduce((a, b) => a + b, 0);\n\t});\n\n\tlet counter = 0;\n\n\tconst destroy = $.effect_root(() => {\n\t\t$.render_effect(() => {\n\t\t\t$.get(sum);\n\t\t\tcounter++;\n\t\t});\n\t});\n\n\treturn {\n\t\tdestroy,\n\t\trun() {\n\t\t\tconst constant = count(width);\n\t\t\t$.flush(() => {\n\t\t\t\t$.set(head, 1);\n\t\t\t});\n\t\t\tassert.equal($.get(sum), constant);\n\t\t\tcounter = 0;\n\t\t\tfor (let i = 0; i < 100; i++) {\n\t\t\t\t$.flush(() => {\n\t\t\t\t\t$.set(head, i);\n\t\t\t\t});\n\t\t\t\tassert.equal($.get(sum), constant - width + i * width);\n\t\t\t}\n\t\t\tassert.equal(counter, 100);\n\t\t}\n\t};\n};\n" }, { "path": "benchmarking/benchmarks/reactivity/tests/kairo_unstable.bench.js", "content": "import assert from 'node:assert';\nimport * as $ from 'svelte/internal/client';\n\nexport default () => {\n\tlet head = $.state(0);\n\tconst double = $.derived(() => $.get(head) * 2);\n\tconst inverse = $.derived(() => -$.get(head));\n\tlet current = $.derived(() => {\n\t\tlet result = 0;\n\t\tfor (let i = 0; i < 20; i++) {\n\t\t\tresult += $.get(head) % 2 ? $.get(double) : $.get(inverse);\n\t\t}\n\t\treturn result;\n\t});\n\n\tlet counter = 0;\n\n\tconst destroy = $.effect_root(() => {\n\t\t$.render_effect(() => {\n\t\t\t$.get(current);\n\t\t\tcounter++;\n\t\t});\n\t});\n\n\treturn {\n\t\tdestroy,\n\t\trun() {\n\t\t\t$.flush(() => {\n\t\t\t\t$.set(head, 1);\n\t\t\t});\n\t\t\tassert.equal($.get(current), 40);\n\t\t\tcounter = 0;\n\t\t\tfor (let i = 0; i < 100; i++) {\n\t\t\t\t$.flush(() => {\n\t\t\t\t\t$.set(head, i);\n\t\t\t\t});\n\t\t\t}\n\t\t\tassert.equal(counter, 100);\n\t\t}\n\t};\n};\n" }, { "path": "benchmarking/benchmarks/reactivity/tests/mol.bench.js", "content": "import assert from 'node:assert';\nimport * as $ from 'svelte/internal/client';\n\n/**\n * @param {number} n\n */\nfunction fib(n) {\n\tif (n < 2) return 1;\n\treturn fib(n - 1) + fib(n - 2);\n}\n\n/**\n * @param {number} n\n */\nfunction hard(n) {\n\treturn n + fib(16);\n}\n\nconst numbers = Array.from({ length: 5 }, (_, i) => i);\n\nexport default () => {\n\tlet res = [];\n\tconst A = $.state(0);\n\tconst B = $.state(0);\n\tconst C = $.derived(() => ($.get(A) % 2) + ($.get(B) % 2));\n\tconst D = $.derived(() => numbers.map((i) => i + ($.get(A) % 2) - ($.get(B) % 2)));\n\tD.equals = function (/** @type {number[]} */ l) {\n\t\tvar r = this.v;\n\t\treturn r !== null && l.length === r.length && l.every((v, i) => v === r[i]);\n\t};\n\tconst E = $.derived(() => hard($.get(C) + $.get(A) + $.get(D)[0]));\n\tconst F = $.derived(() => hard($.get(D)[0] && $.get(B)));\n\tconst G = $.derived(() => $.get(C) + ($.get(C) || $.get(E) % 2) + $.get(D)[0] + $.get(F));\n\n\tconst destroy = $.effect_root(() => {\n\t\t$.render_effect(() => {\n\t\t\tres.push(hard($.get(G)));\n\t\t});\n\t\t$.render_effect(() => {\n\t\t\tres.push($.get(G));\n\t\t});\n\t\t$.render_effect(() => {\n\t\t\tres.push(hard($.get(F)));\n\t\t});\n\t});\n\n\treturn {\n\t\tdestroy,\n\t\t/**\n\t\t * @param {number} i\n\t\t */\n\t\trun(i) {\n\t\t\tres.length = 0;\n\t\t\t$.flush(() => {\n\t\t\t\t$.set(B, 1);\n\t\t\t\t$.set(A, 1 + i * 2);\n\t\t\t});\n\t\t\t$.flush(() => {\n\t\t\t\t$.set(A, 2 + i * 2);\n\t\t\t\t$.set(B, 2);\n\t\t\t});\n\t\t\tassert.equal(res[0], 3198);\n\t\t\tassert.equal(res[1], 1601);\n\t\t\tassert.equal(res[2], 3195);\n\t\t\tassert.equal(res[3], 1598);\n\t\t}\n\t};\n};\n" }, { "path": "benchmarking/benchmarks/reactivity/tests/repeated_deps.bench.js", "content": "import assert from 'node:assert';\nimport * as $ from 'svelte/internal/client';\n\nconst ARRAY_SIZE = 1000;\n\nexport default () => {\n\tconst signals = Array.from({ length: ARRAY_SIZE }, (_, i) => $.state(i));\n\tconst order = $.state(0);\n\n\t// break skipped_deps fast path by changing order of reads\n\tconst total = $.derived(() => {\n\t\tconst ord = $.get(order);\n\t\tlet sum = 0;\n\t\tfor (let i = 0; i < ARRAY_SIZE; i++) {\n\t\t\tsum += /** @type {number} */ ($.get(signals[(i + ord) % ARRAY_SIZE]));\n\t\t}\n\t\treturn sum;\n\t});\n\n\tconst destroy = $.effect_root(() => {\n\t\t$.render_effect(() => {\n\t\t\t$.get(total);\n\t\t});\n\t});\n\n\treturn {\n\t\tdestroy,\n\t\trun() {\n\t\t\tfor (let i = 0; i < 5; i++) {\n\t\t\t\t$.flush(() => $.set(order, i));\n\t\t\t\tassert.equal($.get(total), (ARRAY_SIZE * (ARRAY_SIZE - 1)) / 2); // sum of 0..999\n\t\t\t}\n\t\t}\n\t};\n};\n" }, { "path": "benchmarking/benchmarks/reactivity/util.js", "content": "import * as $ from 'svelte/internal/client';\nimport { fastest_test } from '../../utils.js';\n\nexport function busy() {\n\tlet a = 0;\n\tfor (let i = 0; i < 1_00; i++) {\n\t\ta++;\n\t}\n}\n\n/**\n *\n * @param {string} label\n * @param {() => { run: (i?: number) => void, destroy: () => void }} setup\n */\nexport function create_test(label, setup) {\n\treturn {\n\t\tunowned: {\n\t\t\tlabel: `${label}_unowned`,\n\t\t\tfn: async () => {\n\t\t\t\t// Do 10 loops to warm up JIT\n\t\t\t\tfor (let i = 0; i < 10; i++) {\n\t\t\t\t\tconst { run, destroy } = setup();\n\t\t\t\t\trun(0);\n\t\t\t\t\tdestroy();\n\t\t\t\t}\n\n\t\t\t\tconst { run, destroy } = setup();\n\n\t\t\t\tconst result = await fastest_test(10, () => {\n\t\t\t\t\tfor (let i = 0; i < 1000; i++) {\n\t\t\t\t\t\trun(i);\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\tdestroy();\n\n\t\t\t\treturn result;\n\t\t\t}\n\t\t},\n\t\towned: {\n\t\t\tlabel: `${label}_owned`,\n\t\t\tfn: async () => {\n\t\t\t\tlet run, destroy;\n\n\t\t\t\tconst destroy_owned = $.effect_root(() => {\n\t\t\t\t\t// Do 10 loops to warm up JIT\n\t\t\t\t\tfor (let i = 0; i < 10; i++) {\n\t\t\t\t\t\tconst { run, destroy } = setup();\n\t\t\t\t\t\trun(0);\n\t\t\t\t\t\tdestroy();\n\t\t\t\t\t}\n\n\t\t\t\t\t({ run, destroy } = setup());\n\t\t\t\t});\n\n\t\t\t\tconst result = await fastest_test(10, () => {\n\t\t\t\t\tfor (let i = 0; i < 1000; i++) {\n\t\t\t\t\t\trun(i);\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\t// @ts-ignore\n\t\t\t\tdestroy();\n\t\t\t\tdestroy_owned();\n\n\t\t\t\treturn result;\n\t\t\t}\n\t\t}\n\t};\n}\n" }, { "path": "benchmarking/benchmarks/ssr/index.js", "content": "import { wrapper_bench } from './wrapper/wrapper_bench.js';\n\nexport const ssr_benchmarks = [wrapper_bench];\n" }, { "path": "benchmarking/benchmarks/ssr/wrapper/App.svelte", "content": "\n\n
\n\t{#each tiles as { x, y }}\n\t\t
\n\t{/each}\n
\n" }, { "path": "benchmarking/benchmarks/ssr/wrapper/wrapper_bench.js", "content": "import * as fs from 'node:fs';\nimport * as path from 'node:path';\nimport { render } from 'svelte/server';\nimport { fastest_test } from '../../../utils.js';\nimport { compile } from 'svelte/compiler';\n\nconst dir = `${process.cwd()}/benchmarking/benchmarks/ssr/wrapper`;\n\nasync function compile_svelte() {\n\tconst output = compile(read(`${dir}/App.svelte`), {\n\t\tgenerate: 'server'\n\t});\n\n\twrite(`${dir}/output/App.js`, output.js.code);\n\n\tconst module = await import(`${dir}/output/App.js`);\n\n\treturn module.default;\n}\n\nexport const wrapper_bench = {\n\tlabel: 'wrapper_bench',\n\tfn: async () => {\n\t\tconst App = await compile_svelte();\n\n\t\t// Do 3 loops to warm up JIT\n\t\tfor (let i = 0; i < 3; i++) {\n\t\t\trender(App);\n\t\t}\n\n\t\treturn await fastest_test(10, () => {\n\t\t\tfor (let i = 0; i < 100; i++) {\n\t\t\t\trender(App);\n\t\t\t}\n\t\t});\n\t}\n};\n\n/**\n * @param {string} file\n */\nfunction read(file) {\n\treturn fs.readFileSync(file, 'utf-8').replace(/\\r\\n/g, '\\n');\n}\n\n/**\n * @param {string} file\n * @param {string} contents\n */\nfunction write(file, contents) {\n\ttry {\n\t\tfs.mkdirSync(path.dirname(file), { recursive: true });\n\t} catch {}\n\n\tfs.writeFileSync(file, contents);\n}\n" }, { "path": "benchmarking/compare/index.js", "content": "import fs from 'node:fs';\nimport path from 'node:path';\nimport { execSync, fork } from 'node:child_process';\nimport { fileURLToPath } from 'node:url';\n\n// if (execSync('git status --porcelain').toString().trim()) {\n// \tconsole.error('Working directory is not clean');\n// \tprocess.exit(1);\n// }\n\nconst filename = fileURLToPath(import.meta.url);\nconst runner = path.resolve(filename, '../runner.js');\nconst outdir = path.resolve(filename, '../.results');\nconst report_file = `${outdir}/report.txt`;\n\nif (fs.existsSync(outdir)) fs.rmSync(outdir, { recursive: true });\nfs.mkdirSync(outdir);\n\nconst branches = [];\n\nlet PROFILE_DIR = path.resolve(filename, '../.profiles');\nif (fs.existsSync(PROFILE_DIR)) fs.rmSync(PROFILE_DIR, { recursive: true });\nfs.mkdirSync(PROFILE_DIR, { recursive: true });\n\nfor (const arg of process.argv.slice(2)) {\n\tif (arg.startsWith('--')) continue;\n\tif (arg === filename) continue;\n\n\tbranches.push(arg);\n}\n\nif (branches.length === 0) {\n\tbranches.push(\n\t\texecSync('git symbolic-ref --short -q HEAD || git rev-parse --short HEAD').toString().trim()\n\t);\n}\n\nif (branches.length === 1) {\n\tbranches.push('main');\n}\n\nprocess.on('exit', () => {\n\texecSync(`git checkout ${branches[0]}`);\n});\n\nfor (const branch of branches) {\n\tconsole.group(`Benchmarking ${branch}`);\n\n\texecSync(`git checkout ${branch}`);\n\n\tawait new Promise((fulfil, reject) => {\n\t\tconst child = fork(runner, [], {\n\t\t\tenv: {\n\t\t\t\t...process.env,\n\t\t\t\tBENCH_PROFILE_DIR: `${PROFILE_DIR}/${safe(branch)}`\n\t\t\t}\n\t\t});\n\n\t\tchild.on('message', (results) => {\n\t\t\tfs.writeFileSync(`${outdir}/${branch}.json`, JSON.stringify(results, null, ' '));\n\t\t\tfulfil();\n\t\t});\n\n\t\tchild.on('error', reject);\n\t});\n\n\tconsole.groupEnd();\n}\n\nif (PROFILE_DIR !== null) {\n\tconsole.log(`\\nCPU profiles written to ${PROFILE_DIR}`);\n}\n\nconst results = branches.map((branch) => {\n\treturn JSON.parse(fs.readFileSync(`${outdir}/${branch}.json`, 'utf-8'));\n});\n\nfs.writeFileSync(report_file, '');\n\nconst write = (str) => {\n\tfs.appendFileSync(report_file, str + '\\n');\n\tconsole.log(str);\n};\n\nfor (let i = 0; i < results[0].length; i += 1) {\n\twrite(`${results[0][i].benchmark}`);\n\n\tfor (const metric of ['time', 'gc_time']) {\n\t\tconst times = results.map((result) => +result[i][metric]);\n\t\tlet min = Infinity;\n\t\tlet max = -Infinity;\n\t\tlet min_index = -1;\n\n\t\tfor (let b = 0; b < times.length; b += 1) {\n\t\t\tconst time = times[b];\n\n\t\t\tif (time < min) {\n\t\t\t\tmin = time;\n\t\t\t\tmin_index = b;\n\t\t\t}\n\n\t\t\tif (time > max) {\n\t\t\t\tmax = time;\n\t\t\t}\n\t\t}\n\n\t\tif (min !== 0) {\n\t\t\twrite(` ${metric}: fastest is ${char(min_index)} (${branches[min_index]})`);\n\t\t\ttimes.forEach((time, b) => {\n\t\t\t\tconst SIZE = 20;\n\t\t\t\tconst n = Math.round(SIZE * (time / max));\n\n\t\t\t\twrite(` ${char(b)}: ${'◼'.repeat(n)}${' '.repeat(SIZE - n)} ${time.toFixed(2)}ms`);\n\t\t\t});\n\t\t}\n\t}\n\n\twrite('');\n}\n\nfunction char(i) {\n\treturn String.fromCharCode(97 + i);\n}\n\nfunction safe(name) {\n\treturn name.replace(/[^a-z0-9._-]+/gi, '_');\n}\n" }, { "path": "benchmarking/compare/runner.js", "content": "import { reactivity_benchmarks } from '../benchmarks/reactivity/index.js';\nimport { with_cpu_profile } from '../utils.js';\n\nconst results = [];\nconst PROFILE_DIR = process.env.BENCH_PROFILE_DIR;\n\nfor (let i = 0; i < reactivity_benchmarks.length; i += 1) {\n\tconst benchmark = reactivity_benchmarks[i];\n\n\tprocess.stderr.write(`Running ${i + 1}/${reactivity_benchmarks.length} ${benchmark.label} `);\n\tresults.push({\n\t\tbenchmark: benchmark.label,\n\t\t...(await with_cpu_profile(PROFILE_DIR, benchmark.label, () => benchmark.fn()))\n\t});\n\tprocess.stderr.write('\\x1b[2K\\r');\n}\n\nprocess.send(results);\n" }, { "path": "benchmarking/run.js", "content": "import * as $ from '../packages/svelte/src/internal/client/index.js';\nimport { reactivity_benchmarks } from './benchmarks/reactivity/index.js';\nimport { ssr_benchmarks } from './benchmarks/ssr/index.js';\nimport { with_cpu_profile } from './utils.js';\n\n// e.g. `pnpm bench kairo` to only run the kairo benchmarks\nconst filters = process.argv.slice(2);\n\nconst PROFILE_DIR = './benchmarking/.profiles';\n\nconst suites = [\n\t{\n\t\tbenchmarks: reactivity_benchmarks.filter(\n\t\t\t(b) => filters.length === 0 || filters.some((f) => b.label.includes(f))\n\t\t),\n\t\tname: 'reactivity benchmarks'\n\t},\n\t{\n\t\tbenchmarks: ssr_benchmarks.filter(\n\t\t\t(b) => filters.length === 0 || filters.some((f) => b.label.includes(f))\n\t\t),\n\t\tname: 'server-side rendering benchmarks'\n\t}\n].filter((suite) => suite.benchmarks.length > 0);\n\nif (suites.length === 0) {\n\tconsole.log('No benchmarks matched provided filters');\n\tprocess.exit(1);\n}\n\nconst COLUMN_WIDTHS = [25, 9, 9];\nconst TOTAL_WIDTH = COLUMN_WIDTHS.reduce((a, b) => a + b);\n\nconst pad_right = (str, n) => str + ' '.repeat(n - str.length);\nconst pad_left = (str, n) => ' '.repeat(n - str.length) + str;\n\nlet total_time = 0;\nlet total_gc_time = 0;\n\n$.push({}, true);\n\ntry {\n\tfor (const { benchmarks, name } of suites) {\n\t\tlet suite_time = 0;\n\t\tlet suite_gc_time = 0;\n\n\t\tconsole.log(`\\nRunning ${name}...\\n`);\n\t\tconsole.log(\n\t\t\tpad_right('Benchmark', COLUMN_WIDTHS[0]) +\n\t\t\t\tpad_left('Time', COLUMN_WIDTHS[1]) +\n\t\t\t\tpad_left('GC time', COLUMN_WIDTHS[2])\n\t\t);\n\t\tconsole.log('='.repeat(TOTAL_WIDTH));\n\n\t\tfor (const benchmark of benchmarks) {\n\t\t\tconst results = await with_cpu_profile(PROFILE_DIR, benchmark.label, () => benchmark.fn());\n\t\t\tconsole.log(\n\t\t\t\tpad_right(benchmark.label, COLUMN_WIDTHS[0]) +\n\t\t\t\t\tpad_left(results.time.toFixed(2), COLUMN_WIDTHS[1]) +\n\t\t\t\t\tpad_left(results.gc_time.toFixed(2), COLUMN_WIDTHS[2])\n\t\t\t);\n\t\t\ttotal_time += results.time;\n\t\t\ttotal_gc_time += results.gc_time;\n\t\t\tsuite_time += results.time;\n\t\t\tsuite_gc_time += results.gc_time;\n\t\t}\n\n\t\tconsole.log('='.repeat(TOTAL_WIDTH));\n\t\tconsole.log(\n\t\t\tpad_right('suite', COLUMN_WIDTHS[0]) +\n\t\t\t\tpad_left(suite_time.toFixed(2), COLUMN_WIDTHS[1]) +\n\t\t\t\tpad_left(suite_gc_time.toFixed(2), COLUMN_WIDTHS[2])\n\t\t);\n\t\tconsole.log('='.repeat(TOTAL_WIDTH));\n\t}\n\n\tif (PROFILE_DIR !== null) {\n\t\tconsole.log(`\\nCPU profiles written to ${PROFILE_DIR}`);\n\t}\n} catch (e) {\n\t// eslint-disable-next-line no-console\n\tconsole.error(e);\n\tprocess.exit(1);\n}\n\n$.pop();\n\nconsole.log('');\n\nconsole.log(\n\tpad_right('total', COLUMN_WIDTHS[0]) +\n\t\tpad_left(total_time.toFixed(2), COLUMN_WIDTHS[1]) +\n\t\tpad_left(total_gc_time.toFixed(2), COLUMN_WIDTHS[2])\n);\n" }, { "path": "benchmarking/tsconfig.json", "content": "{\n\t\"compilerOptions\": {\n\t\t\"moduleResolution\": \"Bundler\",\n\t\t\"target\": \"ESNext\",\n\t\t\"module\": \"ESNext\",\n\t\t\"verbatimModuleSyntax\": true,\n\t\t\"isolatedModules\": true,\n\t\t\"resolveJsonModule\": true,\n\t\t\"sourceMap\": true,\n\t\t\"esModuleInterop\": true,\n\t\t\"skipLibCheck\": true,\n\t\t\"forceConsistentCasingInFileNames\": true,\n\t\t\"allowJs\": true,\n\t\t\"checkJs\": true\n\t},\n\t\"include\": [\"./run.js\", \"./utils.js\", \"./benchmarks\"]\n}\n" }, { "path": "benchmarking/utils.js", "content": "import { performance, PerformanceObserver } from 'node:perf_hooks';\nimport fs from 'node:fs';\nimport path from 'node:path';\nimport inspector from 'node:inspector/promises';\nimport v8 from 'v8-natives';\n\n// Credit to https://github.com/milomg/js-reactivity-benchmark for the logic for timing + GC tracking.\n\nasync function track(fn) {\n\tv8.collectGarbage();\n\n\t/** @type {PerformanceEntry[]} */\n\tconst entries = [];\n\n\tconst observer = new PerformanceObserver((list) => entries.push(...list.getEntries()));\n\tobserver.observe({ entryTypes: ['gc'] });\n\n\tconst start = performance.now();\n\tfn();\n\tconst end = performance.now();\n\n\tawait new Promise((f) => setTimeout(f, 10));\n\n\tconst gc_time = entries\n\t\t.filter((e) => e.startTime >= start && e.startTime < end)\n\t\t.reduce((t, e) => e.duration + t, 0);\n\n\tobserver.disconnect();\n\n\treturn { time: end - start, gc_time };\n}\n\n/**\n * @param {number} times\n * @param {() => void} fn\n */\nexport async function fastest_test(times, fn) {\n\t/** @type {Array<{ time: number, gc_time: number }>} */\n\tconst results = [];\n\n\tfor (let i = 0; i < times; i++) {\n\t\tresults.push(await track(fn));\n\t}\n\n\treturn results.reduce((a, b) => (a.time < b.time ? a : b));\n}\n\nfunction safe(name) {\n\treturn name.replace(/[^a-z0-9._-]+/gi, '_');\n}\n\n/**\n * @template T\n * @param {string | null} profile_dir\n * @param {string} profile_name\n * @param {() => T | Promise} fn\n * @returns {Promise}\n */\nexport async function with_cpu_profile(profile_dir, profile_name, fn) {\n\tif (profile_dir === null) {\n\t\treturn await fn();\n\t}\n\n\tfs.mkdirSync(profile_dir, { recursive: true });\n\n\tconst session = new inspector.Session();\n\tsession.connect();\n\n\tawait session.post('Profiler.enable');\n\tawait session.post('Profiler.start');\n\n\ttry {\n\t\treturn await fn();\n\t} finally {\n\t\tconst { profile } = /** @type {{ profile: object }} */ (await session.post('Profiler.stop'));\n\t\tconst file = path.join(profile_dir, `${safe(profile_name)}.cpuprofile`);\n\t\tfs.writeFileSync(file, JSON.stringify(profile));\n\t\tsession.disconnect();\n\t}\n}\n" }, { "path": "documentation/docs/01-introduction/01-overview.md", "content": "---\ntitle: Overview\n---\n\nSvelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript...\n\n```svelte\n\n\n\n\n\n\n```\n\n...into lean, tightly optimized JavaScript.\n\nYou 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.\n\nThese 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.\n\nYou can also try Svelte online in the [playground](/playground) or, if you need a more fully-featured environment, on [StackBlitz](https://sveltekit.new).\n" }, { "path": "documentation/docs/01-introduction/02-getting-started.md", "content": "---\ntitle: Getting started\n---\n\nWe 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:\n\n```sh\nnpx sv create myapp\ncd myapp\nnpm install\nnpm run dev\n```\n\nDon'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.\n\n## Alternatives to SvelteKit\n\nYou can also use Svelte directly with Vite via [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) by running `npm create vite@latest` and selecting the `svelte` option (or, if working with an existing project, adding the plugin to your `vite.config.js` file). With this, `npm run build` will generate HTML, JS, and CSS files inside the `dist` directory. In most cases, you will probably need to [choose a routing library](/packages#routing) as well.\n\n>[!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).\n\nThere are also [plugins for other bundlers](/packages#bundler-plugins), but we recommend Vite.\n\n## Editor tooling\n\nThe 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/collection/editor-support-c85c080efc292a34) and tools as well.\n\nYou can also check your code from the command line using [`npx sv check`](https://svelte.dev/docs/cli/sv-check).\n\n\n## Getting help\n\nDon'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).\n" }, { "path": "documentation/docs/01-introduction/03-svelte-files.md", "content": "---\ntitle: .svelte files\n---\n\nComponents are the building blocks of Svelte applications. They are written into `.svelte` files, using a superset of HTML.\n\nAll three sections — script, styles and markup — are optional.\n\n\n```svelte\n/// file: MyComponent.svelte\n\n\n\n\n\n\n\n```\n\n## `\n\n\n```\n\nYou 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.\n\n> [!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).\n\n> [!LEGACY]\n> In Svelte 4, this script tag was created using `\n\n\n```\n\nUnlike 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.\n\n### Deep state\n\nIf `$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.\n\nState is proxified recursively until Svelte finds something other than an array or simple object (like a class or an object created with `Object.create`). In a case like this...\n\n```js\nlet todos = $state([\n\t{\n\t\tdone: false,\n\t\ttext: 'add more todos'\n\t}\n]);\n```\n\n...modifying an individual todo's property will trigger updates to anything in your UI that depends on that specific property:\n\n```js\nlet todos = [{ done: false, text: 'add more todos' }];\n// ---cut---\ntodos[0].done = !todos[0].done;\n```\n\nIf you push a new object to the array, it will also be proxified:\n\n```js\nlet todos = [{ done: false, text: 'add more todos' }];\n// ---cut---\ntodos.push({\n\tdone: false,\n\ttext: 'eat lunch'\n});\n```\n\n> [!NOTE] When you update properties of proxies, the original object is _not_ mutated. If you need to use your own proxy handlers in a state proxy, [you should wrap the object _after_ wrapping it in `$state`](https://svelte.dev/playground/hello-world?version=latest#H4sIAAAAAAAACpWR3WoDIRCFX2UqhWyIJL3erAulL9C7XnQLMe5ksbUqOpsfln33YuyGFNJC8UKdc2bOhw7Myk9kJXsJ0nttO9jcR5KEG9AWJDwHdzwxznbaYGTl68Do5JM_FRifuh-9X8Y9Gkq1rYx4q66cJbQUWcmqqIL2VDe2IYMEbvuOikBADi-GJDSkXG-phId0G-frye2DO2psQYDFQ0Ys8gQO350dUkEydEg82T0GOs0nsSG9g2IqgxACZueo2ZUlpdvoDC6N64qsg1QKY8T2bpZp8gpIfbCQ85Zn50Ud82HkeY83uDjspenxv3jXcSDyjPWf9L1vJf0GH666J-jLu1ery4dV257IWXBWGa0-xFDMQdTTn2ScxWKsn86ROsLwQxqrVR5QM84Ij8TKFD2-cUZSm4O2LSt30kQcvwCgCmfZnAIAAA==).\n\nNote that if you destructure a reactive value, the references are not reactive — as in normal JavaScript, they are evaluated at the point of destructuring:\n\n```js\nlet todos = [{ done: false, text: 'add more todos' }];\n// ---cut---\nlet { done, text } = todos[0];\n\n// this will not affect the value of `done`\ntodos[0].done = !todos[0].done;\n```\n\n### Classes\n\nClass instances are not proxied. Instead, you can use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`:\n\n```js\n// @errors: 7006 2554\nclass Todo {\n\tdone = $state(false);\n\n\tconstructor(text) {\n\t\tthis.text = $state(text);\n\t}\n\n\treset() {\n\t\tthis.text = '';\n\t\tthis.done = false;\n\t}\n}\n```\n\n> [!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.\n\nWhen 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 `\n```\n\nYou can either use an inline function...\n\n```svelte\n\n```\n\n...or use an arrow function in the class definition:\n\n```js\n// @errors: 7006 2554\nclass Todo {\n\tdone = $state(false);\n\n\tconstructor(text) {\n\t\tthis.text = $state(text);\n\t}\n\n\t+++reset = () => {+++\n\t\tthis.text = '';\n\t\tthis.done = false;\n\t}\n}\n```\n\n### Built-in classes\n\nSvelte provides reactive implementations of built-in classes like `Set`, `Map`, `Date` and `URL` that can be imported from [`svelte/reactivity`](svelte-reactivity).\n\n## `$state.raw`\n\nIn cases where you don't want objects and arrays to be deeply reactive you can use `$state.raw`.\n\nState 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:\n\n```js\nlet person = $state.raw({\n\tname: 'Heraclitus',\n\tage: 49\n});\n\n// this will have no effect\nperson.age += 1;\n\n// this will work, because we're creating a new person\nperson = {\n\tname: 'Heraclitus',\n\tage: 50\n};\n```\n\nThis 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).\n\nAs with `$state`, you can declare class fields using `$state.raw`.\n\n## `$state.snapshot`\n\nTo take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:\n\n```svelte\n\n```\n\nThis is handy when you want to pass some state to an external library or API that doesn't expect a proxy, such as `structuredClone`.\n\n## `$state.eager`\n\nWhen state changes, it may not be reflected in the UI immediately if it is used by an `await` expression, because [updates are synchronized](await-expressions#Synchronized-updates).\n\nIn some cases, you may want to update the UI as soon as the state changes. For example, you might want to update a navigation bar when the user clicks on a link, so that they get visual feedback while waiting for the new page to load. To do this, use `$state.eager(value)`:\n\n```svelte\n\n```\n\nUse this feature sparingly, and only to provide feedback in response to user action — in general, allowing Svelte to coordinate updates will provide a better user experience.\n\n## Passing state into functions\n\nJavaScript is a _pass-by-value_ language — when you call a function, the arguments are the _values_ rather than the _variables_. In other words:\n\n```js\n/// file: index.js\n// @filename: index.js\n// ---cut---\n/**\n * @param {number} a\n * @param {number} b\n */\nfunction add(a, b) {\n\treturn a + b;\n}\n\nlet a = 1;\nlet b = 2;\nlet total = add(a, b);\nconsole.log(total); // 3\n\na = 3;\nb = 4;\nconsole.log(total); // still 3!\n```\n\nIf `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:\n\n```js\n/// file: index.js\n// @filename: index.js\n// ---cut---\n/**\n * @param {() => number} getA\n * @param {() => number} getB\n */\nfunction add(+++getA, getB+++) {\n\treturn +++() => getA() + getB()+++;\n}\n\nlet a = 1;\nlet b = 2;\nlet total = add+++(() => a, () => b)+++;\nconsole.log(+++total()+++); // 3\n\na = 3;\nb = 4;\nconsole.log(+++total()+++); // 7\n```\n\nState in Svelte is no different — when you reference something declared with the `$state` rune...\n\n```js\nlet a = +++$state(1)+++;\nlet b = +++$state(2)+++;\n```\n\n...you're accessing its _current value_.\n\nNote 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...\n\n```js\n/// file: index.js\n// @filename: index.js\n// ---cut---\n/**\n * @param {{ a: number, b: number }} input\n */\nfunction add(input) {\n\treturn {\n\t\tget value() {\n\t\t\treturn input.a + input.b;\n\t\t}\n\t};\n}\n\nlet input = $state({ a: 1, b: 2 });\nlet total = add(input);\nconsole.log(total.value); // 3\n\ninput.a = 3;\ninput.b = 4;\nconsole.log(total.value); // 7\n```\n\n...though if you find yourself writing code like that, consider using [classes](#Classes) instead.\n\n## Passing state across modules\n\nYou can declare state in `.svelte.js` and `.svelte.ts` files, but you can only _export_ that state if it's not directly reassigned. In other words you can't do this:\n\n```js\n/// file: state.svelte.js\nexport let count = $state(0);\n\nexport function increment() {\n\tcount += 1;\n}\n```\n\nThat's because every reference to `count` is transformed by the Svelte compiler — the code above is roughly equivalent to this:\n\n```js\n/// file: state.svelte.js (compiler output)\n// @filename: index.ts\ninterface Signal {\n\tvalue: T;\n}\n\ninterface Svelte {\n\tstate(value?: T): Signal;\n\tget(source: Signal): T;\n\tset(source: Signal, value: T): void;\n}\ndeclare const $: Svelte;\n// ---cut---\nexport let count = $.state(0);\n\nexport function increment() {\n\t$.set(count, $.get(count) + 1);\n}\n```\n\n> [!NOTE] You can see the code Svelte generates by clicking the 'JS Output' tab in the [playground](/playground).\n\nSince the compiler only operates on one file at a time, if another file imports `count` Svelte doesn't know that it needs to wrap each reference in `$.get` and `$.set`:\n\n```js\n// @filename: state.svelte.js\nexport let count = 0;\n\n// @filename: index.js\n// ---cut---\nimport { count } from './state.svelte.js';\n\nconsole.log(typeof count); // 'object', not 'number'\n```\n\nThis leaves you with two options for sharing state between modules — either don't reassign it...\n\n```js\n// This is allowed — since we're updating\n// `counter.count` rather than `counter`,\n// Svelte doesn't wrap it in `$.state`\nexport const counter = $state({\n\tcount: 0\n});\n\nexport function increment() {\n\tcounter.count += 1;\n}\n```\n\n...or don't directly export it:\n\n```js\nlet count = $state(0);\n\nexport function getCount() {\n\treturn count;\n}\n\nexport function increment() {\n\tcount += 1;\n}\n```\n" }, { "path": "documentation/docs/02-runes/03-$derived.md", "content": "---\ntitle: $derived\ntags: rune-derived\n---\n\nDerived state is declared with the `$derived` rune:\n\n```svelte\n\n\n\n\n

{count} doubled is {doubled}

\n```\n\nThe expression inside `$derived(...)` should be free of side-effects. Svelte will disallow state changes (e.g. `count++`) inside derived expressions.\n\nAs with `$state`, you can mark class fields as `$derived`.\n\n> [!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.\n\n## `$derived.by`\n\nSometimes 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.\n\n```svelte\n\n\n\n```\n\nIn essence, `$derived(expression)` is equivalent to `$derived.by(() => expression)`.\n\n## Understanding dependencies\n\nAnything 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.\n\nIn addition, if an expression contains an [`await`](await-expressions), Svelte transforms it such that any state _after_ the `await` is also tracked — in other words, in a case like this...\n\n```js\nlet a = Promise.resolve(1);\nlet b = 2;\n// ---cut---\nlet total = $derived(await a + b);\n```\n\n...both `a` and `b` are tracked, even though `b` is only read once `a` has resolved, after the initial execution. (This does not apply to `await` in functions that are called by the expression, only the expression itself.)\n\nTo exempt a piece of state from being treated as a dependency, use [`untrack`](svelte#untrack).\n\n## Overriding derived values\n\nDerived 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:\n\n```svelte\n\n\n\n```\n\n> [!NOTE] Prior to Svelte 5.25, deriveds were read-only.\n\n## Deriveds and reactivity\n\nUnlike `$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==)...\n\n```js\n// @errors: 7005\nlet items = $state([ /*...*/ ]);\n\nlet index = $state(0);\nlet selected = $derived(items[index]);\n```\n\n...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.\n\n## Destructuring\n\nIf you use destructuring with a `$derived` declaration, the resulting variables will all be reactive — this...\n\n```js\nfunction stuff() { return { a: 1, b: 2, c: 3 } }\n// ---cut---\nlet { a, b, c } = $derived(stuff());\n```\n\n...is roughly equivalent to this:\n\n```js\nfunction stuff() { return { a: 1, b: 2, c: 3 } }\n// ---cut---\nlet _stuff = $derived(stuff());\nlet a = $derived(_stuff.a);\nlet b = $derived(_stuff.b);\nlet c = $derived(_stuff.c);\n```\n\n## Update propagation\n\nSvelte 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').\n\nIf 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`:\n\n```svelte\n\n\n\n```\n" }, { "path": "documentation/docs/02-runes/04-$effect.md", "content": "---\ntitle: $effect\ntags: rune-effect\n---\n\nEffects are functions that run when state updates, and can be used for things like calling third-party libraries, drawing on `` elements, or making network requests. They only run in the browser, not during server-side rendering.\n\nGenerally 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.\n\nYou 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=)):\n\n```svelte\n\n\n\n```\n\nWhen 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.\n\n> [!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.\n\n### Understanding lifecycle\n\nYour 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.\n\nYou 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.\n\n> [!NOTE] Svelte uses effects internally to represent logic and expressions in your template — this is how `

hello {name}!

` updates when `name` changes.\n\nAn effect can return a _teardown function_ which will run immediately before the effect re-runs:\n\n\n```svelte\n\n\n\n

{count}

\n\n\n\n```\n\n\nTeardown 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.\n\n### Understanding dependencies\n\n`$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.\n\nIf `$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.\n\nValues 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=)):\n\n```ts\n// @filename: index.ts\ndeclare let canvas: {\n\twidth: number;\n\theight: number;\n\tgetContext(type: '2d', options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D;\n};\ndeclare let color: string;\ndeclare let size: number;\n\n// ---cut---\n$effect(() => {\n\tconst context = canvas.getContext('2d');\n\tcontext.clearRect(0, 0, canvas.width, canvas.height);\n\n\t// this will re-run whenever `color` changes...\n\tcontext.fillStyle = color;\n\n\tsetTimeout(() => {\n\t\t// ...but not when `size` changes\n\t\tcontext.fillRect(0, 0, size, size);\n\t}, 0);\n});\n```\n\nAn 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).)\n\n```svelte\n\n\n\n\n

{state.value} doubled is {derived.value}

\n```\n\nAn effect only depends on the values that it read the last time it ran. This has interesting implications for effects that have conditional code.\n\nFor instance, if `condition` is `true` in the code snippet below, the code inside the `if` block will run and `color` will be evaluated. This means that changes to either `condition` or `color` [will cause the effect to re-run](/playground/untitled#H4sIAAAAAAAAE21RQW6DMBD8ytaNBJHaJFLViwNIVZ8RcnBgXVk1xsILTYT4e20TQg89IOPZ2fHM7siMaJBx9tmaWpFqjQNlAKXEihx7YVJpdIyfRkY3G4gB8Pi97cPanRtQU8AuwuF_eNUaQuPlOMtc1SlLRWlKUo1tOwJflUikQHZtA0klzCDc64Imx0ANn8bInV1CDhtHgjClrsftcSXotluLybOUb3g4JJHhOZs5WZpuIS9gjNqkJKQP5e2ClrR4SMdZ13E4xZ8zTPOTJU2A2uE_PQ9COCI926_hTVarIU4hu_REPlBrKq2q73ycrf1N-vS4TMUsulaVg3EtR8H9rFgsg8uUsT1B2F9eshigZHBRpuaD0D3mY8Qm2BfB5N2YyRzdNEYVDy0Ja-WsFjcOUuP1HvFLWA6H3XuHTUSmmDV2--0TXonxsKbp7G9C6R__NONS-MFNvxj_d6mBAgAA).\n\nConversely, if `condition` is `false`, `color` will not be evaluated, and the effect will _only_ re-run again when `condition` changes.\n\n```ts\n// @filename: ambient.d.ts\ndeclare module 'canvas-confetti' {\n\tinterface ConfettiOptions {\n\t\tcolors: string[];\n\t}\n\n\tfunction confetti(opts?: ConfettiOptions): void;\n\texport default confetti;\n}\n\n// @filename: index.js\n// ---cut---\nimport confetti from 'canvas-confetti';\n\nlet condition = $state(true);\nlet color = $state('#ff3e00');\n\n$effect(() => {\n\tif (condition) {\n\t\tconfetti({ colors: [color] });\n\t} else {\n\t\tconfetti();\n\t}\n});\n```\n\n## `$effect.pre`\n\nIn rare cases, you may need to run code _before_ the DOM updates. For this we can use the `$effect.pre` rune:\n\n```svelte\n\n\n
\n\t{#each messages as message}\n\t\t

{message}

\n\t{/each}\n
\n```\n\nApart from the timing, `$effect.pre` works exactly like `$effect`.\n\n## `$effect.tracking`\n\nThe `$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:\n\n\n```svelte\n\n\n\n

in template: {$effect.tracking()}

\n```\n\n\nIt 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).\n\n## `$effect.pending`\n\nWhen using [`await`](await-expressions) in components, the `$effect.pending()` rune tells you how many promises are pending in the current [boundary](svelte-boundary), not including child boundaries:\n\n\n```svelte\n\n\n\n\n\n\n

{a} + {b} = {await add(a, b)}

\n\n{#if $effect.pending()}\n\t

pending promises: {$effect.pending()}

\n{/if}\n```\n\n\n## `$effect.root`\n\nThe `$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.\n\n```js\nconst destroy = $effect.root(() => {\n\t$effect(() => {\n\t\t// setup\n\t});\n\n\treturn () => {\n\t\t// cleanup\n\t};\n});\n\n// later...\ndestroy();\n```\n\n## When not to use `$effect`\n\nIn 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...\n\n```svelte\n\n```\n\n...do this:\n\n```svelte\n\n```\n\n> [!NOTE] For things that are more complicated than a simple expression like `count * 2`, you can also use `$derived.by`.\n\nIf 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.\n\nYou 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. Instead of using effects for this...\n\n\n```svelte\n\n\n\n\n\n\n\n\n```\n\n\n...use `oninput` callbacks or — better still — [function bindings](bind#Function-bindings) where possible:\n\n\n```svelte\n\n\n\n\n\n\n\n\n```\n\n\nIf 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).\n" }, { "path": "documentation/docs/02-runes/05-$props.md", "content": "---\ntitle: $props\ntags: rune-props\n---\n\nThe 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:\n\n```svelte\n\n\n\n\n```\n\nOn the other side, inside `MyComponent.svelte`, we can receive props with the `$props` rune...\n\n```svelte\n\n\n\n

this component is {props.adjective}

\n```\n\n...though more commonly, you'll [_destructure_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) your props:\n\n```svelte\n\n\n\n

this component is {+++adjective+++}

\n```\n\n## Fallback values\n\nDestructuring allows us to declare fallback values, which are used if the parent component does not set a given prop (or the value is `undefined`):\n\n```js\nlet { adjective = 'happy' } = $props();\n```\n\n> [!NOTE] Fallback values are not turned into reactive state proxies (see [Updating props](#Updating-props) for more info)\n\n## Renaming props\n\nWe can also use the destructuring assignment to rename props, which is necessary if they're invalid identifiers, or a JavaScript keyword like `super`:\n\n```js\nlet { super: trouper = 'lights are gonna find me' } = $props();\n```\n\n## Rest props\n\nFinally, we can use a _rest property_ to get, well, the rest of the props:\n\n```js\nlet { a, b, c, ...others } = $props();\n```\n\n## Updating props\n\nReferences 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:\n\n\n```svelte\n\n\n\n\n\n\n```\n\n```svelte\n\n\n\n\n```\n\n\nWhile you can temporarily _reassign_ props, you should not _mutate_ props unless they are [bindable]($bindable).\n\nIf the prop is a regular object, the mutation will have no effect:\n\n\n```svelte\n\n\n\n\n```\n\n```svelte\n\n\n\n\n```\n\n\nIf 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:\n\n\n```svelte\n\n\n\n\n```\n\n```svelte\n\n\n\n\n```\n\n\nThe 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:\n\n\n```svelte\n\n\n\n\n```\n\n```svelte\n\n\n\n\n```\n\n\nIn 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.\n\n## Type safety\n\nYou 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...\n\n```svelte\n\n```\n\n...while in JSDoc you can do this:\n\n```svelte\n\n```\n\nYou can, of course, separate the type declaration from the annotation:\n\n```svelte\n\n```\n\n> [!NOTE] Interfaces for native DOM elements are provided in the `svelte/elements` module (see [Typing wrapper components](typescript#Typing-wrapper-components))\n\nIf your component exposes [snippet](snippet) props like `children`, these should be typed using the `Snippet` interface imported from `'svelte'` — see [Typing snippets](snippet#Typing-snippets) for examples.\n\nAdding types is recommended, as it ensures that people using your component can easily discover which props they should provide.\n\n\n## `$props.id()`\n\nThis 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.\n\nThis is useful for linking elements via attributes like `for` and `aria-labelledby`.\n\n```svelte\n\n\n
\n\t\n\t\n\n\t\n\t\n
\n```\n" }, { "path": "documentation/docs/02-runes/06-$bindable.md", "content": "---\ntitle: $bindable\n---\n\nOrdinarily, props go one way, from parent to child. This makes it easy to understand how data flows around your app.\n\nIn 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 — overuse can make your data flow unpredictable and your components harder to maintain — but it can simplify your code if used sparingly and carefully.\n\nIt also means that a state proxy can be _mutated_ in the child.\n\n> [!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'.\n\nTo mark a prop as bindable, we use the `$bindable` rune:\n\n\n```svelte\n/// file: FancyInput.svelte\n\n\n\n\n\n```\n\nNow, a component that uses `` can add the [`bind:`](bind) directive ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwWrDMBBEf2URBSfg2nfFMZRCoYeecqx6UJx1IyqvhLUONcb_XqSkTUOSk1az7DBvJtEai0HI90nw6FHIJIhckO7i78n7IhzQctS2OuAtvXHESByEFFVoeuO5VqTYdN71DC-amvGV_MDQ9q6DrCjP0skkWymKJxYZOgxBfyKs4SGwZlxke7TWZcuVoqo8-1P1z3lraCcP2g64nk4GM5S1osrXf0JV-lrkgvGbheR-wDm_g30V8JL-1vpOCZFogpQsEsWcemtxscyhKArfOx9gjps0Lq4hzRVfemaYfu-PoIqqwKPFY_XpaIqj4tYRP7a6M3aUkD27zjSw0RTgbZN6Z8WNs66XsEP03tBXUueUJFlelvYx_wCuI3leNwIAAA==)):\n\n\n```svelte\n/// file: App.svelte\n\n\n\n

{message}

\n```\n\nThe 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.\n\nIn this case, you can specify a fallback value for when no prop is passed at all:\n\n```js\n/// file: FancyInput.svelte\nlet { value = $bindable('fallback'), ...props } = $props();\n```\n" }, { "path": "documentation/docs/02-runes/07-$inspect.md", "content": "---\ntitle: $inspect\ntags: rune-inspect\n---\n\n> [!NOTE] `$inspect` only works during development. In a production build it becomes a noop.\n\nThe `$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:\n\n\n```svelte\n\n\n\n\n\n```\n\n\nOn updates, a stack trace will be printed, making it easy to find the origin of a state change (unless you're in the playground, due to technical limitations).\n\n## $inspect(...).with\n\n`$inspect(...)` returns an object with a `with` method, which you can invoke with a callback that 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`:\n\n\n```svelte\n\n\n\n\n```\n\n\n## $inspect.trace(...)\n\nThis 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.\n\n```svelte\n\n```\n\n`$inspect.trace` takes an optional first argument which will be used as the label.\n" }, { "path": "documentation/docs/02-runes/08-$host.md", "content": "---\ntitle: $host\n---\n\nWhen 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)):\n\n\n```svelte\n/// file: Stepper.svelte\n\n\n\n\n\n\n```\n\n\n```svelte\n/// file: App.svelte\n\n\n count -= 1}\n\tonincrement={() => count += 1}\n>\n\n

count: {count}

\n```\n" }, { "path": "documentation/docs/02-runes/index.md", "content": "---\ntitle: Runes\n---\n" }, { "path": "documentation/docs/03-template-syntax/01-basic-markup.md", "content": "---\ntitle: Basic markup\n---\n\nMarkup inside a Svelte component can be thought of as HTML++.\n\n## Tags\n\nA lowercase tag, like `
`, denotes a regular HTML element. A capitalised tag or a tag that uses dot notation, such as `` or ``, indicates a _component_.\n\n```svelte\n\n\n
\n\t\n
\n```\n\n## Element attributes\n\nBy default, attributes work exactly like their HTML counterparts.\n\n```svelte\n
\n\t\n
\n```\n\nAs in HTML, values may be unquoted.\n\n\n```svelte\n\n```\n\nAttribute values can contain JavaScript expressions.\n\n```svelte\npage {p}\n```\n\nOr they can _be_ JavaScript expressions.\n\n```svelte\n\n```\n\nBoolean 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).\n\nAll other attributes are included unless their value is [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish) (`null` or `undefined`).\n\n```svelte\n\n
This div has no title attribute
\n```\n\n> [!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:\n>\n> \n> ```svelte\n> \n> ```\n\nWhen the attribute name and value match (`name={name}`), they can be replaced with `{name}`.\n\n```svelte\n\n\n```\n\n## Component props\n\nBy convention, values passed to components are referred to as _properties_ or _props_ rather than _attributes_, which are a feature of the DOM.\n\nAs with elements, `name={name}` can be replaced with the `{name}` shorthand.\n\n```svelte\n\n```\n\n## Spread attributes\n\n_Spread attributes_ allow many attributes or properties to be passed to an element or component at once.\n\nAn element or component can have multiple spread attributes, interspersed with regular ones. Order matters — if `things.a` exists it will take precedence over `a=\"b\"`, while `c=\"d\"` would take precedence over `things.c`:\n\n```svelte\n\n```\n\n## Events\n\nListening 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:\n\n```svelte\n\n```\n\nEvent 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.\n\nBecause events are just attributes, the same rules as for attributes apply:\n\n- you can use the shorthand form: ``\n- you can spread them: ``\n\nTiming-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_.\n\nWhen 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()`.\n\nIn 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).\n\n### Event delegation\n\nTo 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.\n\nThere are a few gotchas to be aware of:\n\n- 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\n- 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.\n\nThe following event handlers are delegated:\n\n- `beforeinput`\n- `click`\n- `change`\n- `dblclick`\n- `contextmenu`\n- `focusin`\n- `focusout`\n- `input`\n- `keydown`\n- `keyup`\n- `mousedown`\n- `mousemove`\n- `mouseout`\n- `mouseover`\n- `mouseup`\n- `pointerdown`\n- `pointermove`\n- `pointerout`\n- `pointerover`\n- `pointerup`\n- `touchend`\n- `touchmove`\n- `touchstart`\n\n## Text expressions\n\nA JavaScript expression can be included as text by surrounding it with curly braces.\n\n```svelte\n{expression}\n```\n\nExpressions that are `null` or `undefined` will be omitted; all others are [coerced to strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion).\n\nCurly 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 `}`.\n\nIf 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.\n\n\n```svelte\n

Hello {name}!

\n

{a} + {b} = {a + b}.

\n\n
{(/^[A-Za-z ]+$/).test(value) ? x : y}
\n```\n\nThe expression will be stringified and escaped to prevent code injections. If you want to render HTML, use the `{@html}` tag instead.\n\n```svelte\n{@html potentiallyUnsafeHtmlString}\n```\n\n> [!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/)\n\n## Comments\n\nYou can use HTML comments inside components.\n\n```svelte\n

Hello world

\n```\n\nComments 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.\n\n```svelte\n\n\n```\n\nYou can add a special comment starting with `@component` that will show up when hovering over the component name in other files.\n\n````svelte\n\n\n\n
\n\t

\n\t\tHello, {name}\n\t

\n
\n````\n" }, { "path": "documentation/docs/03-template-syntax/02-if.md", "content": "---\ntitle: {#if ...}\ntags: template-if\n---\n\n```svelte\n\n{#if expression}...{/if}\n```\n\n```svelte\n\n{#if expression}...{:else if expression}...{/if}\n```\n\n```svelte\n\n{#if expression}...{:else}...{/if}\n```\n\nContent that is conditionally rendered can be wrapped in an if block.\n\n```svelte\n{#if answer === 42}\n\t

what was the question?

\n{/if}\n```\n\nAdditional conditions can be added with `{:else if expression}`, optionally ending in an `{:else}` clause.\n\n```svelte\n{#if porridge.temperature > 100}\n\t

too hot!

\n{:else if 80 > porridge.temperature}\n\t

too cold!

\n{:else}\n\t

just right!

\n{/if}\n```\n\n(Blocks don't have to wrap elements, they can also wrap text within elements.)\n" }, { "path": "documentation/docs/03-template-syntax/03-each.md", "content": "---\ntitle: {#each ...}\ntags: template-each\n---\n\n```svelte\n\n{#each expression as name}...{/each}\n```\n\n```svelte\n\n{#each expression as name, index}...{/each}\n```\n\nIterating 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`. (Internally, they are converted to arrays with [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from).)\n\nIf the value is `null` or `undefined`, it is treated the same as an empty array (which will cause [else blocks](#Else-blocks) to be rendered, where applicable).\n\n```svelte\n

Shopping list

\n
    \n\t{#each items as item}\n\t\t
  • {item.name} x {item.qty}
    • \n\t{/each}\n
\n```\n\nAn each block can also specify an _index_, equivalent to the second argument in an `array.map(...)` callback:\n\n```svelte\n{#each items as item, i}\n\t
  • {i + 1}: {item.name} x {item.qty}
    • \n{/each}\n```\n\n## Keyed each blocks\n\n```svelte\n\n{#each expression as name (key)}...{/each}\n```\n\n```svelte\n\n{#each expression as name, index (key)}...{/each}\n```\n\nIf a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to intelligently update the list when data changes by inserting, moving and deleting items, rather than adding or removing items at the end and updating the state in the middle.\n\nThe key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.\n\n```svelte\n{#each items as item (item.id)}\n\t
  • {item.name} x {item.qty}
    • \n{/each}\n\n\n{#each items as item, i (item.id)}\n\t
  • {i + 1}: {item.name} x {item.qty}
    • \n{/each}\n```\n\nYou can freely use destructuring and rest patterns in each blocks.\n\n```svelte\n{#each items as { id, name, qty }, i (id)}\n\t
  • {i + 1}: {name} x {qty}
    • \n{/each}\n\n{#each objects as { id, ...rest }}\n\t
  • {id}
    • \n{/each}\n\n{#each items as [id, ...rest]}\n\t
  • {id}
    • \n{/each}\n```\n\n## Each blocks without an item\n\n```svelte\n\n{#each expression}...{/each}\n```\n\n```svelte\n\n{#each expression, index}...{/each}\n```\n\nIn case you just want to render something `n` times, you can omit the `as` part:\n\n\n```svelte\n\n
    \n\t{#each { length: 8 }, rank}\n\t\t{#each { length: 8 }, file}\n\t\t\t
    \n\t\t{/each}\n\t{/each}\n
    \n\n\n```\n\n\n## Else blocks\n\n```svelte\n\n{#each expression as name}...{:else}...{/each}\n```\n\nAn each block can also have an `{:else}` clause, which is rendered if the list is empty.\n\n```svelte\n{#each todos as todo}\n\t

    {todo.text}

    \n{:else}\n\t

    No tasks today!

    \n{/each}\n```\n" }, { "path": "documentation/docs/03-template-syntax/04-key.md", "content": "---\ntitle: {#key ...}\ntags: template-key\n---\n\n```svelte\n\n{#key expression}...{/key}\n```\n\nKey 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:\n\n```svelte\n{#key value}\n\t\n{/key}\n```\n\nIt's also useful if you want a transition to play whenever a value changes:\n\n```svelte\n{#key value}\n\t
    {value}
    \n{/key}\n```\n" }, { "path": "documentation/docs/03-template-syntax/05-await.md", "content": "---\ntitle: {#await ...}\ntags: template-await\n---\n\n```svelte\n\n{#await expression}...{:then name}...{:catch name}...{/await}\n```\n\n```svelte\n\n{#await expression}...{:then name}...{/await}\n```\n\n```svelte\n\n{#await expression then name}...{/await}\n```\n\n```svelte\n\n{#await expression catch name}...{/await}\n```\n\nAwait 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.\n\n```svelte\n{#await promise}\n\t\n\t

    waiting for the promise to resolve...

    \n{:then value}\n\t\n\t

    The value is {value}

    \n{:catch error}\n\t\n\t

    Something went wrong: {error.message}

    \n{/await}\n```\n\n> [!NOTE] During server-side rendering, only the pending branch will be rendered.\n>\n> If the provided expression is not a `Promise`, only the `:then` branch will be rendered, including during server-side rendering.\n\nThe `catch` block can be omitted if you don't need to render anything when the promise rejects (or no error is possible).\n\n```svelte\n{#await promise}\n\t\n\t

    waiting for the promise to resolve...

    \n{:then value}\n\t\n\t

    The value is {value}

    \n{/await}\n```\n\nIf you don't care about the pending state, you can also omit the initial block.\n\n```svelte\n{#await promise then value}\n\t

    The value is {value}

    \n{/await}\n```\n\nSimilarly, if you only want to show the error state, you can omit the `then` block.\n\n```svelte\n{#await promise catch error}\n\t

    The error is {error}

    \n{/await}\n```\n\n> [!NOTE] You can use `#await` with [`import(...)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) to render components lazily:\n>\n> ```svelte\n> {#await import('./Component.svelte') then { default: Component }}\n> \t\n> {/await}\n> ```\n\n" }, { "path": "documentation/docs/03-template-syntax/06-snippet.md", "content": "---\ntitle: {#snippet ...}\n---\n\n```svelte\n\n{#snippet name()}...{/snippet}\n```\n\n```svelte\n\n{#snippet name(param1, param2, paramN)}...{/snippet}\n```\n\nSnippets, 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=)...\n\n```svelte\n{#each images as image}\n\t{#if image.href}\n\t\t\n\t\t\t
    \n\t\t\t\t{image.caption}\n\t\t\t\t
    {image.caption}
    \n\t\t\t
    \n\t\t    \n\t{:else}\n\t\t
    \n\t\t\t{image.caption}\n\t\t\t
    {image.caption}
    \n\t\t
    \n\t{/if}\n{/each}\n```\n\n...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=):\n\n```svelte\n{#snippet figure(image)}\n\t
    \n\t\t{image.caption}\n\t\t
    {image.caption}
    \n\t
    \n{/snippet}\n\n{#each images as image}\n\t{#if image.href}\n\t\t\n\t\t\t{@render figure(image)}\n\t\t\n\t{:else}\n\t\t{@render figure(image)}\n\t{/if}\n{/each}\n```\n\nLike 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.\n\n## Snippet scope\n\nSnippets can be declared anywhere inside your component. They can reference values declared outside themselves, for example in the `\n\n{#snippet hello(name)}\n\t

    hello {name}! {message}!

    \n{/snippet}\n\n{@render hello('alice')}\n{@render hello('bob')}\n```\n\n\n...and they are 'visible' to everything in the same lexical scope (i.e. siblings, and children of those siblings):\n\n```svelte\n
    \n\t{#snippet x()}\n\t\t{#snippet y()}...{/snippet}\n\n\t\t\n\t\t{@render y()}\n\t{/snippet}\n\n\t\n\t{@render y()}\n
    \n\n\n{@render x()}\n```\n\nSnippets can reference themselves and each other:\n\n\n```svelte\n\n{#snippet blastoff()}\n\t🚀\n{/snippet}\n\n{#snippet countdown(n)}\n\t{#if n > 0}\n\t\t{n}...\n\t\t{@render countdown(n - 1)}\n\t{:else}\n\t\t{@render blastoff()}\n\t{/if}\n{/snippet}\n\n{@render countdown(10)}\n```\n\n\n## Passing snippets to components\n\n### Explicit props\n\nWithin the template, snippets are values just like any other. As such, they can be passed to components as props:\n\n\n```svelte\n\n\n\n{#snippet header()}\n\tfruit\n\tqty\n\tprice\n\ttotal\n{/snippet}\n\n{#snippet row(d)}\n\t{d.name}\n\t{d.qty}\n\t{d.price}\n\t{d.qty * d.price}\n{/snippet}\n\n\n```\n\n```svelte\n\n\n\n
    \n\t{#if header}\n\t\t\n\t\t\t{@render header()}\n\t\t\n\t{/if}\n\n\t\n\t\t{#each data as d}\n\t\t\t{@render row(d)}\n\t\t{/each}\n\t\n
    \n\n\n```\n\n\nThink about it like passing content instead of data to a component. The concept is similar to slots in web components.\n\n### Implicit props\n\nAs an authoring convenience, snippets declared directly _inside_ a component implicitly become props _on_ the component:\n\n\n```svelte\n\n\n\n\n\t{#snippet header()}\n\t\t\n\t\t\n\t\t\n\t\t\n\t{/snippet}\n\n\t{#snippet row(d)}\n\t\t\n\t\t\n\t\t\n\t\t\n\t{/snippet}\n
    fruitqtypricetotal{d.name}{d.qty}{d.price}{d.qty * d.price}
    \n```\n\n```svelte\n\n\n\n\n\t{#if header}\n\t\t\n\t\t\t{@render header()}\n\t\t\n\t{/if}\n\n\t\n\t\t{#each data as d}\n\t\t\t{@render row(d)}\n\t\t{/each}\n\t\n
    \n\n\n```\n\n\n### Implicit `children` snippet\n\nAny content inside the component tags that is _not_ a snippet declaration implicitly becomes part of the `children` snippet:\n\n\n```svelte\n\n\n\n\n```\n\n```svelte\n\n\n\n\n\n```\n\n\n> [!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\n\n### Optional snippet props\n\nYou can declare snippet props as being optional. You can either use optional chaining to not render anything if the snippet isn't set...\n\n```svelte\n\n\n{@render children?.()}\n```\n\n...or use an `#if` block to render fallback content:\n\n```svelte\n\n\n{#if children}\n {@render children()}\n{:else}\n fallback content\n{/if}\n```\n\n## Typing snippets\n\nSnippets implement the `Snippet` interface imported from `'svelte'`:\n\n```svelte\n\n```\n\nWith 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.\n\nWe can tighten things up further by declaring a generic, so that `data` and `row` refer to the same type:\n\n```svelte\n\n```\n\n## Exporting snippets\n\nSnippets declared at the top level of a `.svelte` file can be exported from a `\n\n{@render add(1, 2)}\n\n```\n\n```svelte\n\n\n\n{#snippet add(a, b)}\n\t{a} + {b} = {a + b}\n{/snippet}\n```\n\n\n> [!NOTE]\n> This requires Svelte 5.5.0 or newer\n\n## Programmatic snippets\n\nSnippets can be created programmatically with the [`createRawSnippet`](svelte#createRawSnippet) API. This is intended for advanced use cases.\n\n## Snippets and slots\n\nIn Svelte 4, content can be passed to components using [slots](legacy-slots). Snippets are more powerful and flexible, and so slots have been deprecated in Svelte 5.\n" }, { "path": "documentation/docs/03-template-syntax/07-@render.md", "content": "---\ntitle: {@render ...}\n---\n\nTo render a [snippet](snippet), use a `{@render ...}` tag.\n\n```svelte\n{#snippet sum(a, b)}\n\t

    {a} + {b} = {a + b}

    \n{/snippet}\n\n{@render sum(1, 2)}\n{@render sum(3, 4)}\n{@render sum(5, 6)}\n```\n\nThe expression can be an identifier like `sum`, or an arbitrary JavaScript expression:\n\n```svelte\n{@render (cool ? coolSnippet : lameSnippet)()}\n```\n\n## Optional snippets\n\nIf 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:\n\n```svelte\n{@render children?.()}\n```\n\nAlternatively, use an [`{#if ...}`](if) block with an `:else` clause to render fallback content:\n\n```svelte\n{#if children}\n\t{@render children()}\n{:else}\n\t

    fallback content

    \n{/if}\n```\n" }, { "path": "documentation/docs/03-template-syntax/08-@html.md", "content": "---\ntitle: {@html ...}\ntags: template-html\n---\n\nTo inject raw HTML into your component, use the `{@html ...}` tag:\n\n```svelte\n
    \n\t{@html content}\n
    \n```\n\n> [!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.\n\nThe expression should be valid standalone HTML — this will not work, because `
    ` is not valid HTML:\n\n```svelte\n{@html '
    '}content{@html '
    '}\n```\n\nIt also will not compile Svelte code.\n\n## Styling\n\nContent 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:\n\n\n```svelte\n
    \n\t{@html content}\n
    \n\n\n```\n\nInstead, use the `:global` modifier to target everything inside the `
    `:\n\n\n```svelte\n\n```\n" }, { "path": "documentation/docs/03-template-syntax/09-@attach.md", "content": "---\ntitle: {@attach ...}\ntags: attachments\n---\n\nAttachments are functions that run in an [effect]($effect) when an element is mounted to the DOM or when [state]($state) read inside the function updates.\n\nOptionally, they can return a function that is called before the attachment re-runs, or after the element is later removed from the DOM.\n\n> [!NOTE]\n> Attachments are available in Svelte 5.29 and newer.\n\n```svelte\n\n\n\n
    ...
    \n```\n\nAn element can have any number of attachments.\n\n## Attachment factories\n\nA useful pattern is for a function, such as `tooltip` in this example, to _return_ an attachment ([demo](/playground/untitled#H4sIAAAAAAAAE3VT0XLaMBD8lavbDiaNCUlbHhTItG_5h5AH2T5ArdBppDOEMv73SkbGJGnH47F9t3un3TsfMyO3mInsh2SW1Sa7zlZKo8_E0zHjg42pGAjxBPxp7cTvUHOMldLjv-IVGUbDoUw295VTlh-WZslqa8kxsLL2ACtHWxh175NffnQfAAGikSGxYQGfPEvGfPSIWtOH0TiBVo2pWJEBJtKhQp4YYzjG9JIdcuMM5IZqHMPioY8vOSA997zQoevf4a7heO7cdp34olRiTGr07OhwH1IdoO2A7dLMbwahZq6MbRhKZWqxk7rBxTGVbuHmhCgb5qDgmIx_J6XtHHukHTrYYqx_YpzYng8aO4RYayql7hU-1ZJl0akqHBE_D9KLolwL-Dibzc7iSln9XjtqTF1UpMkJ2EmXR-BgQErsN4pxIJKr0RVO1qrxAqaTO4fbc9bKulZm3cfDY3aZDgvFGErWjmzhN7KmfX5rXyDeX8Pt1mU-hXjdBOrtuB97vK4GPUtmJ41XcRMEGDLD8do0nJ73zhUhSlyRw0t3vPqD8cjfLs-axiFgNBrkUd9Ulp50c-GLxlXAVlJX-ffpZyiSn7H0eLCUySZQcQdXlxj4El0Yv_FZvIKElqqGTruVLhzu7VRKCh22_5toOyxsWqLwwzK-cCbYNdg-hy-p9D7sbiZWUnts_wLUOF3CJgQAAA==)):\n\n```svelte\n\n\n\n\n\n\n```\n\nSince the `tooltip(content)` expression runs inside an [effect]($effect), the attachment will be destroyed and recreated whenever `content` changes. The same thing would happen for any state read _inside_ the attachment function when it first runs. (If this isn't what you want, see [Controlling when attachments re-run](#Controlling-when-attachments-re-run).)\n\n## Inline attachments\n\nAttachments can also be created inline ([demo](/playground/untitled#H4sIAAAAAAAAE71Wf3OaWBT9KoyTTnW3MS-I3dYmnWXVtnRAazRJzbozRSQEApiRhwKO333vuY8m225m_9yZGOT9OPfcc84D943UTfxGr_G7K6Xr3TVeNW7D2M8avT_3DVk-YAoDNF4vNB8e2tnWjyXGlm7mPzfurVPpp5JgGmeZtwkf5PtFupCxLzVvHa832rl2lElX-s2Xm2DZFNqp_hs-rZetd4v07ORpT3qmQHu7MF2td0BZp8k6z_xkvfXP902_pZ2_1_aYWEiqm0kN8I4r79qbdZ6umnq3q_2iNf22F4dE6qt2oimwdpim_uY6XMm7Fuo-IQT_iTD_CeGTHwZ38ieIJUFQRxirR1Xf39Dw0X5z0I72Af4tD61vvPNwWKQnqmfPTbduhsEd2J3vO_oBd3dc6fF2X7umNdWGf0vBRhSS6qoV7cCXfTXWfKmvWG61_si_vfU92Wz-E4RhsLhNIYinsox9QKGVd8-tuACCeKXRX12P-T_eKf7fhTq0Hvt-f3ailtSeoxJHRo1-58NoPe1UiBc1hkL8Yeh45y_vQ3mcuNl9T8s3cXPRWLnS7YWJG_gn2Tb4tUjid8jua-PVl08j_ab8I14mH8Llx0s5Tz5Err4ql52r_GYg0mVy1bEGZuD0ze64b5TWYFiM-16wSuJ4JT5vfVpDcztrcG_YkRU4s6HxufzDWF4XuVeJ1P10IbzBemt3Vp1V2e04ZXfrJd7Wicyd039brRIv_RIVu_nXi7X1cfL2sy66ztToUp1TO7qJ7NlwZ0f30pld5qNSVE5o6PbMojFHjgZB7oSicPpGteyLclQap7SvY0dXtM_LR1NT2JFHey3aaxa0VxCeYJ7RMHemoiCcgPZV9pR7o7kgcOjeGliYk9hjDZx8FAq6enwlTPSZj_vYPw9Il64dXdIY8ZmapzwfEd8-1ZyaxWhqkIZOibXUd-6Upqi1pD4uMicCV1GA_7zi73UN8BaF4sC8peJtMjfmjbHZBFwq5ov50qRaE0l96NZggnW4KqypYRAW-uhSz9ADvklwJF2J-5W0Z5fQPBhDX92R6I_0IFxRgDftge4l4dP-gH1hjD7uqU6fsOEZ9UNrCdPB-nys6uXgY6O3ZMd9sy5T9PghqrWHdjo4jB51CgLiKJaDYYA-7WgYONf1FbjkI-mE3EAfUY_rijfuJ_CVPaR50oe9JF7Q0pI8Dw3osxxYHdYPGbp2CnwHF8KvwJv2wEv0Z3ilQI6U9uwbZxbYJXvEmjjQjjCHkvNLvNg3yhzXQd1olamsT4IRrZmX0MUDpwL7R8zzHj7pSh9hPHFSHjLezKqAST51uC5zmtQ87skDUaneLokT5RbXkPWSYz53Abgjc8_o4KFGUZ-Hgv2Z1l5OTYM9D-HfUD0L-EwxH5wRnIG61gS-khfgY1bq7IAP_DA4l5xRuh9xlm8yGjutc8t-wHtkhWv3hc7aqGwiK5KzgvM5xRkZYn193uEln-su55j1GaIv7oM4iPrsVHiG0Dx7TR9-1lBfqFdwfvSd5LNL5xyZVp5NoHFZ57FkfiF6vKs4k5zvIfrX5xX6MXmt0gM5MTu8DjnhukrHHzTRd3jm0dma0_f_x5cxP9f4jBdqHvmbq2fUjzqcKh2Cp-yWj9ntcHanXmBXxhu7Q--eyjhfNFpaV7zgz4nWEUb7zUOhpevjjf_gu_KZ99pxFlZ-T3sttkmYqrco_26q35v0Ewzv5EZPbnL_8BfduWGMnyyN3q0bZ_7hb_7KG_L4CQAA)):\n\n```svelte\n\n {\n\t\tconst context = canvas.getContext('2d');\n\n\t\t$effect(() => {\n\t\t\tcontext.fillStyle = color;\n\t\t\tcontext.fillRect(0, 0, canvas.width, canvas.height);\n\t\t});\n\t}}\n>\n```\n\n> [!NOTE]\n> The nested effect runs whenever `color` changes, while the outer effect (where `canvas.getContext(...)` is called) only runs once, since it doesn't read any reactive state.\n\n## Conditional attachments\n\nFalsy values like `false` or `undefined` are treated as no attachment, enabling conditional usage:\n\n```svelte\n
    ...
    \n```\n\n## Passing attachments to components\n\nWhen used on a component, `{@attach ...}` will create a prop whose key is a [`Symbol`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol). If the component then [spreads](/tutorial/svelte/spread-props) props onto an element, the element will receive those attachments.\n\nThis allows you to create _wrapper components_ that augment elements ([demo](/playground/untitled#H4sIAAAAAAAAE3VUS3ObMBD-KxvajnFqsJM2PhA7TXrKob31FjITAbKtRkiMtDhJPfz3LiAMdpxhGJvdb1_fPnaeYjn3Iu-WIbJ04028lZDcetHDzsO3olbVApI74F1RhHbLJdayhFl-Sp5qhVwhufEWNjWiwJtYxSjyQhsEFEXxBiujcxg1_8O_dnQ9APwsEbVyiHDafjrvDZCgkiO4MLCEzxYZcn90z6XUZ6OxA61KlaIgV6i1pFC-sxjDrlbHaDiWRoGvdMbHsLzp5DES0mJnRxGaRBvcBHb7yFUTCQeunEWYcYtGv12TqgFUDbCK1WLaM6IWQhUlQiJUFm2ZLPly51xXMG0Rjoyd69C7UqqG2nu95QZyXvtvLVpri2-SN4hoLXXCZFfhQ8aQBU1VgdEaH_vSgyBZR_BpPp_vi0tY-rw2ulRZkGqpTQRbZvwa2BPgFC8bgbw31CbjJjAsE6WNYBZeGp7vtQXLMqHWnZx-5kM1TR5ycpkZXQR2wzL94l8Ur1C_3-g168SfQf1MyfRi3LW9fs77emJEw5QV9SREoLTq06tcczq7d6xEUcJX2vAhO1b843XK34e5unZEMBr15ekuKEusluWAF8lXhE2ZTP2r2RcIHJ-163FPKerCgYJLOB9i4GvNwviI5-gAQiFFBk3tBTOU3HFXEk0R8o86WvUD64aINhv5K3oRmpJXkw8uxMG6Hh6JY9X7OwGSqfUy9tDG3sHNoEi0d_d_fv9qndxRU0VClFqo3KVo3U655Hnt1PXB3Qra2Y2QGdEwgTAMCxopsoxOe6SD0gD8movDhT0LAnhqlE8gVCpLWnRoV7OJCkFAwEXitrYL1W7p7pbiE_P7XH6E_rihODm5s52XtiH9Ekaw0VgI9exadWL1uoEYjPtg2672k5szsxbKyWB2fdT0w5Y_0hcT8oXOlRetmLS8-g-6TLXXQgYAAA==)):\n\n```svelte\n\n\n\n\n\n```\n\n```svelte\n\n\n\n\n\n\n```\n\n## Controlling when attachments re-run\n\nAttachments, unlike [actions](use), are fully reactive: `{@attach foo(bar)}` will re-run on changes to `foo` _or_ `bar` (or any state read inside `foo`):\n\n```js\n// @errors: 7006 2304 2552\nfunction foo(bar) {\n\treturn (node) => {\n\t\tveryExpensiveSetupWork(node);\n\t\tupdate(node, bar);\n\t};\n}\n```\n\nIn the rare case that this is a problem (for example, if `foo` does expensive and unavoidable setup work) consider passing the data inside a function and reading it in a child effect:\n\n```js\n// @errors: 7006 2304 2552\nfunction foo(+++getBar+++) {\n\treturn (node) => {\n\t\tveryExpensiveSetupWork(node);\n\n+++\t\t$effect(() => {\n\t\t\tupdate(node, getBar());\n\t\t});+++\n\t}\n}\n```\n\n## Creating attachments programmatically\n\nTo add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](svelte-attachments#createAttachmentKey).\n\n## Converting actions to attachments\n\nIf you're using a library that only provides actions, you can convert them to attachments with [`fromAction`](svelte-attachments#fromAction), allowing you to (for example) use them with components.\n" }, { "path": "documentation/docs/03-template-syntax/10-@const.md", "content": "---\ntitle: {@const ...}\n---\n\nThe `{@const ...}` tag defines a local constant.\n\n```svelte\n{#each boxes as box}\n\t{@const area = box.width * box.height}\n\t{box.width} * {box.height} = {area}\n{/each}\n```\n\n`{@const}` is only allowed as an immediate child of a block — `{#if ...}`, `{#each ...}`, `{#snippet ...}` and so on — a `` or a ``.\n" }, { "path": "documentation/docs/03-template-syntax/11-@debug.md", "content": "---\ntitle: {@debug ...}\n---\n\nThe `{@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.\n\n```svelte\n\n\n{@debug user}\n\n

    Hello {user.firstname}!

    \n```\n\n`{@debug ...}` accepts a comma-separated list of variable names (not arbitrary expressions).\n\n```svelte\n\n{@debug user}\n{@debug user1, user2, user3}\n\n\n{@debug user.firstname}\n{@debug myArray[0]}\n{@debug !isReady}\n{@debug typeof user === 'object'}\n```\n\nThe `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when _any_ state changes, as opposed to the specified variables.\n\n" }, { "path": "documentation/docs/03-template-syntax/12-bind.md", "content": "---\ntitle: bind:\n---\n\nData ordinarily flows down, from parent to child. The `bind:` directive allows data to flow the other way, from child to parent.\n\nThe general syntax is `bind:property={expression}`, where `expression` is an [_lvalue_](https://press.rebus.community/programmingfundamentals/chapter/lvalue-and-rvalue/) (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:\n\n\n```svelte\n\n\n```\n\n\nSvelte 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.\n\nMost 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.\n\n## Function bindings\n\nYou can also use `bind:property={get, set}`, where `get` and `set` are functions, allowing you to perform validation and transformation:\n\n```svelte\n value,\n\t(v) => value = v.toLowerCase()}\n/>\n```\n\nIn the case of readonly bindings like [dimension bindings](#Dimensions), the `get` value should be `null`:\n\n```svelte\n...\n```\n\n> [!NOTE]\n> Function bindings are available in Svelte 5.9.0 and newer.\n\n## ``\n\nA `bind:value` directive on an `` element binds the input's `value` property:\n\n\n```svelte\n\n\n\n

    {message}

    \n```\n\nIn the case of a numeric input (`type=\"number\"` or `type=\"range\"`), the value will be coerced to a number:\n\n\n```svelte\n\n\n\n\n\n\n\n

    {a} + {b} = {a + b}

    \n```\n\n\nIf the input is empty or invalid (in the case of `type=\"number\"`), the value is `undefined`.\n\nSince 5.6.0, if an `` 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`.\n\n```svelte\n\n\n
    \n\t\n\t\n
    \n```\n\n> [!NOTE]\n> Use reset buttons sparingly, and ensure that users won't accidentally click them while trying to submit the form.\n\n## ``\n\nCheckbox inputs can be bound with `bind:checked`:\n\n```svelte\n\n```\n\nSince 5.6.0, if an `` 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`.\n\n```svelte\n\n\n
    \n\t\n\t\n
    \n```\n\n> [!NOTE] Use `bind:group` for radio inputs instead of `bind:checked`.\n\n## ``\n\nCheckboxes can be in an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate) state, independently of whether they are checked or unchecked:\n\n```svelte\n\n\n
    \n\t\n\n\t{#if indeterminate}\n\t\twaiting...\n\t{:else if checked}\n\t\tchecked\n\t{:else}\n\t\tunchecked\n\t{/if}\n
    \n```\n\n## ``\n\nInputs that work together can use `bind:group`:\n\n\n```svelte\n\n\n\n

    Customize your burrito

    \n\n\n\n\n\n\n\n\n\n\n\n\n

    Tortilla: {tortilla}

    \n

    Fillings: {fillings.join(', ') || 'None'}

    \n\n\n```\n\n\n> [!NOTE] `bind:group` only works if the inputs are in the same Svelte component.\n\n## ``\n\nOn `` 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.\n\n```svelte\n\n\n\n\n\n```\n\n`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.\n\n> [!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.\n\n## `` value binding corresponds to the `value` property on the selected `\n\t\n\t\n\t\n\n```\n\nWhen the value of an `\n\t\n\t\n\n```\n\n## `