chore(site-2): Run prettier

documentation/content/docs/02-template-syntax/07-special-elements.md

@@ -266,10 +266,7 @@ Similarly to `<svelte:window>`, this element allows you to add listeners to even
 As with `<svelte:window>`, this element may only appear the top level of your component and must never be inside a block or element.
 
 ```svelte
-<svelte:document
+<svelte:document on:visibilitychange={handleVisibilityChange} use:someAction />
-	on:visibilitychange={handleVisibilityChange}
-	use:someAction
-/>
 ```
 
 You can also bind to the following properties:

documentation/content/docs/04-compiler-and-api/04-custom-elements-api.md

@@ -58,11 +58,11 @@ When constructing a custom element, you can tailor several aspects by defining `
 ```svelte
 <svelte:options
 	customElement={{
-		tag: "custom-element",
+		tag: 'custom-element',
-		shadow: "none",
+		shadow: 'none',
 		props: {
-			name: { reflect: true, type: "Number", attribute: "element-index" },
+			name: { reflect: true, type: 'Number', attribute: 'element-index' }
-		},
+		}
 	}}
 />
 
@@ -75,7 +75,7 @@ When constructing a custom element, you can tailor several aspects by defining `
 
 Custom elements can be a useful way to package components for consumption in a non-Svelte app, as they will work with vanilla HTML and JavaScript as well as [most frameworks](https://custom-elements-everywhere.com/). There are, however, some important differences to be aware of:
 
-- Styles are *encapsulated*, rather than merely *scoped* (unless you set `shadow: "none"`). This means that any non-component styles (such as you might have in a `global.css` file) will not apply to the custom element, including styles with the `:global(...)` modifier
+- Styles are _encapsulated_, rather than merely _scoped_ (unless you set `shadow: "none"`). This means that any non-component styles (such as you might have in a `global.css` file) will not apply to the custom element, including styles with the `:global(...)` modifier
 - Instead of being extracted out as a separate .css file, styles are inlined into the component as a JavaScript string
 - Custom elements are not generally suitable for server-side rendering, as the shadow DOM is invisible until JavaScript loads
 - In Svelte, slotted content renders _lazily_. In the DOM, it renders _eagerly_. In other words, it will always be created even if the component's `<slot>` element is inside an `{#if ...}` block. Similarly, including a `<slot>` in an `{#each ...}` block will not cause the slotted content to be rendered multiple times

documentation/content/examples/00-introduction/01-dynamic-attributes/App.svelte

@@ -4,4 +4,4 @@
 </script>
 
 <!-- {src} is short for src={src} -->
-<img {src} alt="{name} dancing">
+<img {src} alt="{name} dancing" />

documentation/content/examples/01-reactivity/00-reactive-assignments/App.svelte

@@ -7,5 +7,6 @@
 </script>
 
 <button on:click={handleClick}>
-	Clicked {count} {count === 1 ? 'time' : 'times'}
+	Clicked {count}
+	{count === 1 ? 'time' : 'times'}
 </button>

documentation/content/examples/01-reactivity/02-reactive-statements/App.svelte

@@ -12,5 +12,6 @@
 </script>
 
 <button on:click={handleClick}>
-	Clicked {count} {count === 1 ? 'time' : 'times'}
+	Clicked {count}
+	{count === 1 ? 'time' : 'times'}
 </button>

documentation/content/examples/02-props/02-spread-props/Info.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <p>
-	The <code>{name}</code> package is {speed} fast.
+	The <code>{name}</code> package is {speed} fast. Download version {version} from
-	Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
+	<a href="https://www.npmjs.com/package/{name}">npm</a>
 	and <a href={website}>learn more here</a>
 </p>

documentation/content/examples/03-logic/00-if-blocks/App.svelte

@@ -7,13 +7,9 @@
 </script>
 
 {#if user.loggedIn}
-	<button on:click={toggle}>
+	<button on:click={toggle}> Log out </button>
-		Log out
-	</button>
 {/if}
 
 {#if !user.loggedIn}
-	<button on:click={toggle}>
+	<button on:click={toggle}> Log in </button>
-		Log in
-	</button>
 {/if}

documentation/content/examples/03-logic/01-else-blocks/App.svelte

@@ -7,11 +7,7 @@
 </script>
 
 {#if user.loggedIn}
-	<button on:click={toggle}>
+	<button on:click={toggle}> Log out </button>
-		Log out
-	</button>
 {:else}
-	<button on:click={toggle}>
+	<button on:click={toggle}> Log in </button>
-		Log in
-	</button>
 {/if}

documentation/content/examples/03-logic/04-keyed-each-blocks/App.svelte

@@ -14,9 +14,7 @@
 	}
 </script>
 
-<button on:click={handleClick}>
+<button on:click={handleClick}> Remove first thing </button>
-	Remove first thing
-</button>
 
 <div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em">
 	<div>

documentation/content/examples/03-logic/05-await-blocks/App.svelte

@@ -17,9 +17,7 @@
 	}
 </script>
 
-<button on:click={handleClick}>
+<button on:click={handleClick}> generate random number </button>
-	generate random number
-</button>
 
 {#await promise}
 	<p>...waiting</p>

documentation/content/examples/04-events/00-dom-events/App.svelte

@@ -12,5 +12,8 @@
 </div>
 
 <style>
-	div { width: 100%; height: 100%; }
+	div {
+		width: 100%;
+		height: 100%;
+	}
 </style>

documentation/content/examples/04-events/01-inline-handlers/App.svelte

@@ -2,10 +2,13 @@
 	let m = { x: 0, y: 0 };
 </script>
 
-<div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
+<div on:mousemove={(e) => (m = { x: e.clientX, y: e.clientY })}>
 	The mouse position is {m.x} x {m.y}
 </div>
 
 <style>
-	div { width: 100%; height: 100%; }
+	div {
+		width: 100%;
+		height: 100%;
+	}
 </style>

documentation/content/examples/04-events/02-event-modifiers/App.svelte

@@ -1,9 +1,7 @@
 <script>
 	function handleClick() {
-		alert('no more alerts')
+		alert('no more alerts');
 	}
 </script>
 
-<button on:click|once={handleClick}>
+<button on:click|once={handleClick}> Click me </button>
-	Click me
-</button>

documentation/content/examples/04-events/03-component-events/Inner.svelte

@@ -10,6 +10,4 @@
 	}
 </script>
 
-<button on:click={sayHello}>
+<button on:click={sayHello}> Click to say hello </button>
-	Click to say hello
-</button>

documentation/content/examples/04-events/04-event-forwarding/Inner.svelte

@@ -10,6 +10,4 @@
 	}
 </script>
 
-<button on:click={sayHello}>
+<button on:click={sayHello}> Click to say hello </button>
-	Click to say hello
-</button>

documentation/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte

@@ -1,6 +1,4 @@
-<button on:click>
+<button on:click> Click me </button>
-	Click me
-</button>
 
 <style>
 	button {

documentation/content/examples/05-bindings/00-text-inputs/App.svelte

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

documentation/content/examples/05-bindings/01-numeric-inputs/App.svelte

@@ -4,13 +4,13 @@
 </script>
 
 <label>
-	<input type=number bind:value={a} min=0 max=10>
+	<input type="number" bind:value={a} min="0" max="10" />
-	<input type=range bind:value={a} min=0 max=10>
+	<input type="range" bind:value={a} min="0" max="10" />
 </label>
 
 <label>
-	<input type=number bind:value={b} min=0 max=10>
+	<input type="number" bind:value={b} min="0" max="10" />
-	<input type=range bind:value={b} min=0 max=10>
+	<input type="range" bind:value={b} min="0" max="10" />
 </label>
 
 <p>{a} + {b} = {a + b}</p>

documentation/content/examples/05-bindings/02-checkbox-inputs/App.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type=checkbox bind:checked={yes}>
+	<input type="checkbox" bind:checked={yes} />
 	Yes! Send me regular email spam
 </label>
 
@@ -13,6 +13,4 @@
 	<p>You must opt-in to continue. If you're not paying, you're the product.</p>
 {/if}
 
-<button disabled={!yes}>
+<button disabled={!yes}> Subscribe </button>
-	Subscribe
-</button>

documentation/content/examples/05-bindings/03-group-inputs/App.svelte

@@ -2,11 +2,7 @@
 	let scoops = 1;
 	let flavours = ['Mint choc chip'];
 
-	let menu = [
+	let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
-		'Cookies and cream',
-		'Mint choc chip',
-		'Raspberry ripple'
-	];
 
 	function join(flavours) {
 		if (flavours.length === 1) return flavours[0];
@@ -17,17 +13,17 @@
 <h2>Size</h2>
 
 <label>
-	<input type=radio bind:group={scoops} value={1}>
+	<input type="radio" bind:group={scoops} value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type=radio bind:group={scoops} value={2}>
+	<input type="radio" bind:group={scoops} value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type=radio bind:group={scoops} value={3}>
+	<input type="radio" bind:group={scoops} value={3} />
 	Three scoops
 </label>
 
@@ -35,7 +31,7 @@
 
 {#each menu as flavour}
 	<label>
-		<input type=checkbox bind:group={flavours} value={flavour}>
+		<input type="checkbox" bind:group={flavours} value={flavour} />
 		{flavour}
 	</label>
 {/each}
@@ -46,7 +42,8 @@
 	<p>Can't order more flavours than scoops!</p>
 {:else}
 	<p>
-		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
+		You ordered {scoops}
+		{scoops === 1 ? 'scoop' : 'scoops'}
 		of {join(flavours)}
 	</p>
 {/if}

documentation/content/examples/05-bindings/04-textarea-inputs/App.svelte

@@ -3,10 +3,13 @@
 	let text = `Some words are *italic*, some are **bold**`;
 </script>
 
-<textarea bind:value={text}></textarea>
+<textarea bind:value={text} />
 
 {@html marked(text)}
 
 <style>
-	textarea { width: 100%; height: 200px; }
+	textarea {
+		width: 100%;
+		height: 200px;
+	}
 </style>

documentation/content/examples/05-bindings/05-file-inputs/App.svelte

@@ -13,21 +13,10 @@
 </script>
 
 <label for="avatar">Upload a picture:</label>
-<input
+<input accept="image/png, image/jpeg" bind:files id="avatar" name="avatar" type="file" />
-	accept="image/png, image/jpeg"
-	bind:files
-	id="avatar"
-	name="avatar"
-	type="file"
-/>
 
 <label for="many">Upload multiple files of any type:</label>
-<input
+<input bind:files id="many" multiple type="file" />
-	bind:files
-	id="many"
-	multiple
-	type="file"
-/>
 
 {#if files}
 	<h2>Selected files:</h2>

documentation/content/examples/05-bindings/06-select-bindings/App.svelte

@@ -17,7 +17,7 @@
 <h2>Insecurity questions</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
-	<select bind:value={selected} on:change="{() => answer = ''}">
+	<select bind:value={selected} on:change={() => (answer = '')}>
 		{#each questions as question}
 			<option value={question}>
 				{question.text}
@@ -25,15 +25,17 @@
 		{/each}
 	</select>
 
-	<input bind:value={answer}>
+	<input bind:value={answer} />
 
-	<button disabled={!answer} type=submit>
+	<button disabled={!answer} type="submit"> Submit </button>
-		Submit
-	</button>
 </form>
 
 <p>selected question {selected ? selected.id : '[waiting...]'}</p>
 
 <style>
-	input { display: block; width: 500px; max-width: 100%; }
+	input {
+		display: block;
+		width: 500px;
+		max-width: 100%;
+	}
 </style>

documentation/content/examples/05-bindings/07-multiple-select-bindings/App.svelte

@@ -2,11 +2,7 @@
 	let scoops = 1;
 	let flavours = ['Mint choc chip'];
 
-	let menu = [
+	let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
-		'Cookies and cream',
-		'Mint choc chip',
-		'Raspberry ripple'
-	];
 
 	function join(flavours) {
 		if (flavours.length === 1) return flavours[0];
@@ -17,17 +13,17 @@
 <h2>Size</h2>
 
 <label>
-	<input type=radio bind:group={scoops} value={1}>
+	<input type="radio" bind:group={scoops} value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type=radio bind:group={scoops} value={2}>
+	<input type="radio" bind:group={scoops} value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type=radio bind:group={scoops} value={3}>
+	<input type="radio" bind:group={scoops} value={3} />
 	Three scoops
 </label>
 
@@ -47,7 +43,8 @@
 	<p>Can't order more flavours than scoops!</p>
 {:else}
 	<p>
-		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
+		You ordered {scoops}
+		{scoops === 1 ? 'scoop' : 'scoops'}
 		of {join(flavours)}
 	</p>
 {/if}

documentation/content/examples/05-bindings/08-each-block-bindings/App.svelte

@@ -10,35 +10,24 @@
 	}
 
 	function clear() {
-		todos = todos.filter(t => !t.done);
+		todos = todos.filter((t) => !t.done);
 	}
 
-	$: remaining = todos.filter(t => !t.done).length;
+	$: remaining = todos.filter((t) => !t.done).length;
 </script>
 
 <h1>Todos</h1>
 
 {#each todos as todo}
 	<div>
-		<input
+		<input type="checkbox" bind:checked={todo.done} />
-			type=checkbox
+
-			bind:checked={todo.done}
+		<input placeholder="What needs to be done?" bind:value={todo.text} disabled={todo.done} />
-		>
-
-		<input
-			placeholder="What needs to be done?"
-			bind:value={todo.text}
-			disabled={todo.done}
-		>
 	</div>
 {/each}
 
 <p>{remaining} remaining</p>
 
-<button on:click={add}>
+<button on:click={add}> Add new </button>
-	Add new
-</button>
 
-<button on:click={clear}>
+<button on:click={clear}> Clear completed </button>
-	Clear completed
-</button>

documentation/content/examples/05-bindings/09-media-elements/App.svelte

@@ -14,7 +14,7 @@
 		// Make the controls visible, but fade out after
 		// 2.5 seconds of inactivity
 		clearTimeout(showControlsTimeout);
-		showControlsTimeout = setTimeout(() => showControls = false, 2500);
+		showControlsTimeout = setTimeout(() => (showControls = false), 2500);
 		showControls = true;
 
 		if (!duration) return; // video not loaded yet
@@ -22,7 +22,7 @@
 
 		const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
 		const { left, right } = this.getBoundingClientRect();
-		time = duration * (clientX - left) / (right - left);
+		time = (duration * (clientX - left)) / (right - left);
 	}
 
 	// we can't rely on the built-in click event, because it fires
@@ -62,12 +62,13 @@
 		on:mouseup={handleMouseup}
 		bind:currentTime={time}
 		bind:duration
-		bind:paused>
+		bind:paused
+	>
 		<track kind="captions" />
 	</video>
 
 	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
-		<progress value="{(time / duration) || 0}"/>
+		<progress value={time / duration || 0} />
 
 		<div class="info">
 			<span class="time">{format(time)}</span>
@@ -107,7 +108,9 @@
 		width: 3em;
 	}
 
-	.time:last-child { text-align: right }
+	.time:last-child {
+		text-align: right;
+	}
 
 	progress {
 		display: block;

documentation/content/examples/05-bindings/10-dimensions/App.svelte

@@ -5,8 +5,8 @@
 	let text = 'edit me';
 </script>
 
-<input type=range bind:value={size}>
+<input type="range" bind:value={size} />
-<input bind:value={text}>
+<input bind:value={text} />
 
 <p>size: {w}px x {h}px</p>
 
@@ -15,6 +15,10 @@
 </div>
 
 <style>
-	input { display: block; }
+	input {
-	div { display: inline-block; }
+		display: block;
+	}
+	div {
+		display: inline-block;
+	}
 </style>

documentation/content/examples/05-bindings/11-bind-this/App.svelte

@@ -15,12 +15,12 @@
 			for (let p = 0; p < imageData.data.length; p += 4) {
 				const i = p / 4;
 				const x = i % canvas.width;
-				const y = i / canvas.height >>> 0;
+				const y = (i / canvas.height) >>> 0;
 
 				const t = window.performance.now();
 
-				const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000));
+				const r = 64 + (128 * x) / canvas.width + 64 * Math.sin(t / 1000);
-				const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1400));
+				const g = 64 + (128 * y) / canvas.height + 64 * Math.cos(t / 1400);
 				const b = 128;
 
 				imageData.data[p + 0] = r;
@@ -30,7 +30,7 @@
 			}
 
 			ctx.putImageData(imageData, 0, 0);
-		}());
+		})();
 
 		return () => {
 			cancelAnimationFrame(frame);
@@ -38,11 +38,7 @@
 	});
 </script>
 
