chore(site-2): Run prettier

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

@@ -254,11 +254,11 @@ All except `scrollX` and `scrollY` are readonly.
 ## `<svelte:document>`
 
 ```svelte
-<svelte:document on:event={handler}/>
+<svelte:document on:event={handler} />
 ```
 
 ```svelte
-<svelte:document bind:prop={value}/>
+<svelte:document bind:prop={value} />
 ```
 
 Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document`, such as `visibilitychange`, which don't fire on `window`. It also lets you use [actions](/docs/element-directives#use-action) on `document`.
@@ -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/00-introduction/03-nested-components/App.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <p>These styles...</p>
-<Nested/>
+<Nested />
 
 <style>
 	p {

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/00-declaring-props/App.svelte

@@ -2,4 +2,4 @@
 	import Nested from './Nested.svelte';
 </script>
 
-<Nested answer={42}/>
+<Nested answer={42} />

documentation/content/examples/02-props/01-default-values/App.svelte

@@ -2,5 +2,5 @@
 	import Nested from './Nested.svelte';
 </script>
 
-<Nested answer={42}/>
+<Nested answer={42} />
-<Nested/>
+<Nested />

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

@@ -9,4 +9,4 @@
 	};
 </script>
 
-<Info {...pkg}/>
+<Info {...pkg} />

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,22 +14,20 @@
 	}
 </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>
 		<h2>Keyed</h2>
 		{#each things as thing (thing.id)}
-			<Thing current={thing.color}/>
+			<Thing current={thing.color} />
 		{/each}
 	</div>
 
 	<div>
 		<h2>Unkeyed</h2>
 		{#each things as thing}
-			<Thing current={thing.color}/>
+			<Thing current={thing.color} />
 		{/each}
 	</div>
 </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/App.svelte

@@ -6,4 +6,4 @@
 	}
 </script>
 
-<Inner on:message={handleMessage}/>
+<Inner on:message={handleMessage} />

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/App.svelte

@@ -6,4 +6,4 @@
 	}
 </script>
 
-<Outer on:message={handleMessage}/>
+<Outer on:message={handleMessage} />

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/04-event-forwarding/Outer.svelte

@@ -2,4 +2,4 @@
 	import Inner from './Inner.svelte';
 </script>
 
-<Inner on:message/>
+<Inner on:message />

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

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

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,25 +13,14 @@
 </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>
 	{#each Array.from(files) as file}
-		<p>{file.name} ({file.size} bytes) </p>
+		<p>{file.name} ({file.size} bytes)</p>
 	{/each}
 {/if}

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"/>
+	>
+		<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;
@@ -118,11 +121,11 @@
 	}
 
 	progress::-webkit-progress-bar {
-		background-color: rgba(0,0,0,0.2);
+		background-color: rgba(0, 0, 0, 0.2);
 	}
 
 	progress::-webkit-progress-value {
-		background-color: rgba(255,255,255,0.6);
+		background-color: rgba(255, 255, 255, 0.6);
 	}
 
 	video {

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/App.svelte

@@ -11,4 +11,4 @@
 
 <h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>
 
-<Keypad bind:value={pin} on:submit={handleSubmit}/>
+<Keypad bind:value={pin} on:submit={handleSubmit} />

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,13 +6,13 @@
 
 	let countValue;
 
-	const unsubscribe = count.subscribe(value => {
+	const unsubscribe = count.subscribe((value) => {
 		countValue = value;
 	});
 </script>
 
 <h1>The count is {countValue}</h1>
 
-<Incrementer/>
+<Incrementer />
-<Decrementer/>
+<Decrementer />
-<Resetter/>
+<Resetter />

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/App.svelte

@@ -7,6 +7,6 @@
 
 <h1>The count is {$count}</h1>
 
-<Incrementer/>
+<Incrementer />
-<Decrementer/>
+<Decrementer />
-<Resetter/>
+<Resetter />

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}/>
+	<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}
@@ -38,12 +38,12 @@
 		position: absolute;
 		left: 50%;
 		top: 50%;
-		transform: translate(-50%,-50%);
+		transform: translate(-50%, -50%);
 	}
 
 	span {
 		position: absolute;
-		transform: translate(-50%,-50%);
+		transform: translate(-50%, -50%);
 		font-size: 4em;
 	}
 </style>

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}}
+							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}
@@ -48,15 +48,14 @@
 
 		{#if selected}
 			{#await selected then d}
-				<div class="photo" in:receive={{key:d.id}} out:send={{key:d.id}}>
+				<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;
@@ -144,10 +144,11 @@
 		color: white;
 		font-weight: bold;
 		opacity: 0.6;
-		background: rgba(0,0,0,0.4);
+		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,10 +115,12 @@
 		user-select: none;
 	}
 
-	input { margin: 0 }
+	input {
+		margin: 0;
+	}
 
 	.right label {
-		background-color: rgb(180,240,100);
+		background-color: rgb(180, 240, 100);
 	}
 
 	button {
@@ -136,7 +131,7 @@
 		line-height: 1;
 		background-color: transparent;
 		border: none;
-		color: rgb(170,30,30);
+		color: rgb(170, 30, 30);
 		opacity: 0;
 		transition: opacity 0.2s;
 	}

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

@@ -21,13 +21,13 @@
 	async function runAnimations() {
 		playing = true;
 
-		value.set(1000, {duration: 0});
+		value.set(1000, { duration: 0 });
-		time.set(0, {duration: 0});
+		time.set(0, { duration: 0 });
 
 		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})
+			value.set(0, { duration, easing: current.fn })
 		]);
 
 		playing = false;
@@ -40,26 +40,17 @@
 <div bind:offsetWidth={width} class="easing-vis">
 	<svg viewBox="0 0 1400 1802">
 		<g class="canvas">
-			<Grid x={$time} y={$value}/>
+			<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,10 +84,10 @@
 	}
 
 	.graph {
-		transform: translate(200px,400px)
+		transform: translate(200px, 400px);
 	}
 
-	@media (max-width:600px) {
+	@media (max-width: 600px) {
 		.easing-vis {
 			flex-direction: column;
 			max-height: calc(100% - 3rem);

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,22 +28,17 @@
 		{: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}
 			</ul>
 		{/if}
 		<h3>Type</h3>
-			{#if mobile }
+		{#if mobile}
 			<select bind:value={current_type}>
 				{#each types as [name, type]}
-						<option
+					<option value={type}>
-							value={type}
-						>
 						{name}
 					</option>
 				{/each}
@@ -54,31 +46,25 @@
 		{: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"/>
+			<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'}
 		</button>
 	</div>
-	</div>
+</div>
-
 
 <style>
 	.easing-sidebar {
@@ -99,7 +85,7 @@
 		background: #eee;
 		border-radius: 2px;
 		margin: 3px 0;
-		cursor:pointer;
+		cursor: pointer;
 	}
 
 	li:hover {
@@ -139,7 +125,7 @@
 
 	.duration input {
 		width: 80px;
-		margin: 10px 10px 10px 0 ;
+		margin: 10px 10px 10px 0;
 	}
 
 	.duration button {
@@ -155,7 +141,7 @@
 		width: 100%;
 	}
 
-	@media (max-width:600px) {
+	@media (max-width: 600px) {
 		.easing-types {
 			display: flex;
 			align-items: center;

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

@@ -1,56 +1,34 @@
+<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 {
-		stroke:#ccc;
+		stroke: #ccc;
 		opacity: 0.5;
 		stroke-width: 2;
 	}

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,8 +74,9 @@
 		stroke: #666;
 	}
 
-	.second, .second-counterweight {
+	.second,
-		stroke: rgb(180,0,0);
+	.second-counterweight {
+		stroke: rgb(180, 0, 0);
 	}
 
 	.second-counterweight {

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,10 +19,10 @@
 
 	$: 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) {
+	function formatMobile(tick) {
 		return "'" + tick.toString().slice(-2);
 	}
 </script>
@@ -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}
@@ -44,23 +44,29 @@
 		<!-- x axis -->
 		<g class="axis x-axis">
 			{#each xTicks as tick}
-				<g class="tick tick-{ tick }" transform="translate({xScale(tick)},{height})">
+				<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;
 	}
 
@@ -99,13 +105,13 @@
 
 	.path-line {
 		fill: none;
-		stroke: rgb(0,100,100);
+		stroke: rgb(0, 100, 100);
 		stroke-linejoin: round;
 		stroke-linecap: round;
 		stroke-width: 2;
 	}
 
 	.path-area {
-		fill: rgba(0,100,100,0.2);
+		fill: rgba(0, 100, 100, 0.2);
 	}
 </style>

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

@@ -6,10 +6,10 @@
 <div class="chart">
 	<h2>Anscombe's quartet</h2>
 
-	<Scatterplot points={data.a}/>
+	<Scatterplot points={data.a} />
-	<Scatterplot points={data.b}/>
+	<Scatterplot points={data.b} />
-	<Scatterplot points={data.c}/>
+	<Scatterplot points={data.c} />
-	<Scatterplot points={data.d}/>
+	<Scatterplot points={data.d} />
 </div>
 
 <style>

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>
 
@@ -72,7 +68,7 @@
 	circle {
 		fill: orange;
 		fill-opacity: 0.6;
-		stroke: rgba(0,0,0,0.5);
+		stroke: rgba(0, 0, 0, 0.5);
 	}
 
 	.tick line {

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 {
@@ -61,7 +55,7 @@
 		position: absolute;
 		left: 50%;
 		top: 50%;
-		transform: translate(-50%,-50%);
+		transform: translate(-50%, -50%);
 		font-family: 'Overpass';
 		letter-spacing: 0.12em;
 		color: #676778;

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>
@@ -7,7 +7,7 @@
 		width: 300px;
 		border: 1px solid #aaa;
 		border-radius: 2px;
-		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
 		padding: 1em;
 		margin: 0 0 1em 0;
 	}

documentation/content/examples/15-composition/01-slot-fallbacks/App.svelte

@@ -7,4 +7,4 @@
 	<p>This is a box. It can contain anything.</p>
 </Box>
 
-<Box/>
+<Box />

documentation/content/examples/15-composition/01-slot-fallbacks/Box.svelte

@@ -9,7 +9,7 @@
 		width: 300px;
 		border: 1px solid #aaa;
 		border-radius: 2px;
-		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
 		padding: 1em;
 		margin: 0 0 1em 0;
 	}

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

@@ -23,17 +23,18 @@
 		width: 300px;
 		border: 1px solid #aaa;
 		border-radius: 2px;
-		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
 		padding: 1em;
 	}
 
 	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

@@ -4,10 +4,10 @@
 </script>
 
 <Map lat={35} lon={-84} zoom={3.5}>
-	<MapMarker lat={37.8225} lon={-122.0024} label="Svelte Body Shaping"/>
+	<MapMarker lat={37.8225} lon={-122.0024} label="Svelte Body Shaping" />
-	<MapMarker lat={33.8981} lon={-118.4169} label="Svelte Barbershop & Essentials"/>
+	<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={28.3378} lon={-81.3966} label="Svelte 30 Nutritional Consultants" />
-	<MapMarker lat={40.6483} lon={-74.0237} label="Svelte Brands LLC"/>
+	<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',
@@ -38,4 +36,4 @@
 	];
 </script>
 
-<Folder name="Home" files={root} expanded/>
+<Folder name="Home" files={root} expanded />

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;
@@ -14,13 +14,13 @@
 <span class:expanded on:click={toggle}>{name}</span>
 
 {#if expanded}
-	<ul transition:slide={{duration:300}}>
+	<ul transition:slide={{ duration: 300 }}>
 		{#each files as file}
 			<li>
 				{#if file.type === 'folder'}
-					<svelte:self {...file}/>
+					<svelte:self {...file} />
 				{:else}
-					<File {...file}/>
+					<File {...file} />
 				{/if}
 			</li>
 		{/each}

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];
@@ -18,4 +18,4 @@
 	{/each}
 </select>
 
-<svelte:component this={selected.component}/>
+<svelte:component this={selected.component} />

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

@@ -8,7 +8,7 @@
 	}
 </script>
 
-<svelte:window on:keydown={handleKeydown}/>
+<svelte:window on:keydown={handleKeydown} />
 
 <div style="text-align: center">
 	{#if key}
@@ -33,10 +33,10 @@
 		border-radius: 4px;
 		font-size: 6em;
 		padding: 0.2em 0.5em;
-		border-top: 5px solid rgba(255,255,255,0.5);
+		border-top: 5px solid rgba(255, 255, 255, 0.5);
-		border-left: 5px solid rgba(255,255,255,0.5);
+		border-left: 5px solid rgba(255, 255, 255, 0.5);
-		border-right: 5px solid rgba(0,0,0,0.2);
+		border-right: 5px solid rgba(0, 0, 0, 0.2);
-		border-bottom: 5px solid rgba(0,0,0,0.2);
+		border-bottom: 5px solid rgba(0, 0, 0, 0.2);
 		color: #555;
 	}
 </style>

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

@@ -4,22 +4,20 @@
 	let y;
 </script>
 
-<svelte:window bind:scrollY={y}/>
+<svelte:window bind:scrollY={y} />
 
 <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
@@ -32,7 +30,7 @@
 		width: 2400px;
 		height: 712px;
 		left: 50%;
-		transform: translate(-50%,0);
+		transform: translate(-50%, 0);
 	}
 
 	.parallax-container img {
@@ -48,14 +46,14 @@
 		position: absolute;
 		width: 100%;
 		height: 100%;
-		background: rgb(45,10,13);
+		background: rgb(45, 10, 13);
 	}
 
 	.text {
 		position: relative;
 		width: 100%;
 		height: 300vh;
-		color: rgb(220,113,43);
+		color: rgb(220, 113, 43);
 		text-align: center;
 		padding: 4em 0.5em 0.5em 0.5em;
 		box-sizing: border-box;
@@ -75,7 +73,7 @@
 		left: 0;
 		width: 100%;
 		height: calc(100% - 712px);
-		background-color: rgb(32,0,1);
+		background-color: rgb(32, 0, 1);
 		color: white;
 		padding: 50vh 0 0 0;
 	}

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;