update some examples

site/content/examples/7guis-circles/App.html

@@ -1,3 +1,70 @@
+<script>
+	// [svelte-upgrade suggestion]
+	// manually refactor all references to __this
+	const __this = {
+		get: () => ({ i, undoStack, circles, selected, adjusting, adjusted })
+	};
+
+	export let i = 0;
+	export let undoStack = [[]];
+	export let circles = [];
+	export let selected;
+	export let adjusting = false;
+	export let adjusted = false;
+
+	// [svelte-upgrade suggestion]
+	// review these functions and remove unnecessary 'export' keywords
+	export function handleClick(event) {
+		if (__this.get().adjusting) {
+			adjusting = false;
+
+			// if nothing changed, rewind
+			if (__this.get().adjusted) push();
+			return;
+		}
+
+		const circle = {
+			cx: event.clientX,
+			cy: event.clientY,
+			r: 50
+		};
+
+		const circles = __this.get().circles;
+		circles.push(circle);
+		circles = circles, selected = circle;
+
+		push();
+	}
+
+	export function adjust(event) {
+		event.preventDefault();
+		if (!__this.get().selected) return;
+		adjusting = true, adjusted = false;
+	}
+
+	export function select(circle, event) {
+		if (!__this.get().adjusting) {
+			event.stopPropagation();
+			selected = circle;
+		}
+	}
+
+	export function push() {
+		undoStack.splice(++i);
+		undoStack.push(clone(circles));
+		i = i, undoStack = undoStack;
+	}
+
+	export function travel(d) {
+		const circles = clone(undoStack[i += d]);
+		circles = circles, i = i, adjusting = false;
+	}
+
+	function clone(circles) {
+		return circles.map(({ cx, cy, r }) => ({ cx, cy, r }));
+	}
+</script>
+
 <!--
 https://github.com/eugenkiss/7guis/wiki#circle-drawer
 
@@ -7,14 +74,14 @@ radius of the selected circle.
 -->
 
 <div class='controls'>
-	<button on:click='travel(-1)' disabled='{i === 0}'>undo</button>
-	<button on:click='travel(+1)' disabled='{i === undoStack.length -1}'>redo</button>
+	<button on:click='{() => travel(-1)}' disabled='{i === 0}'>undo</button>
+	<button on:click='{() => travel(+1)}' disabled='{i === undoStack.length -1}'>redo</button>
 </div>
 