-<canvas
+<canvas bind:this={canvas} width={32} height={32} />
-	bind:this={canvas}
-	width={32}
-	height={32}
-></canvas>
 
 <style>
 	canvas {

documentation/content/examples/05-bindings/12-component-bindings/Keypad.svelte

@@ -5,8 +5,8 @@
 
 	const dispatch = createEventDispatcher();
 
-	const select = num => () => value += num;
+	const select = (num) => () => (value += num);
-	const clear  = () => value = '';
+	const clear = () => (value = '');
 	const submit = () => dispatch('submit');
 </script>
 
@@ -31,10 +31,10 @@
 		display: grid;
 		grid-template-columns: repeat(3, 5em);
 		grid-template-rows: repeat(4, 3em);
-		grid-gap: 0.5em
+		grid-gap: 0.5em;
 	}
 
 	button {
-		margin: 0
+		margin: 0;
 	}
 </style>

documentation/content/examples/06-lifecycle/00-onmount/App.svelte

@@ -14,7 +14,7 @@
 <div class="photos">
 	{#each photos as photo}
 		<figure>
-			<img src={photo.thumbnailUrl} alt={photo.title}>
+			<img src={photo.thumbnailUrl} alt={photo.title} />
 			<figcaption>{photo.title}</figcaption>
 		</figure>
 	{:else}
@@ -31,7 +31,8 @@
 		grid-gap: 8px;
 	}
 
