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,11 +75,11 @@ 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
-- The `let:` directive has no effect, because custom elements do not have a way to pass data to the parent component that fills the slot 
+- The `let:` directive has no effect, because custom elements do not have a way to pass data to the parent component that fills the slot
 - Polyfills are required to support older browsers
 
-When a custom element written with Svelte is created or updated, the shadow dom will reflect the value in the next tick, not immediately. This way updates can be batched, and DOM moves which temporarily (but synchronously) detach the element from the DOM don't lead to unmounting the inner component.
+When a custom element written with Svelte is created or updated, the shadow dom will reflect the value in the next tick, not immediately. This way updates can be batched, and DOM moves which temporarily (but synchronously) detach the element from the DOM don't lead to unmounting the inner component.

documentation/content/examples/00-introduction/00-hello-world/App.svelte

@@ -2,4 +2,4 @@
 	let name = 'world';
 </script>
 
-<h1>Hello {name}!</h1>
+<h1>Hello {name}!</h1>

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

@@ -6,4 +6,4 @@
 		font-family: 'Comic Sans MS', cursive;
 		font-size: 2em;
 	}
-</style>
+</style>

documentation/content/examples/00-introduction/03-nested-components/App.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <p>These styles...</p>
-<Nested/>
+<Nested />
 
 <style>
 	p {
@@ -11,4 +11,4 @@
 		font-family: 'Comic Sans MS', cursive;
 		font-size: 2em;
 	}
-</style>
+</style>

documentation/content/examples/00-introduction/03-nested-components/Nested.svelte

@@ -1 +1 @@
-<p>...don't affect this element</p>
+<p>...don't affect this element</p>

documentation/content/examples/00-introduction/04-html-tags/App.svelte

@@ -2,4 +2,4 @@
 	let string = `here's some <strong>HTML!!!</strong>`;
 </script>
 
-<p>{@html string}</p>
+<p>{@html string}</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}
-</button>
+	{count === 1 ? 'time' : 'times'}
+</button>

documentation/content/examples/01-reactivity/01-reactive-declarations/App.svelte

@@ -15,4 +15,4 @@
 </button>
 
 <p>{count} * 2 = {doubled}</p>
-<p>{doubled} * 2 = {quadrupled}</p>
+<p>{doubled} * 2 = {quadrupled}</p>

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}
-</button>
+	{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/00-declaring-props/Nested.svelte

@@ -2,4 +2,4 @@
 	export let answer;
 </script>
 
-<p>The answer is {answer}</p>
+<p>The answer is {answer}</p>

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/01-default-values/Nested.svelte

@@ -2,4 +2,4 @@
 	export let answer = 'a mystery';
 </script>
 
-<p>The answer is {answer}</p>
+<p>The answer is {answer}</p>

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>
+</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
+{/if}
-	</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
+{/if}
-	</button>
-{/if}

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

@@ -8,4 +8,4 @@
 	<p>{x} is less than 5</p>
 {:else}
 	<p>{x} is between 5 and 10</p>
-{/if}
+{/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/04-keyed-each-blocks/Thing.svelte

@@ -21,4 +21,4 @@
 		border-radius: 0.2em;
 		color: white;
 	}
-</style>
+</style>

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 {
-</style>
+		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 {
-</style>
+		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 {
@@ -19,4 +17,4 @@
 		background-position: 0;
 		color: #aaa;
 	}
-</style>
+</style>

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>
+<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>
+<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 {
-</style>
+		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;
-</style>
+	}
+	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>
+</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}
-</p>
+	{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,10 +39,12 @@
 				});
 
 				setTimeout(() => {
-					comments = comments.filter(comment => !comment.placeholder).concat({
+					comments = comments
-						author: 'eliza',
+						.filter((comment) => !comment.placeholder)
-						text: reply
+						.concat({
-					});
+							author: 'eliza',
+							text: reply
+						});
 				}, 500 + Math.random() * 500);
 			}, 200 + Math.random() * 200);
 		}
@@ -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,11 +21,11 @@
 	}
 </script>
 
-<textarea value={text} on:keydown={handleKeydown}></textarea>
+<textarea value={text} on:keydown={handleKeydown} />
 
 <style>
 	textarea {
 		width: 100%;
 		height: 200px;
 	}
-</style>
+</style>

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

@@ -9,4 +9,4 @@
 	});
 </script>
 
-<h1>The time is {formatter.format($time)}</h1>
+<h1>The time is {formatter.format($time)}</h1>

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}
-</p>
+	{$elapsed === 1 ? 'second' : 'seconds'}
+</p>

documentation/content/examples/07-stores/04-custom-stores/App.svelte

@@ -6,4 +6,4 @@
 
 <button on:click={count.increment}>+</button>
 <button on:click={count.decrement}>-</button>
-<button on:click={count.reset}>reset</button>
+<button on:click={count.reset}>reset</button>

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

@@ -8,31 +8,21 @@
 	});
 </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 {
 		display: block;
 		width: 100%;
 	}
-</style>
+</style>

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(
-		stiffness: 0.1,
+		{ x: 50, y: 50 },
-		damping: 0.25
+		{
-	});
+			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%;
-</style>
+		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
+{/if}
-	</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
+{/if}
-	</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
+{/if}
-	</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>
+</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,18 +8,18 @@
 <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>
-{/if}
+{/if}

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"
+					<p class="credit">
-						on:click="{() => selected = null}"
+						<a target="_blank" rel="noreferrer" href="https://www.flickr.com/photos/{d.path}"
-					>
+							>via Flickr</a
-
+						>
-					<p class='credit'>
+						&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>
+</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;
 	}
