[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-svelte-svelte-core-bestpractices":3,"mdc--7x3x35-key":35,"related-org-svelte-svelte-core-bestpractices":1709,"related-repo-svelte-svelte-core-bestpractices":1733},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":24,"repoUrl":25,"updatedAt":26,"license":27,"forks":28,"topics":29,"repo":30,"sourceUrl":33,"mdContent":34},"svelte-core-bestpractices","implement Svelte best practices","Guidance on writing fast, robust, modern Svelte code. Load this skill whenever in a Svelte project and asked to write\u002Fedit or analyze a Svelte component or module. Covers reactivity, event handling, styling, integration with libraries and more.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},"svelte","Svelte","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fsvelte.png","sveltejs",[13,17,20,21],{"name":14,"slug":15,"type":16},"Performance","performance","tag",{"name":18,"slug":19,"type":16},"Accessibility","accessibility",{"name":9,"slug":8,"type":16},{"name":22,"slug":23,"type":16},"Frontend","frontend",298,"https:\u002F\u002Fgithub.com\u002Fsveltejs\u002Fai-tools","2026-07-30T05:31:45.691331",null,37,[],{"repoUrl":25,"stars":24,"forks":28,"topics":31,"description":32},[],"The official svelte MCP for all your agentic needs.","https:\u002F\u002Fgithub.com\u002Fsveltejs\u002Fai-tools\u002Ftree\u002FHEAD\u002Ftools\u002Fskills\u002Fsvelte-core-bestpractices","---\nname: svelte-core-bestpractices\ndescription: Guidance on writing fast, robust, modern Svelte code. Load this skill whenever in a Svelte project and asked to write\u002Fedit or analyze a Svelte component or module. Covers reactivity, event handling, styling, integration with libraries and more.\n---\n\n## `$state`\n\nOnly use the `$state` rune for variables that should be _reactive_ — in other words, variables that cause an `$effect`, `$derived` or template expression to update. Everything else can be a normal variable.\n\nObjects and arrays (`$state({...})` or `$state([...])`) are made deeply reactive, meaning mutation will trigger updates. This has a trade-off: in exchange for fine-grained reactivity, the objects must be proxied, which has performance overhead. In cases where you're dealing with large objects that are only ever reassigned (rather than mutated), use `$state.raw` instead. This is often the case with API responses, for example.\n\n## `$derived`\n\nTo compute something from state, use `$derived` rather than `$effect`:\n\n```js\n\u002F\u002F do this\nlet square = $derived(num * num);\n\n\u002F\u002F don't do this\nlet square;\n\n$effect(() => {\n\tsquare = num * num;\n});\n```\n\n> [!NOTE] `$derived` is given an expression, _not_ a function. If you need to use a function (because the expression is complex, for example) use `$derived.by`.\n\nDeriveds are writable — you can assign to them, just like `$state`, except that they will re-evaluate when their expression changes.\n\nIf the derived expression is an object or array, it will be returned as-is — it is _not_ made deeply reactive. You can, however, use `$state` inside `$derived.by` in the rare cases that you need this.\n\n## `$effect`\n\nEffects are an escape hatch and should mostly be avoided. In particular, avoid updating state inside effects.\n\n- If you need to sync state to an external library such as D3, it is often neater to use [`{@attach ...}`](references\u002Fattach.md)\n- If you need to run some code in response to user interaction, put the code directly in an event handler or use a [function binding](references\u002Fbind.md) as appropriate\n- If you need to log values for debugging purposes, use [`$inspect`](references\u002Finspect.md)\n- If you need to observe something external to Svelte, use [`createSubscriber`](references\u002Fsvelte-reactivity.md)\n\nNever wrap the contents of an effect in `if (browser) {...}` or similar — effects do not run on the server.\n\n## `$props`\n\nTreat props as though they will change. For example, values that depend on props should usually use `$derived`:\n\n```js\n\u002F\u002F @errors: 2451\nlet { type } = $props();\n\n\u002F\u002F do this\nlet color = $derived(type === 'danger' ? 'red' : 'green');\n\n\u002F\u002F don't do this — `color` will not update if `type` changes\nlet color = type === 'danger' ? 'red' : 'green';\n```\n\n## `$inspect.trace`\n\n`$inspect.trace` is a debugging tool for reactivity. If something is not updating properly or running more than it should you can add `$inspect.trace(label)` as the first line of an `$effect` or `$derived.by` (or any function they call) to trace their dependencies and discover which one triggered an update.\n\n## Events\n\nAny element attribute starting with `on` is treated as an event listener:\n\n```svelte\n\u003Cbutton onclick={() => {...}}>click me\u003C\u002Fbutton>\n\n\u003C!-- attribute shorthand also works -->\n\u003Cbutton {onclick}>...\u003C\u002Fbutton>\n\n\u003C!-- so do spread attributes -->\n\u003Cbutton {...props}>...\u003C\u002Fbutton>\n```\n\nIf you need to attach listeners to `window` or `document` you can use `\u003Csvelte:window>` and `\u003Csvelte:document>`:\n\n```svelte\n\u003Csvelte:window onkeydown={...} \u002F>\n\u003Csvelte:document onvisibilitychange={...} \u002F>\n```\n\nAvoid using `onMount` or `$effect` for this.\n\n## Snippets\n\n[Snippets](references\u002Fsnippet.md) are a way to define reusable chunks of markup that can be instantiated with the [`{@render ...}`](references\u002Frender.md) tag, or passed to components as props. They must be declared within the template.\n\n```svelte\n{#snippet greeting(name)}\n\t\u003Cp>hello {name}!\u003C\u002Fp>\n{\u002Fsnippet}\n\n{@render greeting('world')}\n```\n\n> [!NOTE] Snippets declared at the top level of a component (i.e. not inside elements or blocks) can be referenced inside `\u003Cscript>`. A snippet that doesn't reference component state is also available in a `\u003Cscript module>`, in which case it can be exported for use by other components.\n\n## Each blocks\n\nPrefer to use [keyed each blocks](references\u002Feach.md) — this improves performance by allowing Svelte to surgically insert or remove items rather than updating the DOM belonging to existing items.\n\n> [!NOTE] The key _must_ uniquely identify the object. Do not use the index as a key.\n\nAvoid destructuring if you need to mutate the item (with something like `bind:value={item.count}`, for example).\n\n## Using JavaScript variables in CSS\n\nIf you have a JS variable that you want to use inside CSS you can set a CSS custom property with the `style:` directive.\n\n```svelte\n\u003Cdiv style:--columns={columns}>...\u003C\u002Fdiv>\n```\n\nYou can then reference `var(--columns)` inside the component's `\u003Cstyle>`.\n\n## Styling child components\n\nThe CSS in a component's `\u003Cstyle>` is scoped to that component. If a parent component needs to control the child's styles, the preferred way is to use CSS custom properties:\n\n```svelte\n\u003C!-- Parent.svelte -->\n\u003CChild --color=\"red\" \u002F>\n\n\u003C!-- Child.svelte -->\n\u003Ch1>Hello\u003C\u002Fh1>\n\n\u003Cstyle>\n\th1 {\n\t\tcolor: var(--color);\n\t}\n\u003C\u002Fstyle>\n```\n\nIf this is impossible (for example, the child component comes from a library) you can use `:global` to override styles:\n\n```svelte\n\u003Cdiv>\n\t\u003CChild \u002F>\n\u003C\u002Fdiv>\n\n\u003Cstyle>\n\tdiv :global {\n\t\th1 {\n\t\t\tcolor: red;\n\t\t}\n\t}\n\u003C\u002Fstyle>\n```\n\n## Context\n\nConsider using context instead of declaring state in a shared module. This will scope the state to the part of the app that needs it, and eliminate the possibility of it leaking between users when server-side rendering.\n\nUse `createContext` rather than `setContext` and `getContext`, as it provides type safety.\n\n## Async Svelte\n\nIf using version 5.36 or higher, you can use [await expressions](references\u002Fawait-expressions.md) and [hydratable](references\u002Fhydratable.md) to use promises directly inside components. Note that these require the `experimental.async` option to be enabled in `svelte.config.js` as they are not yet considered fully stable.\n\n## Avoid legacy features\n\nAlways use runes mode for new code, and avoid features that have more modern replacements:\n\n- use `$state` instead of implicit reactivity (e.g. `let count = 0; count += 1`)\n- use `$derived` and `$effect` instead of `$:` assignments and statements (but only use effects when there is no better solution)\n- use `$props` instead of `export let`, `$$props` and `$$restProps`\n- use `onclick={...}` instead of `on:click={...}`\n- use `{#snippet ...}` and `{@render ...}` instead of `\u003Cslot>` and `$$slots` and `\u003Csvelte:fragment>`\n- use `\u003CDynamicComponent>` instead of `\u003Csvelte:component this={DynamicComponent}>`\n- use `import Self from '.\u002FThisComponent.svelte'` and `\u003CSelf>` instead of `\u003Csvelte:self>`\n- use classes with `$state` fields to share reactivity between components, instead of using stores\n- use `{@attach ...}` instead of `use:action`\n- use clsx-style arrays and objects in `class` attributes, instead of the `class:` directive\n",{"data":36,"body":37},{"name":4,"description":6},{"type":38,"children":39},"root",[40,54,91,120,129,148,341,377,389,414,423,428,492,505,515,526,769,779,810,816,829,891,926,949,968,974,996,1042,1070,1076,1089,1108,1121,1127,1140,1154,1174,1180,1192,1287,1300,1391,1397,1402,1429,1435,1471,1477,1482,1703],{"type":41,"tag":42,"props":43,"children":45},"element","h2",{"id":44},"state",[46],{"type":41,"tag":47,"props":48,"children":50},"code",{"className":49},[],[51],{"type":52,"value":53},"text","$state",{"type":41,"tag":55,"props":56,"children":57},"p",{},[58,60,65,67,73,75,81,83,89],{"type":52,"value":59},"Only use the ",{"type":41,"tag":47,"props":61,"children":63},{"className":62},[],[64],{"type":52,"value":53},{"type":52,"value":66}," rune for variables that should be ",{"type":41,"tag":68,"props":69,"children":70},"em",{},[71],{"type":52,"value":72},"reactive",{"type":52,"value":74}," — in other words, variables that cause an ",{"type":41,"tag":47,"props":76,"children":78},{"className":77},[],[79],{"type":52,"value":80},"$effect",{"type":52,"value":82},", ",{"type":41,"tag":47,"props":84,"children":86},{"className":85},[],[87],{"type":52,"value":88},"$derived",{"type":52,"value":90}," or template expression to update. Everything else can be a normal variable.",{"type":41,"tag":55,"props":92,"children":93},{},[94,96,102,104,110,112,118],{"type":52,"value":95},"Objects and arrays (",{"type":41,"tag":47,"props":97,"children":99},{"className":98},[],[100],{"type":52,"value":101},"$state({...})",{"type":52,"value":103}," or ",{"type":41,"tag":47,"props":105,"children":107},{"className":106},[],[108],{"type":52,"value":109},"$state([...])",{"type":52,"value":111},") are made deeply reactive, meaning mutation will trigger updates. This has a trade-off: in exchange for fine-grained reactivity, the objects must be proxied, which has performance overhead. In cases where you're dealing with large objects that are only ever reassigned (rather than mutated), use ",{"type":41,"tag":47,"props":113,"children":115},{"className":114},[],[116],{"type":52,"value":117},"$state.raw",{"type":52,"value":119}," instead. This is often the case with API responses, for example.",{"type":41,"tag":42,"props":121,"children":123},{"id":122},"derived",[124],{"type":41,"tag":47,"props":125,"children":127},{"className":126},[],[128],{"type":52,"value":88},{"type":41,"tag":55,"props":130,"children":131},{},[132,134,139,141,146],{"type":52,"value":133},"To compute something from state, use ",{"type":41,"tag":47,"props":135,"children":137},{"className":136},[],[138],{"type":52,"value":88},{"type":52,"value":140}," rather than ",{"type":41,"tag":47,"props":142,"children":144},{"className":143},[],[145],{"type":52,"value":80},{"type":52,"value":147},":",{"type":41,"tag":149,"props":150,"children":155},"pre",{"className":151,"code":152,"language":153,"meta":154,"style":154},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F do this\nlet square = $derived(num * num);\n\n\u002F\u002F don't do this\nlet square;\n\n$effect(() => {\n    square = num * num;\n});\n","js","",[156],{"type":41,"tag":47,"props":157,"children":158},{"__ignoreMap":154},[159,171,219,229,238,255,263,291,323],{"type":41,"tag":160,"props":161,"children":164},"span",{"class":162,"line":163},"line",1,[165],{"type":41,"tag":160,"props":166,"children":168},{"style":167},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[169],{"type":52,"value":170},"\u002F\u002F do this\n",{"type":41,"tag":160,"props":172,"children":174},{"class":162,"line":173},2,[175,181,187,193,199,204,209,214],{"type":41,"tag":160,"props":176,"children":178},{"style":177},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[179],{"type":52,"value":180},"let",{"type":41,"tag":160,"props":182,"children":184},{"style":183},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[185],{"type":52,"value":186}," square ",{"type":41,"tag":160,"props":188,"children":190},{"style":189},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[191],{"type":52,"value":192},"=",{"type":41,"tag":160,"props":194,"children":196},{"style":195},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[197],{"type":52,"value":198}," $derived",{"type":41,"tag":160,"props":200,"children":201},{"style":183},[202],{"type":52,"value":203},"(num ",{"type":41,"tag":160,"props":205,"children":206},{"style":189},[207],{"type":52,"value":208},"*",{"type":41,"tag":160,"props":210,"children":211},{"style":183},[212],{"type":52,"value":213}," num)",{"type":41,"tag":160,"props":215,"children":216},{"style":189},[217],{"type":52,"value":218},";\n",{"type":41,"tag":160,"props":220,"children":222},{"class":162,"line":221},3,[223],{"type":41,"tag":160,"props":224,"children":226},{"emptyLinePlaceholder":225},true,[227],{"type":52,"value":228},"\n",{"type":41,"tag":160,"props":230,"children":232},{"class":162,"line":231},4,[233],{"type":41,"tag":160,"props":234,"children":235},{"style":167},[236],{"type":52,"value":237},"\u002F\u002F don't do this\n",{"type":41,"tag":160,"props":239,"children":241},{"class":162,"line":240},5,[242,246,251],{"type":41,"tag":160,"props":243,"children":244},{"style":177},[245],{"type":52,"value":180},{"type":41,"tag":160,"props":247,"children":248},{"style":183},[249],{"type":52,"value":250}," square",{"type":41,"tag":160,"props":252,"children":253},{"style":189},[254],{"type":52,"value":218},{"type":41,"tag":160,"props":256,"children":258},{"class":162,"line":257},6,[259],{"type":41,"tag":160,"props":260,"children":261},{"emptyLinePlaceholder":225},[262],{"type":52,"value":228},{"type":41,"tag":160,"props":264,"children":266},{"class":162,"line":265},7,[267,271,276,281,286],{"type":41,"tag":160,"props":268,"children":269},{"style":195},[270],{"type":52,"value":80},{"type":41,"tag":160,"props":272,"children":273},{"style":183},[274],{"type":52,"value":275},"(",{"type":41,"tag":160,"props":277,"children":278},{"style":189},[279],{"type":52,"value":280},"()",{"type":41,"tag":160,"props":282,"children":283},{"style":177},[284],{"type":52,"value":285}," =>",{"type":41,"tag":160,"props":287,"children":288},{"style":189},[289],{"type":52,"value":290}," {\n",{"type":41,"tag":160,"props":292,"children":294},{"class":162,"line":293},8,[295,300,305,310,315,319],{"type":41,"tag":160,"props":296,"children":297},{"style":183},[298],{"type":52,"value":299},"    square",{"type":41,"tag":160,"props":301,"children":302},{"style":189},[303],{"type":52,"value":304}," =",{"type":41,"tag":160,"props":306,"children":307},{"style":183},[308],{"type":52,"value":309}," num",{"type":41,"tag":160,"props":311,"children":312},{"style":189},[313],{"type":52,"value":314}," *",{"type":41,"tag":160,"props":316,"children":317},{"style":183},[318],{"type":52,"value":309},{"type":41,"tag":160,"props":320,"children":321},{"style":189},[322],{"type":52,"value":218},{"type":41,"tag":160,"props":324,"children":326},{"class":162,"line":325},9,[327,332,337],{"type":41,"tag":160,"props":328,"children":329},{"style":189},[330],{"type":52,"value":331},"}",{"type":41,"tag":160,"props":333,"children":334},{"style":183},[335],{"type":52,"value":336},")",{"type":41,"tag":160,"props":338,"children":339},{"style":189},[340],{"type":52,"value":218},{"type":41,"tag":342,"props":343,"children":344},"blockquote",{},[345],{"type":41,"tag":55,"props":346,"children":347},{},[348,353,355,360,362,367,369,375],{"type":41,"tag":160,"props":349,"children":350},{},[351],{"type":52,"value":352},"!NOTE",{"type":52,"value":354}," ",{"type":41,"tag":47,"props":356,"children":358},{"className":357},[],[359],{"type":52,"value":88},{"type":52,"value":361}," is given an expression, ",{"type":41,"tag":68,"props":363,"children":364},{},[365],{"type":52,"value":366},"not",{"type":52,"value":368}," a function. If you need to use a function (because the expression is complex, for example) use ",{"type":41,"tag":47,"props":370,"children":372},{"className":371},[],[373],{"type":52,"value":374},"$derived.by",{"type":52,"value":376},".",{"type":41,"tag":55,"props":378,"children":379},{},[380,382,387],{"type":52,"value":381},"Deriveds are writable — you can assign to them, just like ",{"type":41,"tag":47,"props":383,"children":385},{"className":384},[],[386],{"type":52,"value":53},{"type":52,"value":388},", except that they will re-evaluate when their expression changes.",{"type":41,"tag":55,"props":390,"children":391},{},[392,394,398,400,405,407,412],{"type":52,"value":393},"If the derived expression is an object or array, it will be returned as-is — it is ",{"type":41,"tag":68,"props":395,"children":396},{},[397],{"type":52,"value":366},{"type":52,"value":399}," made deeply reactive. You can, however, use ",{"type":41,"tag":47,"props":401,"children":403},{"className":402},[],[404],{"type":52,"value":53},{"type":52,"value":406}," inside ",{"type":41,"tag":47,"props":408,"children":410},{"className":409},[],[411],{"type":52,"value":374},{"type":52,"value":413}," in the rare cases that you need this.",{"type":41,"tag":42,"props":415,"children":417},{"id":416},"effect",[418],{"type":41,"tag":47,"props":419,"children":421},{"className":420},[],[422],{"type":52,"value":80},{"type":41,"tag":55,"props":424,"children":425},{},[426],{"type":52,"value":427},"Effects are an escape hatch and should mostly be avoided. In particular, avoid updating state inside effects.",{"type":41,"tag":429,"props":430,"children":431},"ul",{},[432,449,462,477],{"type":41,"tag":433,"props":434,"children":435},"li",{},[436,438],{"type":52,"value":437},"If you need to sync state to an external library such as D3, it is often neater to use ",{"type":41,"tag":439,"props":440,"children":442},"a",{"href":441},"references\u002Fattach.md",[443],{"type":41,"tag":47,"props":444,"children":446},{"className":445},[],[447],{"type":52,"value":448},"{@attach ...}",{"type":41,"tag":433,"props":450,"children":451},{},[452,454,460],{"type":52,"value":453},"If you need to run some code in response to user interaction, put the code directly in an event handler or use a ",{"type":41,"tag":439,"props":455,"children":457},{"href":456},"references\u002Fbind.md",[458],{"type":52,"value":459},"function binding",{"type":52,"value":461}," as appropriate",{"type":41,"tag":433,"props":463,"children":464},{},[465,467],{"type":52,"value":466},"If you need to log values for debugging purposes, use ",{"type":41,"tag":439,"props":468,"children":470},{"href":469},"references\u002Finspect.md",[471],{"type":41,"tag":47,"props":472,"children":474},{"className":473},[],[475],{"type":52,"value":476},"$inspect",{"type":41,"tag":433,"props":478,"children":479},{},[480,482],{"type":52,"value":481},"If you need to observe something external to Svelte, use ",{"type":41,"tag":439,"props":483,"children":485},{"href":484},"references\u002Fsvelte-reactivity.md",[486],{"type":41,"tag":47,"props":487,"children":489},{"className":488},[],[490],{"type":52,"value":491},"createSubscriber",{"type":41,"tag":55,"props":493,"children":494},{},[495,497,503],{"type":52,"value":496},"Never wrap the contents of an effect in ",{"type":41,"tag":47,"props":498,"children":500},{"className":499},[],[501],{"type":52,"value":502},"if (browser) {...}",{"type":52,"value":504}," or similar — effects do not run on the server.",{"type":41,"tag":42,"props":506,"children":508},{"id":507},"props",[509],{"type":41,"tag":47,"props":510,"children":512},{"className":511},[],[513],{"type":52,"value":514},"$props",{"type":41,"tag":55,"props":516,"children":517},{},[518,520,525],{"type":52,"value":519},"Treat props as though they will change. For example, values that depend on props should usually use ",{"type":41,"tag":47,"props":521,"children":523},{"className":522},[],[524],{"type":52,"value":88},{"type":52,"value":147},{"type":41,"tag":149,"props":527,"children":529},{"className":151,"code":528,"language":153,"meta":154,"style":154},"\u002F\u002F @errors: 2451\nlet { type } = $props();\n\n\u002F\u002F do this\nlet color = $derived(type === 'danger' ? 'red' : 'green');\n\n\u002F\u002F don't do this — `color` will not update if `type` changes\nlet color = type === 'danger' ? 'red' : 'green';\n",[530],{"type":41,"tag":47,"props":531,"children":532},{"__ignoreMap":154},[533,541,579,586,593,683,690,698],{"type":41,"tag":160,"props":534,"children":535},{"class":162,"line":163},[536],{"type":41,"tag":160,"props":537,"children":538},{"style":167},[539],{"type":52,"value":540},"\u002F\u002F @errors: 2451\n",{"type":41,"tag":160,"props":542,"children":543},{"class":162,"line":173},[544,548,553,558,562,566,571,575],{"type":41,"tag":160,"props":545,"children":546},{"style":177},[547],{"type":52,"value":180},{"type":41,"tag":160,"props":549,"children":550},{"style":189},[551],{"type":52,"value":552}," {",{"type":41,"tag":160,"props":554,"children":555},{"style":183},[556],{"type":52,"value":557}," type ",{"type":41,"tag":160,"props":559,"children":560},{"style":189},[561],{"type":52,"value":331},{"type":41,"tag":160,"props":563,"children":564},{"style":189},[565],{"type":52,"value":304},{"type":41,"tag":160,"props":567,"children":568},{"style":195},[569],{"type":52,"value":570}," $props",{"type":41,"tag":160,"props":572,"children":573},{"style":183},[574],{"type":52,"value":280},{"type":41,"tag":160,"props":576,"children":577},{"style":189},[578],{"type":52,"value":218},{"type":41,"tag":160,"props":580,"children":581},{"class":162,"line":221},[582],{"type":41,"tag":160,"props":583,"children":584},{"emptyLinePlaceholder":225},[585],{"type":52,"value":228},{"type":41,"tag":160,"props":587,"children":588},{"class":162,"line":231},[589],{"type":41,"tag":160,"props":590,"children":591},{"style":167},[592],{"type":52,"value":170},{"type":41,"tag":160,"props":594,"children":595},{"class":162,"line":240},[596,600,605,609,613,618,623,628,634,639,644,648,653,657,662,666,671,675,679],{"type":41,"tag":160,"props":597,"children":598},{"style":177},[599],{"type":52,"value":180},{"type":41,"tag":160,"props":601,"children":602},{"style":183},[603],{"type":52,"value":604}," color ",{"type":41,"tag":160,"props":606,"children":607},{"style":189},[608],{"type":52,"value":192},{"type":41,"tag":160,"props":610,"children":611},{"style":195},[612],{"type":52,"value":198},{"type":41,"tag":160,"props":614,"children":615},{"style":183},[616],{"type":52,"value":617},"(type ",{"type":41,"tag":160,"props":619,"children":620},{"style":189},[621],{"type":52,"value":622},"===",{"type":41,"tag":160,"props":624,"children":625},{"style":189},[626],{"type":52,"value":627}," '",{"type":41,"tag":160,"props":629,"children":631},{"style":630},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[632],{"type":52,"value":633},"danger",{"type":41,"tag":160,"props":635,"children":636},{"style":189},[637],{"type":52,"value":638},"'",{"type":41,"tag":160,"props":640,"children":641},{"style":189},[642],{"type":52,"value":643}," ?",{"type":41,"tag":160,"props":645,"children":646},{"style":189},[647],{"type":52,"value":627},{"type":41,"tag":160,"props":649,"children":650},{"style":630},[651],{"type":52,"value":652},"red",{"type":41,"tag":160,"props":654,"children":655},{"style":189},[656],{"type":52,"value":638},{"type":41,"tag":160,"props":658,"children":659},{"style":189},[660],{"type":52,"value":661}," :",{"type":41,"tag":160,"props":663,"children":664},{"style":189},[665],{"type":52,"value":627},{"type":41,"tag":160,"props":667,"children":668},{"style":630},[669],{"type":52,"value":670},"green",{"type":41,"tag":160,"props":672,"children":673},{"style":189},[674],{"type":52,"value":638},{"type":41,"tag":160,"props":676,"children":677},{"style":183},[678],{"type":52,"value":336},{"type":41,"tag":160,"props":680,"children":681},{"style":189},[682],{"type":52,"value":218},{"type":41,"tag":160,"props":684,"children":685},{"class":162,"line":257},[686],{"type":41,"tag":160,"props":687,"children":688},{"emptyLinePlaceholder":225},[689],{"type":52,"value":228},{"type":41,"tag":160,"props":691,"children":692},{"class":162,"line":265},[693],{"type":41,"tag":160,"props":694,"children":695},{"style":167},[696],{"type":52,"value":697},"\u002F\u002F don't do this — `color` will not update if `type` changes\n",{"type":41,"tag":160,"props":699,"children":700},{"class":162,"line":293},[701,705,709,713,717,721,725,729,733,737,741,745,749,753,757,761,765],{"type":41,"tag":160,"props":702,"children":703},{"style":177},[704],{"type":52,"value":180},{"type":41,"tag":160,"props":706,"children":707},{"style":183},[708],{"type":52,"value":604},{"type":41,"tag":160,"props":710,"children":711},{"style":189},[712],{"type":52,"value":192},{"type":41,"tag":160,"props":714,"children":715},{"style":183},[716],{"type":52,"value":557},{"type":41,"tag":160,"props":718,"children":719},{"style":189},[720],{"type":52,"value":622},{"type":41,"tag":160,"props":722,"children":723},{"style":189},[724],{"type":52,"value":627},{"type":41,"tag":160,"props":726,"children":727},{"style":630},[728],{"type":52,"value":633},{"type":41,"tag":160,"props":730,"children":731},{"style":189},[732],{"type":52,"value":638},{"type":41,"tag":160,"props":734,"children":735},{"style":189},[736],{"type":52,"value":643},{"type":41,"tag":160,"props":738,"children":739},{"style":189},[740],{"type":52,"value":627},{"type":41,"tag":160,"props":742,"children":743},{"style":630},[744],{"type":52,"value":652},{"type":41,"tag":160,"props":746,"children":747},{"style":189},[748],{"type":52,"value":638},{"type":41,"tag":160,"props":750,"children":751},{"style":189},[752],{"type":52,"value":661},{"type":41,"tag":160,"props":754,"children":755},{"style":189},[756],{"type":52,"value":627},{"type":41,"tag":160,"props":758,"children":759},{"style":630},[760],{"type":52,"value":670},{"type":41,"tag":160,"props":762,"children":763},{"style":189},[764],{"type":52,"value":638},{"type":41,"tag":160,"props":766,"children":767},{"style":189},[768],{"type":52,"value":218},{"type":41,"tag":42,"props":770,"children":772},{"id":771},"inspecttrace",[773],{"type":41,"tag":47,"props":774,"children":776},{"className":775},[],[777],{"type":52,"value":778},"$inspect.trace",{"type":41,"tag":55,"props":780,"children":781},{},[782,787,789,795,797,802,803,808],{"type":41,"tag":47,"props":783,"children":785},{"className":784},[],[786],{"type":52,"value":778},{"type":52,"value":788}," is a debugging tool for reactivity. If something is not updating properly or running more than it should you can add ",{"type":41,"tag":47,"props":790,"children":792},{"className":791},[],[793],{"type":52,"value":794},"$inspect.trace(label)",{"type":52,"value":796}," as the first line of an ",{"type":41,"tag":47,"props":798,"children":800},{"className":799},[],[801],{"type":52,"value":80},{"type":52,"value":103},{"type":41,"tag":47,"props":804,"children":806},{"className":805},[],[807],{"type":52,"value":374},{"type":52,"value":809}," (or any function they call) to trace their dependencies and discover which one triggered an update.",{"type":41,"tag":42,"props":811,"children":813},{"id":812},"events",[814],{"type":52,"value":815},"Events",{"type":41,"tag":55,"props":817,"children":818},{},[819,821,827],{"type":52,"value":820},"Any element attribute starting with ",{"type":41,"tag":47,"props":822,"children":824},{"className":823},[],[825],{"type":52,"value":826},"on",{"type":52,"value":828}," is treated as an event listener:",{"type":41,"tag":149,"props":830,"children":833},{"className":831,"code":832,"language":8,"meta":154,"style":154},"language-svelte shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbutton onclick={() => {...}}>click me\u003C\u002Fbutton>\n\n\u003C!-- attribute shorthand also works -->\n\u003Cbutton {onclick}>...\u003C\u002Fbutton>\n\n\u003C!-- so do spread attributes -->\n\u003Cbutton {...props}>...\u003C\u002Fbutton>\n",[834],{"type":41,"tag":47,"props":835,"children":836},{"__ignoreMap":154},[837,845,852,860,868,875,883],{"type":41,"tag":160,"props":838,"children":839},{"class":162,"line":163},[840],{"type":41,"tag":160,"props":841,"children":842},{},[843],{"type":52,"value":844},"\u003Cbutton onclick={() => {...}}>click me\u003C\u002Fbutton>\n",{"type":41,"tag":160,"props":846,"children":847},{"class":162,"line":173},[848],{"type":41,"tag":160,"props":849,"children":850},{"emptyLinePlaceholder":225},[851],{"type":52,"value":228},{"type":41,"tag":160,"props":853,"children":854},{"class":162,"line":221},[855],{"type":41,"tag":160,"props":856,"children":857},{},[858],{"type":52,"value":859},"\u003C!-- attribute shorthand also works -->\n",{"type":41,"tag":160,"props":861,"children":862},{"class":162,"line":231},[863],{"type":41,"tag":160,"props":864,"children":865},{},[866],{"type":52,"value":867},"\u003Cbutton {onclick}>...\u003C\u002Fbutton>\n",{"type":41,"tag":160,"props":869,"children":870},{"class":162,"line":240},[871],{"type":41,"tag":160,"props":872,"children":873},{"emptyLinePlaceholder":225},[874],{"type":52,"value":228},{"type":41,"tag":160,"props":876,"children":877},{"class":162,"line":257},[878],{"type":41,"tag":160,"props":879,"children":880},{},[881],{"type":52,"value":882},"\u003C!-- so do spread attributes -->\n",{"type":41,"tag":160,"props":884,"children":885},{"class":162,"line":265},[886],{"type":41,"tag":160,"props":887,"children":888},{},[889],{"type":52,"value":890},"\u003Cbutton {...props}>...\u003C\u002Fbutton>\n",{"type":41,"tag":55,"props":892,"children":893},{},[894,896,902,903,909,911,917,919,925],{"type":52,"value":895},"If you need to attach listeners to ",{"type":41,"tag":47,"props":897,"children":899},{"className":898},[],[900],{"type":52,"value":901},"window",{"type":52,"value":103},{"type":41,"tag":47,"props":904,"children":906},{"className":905},[],[907],{"type":52,"value":908},"document",{"type":52,"value":910}," you can use ",{"type":41,"tag":47,"props":912,"children":914},{"className":913},[],[915],{"type":52,"value":916},"\u003Csvelte:window>",{"type":52,"value":918}," and ",{"type":41,"tag":47,"props":920,"children":922},{"className":921},[],[923],{"type":52,"value":924},"\u003Csvelte:document>",{"type":52,"value":147},{"type":41,"tag":149,"props":927,"children":929},{"className":831,"code":928,"language":8,"meta":154,"style":154},"\u003Csvelte:window onkeydown={...} \u002F>\n\u003Csvelte:document onvisibilitychange={...} \u002F>\n",[930],{"type":41,"tag":47,"props":931,"children":932},{"__ignoreMap":154},[933,941],{"type":41,"tag":160,"props":934,"children":935},{"class":162,"line":163},[936],{"type":41,"tag":160,"props":937,"children":938},{},[939],{"type":52,"value":940},"\u003Csvelte:window onkeydown={...} \u002F>\n",{"type":41,"tag":160,"props":942,"children":943},{"class":162,"line":173},[944],{"type":41,"tag":160,"props":945,"children":946},{},[947],{"type":52,"value":948},"\u003Csvelte:document onvisibilitychange={...} \u002F>\n",{"type":41,"tag":55,"props":950,"children":951},{},[952,954,960,961,966],{"type":52,"value":953},"Avoid using ",{"type":41,"tag":47,"props":955,"children":957},{"className":956},[],[958],{"type":52,"value":959},"onMount",{"type":52,"value":103},{"type":41,"tag":47,"props":962,"children":964},{"className":963},[],[965],{"type":52,"value":80},{"type":52,"value":967}," for this.",{"type":41,"tag":42,"props":969,"children":971},{"id":970},"snippets",[972],{"type":52,"value":973},"Snippets",{"type":41,"tag":55,"props":975,"children":976},{},[977,982,984,994],{"type":41,"tag":439,"props":978,"children":980},{"href":979},"references\u002Fsnippet.md",[981],{"type":52,"value":973},{"type":52,"value":983}," are a way to define reusable chunks of markup that can be instantiated with the ",{"type":41,"tag":439,"props":985,"children":987},{"href":986},"references\u002Frender.md",[988],{"type":41,"tag":47,"props":989,"children":991},{"className":990},[],[992],{"type":52,"value":993},"{@render ...}",{"type":52,"value":995}," tag, or passed to components as props. They must be declared within the template.",{"type":41,"tag":149,"props":997,"children":999},{"className":831,"code":998,"language":8,"meta":154,"style":154},"{#snippet greeting(name)}\n    \u003Cp>hello {name}!\u003C\u002Fp>\n{\u002Fsnippet}\n\n{@render greeting('world')}\n",[1000],{"type":41,"tag":47,"props":1001,"children":1002},{"__ignoreMap":154},[1003,1011,1019,1027,1034],{"type":41,"tag":160,"props":1004,"children":1005},{"class":162,"line":163},[1006],{"type":41,"tag":160,"props":1007,"children":1008},{},[1009],{"type":52,"value":1010},"{#snippet greeting(name)}\n",{"type":41,"tag":160,"props":1012,"children":1013},{"class":162,"line":173},[1014],{"type":41,"tag":160,"props":1015,"children":1016},{},[1017],{"type":52,"value":1018},"    \u003Cp>hello {name}!\u003C\u002Fp>\n",{"type":41,"tag":160,"props":1020,"children":1021},{"class":162,"line":221},[1022],{"type":41,"tag":160,"props":1023,"children":1024},{},[1025],{"type":52,"value":1026},"{\u002Fsnippet}\n",{"type":41,"tag":160,"props":1028,"children":1029},{"class":162,"line":231},[1030],{"type":41,"tag":160,"props":1031,"children":1032},{"emptyLinePlaceholder":225},[1033],{"type":52,"value":228},{"type":41,"tag":160,"props":1035,"children":1036},{"class":162,"line":240},[1037],{"type":41,"tag":160,"props":1038,"children":1039},{},[1040],{"type":52,"value":1041},"{@render greeting('world')}\n",{"type":41,"tag":342,"props":1043,"children":1044},{},[1045],{"type":41,"tag":55,"props":1046,"children":1047},{},[1048,1052,1054,1060,1062,1068],{"type":41,"tag":160,"props":1049,"children":1050},{},[1051],{"type":52,"value":352},{"type":52,"value":1053}," Snippets declared at the top level of a component (i.e. not inside elements or blocks) can be referenced inside ",{"type":41,"tag":47,"props":1055,"children":1057},{"className":1056},[],[1058],{"type":52,"value":1059},"\u003Cscript>",{"type":52,"value":1061},". A snippet that doesn't reference component state is also available in a ",{"type":41,"tag":47,"props":1063,"children":1065},{"className":1064},[],[1066],{"type":52,"value":1067},"\u003Cscript module>",{"type":52,"value":1069},", in which case it can be exported for use by other components.",{"type":41,"tag":42,"props":1071,"children":1073},{"id":1072},"each-blocks",[1074],{"type":52,"value":1075},"Each blocks",{"type":41,"tag":55,"props":1077,"children":1078},{},[1079,1081,1087],{"type":52,"value":1080},"Prefer to use ",{"type":41,"tag":439,"props":1082,"children":1084},{"href":1083},"references\u002Feach.md",[1085],{"type":52,"value":1086},"keyed each blocks",{"type":52,"value":1088}," — this improves performance by allowing Svelte to surgically insert or remove items rather than updating the DOM belonging to existing items.",{"type":41,"tag":342,"props":1090,"children":1091},{},[1092],{"type":41,"tag":55,"props":1093,"children":1094},{},[1095,1099,1101,1106],{"type":41,"tag":160,"props":1096,"children":1097},{},[1098],{"type":52,"value":352},{"type":52,"value":1100}," The key ",{"type":41,"tag":68,"props":1102,"children":1103},{},[1104],{"type":52,"value":1105},"must",{"type":52,"value":1107}," uniquely identify the object. Do not use the index as a key.",{"type":41,"tag":55,"props":1109,"children":1110},{},[1111,1113,1119],{"type":52,"value":1112},"Avoid destructuring if you need to mutate the item (with something like ",{"type":41,"tag":47,"props":1114,"children":1116},{"className":1115},[],[1117],{"type":52,"value":1118},"bind:value={item.count}",{"type":52,"value":1120},", for example).",{"type":41,"tag":42,"props":1122,"children":1124},{"id":1123},"using-javascript-variables-in-css",[1125],{"type":52,"value":1126},"Using JavaScript variables in CSS",{"type":41,"tag":55,"props":1128,"children":1129},{},[1130,1132,1138],{"type":52,"value":1131},"If you have a JS variable that you want to use inside CSS you can set a CSS custom property with the ",{"type":41,"tag":47,"props":1133,"children":1135},{"className":1134},[],[1136],{"type":52,"value":1137},"style:",{"type":52,"value":1139}," directive.",{"type":41,"tag":149,"props":1141,"children":1143},{"className":831,"code":1142,"language":8,"meta":154,"style":154},"\u003Cdiv style:--columns={columns}>...\u003C\u002Fdiv>\n",[1144],{"type":41,"tag":47,"props":1145,"children":1146},{"__ignoreMap":154},[1147],{"type":41,"tag":160,"props":1148,"children":1149},{"class":162,"line":163},[1150],{"type":41,"tag":160,"props":1151,"children":1152},{},[1153],{"type":52,"value":1142},{"type":41,"tag":55,"props":1155,"children":1156},{},[1157,1159,1165,1167,1173],{"type":52,"value":1158},"You can then reference ",{"type":41,"tag":47,"props":1160,"children":1162},{"className":1161},[],[1163],{"type":52,"value":1164},"var(--columns)",{"type":52,"value":1166}," inside the component's ",{"type":41,"tag":47,"props":1168,"children":1170},{"className":1169},[],[1171],{"type":52,"value":1172},"\u003Cstyle>",{"type":52,"value":376},{"type":41,"tag":42,"props":1175,"children":1177},{"id":1176},"styling-child-components",[1178],{"type":52,"value":1179},"Styling child components",{"type":41,"tag":55,"props":1181,"children":1182},{},[1183,1185,1190],{"type":52,"value":1184},"The CSS in a component's ",{"type":41,"tag":47,"props":1186,"children":1188},{"className":1187},[],[1189],{"type":52,"value":1172},{"type":52,"value":1191}," is scoped to that component. If a parent component needs to control the child's styles, the preferred way is to use CSS custom properties:",{"type":41,"tag":149,"props":1193,"children":1195},{"className":831,"code":1194,"language":8,"meta":154,"style":154},"\u003C!-- Parent.svelte -->\n\u003CChild --color=\"red\" \u002F>\n\n\u003C!-- Child.svelte -->\n\u003Ch1>Hello\u003C\u002Fh1>\n\n\u003Cstyle>\n    h1 {\n        color: var(--color);\n    }\n\u003C\u002Fstyle>\n",[1196],{"type":41,"tag":47,"props":1197,"children":1198},{"__ignoreMap":154},[1199,1207,1215,1222,1230,1238,1245,1253,1261,1269,1278],{"type":41,"tag":160,"props":1200,"children":1201},{"class":162,"line":163},[1202],{"type":41,"tag":160,"props":1203,"children":1204},{},[1205],{"type":52,"value":1206},"\u003C!-- Parent.svelte -->\n",{"type":41,"tag":160,"props":1208,"children":1209},{"class":162,"line":173},[1210],{"type":41,"tag":160,"props":1211,"children":1212},{},[1213],{"type":52,"value":1214},"\u003CChild --color=\"red\" \u002F>\n",{"type":41,"tag":160,"props":1216,"children":1217},{"class":162,"line":221},[1218],{"type":41,"tag":160,"props":1219,"children":1220},{"emptyLinePlaceholder":225},[1221],{"type":52,"value":228},{"type":41,"tag":160,"props":1223,"children":1224},{"class":162,"line":231},[1225],{"type":41,"tag":160,"props":1226,"children":1227},{},[1228],{"type":52,"value":1229},"\u003C!-- Child.svelte -->\n",{"type":41,"tag":160,"props":1231,"children":1232},{"class":162,"line":240},[1233],{"type":41,"tag":160,"props":1234,"children":1235},{},[1236],{"type":52,"value":1237},"\u003Ch1>Hello\u003C\u002Fh1>\n",{"type":41,"tag":160,"props":1239,"children":1240},{"class":162,"line":257},[1241],{"type":41,"tag":160,"props":1242,"children":1243},{"emptyLinePlaceholder":225},[1244],{"type":52,"value":228},{"type":41,"tag":160,"props":1246,"children":1247},{"class":162,"line":265},[1248],{"type":41,"tag":160,"props":1249,"children":1250},{},[1251],{"type":52,"value":1252},"\u003Cstyle>\n",{"type":41,"tag":160,"props":1254,"children":1255},{"class":162,"line":293},[1256],{"type":41,"tag":160,"props":1257,"children":1258},{},[1259],{"type":52,"value":1260},"    h1 {\n",{"type":41,"tag":160,"props":1262,"children":1263},{"class":162,"line":325},[1264],{"type":41,"tag":160,"props":1265,"children":1266},{},[1267],{"type":52,"value":1268},"        color: var(--color);\n",{"type":41,"tag":160,"props":1270,"children":1272},{"class":162,"line":1271},10,[1273],{"type":41,"tag":160,"props":1274,"children":1275},{},[1276],{"type":52,"value":1277},"    }\n",{"type":41,"tag":160,"props":1279,"children":1281},{"class":162,"line":1280},11,[1282],{"type":41,"tag":160,"props":1283,"children":1284},{},[1285],{"type":52,"value":1286},"\u003C\u002Fstyle>\n",{"type":41,"tag":55,"props":1288,"children":1289},{},[1290,1292,1298],{"type":52,"value":1291},"If this is impossible (for example, the child component comes from a library) you can use ",{"type":41,"tag":47,"props":1293,"children":1295},{"className":1294},[],[1296],{"type":52,"value":1297},":global",{"type":52,"value":1299}," to override styles:",{"type":41,"tag":149,"props":1301,"children":1303},{"className":831,"code":1302,"language":8,"meta":154,"style":154},"\u003Cdiv>\n    \u003CChild \u002F>\n\u003C\u002Fdiv>\n\n\u003Cstyle>\n    div :global {\n        h1 {\n            color: red;\n        }\n    }\n\u003C\u002Fstyle>\n",[1304],{"type":41,"tag":47,"props":1305,"children":1306},{"__ignoreMap":154},[1307,1315,1323,1331,1338,1345,1353,1361,1369,1377,1384],{"type":41,"tag":160,"props":1308,"children":1309},{"class":162,"line":163},[1310],{"type":41,"tag":160,"props":1311,"children":1312},{},[1313],{"type":52,"value":1314},"\u003Cdiv>\n",{"type":41,"tag":160,"props":1316,"children":1317},{"class":162,"line":173},[1318],{"type":41,"tag":160,"props":1319,"children":1320},{},[1321],{"type":52,"value":1322},"    \u003CChild \u002F>\n",{"type":41,"tag":160,"props":1324,"children":1325},{"class":162,"line":221},[1326],{"type":41,"tag":160,"props":1327,"children":1328},{},[1329],{"type":52,"value":1330},"\u003C\u002Fdiv>\n",{"type":41,"tag":160,"props":1332,"children":1333},{"class":162,"line":231},[1334],{"type":41,"tag":160,"props":1335,"children":1336},{"emptyLinePlaceholder":225},[1337],{"type":52,"value":228},{"type":41,"tag":160,"props":1339,"children":1340},{"class":162,"line":240},[1341],{"type":41,"tag":160,"props":1342,"children":1343},{},[1344],{"type":52,"value":1252},{"type":41,"tag":160,"props":1346,"children":1347},{"class":162,"line":257},[1348],{"type":41,"tag":160,"props":1349,"children":1350},{},[1351],{"type":52,"value":1352},"    div :global {\n",{"type":41,"tag":160,"props":1354,"children":1355},{"class":162,"line":265},[1356],{"type":41,"tag":160,"props":1357,"children":1358},{},[1359],{"type":52,"value":1360},"        h1 {\n",{"type":41,"tag":160,"props":1362,"children":1363},{"class":162,"line":293},[1364],{"type":41,"tag":160,"props":1365,"children":1366},{},[1367],{"type":52,"value":1368},"            color: red;\n",{"type":41,"tag":160,"props":1370,"children":1371},{"class":162,"line":325},[1372],{"type":41,"tag":160,"props":1373,"children":1374},{},[1375],{"type":52,"value":1376},"        }\n",{"type":41,"tag":160,"props":1378,"children":1379},{"class":162,"line":1271},[1380],{"type":41,"tag":160,"props":1381,"children":1382},{},[1383],{"type":52,"value":1277},{"type":41,"tag":160,"props":1385,"children":1386},{"class":162,"line":1280},[1387],{"type":41,"tag":160,"props":1388,"children":1389},{},[1390],{"type":52,"value":1286},{"type":41,"tag":42,"props":1392,"children":1394},{"id":1393},"context",[1395],{"type":52,"value":1396},"Context",{"type":41,"tag":55,"props":1398,"children":1399},{},[1400],{"type":52,"value":1401},"Consider using context instead of declaring state in a shared module. This will scope the state to the part of the app that needs it, and eliminate the possibility of it leaking between users when server-side rendering.",{"type":41,"tag":55,"props":1403,"children":1404},{},[1405,1407,1413,1414,1420,1421,1427],{"type":52,"value":1406},"Use ",{"type":41,"tag":47,"props":1408,"children":1410},{"className":1409},[],[1411],{"type":52,"value":1412},"createContext",{"type":52,"value":140},{"type":41,"tag":47,"props":1415,"children":1417},{"className":1416},[],[1418],{"type":52,"value":1419},"setContext",{"type":52,"value":918},{"type":41,"tag":47,"props":1422,"children":1424},{"className":1423},[],[1425],{"type":52,"value":1426},"getContext",{"type":52,"value":1428},", as it provides type safety.",{"type":41,"tag":42,"props":1430,"children":1432},{"id":1431},"async-svelte",[1433],{"type":52,"value":1434},"Async Svelte",{"type":41,"tag":55,"props":1436,"children":1437},{},[1438,1440,1446,1447,1453,1455,1461,1463,1469],{"type":52,"value":1439},"If using version 5.36 or higher, you can use ",{"type":41,"tag":439,"props":1441,"children":1443},{"href":1442},"references\u002Fawait-expressions.md",[1444],{"type":52,"value":1445},"await expressions",{"type":52,"value":918},{"type":41,"tag":439,"props":1448,"children":1450},{"href":1449},"references\u002Fhydratable.md",[1451],{"type":52,"value":1452},"hydratable",{"type":52,"value":1454}," to use promises directly inside components. Note that these require the ",{"type":41,"tag":47,"props":1456,"children":1458},{"className":1457},[],[1459],{"type":52,"value":1460},"experimental.async",{"type":52,"value":1462}," option to be enabled in ",{"type":41,"tag":47,"props":1464,"children":1466},{"className":1465},[],[1467],{"type":52,"value":1468},"svelte.config.js",{"type":52,"value":1470}," as they are not yet considered fully stable.",{"type":41,"tag":42,"props":1472,"children":1474},{"id":1473},"avoid-legacy-features",[1475],{"type":52,"value":1476},"Avoid legacy features",{"type":41,"tag":55,"props":1478,"children":1479},{},[1480],{"type":52,"value":1481},"Always use runes mode for new code, and avoid features that have more modern replacements:",{"type":41,"tag":429,"props":1483,"children":1484},{},[1485,1504,1529,1559,1576,1613,1630,1654,1666,1682],{"type":41,"tag":433,"props":1486,"children":1487},{},[1488,1490,1495,1497,1503],{"type":52,"value":1489},"use ",{"type":41,"tag":47,"props":1491,"children":1493},{"className":1492},[],[1494],{"type":52,"value":53},{"type":52,"value":1496}," instead of implicit reactivity (e.g. ",{"type":41,"tag":47,"props":1498,"children":1500},{"className":1499},[],[1501],{"type":52,"value":1502},"let count = 0; count += 1",{"type":52,"value":336},{"type":41,"tag":433,"props":1505,"children":1506},{},[1507,1508,1513,1514,1519,1521,1527],{"type":52,"value":1489},{"type":41,"tag":47,"props":1509,"children":1511},{"className":1510},[],[1512],{"type":52,"value":88},{"type":52,"value":918},{"type":41,"tag":47,"props":1515,"children":1517},{"className":1516},[],[1518],{"type":52,"value":80},{"type":52,"value":1520}," instead of ",{"type":41,"tag":47,"props":1522,"children":1524},{"className":1523},[],[1525],{"type":52,"value":1526},"$:",{"type":52,"value":1528}," assignments and statements (but only use effects when there is no better solution)",{"type":41,"tag":433,"props":1530,"children":1531},{},[1532,1533,1538,1539,1545,1546,1552,1553],{"type":52,"value":1489},{"type":41,"tag":47,"props":1534,"children":1536},{"className":1535},[],[1537],{"type":52,"value":514},{"type":52,"value":1520},{"type":41,"tag":47,"props":1540,"children":1542},{"className":1541},[],[1543],{"type":52,"value":1544},"export let",{"type":52,"value":82},{"type":41,"tag":47,"props":1547,"children":1549},{"className":1548},[],[1550],{"type":52,"value":1551},"$$props",{"type":52,"value":918},{"type":41,"tag":47,"props":1554,"children":1556},{"className":1555},[],[1557],{"type":52,"value":1558},"$$restProps",{"type":41,"tag":433,"props":1560,"children":1561},{},[1562,1563,1569,1570],{"type":52,"value":1489},{"type":41,"tag":47,"props":1564,"children":1566},{"className":1565},[],[1567],{"type":52,"value":1568},"onclick={...}",{"type":52,"value":1520},{"type":41,"tag":47,"props":1571,"children":1573},{"className":1572},[],[1574],{"type":52,"value":1575},"on:click={...}",{"type":41,"tag":433,"props":1577,"children":1578},{},[1579,1580,1586,1587,1592,1593,1599,1600,1606,1607],{"type":52,"value":1489},{"type":41,"tag":47,"props":1581,"children":1583},{"className":1582},[],[1584],{"type":52,"value":1585},"{#snippet ...}",{"type":52,"value":918},{"type":41,"tag":47,"props":1588,"children":1590},{"className":1589},[],[1591],{"type":52,"value":993},{"type":52,"value":1520},{"type":41,"tag":47,"props":1594,"children":1596},{"className":1595},[],[1597],{"type":52,"value":1598},"\u003Cslot>",{"type":52,"value":918},{"type":41,"tag":47,"props":1601,"children":1603},{"className":1602},[],[1604],{"type":52,"value":1605},"$$slots",{"type":52,"value":918},{"type":41,"tag":47,"props":1608,"children":1610},{"className":1609},[],[1611],{"type":52,"value":1612},"\u003Csvelte:fragment>",{"type":41,"tag":433,"props":1614,"children":1615},{},[1616,1617,1623,1624],{"type":52,"value":1489},{"type":41,"tag":47,"props":1618,"children":1620},{"className":1619},[],[1621],{"type":52,"value":1622},"\u003CDynamicComponent>",{"type":52,"value":1520},{"type":41,"tag":47,"props":1625,"children":1627},{"className":1626},[],[1628],{"type":52,"value":1629},"\u003Csvelte:component this={DynamicComponent}>",{"type":41,"tag":433,"props":1631,"children":1632},{},[1633,1634,1640,1641,1647,1648],{"type":52,"value":1489},{"type":41,"tag":47,"props":1635,"children":1637},{"className":1636},[],[1638],{"type":52,"value":1639},"import Self from '.\u002FThisComponent.svelte'",{"type":52,"value":918},{"type":41,"tag":47,"props":1642,"children":1644},{"className":1643},[],[1645],{"type":52,"value":1646},"\u003CSelf>",{"type":52,"value":1520},{"type":41,"tag":47,"props":1649,"children":1651},{"className":1650},[],[1652],{"type":52,"value":1653},"\u003Csvelte:self>",{"type":41,"tag":433,"props":1655,"children":1656},{},[1657,1659,1664],{"type":52,"value":1658},"use classes with ",{"type":41,"tag":47,"props":1660,"children":1662},{"className":1661},[],[1663],{"type":52,"value":53},{"type":52,"value":1665}," fields to share reactivity between components, instead of using stores",{"type":41,"tag":433,"props":1667,"children":1668},{},[1669,1670,1675,1676],{"type":52,"value":1489},{"type":41,"tag":47,"props":1671,"children":1673},{"className":1672},[],[1674],{"type":52,"value":448},{"type":52,"value":1520},{"type":41,"tag":47,"props":1677,"children":1679},{"className":1678},[],[1680],{"type":52,"value":1681},"use:action",{"type":41,"tag":433,"props":1683,"children":1684},{},[1685,1687,1693,1695,1701],{"type":52,"value":1686},"use clsx-style arrays and objects in ",{"type":41,"tag":47,"props":1688,"children":1690},{"className":1689},[],[1691],{"type":52,"value":1692},"class",{"type":52,"value":1694}," attributes, instead of the ",{"type":41,"tag":47,"props":1696,"children":1698},{"className":1697},[],[1699],{"type":52,"value":1700},"class:",{"type":52,"value":1702}," directive",{"type":41,"tag":1704,"props":1705,"children":1706},"style",{},[1707],{"type":52,"value":1708},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":1710,"total":173},[1711,1726],{"slug":1712,"name":1712,"fn":1713,"description":1714,"org":1715,"tags":1716,"stars":24,"repoUrl":25,"updatedAt":1725},"svelte-code-writer","analyze and write Svelte 5 code","CLI tools for Svelte 5 documentation lookup and code analysis. MUST be used whenever creating, editing or analyzing any Svelte component (.svelte) or Svelte module (.svelte.ts\u002F.svelte.js). If possible, this skill should be executed within the svelte-file-editor agent for optimal results.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1717,1720,1723,1724],{"name":1718,"slug":1719,"type":16},"CLI","cli",{"name":1721,"slug":1722,"type":16},"Code Analysis","code-analysis",{"name":22,"slug":23,"type":16},{"name":9,"slug":8,"type":16},"2026-07-27T06:08:51.307189",{"slug":4,"name":4,"fn":5,"description":6,"org":1727,"tags":1728,"stars":24,"repoUrl":25,"updatedAt":26},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1729,1730,1731,1732],{"name":18,"slug":19,"type":16},{"name":22,"slug":23,"type":16},{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},{"items":1734,"total":173},[1735,1742],{"slug":1712,"name":1712,"fn":1713,"description":1714,"org":1736,"tags":1737,"stars":24,"repoUrl":25,"updatedAt":1725},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1738,1739,1740,1741],{"name":1718,"slug":1719,"type":16},{"name":1721,"slug":1722,"type":16},{"name":22,"slug":23,"type":16},{"name":9,"slug":8,"type":16},{"slug":4,"name":4,"fn":5,"description":6,"org":1743,"tags":1744,"stars":24,"repoUrl":25,"updatedAt":26},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1745,1746,1747,1748],{"name":18,"slug":19,"type":16},{"name":22,"slug":23,"type":16},{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16}]