From e80d79d54c0b70e0c5ca560dc1e7b53cd64f0c0c Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 26 Nov 2024 17:55:38 +0100 Subject: [PATCH] Sync `svelte` docs (#826) sync svelte docs Co-authored-by: Rich-Harris <1162160+Rich-Harris@users.noreply.github.com> --- .../svelte/03-template-syntax/06-snippet.md | 2 +- .../docs/svelte/06-runtime/01-stores.md | 22 +++++++++++++++++++ .../content/docs/svelte/07-misc/02-testing.md | 2 +- .../docs/svelte/07-misc/03-typescript.md | 4 ++-- .../svelte/07-misc/07-v5-migration-guide.md | 6 ++--- .../98-reference/.generated/compile-errors.md | 6 +++++ .../svelte/98-reference/21-svelte-legacy.md | 19 ++++++++++++++++ .../svelte/98-reference/30-compiler-errors.md | 6 +++++ 8 files changed, 60 insertions(+), 7 deletions(-) diff --git a/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md b/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md index d4ec5a0cef94..4bbc970c5d5c 100644 --- a/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md +++ b/apps/svelte.dev/content/docs/svelte/03-template-syntax/06-snippet.md @@ -169,7 +169,7 @@ Any content inside the component tags that is _not_ a snippet declaration implic ```svelte - ``` ```svelte diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md b/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md index 8ea01e53149d..9cff5a754f87 100644 --- a/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md +++ b/apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md @@ -38,6 +38,28 @@ Prior to Svelte 5, stores were the go-to solution for creating cross-component r - when extracting logic, it's better to take advantage of runes' universal reactivity: You can use runes outside the top level of components and even place them into JavaScript or TypeScript files (using a `.svelte.js` or `.svelte.ts` file ending) - when creating shared state, you can create a `$state` object containing the values you need and then manipulate said state +```ts +/// file: state.svelte.js +export const userState = $state({ + name: 'name', + /* ... */ +}); +``` + +```svelte + + + +

User name: {userState.name}

+ +``` + Stores are still a good solution when you have complex asynchronous data streams or it's important to have more manual control over updating values or listening to changes. If you're familiar with RxJs and want to reuse that knowledge, the `$` also comes in handy for you. ## svelte/store diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md b/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md index 1c3d4ba6e1ef..c8774e341f90 100644 --- a/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md +++ b/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md @@ -197,7 +197,7 @@ When writing component tests that involve two-way bindings, context or snippet p E2E (short for 'end to end') tests allow you to test your full application through the eyes of the user. This section uses [Playwright](https://playwright.dev/) as an example, but you can also use other solutions like [Cypress](https://www.cypress.io/) or [NightwatchJS](https://nightwatchjs.org/). -To get start with Playwright, either let you guide by [their VS Code extension](https://playwright.dev/docs/getting-started-vscode), or install it from the command line using `npm init playwright`. It is also part of the setup CLI when you run `npx sv create`. +To get started with Playwright, either install it via [the VS Code extension](https://playwright.dev/docs/getting-started-vscode), or install it from the command line using `npm init playwright`. It is also part of the setup CLI when you run `npx sv create`. After you've done that, you should have a `tests` folder and a Playwright config. You may need to adjust that config to tell Playwright what to do before running the tests - mainly starting your application at a certain port: diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md b/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md index e02ac7b6b105..f4513a9a2dce 100644 --- a/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md +++ b/apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md @@ -142,7 +142,7 @@ In case you're writing a component that wraps a native element, you may want to ``` @@ -156,7 +156,7 @@ Not all elements have a dedicated type definition. For those without one, use `S
- {@render children()} + {@render children?.()}
``` diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md index 4ebfb5f905cc..687f8e93b11f 100644 --- a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md +++ b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md @@ -169,11 +169,11 @@ This function is deprecated in Svelte 5. Instead, components should accept _call { - size += power---.details---; + size += power---.detail---; if (size > 75) burst = true; }} ---on:---deflate={(power) => { - if (size > 0) size -= power---.details---; + if (size > 0) size -= power---.detail---; }} /> @@ -317,7 +317,7 @@ When spreading props, local event handlers must go _after_ the spread, or they r > - import the function > - call the function to get a dispatch function > - call said dispatch function with a string and possibly a payload -> - retrieve said payload on the other end through a `.details` property, because the event itself was always a `CustomEvent` +> - retrieve said payload on the other end through a `.detail` property, because the event itself was always a `CustomEvent` > > It was always possible to use component callback props, but because you had to listen to DOM events using `on:`, it made sense to use `createEventDispatcher` for component events due to syntactical consistency. Now that we have event attributes (`onclick`), it's the other way around: Callback props are now the more sensible thing to do. > diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md index b32bc6b89c02..16cd361e52c5 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md @@ -412,6 +412,12 @@ Expected whitespace `$host()` can only be used inside custom element component instances ``` +### illegal_element_attribute + +``` +`<%name%>` does not support non-event attributes or spread attributes +``` + ### import_svelte_internal_forbidden ``` diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md index 51059bd5765c..45f2e3b65c90 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md @@ -281,4 +281,23 @@ function trusted( +## LegacyComponentType + +Support using the component as both a class and function during the transition period + +
+ +```dts +type LegacyComponentType = { + new (o: ComponentConstructorOptions): SvelteComponent; + ( + ...args: Parameters>> + ): ReturnType< + Component, Record> + >; +}; +``` + +
+ diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md index b9b3c8f7a3d1..5bd6e6eef2bd 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md @@ -416,6 +416,12 @@ Expected whitespace `$host()` can only be used inside custom element component instances ``` +### illegal_element_attribute + +``` +`<%name%>` does not support non-event attributes or spread attributes +``` + ### import_svelte_internal_forbidden ```