@@ -144,4 +139,4 @@
 	label:hover button {
 		opacity: 1;
 	}
-</style>
+</style>

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

@@ -15,71 +15,57 @@
 </script>
 
 <div class="easing-sidebar">
-		<div class="easing-types">
+	<div class="easing-types">
-			<h3>Ease</h3>
+		<h3>Ease</h3>
-			{#if mobile}
+		{#if mobile}
-				<select bind:value={current_ease}>
+			<select bind:value={current_ease}>
-					{#each [...eases] as [name]}
+				{#each [...eases] as [name]}
-						<option
+					<option value={name} class:selected={name === current_ease}>
-							value={name}
+						{name}
-							class:selected={name === current_ease}
+					</option>
-						>
+				{/each}
-							{name}
+			</select>
-						</option>
+		{:else}
-					{/each}
+			<ul>
-				</select>
+				{#each [...eases] as [name]}
-			{:else}
+					<li class:selected={name === current_ease} on:click={() => (current_ease = name)}>
-				<ul>
+						{name}
-					{#each [...eases] as [name]}
-						<li
-							class:selected={name === current_ease}
-							on:click={() => current_ease = name}
-						>
-							{name}
-						</li>
-					{/each}
-				</ul>
-			{/if}
-			<h3>Type</h3>
-			{#if mobile }
-				<select bind:value={current_type}>
-					{#each types as [name, type]}
-						<option
-							value={type}
-						>
-							{name}
-						</option>
-					{/each}
-				</select>
-			{:else}
-				<ul>
-					{#each types as [name, type]}
-						<li
-							class:selected={type === current_type}
-							on:click={() => current_type = type}
-						>
-							{name}
 					</li>
-					{/each}
+				{/each}
-				</ul>
+			</ul>
-			{/if}
+		{/if}
-		</div>
+		<h3>Type</h3>
-		<h4>
+		{#if mobile}
-			Duration
+			<select bind:value={current_type}>
-		</h4>
+				{#each types as [name, type]}
-		<div class="duration">
+					<option value={type}>
-			<span>
+						{name}
-				<input type="number" bind:value={duration} min="0" step="100"/>
+					</option>
-				<button class="number" on:click={() => duration -= 100}>-</button>
+				{/each}
-				<button class="number" on:click={() => duration += 100}>+</button>
+			</select>
-			</span>
+		{:else}
-			<button class="play" on:click={() => dispatch('play')}>
+			<ul>
-				{playing ? 'Restart' : 'Play'}
+				{#each types as [name, type]}
-			</button>
+					<li class:selected={type === current_type} on:click={() => (current_type = type)}>
-		</div>
+						{name}
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+	<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>
+		</span>
+		<button class="play" on:click={() => dispatch('play')}>
+			{playing ? 'Restart' : 'Play'}
+		</button>
 	</div>
+</div>
 
-	
 <style>
 	.easing-sidebar {
 		width: 11em;
@@ -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;
@@ -184,4 +170,4 @@
 			margin-right: 10px;
 		}
 	}
-</style>
+</style>

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,11 +74,12 @@
 		stroke: #666;
 	}
 
-	.second, .second-counterweight {
+	.second,
-		stroke: rgb(180,0,0);
+	.second-counterweight {
+		stroke: rgb(180, 0, 0);
 	}
 
 	.second-counterweight {
 		stroke-width: 3;
 	}
-</style>
+</style>

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>
+</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>
@@ -21,4 +21,4 @@
 		max-height: 480px;
 		margin: 0 auto;
 	}
-</style>
+</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 {
@@ -92,4 +88,4 @@
 	.y-axis text {
 		text-anchor: end;
 	}
-</style>
+</style>

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;
@@ -71,4 +65,4 @@
 	.centered span {
 		will-change: filter;
 	}
-</style>
+</style>

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,15 +6,16 @@
 </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>
-{/if}
+{/if}

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(
-		stiffness: 0.2,
+		{ x: 0, y: 0 },
-		damping: 0.4
+		{
-	});
+			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 {
@@ -48,4 +52,4 @@
 		background-color: #ff3e00;
 		cursor: move;
 	}
-</style>
+</style>

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 {
@@ -26,4 +17,4 @@
 		background-color: #ff3e00;
 		color: white;
 	}
-</style>
+</style>

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>
 
@@ -15,4 +15,4 @@
 	.big {
 		font-size: 4em;
 	}
-</style>
+</style>

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

@@ -5,4 +5,4 @@
 <Box>
 	<h2>Hello!</h2>
 	<p>This is a box. It can contain anything.</p>
-</Box>
+</Box>

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

@@ -1,5 +1,5 @@
 <div class="box">
-	<slot></slot>
+	<slot />
 </div>
 
 <style>
@@ -7,8 +7,8 @@
 		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;
 	}
-</style>
+</style>

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,8 +9,8 @@
 		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;
 	}
-</style>
+</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>
+</ContactCard>

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

@@ -23,25 +23,32 @@
 		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: 0 0 no-repeat;
 		background-size: 20px 20px;
 		margin: 0 0 0.5em 0;
 		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/App.svelte

@@ -43,7 +43,7 @@
 		background-color: #ff3e00;
 		color: white;
 	}
-	
+
 	p {
 		pointer-events: none;
 	}

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>
+</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/04-conditional-slots/Profile.svelte

@@ -21,4 +21,4 @@
 		border: 1px solid #888;
 		margin-bottom: 16px;
 	}
-</style>
+</style>

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>
+</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])
+</script>
-		.setPopup(popup)
-		.addTo(map);
-</script>