-	figure, img {
+	figure,
+	img {
 		width: 100%;
 		margin: 0;
 	}

documentation/content/examples/06-lifecycle/01-ondestroy/App.svelte

@@ -2,10 +2,11 @@
 	import { onInterval } from './utils.js';
 
 	let seconds = 0;
-	onInterval(() => seconds += 1, 1000);
+	onInterval(() => (seconds += 1), 1000);
 </script>
 
 <p>
 	The page has been open for
-	{seconds} {seconds === 1 ? 'second' : 'seconds'}
+	{seconds}
+	{seconds === 1 ? 'second' : 'seconds'}
 </p>

documentation/content/examples/06-lifecycle/02-update/App.svelte

@@ -6,7 +6,7 @@
 	let autoscroll;
 
 	beforeUpdate(() => {
-		autoscroll = div && (div.offsetHeight + div.scrollTop) > (div.scrollHeight - 20);
+		autoscroll = div && div.offsetHeight + div.scrollTop > div.scrollHeight - 20;
 	});
 
 	afterUpdate(() => {
@@ -15,9 +15,7 @@
 
 	const eliza = new Eliza();
 
-	let comments = [
+	let comments = [{ author: 'eliza', text: eliza.getInitial() }];
-		{ author: 'eliza', text: eliza.getInitial() }
-	];
 
 	function handleKeydown(event) {
 		if (event.key === 'Enter') {
@@ -41,7 +39,9 @@
 				});
 
 				setTimeout(() => {
-					comments = comments.filter(comment => !comment.placeholder).concat({
+					comments = comments
+						.filter((comment) => !comment.placeholder)
+						.concat({
 							author: 'eliza',
 							text: reply
 						});
@@ -62,7 +62,7 @@
 		{/each}
 	</div>
 
-	<input on:keydown={handleKeydown}>
+	<input on:keydown={handleKeydown} />
 </div>
 
 <style>
@@ -99,7 +99,7 @@
 	}
 
 	.user span {
-		background-color: #0074D9;
+		background-color: #0074d9;
 		color: white;
 		border-radius: 1em 1em 0 1em;
 	}

documentation/content/examples/06-lifecycle/03-tick/App.svelte

@@ -11,15 +11,9 @@
 		const { selectionStart, selectionEnd, value } = this;
 		const selection = value.slice(selectionStart, selectionEnd);
 
-		const replacement = /[a-z]/.test(selection)
+		const replacement = /[a-z]/.test(selection) ? selection.toUpperCase() : selection.toLowerCase();
-			? selection.toUpperCase()
-			: selection.toLowerCase();
 
-		text = (
+		text = value.slice(0, selectionStart) + replacement + value.slice(selectionEnd);
-			value.slice(0, selectionStart) +
-			replacement +
-			value.slice(selectionEnd)
-		);
 
 		await tick();
 		this.selectionStart = selectionStart;
@@ -27,7 +21,7 @@
 	}
 </script>
 
-<textarea value={text} on:keydown={handleKeydown}></textarea>
+<textarea value={text} on:keydown={handleKeydown} />
 
 <style>
 	textarea {

documentation/content/examples/07-stores/00-writable-stores/App.svelte

@@ -6,7 +6,7 @@
 
 	let countValue;
 
-	const unsubscribe = count.subscribe(value => {
+	const unsubscribe = count.subscribe((value) => {
 		countValue = value;
 	});
 </script>

documentation/content/examples/07-stores/00-writable-stores/Decrementer.svelte

@@ -2,10 +2,8 @@
 	import { count } from './stores.js';
 
 	function decrement() {
-		count.update(n => n - 1);
+		count.update((n) => n - 1);
 	}
 </script>
 
-<button on:click={decrement}>
+<button on:click={decrement}> - </button>
-	-
-</button>

documentation/content/examples/07-stores/00-writable-stores/Incrementer.svelte

@@ -2,10 +2,8 @@
 	import { count } from './stores.js';
 
 	function increment() {
-		count.update(n => n + 1);
+		count.update((n) => n + 1);
 	}
 </script>
 
-<button on:click={increment}>
+<button on:click={increment}> + </button>
-	+
-</button>

documentation/content/examples/07-stores/00-writable-stores/Resetter.svelte

@@ -6,6 +6,4 @@
 	}
 </script>
 
-<button on:click={reset}>
+<button on:click={reset}> reset </button>
-	reset
-</button>

documentation/content/examples/07-stores/01-auto-subscriptions/Decrementer.svelte

@@ -2,10 +2,8 @@
 	import { count } from './stores.js';
 
 	function decrement() {
-		count.update(n => n - 1);
+		count.update((n) => n - 1);
 	}
 </script>
 
-<button on:click={decrement}>
+<button on:click={decrement}> - </button>
-	-
-</button>

documentation/content/examples/07-stores/01-auto-subscriptions/Incrementer.svelte

@@ -2,10 +2,8 @@
 	import { count } from './stores.js';
 
 	function increment() {
-		count.update(n => n + 1);
+		count.update((n) => n + 1);
 	}
 </script>
 
-<button on:click={increment}>
+<button on:click={increment}> + </button>
-	+
-</button>

documentation/content/examples/07-stores/01-auto-subscriptions/Resetter.svelte

@@ -6,6 +6,4 @@
 	}
 </script>
 
-<button on:click={reset}>
+<button on:click={reset}> reset </button>
-	reset
-</button>

documentation/content/examples/07-stores/03-derived-stores/App.svelte

@@ -13,5 +13,6 @@
 
 <p>
 	This page has been open for
-	{$elapsed} {$elapsed === 1 ? 'second' : 'seconds'}
+	{$elapsed}
+	{$elapsed === 1 ? 'second' : 'seconds'}
 </p>

documentation/content/examples/08-motion/00-tweened/App.svelte

@@ -8,27 +8,17 @@
 	});
 </script>
 
-<progress value={$progress}></progress>
+<progress value={$progress} />
 
-<button on:click="{() => progress.set(0)}">
+<button on:click={() => progress.set(0)}> 0% </button>
-	0%
-</button>
 
-<button on:click="{() => progress.set(0.25)}">
+<button on:click={() => progress.set(0.25)}> 25% </button>
-	25%
-</button>
 
-<button on:click="{() => progress.set(0.5)}">
+<button on:click={() => progress.set(0.5)}> 50% </button>
-	50%
-</button>
 
-<button on:click="{() => progress.set(0.75)}">
+<button on:click={() => progress.set(0.75)}> 75% </button>
-	75%
-</button>
 
-<button on:click="{() => progress.set(1)}">
+<button on:click={() => progress.set(1)}> 100% </button>
-	100%
-</button>
 
 <style>
 	progress {

documentation/content/examples/08-motion/01-spring/App.svelte

@@ -1,10 +1,13 @@
 <script>
 	import { spring } from 'svelte/motion';
 
-	let coords = spring({ x: 50, y: 50 }, {
+	let coords = spring(
+		{ x: 50, y: 50 },
+		{
 			stiffness: 0.1,
 			damping: 0.25
-	});
+		}
+	);
 
 	let size = spring(10);
 </script>
@@ -12,24 +15,30 @@
 <div style="position: absolute; right: 1em;">
 	<label>
 		<h3>stiffness ({coords.stiffness})</h3>
-		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01">
+		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01" />
 	</label>
 
 	<label>
 		<h3>damping ({coords.damping})</h3>
-		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01">
+		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
 	</label>
 </div>
 
 <svg
-	on:mousemove="{e => coords.set({ x: e.clientX, y: e.clientY })}"
+	on:mousemove={(e) => coords.set({ x: e.clientX, y: e.clientY })}
-	on:mousedown="{() => size.set(30)}"
+	on:mousedown={() => size.set(30)}
-	on:mouseup="{() => size.set(10)}"
+	on:mouseup={() => size.set(10)}
 >
 	<circle cx={$coords.x} cy={$coords.y} r={$size} />
 </svg>
 
 <style>
-	svg { width: 100%; height: 100%; margin: -8px }
+	svg {
-	circle { fill: #ff3e00 }
+		width: 100%;
+		height: 100%;
+		margin: -8px;
+	}
+	circle {
+		fill: #ff3e00;
+	}
 </style>

documentation/content/examples/09-transitions/00-transition/App.svelte

@@ -4,12 +4,10 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible}>
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
 {#if visible}
-	<p transition:fade>
+	<p transition:fade>Fades in and out</p>
-		Fades in and out
-	</p>
 {/if}

documentation/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte

@@ -4,12 +4,10 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible}>
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
 {#if visible}
-	<p transition:fly="{{ y: 200, duration: 2000 }}">
+	<p transition:fly={{ y: 200, duration: 2000 }}>Flies in and out</p>
-		Flies in and out
-	</p>
 {/if}

documentation/content/examples/09-transitions/02-in-and-out/App.svelte

@@ -4,12 +4,10 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible}>
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
 {#if visible}
-	<p in:fly="{{ y: 200, duration: 2000 }}" out:fade>
+	<p in:fly={{ y: 200, duration: 2000 }} out:fade>Flies in, fades out</p>
-		Flies in, fades out
-	</p>
 {/if}

documentation/content/examples/09-transitions/03-custom-css-transitions/App.svelte

@@ -7,7 +7,7 @@
 	function spin(node, { duration }) {
 		return {
 			duration,
-			css: t => {
+			css: (t) => {
 				const eased = elasticOut(t);
 
 				return `
@@ -16,19 +16,19 @@
 						${~~(t * 360)},
 						${Math.min(100, 1000 - 1000 * t)}%,
 						${Math.min(50, 500 - 500 * t)}%
-					);`
+					);`;
 			}
 		};
 	}
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible}>
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
 {#if visible}
-	<div class="centered" in:spin="{{duration: 8000}}" out:fade>
+	<div class="centered" in:spin={{ duration: 8000 }} out:fade>
 		<span>transitions!</span>
 	</div>
 {/if}

documentation/content/examples/09-transitions/04-custom-js-transitions/App.svelte

@@ -2,10 +2,7 @@
 	let visible = false;
 
 	function typewriter(node, { speed = 1 }) {
-		const valid = (
+		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
-			node.childNodes.length === 1 &&
-			node.childNodes[0].nodeType === Node.TEXT_NODE
-		);
 
 		if (!valid) {
 			throw new Error(`This transition only works on elements with a single text node child`);
@@ -16,7 +13,7 @@
 
 		return {
 			duration,
-			tick: t => {
+			tick: (t) => {
 				const i = ~~(text.length * t);
 				node.textContent = text.slice(0, i);
 			}
@@ -25,12 +22,10 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible}>
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
 {#if visible}
-	<p transition:typewriter>
+	<p transition:typewriter>The quick brown fox jumps over the lazy dog</p>
-		The quick brown fox jumps over the lazy dog
-	</p>
 {/if}

documentation/content/examples/09-transitions/05-transition-events/App.svelte

@@ -8,17 +8,17 @@
 <p>status: {status}</p>
 
 <label>
-	<input type="checkbox" bind:checked={visible}>
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
 {#if visible}
 	<p
-		transition:fly="{{ y: 200, duration: 2000 }}"
+		transition:fly={{ y: 200, duration: 2000 }}
-		on:introstart="{() => status = 'intro started'}"
+		on:introstart={() => (status = 'intro started')}
-		on:outrostart="{() => status = 'outro started'}"
+		on:outrostart={() => (status = 'outro started')}
-		on:introend="{() => status = 'intro ended'}"
+		on:introend={() => (status = 'intro ended')}
-		on:outroend="{() => status = 'outro ended'}"
+		on:outroend={() => (status = 'outro ended')}
 	>
 		Flies in and out
 	</p>

documentation/content/examples/09-transitions/06-deferred-transitions/App.svelte

@@ -12,8 +12,8 @@
 
 	const ASSETS = `https://sveltejs.github.io/assets/crossfade`;
 
-	const load = image => {
+	const load = (image) => {
-		const timeout = setTimeout(() => loading = image, 100);
+		const timeout = setTimeout(() => (loading = image), 100);
 
 		const img = new Image();
 
@@ -37,10 +37,10 @@
 					{#if selected !== image}
 						<button
 							style="background-color: {image.color};"
-							on:click="{() => load(image)}"
+							on:click={() => load(image)}
 							in:receive={{ key: image.id }}
-							out:send={{key:image.id}}
+							out:send={{ key: image.id }}>{loading === image ? '...' : image.id}</button
-						>{loading === image ? '...' : image.id}</button>
+						>
 					{/if}
 				</div>
 			{/each}
@@ -49,14 +49,13 @@
 		{#if selected}
 			{#await selected then d}
 				<div class="photo" in:receive={{ key: d.id }} out:send={{ key: d.id }}>
-					<img
+					<img alt={d.alt} src="{ASSETS}/{d.id}.jpg" on:click={() => (selected = null)} />
-						alt={d.alt}
-						src="{ASSETS}/{d.id}.jpg"
-						on:click="{() => selected = null}"
-					>
 
-					<p class='credit'>
+					<p class="credit">
-						<a target="_blank" rel="noreferrer" href="https://www.flickr.com/photos/{d.path}">via Flickr</a> &ndash;
+						<a target="_blank" rel="noreferrer" href="https://www.flickr.com/photos/{d.path}"
+							>via Flickr</a
+						>
+						&ndash;
 						<a target="_blank" rel="noreferrer" href={d.license.url}>{d.license.name}</a>
 					</p>
 				</div>
@@ -114,7 +113,8 @@
 		will-change: transform;
 	}
 
-	.photo, img {
+	.photo,
+	img {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -147,7 +147,8 @@
 		background: rgba(0, 0, 0, 0.4);
 	}
 
-	.credit a, .credit a:visited {
+	.credit a,
+	.credit a:visited {
 		color: white;
 	}
 </style>

documentation/content/examples/10-animations/00-animate/App.svelte

@@ -11,7 +11,7 @@
 			return {
 				duration: 600,
 				easing: quintOut,
-				css: t => `
+				css: (t) => `
 					transform: ${transform} scale(${t});
 					opacity: ${t}
 				`
@@ -25,7 +25,7 @@
 		{ id: 3, done: true, description: 'buy some milk' },
 		{ id: 4, done: false, description: 'mow the lawn' },
 		{ id: 5, done: false, description: 'feed the turtle' },
-		{ id: 6, done: false, description: 'fix some bugs' },
+		{ id: 6, done: false, description: 'fix some bugs' }
 	];
 
 	let uid = todos.length + 1;
@@ -42,43 +42,35 @@
 	}
 
 	function remove(todo) {
-		todos = todos.filter(t => t !== todo);
+		todos = todos.filter((t) => t !== todo);
 	}
 </script>
 
-<div class='board'>
+<div class="board">
 	<input
 		class="new-todo"
 		placeholder="what needs to be done?"
-		on:keydown="{event => event.key === 'Enter' && add(event.target)}"
+		on:keydown={(event) => event.key === 'Enter' && add(event.target)}
-	>
+	/>
 
-	<div class='left'>
+	<div class="left">
 		<h2>todo</h2>
-		{#each todos.filter(t => !t.done) as todo (todo.id)}
+		{#each todos.filter((t) => !t.done) as todo (todo.id)}
-			<label
+			<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
-				in:receive="{{key: todo.id}}"
+				<input type="checkbox" bind:checked={todo.done} />
-				out:send="{{key: todo.id}}"
-				animate:flip
-			>
-				<input type=checkbox bind:checked={todo.done}>
 				{todo.description}
-				<button on:click="{() => remove(todo)}">x</button>
+				<button on:click={() => remove(todo)}>x</button>
 			</label>
 		{/each}
 	</div>
 
-	<div class='right'>
+	<div class="right">
 		<h2>done</h2>
-		{#each todos.filter(t => t.done) as todo (todo.id)}
+		{#each todos.filter((t) => t.done) as todo (todo.id)}
-			<label
+			<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
-				in:receive="{{key: todo.id}}"
+				<input type="checkbox" bind:checked={todo.done} />
-				out:send="{{key: todo.id}}"
-				animate:flip
-			>
-				<input type=checkbox bind:checked={todo.done}>
 				{todo.description}
-				<button on:click="{() => remove(todo)}">x</button>
+				<button on:click={() => remove(todo)}>x</button>
 			</label>
 		{/each}
 	</div>
@@ -96,7 +88,8 @@
 		margin: 0 auto;
 	}
 
-	.left, .right {
+	.left,
+	.right {
 		float: left;
 		width: 50%;
 		padding: 0 1em 0 0;
@@ -122,7 +115,9 @@
 		user-select: none;
 	}
 
-	input { margin: 0 }
+	input {
+		margin: 0;
+	}
 
 	.right label {
 		background-color: rgb(180, 240, 100);

documentation/content/examples/11-easing/00-easing/App.svelte

@@ -26,7 +26,7 @@
 
 		await ease_path.set(current.shape);
 		await Promise.all([
-			time.set(1000, {duration, easing: x => x}),
+			time.set(1000, { duration, easing: (x) => x }),
 			value.set(0, { duration, easing: current.fn })
 		]);
 
@@ -42,24 +42,15 @@
 		<g class="canvas">
 			<Grid x={$time} y={$value} />
 			<g class="graph">
-				<path
+				<path d={$ease_path} stroke="#333" stroke-width="2" fill="none" />
-					d={$ease_path}
-					stroke="#333"
-					stroke-width="2"
-					fill="none"
-				/>
 
-				<path d="M0,23.647C0,22.41 27.014,0.407 28.496,0.025C29.978,-0.357 69.188,3.744 70.104,4.744C71.02,5.745 71.02,41.499 70.104,42.5C69.188,43.501 29.978,47.601 28.496,47.219C27.014,46.837 0,24.884 0,23.647Z"
+				<path
+					d="M0,23.647C0,22.41 27.014,0.407 28.496,0.025C29.978,-0.357 69.188,3.744 70.104,4.744C71.02,5.745 71.02,41.499 70.104,42.5C69.188,43.501 29.978,47.601 28.496,47.219C27.014,46.837 0,24.884 0,23.647Z"
 					fill="#ff3e00"
-					style="transform: translate(1060px, {($value - 24)}px)"
+					style="transform: translate(1060px, {$value - 24}px)"
 				/>
 
-				<circle
+				<circle cx={$time} cy={$value} r="15" fill="#ff3e00" />
-					cx="{$time}"
-					cy="{$value}"
-					r="15"
-					fill="#ff3e00"
-				/>
 			</g>
 		</g>
 	</svg>
@@ -93,7 +84,7 @@
 	}
 
 	.graph {
-		transform: translate(200px,400px)
+		transform: translate(200px, 400px);
 	}
 
 	@media (max-width: 600px) {

documentation/content/examples/11-easing/00-easing/Controls.svelte

@@ -20,10 +20,7 @@
 		{#if mobile}
 			<select bind:value={current_ease}>
 				{#each [...eases] as [name]}
-						<option
+					<option value={name} class:selected={name === current_ease}>
-							value={name}
-							class:selected={name === current_ease}
-						>
 						{name}
 					</option>
 				{/each}
@@ -31,10 +28,7 @@
 		{:else}
 			<ul>
 				{#each [...eases] as [name]}
-						<li
+					<li class:selected={name === current_ease} on:click={() => (current_ease = name)}>
-							class:selected={name === current_ease}
-							on:click={() => current_ease = name}
-						>
 						{name}
 					</li>
 				{/each}
@@ -44,9 +38,7 @@
 		{#if mobile}
 			<select bind:value={current_type}>
 				{#each types as [name, type]}
-						<option
+					<option value={type}>
-							value={type}
-						>
 						{name}
 					</option>
 				{/each}
@@ -54,24 +46,19 @@
 		{:else}
 			<ul>
 				{#each types as [name, type]}
-						<li
+					<li class:selected={type === current_type} on:click={() => (current_type = type)}>
-							class:selected={type === current_type}
-							on:click={() => current_type = type}
-						>
 						{name}
 					</li>
 				{/each}
 			</ul>
 		{/if}
 	</div>
-		<h4>
+	<h4>Duration</h4>
-			Duration
-		</h4>
 	<div class="duration">
 		<span>
 			<input type="number" bind:value={duration} min="0" step="100" />
-				<button class="number" on:click={() => duration -= 100}>-</button>
+			<button class="number" on:click={() => (duration -= 100)}>-</button>
-				<button class="number" on:click={() => duration += 100}>+</button>
+			<button class="number" on:click={() => (duration += 100)}>+</button>
 		</span>
 		<button class="play" on:click={() => dispatch('play')}>
 			{playing ? 'Restart' : 'Play'}
@@ -79,7 +66,6 @@
 	</div>
 </div>
 
-	
 <style>
 	.easing-sidebar {
 		width: 11em;

documentation/content/examples/11-easing/00-easing/Grid.svelte

@@ -1,52 +1,30 @@
+<svelte:options namespace="svg" />
+
 <script>
 	export let x, y;
 </script>
 
-<svelte:options namespace="svg" />
-
 <rect
-	x=0
+	x="0"
-	y=0
+	y="0"
-	width=1400
+	width="1400"
-	height=1800
+	height="1800"
-	stroke=#ccc
+	stroke="#ccc"
 	style="opacity: 0.5"
-	fill=none
+	fill="none"
-	stroke-width=2
+	stroke-width="2"
 />
 
 {#each { length: 8 } as _, i}
 	{#if i < 6}
-		<path
+		<path d="M{(i + 1) * 200} 0 L{(i + 1) * 200} 1802" class="grid-line" />
-			d="M{(i+1) * 200} 0 L{(i+1)*200} 1802"
-			class="grid-line"
-		/>
 	{/if}
-	<path
+	<path d="M0 {(i + 1) * 200} L1400 {(i + 1) * 200} " class="grid-line" />
-		d="M0 {(i+1) * 200} L1400 {(i+1)*200} "
-		class="grid-line"
-	/>
 {/each}
 
-<path
+<path style="transform: translateX({x + 200}px)" d="M0 0 L0 1800" class="grid-line-xy" />
-	style="transform: translateX({x+200}px)"
+<path style="transform: translateY({y}px)" d="M0 400 L1400 400" class="grid-line-xy" />
-	d="M0 0 L0 1800"
+<rect x="200" y="400" width="1000" height="1000" stroke="#999" fill="none" stroke-width="2" />
-	class="grid-line-xy"
-/>
-<path
-	style="transform: translateY({y}px)"
-	d="M0 400 L1400 400"
-	class="grid-line-xy"
-/>
-<rect
-	x=200
-	y=400
-	width=1000
-	height=1000
-	stroke=#999
-	fill=none
-	stroke-width=2
-/>
 
 <style>
 	.grid-line {

documentation/content/examples/12-svg/01-clock/App.svelte

@@ -20,48 +20,28 @@
 	});
 </script>
 
-<svg viewBox='-50 -50 100 100'>
+<svg viewBox="-50 -50 100 100">
-	<circle class='clock-face' r='48'/>
+	<circle class="clock-face" r="48" />
 
 	<!-- markers -->
 	{#each [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] as minute}
-		<line
+		<line class="major" y1="35" y2="45" transform="rotate({30 * minute})" />
-			class='major'
-			y1='35'
-			y2='45'
-			transform='rotate({30 * minute})'
-		/>
 
 		{#each [1, 2, 3, 4] as offset}
-			<line
+			<line class="minor" y1="42" y2="45" transform="rotate({6 * (minute + offset)})" />
-				class='minor'
-				y1='42'
-				y2='45'
-				transform='rotate({6 * (minute + offset)})'
-			/>
 		{/each}
 	{/each}
 
 	<!-- hour hand -->
-	<line
+	<line class="hour" y1="2" y2="-20" transform="rotate({30 * hours + minutes / 2})" />
-		class='hour'
-		y1='2'
-		y2='-20'
-		transform='rotate({30 * hours + minutes / 2})'
-	/>
 
 	<!-- minute hand -->
-	<line
+	<line class="minute" y1="4" y2="-30" transform="rotate({6 * minutes + seconds / 10})" />
-		class='minute'
-		y1='4'
-		y2='-30'
-		transform='rotate({6 * minutes + seconds / 10})'
-	/>
 
 	<!-- second hand -->
-	<g transform='rotate({6 * seconds})'>
+	<g transform="rotate({6 * seconds})">
-		<line class='second' y1='10' y2='-38'/>
+		<line class="second" y1="10" y2="-38" />
-		<line class='second-counterweight' y1='10' y2='2'/>
+		<line class="second-counterweight" y1="10" y2="2" />
 	</g>
 </svg>
 
@@ -94,7 +74,8 @@
 		stroke: #666;
 	}
 
-	.second, .second-counterweight {
+	.second,
+	.second-counterweight {
 		stroke: rgb(180, 0, 0);
 	}
 

documentation/content/examples/12-svg/02-bar-chart/App.svelte

@@ -41,7 +41,7 @@
 		<g class="axis y-axis">
 			{#each yTicks as tick}
 				<g class="tick tick-{tick}" transform="translate(0, {yScale(tick)})">
-					<line x2="100%"></line>
+					<line x2="100%" />
 					<text y="-4">{tick} {tick === 20 ? ' per 1,000 population' : ''}</text>
 				</g>
 			{/each}
@@ -51,19 +51,19 @@
 		<g class="axis x-axis">
 			{#each points as point, i}
 				<g class="tick" transform="translate({xScale(i)},{height})">
-					<text x="{barWidth/2}" y="-4">{width > 380 ? point.year : formatMobile(point.year)}</text>
+					<text x={barWidth / 2} y="-4">{width > 380 ? point.year : formatMobile(point.year)}</text>
 				</g>
 			{/each}
 		</g>
 
-		<g class='bars'>
+		<g class="bars">
 			{#each points as point, i}
 				<rect
-					x="{xScale(i) + 2}"
+					x={xScale(i) + 2}
-					y="{yScale(point.birthrate)}"
+					y={yScale(point.birthrate)}
-					width="{barWidth - 4}"
+					width={barWidth - 4}
-					height="{yScale(0) - yScale(point.birthrate)}"
+					height={yScale(0) - yScale(point.birthrate)}
-				></rect>
+				/>
 			{/each}
 		</g>
 	</svg>
@@ -88,7 +88,7 @@
 
 	.tick {
 		font-family: Helvetica, Arial;
-		font-size: .725em;
+		font-size: 0.725em;
 		font-weight: 200;
 	}
 

documentation/content/examples/12-svg/03-area-chart/App.svelte

@@ -19,7 +19,7 @@
 
 	$: minX = points[0].x;
 	$: maxX = points[points.length - 1].x;
-	$: path = `M${points.map(p => `${xScale(p.x)},${yScale(p.y)}`).join('L')}`;
+	$: 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) {
@@ -35,7 +35,7 @@
 		<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>
+					<line x2="100%" />
 					<text y="-4">{tick} {tick === 8 ? ' million sq km' : ''}</text>
 				</g>
 			{/each}
@@ -45,22 +45,28 @@
 		<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>
+					<line y1="-{height}" y2="-{padding.bottom}" x1="0" x2="0" />
 					<text y="-2">{width > 380 ? tick : formatMobile(tick)}</text>
 				</g>
 			{/each}
 		</g>
 
 		<!-- data -->
-		<path class="path-area" d={area}></path>
+		<path class="path-area" d={area} />
-		<path class="path-line" d={path}></path>
+		<path class="path-line" d={path} />
 	</svg>
 </div>
 
-<p>Average September extent. Source: <a href='https://climate.nasa.gov/vital-signs/arctic-sea-ice/'>NSIDC/NASA</a></p>
+<p>
+	Average September extent. Source: <a href="https://climate.nasa.gov/vital-signs/arctic-sea-ice/"
+		>NSIDC/NASA</a
+	>
+</p>
 
 <style>
-	.chart, h2, p {
+	.chart,
+	h2,
+	p {
 		width: 100%;
 		max-width: 500px;
 		margin-left: auto;
@@ -75,7 +81,7 @@
 	}
 
 	.tick {
-		font-size: .725em;
+		font-size: 0.725em;
 		font-weight: 200;
 	}
 

documentation/content/examples/12-svg/04-scatterplot/Scatterplot.svelte

@@ -18,13 +18,9 @@
 		.domain([0, 12])
 		.range([height - padding.bottom, padding.top]);
 
-	$: xTicks = width > 180 ?
+	$: xTicks = width > 180 ? [0, 4, 8, 12, 16, 20] : [0, 10, 20];
-		[0, 4, 8, 12, 16, 20] :
-		[0, 10, 20];
 
-	$: yTicks = height > 180 ?
+	$: yTicks = height > 180 ? [0, 2, 4, 6, 8, 10, 12] : [0, 4, 8, 12];
-		[0, 2, 4, 6, 8, 10, 12] :
-		[0, 4, 8, 12];
 
 	onMount(resize);
 
@@ -33,32 +29,32 @@
 	}
 </script>
 
-<svelte:window on:resize='{resize}'/>
+<svelte:window on:resize={resize} />
 
 <svg bind:this={svg}>
 	<!-- y axis -->
-	<g class='axis y-axis'>
+	<g class="axis y-axis">
 		{#each yTicks as tick}
-			<g class='tick tick-{tick}' transform='translate(0, {yScale(tick)})'>
+			<g class="tick tick-{tick}" transform="translate(0, {yScale(tick)})">
-				<line x1='{padding.left}' x2='{xScale(22)}'/>
+				<line x1={padding.left} x2={xScale(22)} />
-				<text x='{padding.left - 8}' y='+4'>{tick}</text>
+				<text x={padding.left - 8} y="+4">{tick}</text>
 			</g>
 		{/each}
 	</g>
 
 	<!-- x axis -->
-	<g class='axis x-axis'>
+	<g class="axis x-axis">
 		{#each xTicks as tick}
-			<g class='tick' transform='translate({xScale(tick)},0)'>
+			<g class="tick" transform="translate({xScale(tick)},0)">
-				<line y1='{yScale(0)}' y2='{yScale(13)}'/>
+				<line y1={yScale(0)} y2={yScale(13)} />
-				<text y='{height - padding.bottom + 16}'>{tick}</text>
+				<text y={height - padding.bottom + 16}>{tick}</text>
 			</g>
 		{/each}
 	</g>
 
 	<!-- 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>
 

documentation/content/examples/12-svg/05-svg-transitions/App.svelte

@@ -9,35 +9,29 @@
 
 {#if visible}
 	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
-		<g out:fade="{{duration: 200}}" opacity=0.2>
+		<g out:fade={{ duration: 200 }} opacity="0.2">
 			<path
-				in:expand="{{duration: 400, delay: 1000, easing: quintOut}}"
+				in:expand={{ duration: 400, delay: 1000, easing: quintOut }}
 				style="stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;"
 				d={outer}
 			/>
-			<path
+			<path in:draw={{ duration: 1000 }} style="stroke:#ff3e00; stroke-width: 1.5" d={inner} />
-				in:draw="{{duration: 1000}}"
-				style="stroke:#ff3e00; stroke-width: 1.5"
-				d={inner}
-			/>
 		</g>
 	</svg>
 
-	<div class="centered" out:fly="{{y: -20, duration: 800}}">
+	<div class="centered" out:fly={{ y: -20, duration: 800 }}>
 		{#each 'SVELTE' as char, i}
-			<span
+			<span in:fade={{ delay: 1000 + i * 150, duration: 800 }}>{char}</span>
-				in:fade="{{delay: 1000 + i * 150, duration: 800}}"
-			>{char}</span>
 		{/each}
 	</div>
 {/if}
 
 <label>
-	<input type="checkbox" bind:checked={visible}>
+	<input type="checkbox" bind:checked={visible} />
 	toggle me
 </label>
 
-<link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="stylesheet" />
 
 <style>
 	svg {

documentation/content/examples/13-actions/00-actions/App.svelte

@@ -1,14 +1,12 @@
 <script>
-	import { clickOutside } from "./click_outside.js";
+	import { clickOutside } from './click_outside.js';
 
 	let showModal = true;
 </script>
 
 <button on:click={() => (showModal = true)}>Show Modal</button>
 {#if showModal}
-	<div class="box" use:clickOutside on:outclick={() => (showModal = false)}>
+	<div class="box" use:clickOutside on:outclick={() => (showModal = false)}>Click outside me!</div>
-		Click outside me!
-	</div>
 {/if}
 
 <style>

documentation/content/examples/13-actions/01-adding-parameters-to-actions/App.svelte

@@ -6,14 +6,15 @@
 </script>
 
 <label>
-	<input type=range bind:value={duration} max={2000} step={100}>
+	<input type="range" bind:value={duration} max={2000} step={100} />
 	{duration}ms
 </label>
 
-<button use:longpress={duration}
+<button
-	on:longpress="{() => pressed = true}"
+	use:longpress={duration}
-	on:mouseenter="{() => pressed = false}"
+	on:longpress={() => (pressed = true)}
->press and hold</button>
+	on:mouseenter={() => (pressed = false)}>press and hold</button
+>
 
 {#if pressed}
 	<p>congratulations, you pressed and held for {duration}ms</p>

documentation/content/examples/13-actions/03-actions-pannable/App.svelte

@@ -2,17 +2,20 @@
 	import { spring } from 'svelte/motion';
 	import { pannable } from './pannable.js';
 
-	const coords = spring({ x: 0, y: 0 }, {
+	const coords = spring(
+		{ x: 0, y: 0 },
+		{
 			stiffness: 0.2,
 			damping: 0.4
-	});
+		}
+	);
 
 	function handlePanStart() {
 		coords.stiffness = coords.damping = 1;
 	}
 
 	function handlePanMove(event) {
-		coords.update($coords => ({
+		coords.update(($coords) => ({
 			x: $coords.x + event.detail.dx,
 			y: $coords.y + event.detail.dy
 		}));
@@ -25,7 +28,8 @@
 	}
 </script>
 
-<div class="box"
+<div
+	class="box"
 	use:pannable
 	on:panstart={handlePanStart}
 	on:panmove={handlePanMove}
@@ -33,7 +37,7 @@
 	style="transform:
 		translate({$coords.x}px,{$coords.y}px)
 		rotate({$coords.x * 0.2}deg)"
-></div>
+/>
 
 <style>
 	.box {

documentation/content/examples/14-classes/00-classes/App.svelte

@@ -2,20 +2,11 @@
 	let current = 'foo';
 </script>
 
-<button
+<button class:active={current === 'foo'} on:click={() => (current = 'foo')}>foo</button>
-	class:active="{current === 'foo'}"
-	on:click="{() => current = 'foo'}"
->foo</button>
 
-<button
+<button class:active={current === 'bar'} on:click={() => (current = 'bar')}>bar</button>
-	class:active="{current === 'bar'}"
-	on:click="{() => current = 'bar'}"
->bar</button>
 
-<button
+<button class:active={current === 'baz'} on:click={() => (current = 'baz')}>baz</button>
-	class:active="{current === 'baz'}"
-	on:click="{() => current = 'baz'}"
->baz</button>
 
 <style>
 	button {

documentation/content/examples/14-classes/01-class-shorthand/App.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type=checkbox bind:checked={big}>
+	<input type="checkbox" bind:checked={big} />
 	big
 </label>
 

documentation/content/examples/15-composition/00-slots/Box.svelte

@@ -1,5 +1,5 @@
 <div class="box">
-	<slot></slot>
+	<slot />
 </div>
 
 <style>

documentation/content/examples/15-composition/02-named-slots/App.svelte

@@ -3,12 +3,10 @@
 </script>
 
 <ContactCard>
-	<span slot="name">
+	<span slot="name"> P. Sherman </span>
-		P. Sherman
-	</span>
 
 	<span slot="address">
-		42 Wallaby Way<br>
+		42 Wallaby Way<br />
 		Sydney
 	</span>
 </ContactCard>

documentation/content/examples/15-composition/02-named-slots/ContactCard.svelte

@@ -30,10 +30,11 @@
 	h2 {
 		padding: 0 0 0.2em 0;
 		margin: 0 0 1em 0;
-		border-bottom: 1px solid #ff3e00
+		border-bottom: 1px solid #ff3e00;
 	}
 
-	.address, .email {
+	.address,
+	.email {
 		padding: 0 0 0 1.5em;
 		background: 0 0 no-repeat;
 		background-size: 20px 20px;
@@ -41,7 +42,13 @@
 		line-height: 1.2;
 	}
 
-	.address { background-image: url(/tutorial/icons/map-marker.svg) }
+	.address {
-	.email   { background-image: url(/tutorial/icons/email.svg) }
+		background-image: url(/tutorial/icons/map-marker.svg);
-	.missing { color: #999 }
+	}
+	.email {
+		background-image: url(/tutorial/icons/email.svg);
+	}
+	.missing {
+		color: #999;
+	}
 </style>

documentation/content/examples/15-composition/03-slot-props/Hoverable.svelte

@@ -11,5 +11,5 @@
 </script>
 
 <div on:mouseenter={enter} on:mouseleave={leave}>
-	<slot hovering={hovering}></slot>
+	<slot {hovering} />
 </div>

documentation/content/examples/15-composition/04-conditional-slots/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Profile from "./Profile.svelte";
+	import Profile from './Profile.svelte';
 </script>
 
 <Profile>

documentation/content/examples/15-composition/05-modal/App.svelte

@@ -4,9 +4,7 @@
 	let showModal = false;
 </script>
 
-<button on:click={() => (showModal = true)}>
+<button on:click={() => (showModal = true)}> show modal </button>
-	show modal
-</button>
 
 <Modal bind:showModal>
 	<h2 slot="header">
@@ -17,11 +15,15 @@
 	<ol class="definition-list">
 		<li>of or relating to modality in logic</li>
 		<li>
-			containing provisions as to the mode of procedure or the manner of taking effect —used of a contract or legacy
+			containing provisions as to the mode of procedure or the manner of taking effect —used of a
+			contract or legacy
 		</li>
 		<li>of or relating to a musical mode</li>
 		<li>of or relating to structure as opposed to substance</li>
-		<li>of, relating to, or constituting a grammatical form or category characteristically indicating predication</li>
+		<li>
+			of, relating to, or constituting a grammatical form or category characteristically indicating
+			predication
+		</li>
 		<li>of or relating to a statistical mode</li>
 	</ol>
 

documentation/content/examples/16-context/00-context-api/App.svelte

@@ -6,8 +6,8 @@
 <Map lat={35} lon={-84} zoom={3.5}>
 	<MapMarker lat={37.8225} lon={-122.0024} label="Svelte Body Shaping" />
 	<MapMarker lat={33.8981} lon={-118.4169} label="Svelte Barbershop & Essentials" />
-	<MapMarker lat={29.7230} lon={-95.4189} label="Svelte Waxing Studio"/>
+	<MapMarker lat={29.723} lon={-95.4189} label="Svelte Waxing Studio" />
 	<MapMarker lat={28.3378} lon={-81.3966} label="Svelte 30 Nutritional Consultants" />
 	<MapMarker lat={40.6483} lon={-74.0237} label="Svelte Brands LLC" />
-	<MapMarker lat={40.6986} lon={-74.4100} label="Svelte Medical Systems"/>
+	<MapMarker lat={40.6986} lon={-74.41} label="Svelte Medical Systems" />
 </Map>

documentation/content/examples/16-context/00-context-api/Map.svelte

@@ -3,7 +3,7 @@
 	import { mapbox, key } from './mapbox.js';
 
 	setContext(key, {
-		getMap: () => map,
+		getMap: () => map
 	});
 
 	export let lat;
@@ -18,7 +18,7 @@
 			container,
 			style: 'mapbox://styles/mapbox/streets-v9',
 			center: [lon, lat],
-			zoom,
+			zoom
 		});
 	}
 
@@ -28,11 +28,7 @@
 </script>
 
 <svelte:head>
-	<link
+	<link rel="stylesheet" href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css" on:load={load} />
-		rel="stylesheet"
-		href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css"
-		on:load={load}
-	/>
 </svelte:head>
 
 <div bind:this={container}>

documentation/content/examples/16-context/00-context-api/MapMarker.svelte

@@ -9,11 +9,7 @@
 	export let lon;
 	export let label;
 
-	const popup = new mapbox.Popup({ offset: 25 })
+	const popup = new mapbox.Popup({ offset: 25 }).setText(label);
-		.setText(label);
 
-	const marker = new mapbox.Marker()
+	const marker = new mapbox.Marker().setLngLat([lon, lat]).setPopup(popup).addTo(map);
-		.setLngLat([lon, lat])
-		.setPopup(popup)
-		.addTo(map);
 </script>

documentation/content/examples/17-special-elements/00-svelte-self/App.svelte

@@ -5,9 +5,7 @@
 		{
 			type: 'folder',
 			name: 'Important work stuff',
-			files: [
+			files: [{ type: 'file', name: 'quarterly-results.xlsx' }]
-				{ type: 'file', name: 'quarterly-results.xlsx' }
-			]
 		},
 		{
 			type: 'folder',

documentation/content/examples/17-special-elements/00-svelte-self/Folder.svelte

@@ -1,6 +1,6 @@
 <script>
 	import File from './File.svelte';
-	import {slide} from 'svelte/transition'
+	import { slide } from 'svelte/transition';
 
 	export let expanded = false;
 	export let name;

documentation/content/examples/17-special-elements/01-svelte-component/App.svelte

@@ -6,7 +6,7 @@
 	const options = [
 		{ color: 'red', component: RedThing },
 		{ color: 'green', component: GreenThing },
-		{ color: 'blue',  component: BlueThing  },
+		{ color: 'blue', component: BlueThing }
 	];
 
 	let selected = options[0];

documentation/content/examples/17-special-elements/04-svelte-window-bindings/App.svelte

@@ -9,17 +9,15 @@
 <a class="parallax-container" href="https://www.firewatchgame.com">
 	{#each layers as layer}
 		<img
-			style="transform: translate(0,{-y * layer / (layers.length - 1)}px)"
+			style="transform: translate(0,{(-y * layer) / (layers.length - 1)}px)"
 			src="https://www.firewatchgame.com/images/parallax/parallax{layer}.png"
 			alt="parallax layer {layer}"
-		>
+		/>
 	{/each}
 </a>
 
 <div class="text">
-	<span style="opacity: {1 - Math.max(0, y / 40)}">
+	<span style="opacity: {1 - Math.max(0, y / 40)}"> scroll down </span>
-		scroll down
-	</span>
 
 	<div class="foreground">
 		You have scrolled {y} pixels

documentation/content/examples/17-special-elements/05-svelte-document/App.svelte

@@ -1,7 +1,7 @@
 <script>
 	let selection = '';
 
-	const handleSelectionChange = (e) => selection = document.getSelection();
+	const handleSelectionChange = (e) => (selection = document.getSelection());
 </script>
 
 <svelte:document on:selectionchange={handleSelectionChange} />

documentation/content/examples/17-special-elements/06-svelte-body/App.svelte

@@ -1,21 +1,18 @@
 <script>
 	let hereKitty = false;
 
-	const handleMouseenter = () => hereKitty = true;
+	const handleMouseenter = () => (hereKitty = true);
-	const handleMouseleave = () => hereKitty = false;
+	const handleMouseleave = () => (hereKitty = false);
 </script>
 
-<svelte:body
+<svelte:body on:mouseenter={handleMouseenter} on:mouseleave={handleMouseleave} />
-	on:mouseenter={handleMouseenter}
-	on:mouseleave={handleMouseleave}
-/>
 
 <!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
 <img
 	class:curious={hereKitty}
 	alt="Kitten wants to know what's going on"
 	src="/tutorial/kitten.png"
->
+/>
 
 <style>
 	img {

documentation/content/examples/17-special-elements/07-svelte-head/App.svelte

@@ -1,5 +1,5 @@
 <svelte:head>
-	<link rel="stylesheet" href="/tutorial/dark-theme.css">
+	<link rel="stylesheet" href="/tutorial/dark-theme.css" />
 </svelte:head>
 
 <h1>Hello world!</h1>

documentation/content/examples/18-module-context/01-module-exports/App.svelte

@@ -2,9 +2,7 @@
 	import AudioPlayer, { stopAll } from './AudioPlayer.svelte';
 </script>
 
-<button on:click={stopAll}>
+<button on:click={stopAll}> stop all audio </button>
-	stop all audio
-</button>
 
 <!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
 <AudioPlayer

documentation/content/examples/18-module-context/01-module-exports/AudioPlayer.svelte

@@ -2,7 +2,7 @@
 	const elements = new Set();
 
 	export function stopAll() {
-		elements.forEach(element => {
+		elements.forEach((element) => {
 			element.pause();
 		});
 	}
@@ -25,7 +25,7 @@
 	});
 
 	function stopOthers() {
-		elements.forEach(element => {
+		elements.forEach((element) => {
 			if (element !== audio) element.pause();
 		});
 	}
@@ -35,18 +35,23 @@
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
 
-	<audio
+	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
-		bind:this={audio}
-		bind:paused
-		on:play={stopOthers}
-		controls
-		{src}
-	></audio>
 </article>
 
 <style>
-	article { margin: 0 0 1em 0; max-width: 800px }
+	article {
-	h2, p { margin: 0 0 0.3em 0; }
+		margin: 0 0 1em 0;
-	audio { width: 100%; margin: 0.5em 0 1em 0; }
+		max-width: 800px;
-	.playing { color: #ff3e00; }
+	}
+	h2,
+	p {
+		margin: 0 0 0.3em 0;
+	}
+	audio {
+		width: 100%;
+		margin: 0.5em 0 1em 0;
+	}
+	.playing {
+		color: #ff3e00;
+	}
 </style>

documentation/content/examples/19-debugging/00-debug/App.svelte

@@ -5,8 +5,8 @@
 	};
 </script>
 
-<input bind:value={user.firstname}>
+<input bind:value={user.firstname} />
-<input bind:value={user.lastname}>
+<input bind:value={user.lastname} />
 
 {@debug user}
 

documentation/content/examples/20-7guis/01-7guis-counter/App.svelte

@@ -3,5 +3,5 @@
 	let count = 0;
 </script>
 
-<input type=number bind:value={count}>
+<input type="number" bind:value={count} />
-<button on:click="{() => count += 1}">count</button>
+<button on:click={() => (count += 1)}>count</button>

documentation/content/examples/20-7guis/02-7guis-temperature/App.svelte

@@ -4,18 +4,18 @@
 
 	function setBothFromC(value) {
 		c = +value;
-		f = +(32 + (9 / 5 * c)).toFixed(1);
+		f = +(32 + (9 / 5) * c).toFixed(1);
 	}
 
 	function setBothFromF(value) {
 		f = +value;
-		c =+(5 / 9 * (f - 32)).toFixed(1);
+		c = +((5 / 9) * (f - 32)).toFixed(1);
 	}
 </script>
 
 <!-- https://eugenkiss.github.io/7guis/tasks/#temp -->
-<input value={c} on:input="{e => setBothFromC(e.target.value)}" type=number> °C =
+<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
+<input value={f} on:input={(e) => setBothFromF(e.target.value)} type="number" /> °F
 
 <style>
 	input {

documentation/content/examples/20-7guis/03-7guis-flight-booker/App.svelte

@@ -42,16 +42,15 @@
 	<option value={true}>return flight</option>
 </select>
 
-<input type=date bind:value={start}>
+<input type="date" bind:value={start} />
-<input type=date bind:value={end} disabled={!isReturn}>
+<input type="date" bind:value={end} disabled={!isReturn} />
 
-<button
+<button on:click={bookFlight} disabled={isReturn && startDate >= endDate}>book</button>
-	on:click={bookFlight}
-	disabled="{isReturn && (startDate >= endDate)}"
->book</button>
 
 <style>
-	select, input, button {
+	select,
+	input,
+	button {
 		display: block;
 		margin: 0.5em 0;
 		font-size: inherit;

documentation/content/examples/20-7guis/04-7guis-timer/App.svelte

@@ -13,13 +13,10 @@
 		frame = requestAnimationFrame(update);
 
 		const time = window.performance.now();
-		elapsed += Math.min(
+		elapsed += Math.min(time - last_time, duration - elapsed);
-			time - last_time,
-			duration - elapsed
-		);
 
 		last_time = time;
-	}());
+	})();
 
 	onDestroy(() => {
 		cancelAnimationFrame(frame);
@@ -28,14 +25,14 @@
 
 <label>
 	elapsed time:
-	<progress value="{elapsed / duration}"></progress>
+	<progress value={elapsed / duration} />
 </label>
 
 <div>{(elapsed / 1000).toFixed(1)}s</div>
 
 <label>
 	duration:
-	<input type="range" bind:value={duration} min="1" max="20000">
+	<input type="range" bind:value={duration} min="1" max="20000" />
 </label>
 
-<button on:click="{() => elapsed = 0}">reset</button>
+<button on:click={() => (elapsed = 0)}>reset</button>

documentation/content/examples/20-7guis/05-7guis-crud/App.svelte

@@ -13,7 +13,7 @@
 	let i = 0;
 
 	$: filteredPeople = prefix
-		? people.filter(person => {
+		? people.filter((person) => {
 				const name = `${person.last}, ${person.first}`;
 				return name.toLowerCase().startsWith(prefix.toLowerCase());
 		  })
@@ -50,7 +50,7 @@
 	}
 </script>
 
-<input placeholder="filter prefix" bind:value={prefix}>
+<input placeholder="filter prefix" bind:value={prefix} />
 
 <select bind:value={i} size={5}>
 	{#each filteredPeople as person, i}
@@ -58,13 +58,13 @@
 	{/each}
 </select>
 
-<label><input bind:value={first} placeholder="first"></label>
+<label><input bind:value={first} placeholder="first" /></label>
-<label><input bind:value={last} placeholder="last"></label>
+<label><input bind:value={last} placeholder="last" /></label>
 
-<div class='buttons'>
+<div class="buttons">
-	<button on:click={create} disabled="{!first || !last}">create</button>
+	<button on:click={create} disabled={!first || !last}>create</button>
-	<button on:click={update} disabled="{!first || !last || !selected}">update</button>
+	<button on:click={update} disabled={!first || !last || !selected}>update</button>
-	<button on:click={remove} disabled="{!selected}">delete</button>
+	<button on:click={remove} disabled={!selected}>delete</button>
 </div>
 
 <style>

documentation/content/examples/20-7guis/06-7guis-circles/App.svelte

@@ -56,7 +56,7 @@ radius of the selected circle.
 	}
 
 	function travel(d) {
-		circles = clone(undoStack[i += d]);
+		circles = clone(undoStack[(i += d)]);
 		adjusting = false;
 	}
 
@@ -66,19 +66,22 @@ radius of the selected circle.
 </script>
 
 <div class="controls">
-	<button on:click="{() => travel(-1)}" disabled="{i === 0}">undo</button>
+	<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 === undoStack.length - 1}>redo</button>
 </div>
 
 <svg on:click={handleClick}>
 	{#each circles as circle}
-		<circle cx={circle.cx} cy={circle.cy} r={circle.r}
+		<circle
-			on:click="{event => select(circle, event)}"
+			cx={circle.cx}
-			on:contextmenu|stopPropagation|preventDefault="{() => {
+			cy={circle.cy}
+			r={circle.r}
+			on:click={(event) => select(circle, event)}
+			on:contextmenu|stopPropagation|preventDefault={() => {
 				adjusting = !adjusting;
 				if (adjusting) selected = circle;
-			}}"
+			}}
-			fill="{circle === selected ? '#ccc': 'white'}"
+			fill={circle === selected ? '#ccc' : 'white'}
 		/>
 	{/each}
 </svg>
@@ -86,7 +89,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" value={selected.r} on:input={adjust}>
+		<input type="range" value={selected.r} on:input={adjust} />
 	</div>
 {/if}
 

documentation/content/examples/21-miscellaneous/01-hacker-news/App.svelte

@@ -12,7 +12,7 @@
 
 		if (path.startsWith('/item')) {
 			const id = path.slice(6);
-			item = await fetch(`https://node-hnapi.herokuapp.com/item/${id}`).then(r => r.json());
+			item = await fetch(`https://node-hnapi.herokuapp.com/item/${id}`).then((r) => r.json());
 
 			window.scrollTo(0, 0);
 		} else if (path.startsWith('/top')) {

documentation/content/examples/21-miscellaneous/01-hacker-news/Item.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Comment from "./Comment.svelte";
+	import Comment from './Comment.svelte';
 
 	export let item;
 	export let returnTo;
@@ -10,14 +10,14 @@
 <a href={returnTo}>&laquo; back</a>
 
 <article>
-	<a href="{url}">
+	<a href={url}>
 		<h1>{item.title}</h1>
 		{#if item.domain}
 			<small>{item.domain}</small>
 		{/if}
 	</a>
 
-	<p class="meta">submitted by {item.user} {item.time_ago}
+	<p class="meta">submitted by {item.user} {item.time_ago}</p>
 </article>
 
 <div class="comments">

documentation/content/examples/21-miscellaneous/01-hacker-news/List.svelte

@@ -1,6 +1,6 @@
 <script>
-	import { beforeUpdate } from "svelte";
+	import { beforeUpdate } from 'svelte';
-	import Summary from "./Summary.svelte";
+	import Summary from './Summary.svelte';
 
 	const PAGE_SIZE = 20;
 
@@ -10,8 +10,8 @@
 	let offset;
 
 	$: fetch(`https://node-hnapi.herokuapp.com/news?page=${page}`)
-		.then(r => r.json())
+		.then((r) => r.json())
-		.then(data => {
+		.then((data) => {
 			items = data;
 			offset = PAGE_SIZE * (page - 1);
 			window.scrollTo(0, 0);
@@ -40,7 +40,11 @@
 	}
 
 	@keyframes fade-in {
-		from { opacity: 0; }
+		from {
-		to { opacity: 1; }
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
 	}
 </style>

documentation/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte

@@ -8,7 +8,7 @@
 		return `${c} ${c === 1 ? 'comment' : 'comments'}`;
 	}
 
-	$: url = item.type === "ask" ? `https://news.ycombinator.com/${item.url}` : item.url;
+	$: url = item.type === 'ask' ? `https://news.ycombinator.com/${item.url}` : item.url;
 </script>
 
 <article>

documentation/content/examples/21-miscellaneous/02-immutable-data/App.svelte

@@ -9,7 +9,7 @@
 	];
 
 	function toggle(id) {
-		todos = todos.map(todo => {
+		todos = todos.map((todo) => {
 			if (todo.id === id) {
 				// return a new object
 				return {
@@ -27,10 +27,10 @@
 
 <h2>Immutable</h2>
 {#each todos as todo}
-	<ImmutableTodo {todo} on:click="{() => toggle(todo.id)}"/>
+	<ImmutableTodo {todo} on:click={() => toggle(todo.id)} />
 {/each}
 
 <h2>Mutable</h2>
 {#each todos as todo}
-	<MutableTodo {todo} on:click="{() => toggle(todo.id)}"/>
+	<MutableTodo {todo} on:click={() => toggle(todo.id)} />
 {/each}

documentation/content/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte

@@ -16,7 +16,8 @@
 <!-- the text will flash red whenever
 		the `todo` object changes -->
 <div bind:this={div} on:click>
-	{todo.done ? '👍': ''} {todo.text}
+	{todo.done ? '👍' : ''}
+	{todo.text}
 </div>
 
 <style>

documentation/content/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte

@@ -14,7 +14,8 @@
 <!-- the text will flash red whenever
 		the `todo` object changes -->
 <div bind:this={div} on:click>
-	{todo.done ? '👍': ''} {todo.text}
+	{todo.done ? '👍' : ''}
+	{todo.text}
 </div>
 
 <style>

documentation/content/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte

@@ -6,5 +6,12 @@
 <Hero />
 
 <div class={comicSans}>
-	<p>Did you enjoy your lunch, mom? You drank it fast enough. I know, I just call her Annabelle cause she's shaped like a…she's the belle of the ball! YOU'RE the Chiclet! Not me. Caw ca caw, caw ca caw, caw ca caw! A Colombian cartel that WON'T kidnap and kill you. You go buy a tape recorder and record yourself for a whole day. <a class={link} href="https://bluthipsum.com/">I think you'll be surprised at some of your phrasing.</a></p>
+	<p>
+		Did you enjoy your lunch, mom? You drank it fast enough. I know, I just call her Annabelle cause
+		she's shaped like a…she's the belle of the ball! YOU'RE the Chiclet! Not me. Caw ca caw, caw ca
+		caw, caw ca caw! A Colombian cartel that WON'T kidnap and kill you. You go buy a tape recorder
+		and record yourself for a whole day. <a class={link} href="https://bluthipsum.com/"
+			>I think you'll be surprised at some of your phrasing.</a
+		>
+	</p>
 </div>

documentation/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte

@@ -3,7 +3,7 @@
 	let b = 2;
 </script>
 
-<input type="number" bind:value={a}>
+<input type="number" bind:value={a} />
-<input type="number" bind:value={b}>
+<input type="number" bind:value={b} />
 
 <p>{a} + {b} = {a + b}</p>

documentation/content/tutorial/01-introduction/03-dynamic-attributes/app-a/App.svelte

@@ -2,4 +2,4 @@
 	let src = '/tutorial/image.gif';
 </script>
 
-<img>
+<img />

documentation/content/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte

@@ -3,4 +3,4 @@
 	let name = 'Rick Astley';
 </script>
 
-<img {src} alt="{name} dances.">
+<img {src} alt="{name} dances." />