-<svg on:click='handleClick(event)' on:contextmenu='adjust(event)'>
+<svg on:click='{handleClick}' on:contextmenu='{adjust}'>
 	{#each circles as circle}
 		<circle cx='{circle.cx}' cy='{circle.cy}' r='{circle.r}'
-			on:click='select(circle, event)'
+			on:click='{event => select(circle, event)}'
 			fill='{circle === selected ? "#ccc": "white"}'
 		/>
 	{/each}
@@ -23,7 +90,7 @@ radius of the selected circle.
 {#if adjusting}
 	<div class='adjuster'>
 		<p>adjust diameter of circle at {selected.cx}, {selected.cy}</p>
-		<input type='range' bind:value='selected.r' on:input='set({ adjusted: true })'>
+		<input type='range' bind:value='selected.r' on:input='{() => adjusted = true}'>
 	</div>
 {/if}
 
@@ -59,72 +126,3 @@ radius of the selected circle.
 		width: 100%;
 	}
 </style>
-
-<script>
-	export default {
-		data() {
-			return {
-				i: 0,
-				undoStack: [[]],
-				adjusting: false,
-				adjusted: false,
-				circles: []
-			};
-		},
-
-		methods: {
-			handleClick(event) {
-				if (this.get().adjusting) {
-					this.set({ adjusting: false });
-
-					// if nothing changed, rewind
-					if (this.get().adjusted) this.push();
-					return;
-				}
-
-				const circle = {
-					cx: event.clientX,
-					cy: event.clientY,
-					r: 50
-				};
-
-				const circles = this.get().circles;
-				circles.push(circle);
-				this.set({ circles, selected: circle });
-
-				this.push();
-			},
-
-			adjust(event) {
-				event.preventDefault();
-				if (!this.get().selected) return;
-				this.set({ adjusting: true, adjusted: false });
-			},
-
-			select(circle, event) {
-				if (!this.get().adjusting) {
-					event.stopPropagation();
-					this.set({ selected: circle });
-				}
-			},
-
-			// undo stack management
-			push() {
-				let { i, undoStack, circles } = this.get();
-				undoStack.splice(++i);
-				undoStack.push(clone(circles));
-				this.set({ i, undoStack });
-			},
-
-			travel(d) {
-				let { i, undoStack } = this.get();
-				const circles = clone(undoStack[i += d]);
-				this.set({ circles, i, adjusting: false });
-			}
-		}
-	};
-
-	function clone(circles) {
-		return circles.map(({ cx, cy, r }) => ({ cx, cy, r }));
-	}
-</script>

site/content/examples/7guis-counter/App.html

@@ -1,3 +1,3 @@
 <!-- https://github.com/eugenkiss/7guis/wiki#counter -->
-<input type='number' bind:value='count'>
-<button on:click='set({ count: count + 1 })'>count</button>
+<input type=number bind:value={count}>
+<button on:click="{() => count += 1}">count</button>

site/content/examples/7guis-crud/App.html

@@ -1,19 +1,68 @@
+<script>
+	import { beforeUpdate } from 'svelte';
+
+	export let people = [];
+
+	let prefix = '';
+	let first = '';
+	let last = '';
+	let i = 0;
+
+	const filteredPeople = () => {
+		if (!prefix) return people;
+
+		prefix = prefix.toLowerCase();
+		return people.filter(person => {
+			const name = `${person.last}, ${person.first}`;
+			return name.toLowerCase().startsWith(prefix);
+		});
+	};
+
+	const selected = () => filteredPeople()[i];
+
+	function create() {
+		people = people.concat({ first, last });
+		i = people.length - 1;
+		first = last = '';
+	}
+
+	function update() {
+		people[i] = { first, last };
+	}
+
+	function remove() {
+		people.splice(i, 1);
+		people = people;
+
+		first = last = '';
+		i = Math.min(i, people.length - 1);
+	}
+
+	beforeUpdate(() => {
+		const person = selected();
+		if (person) {
+			first = person.first;
+			last = person.last;
+		}
+	});
+</script>
+
 <!-- https://github.com/eugenkiss/7guis/wiki#crud -->
-<input placeholder='filter prefix' bind:value='prefix'>
+<input placeholder="filter prefix" bind:value={prefix}>
 
-<select bind:value='i' size='5'>
+<select bind:value={i} size={5}>
 	{#each filteredPeople as person, i}
-		<option value='{i}'>{person.last}, {person.first}</option>
+		<option value={i}>{person.last}, {person.first}</option>
 	{/each}
 </select>
 
-<label><input bind:value='first' placeholder='first'></label>
-<label><input bind:value='last' placeholder='last'></label>
+<label><input bind:value={first} placeholder="first"></label>
+<label><input bind:value={last} placeholder="last"></label>
 
 <div class='buttons'>
-	<button on:click='create()' disabled='{!first || !last}'>create</button>
-	<button on:click='update()' disabled='{!first || !last || !selected}'>update</button>
-	<button on:click='remove()' disabled='{!selected}'>delete</button>
+	<button on:click={create} disabled="{!first || !last}">create</button>
+	<button on:click={update} disabled="{!first || !last || !selected()}">update</button>
+	<button on:click={remove} disabled="{!selected()}">delete</button>
 </div>
 
 <style>
@@ -37,76 +86,3 @@
 		clear: both;
 	}
 </style>
-
-<script>
-	export default {
-		data() {
-			return {
-				prefix: '',
-				first: '',
-				last: '',
-				people: [],
-				selected: null
-			};
-		},
-
-		computed: {
-			selected: ({ filteredPeople, i }) => {
-				return filteredPeople[i];
-			},
-
-			filteredPeople({ people, prefix }) {
-				if (!prefix) return people;
-
-				prefix = prefix.toLowerCase();
-				return people.filter(person => {
-					const name = `${person.last}, ${person.first}`;
-					return name.toLowerCase().startsWith(prefix);
-				});
-			}
-		},
-
-		onstate({ changed, current }) {
-			if (changed.selected && current.selected) {
-				this.set(current.selected);
-			}
-		},
-
-		methods: {
-			create() {
-				const { first, last, people } = this.get();
-
-				people.push({ first, last });
-
-				this.set({
-					people,
-					first: '',
-					last: '',
-					i: people.length - 1
-				});
-			},
-
-			update() {
-				const { first, last, selected, people } = this.get();
-
-				selected.first = first;
-				selected.last = last;
-
-				this.set({ people });
-			},
-
-			remove() {
-				const { people, selected, i } = this.get();
-				const index = people.indexOf(selected);
-				people.splice(index, 1);
-
-				this.set({
-					people,
-					first: '',
-					last: '',
-					i: Math.min(i, people.length - 1)
-				});
-			}
-		}
-	};
-</script>

site/content/examples/7guis-flight-booker/App.html

@@ -1,28 +1,4 @@
-<!-- https://github.com/eugenkiss/7guis/wiki#flight-booker -->
-<select bind:value='isReturn'>
-	<option value='{false}'>one-way flight</option>
-	<option value='{true}'>return flight</option>
-</select>
-
-<input type='date' bind:value='start'>
-<input type='date' bind:value='end' disabled='{!isReturn}'>
-
-<button
-	on:click='bookFlight()'
-	disabled='{ isReturn && ( startDate >= endDate ) }'
->book</button>
-
-<style>
-	select, input, button {
-		display: block;
-		margin: 0.5em 0;
-		font-size: inherit;
-	}
-</style>
-
 <script>
-	export default {
-		data() {
 	const tomorrow = new Date(Date.now() + 86400000);
 
 	const tomorrowAsString = [
@@ -31,32 +7,24 @@
 		pad(tomorrow.getDate(), 2)
 	].join('-');
 
-			return {
-				start: tomorrowAsString,
-				end: tomorrowAsString,
-				type: 'oneway'
-			};
-		},
+	let start = tomorrowAsString;
+	let end = tomorrowAsString;
+	let isReturn = false;
+
+	const startDate = () => convertToDate(start);
+	const endDate = () => convertToDate(end);
 
-		computed: {
-			startDate: ({ start }) => convertToDate(start),
-			endDate: ({ end }) => convertToDate(end)
-		},
 
-		methods: {
-			bookFlight() {
-				const { startDate, endDate, isReturn } = this.get();
+	function bookFlight() {
 		const type = isReturn ? 'return' : 'one-way';
 
-				let message = `You have booked a ${type} flight, leaving ${startDate.toDateString()}`;
+		let message = `You have booked a ${type} flight, leaving ${startDate().toDateString()}`;
 		if (type === 'return') {
-					message += ` and returning ${endDate.toDateString()}`;
+			message += ` and returning ${endDate().toDateString()}`;
 		}
 
 		alert(message);
 	}
-		}
-	};
 
 	function convertToDate(str) {
 		var split = str.split('-');
@@ -69,3 +37,25 @@
 		return x;
 	}
 </script>
+
+<style>
+	select, input, button {
+		display: block;
+		margin: 0.5em 0;
+		font-size: inherit;
+	}
+</style>
+
+<!-- https://github.com/eugenkiss/7guis/wiki#flight-booker -->
+<select bind:value={isReturn}>
+	<option value={false}>one-way flight</option>
+	<option value={true}>return flight</option>
+</select>
+
+<input type=date bind:value={start}>
+<input type=date bind:value={end} disabled={!isReturn}>
+
+<button
+	on:click={bookFlight}
+	disabled="{isReturn && (startDate() >= endDate())}"
+>book</button>

site/content/examples/7guis-temperature/App.html

@@ -1,6 +1,6 @@
 <!-- https://github.com/eugenkiss/7guis/wiki#temperature-converter -->
-<input bind:value='celsius' type='number'> °c =
-<input bind:value='fahrenheit' type='number'> °f
+<input value={c} on:input="{e => setBothFromC(e.target.value)}" type=number> °c =
+<input value={f} on:input="{e => setBothFromF(e.target.value)}" type=number> °f
 
 <style>
 	input {
@@ -9,18 +9,16 @@
 </style>
 
 <script>
-	export default {
-		onstate: function ({ changed, current }) {
-			if (changed.celsius) {
-				this.set({
-					fahrenheit: +(32 + (9 / 5 * current.celsius)).toFixed(1)
-				});
-			}
-			if (changed.fahrenheit) {
-				this.set({
-					celsius: +(5 / 9 * (current.fahrenheit - 32)).toFixed(1)
-				});
-			}
+	let c = 0;
+	let f = 32;
+
+	function setBothFromC(value) {
+		c = +value;
+		f = +(32 + (9 / 5 * c)).toFixed(1);
 	}
+
+	function setBothFromF(value) {
+		f = +value;
+		c =+(5 / 9 * (f - 32)).toFixed(1);
 	}
 </script>

site/content/examples/7guis-timer/App.html

@@ -1,53 +1,53 @@
-<!-- https://github.com/eugenkiss/7guis/wiki#timer -->
-<label>
-	elapsed time:
-	<progress value='{elapsed / duration}'></progress>
-</label>
-
-<div>{ ( elapsed / 1000 ).toFixed( 1 ) }s</div>
-
-<label>
-	duration:
-	<input type='range' bind:value='duration' min='1' max='20000'>
-</label>
+<script>
+	import { onDestroy, onMount } from 'svelte';
 
-<button on:click='reset()'>reset</button>
+	// [svelte-upgrade suggestion]
+	// manually refactor all references to __this
+	const __this = {};
 
-<script>
-	export default {
-		data() {
-			return { elapsed: 0, duration: 5000 };
-		},
+	export let elapsed = 0;
+	export let duration = 5000;
+	export let start;
 
-		oncreate() {
-			this.reset();
+	onMount(() => {
+		reset();
 
 		const update = () => {
-				this.frame = requestAnimationFrame(update);
-
-				const { start, duration } = this.get();
+			__this.frame = requestAnimationFrame(update);
 			const elapsed = window.performance.now() - start;
 
 			if (elapsed > duration) return;
 
-				this.set({ elapsed });
+			elapsed = elapsed;
 		};
 
 		update();
-		},
+	});
 
-		ondestroy() {
-			if (this.frame) {
-				cancelAnimationFrame(this.frame);
+	onDestroy(() => {
+		if (__this.frame) {
+			cancelAnimationFrame(__this.frame);
 		}
-		},
-
-		methods: {
-			reset() {
-				this.set({
-					start: window.performance.now()
 	});
+
+	// [svelte-upgrade suggestion]
+	// review these functions and remove unnecessary 'export' keywords
+	export function reset() {
+		start = window.performance.now();
 	}
-		}
-	};
 </script>
+
+<!-- https://github.com/eugenkiss/7guis/wiki#timer -->
+<label>
+	elapsed time:
+	<progress value='{elapsed / duration}'></progress>
+</label>
+
+<div>{ ( elapsed / 1000 ).toFixed( 1 ) }s</div>
+
+<label>
+	duration:
+	<input type='range' bind:value='duration' min='1' max='20000'>
+</label>
+
+<button on:click='{reset}'>reset</button>

site/content/examples/await-block/App.html

@@ -1,4 +1,17 @@
-<button on:click='findAnswer()'>find the answer</button>
+<script>
+	export let promise;
+
+	// [svelte-upgrade suggestion]
+	// review these functions and remove unnecessary 'export' keywords
+	export function findAnswer() {
+		promise = new Promise(fulfil => {
+				const delay = 1000 + Math.random() * 3000;
+				setTimeout(() => fulfil(42), delay);
+			});
+	}
+</script>
+
+<button on:click='{findAnswer}'>find the answer</button>
 
 {#if promise}
 	{#await promise}
@@ -9,18 +22,3 @@
 		<p>well that's odd</p>
 	{/await}
 {/if}
-
-<script>
-	export default {
-		methods: {
-			findAnswer() {
-				this.set({
-					promise: new Promise(fulfil => {
-						const delay = 1000 + Math.random() * 3000;
-						setTimeout(() => fulfil(42), delay);
-					})
-				});
-			}
-		}
-	};
-</script>

site/content/examples/bar-chart/App.html

@@ -1,4 +1,56 @@
-<svelte:window on:resize='resize()'/>
+<script>
+	import { onMount } from 'svelte';
+
+	export let svg;
+
+	import { scaleLinear } from 'd3-scale';
+
+	var xScale = scaleLinear();
+	var yScale = scaleLinear();
+
+	export let xTicks = [1990, 1995, 2000, 2005, 2010, 2015];
+	export let width = 500;
+	export let padding = { top: 20, right: 15, bottom: 20, left: 25 };
+	export let height = 200;
+	export let yTicks = [0, 5, 10, 15, 20];
+	export let points;
+	export let tick;
+
+	function formatMobile(tick) {
+		return "'" + tick % 100;
+	}
+
+	function barWidth() {
+		var innerWidth = width - (padding.left + padding.right);
+		return innerWidth / xTicks.length;
+	}
+
+	function xScale() {
+		return xScale()
+			.domain([0, xTicks.length])
+			.range([padding.left, width - padding.right]);
+	}
+
+	function yScale() {
+		return yScale()
+			.domain([0, Math.max.apply(null, yTicks)])
+			.range([height - padding.bottom, padding.top]);
+	}
+
+	onMount(() => {
+		resize();
+	});
+
+	// [svelte-upgrade suggestion]
+	// review these functions and remove unnecessary 'export' keywords
+	export function resize() {
+		var bcr = svg.getBoundingClientRect();
+
+		width = bcr.right - bcr.left, height = bcr.bottom - bcr.top;
+	}
+</script>
+
+<svelte:window on:resize='{resize}'/>
 
 <div class='chart'>
 	<h2>US birthrate by year</h2>
@@ -6,7 +58,7 @@
 		<!-- y axis -->
 		<g class='axis y-axis' transform='translate(0,{padding.top})'>
 			{#each yTicks as tick}
-				<g class='tick tick-{tick}' transform='translate(0, {yScale(tick) - padding.bottom})'>
+				<g class='tick tick-{tick}' transform='translate(0, {yScale()(tick) - padding.bottom})'>
 					<line x2='100%'></line>
 					<text y='-4'>{tick} {tick === 20 ? ' per 1,000 population' : ''}</text>
 				</g>
@@ -16,8 +68,8 @@
 		<!-- x axis -->
 		<g class='axis x-axis'>
 			{#each points as point, i}
-				<g class='tick tick-{tick}' transform='translate({xScale(i)},{height})'>
-					<text x='{barWidth/2}' y='-4'>{width > 380 ? point.year : formatMobile(point.year)}</text>
+				<g class='tick tick-{tick}' transform='translate({xScale()(i)},{height})'>
+					<text x='{barWidth()/2}' y='-4'>{width > 380 ? point.year : formatMobile(point.year)}</text>
 				</g>
 			{/each}
 		</g>
@@ -25,10 +77,10 @@
 		<g class='bars'>
 			{#each points as point, i}
 			<rect
-				x='{xScale(i) + 2}'
-				y='{yScale(point.birthrate)}'
-				width='{ barWidth - 4 }'
-				height='{ height - padding.bottom - yScale(point.birthrate) }'
+				x='{xScale()(i) + 2}'
+				y='{yScale()(point.birthrate)}'
+				width='{ barWidth() - 4 }'
+				height='{ height - padding.bottom - yScale()(point.birthrate) }'
 				></rect>
 			{/each}
 		</g>
@@ -71,62 +123,3 @@
 		opacity: 0.65;
 	}
 </style>
-
-<script>
-	import { scaleLinear } from 'd3-scale';
-
-	var xScale = scaleLinear();
-	var yScale = scaleLinear();
-
-	export default {
-		data: function () {
-			return {
-				padding: { top: 20, right: 15, bottom: 20, left: 25 },
-				height: 200,
-				width: 500,
-				xTicks: [1990, 1995, 2000, 2005, 2010, 2015],
-				yTicks: [0, 5, 10, 15, 20]
-			};
-		},
-
-		helpers: {
-			formatMobile: function (tick) {
-				return "'" + tick % 100;
-			}
-		},
-
-		computed: {
-			barWidth: function ({ xTicks, width, padding }) {
-				var innerWidth = width - (padding.left + padding.right);
-				return innerWidth / xTicks.length;
-			},
-
-			xScale: function ({ padding, width, xTicks }) {
-				return xScale
-					.domain([0, xTicks.length])
-					.range([padding.left, width - padding.right]);
-			},
-
-			yScale: function ({ padding, height, yTicks }) {
-				return yScale
-					.domain([0, Math.max.apply(null, yTicks)])
-					.range([height - padding.bottom, padding.top]);
-			}
-		},
-
-		oncreate() {
-			this.resize();
-		},
-
-		methods: {
-			resize: function () {
-				var bcr = this.refs.svg.getBoundingClientRect();
-
-				this.set({
-					width: bcr.right - bcr.left,
-					height: bcr.bottom - bcr.top
-				});
-			}
-		}
-	};
-</script>

site/content/examples/binding-input-checkbox-group/App.html

@@ -1,15 +1,15 @@
 <label>
-	<input type='checkbox' bind:group='selected' value='red'>
+	<input type=checkbox bind:group={selected} value="red">
 	red
 </label>
 
 <label>
-	<input type='checkbox' bind:group='selected' value='green'>
+	<input type=checkbox bind:group={selected} value="green">
 	green
 </label>
 
 <label>
-	<input type='checkbox' bind:group='selected' value='blue'>
+	<input type=checkbox bind:group={selected} value="blue">
 	blue
 </label>
 

site/content/examples/binding-input-checkbox/App.html

@@ -1,7 +1,7 @@
 {#each todos as todo}
-	<div class='todo {todo.done ? "done": ""}'>
-		<input type='checkbox' bind:checked='todo.done'>
-		<input type='text' bind:value='todo.description'>
+	<div class="todo {todo.done ? 'done': ''}">
+		<input type=checkbox bind:checked={todo.done}>
+		<input type=text bind:value={todo.description}>
 	</div>
 {/each}
 

site/content/examples/binding-input-numeric/App.html

@@ -1,6 +1,6 @@
 <!-- number and range inputs are bound to numeric values -->
-<input bind:value='a' type='number' min='0' max='10'>
-<input bind:value='b' type='range' min='0' max='10'>
+<input bind:value={a} type=number min=0 max=10>
+<input bind:value={b} type=range min=0 max=10>
 
 <p>{a} * {b} = {a * b}</p>
 

site/content/examples/binding-input-radio/App.html

@@ -1,16 +1,16 @@
 <label>
-	<input type='radio' bind:group='selected' value='red'>
+	<input type=radio bind:group={selected} value="red">
 	red
 </label>
 
 <label>
-	<input type='radio' bind:group='selected' value='green'>
+	<input type=radio bind:group={selected} value="green">
 	green
 </label>
 
 <label>
-	<input type='radio' bind:group='selected' value='blue'>
+	<input type=radio bind:group={selected} value="blue">
 	blue
 </label>
 
-<p style='color: {selected};'>selected {selected}</p>
+<p style="color: {selected};">selected {selected}</p>

site/content/examples/binding-input-text/App.html

@@ -1,2 +1,2 @@
-<input bind:value='name' placeholder='enter your name'>
+<input bind:value={name} placeholder="enter your name">
 <p>Hello {name || 'stranger'}!</p>

site/content/examples/binding-media-elements/App.html

@@ -1,22 +1,59 @@
-<svelte:window on:click='seek(event)' on:mousemove='seek(event)'/>
+<script>
+	export let paused = true;
+	export let t = 0;
+	export let d;
+
+	let icon, bg;
+
+	$: icon = `https://icon.now.sh/${paused ? 'play' : 'pause'}_circle_filled`;
+
+	$: {
+		var p = d ? t / d : 0;
+		var h = 90 + 90 * p;
+		var l = 10 + p * 30;
+		bg = `hsl(${h},50%,${l}%)`;
+	}
 
-<audio bind:currentTime=t bind:duration=d bind:paused>
-	<source type='audio/mp3' src='https://deepnote.surge.sh/deepnote.mp3'>
+	function pad(num) {
+		return num < 10 ? '0' + num : num;
+	}
+
+	const format = time => {
+		if (isNaN(time)) return '--:--.-';
+		var minutes = Math.floor(time / 60);
+		var seconds = (time % 60).toFixed(1);
+
+		return minutes + ':' + pad(seconds)
+	};
+
+	function seek(event) {
+		if (event.buttons === 1) {
+			event.preventDefault();
+			var p = event.clientX / window.innerWidth;
+			t = p * d;
+		}
+	}
+</script>
+
+<svelte:window on:click={seek} on:mousemove={seek}/>
+
+<audio bind:currentTime={t} bind:duration={d} bind:paused>
+	<source type="audio/mp3" src="https://deepnote.surge.sh/deepnote.mp3">
 </audio>
 
 <p>THX Deep Note</p>
-<div class='status' on:click='event.stopPropagation()'>
-	<img alt='play/pause button' on:click='set({ paused: !paused })' src='{icon}/333333'>
-	<span class='elapsed'>{format(t)}</span>
-	<span class='duration'>{format(d)}</span>
+<div class="status" on:click="{event => event.stopPropagation()}">
+	<img alt="play/pause button" on:click="{() => paused = !paused}" src="{icon}/333333">
+	<span class="elapsed">{format(t)}</span>
+	<span class="duration">{format(d)}</span>
 </div>
 
-<div class='progress' style='width: {d ? 100 * t/d : 0}%; background: {bg};'>
+<div class="progress" style="width: {d ? 100 * t/d : 0}%; background: {bg};">
 	<p>THX Deep Note</p>
-	<div class='status' on:click='event.stopPropagation()'>
-		<img alt='play/pause button' src='{icon}/ffffff'>
-		<span class='elapsed'>{format(t)}</span>
-		<span class='duration'>{format(d)}</span>
+	<div class="status" on:click="{event => event.stopPropagation()}">
+		<img alt="play/pause button" src="{icon}/ffffff">
+		<span class="elapsed">{format(t)}</span>
+		<span class="duration">{format(d)}</span>
 	</div>
 </div>
 
@@ -57,48 +94,3 @@
 	.elapsed { float: left; }
 	.duration { float: right; }
 </style>
-
-<script>
-	function pad(num) {
-		return num < 10 ? '0' + num : num;
-	}
-
-	export default {
-		data() {
-			return { paused: true, t: 0 };
-		},
-		
-		computed: {
-			icon: ({ paused }) => {
-				return `https://icon.now.sh/${paused ? 'play' : 'pause'}_circle_filled`;
-			},
-
-			bg: ({ t, d }) => {
-				var p = d ? t / d : 0;
-				var h = 90 + 90 * p;
-				var l = 10 + p * 30;
-				return `hsl(${h},50%,${l}%)`;
-			}
-		},
-
-		helpers: {
-			format: time => {
-				if (isNaN(time)) return '--:--.-';
-				var minutes = Math.floor(time / 60);
-				var seconds = (time % 60).toFixed(1);
-
-				return minutes + ':' + pad(seconds)
-			}
-		},
-
-		methods: {
-			seek(event) {
-				if (event.buttons === 1) {
-					event.preventDefault();
-					var p = event.clientX / window.innerWidth;
-					this.set({ t: p * this.get().d });
-				}
-			}
-		}
-	}
-</script>

site/content/examples/binding-textarea/App.html

@@ -1,5 +1,11 @@
-<textarea bind:value='markdown' resize='none'></textarea>
-<div class='output'>{@html marked(markdown)}</div>
+<script>
+	import marked from 'marked';
+
+	export let markdown;
+</script>
+
+<textarea bind:value={markdown} resize="none"></textarea>
+<div class="output">{@html marked(markdown)}</div>
 
 <style>
 	textarea {
@@ -7,13 +13,3 @@
 		height: 50%;
 	}
 </style>
-
-<script>
-	import marked from 'marked';
-
-	export default {
-		helpers: {
-			marked
-		}
-	};
-</script>

site/content/examples/each-blocks/App.html

@@ -2,6 +2,6 @@
 
 <ul>
 	{#each cats as cat}
-		<li><a target='_blank' href='{cat.video}'>{cat.name}</a></li>
+		<li><a target="_blank" href={cat.video}>{cat.name}</a></li>
 	{/each}
 </ul>

site/content/examples/hacker-news/App.html

@@ -1,4 +1,35 @@
-<svelte:window on:hashchange='hashchange()'/>
+<script>
+	import { onMount } from 'svelte';
+
+	import List from './List.html';
+	import Item from './Item.html';
+
+	export let item;
+	export let page;
+
+	onMount(() => {
+		hashchange();
+	});
+
+	async function hashchange() {
+		// the poor man's router!
+		const path = window.location.hash.slice(1);
+
+		if (path.startsWith('/item')) {
+			const id = path.slice(6);
+			item = await fetch(`https://node-hnapi.herokuapp.com/item/${id}`).then(r => r.json());
+
+			window.scrollTo(0,0);
+		} else if (path.startsWith('/top')) {
+			page = +path.slice(5);
+			item = null;
+		} else {
+			window.location.hash = '/top/1';
+		}
+	}
+</script>
+
+<svelte:window on:hashchange={hashchange}/>
 
 <main>
 	{#if item}
@@ -27,40 +58,3 @@
 		color: rgb(0,0,150);
 	}
 </style>
-
-<script>
-	import List from './List.html';
-	import Item from './Item.html';
-
-	export default {
-		components: { List, Item },
-
-		oncreate() {
-			this.hashchange();
-		},
-
-		methods: {
-			async hashchange() {
-				// the poor man's router!
-				const path = window.location.hash.slice(1);
-
-				if (path.startsWith('/item')) {
-					const id = path.slice(6);
-					const item = await fetch(`https://node-hnapi.herokuapp.com/item/${id}`).then(r => r.json());
-
-					this.set({ item });
-
-					window.scrollTo(0,0);
-				} else if (path.startsWith('/top')) {
-					const page = +path.slice(5);
-					this.set({
-						item: null,
-						page
-					});
-				} else {
-					window.location.hash = '/top/1';
-				}
-			}
-		}
-	};
-</script>

site/content/examples/hacker-news/Comment.html

@@ -1,11 +1,11 @@
 <article>
-	<p class='meta'>{comment.user} {comment.time_ago}</p>
+	<p class="meta">{comment.user} {comment.time_ago}</p>
 
 	{@html comment.content}
 
-	<div class='replies'>
+	<div class="replies">
 		{#each comment.comments as child}
-			<svelte:self comment='{child}'/>
+			<svelte:self comment={child}/>
 		{/each}
 	</div>
 </article>

site/content/examples/hacker-news/Item.html

@@ -1,15 +1,26 @@
-<a href='#/top/1' on:click='back(event)'>&laquo; back</a>
+<script>
+	import Comment from "./Comment.html";
+
+	export let item;
+
+	function back(event) {
+		event.preventDefault();
+		window.history.back();
+	}
+</script>
+
+<a href="#/top/1" on:click={back}>&laquo; back</a>
 
 <article>
-	<a href='{item.url}'>
+	<a href="{item.url}">
 		<h1>{item.title}</h1>
 		<small>{item.domain}</small>
 	</a>
 
-	<p class='meta'>submitted by {item.user} {item.time_ago}
+	<p class="meta">submitted by {item.user} {item.time_ago}
 </article>
 
-<div class='comments'>
+<div class="comments">
 	{#each item.comments as comment}
 		<Comment {comment}/>
 	{/each}
@@ -30,18 +41,3 @@
 		margin: 0;
 	}
 </style>
-
-<script>
-	import Comment from './Comment.html';
-
-	export default {
-		components: { Comment },
-
-		methods: {
-			back(event) {
-				event.preventDefault();
-				window.history.back();
-			}
-		}
-	};
-</script>

site/content/examples/hacker-news/List.html

@@ -1,11 +1,34 @@
+<script>
+	import { beforeUpdate } from "svelte";
+	import Summary from "./Summary.html";
+
+	const PAGE_SIZE = 20;
+
+	export let items;
+	export let offset;
+	export let page;
+
+	let previous_page;
+
+	beforeUpdate(async () => {
+		if (page !== previous_page) {
+			previous_page = page;
+
+			items = await fetch(`https://node-hnapi.herokuapp.com/news?page=${page}`).then(r => r.json())
+			offset = PAGE_SIZE * (page - 1);
+			window.scrollTo(0, 0);
+		}
+	});
+</script>
+
 {#if items}
 	{#each items as item, i}
 		<Summary {item} {i} {offset}/>
 	{/each}
 
-	<a href='#/top/{page + 1}'>page {page + 1}</a>
+	<a href="#/top/{page + 1}">page {page + 1}</a>
 {:else}
-	<p class='loading'>loading...</p>
+	<p class="loading">loading...</p>
 {/if}
 
 <style>
@@ -24,29 +47,3 @@
 		to { opacity: 1; }
 	}
 </style>
-
-<script>
-	import Summary from './Summary.html';
-
-	const PAGE_SIZE = 20;
-
-	export default {
-		async onstate({ changed, current }) {
-			if (changed.page) {
-				const { page } = current;
-				const items =  await fetch(`https://node-hnapi.herokuapp.com/news?page=${page}`).then(r => r.json());
-
-				this.set({
-					items,
-					offset: PAGE_SIZE * (page - 1)
-				});
-
-				window.scrollTo(0,0);
-			}
-		},
-
-		components: {
-			Summary
-		}
-	};
-</script>

site/content/examples/hacker-news/Summary.html

@@ -1,7 +1,18 @@
+<script>
+	export let item;
+	export let i;
+	export let offset;
+
+	function comment_text() {
+		const c = item.comments_count;
+		return `${c} ${c === 1 ? 'comment' : 'comments'}`;
+	}
+</script>
+
 <article>
 	<span>{i + offset + 1}</span>
-	<h2><a target='_blank' href='{item.url}'>{item.title}</a></h2>
-	<p class='meta'><a href='#/item/{item.id}'>{comment_text}</a> by {item.user} {item.time_ago}</p>
+	<h2><a target="_blank" href={item.url}>{item.title}</a></h2>
+	<p class="meta"><a href="#/item/{item.id}">{comment_text()}</a> by {item.user} {item.time_ago}</p>
 </article>
 
 <style>
@@ -25,14 +36,3 @@
 		color: #333;
 	}
 </style>
-
-<script>
-	export default {
-		computed: {
-			comment_text({ item }) {
-				const c = item.comments_count;
-				return `${c} ${c === 1 ? 'comment' : 'comments'}`;
-			}
-		}
-	};
-</script>

site/content/examples/immutable/App.html

@@ -1,32 +1,13 @@
-<h2>Immutable</h2>
-{#each todos as todo}
-	<label on:click="toggle(todo.id)">
-		<span>{todo.done ? "😎": "☹️"}</span>
-		<ImmutableTodo {todo}/>
-	</label>
-{/each}
-
-<h2>Mutable</h2>
-{#each todos as todo}
-	<label on:click="toggle(todo.id)">
-		<span>{todo.done ? "😎": "☹️"}</span>
-		<MutableTodo {todo}/>
-	</label>
-{/each}
+<svelte:meta immutable/>
 
 <script>
 	import ImmutableTodo from './ImmutableTodo.html';
 	import MutableTodo from './MutableTodo.html';
 
-	export default {
-		immutable: true,
-
-		methods: {
-			toggle(id) {
-				const { todos } = this.get();
+	export let todos;
 
-				this.set({
-					todos: todos.map(todo => {
+	function toggle(id) {
+		todos = todos.map(todo => {
 			if (todo.id === id) {
 				// return a new object
 				return {
@@ -38,11 +19,22 @@
 
 			// return the same object
 			return todo;
-					})
 		});
 	}
-		},
-
-		components: { ImmutableTodo, MutableTodo }
-	}
 </script>
+
+<h2>Immutable</h2>
+{#each todos as todo}
+	<label on:click="{() => toggle(todo.id)}">
+		<span>{todo.done ? "😎": "☹️"}</span>
+		<ImmutableTodo {todo}/>
+	</label>
+{/each}
+
+<h2>Mutable</h2>
+{#each todos as todo}
+	<label on:click="{() => toggle(todo.id)}">
+		<span>{todo.done ? "😎": "☹️"}</span>
+		<MutableTodo {todo}/>
+	</label>
+{/each}

site/content/examples/immutable/ImmutableTodo.html

@@ -1,17 +1,19 @@
-<!-- the text will flash red whenever
-     the `todo` object changes -->
-<span ref:span>{todo.text}</span>
+<svelte:meta immutable/>
 
 <script>
-	export default {
-		// try commenting this out
-		immutable: true,
+	import { afterRender } from 'svelte';
+
+	export let todo;
+	let span;
 
-		onupdate({ changed, current, previous }) {
-			this.refs.span.style.color = 'red';
+	afterRender(() => {
+		span.style.color = 'red';
 		setTimeout(() => {
-				this.refs.span.style.color = 'black';
+			span.style.color = 'black';
 		}, 400);
-		}
-	};
+	});
 </script>
+
+<!-- the text will flash red whenever
+     the `todo` object changes -->
+<span ref:span>{todo.text}</span>

site/content/examples/immutable/MutableTodo.html

@@ -1,14 +1,17 @@
-<span ref:span>{todo.text}</span>
-
 <script>
-	export default {
-		immutable: false,
+	import { afterRender } from 'svelte';
+
+	export let todo;
+	let span;
 
-		onupdate({ changed, current, previous }) {
-			this.refs.span.style.color = 'red';
+	afterRender(() => {
+		span.style.color = 'red';
 		setTimeout(() => {
-				this.refs.span.style.color = 'black';
+			span.style.color = 'black';
 		}, 400);
-		}
-	};
+	});
 </script>
+
+<!-- the text will flash red whenever
+     the `todo` object changes -->
+<span ref:span>{todo.text}</span>

site/content/examples/line-chart/App.html

@@ -1,32 +1,79 @@
-<svelte:window on:resize='resize()'/>
+<script>
+	import { onMount } from 'svelte';
+	import { scaleLinear } from 'd3-scale';
+
+	export let points;
+
+	const yTicks = [0, 2, 4, 6, 8];
+	const xTicks = [1980, 1990, 2000, 2010];
+	const padding = { top: 20, right: 15, bottom: 20, left: 25 };
+
+	let svg;
+	let width = 500;
+	let height = 200;
+
+	let xScale;
+	let yScale;
+	let minX;
+	let maxX;
+	let path;
+	let area;
+
+	$: xScale = scaleLinear()
+		.domain([minX, maxX])
+		.range([padding.left, width - padding.right]);
+
+	$: yScale = scaleLinear
+		.domain([Math.min.apply(null, yTicks), Math.max.apply(null, yTicks)])
+		.range([height - padding.bottom, padding.top]);
+
+	$: minX = points[0].x;
+	$: maxX = points[points.length - 1].x;
+	$: path = `M${points.map(p => `${xScale(p.x)},${yScale(p.y)}`).join('L')}`;
+	$: area = `${path}L${xScale(maxX)},${yScale(0)}L${xScale(minX)},${yScale(0)}Z`;
+
+	function formatMobile (tick) {
+		return "'" + tick % 100;
+	}
+
+	function resize() {
+		const bcr = svg.getBoundingClientRect();
+		width = bcr.width;
+		height = bcr.height;
+	}
+
+	onMount(resize);
+</script>
+
+<svelte:window on:resize='{resize}'/>
 
-<div class='chart'>
+<div class="chart">
 	<h2>Arctic sea ice minimum</h2>
 
 	<svg ref:svg>
 		<!-- y axis -->
-		<g class='axis y-axis' transform='translate(0, {padding.top})'>
+		<g class="axis y-axis" transform="translate(0, {padding.top})">
 			{#each yTicks as tick}
-				<g class='tick tick-{tick}' transform='translate(0, {yScale(tick) - padding.bottom})'>
-					<line x2='100%'></line>
-					<text y='-4'>{tick} {tick === 8 ? ' million sq km' : ''}</text>
+				<g class="tick tick-{tick}" transform="translate(0, {yScale(tick) - padding.bottom})">
+					<line x2="100%"></line>
+					<text y="-4">{tick} {tick === 8 ? ' million sq km' : ''}</text>
 				</g>
 			{/each}
 		</g>
 
 		<!-- x axis -->
-		<g class='axis x-axis'>
+		<g class="axis x-axis">
 			{#each xTicks as tick}
-				<g class='tick tick-{ tick }' transform='translate({xScale(tick)},{height})'>
-					<line y1='-{height}' y2='-{padding.bottom}' x1='0' x2='0'></line>
-					<text y='-2'>{width > 380 ? tick : formatMobile(tick)}</text>
+				<g class="tick tick-{ tick }" transform="translate({xScale(tick)},{height})">
+					<line y1="-{height}" y2="-{padding.bottom}" x1="0" x2="0"></line>
+					<text y="-2">{width > 380 ? tick : formatMobile(tick)}</text>
 				</g>
 			{/each}
 		</g>
 
 		<!-- data -->
-		<path class='path-area' d='{area}'></path>
-		<path class='path-line' d='{path}'></path>
+		<path class="path-area" d={area}></path>
+		<path class="path-line" d={path}></path>
 	</svg>
 
 	<p>Average September extent. Source: <a href='https://climate.nasa.gov/vital-signs/arctic-sea-ice/'>NSIDC/NASA</a>
@@ -80,74 +127,3 @@
 		fill: rgba(0,100,100,0.2);
 	}
 </style>
-
-<script>
-	import { scaleLinear } from 'd3-scale';
-
-	const xScale = scaleLinear();
-	const yScale = scaleLinear();
-
-	export default {
-		data() {
-			return {
-				padding: { top: 20, right: 15, bottom: 20, left: 25 },
-				height: 200,
-				width: 500,
-				xTicks: [1980, 1990, 2000, 2010],
-				yTicks: [0, 2, 4, 6, 8],
-				formatMobile(tick) {
-					return "'" + tick % 100;
-				}
-			};
-		},
-
-		computed: {
-			minX: ({ points }) => {
-				return points[0].x;
-			},
-
-			maxX: ({ points }) => {
-				return points[points.length - 1].x;
-			},
-
-			xScale: ({ padding, width, minX, maxX }) => {
-				return xScale
-					.domain([minX, maxX])
-					.range([padding.left, width - padding.right]);
-			},
-
-			yScale: ({ padding, height, yTicks }) => {
-				return yScale
-					.domain([Math.min.apply(null, yTicks), Math.max.apply(null, yTicks)])
-					.range([height - padding.bottom, padding.top]);
-			},
-
-			path: ({ points, xScale, yScale }) => {
-				return 'M' + points
-					.map(function (point, i) {
-						return xScale(point.x) + ',' + yScale(point.y);
-					})
-					.join('L');
-			},
-
-			area: ({ points, xScale, yScale, minX, maxX, path }) => {
-				return path + (
-					'L' + xScale(maxX) + ',' + yScale(0) +
-					'L' + xScale(minX) + ',' + yScale(0) +
-					'Z'
-				);
-			}
-		},
-
-		oncreate() {
-			this.resize();
-		},
-
-		methods: {
-			resize: function () {
-				const { width, height } = this.refs.svg.getBoundingClientRect();
-				this.set({ width, height });
-			}
-		}
-	};
-</script>

site/content/examples/modal-with-slot/App.html

@@ -1,6 +1,12 @@
+<script>
+	import Modal from './Modal.html';
+
+	export let showModal;
+</script>
+
 {#if showModal}
-	<Modal on:close='set({ showModal: false })'>
-		<h2 slot='header'>
+	<Modal on:close="{() => showModal = false}">
+		<h2 slot="header">
 			modal
 			<small><em>adjective</em>  mod·al \ˈmō-dəl\</small>
 		</h2>
@@ -14,20 +20,10 @@
 			<li>of or relating to a statistical mode</li>
 		</ol>
 
-		<a href='https://www.merriam-webster.com/dictionary/modal'>merriam-webster.com</a>
+		<a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
 	</Modal>
 {:else}
-	<button on:click='set({ showModal: true })'>
+	<button on:click="{() => showModal = true}">
 		show modal
 	</button>
 {/if}
-
-<script>
-	import Modal from './Modal.html';
-
-	export default {
-		components: {
-			Modal
-		}
-	};
-</script>

site/content/examples/modal-with-slot/Modal.html

@@ -1,4 +1,10 @@
-<div class='modal-background' on:click='fire("close")'></div>
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<div class='modal-background' on:click='{() => dispatch("close")}'></div>
 
 <div class='modal'>
 	<slot name='header'></slot>
@@ -6,7 +12,7 @@
 	<slot></slot>
 	<hr>
 
-	<button on:click='fire("close")'>close modal</button>
+	<button on:click='{() => dispatch("close")}'>close modal</button>
 </div>
 
 <style>

site/content/examples/nested-components/App.html

@@ -1,12 +1,6 @@
-<p>This is a top-level element.</p>
-<Nested/>
-
 <script>
 	import Nested from './Nested.html';
-
-	export default {
-		components: {
-			Nested
-		}
-	};
 </script>
+
+<p>This is a top-level element.</p>
+<Nested/>

site/content/examples/parallax/App.html

@@ -1,21 +1,21 @@
 <!-- this binds `sy` to the current value of `window.scrollY` -->
-<svelte:window bind:scrollY='sy'/>
+<svelte:window bind:scrollY={sy}/>
 
 <!-- try changing the values that `sy` is multiplied by -
      values closer to 0 appear further away -->
-<div class='parallax-container'>
-	<img style='transform: translate(0,{-sy * 0.2}px)' src='http://www.firewatchgame.com/images/parallax/parallax0.png'>
-	<img style='transform: translate(0,{-sy * 0.3}px)' src='http://www.firewatchgame.com/images/parallax/parallax1.png'>
-	<img style='transform: translate(0,{-sy * 0.4}px)' src='http://www.firewatchgame.com/images/parallax/parallax3.png'>
-	<img style='transform: translate(0,{-sy * 0.5}px)' src='http://www.firewatchgame.com/images/parallax/parallax5.png'>
-	<img style='transform: translate(0,{-sy * 0.6}px)' src='http://www.firewatchgame.com/images/parallax/parallax7.png'>
+<div class="parallax-container">
+	<img style="transform: translate(0,{-sy * 0.2}px)" src="http://www.firewatchgame.com/images/parallax/parallax0.png">
+	<img style="transform: translate(0,{-sy * 0.3}px)" src="http://www.firewatchgame.com/images/parallax/parallax1.png">
+	<img style="transform: translate(0,{-sy * 0.4}px)" src="http://www.firewatchgame.com/images/parallax/parallax3.png">
+	<img style="transform: translate(0,{-sy * 0.5}px)" src="http://www.firewatchgame.com/images/parallax/parallax5.png">
+	<img style="transform: translate(0,{-sy * 0.6}px)" src="http://www.firewatchgame.com/images/parallax/parallax7.png">
 </div>
 
-<div class='text'>
-	<small style='
+<div class="text">
+	<small style="
 		transform: translate(0,{-sy * 1.5}px);
 		opacity: {1 - Math.max( 0, sy / 80 )}
-	'>(scroll down)</small>
+	">(scroll down)</small>
 	<span>parallax has never been this easy</span>
 </div>
 

site/content/examples/scatterplot/App.html

@@ -1,10 +1,19 @@
-<div class='chart'>
+<script>
+	import Scatterplot from './Scatterplot.html';
+
+	export let a;
+	export let b;
+	export let c;
+	export let d;
+</script>
+
+<div class="chart">
 	<h2>Anscombe's quartet</h2>
 
-	<Scatterplot points='{a}'/>
-	<Scatterplot points='{b}'/>
-	<Scatterplot points='{c}'/>
-	<Scatterplot points='{d}'/>
+	<Scatterplot points={a}/>
+	<Scatterplot points={b}/>
+	<Scatterplot points={c}/>
+	<Scatterplot points={d}/>
 </div>
 
 <style>
@@ -17,13 +26,3 @@
 		margin: 0 auto;
 	}
 </style>
-
-<script>
-	import Scatterplot from './Scatterplot.html';
-
-	export default {
-		components: {
-			Scatterplot
-		}
-	};
-</script>

site/content/examples/scatterplot/Scatterplot.html

@@ -1,11 +1,62 @@
-<svelte:window on:resize='resize()'/>
+<script>
+	// TODO this example needs updating
+	import { onMount } from 'svelte';
+	import { scaleLinear } from 'd3-scale';
+
+	export let svg;
+
+	const xScale = scaleLinear();
+	const yScale = scaleLinear();
+
+	export let width = 500;
+	export let height = 200;
+	export let padding = { top: 20, right: 40, bottom: 40, left: 25 };
+	export let points;
+	export let xTicks = [0, 4, 8, 12, 16, 20];
+	export let yTicks = [0, 2, 4, 6, 8, 10, 12];
+
+	function xTicks() {
+		return width > 180 ?
+			[0, 4, 8, 12, 16, 20] :
+			[0, 10, 20];
+	}
+
+	function yTicks() {
+		return height > 180 ?
+			[0, 2, 4, 6, 8, 10, 12] :
+			[0, 4, 8, 12];
+	}
+
+	function xScale() {
+		return xScale()
+			.domain([0, 20])
+			.range([padding.left, width - padding.right]);
+	}
+
+	function yScale() {
+		return yScale()
+			.domain([0, 12])
+			.range([height - padding.bottom, padding.top]);
+	}
+
+	onMount(() => {
+		resize();
+	});
+
+	function resize() {
+		const { width, height } = svg.getBoundingClientRect();
+		width = width, height = height;
+	}
+</script>
+
+<svelte:window on:resize='{resize}'/>
 
 <svg ref:svg>
 	<!-- y axis -->
 	<g class='axis y-axis'>
 		{#each yTicks as tick}
-			<g class='tick tick-{tick}' transform='translate(0, {yScale(tick)})'>
-				<line x1='{padding.left}' x2='{xScale(22)}'/>
+			<g class='tick tick-{tick}' transform='translate(0, {yScale()(tick)})'>
+				<line x1='{padding.left}' x2='{xScale()(22)}'/>
 				<text x='{padding.left - 8}' y='+4'>{tick}</text>
 			</g>
 		{/each}
@@ -14,8 +65,8 @@
 	<!-- x axis -->
 	<g class='axis x-axis'>
 		{#each xTicks as tick}
-			<g class='tick' transform='translate({xScale(tick)},0)'>
-				<line y1='{yScale(0)}' y2='{yScale(13)}'/>
+			<g class='tick' transform='translate({xScale()(tick)},0)'>
+				<line y1='{yScale()(0)}' y2='{yScale()(13)}'/>
 				<text y='{height - padding.bottom + 16}'>{tick}</text>
 			</g>
 		{/each}
@@ -23,7 +74,7 @@
 
 	<!-- data -->
 	{#each points as point}
-		<circle cx='{xScale(point.x)}' cy='{yScale(point.y)}' r='5'/>
+		<circle cx='{xScale()(point.x)}' cy='{yScale()(point.y)}' r='5'/>
 	{/each}
 </svg>
 
@@ -58,59 +109,3 @@
 		text-anchor: end;
 	}
 </style>
-
-<script>
-	import { scaleLinear } from 'd3-scale';
-
-	const xScale = scaleLinear();
-	const yScale = scaleLinear();
-
-	export default {
-		data() {
-			return {
-				padding: { top: 20, right: 40, bottom: 40, left: 25 },
-				height: 200,
-				width: 500,
-				xTicks: [0, 4, 8, 12, 16, 20],
-				yTicks: [0, 2, 4, 6, 8, 10, 12]
-			};
-		},
-
-		computed: {
-			xTicks: ({ width }) => {
-				return width > 180 ?
-					[0, 4, 8, 12, 16, 20] :
-					[0, 10, 20];
-			},
-
-			yTicks: ({ height }) => {
-				return height > 180 ?
-					[0, 2, 4, 6, 8, 10, 12] :
-					[0, 4, 8, 12];
-			},
-
-			xScale: ({ padding, width }) => {
-				return xScale
-					.domain([0, 20])
-					.range([padding.left, width - padding.right]);
-			},
-
-			yScale: ({ padding, height }) => {
-				return yScale
-					.domain([0, 12])
-					.range([height - padding.bottom, padding.top]);
-			}
-		},
-
-		oncreate() {
-			this.resize();
-		},
-
-		methods: {
-			resize() {
-				const { width, height } = this.refs.svg.getBoundingClientRect();
-				this.set({ width, height });
-			}
-		}
-	};
-</script>

site/content/examples/scoped-styles/App.html

@@ -1,4 +1,4 @@
-<div class='foo'>
+<div class="foo">
 	Big red Comic Sans
 </div>
 

site/content/examples/self-references/App.html

@@ -2,7 +2,7 @@
 	<li>{node.name}
 		{#if node.children}
 			{#each node.children as child}
-				<svelte:self node='{child}'/>
+				<svelte:self node={child}/>
 			{/each}
 		{/if}
 	</li>

site/content/examples/svg-clock/App.html

@@ -1,3 +1,28 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let time = new Date();
+	let hours, minutes, seconds;
+
+	$: {
+		// this block runs reactively, whenever
+		// `time` changes
+		hours = time.getHours();
+		minutes = time.getMinutes();
+		seconds = time.getSeconds();
+	}
+
+	onMount(() => {
+		const interval = setInterval(() => {
+			time = new Date();
+		}, 1000);
+
+		return () => {
+			clearInterval(interval);
+		};
+	});
+</script>
+
 <svg viewBox='-50 -50 100 100'>
 	<circle class='clock-face' r='48'/>
 
@@ -73,29 +98,3 @@
 		stroke-width: 3;
 	}
 </style>
-
-<script>
-	export default {
-		data() {
-			return {
-				time: new Date()
-			};
-		},
-
-		computed: {
-			hours: ({ time }) => time.getHours(),
-			minutes: ({ time }) => time.getMinutes(),
-			seconds: ({ time }) => time.getSeconds()
-		},
-
-		oncreate() {
-			this.interval = setInterval(() => {
-				this.set({ time: new Date() });
-			}, 1000);
-		},
-
-		ondestroy() {
-			clearInterval(this.interval);
-		}
-	};
-</script>

site/content/examples/transitions-custom/App.html

@@ -1,33 +1,10 @@
-<input type='checkbox' bind:checked=visible> visible
-
-{#if visible}
-	<div class='centered' in:wheee='{duration: 8000}' out:fade>
-		<span>wheeee!!!!!</span>
-	</div>
-{/if}
-
-<style>
-	.centered {
-		position: absolute;
-		left: 50%;
-		top: 50%;
-		transform: translate(-50%,-50%);
-	}
-
-	span {
-		position: absolute;
-		transform: translate(-50%,-50%);
-		font-size: 4em;
-	}
-</style>
-
 <script>
 	import * as eases from 'eases-jsnext';
 	import { fade } from 'svelte-transitions';
 
-	export default {
-		transitions: {
-			wheee: (node, params) => {
+	export let visible;
+
+	const wheee = (node, params) => {
 		return {
 			duration: params.duration,
 			css: t => {
@@ -42,9 +19,28 @@
 					);`
 			}
 		};
-			},
-
-			fade
-		}
 	};
 </script>
+
+<input type=checkbox bind:checked={visible}> visible
+
+{#if visible}
+	<div class="centered" in:wheee="{{duration: 8000}}" out:fade>
+		<span>wheeee!!!!!</span>
+	</div>
+{/if}
+
+<style>
+	.centered {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%,-50%);
+	}
+
+	span {
+		position: absolute;
+		transform: translate(-50%,-50%);
+		font-size: 4em;
+	}
+</style>

site/content/examples/transitions-fade/App.html

@@ -1,13 +1,11 @@
-<input type='checkbox' bind:checked=visible> visible
-
-{#if visible}
-	<p transition:fade>fades in and out</p>
-{/if}
-
 <script>
 	import { fade } from 'svelte-transitions';
 
-	export default {
-		transitions: { fade }
-	};
+	export let visible;
 </script>
+
+<input type=checkbox bind:checked={visible}> visible
+
+{#if visible}
+	<p transition:fade>fades in and out</p>
+{/if}

site/content/examples/transitions-fly/App.html

@@ -1,13 +1,11 @@
-<input type='checkbox' bind:checked=visible> visible
-
-{#if visible}
-	<p transition:fly='{y: 200, duration: 1000}'>flies 200 pixels up, slowly</p>
-{/if}
-
 <script>
 	import { fly } from 'svelte-transitions';
 
-	export default {
-		transitions: { fly }
-	};
+	export let visible;
 </script>
+
+<input type=checkbox bind:checked={visible}> visible
+
+{#if visible}
+	<p transition:fly="{{y: 200, duration: 1000}}">flies 200 pixels up, slowly</p>
+{/if}

site/content/examples/transitions-in-out/App.html

@@ -1,13 +1,11 @@
-<input type='checkbox' bind:checked=visible> visible
-
-{#if visible}
-	<p in:fly='{y: 50}' out:fade>flies up, fades out</p>
-{/if}
-
 <script>
 	import { fade, fly } from 'svelte-transitions';
 
-	export default {
-		transitions: { fade, fly }
-	};
+	export let visible;
 </script>
+
+<input type=checkbox bind:checked={visible}> visible
+
+{#if visible}
+	<p in:fly="{{y: 50}}" out:fade>flies up, fades out</p>
+{/if}