Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commitba7ad25

Browse files
Syncsvelte docs (#1425)
sync svelte docsCo-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
1 parent7804846 commitba7ad25

File tree

5 files changed

+102
-23
lines changed

5 files changed

+102
-23
lines changed

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

Lines changed: 10 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -255,43 +255,30 @@ To declare that a variable expects the constructor or instance type of a compone
255255

256256
Svelte provides a best effort of all the HTML DOM types that exist. Sometimes you may want to use experimental attributes or custom events coming from an action. In these cases, TypeScript will throw a type error, saying that it does not know these types. If it's a non-experimental standard attribute/event, this may very well be a missing typing from our[HTML typings](https://github.com/sveltejs/svelte/blob/main/packages/svelte/elements.d.ts). In that case, you are welcome to open an issue and/or a PR fixing it.
257257

258-
In case this is a custom or experimental attribute/event, you can enhance the typings like this:
259-
260-
```ts
261-
/// file: additional-svelte-typings.d.ts
262-
declarenamespacesvelteHTML {
263-
// enhance elements
264-
interfaceIntrinsicElements {
265-
'my-custom-element': { someattribute:string;'on:event': (e:CustomEvent<any>)=>void };
266-
}
267-
// enhance attributes
268-
interfaceHTMLAttributes<T> {
269-
// If you want to use the beforeinstallprompt event
270-
onbeforeinstallprompt?: (event:any)=>any;
271-
// If you want to use myCustomAttribute={..} (note: all lowercase)
272-
mycustomattribute?:any;// You can replace any with something more specific if you like
273-
}
274-
}
275-
```
276-
277-
Then make sure that`d.ts` file is referenced in your`tsconfig.json`. If it reads something like`"include": ["src/**/*"]` and your`d.ts` file is inside`src`, it should work. You may need to reload for the changes to take effect.
278-
279-
You can also declare the typings by augmenting the`svelte/elements` module like this:
258+
In case this is a custom or experimental attribute/event, you can enhance the typings by augmenting the`svelte/elements` module like this:
280259

281260
```ts
282261
/// file: additional-svelte-typings.d.ts
283262
import {HTMLButtonAttributes }from'svelte/elements';
284263

285264
declaremodule'svelte/elements' {
265+
// add a new element
286266
exportinterfaceSvelteHTMLElements {
287267
'custom-button':HTMLButtonAttributes;
288268
}
289269

290-
// allows for more granular control over what element to add the typings to
270+
// add a new global attribute that is available on all html elements
271+
exportinterfaceHTMLAttributes<T> {
272+
globalattribute?:string;
273+
}
274+
275+
// add a new attribute for button elements
291276
exportinterfaceHTMLButtonAttributes {
292277
veryexperimentalattribute?:string;
293278
}
294279
}
295280

296281
export {};// ensure this is not an ambient module, else types will be overridden instead of augmented
297282
```
283+
284+
Then make sure that the`d.ts` file is referenced in your`tsconfig.json`. If it reads something like`"include": ["src/**/*"]` and your`d.ts` file is inside`src`, it should work. You may need to reload for the changes to take effect.

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,3 +238,23 @@ let odd = $derived(!even);
238238
```
239239

240240
If side-effects are unavoidable, use[`$effect`]($effect) instead.
241+
242+
###svelte_boundary_reset_onerror
243+
244+
```
245+
A `<svelte:boundary>` `reset` function cannot be called while an error is still being handled
246+
```
247+
248+
If a[`<svelte:boundary>`](https://svelte.dev/docs/svelte/svelte-boundary) has an`onerror` function, it must not call the provided`reset` function synchronously since the boundary is still in a broken state. Typically,`reset()` is called later, once the error has been resolved.
249+
250+
If it's possible to resolve the error inside the`onerror` callback, you must at least wait for the boundary to settle before calling`reset()`, for example using[`tick`](https://svelte.dev/docs/svelte/lifecycle-hooks#tick):
251+
252+
```svelte
253+
<svelte:boundary onerror={async (error, reset) => {
254+
fixTheError();
255+
+++await tick();+++
256+
reset();
257+
}}>
258+
259+
</svelte:boundary>
260+
```

‎apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-warnings.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,32 @@ Reactive `$state(...)` proxies and the values they proxy have different identiti
312312
313313
To resolve this, ensure you're comparing values where both values were created with`$state(...)`, or neither were. Note that`$state.raw(...)` will _not_ create a state proxy.
314314
315+
### svelte_boundary_reset_noop
316+
317+
```
318+
A`<svelte:boundary>``reset`function only resets the boundary the first time it is called
319+
```
320+
321+
When an error occurs while rendering the contents of a [`<svelte:boundary>`](https://svelte.dev/docs/svelte/svelte-boundary), the `onerror` handler is called with the error plus a `reset` function that attempts to re-render the contents.
322+
323+
This`reset`function should only be called once. After that, it has no effect — in a case like this, where a reference to `reset` is stored outside the boundary, clicking the button while `<Contents />` is rendered will _not_ cause the contents to be rendered again.
324+
325+
```svelte
326+
<script>
327+
let reset;
328+
</script>
329+
330+
<button onclick={reset}>reset</button>
331+
332+
<svelte:boundary onerror={(e,r) => (reset = r)}>
333+
<!--contents-->
334+
335+
{#snippetfailed(e)}
336+
<p>oops! {e.message}</p>
337+
{/snippet}
338+
</svelte:boundary>
339+
```
340+
315341
### transition_slide_display
316342
317343
```

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,26 @@ let odd = $derived(!even);
246246

247247
If side-effects are unavoidable, use[`$effect`]($effect) instead.
248248

249+
###svelte_boundary_reset_onerror
250+
251+
```
252+
A `<svelte:boundary>` `reset` function cannot be called while an error is still being handled
253+
```
254+
255+
If a[`<svelte:boundary>`](https://svelte.dev/docs/svelte/svelte-boundary) has an`onerror` function, it must not call the provided`reset` function synchronously since the boundary is still in a broken state. Typically,`reset()` is called later, once the error has been resolved.
256+
257+
If it's possible to resolve the error inside the`onerror` callback, you must at least wait for the boundary to settle before calling`reset()`, for example using[`tick`](https://svelte.dev/docs/svelte/lifecycle-hooks#tick):
258+
259+
```svelte
260+
<svelte:boundary onerror={async (error, reset) => {
261+
fixTheError();
262+
+++await tick();+++
263+
reset();
264+
}}>
265+
266+
</svelte:boundary>
267+
```
268+
249269

250270
##Server errors
251271

‎apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -319,6 +319,32 @@ Reactive `$state(...)` proxies and the values they proxy have different identiti
319319
320320
To resolve this, ensure you're comparing values where both values were created with`$state(...)`, or neither were. Note that`$state.raw(...)` will _not_ create a state proxy.
321321
322+
### svelte_boundary_reset_noop
323+
324+
```
325+
A`<svelte:boundary>``reset`function only resets the boundary the first time it is called
326+
```
327+
328+
When an error occurs while rendering the contents of a [`<svelte:boundary>`](https://svelte.dev/docs/svelte/svelte-boundary), the `onerror` handler is called with the error plus a `reset` function that attempts to re-render the contents.
329+
330+
This`reset`function should only be called once. After that, it has no effect — in a case like this, where a reference to `reset` is stored outside the boundary, clicking the button while `<Contents />` is rendered will _not_ cause the contents to be rendered again.
331+
332+
```svelte
333+
<script>
334+
let reset;
335+
</script>
336+
337+
<button onclick={reset}>reset</button>
338+
339+
<svelte:boundary onerror={(e,r) => (reset = r)}>
340+
<!--contents-->
341+
342+
{#snippetfailed(e)}
343+
<p>oops! {e.message}</p>
344+
{/snippet}
345+
</svelte:boundary>
346+
```
347+
322348
### transition_slide_display
323349
324350
```

0 commit comments

Comments
 (0)

[8]ページ先頭

©2009-2025 Movatter.jp