msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

Merge pull request #2425 from sveltejs/gh-2423

Browse Source 
update svelte:options tutorial chapter, remove example
pull/2427/head
Rich Harris 6 years ago committed by GitHub
parent 8b9c4f3a64 ab84aeef11
commit d6d9a5ee01
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 182 additions and 108 deletions
Show Stats Download Patch File Download Diff File

14
site/content/examples/16-special-elements/06-svelte-options/App.svelte
Unescape View File

@ -1,14 +0,0 @@
<script>
import Square from './Square.svelte';
</script>
<style>
svg {
width: 100%;
height: 100%;
}
</style>
<svg viewBox="0 0 100 100">
<Square cx={50} cy={50} size={40} style="fill: #ff3e00"/>
</svg>

15
site/content/examples/16-special-elements/06-svelte-options/Square.svelte
Unescape View File

@ -1,15 +0,0 @@
<svelte:options namespace="svg"/>
<script>
export let cx;
export let cy;
export let size;
export let style;
$: x1 = cx - size / 2;
$: y1 = cy - size / 2;
$: x2 = x1 + size;
$: y2 = y1 + size;
</script>
<polygon points="{x1},{y1} {x2},{y1} {x2},{y2} {x1},{y2}" {style}/>

3
site/content/examples/16-special-elements/06-svelte-options/meta.json
Unescape View File

@ -1,3 +0,0 @@
{
"title": "<svelte:options>"
}

10
site/content/examples/20-miscellaneous/02-immutable-data/App.svelte
Unescape View File

