Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ Most web applications have to deal with asynchronous data at some point. Svelte
If you know that your promise can't reject, you can omit the `catch` block. You can also omit the first block if you don't want to show anything until the promise resolves:

```svelte
/// no-file
{#await promise then number}
<p>you rolled a {number}!</p>
{/await}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ title: Custom CSS transitions
The `svelte/transition` module has a handful of built-in transitions, but it's very easy to create your own. By way of example, this is the source of the `fade` transition:

```js
/// no-file
function fade(node, { delay = 0, duration = 400 }) {
const o = +getComputedStyle(node).opacity;

Expand Down Expand Up @@ -33,7 +32,6 @@ For example, the `fade` transition generates a CSS animation somewhat like this:

<!-- prettier-ignore-start -->
```css
/// no-file
0% { opacity: 0 }
10% { opacity: 0.1 }
20% { opacity: 0.2 }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ title: Shorthand class directive
Often, the name of the class will be the same as the name of the value it depends on:

```svelte
/// no-file
<button
class="card"
class:flipped={flipped}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ title: Slots
Just like elements can have children...

```html
/// no-file
<div>
<p>I'm a child of the div</p>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,6 @@ Like lifecycle functions such as `onMount`, `setContext` and `getContext` must b
Your context object can include anything, including stores. This allows you to pass values that change over time to child components:

```js
/// no-file
// in a parent component
import { setContext } from 'svelte';
import { writable } from 'svelte/store';
Expand All @@ -81,7 +80,6 @@ setContext('my-context', {
```

```js
/// no-file
// in a child component
import { getContext } from 'svelte';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ The next two parts of the tutorial will focus on SvelteKit, a full-fledged frame
If you're suffering from information overload and aren't ready to go through the SvelteKit tutorial yet, don't worry! You can use your existing Svelte knowledge without learning all of SvelteKit. Just run this in your terminal and follow the prompts...

```bash
/// no-file
npm create svelte@latest
```

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ Now, if you reload the iframe, `Hello stranger!` becomes `Hello friend!`.
Calling `cookies.set(name, ...)` causes a `Set-Cookie` header to be written, but it _also_ updates the internal map of cookies, meaning any subsequent calls to `cookies.get(name)` during the same request will return the updated value. Under the hood, the `cookies` API uses the popular `cookie` package — the options passed to `cookies.get` and `cookies.set` correspond to the `parse` and `serialize` options from the `cookie` [documentation](https://github.com/jshttp/cookie#api). SvelteKit sets the following defaults to make your cookies more secure:

```js
/// no-file
{
httpOnly: true,
secure: true,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ Notice that we're _not_ showing the error message to the user. That's because er

<!-- prettier-ignore-start -->
```js
/// no-file
{
message: 'Internal Error' // or 'Not Found' for a 404
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ Navigating to `/slow-a` will now be noticeably faster. Starting navigation on ho
You can put the attribute on individual links, or on any element that _contains_ links. The default project template includes the attribute on the `<body>` element:

```html
/// no-file
<body data-sveltekit-preload-data>
%sveltekit.body%
</body>
Expand All @@ -43,7 +42,6 @@ Using `data-sveltekit-preload-data` may sometimes result in false positives - i
You can also initiate preloading programmatically with `preloadCode` and `preloadData` imported from `$app/navigation`:

```js
/// no-file
import { preloadCode, preloadData } from '$app/navigation';

// preload the code and data needed to navigate to /foo
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,6 @@ In turn, these modules can only be imported by _other_ server modules.
The `static` in `$env/static/private` indicates that these values are known at build time, and can be _statically replaced_. This enables useful optimisations:

```js
/// no-file
import { FEATURE_FLAG_X } from '$env/static/private';

if (FEATURE_FLAG_X === 'enabled') {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ Congratulations! If you've made it the entire way through this tutorial, you can
You can start building apps on your own machine with the [`create-svelte`](https://www.npmjs.com/package/create-svelte) package:

```bash
/// no-file
npm create svelte@latest
```

Expand Down
Loading