Skip to content

Commit 27538fc

Browse files
Rich-HarrisRich Harrisbenmccann
authored
tweak docs content (#8675)
* update intro * update tutorial links * unitalicise code spans * Update documentation/docs/01-getting-started/01-introduction.md Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> * Update documentation/docs/01-getting-started/01-introduction.md Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> * Update documentation/docs/01-getting-started/01-introduction.md Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> * Update documentation/docs/01-getting-started/01-introduction.md Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --------- Co-authored-by: Rich Harris <git@rich-harris.dev> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
1 parent c33377f commit 27538fc

File tree

9 files changed

+19
-28
lines changed

9 files changed

+19
-28
lines changed

documentation/docs/01-getting-started/01-introduction.md

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,13 @@
22
title: Introduction
33
---
44

5-
Welcome to Svelte docs. These are for folks who are already familiar with Svelte and want to learn more about the details of how it works.
5+
Welcome to the Svelte reference documentation! This is intended as a resource for people who already have some familiarity with Svelte and want to learn more about using it.
66

7-
If that's not you (yet), you may prefer to visit the [interactive tutorial](/tutorial) or the [examples](/examples) before consulting this reference.
8-
9-
Don't be shy about asking for help in the [Discord chatroom](https://svelte.dev/chat).
10-
11-
Using an older version of Svelte? Have a look at the [v2 docs](https://v2.svelte.dev).
7+
If that's not you (yet), you may prefer to visit the [interactive tutorial](https://learn.svelte.dev) or the [examples](/examples) before consulting this reference. 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).
128

139
## Start a new project
1410

15-
To try Svelte in an interactive online environment you can try [the REPL](https://svelte.dev/repl) or [StackBlitz](https://node.new/svelte).
16-
17-
To create a project locally we recommend using [SvelteKit](https://kit.svelte.dev/), the official application framework from the Svelte team:
11+
We recommend using [SvelteKit](https://kit.svelte.dev/), the official application framework from the Svelte team:
1812

1913
```
2014
npm create svelte@latest myapp
@@ -23,22 +17,18 @@ npm install
2317
npm run dev
2418
```
2519

26-
SvelteKit will handle calling [the Svelte compiler](https://www.npmjs.com/package/svelte) to convert your `.svelte` files into `.js` files that create the DOM and `.css` files that style it. It also provides all the other pieces you need to build a web application such as a development server, routing, and deployment. [SvelteKit](https://kit.svelte.dev/) utilizes [Vite](https://vitejs.dev/) to build your code and handle server-side rendering (SSR). There are [plugins for all the major web bundlers](https://sveltesociety.dev/tools#bundling) to handle Svelte compilation, which will output `.js` and `.css` that you can insert into your HTML, but most others won't handle SSR.
20+
SvelteKit will handle calling [the Svelte compiler](https://www.npmjs.com/package/svelte) to convert your `.svelte` files into `.js` files that create the DOM and `.css` files that style it. It also provides all the other pieces you need to build a web application such as a development server, routing, deployment, and SSR support. [SvelteKit](https://kit.svelte.dev/) uses [Vite](https://vitejs.dev/) to build your code.
2721

2822
### Alternatives to SvelteKit
2923

3024
If you don't want to use SvelteKit for some reason, you can also use Svelte with Vite (but without SvelteKit) by running `npm init vite` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory. In most cases, you will probably need to [choose a routing library](/faq#is-there-a-router) as well.
3125

32-
## Differences from SvelteKit
33-
34-
Svelte renders UI components. You can compose these components and render an entire page with just Svelte, but you need more than just Svelte to write an entire app.
35-
36-
SvelteKit provides basic functionality like a [router](https://kit.svelte.dev/glossary#routing) — which updates the UI when a link is clicked — and [server-side rendering (SSR)](https://kit.svelte.dev/glossary#ssr). But beyond that, building an app with all the modern best practices is fiendishly complicated. Those practices include [build optimizations](https://vitejs.dev/guide/features.html#build-optimizations), so that you load only the minimal required code; [offline support](https://kit.svelte.devservice-workers); [preloading](https://kit.svelte.dev/link-options#data-sveltekit-preload-data) pages before the user initiates navigation; [configurable rendering](https://kit.svelte.dev/page-options) that allows you to render different parts of your app on the server with [SSR](https://kit.svelte.dev/glossary#ssr), in the browser [client-side rendering](https://kit.svelte.dev/glossary#csr), or at build-time with [prerendering](https://kit.svelte.dev/glossary#prerendering); and many other things. SvelteKit does all the boring stuff for you so that you can get on with the creative part.
37-
38-
It reflects changes to your code in the browser instantly to provide a lightning-fast and feature-rich development experience by leveraging [Vite](https://vitejs.dev/) with a [Svelte plugin](https://github.com/sveltejs/vite-plugin-svelte) to do [Hot Module Replacement (HMR)](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#hot).
26+
Alternatively, there are [plugins for all the major web bundlers](https://sveltesociety.dev/tools#bundling) to handle Svelte compilation — which will output `.js` and `.css` that you can insert into your HTML — but most others won't handle SSR.
3927

4028
## Editor tooling
4129

4230
The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and there are integrations with various other [editors](https://sveltesociety.dev/tools#editor-support) and tools as well.
4331

44-
If you're having trouble, get help on [Discord](https://svelte.dev/chat) or [StackOverflow](https://stackoverflow.com/questions/tagged/svelte).
32+
## Getting help
33+
34+
Don't be shy about asking for help in the [Discord chatroom](https://svelte.dev/chat)! You can also find answers on [Stack Overflow](https://stackoverflow.com/questions/tagged/svelte).

documentation/docs/02-template-syntax/01-svelte-components.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ Update expressions (`count += 1`) and property assignments (`obj.x = y`) have th
101101
</script>
102102
```
103103

104-
Because Svelte's reactivity is based on assignments, using array methods like `.push()` and `.splice()` won't automatically trigger updates. A subsequent assignment is required to trigger the update. This and more details can also be found in the [tutorial](/tutorial/updating-arrays-and-objects).
104+
Because Svelte's reactivity is based on assignments, using array methods like `.push()` and `.splice()` won't automatically trigger updates. A subsequent assignment is required to trigger the update. This and more details can also be found in the [tutorial](https://learn.svelte.dev/tutorial/updating-arrays-and-objects).
105105

106106
```svelte
107107
<script>

documentation/docs/02-template-syntax/02-basic-markup.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,13 +83,13 @@ An element or component can have multiple spread attributes, interspersed with r
8383
<Widget {...things} />
8484
```
8585

86-
_`$$props`_ references all props that are passed to a component, including ones that are not declared with `export`. It is not generally recommended, as it is difficult for Svelte to optimise. But it can be useful in rare cases – for example, when you don't know at compile time what props might be passed to a component.
86+
`$$props` references all props that are passed to a component, including ones that are not declared with `export`. It is not generally recommended, as it is difficult for Svelte to optimise. But it can be useful in rare cases – for example, when you don't know at compile time what props might be passed to a component.
8787

8888
```svelte
8989
<Widget {...$$props} />
9090
```
9191

92-
_`$$restProps`_ contains only the props which are _not_ declared with `export`. It can be used to pass down other unknown attributes to an element in a component. It shares the same optimisation problems as _`$$props`_, and is likewise not recommended.
92+
`$$restProps` contains only the props which are _not_ declared with `export`. It can be used to pass down other unknown attributes to an element in a component. It shares the same optimisation problems as `$$props`, and is likewise not recommended.
9393

9494
```svelte
9595
<input {...$$restProps} />

documentation/docs/02-template-syntax/05-element-directives.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -609,7 +609,7 @@ A custom transition function can also return a `tick` function, which is called
609609
{/if}
610610
```
611611

612-
If a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](/tutorial/deferred-transitions) possible.
612+
If a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](https://learn.svelte.dev/tutorial/deferred-transitions) possible.
613613

614614
Transition functions also receive a third argument, `options`, which contains information about the transition.
615615

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -302,7 +302,8 @@ As with `<svelte:window>`, `<svelte:document>` and `<svelte:body>`, this element
302302

303303
```svelte
304304
<svelte:head>
305-
<link rel="stylesheet" href="/tutorial/dark-theme.css" />
305+
<title>Hello world!</title>
306+
<meta name="description" content="This is where the description goes for SEO" />
306307
</svelte:head>
307308
```
308309

documentation/docs/03-runtime/01-svelte.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: svelte
33
---
44

5-
The `svelte` package exposes [lifecycle functions](/tutorial/onmount) and the [context API](/tutorial/context-api).
5+
The `svelte` package exposes [lifecycle functions](https://learn.svelte.dev/tutorial/onmount) and the [context API](https://learn.svelte.dev/tutorial/context-api).
66

77
## `onMount`
88

documentation/docs/03-runtime/03-svelte-motion.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ coords.update(
129129
);
130130
```
131131

132-
[See a full example on the spring tutorial.](/tutorial/spring)
132+
[See a full example on the spring tutorial.](https://learn.svelte.dev/tutorial/springs)
133133

134134
```svelte
135135
<script>

documentation/docs/03-runtime/04-svelte-transition.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Animates the opacity of an element from 0 to the current opacity for `in` transi
2828
- `duration` (`number`, default 400) — milliseconds the transition lasts
2929
- `easing` (`function`, default `linear`) — an [easing function](/docs/svelte-easing)
3030

31-
You can see the `fade` transition in action in the [transition tutorial](/tutorial/transition).
31+
You can see the `fade` transition in action in the [transition tutorial](https://learn.svelte.dev/tutorial/transition).
3232

3333
```svelte
3434
<script>
@@ -104,7 +104,7 @@ Animates the x and y positions and the opacity of an element. `in` transitions a
104104
- `opacity` (`number`, default 0) - the opacity value to animate out to and in from
105105

106106
x and y use `px` by default but support css units, for example `x: '100vw'` or `y: '50%'`.
107-
You can see the `fly` transition in action in the [transition tutorial](/tutorial/adding-parameters-to-transitions).
107+
You can see the `fly` transition in action in the [transition tutorial](https://learn.svelte.dev/tutorial/adding-parameters-to-transitions).
108108

109109
```svelte
110110
<script>

documentation/docs/03-runtime/05-svelte-animate.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ The `flip` function calculates the start and end position of an element and anim
2525
- a `number`, in milliseconds.
2626
- a function, `distance: number => duration: number`, receiving the distance the element will travel in pixels and returning the duration in milliseconds. This allows you to assign a duration that is relative to the distance travelled by each element.
2727

28-
You can see a full example on the [animations tutorial](/tutorial/animate)
28+
You can see a full example on the [animations tutorial](https://learn.svelte.dev/tutorial/animate).
2929

3030
```svelte
3131
<script>

0 commit comments

Comments
 (0)