Skip to content

various minor content improvements #292

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 22, 2023
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 @@ -11,7 +11,7 @@ Our image is missing a `src` — let's add one:
<img +++src={src}+++ />
```

That's better. But Svelte is giving us a warning:
That's better. But if you hover over the `<img>` in the editor, Svelte is giving us a warning:

> A11y: &lt;img&gt; element should have an alt attribute

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Nested components

It would be impractical to put your entire app in a single component. Instead, we can import components from other files and include them in our markup.

Add a `<script>` tag that imports `Nested.svelte`...
Add a `<script>` tag to the top of `App.svelte` that imports `Nested.svelte`...

```svelte
/// file: App.svelte
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ To demonstrate it, we first need to wire up an event handler (we'll learn more a
```svelte
/// file: App.svelte
<button +++on:click={increment}+++>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>
```

Inside the `increment` function, all we need to do is change the value of `count`:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ You can easily group statements together with a block:
/// file: App.svelte
$: +++{+++
console.log(`the count is ${count}`);
alert(`I SAID THE COUNT IS ${count}`);
console.log(`this will also be logged whenever count changes`);
+++}+++
```

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Updating arrays and objects
---

Because Svelte's reactivity is triggered by assignments, using array methods like `push` and `splice` won't automatically cause updates. For example, clicking the 'Add a number' button doesn't currently do anything.
Because Svelte's reactivity is triggered by assignments, using array methods like `push` and `splice` won't automatically cause updates. For example, clicking the 'Add a number' button doesn't currently do anything, even though we're calling `numbers.push(...)` inside `addNumber`.

One way to fix that is to add an assignment that would otherwise be redundant:

Expand Down
18 changes: 16 additions & 2 deletions content/tutorial/01-svelte/03-props/03-spread-props/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,25 @@
title: Spread props
---

If you have an object of properties, you can 'spread' them onto a component instead of specifying each one:
In this exercise, we've forgotten to specify the `version` prop expected by `PackageInfo.svelte`, meaning it shows 'version undefined'.

We _could_ fix it by adding the `version` prop...

```svelte
/// file: App.svelte
<PackageInfo
name={pkg.name}
speed={pkg.speed}
+++version={pkg.version}+++
website={pkg.website}
/>
```

...but since the properties of `pkg` correspond to the component's expected props, we can 'spread' them onto the component instead:

```svelte
/// file: App.svelte
<PackageInfo +++{...pkg}+++/>
<PackageInfo +++{...pkg}+++ />
```

> Conversely, if you need to reference all the props that were passed into a component, including ones that weren't declared with `export`, you can do so by accessing `$$props` directly. It's not generally recommended, as it's difficult for Svelte to optimise, but it's useful in rare cases.
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,14 @@

const pkg = {
name: 'svelte',
speed: 'blazing',
version: 3,
speed: 'blazingly',
website: 'https://svelte.dev'
};
</script>

<PackageInfo
name={pkg.name}
version={pkg.version}
speed={pkg.speed}
website={pkg.website}
/>
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@
</script>

<p>
The <code>{name}</code> package is {speed} fast. Download version {version}
from
<a {href}>npm</a>
and <a href={website}>learn more here</a>
The <code>{name}</code> package is {speed} fast. Download version {version} from
<a {href}>npm</a> and <a href={website}>learn more here</a>
</p>
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@

const pkg = {
name: 'svelte',
speed: 'blazing',
version: 3,
speed: 'blazingly',
website: 'https://svelte.dev'
};
</script>
Expand Down