Skip to content

Commit bf5fda6

Browse files
dummdidummdummdidumm
authored
docs: add svelte:element/document chapters (#270)
from old tutorial - also updates some existing content
1 parent 8430140 commit bf5fda6

File tree

38 files changed

+158
-110
lines changed

38 files changed

+158
-110
lines changed

‎content/tutorial/03-advanced-svelte/09-special-elements/01-svelte-self/app-a/src/lib/Folder.svelte

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,7 @@
1010
}
1111
</script>
1212

13-
<span class:expanded on:click={toggle}
14-
>{name}</span
15-
>
13+
<button class:expanded on:click={toggle}>{name}</button>
1614

1715
{#if expanded}
1816
<ul>
@@ -29,13 +27,14 @@
2927
{/if}
3028

3129
<style>
32-
span {
30+
button {
3331
padding: 0 0 0 1.5em;
34-
background: url(/tutorial/icons/folder.svg) 0
35-
0.1em no-repeat;
32+
background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
3633
background-size: 1em 1em;
3734
font-weight: bold;
3835
cursor: pointer;
36+
border: none;
37+
margin: 0;
3938
}
4039
4140
.expanded {

‎content/tutorial/03-advanced-svelte/09-special-elements/01-svelte-self/app-b/src/lib/File.svelte

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎content/tutorial/03-advanced-svelte/09-special-elements/01-svelte-self/app-b/src/lib/Folder.svelte

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,7 @@
1010
}
1111
</script>
1212

13-
<span class:expanded on:click={toggle}
14-
>{name}</span
15-
>
13+
<button class:expanded on:click={toggle}>{name}</button>
1614

1715
{#if expanded}
1816
<ul>
@@ -29,13 +27,14 @@
2927
{/if}
3028

3129
<style>
32-
span {
30+
button {
3331
padding: 0 0 0 1.5em;
34-
background: url(/tutorial/icons/folder.svg) 0
35-
0.1em no-repeat;
32+
background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
3633
background-size: 1em 1em;
3734
font-weight: bold;
3835
cursor: pointer;
36+
border: none;
37+
margin: 0;
3938
}
4039
4140
.expanded {

‎content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-element/README.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
title: <svelte:element>
3+
---
4+
5+
Sometimes we don't know in advance what kind of DOM element to render. `<svelte:element>` comes in handy here. Instead of a sequence of `if` blocks...
6+
7+
```html
8+
{#if selected === 'h1'}
9+
<h1>I'm a h1 tag</h1>
10+
{:else if selected === 'h3'}
11+
<h3>I'm a h3 tag</h3>
12+
{:else if selected === 'p'}
13+
<p>I'm a p tag</p>
14+
{/if}
15+
```
16+
17+
...we can have a single dynamic component:
18+
19+
```html
20+
<svelte:element this={selected}>I'm a {selected} tag</svelte:element>
21+
```
22+
23+
The `this` value can be any string, or a falsy value — if it's falsy, no element is rendered.

‎content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-element/app-a/src/lib/App.svelte

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script>
2+
const options = ['h1', 'h3', 'p'];
3+
let selected = options[0];
4+
</script>
5+
6+
<select bind:value={selected}>
7+
{#each options as option}
8+
<option value={option}>{option}</option>
9+
{/each}
10+
</select>
11+
12+
{#if selected === 'h1'}
13+
<h1>I'm a h1 tag</h1>
14+
{:else if selected === 'h3'}
15+
<h3>I'm a h3 tag</h3>
16+
{:else if selected === 'p'}
17+
<p>I'm a p tag</p>
18+
{/if}

‎content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-element/app-b/src/lib/App.svelte

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script>
2+
const options = ['h1', 'h3', 'p'];
3+
let selected = options[0];
4+
</script>
5+
6+
<select bind:value={selected}>
7+
{#each options as option}
8+
<option value={option}>{option}</option>
9+
{/each}
10+
</select>
11+
12+
<svelte:element this={selected}>I'm a {selected} tag</svelte:element>

‎content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-window/README.md renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/04-svelte-window/README.md

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-window/app-a/src/lib/App.svelte renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/04-svelte-window/app-a/src/lib/App.svelte

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-window/app-b/src/lib/App.svelte renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/04-svelte-window/app-b/src/lib/App.svelte

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/04-svelte-window-bindings/README.md renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/05-svelte-window-bindings/README.md

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/04-svelte-window-bindings/app-a/src/lib/App.svelte renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/05-svelte-window-bindings/app-a/src/lib/App.svelte

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/04-svelte-window-bindings/app-b/src/lib/App.svelte renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/05-svelte-window-bindings/app-b/src/lib/App.svelte

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-document/README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
title: <svelte:document>
3+
---
4+
5+
Similar to `<svelte:window>`, the `<svelte:document>` element allows you to listen for events that fire on `document`. This is useful with events like `selectionchange`, which doesn't fire on `window`.
6+
7+
Add the `selectionchange` handler to the `<svelte:document>` tag:
8+
9+
```html
10+
<svelte:document on:selectionchange={handleSelectionChange} />
11+
```
12+
13+
> Avoid `mouseenter` and `mouseleave` handlers on this element, these events are not fired on `document` in all browsers. Use `<svelte:body>` for this instead.

‎content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-document/app-a/src/lib/App.svelte

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script>
2+
let selection = '';
3+
4+
const handleSelectionChange = (e) => selection = document.getSelection();
5+
</script>
6+
7+
<svelte:body />
8+
9+
<p>Select this text to fire events</p>
10+
<p>Selection: {selection}</p>

‎content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-document/app-b/src/lib/App.svelte

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script>
2+
let selection = '';
3+
4+
const handleSelectionChange = (e) => selection = document.getSelection();
5+
</script>
6+
7+
<svelte:document on:selectionchange={handleSelectionChange} />
8+
9+
<p>Select this text to fire events</p>
10+
<p>Selection: {selection}</p>

‎content/tutorial/03-advanced-svelte/09-special-elements/05-svelte-body/README.md renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-body/README.md

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/05-svelte-body/app-a/src/lib/App.svelte renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-body/app-a/src/lib/App.svelte

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/05-svelte-body/app-a/static/kitten.png renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-body/app-a/static/kitten.png

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/05-svelte-body/app-b/src/lib/App.svelte renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-body/app-b/src/lib/App.svelte

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-options/app-b/src/lib/flash.js

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-head/README.md renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/08-svelte-head/README.md

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-head/app-a/src/lib/App.svelte renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/08-svelte-head/app-a/src/lib/App.svelte

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/06-svelte-head/app-b/src/lib/App.svelte renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/08-svelte-head/app-b/src/lib/App.svelte

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-options/README.md renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/09-svelte-options/README.md

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-options/app-a/src/lib/App.svelte renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/09-svelte-options/app-a/src/lib/App.svelte

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-options/app-a/src/lib/Todo.svelte renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/09-svelte-options/app-a/src/lib/Todo.svelte

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,24 @@
44
55
export let todo;
66
7-
let div;
7+
let button;
88
99
afterUpdate(() => {
10-
flash(div);
10+
flash(button);
1111
});
1212
</script>
1313

1414
<!-- the text will flash red whenever
1515
the `todo` object changes -->
16-
<div bind:this={div} on:click>
16+
<button bind:this={button} type="button" on:click>
1717
{todo.done ? '👍' : ''}
1818
{todo.text}
19-
</div>
19+
</button>
2020

2121
<style>
22-
div {
22+
button {
23+
all: unset;
24+
display: block;
2325
cursor: pointer;
2426
line-height: 1.5;
2527
}

‎content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-options/app-a/src/lib/flash.js renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/09-svelte-options/app-a/src/lib/flash.js

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-options/app-b/src/lib/App.svelte renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/09-svelte-options/app-b/src/lib/App.svelte

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/07-svelte-options/app-b/src/lib/Todo.svelte renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/09-svelte-options/app-b/src/lib/Todo.svelte

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,24 @@
66
77
export let todo;
88
9-
let div;
9+
let button;
1010
1111
afterUpdate(() => {
12-
flash(div);
12+
flash(button);
1313
});
1414
</script>
1515

1616
<!-- the text will flash red whenever
1717
the `todo` object changes -->
18-
<div bind:this={div} on:click>
18+
<button bind:this={button} type="button" on:click>
1919
{todo.done ? '👍' : ''}
2020
{todo.text}
21-
</div>
21+
</button>
2222

2323
<style>
24-
div {
24+
button {
25+
all: unset;
26+
display: block;
2527
cursor: pointer;
2628
line-height: 1.5;
2729
}

‎content/tutorial/03-advanced-svelte/09-special-elements/08-svelte-fragment/README.md renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/10-svelte-fragment/README.md

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/08-svelte-fragment/app-a/src/lib/App.svelte renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/10-svelte-fragment/app-a/src/lib/App.svelte

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/08-svelte-fragment/app-a/src/lib/Box.svelte renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/10-svelte-fragment/app-a/src/lib/Box.svelte

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/08-svelte-fragment/app-b/src/lib/App.svelte renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/10-svelte-fragment/app-b/src/lib/App.svelte

File renamed without changes.

‎content/tutorial/03-advanced-svelte/09-special-elements/08-svelte-fragment/app-b/src/lib/Box.svelte renamed to ‎content/tutorial/03-advanced-svelte/09-special-elements/10-svelte-fragment/app-b/src/lib/Box.svelte

File renamed without changes.

‎content/tutorial/common/package-lock.json

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎content/tutorial/common/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"devDependencies": {
1010
"@sveltejs/kit": "^1.7.2",
1111
"esbuild-wasm": "^0.17.9",
12-
"svelte": "^3.55.1",
12+
"svelte": "^3.57.0",
1313
"vite": "^4.1.3"
1414
},
1515
"type": "module"

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"esbuild": "^0.17.11",
2525
"prettier": "^2.8.4",
2626
"prettier-plugin-svelte": "^2.9.0",
27-
"svelte": "^3.56.0",
27+
"svelte": "^3.57.0",
2828
"svelte-check": "^3.1.1",
2929
"tiny-glob": "^0.2.9",
3030
"typescript": "~4.9.5",

0 commit comments

Comments
 (0)