@ -29,16 +29,10 @@
<h2>Immutable</h2>
{#each todos as todo}
<label on:click="{() => toggle(todo.id)}">
<span>{todo.done ? "😎": "🙁"}</span>
<ImmutableTodo {todo}/>
</label>
<ImmutableTodo {todo} on:click="{() => toggle(todo.id)}"/>
{/each}
<h2>Mutable</h2>
{#each todos as todo}
<label on:click="{() => toggle(todo.id)}">
<span>{todo.done ? "😎": "🙁"}</span>
<MutableTodo {todo}/>
</label>
<MutableTodo {todo} on:click="{() => toggle(todo.id)}"/>
{/each}

21
site/content/examples/20-miscellaneous/02-immutable-data/ImmutableTodo.svelte
Unescape View File

@ -5,11 +5,24 @@
import flash from './flash.js';
export let todo;
let span;
export let toggle;
flash(() => span);
let div;
afterUpdate(() => {
flash(div);
});
</script>
<style>
div {
cursor: pointer;
line-height: 1.5;
}
</style>
<!-- the text will flash red whenever
the `todo` object changes -->
<span bind:this={span}>{todo.text}</span>
the `todo` object changes -->
<div bind:this={div} on:click>
{todo.done ? '👍': ''} {todo.text}
</div>

21
site/content/examples/20-miscellaneous/02-immutable-data/MutableTodo.svelte
Unescape View File

@ -3,11 +3,24 @@
import flash from './flash.js';
export let todo;
let span;
export let toggle;
flash(() => span);
let div;
afterUpdate(() => {
flash(div);
});
</script>
<style>
div {
cursor: pointer;
line-height: 1.5;
}
</style>
<!-- the text will flash red whenever
the `todo` object changes -->
<span bind:this={span}>{todo.text}</span>
the `todo` object changes -->
<div bind:this={div} on:click>
{todo.done ? '👍': ''} {todo.text}
</div>

18
site/content/examples/20-miscellaneous/02-immutable-data/flash.js
Unescape View File

@ -1,13 +1,11 @@
import { afterUpdate } from 'svelte';
export default function flash(element) {
element.style.transition = 'none';
element.style.color = 'rgba(255,62,0,1)';
element.style.backgroundColor = 'rgba(255,62,0,0.2)';
export default function flash(fn) {
afterUpdate(() => {
const span = fn();
span.style.color = 'red';
setTimeout(() => {
span.style.color = 'black';
}, 400);
setTimeout(() => {
element.style.transition = 'color 1s, background 1s';
element.style.color = '';
element.style.backgroundColor = '';
});
}

36
site/content/tutorial/16-special-elements/07-svelte-options/app-a/App.svelte
Unescape View File

@ -1,14 +1,30 @@
<script>
import Square from './Square.svelte';
</script>
import Todo from './Todo.svelte';
let todos = [
{ id: 1, done: true, text: 'wash the car' },
{ id: 2, done: false, text: 'take the dog for a walk' },
{ id: 3, done: false, text: 'mow the lawn' }
];
<style>
svg {
width: 100%;
height: 100%;
function toggle(toggled) {
todos = todos.map(todo => {
if (todo === toggled) {
// return a new object
return {
id: todo.id,
text: todo.text,
done: !todo.done
};
}
// return the same object
return todo;
});
}
</style>
</script>
<svg viewBox="0 0 100 100">
<Square cx={50} cy={50} size={40} style="fill: #ff3e00"/>
</svg>
<h2>Todos</h2>
{#each todos as todo}
<Todo {todo} on:click={() => toggle(todo)}/>
{/each}

13
site/content/tutorial/16-special-elements/07-svelte-options/app-a/Square.svelte
Unescape View File

@ -1,13 +0,0 @@
<script>
export let cx;
export let cy;
export let size;
export let style;
$: x1 = cx - size / 2;
$: y1 = cy - size / 2;
$: x2 = x1 + size;
$: y2 = y1 + size;
</script>
<polygon points="{x1},{y1} {x2},{y1} {x2},{y2} {x1},{y2}" {style}/>

26
site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte
Unescape View File

@ -0,0 +1,26 @@
<script>
import { afterUpdate } from 'svelte';
import flash from './flash.js';
export let todo;
export let toggle;
let div;
afterUpdate(() => {
flash(div);
});
</script>
<style>
div {
cursor: pointer;
line-height: 1.5;
}
</style>
<!-- the text will flash red whenever
the `todo` object changes -->
<div bind:this={div} on:click>
{todo.done ? '👍': ''} {todo.text}
</div>

11
site/content/tutorial/16-special-elements/07-svelte-options/app-a/flash.js
Unescape View File

@ -0,0 +1,11 @@
export default function flash(element) {
element.style.transition = 'none';
element.style.color = 'rgba(255,62,0,1)';
element.style.backgroundColor = 'rgba(255,62,0,0.2)';
setTimeout(() => {
element.style.transition = 'color 1s, background 1s';
element.style.color = '';
element.style.backgroundColor = '';
});
}

36
site/content/tutorial/16-special-elements/07-svelte-options/app-b/App.svelte
Unescape View File

@ -1,14 +1,30 @@
<script>
import Square from './Square.svelte';
</script>
import Todo from './Todo.svelte';
let todos = [
{ id: 1, done: true, text: 'wash the car' },
{ id: 2, done: false, text: 'take the dog for a walk' },
{ id: 3, done: false, text: 'mow the lawn' }
];
<style>
svg {
width: 100%;
height: 100%;
function toggle(toggled) {
todos = todos.map(todo => {
if (todo === toggled) {
// return a new object
return {
id: todo.id,
text: todo.text,
done: !todo.done
};
}
// return the same object
return todo;
});
}
</style>
</script>
<svg viewBox="0 0 100 100">
<Square cx={50} cy={50} size={40} style="fill: #ff3e00"/>
</svg>
<h2>Todos</h2>
{#each todos as todo}
<Todo {todo} on:click={() => toggle(todo)}/>
{/each}

15
site/content/tutorial/16-special-elements/07-svelte-options/app-b/Square.svelte
Unescape View File

@ -1,15 +0,0 @@
<svelte:options namespace="svg"/>
<script>
export let cx;
export let cy;
export let size;
export let style;
$: x1 = cx - size / 2;
$: y1 = cy - size / 2;
$: x2 = x1 + size;
$: y2 = y1 + size;
</script>
<polygon points="{x1},{y1} {x2},{y1} {x2},{y2} {x1},{y2}" {style}/>

28
site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte
Unescape View File

@ -0,0 +1,28 @@
<svelte:options immutable={true}/>
<script>
import { afterUpdate } from 'svelte';
import flash from './flash.js';
export let todo;
export let toggle;
let div;
afterUpdate(() => {
flash(div);
});
</script>
<style>
div {
cursor: pointer;
line-height: 1.5;
}
</style>
<!-- the text will flash red whenever
the `todo` object changes -->
<div bind:this={div} on:click>
{todo.done ? '👍': ''} {todo.text}
</div>

11
site/content/tutorial/16-special-elements/07-svelte-options/app-b/flash.js
Unescape View File

@ -0,0 +1,11 @@
export default function flash(element) {
element.style.transition = 'none';
element.style.color = 'rgba(255,62,0,1)';
element.style.backgroundColor = 'rgba(255,62,0,0.2)';
setTimeout(() => {
element.style.transition = 'color 1s, background 1s';
element.style.color = '';
element.style.backgroundColor = '';
});
}

12
site/content/tutorial/16-special-elements/07-svelte-options/text.md
Unescape View File

@ -4,12 +4,20 @@ title: <svelte:options>
Lastly, `<svelte:options>` allows you to specify compiler options.
Here, we have a component inside an `<svg>` element. Unless we tell Svelte otherwise, it will compile `Square.svelte` to a module that generates HTML nodes instead of SVG nodes. We can correct that by adding this to the top of `Square.svelte`:
We'll use the `immutable` option as an example. In this app, the `<Todo>` component flashes whenever it receives new data. Clicking on one of the items toggles its `done` state by creating an updated `todos` array. This causes the *other* `<Todo>` items to flash, even though they don't end up making any changes to the DOM.
We can optimise this by telling the `<Todo>` component to expect *immutable* data. This means that we're promising never to *mutate* the `todo` prop, but will instead create new todo objects whenever things change.
Add this to the top of the `Todo.svelte` file:
```html
<svelte:options namespace="svg"/>
<svelte:options immutable={true}/>
```
> You can shorten this to `<svelte:options immutable/>` if you prefer.
Now, when you toggle todos by clicking on them, only the updated component flashes.
The options that can be set here are:
* `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed

Write Preview
Loading…
Cancel
Save