Skip to content

Commit 1c8d1ca

Browse files
authored
docs: various fixes (#13560)
* docs: various fixes * fixes * fix * fix
1 parent d220edd commit 1c8d1ca

File tree

12 files changed

+26
-16
lines changed

12 files changed

+26
-16
lines changed

documentation/docs/01-introduction/01-overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,6 @@ Svelte is a web UI framework that uses a compiler to turn declarative component
2525

2626
...into tightly optimized JavaScript that updates the document when state like count changes. Because the compiler can 'see' where count is referenced, the generated code is highly efficient, and because we're hijacking syntax like `$state(...)` and `=` instead of using cumbersome APIs, you can write less code.
2727

28-
Besides being fun to work with, Svelte offers a lot of features built-in, such as animations and transitions. Once you've written your first components you can reach for our batteries included metaframework [SvelteKit](/docs/kit) which provides you with an opinionated router, data loading and more.
28+
Besides being fun to work with, Svelte offers a lot of features built-in, such as animations and transitions. Once you've written your first components you can reach for our batteries included metaframework [SvelteKit](../kit) which provides you with an opinionated router, data loading and more.
2929

3030
If you're new to Svelte, visit the [interactive tutorial](/tutorial) before consulting this documentation. You can try Svelte online using the [REPL](/repl). Alternatively, if you'd like a more fully-featured environment, you can try Svelte on [StackBlitz](https://sveltekit.new).

documentation/docs/01-introduction/03-reactivity-fundamentals.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Svelte 5 uses _runes_, a powerful set of primitives for controlling reactivity i
1010

1111
Runes are function-like symbols that provide instructions to the Svelte compiler. You don't need to import them from anywhere — when you use Svelte, they're part of the language.
1212

13-
The following sections introduce the most important runes for declare state, derived state and side effects at a high level. For more details refer to the later sections on [state](/docs/svelte/runes/state) and [side effects](/docs/svelte/runes/side-effects).
13+
The following sections introduce the most important runes for declare state, derived state and side effects at a high level. For more details refer to the later sections on [state](state) and [side effects](side-effects).
1414

1515
## `$state`
1616

documentation/docs/02-template-syntax/01-component-fundamentals.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ If you export a `const`, `class` or `function`, it is readonly from outside the
112112
</script>
113113
```
114114

115-
Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](/docs/component-directives#bind-this).
115+
Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](bindings#bind:this).
116116

117117
### Reactive variables
118118

documentation/docs/02-template-syntax/06-transitions-and-animations.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ Transitions are local by default. Local transitions only play when the block the
7979
{/if}
8080
```
8181

82-
> By default intro transitions will not play on first render. You can modify this behaviour by setting `intro: true` when you [create a component](/docs/runtime/imperative-component-api) and marking the transition as `global`.
82+
> By default intro transitions will not play on first render. You can modify this behaviour by setting `intro: true` when you [create a component](imperative-component-api) and marking the transition as `global`.
8383
8484
## Transition parameters
8585

@@ -312,7 +312,7 @@ DOMRect {
312312

313313
An animation is triggered when the contents of a [keyed each block](control-flow#each) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an _immediate_ child of a keyed each block.
314314

315-
Animations can be used with Svelte's [built-in animation functions](/docs/svelte/reference/svelte-animate) or [custom animation functions](#custom-animation-functions).
315+
Animations can be used with Svelte's [built-in animation functions](svelte-animate) or [custom animation functions](#custom-animation-functions).
316316

317317
```svelte
318318
<!-- When `list` is reordered the animation will run-->

documentation/docs/02-template-syntax/09-special-elements.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ All except `scrollX` and `scrollY` are readonly.
122122
<svelte:document bind:prop={value} />
123123
```
124124

125-
Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document`, such as `visibilitychange`, which don't fire on `window`. It also lets you use [actions](/docs/element-directives#use-action) on `document`.
125+
Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document`, such as `visibilitychange`, which don't fire on `window`. It also lets you use [actions](actions) on `document`.
126126

127127
As with `<svelte:window>`, this element may only appear the top level of your component and must never be inside a block or element.
128128

@@ -145,7 +145,7 @@ All are readonly.
145145
<svelte:body onevent={handler} />
146146
```
147147

148-
Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](/docs/element-directives#use-action) on the `<body>` element.
148+
Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](actions) on the `<body>` element.
149149

150150
As with `<svelte:window>` and `<svelte:document>`, this element may only appear the top level of your component and must never be inside a block or element.
151151

@@ -176,14 +176,14 @@ As with `<svelte:window>`, `<svelte:document>` and `<svelte:body>`, this element
176176
<svelte:options option={value} />
177177
```
178178

179-
The `<svelte:options>` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](/docs/svelte-compiler#compile). The possible options are:
179+
The `<svelte:options>` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](svelte-compiler#compile). The possible options are:
180180

181181
- `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed
182182
- `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed
183183
- `accessors={true}` — adds getters and setters for the component's props
184184
- `accessors={false}` — the default
185185
- `namespace="..."` — the namespace where this component will be used, most commonly "svg"; use the "foreign" namespace to opt out of case-insensitive attribute names and HTML-specific warnings
186-
- `customElement={...}` — the [options](/docs/custom-elements-api#component-options) to use when compiling this component as a custom element. If a string is passed, it is used as the `tag` option
186+
- `customElement={...}` — the [options](custom-elements#component-options) to use when compiling this component as a custom element. If a string is passed, it is used as the `tag` option
187187

188188
```svelte
189189
<svelte:options customElement="my-custom-element" />

documentation/docs/02-template-syntax/10-data-fetching.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,4 +82,4 @@ Similarly, if you only want to show the error state, you can omit the `then` blo
8282

8383
## SvelteKit loaders
8484

85-
Fetching inside your components is great for simple use cases, but it's prone to data loading waterfalls and makes code harder to work with because of the promise handling. SvelteKit solves this problem by providing a opinionated data loading story that is coupled to its router. Learn more about it [in the docs](/docs/kit).
85+
Fetching inside your components is great for simple use cases, but it's prone to data loading waterfalls and makes code harder to work with because of the promise handling. SvelteKit solves this problem by providing a opinionated data loading story that is coupled to its router. Learn more about it [in the docs](../kit).

documentation/docs/03-runes/02-side-effects.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ $effect(() => {
9494
});
9595
```
9696

97-
An effect only reruns when the object it reads changes, not when a property inside it changes. (If you want to observe changes _inside_ an object at dev time, you can use [`$inspect`](/docs/svelte/misc/debugging#$inspect).)
97+
An effect only reruns when the object it reads changes, not when a property inside it changes. (If you want to observe changes _inside_ an object at dev time, you can use [`$inspect`](debugging#$inspect).)
9898

9999
```svelte
100100
<script>
@@ -252,7 +252,7 @@ If you need to use bindings, for whatever reason (for example when you want some
252252
</label>
253253
```
254254

255-
If you absolutely have to update `$state` within an effect and run into an infinite loop because you read and write to the same `$state`, use [untrack](functions#untrack).
255+
If you absolutely have to update `$state` within an effect and run into an infinite loop because you read and write to the same `$state`, use [untrack](svelte#untrack).
256256

257257
## `$effect.pre`
258258

documentation/docs/04-runtime/01-stores.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ title: Stores
66
- how to write
77
- TODO should the details for the store methods belong to the reference section?
88

9-
A _store_ is an object that allows reactive access to a value via a simple _store contract_. The [`svelte/store` module](/docs/svelte-store) contains minimal store implementations which fulfil this contract.
9+
A _store_ is an object that allows reactive access to a value via a simple _store contract_. The [`svelte/store` module](../svelte-store) contains minimal store implementations which fulfil this contract.
1010

1111
Any time you have a reference to a store, you can access its value inside a component by prefixing it with the `$` character. This causes Svelte to declare the prefixed variable, subscribe to the store at component initialisation and unsubscribe when appropriate.
1212

@@ -276,7 +276,7 @@ const value = get(store);
276276
store = { subscribe: (subscription: (value: any) => void) => (() => void), set?: (value: any) => void }
277277
```
278278

279-
You can create your own stores without relying on [`svelte/store`](/docs/svelte-store), by implementing the _store contract_:
279+
You can create your own stores without relying on [`svelte/store`](../svelte-store), by implementing the _store contract_:
280280

281281
1. A store must contain a `.subscribe` method, which must accept as its argument a subscription function. This subscription function must be immediately and synchronously called with the store's current value upon calling `.subscribe`. All of a store's active subscription functions must later be synchronously called whenever the store's value changes.
282282
2. The `.subscribe` method must return an unsubscribe function. Calling an unsubscribe function must stop its subscription, and its corresponding subscription function must not be called again by the store.

documentation/docs/05-misc/04-custom-elements.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: Custom elements
44

55
- [basically what we have today](https://svelte.dev/docs/custom-elements-api)
66

7-
Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](/docs/special-elements#svelte-options).
7+
Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](special-elements#svelte-options).
88

99
```svelte
1010
<svelte:options customElement="my-element" />
@@ -36,7 +36,7 @@ document.body.innerHTML = `
3636
`;
3737
```
3838

39-
Any [props](/docs/svelte/template-syntax/basic-markup#attributes-and-props) are exposed as properties of the DOM element (as well as being readable/writable as attributes, where possible).
39+
Any [props](basic-markup#attributes-and-props) are exposed as properties of the DOM element (as well as being readable/writable as attributes, where possible).
4040

4141
```js
4242
// @noErrors
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: Svelte 4 migration guide
3+
---
4+
5+
TODO copy over existing https://svelte.dev/docs/v4-migration-guide

documentation/docs/05-misc/99-faq.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: Frequently asked questions
3+
---
4+
5+
TODO

0 commit comments

Comments
 (0)