mirror of
https://github.com/sveltejs/ai-tools.git
synced 2026-08-03 09:04:16 +08:00
Compare commits
4 Commits
@sveltejs/
...
changeset-
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
a314be721f | ||
|
|
1eb06fd05a | ||
|
|
e0aa00a3a5 | ||
|
|
cbac8c2bb7 |
@@ -116,9 +116,9 @@ If the derived expression is an object or array, it will be returned as-is — i
|
|||||||
|
|
||||||
Effects are an escape hatch and should mostly be avoided. In particular, avoid updating state inside effects.
|
Effects are an escape hatch and should mostly be avoided. In particular, avoid updating state inside effects.
|
||||||
|
|
||||||
- If you need to sync state to an external library such as D3, it is often neater to use [`{@attach ...}`](references/@attach.md)
|
- If you need to sync state to an external library such as D3, it is often neater to use [`{@attach ...}`](references/attach.md)
|
||||||
- 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/bind.md) as appropriate
|
- 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/bind.md) as appropriate
|
||||||
- If you need to log values for debugging purposes, use [`$inspect`](references/$inspect.md)
|
- If you need to log values for debugging purposes, use [`$inspect`](references/inspect.md)
|
||||||
- If you need to observe something external to Svelte, use [`createSubscriber`](references/svelte-reactivity.md)
|
- If you need to observe something external to Svelte, use [`createSubscriber`](references/svelte-reactivity.md)
|
||||||
|
|
||||||
Never wrap the contents of an effect in `if (browser) {...}` or similar — effects do not run on the server.
|
Never wrap the contents of an effect in `if (browser) {...}` or similar — effects do not run on the server.
|
||||||
@@ -167,7 +167,7 @@ Avoid using `onMount` or `$effect` for this.
|
|||||||
|
|
||||||
## Snippets
|
## Snippets
|
||||||
|
|
||||||
[Snippets](references/snippet.md) are a way to define reusable chunks of markup that can be instantiated with the [`{@render ...}`](references/@render.md) tag, or passed to components as props. They must be declared within the template.
|
[Snippets](references/snippet.md) are a way to define reusable chunks of markup that can be instantiated with the [`{@render ...}`](references/render.md) tag, or passed to components as props. They must be declared within the template.
|
||||||
|
|
||||||
```svelte
|
```svelte
|
||||||
{#snippet greeting(name)}
|
{#snippet greeting(name)}
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://github.com/sveltejs/ai-tools.git",
|
"url": "git+https://github.com/sveltejs/ai-tools.git",
|
||||||
"path": "packages/mcp-stdio"
|
"directory": "packages/mcp-stdio"
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"dist"
|
"dist"
|
||||||
|
|||||||
@@ -1,5 +1,13 @@
|
|||||||
# @sveltejs/opencode
|
# @sveltejs/opencode
|
||||||
|
|
||||||
|
## 0.1.13
|
||||||
|
|
||||||
|
### Patch Changes
|
||||||
|
|
||||||
|
- fix: links in skill references (for real this time) ([#245](https://github.com/sveltejs/ai-tools/pull/245))
|
||||||
|
|
||||||
|
- fix: remove special characters from references ([#247](https://github.com/sveltejs/ai-tools/pull/247))
|
||||||
|
|
||||||
## 0.1.12
|
## 0.1.12
|
||||||
|
|
||||||
### Patch Changes
|
### Patch Changes
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@sveltejs/opencode",
|
"name": "@sveltejs/opencode",
|
||||||
"version": "0.1.12",
|
"version": "0.1.13",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"homepage": "https://github.com/sveltejs/ai-tools#readme",
|
"homepage": "https://github.com/sveltejs/ai-tools#readme",
|
||||||
@@ -33,7 +33,7 @@
|
|||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://github.com/sveltejs/ai-tools.git",
|
"url": "git+https://github.com/sveltejs/ai-tools.git",
|
||||||
"path": "packages/opencode"
|
"directory": "packages/opencode"
|
||||||
},
|
},
|
||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"access": "public"
|
"access": "public"
|
||||||
|
|||||||
@@ -35,9 +35,9 @@ If the derived expression is an object or array, it will be returned as-is — i
|
|||||||
|
|
||||||
Effects are an escape hatch and should mostly be avoided. In particular, avoid updating state inside effects.
|
Effects are an escape hatch and should mostly be avoided. In particular, avoid updating state inside effects.
|
||||||
|
|
||||||
- If you need to sync state to an external library such as D3, it is often neater to use [`{@attach ...}`](references/@attach.md)
|
- If you need to sync state to an external library such as D3, it is often neater to use [`{@attach ...}`](references/attach.md)
|
||||||
- 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/bind.md) as appropriate
|
- 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/bind.md) as appropriate
|
||||||
- If you need to log values for debugging purposes, use [`$inspect`](references/$inspect.md)
|
- If you need to log values for debugging purposes, use [`$inspect`](references/inspect.md)
|
||||||
- If you need to observe something external to Svelte, use [`createSubscriber`](references/svelte-reactivity.md)
|
- If you need to observe something external to Svelte, use [`createSubscriber`](references/svelte-reactivity.md)
|
||||||
|
|
||||||
Never wrap the contents of an effect in `if (browser) {...}` or similar — effects do not run on the server.
|
Never wrap the contents of an effect in `if (browser) {...}` or similar — effects do not run on the server.
|
||||||
@@ -86,7 +86,7 @@ Avoid using `onMount` or `$effect` for this.
|
|||||||
|
|
||||||
## Snippets
|
## Snippets
|
||||||
|
|
||||||
[Snippets](references/snippet.md) are a way to define reusable chunks of markup that can be instantiated with the [`{@render ...}`](references/@render.md) tag, or passed to components as props. They must be declared within the template.
|
[Snippets](references/snippet.md) are a way to define reusable chunks of markup that can be instantiated with the [`{@render ...}`](references/render.md) tag, or passed to components as props. They must be declared within the template.
|
||||||
|
|
||||||
```svelte
|
```svelte
|
||||||
{#snippet greeting(name)}
|
{#snippet greeting(name)}
|
||||||
|
|||||||
@@ -163,8 +163,8 @@ function foo(+++getBar+++) {
|
|||||||
|
|
||||||
## Creating attachments programmatically
|
## Creating attachments programmatically
|
||||||
|
|
||||||
To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](https://svelte.dev/docs/svelte/svelte-attachments#createAttachmentKey/llms.txt).
|
To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](https://svelte.dev/docs/svelte/svelte-attachments/llms.txt#createAttachmentKey).
|
||||||
|
|
||||||
## Converting actions to attachments
|
## Converting actions to attachments
|
||||||
|
|
||||||
If you're using a library that only provides actions, you can convert them to attachments with [`fromAction`](https://svelte.dev/docs/svelte/svelte-attachments#fromAction/llms.txt), allowing you to (for example) use them with components.
|
If you're using a library that only provides actions, you can convert them to attachments with [`fromAction`](https://svelte.dev/docs/svelte/svelte-attachments/llms.txt#fromAction), allowing you to (for example) use them with components.
|
||||||
@@ -76,15 +76,15 @@ let a = $derived(await one(x));
|
|||||||
let b = $derived(await two(y));
|
let b = $derived(await two(y));
|
||||||
```
|
```
|
||||||
|
|
||||||
> [!NOTE] If you write code like this, expect Svelte to give you an [`await_waterfall`](https://svelte.dev/docs/svelte/runtime-warnings#Client-warnings-await_waterfall/llms.txt) warning
|
> [!NOTE] If you write code like this, expect Svelte to give you an [`await_waterfall`](https://svelte.dev/docs/svelte/runtime-warnings/llms.txt#Client-warnings-await_waterfall) warning
|
||||||
|
|
||||||
## Indicating loading states
|
## Indicating loading states
|
||||||
|
|
||||||
To render placeholder UI, you can wrap content in a `<svelte:boundary>` with a [`pending`](https://svelte.dev/docs/svelte/svelte-boundary#Properties-pending/llms.txt) snippet. This will be shown when the boundary is first created, but not for subsequent updates, which are globally coordinated.
|
To render placeholder UI, you can wrap content in a `<svelte:boundary>` with a [`pending`](https://svelte.dev/docs/svelte/svelte-boundary/llms.txt#Properties-pending) snippet. This will be shown when the boundary is first created, but not for subsequent updates, which are globally coordinated.
|
||||||
|
|
||||||
After the contents of a boundary have resolved for the first time and have replaced the `pending` snippet, you can detect subsequent async work with [`$effect.pending()`](https://svelte.dev/docs/svelte/$effect#$effect.pending/llms.txt). This is what you would use to display a "we're asynchronously validating your input" spinner next to a form field, for example.
|
After the contents of a boundary have resolved for the first time and have replaced the `pending` snippet, you can detect subsequent async work with [`$effect.pending()`](https://svelte.dev/docs/svelte/$effect/llms.txt#$effect.pending). This is what you would use to display a "we're asynchronously validating your input" spinner next to a form field, for example.
|
||||||
|
|
||||||
You can also use [`settled()`](https://svelte.dev/docs/svelte/svelte#settled/llms.txt) to get a promise that resolves when the current update is complete:
|
You can also use [`settled()`](https://svelte.dev/docs/svelte/svelte/llms.txt#settled) to get a promise that resolves when the current update is complete:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { tick, settled } from 'svelte';
|
import { tick, settled } from 'svelte';
|
||||||
@@ -132,7 +132,7 @@ If a `<svelte:boundary>` with a `pending` snippet is encountered during SSR, tha
|
|||||||
|
|
||||||
## Forking
|
## Forking
|
||||||
|
|
||||||
The [`fork(...)`](https://svelte.dev/docs/svelte/svelte#fork/llms.txt) API, added in 5.42, makes it possible to run `await` expressions that you _expect_ to happen in the near future. This is mainly intended for frameworks like SvelteKit to implement preloading when (for example) users signal an intent to navigate.
|
The [`fork(...)`](https://svelte.dev/docs/svelte/svelte/llms.txt#fork) API, added in 5.42, makes it possible to run `await` expressions that you _expect_ to happen in the near future. This is mainly intended for frameworks like SvelteKit to implement preloading when (for example) users signal an intent to navigate.
|
||||||
|
|
||||||
```svelte
|
```svelte
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -393,7 +393,7 @@ Snippets declared at the top level of a `.svelte` file can be exported from a `<
|
|||||||
|
|
||||||
## Programmatic snippets
|
## Programmatic snippets
|
||||||
|
|
||||||
Snippets can be created programmatically with the [`createRawSnippet`](https://svelte.dev/docs/svelte/svelte#createRawSnippet/llms.txt) API. This is intended for advanced use cases.
|
Snippets can be created programmatically with the [`createRawSnippet`](https://svelte.dev/docs/svelte/svelte/llms.txt#createRawSnippet) API. This is intended for advanced use cases.
|
||||||
|
|
||||||
## Snippets and slots
|
## Snippets and slots
|
||||||
|
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ If `start` returns a cleanup function, it will be called when the effect is dest
|
|||||||
If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects
|
If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects
|
||||||
are active, and the returned teardown function will only be called when all effects are destroyed.
|
are active, and the returned teardown function will only be called when all effects are destroyed.
|
||||||
|
|
||||||
It's best understood with an example. Here's an implementation of [`MediaQuery`](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery/llms.txt):
|
It's best understood with an example. Here's an implementation of [`MediaQuery`](https://svelte.dev/docs/svelte/svelte-reactivity/llms.txt#MediaQuery):
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// @errors: 7031
|
// @errors: 7031
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "svelte",
|
"name": "svelte",
|
||||||
"description": "A plugin for all things related to Svelte development, MCP, skills, and more.",
|
"description": "A plugin for all things related to Svelte development, MCP, skills, and more.",
|
||||||
"version": "1.0.6",
|
"version": "1.0.8",
|
||||||
"author": {
|
"author": {
|
||||||
"name": "Svelte"
|
"name": "Svelte"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -35,9 +35,9 @@ If the derived expression is an object or array, it will be returned as-is — i
|
|||||||
|
|
||||||
Effects are an escape hatch and should mostly be avoided. In particular, avoid updating state inside effects.
|
Effects are an escape hatch and should mostly be avoided. In particular, avoid updating state inside effects.
|
||||||
|
|
||||||
- If you need to sync state to an external library such as D3, it is often neater to use [`{@attach ...}`](references/@attach.md)
|
- If you need to sync state to an external library such as D3, it is often neater to use [`{@attach ...}`](references/attach.md)
|
||||||
- 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/bind.md) as appropriate
|
- 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/bind.md) as appropriate
|
||||||
- If you need to log values for debugging purposes, use [`$inspect`](references/$inspect.md)
|
- If you need to log values for debugging purposes, use [`$inspect`](references/inspect.md)
|
||||||
- If you need to observe something external to Svelte, use [`createSubscriber`](references/svelte-reactivity.md)
|
- If you need to observe something external to Svelte, use [`createSubscriber`](references/svelte-reactivity.md)
|
||||||
|
|
||||||
Never wrap the contents of an effect in `if (browser) {...}` or similar — effects do not run on the server.
|
Never wrap the contents of an effect in `if (browser) {...}` or similar — effects do not run on the server.
|
||||||
@@ -86,7 +86,7 @@ Avoid using `onMount` or `$effect` for this.
|
|||||||
|
|
||||||
## Snippets
|
## Snippets
|
||||||
|
|
||||||
[Snippets](references/snippet.md) are a way to define reusable chunks of markup that can be instantiated with the [`{@render ...}`](references/@render.md) tag, or passed to components as props. They must be declared within the template.
|
[Snippets](references/snippet.md) are a way to define reusable chunks of markup that can be instantiated with the [`{@render ...}`](references/render.md) tag, or passed to components as props. They must be declared within the template.
|
||||||
|
|
||||||
```svelte
|
```svelte
|
||||||
{#snippet greeting(name)}
|
{#snippet greeting(name)}
|
||||||
|
|||||||
@@ -163,8 +163,8 @@ function foo(+++getBar+++) {
|
|||||||
|
|
||||||
## Creating attachments programmatically
|
## Creating attachments programmatically
|
||||||
|
|
||||||
To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](https://svelte.dev/docs/svelte/svelte-attachments#createAttachmentKey/llms.txt).
|
To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](https://svelte.dev/docs/svelte/svelte-attachments/llms.txt#createAttachmentKey).
|
||||||
|
|
||||||
## Converting actions to attachments
|
## Converting actions to attachments
|
||||||
|
|
||||||
If you're using a library that only provides actions, you can convert them to attachments with [`fromAction`](https://svelte.dev/docs/svelte/svelte-attachments#fromAction/llms.txt), allowing you to (for example) use them with components.
|
If you're using a library that only provides actions, you can convert them to attachments with [`fromAction`](https://svelte.dev/docs/svelte/svelte-attachments/llms.txt#fromAction), allowing you to (for example) use them with components.
|
||||||
@@ -76,15 +76,15 @@ let a = $derived(await one(x));
|
|||||||
let b = $derived(await two(y));
|
let b = $derived(await two(y));
|
||||||
```
|
```
|
||||||
|
|
||||||
> [!NOTE] If you write code like this, expect Svelte to give you an [`await_waterfall`](https://svelte.dev/docs/svelte/runtime-warnings#Client-warnings-await_waterfall/llms.txt) warning
|
> [!NOTE] If you write code like this, expect Svelte to give you an [`await_waterfall`](https://svelte.dev/docs/svelte/runtime-warnings/llms.txt#Client-warnings-await_waterfall) warning
|
||||||
|
|
||||||
## Indicating loading states
|
## Indicating loading states
|
||||||
|
|
||||||
To render placeholder UI, you can wrap content in a `<svelte:boundary>` with a [`pending`](https://svelte.dev/docs/svelte/svelte-boundary#Properties-pending/llms.txt) snippet. This will be shown when the boundary is first created, but not for subsequent updates, which are globally coordinated.
|
To render placeholder UI, you can wrap content in a `<svelte:boundary>` with a [`pending`](https://svelte.dev/docs/svelte/svelte-boundary/llms.txt#Properties-pending) snippet. This will be shown when the boundary is first created, but not for subsequent updates, which are globally coordinated.
|
||||||
|
|
||||||
After the contents of a boundary have resolved for the first time and have replaced the `pending` snippet, you can detect subsequent async work with [`$effect.pending()`](https://svelte.dev/docs/svelte/$effect#$effect.pending/llms.txt). This is what you would use to display a "we're asynchronously validating your input" spinner next to a form field, for example.
|
After the contents of a boundary have resolved for the first time and have replaced the `pending` snippet, you can detect subsequent async work with [`$effect.pending()`](https://svelte.dev/docs/svelte/$effect/llms.txt#$effect.pending). This is what you would use to display a "we're asynchronously validating your input" spinner next to a form field, for example.
|
||||||
|
|
||||||
You can also use [`settled()`](https://svelte.dev/docs/svelte/svelte#settled/llms.txt) to get a promise that resolves when the current update is complete:
|
You can also use [`settled()`](https://svelte.dev/docs/svelte/svelte/llms.txt#settled) to get a promise that resolves when the current update is complete:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { tick, settled } from 'svelte';
|
import { tick, settled } from 'svelte';
|
||||||
@@ -132,7 +132,7 @@ If a `<svelte:boundary>` with a `pending` snippet is encountered during SSR, tha
|
|||||||
|
|
||||||
## Forking
|
## Forking
|
||||||
|
|
||||||
The [`fork(...)`](https://svelte.dev/docs/svelte/svelte#fork/llms.txt) API, added in 5.42, makes it possible to run `await` expressions that you _expect_ to happen in the near future. This is mainly intended for frameworks like SvelteKit to implement preloading when (for example) users signal an intent to navigate.
|
The [`fork(...)`](https://svelte.dev/docs/svelte/svelte/llms.txt#fork) API, added in 5.42, makes it possible to run `await` expressions that you _expect_ to happen in the near future. This is mainly intended for frameworks like SvelteKit to implement preloading when (for example) users signal an intent to navigate.
|
||||||
|
|
||||||
```svelte
|
```svelte
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -393,7 +393,7 @@ Snippets declared at the top level of a `.svelte` file can be exported from a `<
|
|||||||
|
|
||||||
## Programmatic snippets
|
## Programmatic snippets
|
||||||
|
|
||||||
Snippets can be created programmatically with the [`createRawSnippet`](https://svelte.dev/docs/svelte/svelte#createRawSnippet/llms.txt) API. This is intended for advanced use cases.
|
Snippets can be created programmatically with the [`createRawSnippet`](https://svelte.dev/docs/svelte/svelte/llms.txt#createRawSnippet) API. This is intended for advanced use cases.
|
||||||
|
|
||||||
## Snippets and slots
|
## Snippets and slots
|
||||||
|
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ If `start` returns a cleanup function, it will be called when the effect is dest
|
|||||||
If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects
|
If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects
|
||||||
are active, and the returned teardown function will only be called when all effects are destroyed.
|
are active, and the returned teardown function will only be called when all effects are destroyed.
|
||||||
|
|
||||||
It's best understood with an example. Here's an implementation of [`MediaQuery`](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery/llms.txt):
|
It's best understood with an example. Here's an implementation of [`MediaQuery`](https://svelte.dev/docs/svelte/svelte-reactivity/llms.txt#MediaQuery):
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// @errors: 7031
|
// @errors: 7031
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "svelte",
|
"name": "svelte",
|
||||||
"description": "A plugin for all things related to Svelte development, MCP, skills, and more.",
|
"description": "A plugin for all things related to Svelte development, MCP, skills, and more.",
|
||||||
"version": "1.0.6",
|
"version": "1.0.8",
|
||||||
"author": {
|
"author": {
|
||||||
"name": "Svelte"
|
"name": "Svelte"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -35,9 +35,9 @@ If the derived expression is an object or array, it will be returned as-is — i
|
|||||||
|
|
||||||
Effects are an escape hatch and should mostly be avoided. In particular, avoid updating state inside effects.
|
Effects are an escape hatch and should mostly be avoided. In particular, avoid updating state inside effects.
|
||||||
|
|
||||||
- If you need to sync state to an external library such as D3, it is often neater to use [`{@attach ...}`](references/@attach.md)
|
- If you need to sync state to an external library such as D3, it is often neater to use [`{@attach ...}`](references/attach.md)
|
||||||
- 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/bind.md) as appropriate
|
- 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/bind.md) as appropriate
|
||||||
- If you need to log values for debugging purposes, use [`$inspect`](references/$inspect.md)
|
- If you need to log values for debugging purposes, use [`$inspect`](references/inspect.md)
|
||||||
- If you need to observe something external to Svelte, use [`createSubscriber`](references/svelte-reactivity.md)
|
- If you need to observe something external to Svelte, use [`createSubscriber`](references/svelte-reactivity.md)
|
||||||
|
|
||||||
Never wrap the contents of an effect in `if (browser) {...}` or similar — effects do not run on the server.
|
Never wrap the contents of an effect in `if (browser) {...}` or similar — effects do not run on the server.
|
||||||
@@ -86,7 +86,7 @@ Avoid using `onMount` or `$effect` for this.
|
|||||||
|
|
||||||
## Snippets
|
## Snippets
|
||||||
|
|
||||||
[Snippets](references/snippet.md) are a way to define reusable chunks of markup that can be instantiated with the [`{@render ...}`](references/@render.md) tag, or passed to components as props. They must be declared within the template.
|
[Snippets](references/snippet.md) are a way to define reusable chunks of markup that can be instantiated with the [`{@render ...}`](references/render.md) tag, or passed to components as props. They must be declared within the template.
|
||||||
|
|
||||||
```svelte
|
```svelte
|
||||||
{#snippet greeting(name)}
|
{#snippet greeting(name)}
|
||||||
|
|||||||
@@ -163,8 +163,8 @@ function foo(+++getBar+++) {
|
|||||||
|
|
||||||
## Creating attachments programmatically
|
## Creating attachments programmatically
|
||||||
|
|
||||||
To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](https://svelte.dev/docs/svelte/svelte-attachments#createAttachmentKey/llms.txt).
|
To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](https://svelte.dev/docs/svelte/svelte-attachments/llms.txt#createAttachmentKey).
|
||||||
|
|
||||||
## Converting actions to attachments
|
## Converting actions to attachments
|
||||||
|
|
||||||
If you're using a library that only provides actions, you can convert them to attachments with [`fromAction`](https://svelte.dev/docs/svelte/svelte-attachments#fromAction/llms.txt), allowing you to (for example) use them with components.
|
If you're using a library that only provides actions, you can convert them to attachments with [`fromAction`](https://svelte.dev/docs/svelte/svelte-attachments/llms.txt#fromAction), allowing you to (for example) use them with components.
|
||||||
@@ -76,15 +76,15 @@ let a = $derived(await one(x));
|
|||||||
let b = $derived(await two(y));
|
let b = $derived(await two(y));
|
||||||
```
|
```
|
||||||
|
|
||||||
> [!NOTE] If you write code like this, expect Svelte to give you an [`await_waterfall`](https://svelte.dev/docs/svelte/runtime-warnings#Client-warnings-await_waterfall/llms.txt) warning
|
> [!NOTE] If you write code like this, expect Svelte to give you an [`await_waterfall`](https://svelte.dev/docs/svelte/runtime-warnings/llms.txt#Client-warnings-await_waterfall) warning
|
||||||
|
|
||||||
## Indicating loading states
|
## Indicating loading states
|
||||||
|
|
||||||
To render placeholder UI, you can wrap content in a `<svelte:boundary>` with a [`pending`](https://svelte.dev/docs/svelte/svelte-boundary#Properties-pending/llms.txt) snippet. This will be shown when the boundary is first created, but not for subsequent updates, which are globally coordinated.
|
To render placeholder UI, you can wrap content in a `<svelte:boundary>` with a [`pending`](https://svelte.dev/docs/svelte/svelte-boundary/llms.txt#Properties-pending) snippet. This will be shown when the boundary is first created, but not for subsequent updates, which are globally coordinated.
|
||||||
|
|
||||||
After the contents of a boundary have resolved for the first time and have replaced the `pending` snippet, you can detect subsequent async work with [`$effect.pending()`](https://svelte.dev/docs/svelte/$effect#$effect.pending/llms.txt). This is what you would use to display a "we're asynchronously validating your input" spinner next to a form field, for example.
|
After the contents of a boundary have resolved for the first time and have replaced the `pending` snippet, you can detect subsequent async work with [`$effect.pending()`](https://svelte.dev/docs/svelte/$effect/llms.txt#$effect.pending). This is what you would use to display a "we're asynchronously validating your input" spinner next to a form field, for example.
|
||||||
|
|
||||||
You can also use [`settled()`](https://svelte.dev/docs/svelte/svelte#settled/llms.txt) to get a promise that resolves when the current update is complete:
|
You can also use [`settled()`](https://svelte.dev/docs/svelte/svelte/llms.txt#settled) to get a promise that resolves when the current update is complete:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { tick, settled } from 'svelte';
|
import { tick, settled } from 'svelte';
|
||||||
@@ -132,7 +132,7 @@ If a `<svelte:boundary>` with a `pending` snippet is encountered during SSR, tha
|
|||||||
|
|
||||||
## Forking
|
## Forking
|
||||||
|
|
||||||
The [`fork(...)`](https://svelte.dev/docs/svelte/svelte#fork/llms.txt) API, added in 5.42, makes it possible to run `await` expressions that you _expect_ to happen in the near future. This is mainly intended for frameworks like SvelteKit to implement preloading when (for example) users signal an intent to navigate.
|
The [`fork(...)`](https://svelte.dev/docs/svelte/svelte/llms.txt#fork) API, added in 5.42, makes it possible to run `await` expressions that you _expect_ to happen in the near future. This is mainly intended for frameworks like SvelteKit to implement preloading when (for example) users signal an intent to navigate.
|
||||||
|
|
||||||
```svelte
|
```svelte
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -393,7 +393,7 @@ Snippets declared at the top level of a `.svelte` file can be exported from a `<
|
|||||||
|
|
||||||
## Programmatic snippets
|
## Programmatic snippets
|
||||||
|
|
||||||
Snippets can be created programmatically with the [`createRawSnippet`](https://svelte.dev/docs/svelte/svelte#createRawSnippet/llms.txt) API. This is intended for advanced use cases.
|
Snippets can be created programmatically with the [`createRawSnippet`](https://svelte.dev/docs/svelte/svelte/llms.txt#createRawSnippet) API. This is intended for advanced use cases.
|
||||||
|
|
||||||
## Snippets and slots
|
## Snippets and slots
|
||||||
|
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ If `start` returns a cleanup function, it will be called when the effect is dest
|
|||||||
If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects
|
If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects
|
||||||
are active, and the returned teardown function will only be called when all effects are destroyed.
|
are active, and the returned teardown function will only be called when all effects are destroyed.
|
||||||
|
|
||||||
It's best understood with an example. Here's an implementation of [`MediaQuery`](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery/llms.txt):
|
It's best understood with an example. Here's an implementation of [`MediaQuery`](https://svelte.dev/docs/svelte/svelte-reactivity/llms.txt#MediaQuery):
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// @errors: 7031
|
// @errors: 7031
|
||||||
|
|||||||
@@ -103,7 +103,14 @@ function remove_frontmatter_unneeded_fields(content: string) {
|
|||||||
function derive_name(link: string) {
|
function derive_name(link: string) {
|
||||||
const without_hash = link.split('#')[0]!;
|
const without_hash = link.split('#')[0]!;
|
||||||
const segments = without_hash.split('/').filter(Boolean);
|
const segments = without_hash.split('/').filter(Boolean);
|
||||||
return segments[segments.length - 1] ?? 'reference';
|
const name = segments[segments.length - 1] ?? 'reference';
|
||||||
|
const safe_name = name
|
||||||
|
.normalize('NFKD')
|
||||||
|
.replace(/[\u0300-\u036f]/g, '')
|
||||||
|
.replace(/[^a-zA-Z0-9_-]+/g, '-')
|
||||||
|
.replace(/^-+|-+$/g, '');
|
||||||
|
|
||||||
|
return safe_name || 'reference';
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -113,9 +120,12 @@ export function resolve_reference_links(content: string, repo: string) {
|
|||||||
return content.replace(
|
return content.replace(
|
||||||
/\[([^\]]*)\]\((?![a-z][a-z\d+.-]*:|#|\/\/)([^)]+)\)/gi,
|
/\[([^\]]*)\]\((?![a-z][a-z\d+.-]*:|#|\/\/)([^)]+)\)/gi,
|
||||||
(full_match, text: string, href: string) => {
|
(full_match, text: string, href: string) => {
|
||||||
const url = href.startsWith('/')
|
const url = new URL(
|
||||||
? `https://svelte.dev${href}/llms.txt`
|
href.startsWith('/')
|
||||||
: `https://svelte.dev/docs/${repo}/${href}/llms.txt`;
|
? `https://svelte.dev${href}`
|
||||||
|
: `https://svelte.dev/docs/${repo}/${href}`,
|
||||||
|
);
|
||||||
|
url.pathname += '/llms.txt';
|
||||||
|
|
||||||
return `[${text}](${url})`;
|
return `[${text}](${url})`;
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -35,9 +35,9 @@ If the derived expression is an object or array, it will be returned as-is — i
|
|||||||
|
|
||||||
Effects are an escape hatch and should mostly be avoided. In particular, avoid updating state inside effects.
|
Effects are an escape hatch and should mostly be avoided. In particular, avoid updating state inside effects.
|
||||||
|
|
||||||
- If you need to sync state to an external library such as D3, it is often neater to use [`{@attach ...}`](references/@attach.md)
|
- If you need to sync state to an external library such as D3, it is often neater to use [`{@attach ...}`](references/attach.md)
|
||||||
- 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/bind.md) as appropriate
|
- 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/bind.md) as appropriate
|
||||||
- If you need to log values for debugging purposes, use [`$inspect`](references/$inspect.md)
|
- If you need to log values for debugging purposes, use [`$inspect`](references/inspect.md)
|
||||||
- If you need to observe something external to Svelte, use [`createSubscriber`](references/svelte-reactivity.md)
|
- If you need to observe something external to Svelte, use [`createSubscriber`](references/svelte-reactivity.md)
|
||||||
|
|
||||||
Never wrap the contents of an effect in `if (browser) {...}` or similar — effects do not run on the server.
|
Never wrap the contents of an effect in `if (browser) {...}` or similar — effects do not run on the server.
|
||||||
@@ -86,7 +86,7 @@ Avoid using `onMount` or `$effect` for this.
|
|||||||
|
|
||||||
## Snippets
|
## Snippets
|
||||||
|
|
||||||
[Snippets](references/snippet.md) are a way to define reusable chunks of markup that can be instantiated with the [`{@render ...}`](references/@render.md) tag, or passed to components as props. They must be declared within the template.
|
[Snippets](references/snippet.md) are a way to define reusable chunks of markup that can be instantiated with the [`{@render ...}`](references/render.md) tag, or passed to components as props. They must be declared within the template.
|
||||||
|
|
||||||
```svelte
|
```svelte
|
||||||
{#snippet greeting(name)}
|
{#snippet greeting(name)}
|
||||||
|
|||||||
@@ -163,8 +163,8 @@ function foo(+++getBar+++) {
|
|||||||
|
|
||||||
## Creating attachments programmatically
|
## Creating attachments programmatically
|
||||||
|
|
||||||
To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](https://svelte.dev/docs/svelte/svelte-attachments#createAttachmentKey/llms.txt).
|
To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](https://svelte.dev/docs/svelte/svelte-attachments/llms.txt#createAttachmentKey).
|
||||||
|
|
||||||
## Converting actions to attachments
|
## Converting actions to attachments
|
||||||
|
|
||||||
If you're using a library that only provides actions, you can convert them to attachments with [`fromAction`](https://svelte.dev/docs/svelte/svelte-attachments#fromAction/llms.txt), allowing you to (for example) use them with components.
|
If you're using a library that only provides actions, you can convert them to attachments with [`fromAction`](https://svelte.dev/docs/svelte/svelte-attachments/llms.txt#fromAction), allowing you to (for example) use them with components.
|
||||||
@@ -76,15 +76,15 @@ let a = $derived(await one(x));
|
|||||||
let b = $derived(await two(y));
|
let b = $derived(await two(y));
|
||||||
```
|
```
|
||||||
|
|
||||||
> [!NOTE] If you write code like this, expect Svelte to give you an [`await_waterfall`](https://svelte.dev/docs/svelte/runtime-warnings#Client-warnings-await_waterfall/llms.txt) warning
|
> [!NOTE] If you write code like this, expect Svelte to give you an [`await_waterfall`](https://svelte.dev/docs/svelte/runtime-warnings/llms.txt#Client-warnings-await_waterfall) warning
|
||||||
|
|
||||||
## Indicating loading states
|
## Indicating loading states
|
||||||
|
|
||||||
To render placeholder UI, you can wrap content in a `<svelte:boundary>` with a [`pending`](https://svelte.dev/docs/svelte/svelte-boundary#Properties-pending/llms.txt) snippet. This will be shown when the boundary is first created, but not for subsequent updates, which are globally coordinated.
|
To render placeholder UI, you can wrap content in a `<svelte:boundary>` with a [`pending`](https://svelte.dev/docs/svelte/svelte-boundary/llms.txt#Properties-pending) snippet. This will be shown when the boundary is first created, but not for subsequent updates, which are globally coordinated.
|
||||||
|
|
||||||
After the contents of a boundary have resolved for the first time and have replaced the `pending` snippet, you can detect subsequent async work with [`$effect.pending()`](https://svelte.dev/docs/svelte/$effect#$effect.pending/llms.txt). This is what you would use to display a "we're asynchronously validating your input" spinner next to a form field, for example.
|
After the contents of a boundary have resolved for the first time and have replaced the `pending` snippet, you can detect subsequent async work with [`$effect.pending()`](https://svelte.dev/docs/svelte/$effect/llms.txt#$effect.pending). This is what you would use to display a "we're asynchronously validating your input" spinner next to a form field, for example.
|
||||||
|
|
||||||
You can also use [`settled()`](https://svelte.dev/docs/svelte/svelte#settled/llms.txt) to get a promise that resolves when the current update is complete:
|
You can also use [`settled()`](https://svelte.dev/docs/svelte/svelte/llms.txt#settled) to get a promise that resolves when the current update is complete:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { tick, settled } from 'svelte';
|
import { tick, settled } from 'svelte';
|
||||||
@@ -132,7 +132,7 @@ If a `<svelte:boundary>` with a `pending` snippet is encountered during SSR, tha
|
|||||||
|
|
||||||
## Forking
|
## Forking
|
||||||
|
|
||||||
The [`fork(...)`](https://svelte.dev/docs/svelte/svelte#fork/llms.txt) API, added in 5.42, makes it possible to run `await` expressions that you _expect_ to happen in the near future. This is mainly intended for frameworks like SvelteKit to implement preloading when (for example) users signal an intent to navigate.
|
The [`fork(...)`](https://svelte.dev/docs/svelte/svelte/llms.txt#fork) API, added in 5.42, makes it possible to run `await` expressions that you _expect_ to happen in the near future. This is mainly intended for frameworks like SvelteKit to implement preloading when (for example) users signal an intent to navigate.
|
||||||
|
|
||||||
```svelte
|
```svelte
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -393,7 +393,7 @@ Snippets declared at the top level of a `.svelte` file can be exported from a `<
|
|||||||
|
|
||||||
## Programmatic snippets
|
## Programmatic snippets
|
||||||
|
|
||||||
Snippets can be created programmatically with the [`createRawSnippet`](https://svelte.dev/docs/svelte/svelte#createRawSnippet/llms.txt) API. This is intended for advanced use cases.
|
Snippets can be created programmatically with the [`createRawSnippet`](https://svelte.dev/docs/svelte/svelte/llms.txt#createRawSnippet) API. This is intended for advanced use cases.
|
||||||
|
|
||||||
## Snippets and slots
|
## Snippets and slots
|
||||||
|
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ If `start` returns a cleanup function, it will be called when the effect is dest
|
|||||||
If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects
|
If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects
|
||||||
are active, and the returned teardown function will only be called when all effects are destroyed.
|
are active, and the returned teardown function will only be called when all effects are destroyed.
|
||||||
|
|
||||||
It's best understood with an example. Here's an implementation of [`MediaQuery`](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery/llms.txt):
|
It's best understood with an example. Here's an implementation of [`MediaQuery`](https://svelte.dev/docs/svelte/svelte-reactivity/llms.txt#MediaQuery):
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// @errors: 7031
|
// @errors: 7031
|
||||||
|
|||||||
Reference in New Issue
Block a user