Commit507e887

Rich Harris

committed

tidy up

1 parent84121f7 commit507e887Copy full SHA for 507e887

File tree

+26

-39

lines changed

+26

-39

lines changed

Lines changed: 2 additions & 2 deletions

Original file line number	Diff line number	Diff line change
@@ -8,11 +8,11 @@ We'll use the `immutable` option as an example. In this app, the `<Todo>` compon
`8`	`8`
`9`	`9`	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.
`10`	`10`
`11`		-Add this to the top ofthe`Todo.svelte` file:
	`11`	+Add this to the top of`Todo.svelte`:
`12`	`12`
`13`	`13`	```svelte
`14`	`14`	`/// file: Todo.svelte`
`15`		`-<svelte:options immutable={true}/>`
	`15`	`+<svelte:options immutable={true}/>`
`16`	`16`	```
`17`	`17`
`18`	`18`	>You can shorten this to`<svelte:options immutable/>` if you prefer.

Lines changed: 13 additions & 8 deletions

Original file line number	Diff line number	Diff line change
`@@ -3,11 +3,7 @@`
`3`	`3`
`4`	`4`	`let todos= [`
`5`	`5`	`{ id:1, done:true, text:'wash the car' },`
`6`		`-{`
`7`		`-id:2,`
`8`		`-done:false,`
`9`		`-text:'take the dog for a walk'`
`10`		`-},`
	`6`	`+{ id:2, done:false, text:'take the dog for a walk' },`
`11`	`7`	`{ id:3, done:false, text:'mow the lawn' }`
`12`	`8`	`];`
`13`	`9`
`@@ -29,6 +25,15 @@`
`29`	`25`	`</script>`
`30`	`26`
`31`	`27`	`<h2>Todos</h2>`
`32`		`-{#eachtodosastodo}`
`33`		`-<Todo {todo}on:click={()=>toggle(todo)} />`
`34`		`-{/each}`
	`28`	`+<ul>`
	`29`	`+{#eachtodosastodo}`
	`30`	`+<li><Todo {todo}on:change={()=>toggle(todo)} /></li>`
	`31`	`+{/each}`
	`32`	`+</ul>`
	`33`	`+`
	`34`	`+<style>`
	`35`	`+ul {`
	`36`	`+list-style:none;`
	`37`	`+padding-left:0.5em;`
	`38`	`+}`
	`39`	`+</style>`

Lines changed: 5 additions & 14 deletions

Original file line number	Diff line number	Diff line change
`@@ -4,25 +4,16 @@`
`4`	`4`
`5`	`5`	`exportlet todo;`
`6`	`6`
`7`		`-letbutton;`
	`7`	`+letlabel;`
`8`	`8`
`9`	`9`	`afterUpdate(()=> {`
`10`		`-flash(button);`
	`10`	`+flash(label);`
`11`	`11`	`});`
`12`	`12`	`</script>`
`13`	`13`
`14`	`14`	`<!-- the text will flash red whenever`
`15`	`15`	the `todo` object changes -->
`16`		`-<buttonbind:this={button}type="button"on:click>`
`17`		`-{todo.done?'👍':''}`
	`16`	`+<labelbind:this={label}>`
	`17`	`+<inputtype="checkbox"checked={todo.done}on:change />`
`18`	`18`	`{todo.text}`
`19`		`-</button>`
`20`		`-`
`21`		`-<style>`
`22`		`-button {`
`23`		`-all:unset;`
`24`		`-display:block;`
`25`		`-cursor:pointer;`
`26`		`-line-height:1.5;`
`27`		`-}`
`28`		`-</style>`
	`19`	`+</label>`

Lines changed: 6 additions & 15 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,30 +1,21 @@`
`1`		`-<svelte:optionsimmutable={true} />`
	`1`	`+<svelte:optionsimmutable />`
`2`	`2`
`3`	`3`	`<script>`
`4`	`4`	`import {afterUpdate }from'svelte';`
`5`	`5`	`importflashfrom'./flash.js';`
`6`	`6`
`7`	`7`	`exportlet todo;`
`8`	`8`
`9`		`-letbutton;`
	`9`	`+letlabel;`
`10`	`10`
`11`	`11`	`afterUpdate(()=> {`
`12`		`-flash(button);`
	`12`	`+flash(label);`
`13`	`13`	`});`
`14`	`14`	`</script>`
`15`	`15`
`16`	`16`	`<!-- the text will flash red whenever`
`17`	`17`	the `todo` object changes -->
`18`		`-<buttonbind:this={button}type="button"on:click>`
`19`		`-{todo.done?'👍':''}`
	`18`	`+<labelbind:this={label}>`
	`19`	`+<inputtype="checkbox"checked={todo.done}on:change />`
`20`	`20`	`{todo.text}`
`21`		`-</button>`
`22`		`-`
`23`		`-<style>`
`24`		`-button {`
`25`		`-all:unset;`
`26`		`-display:block;`
`27`		`-cursor:pointer;`
`28`		`-line-height:1.5;`
`29`		`-}`
`30`		`-</style>`
	`21`	`+</label>`

Comments

(0)