Skip to content

Commit c2accf4

Browse files
sync svelte docs
1 parent fa53d14 commit c2accf4

7 files changed

Lines changed: 128 additions & 3 deletions

File tree

apps/svelte.dev/content/docs/svelte/03-template-syntax/01-basic-markup.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ You can add a special comment starting with `@component` that will show up when
203203
- You can also use code blocks here.
204204
- Usage:
205205
```html
206-
<Main name="Arethra">
206+
<Main name="Aretha">
207207
```
208208
-->
209209
<script>

apps/svelte.dev/content/docs/svelte/03-template-syntax/11-declaration-tags.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ Declaration tags define local variables inside markup with `const` or `let`:
1414
1515
{#each boxes as box}
1616
{const area = box.width * box.height}
17-
{const label = `${box.width} ${box.height} = ${area}`}
17+
{const label = `${box.width} × ${box.height} = ${area}`}
1818
1919
<p>{label}</p>
2020
{/each}

apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,12 @@ If you don't give `$state` an initial value, part of its types will be `undefine
171171
let count: number = $state();
172172
```
173173

174+
You can pass the type directly as a generic parameter to safely handle this. TypeScript will infer the variable as `number | undefined`.
175+
176+
```ts
177+
let count = $state<number>();
178+
```
179+
174180
If you know that the variable _will_ be defined before you first use it, use an `as` casting. This is especially useful in the context of classes:
175181

176182
```ts

apps/svelte.dev/content/docs/svelte/07-misc/99-faq.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,9 @@ However, you can use any router library. A sampling of available routers are hig
100100

101101
While most mobile apps are written without using JavaScript, if you'd like to leverage your existing Svelte components and knowledge of Svelte when building mobile apps, you can turn a [SvelteKit SPA](https://kit.svelte.dev/docs/single-page-apps) into a mobile app with [Tauri](https://v2.tauri.app/start/frontend/sveltekit/) or [Capacitor](https://capacitorjs.com/solution/svelte). Mobile features like the camera, geolocation, and push notifications are available via plugins for both platforms.
102102

103-
Some work has been completed towards [custom renderer support in Svelte 5](https://github.com/sveltejs/svelte/issues/15470), but this feature is not yet available. The custom rendering API would support additional mobile frameworks like Lynx JS and Svelte Native. Svelte Native was an option available for Svelte 4, but Svelte 5 does not currently support it. Svelte Native lets you write NativeScript apps using Svelte components that contain [NativeScript UI components](https://docs.nativescript.org/ui/) rather than DOM elements, which may be familiar for users coming from React Native.
103+
You can also write apps in Svelte that compiles to native components by using [Symbiote Native](https://docs.symbiote-native.dev/), which leverages the infrastructure provided by React Native.
104+
105+
Work has been completed towards [custom renderer support in Svelte 5](https://github.com/sveltejs/svelte/issues/15470), but this feature is not yet merged. The custom rendering API will allow support in additional mobile frameworks like Lynx JS and Svelte Native. Symbiote Native will also adopt this API. Svelte Native was an option available for Svelte 4, but Svelte 5 does not currently support it. Svelte Native lets you write NativeScript apps using Svelte components that contain [NativeScript UI components](https://docs.nativescript.org/ui/) rather than DOM elements.
104106

105107
## Can I tell Svelte not to remove my unused styles?
106108

apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -821,6 +821,18 @@ Cannot use `%rune%` rune in non-runes mode
821821
Cannot use rune without parentheses
822822
```
823823

824+
Runes are keywords rather than values — they can't be assigned to a variable or passed to a function, only called. Referencing one without parentheses is therefore an error...
825+
826+
```js
827+
let count = $state;
828+
```
829+
830+
...whether it's a rune like `$state` or one reached through a property, like `$derived.by`. Add the parentheses, along with any arguments the rune expects:
831+
832+
```js
833+
let count = $state(0);
834+
```
835+
824836
### rune_removed
825837

826838
```

apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-server.md

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,4 +58,97 @@ function render<
5858

5959

6060

61+
## Csp
62+
63+
<div class="ts-block">
64+
65+
```dts
66+
type Csp = { nonce?: string; hash?: boolean };
67+
```
68+
69+
</div>
70+
71+
## RenderOutput
72+
73+
<div class="ts-block">
74+
75+
```dts
76+
type RenderOutput = SyncRenderOutput &
77+
PromiseLike<SyncRenderOutput>;
78+
```
79+
80+
</div>
81+
82+
## Sha256Source
83+
84+
<div class="ts-block">
85+
86+
```dts
87+
type Sha256Source = `sha256-${string}`;
88+
```
89+
90+
</div>
91+
92+
## SyncRenderOutput
93+
94+
<div class="ts-block">
95+
96+
```dts
97+
interface SyncRenderOutput {/*…*/}
98+
```
99+
100+
<div class="ts-block-property">
101+
102+
```dts
103+
head: string;
104+
```
105+
106+
<div class="ts-block-property-details">
107+
108+
HTML that goes into the `<head>`
109+
110+
</div>
111+
</div>
112+
113+
<div class="ts-block-property">
114+
115+
```dts
116+
html: string;
117+
```
118+
119+
<div class="ts-block-property-details">
120+
121+
<div class="ts-block-property-bullets">
122+
123+
- <span class="tag deprecated">deprecated</span> use `body` instead
124+
125+
</div>
126+
127+
</div>
128+
</div>
129+
130+
<div class="ts-block-property">
131+
132+
```dts
133+
body: string;
134+
```
135+
136+
<div class="ts-block-property-details">
137+
138+
HTML that goes somewhere into the `<body>`
139+
140+
</div>
141+
</div>
142+
143+
<div class="ts-block-property">
144+
145+
```dts
146+
hashes: {
147+
script: Sha256Source[];
148+
};
149+
```
150+
151+
<div class="ts-block-property-details"></div>
152+
</div></div>
153+
61154

apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -826,6 +826,18 @@ Cannot use `%rune%` rune in non-runes mode
826826
Cannot use rune without parentheses
827827
```
828828

829+
Runes are keywords rather than values — they can't be assigned to a variable or passed to a function, only called. Referencing one without parentheses is therefore an error...
830+
831+
```js
832+
let count = $state;
833+
```
834+
835+
...whether it's a rune like `$state` or one reached through a property, like `$derived.by`. Add the parentheses, along with any arguments the rune expects:
836+
837+
```js
838+
let count = $state(0);
839+
```
840+
829841
### rune_removed
830842

831843
```

0 commit comments

Comments
 (0)