diff --git a/documentation/content/docs/02-template-syntax/07-special-elements.md b/documentation/content/docs/02-template-syntax/07-special-elements.md
index a74eae55ac..d3b94b4237 100644
--- a/documentation/content/docs/02-template-syntax/07-special-elements.md
+++ b/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
- on:visibilitychange={handleVisibilityChange}
- use:someAction
-/>
+<svelte:document on:visibilitychange={handleVisibilityChange} use:someAction />
```
You can also bind to the following properties:
diff --git a/documentation/content/docs/04-compiler-and-api/04-custom-elements-api.md b/documentation/content/docs/04-compiler-and-api/04-custom-elements-api.md
index 555f1ab1f3..e5227943c1 100644
--- a/documentation/content/docs/04-compiler-and-api/04-custom-elements-api.md
+++ b/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",
- shadow: "none",
+ tag: 'custom-element',
+ 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.
\ No newline at end of file
+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.
diff --git a/documentation/content/examples/00-introduction/00-hello-world/App.svelte b/documentation/content/examples/00-introduction/00-hello-world/App.svelte
index 22b3c84db0..aa19c0abc4 100644
--- a/documentation/content/examples/00-introduction/00-hello-world/App.svelte
+++ b/documentation/content/examples/00-introduction/00-hello-world/App.svelte
@@ -2,4 +2,4 @@
let name = 'world';
</script>
-<h1>Hello {name}!</h1>
\ No newline at end of file
+<h1>Hello {name}!</h1>
diff --git a/documentation/content/examples/00-introduction/01-dynamic-attributes/App.svelte b/documentation/content/examples/00-introduction/01-dynamic-attributes/App.svelte
index 6a1ac86e69..18259f27b0 100644
--- a/documentation/content/examples/00-introduction/01-dynamic-attributes/App.svelte
+++ b/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" />
diff --git a/documentation/content/examples/00-introduction/02-styling/App.svelte b/documentation/content/examples/00-introduction/02-styling/App.svelte
index b3ad2fc8e6..5266147df3 100644
--- a/documentation/content/examples/00-introduction/02-styling/App.svelte
+++ b/documentation/content/examples/00-introduction/02-styling/App.svelte
@@ -6,4 +6,4 @@
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/00-introduction/03-nested-components/App.svelte b/documentation/content/examples/00-introduction/03-nested-components/App.svelte
index 0b200112ab..86f7f3a773 100644
--- a/documentation/content/examples/00-introduction/03-nested-components/App.svelte
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/00-introduction/03-nested-components/Nested.svelte b/documentation/content/examples/00-introduction/03-nested-components/Nested.svelte
index 17685233a5..de5d97fa86 100644
--- a/documentation/content/examples/00-introduction/03-nested-components/Nested.svelte
+++ b/documentation/content/examples/00-introduction/03-nested-components/Nested.svelte
@@ -1 +1 @@
-<p>...don't affect this element</p>
\ No newline at end of file
+<p>...don't affect this element</p>
diff --git a/documentation/content/examples/00-introduction/04-html-tags/App.svelte b/documentation/content/examples/00-introduction/04-html-tags/App.svelte
index 4029f076e2..ebc5ade2bb 100644
--- a/documentation/content/examples/00-introduction/04-html-tags/App.svelte
+++ b/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>
\ No newline at end of file
+<p>{@html string}</p>
diff --git a/documentation/content/examples/01-reactivity/00-reactive-assignments/App.svelte b/documentation/content/examples/01-reactivity/00-reactive-assignments/App.svelte
index bc50d74cfc..6d78f949e1 100644
--- a/documentation/content/examples/01-reactivity/00-reactive-assignments/App.svelte
+++ b/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'}
-</button>
\ No newline at end of file
+ Clicked {count}
+ {count === 1 ? 'time' : 'times'}
+</button>
diff --git a/documentation/content/examples/01-reactivity/01-reactive-declarations/App.svelte b/documentation/content/examples/01-reactivity/01-reactive-declarations/App.svelte
index f7aca3bd80..7d2eafba9f 100644
--- a/documentation/content/examples/01-reactivity/01-reactive-declarations/App.svelte
+++ b/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>
\ No newline at end of file
+<p>{doubled} * 2 = {quadrupled}</p>
diff --git a/documentation/content/examples/01-reactivity/02-reactive-statements/App.svelte b/documentation/content/examples/01-reactivity/02-reactive-statements/App.svelte
index f757be6f51..99590c87d7 100644
--- a/documentation/content/examples/01-reactivity/02-reactive-statements/App.svelte
+++ b/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'}
-</button>
\ No newline at end of file
+ Clicked {count}
+ {count === 1 ? 'time' : 'times'}
+</button>
diff --git a/documentation/content/examples/02-props/00-declaring-props/App.svelte b/documentation/content/examples/02-props/00-declaring-props/App.svelte
index 79d7e6b789..f64b69a87c 100644
--- a/documentation/content/examples/02-props/00-declaring-props/App.svelte
+++ b/documentation/content/examples/02-props/00-declaring-props/App.svelte
@@ -2,4 +2,4 @@
import Nested from './Nested.svelte';
</script>
-<Nested answer={42}/>
\ No newline at end of file
+<Nested answer={42} />
diff --git a/documentation/content/examples/02-props/00-declaring-props/Nested.svelte b/documentation/content/examples/02-props/00-declaring-props/Nested.svelte
index ecd3cb6254..7267c0edea 100644
--- a/documentation/content/examples/02-props/00-declaring-props/Nested.svelte
+++ b/documentation/content/examples/02-props/00-declaring-props/Nested.svelte
@@ -2,4 +2,4 @@
export let answer;
</script>
-<p>The answer is {answer}</p>
\ No newline at end of file
+<p>The answer is {answer}</p>
diff --git a/documentation/content/examples/02-props/01-default-values/App.svelte b/documentation/content/examples/02-props/01-default-values/App.svelte
index f9d63b30d6..27e880eb5c 100644
--- a/documentation/content/examples/02-props/01-default-values/App.svelte
+++ b/documentation/content/examples/02-props/01-default-values/App.svelte
@@ -2,5 +2,5 @@
import Nested from './Nested.svelte';
</script>
-<Nested answer={42}/>
-<Nested/>
\ No newline at end of file
+<Nested answer={42} />
+<Nested />
diff --git a/documentation/content/examples/02-props/01-default-values/Nested.svelte b/documentation/content/examples/02-props/01-default-values/Nested.svelte
index 35ee5c9f88..3efe9ccb75 100644
--- a/documentation/content/examples/02-props/01-default-values/Nested.svelte
+++ b/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>
\ No newline at end of file
+<p>The answer is {answer}</p>
diff --git a/documentation/content/examples/02-props/02-spread-props/App.svelte b/documentation/content/examples/02-props/02-spread-props/App.svelte
index 7071bdbbb7..d2f97713d1 100644
--- a/documentation/content/examples/02-props/02-spread-props/App.svelte
+++ b/documentation/content/examples/02-props/02-spread-props/App.svelte
@@ -9,4 +9,4 @@
};
</script>
-<Info {...pkg}/>
\ No newline at end of file
+<Info {...pkg} />
diff --git a/documentation/content/examples/02-props/02-spread-props/Info.svelte b/documentation/content/examples/02-props/02-spread-props/Info.svelte
index 7412398244..241b84a9af 100644
--- a/documentation/content/examples/02-props/02-spread-props/Info.svelte
+++ b/documentation/content/examples/02-props/02-spread-props/Info.svelte
@@ -6,7 +6,7 @@
</script>
<p>
- The <code>{name}</code> package is {speed} fast.
- Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
+ The <code>{name}</code> package is {speed} fast. Download version {version} from
+ <a href="https://www.npmjs.com/package/{name}">npm</a>
and <a href={website}>learn more here</a>
-</p>
\ No newline at end of file
+</p>
diff --git a/documentation/content/examples/03-logic/00-if-blocks/App.svelte b/documentation/content/examples/03-logic/00-if-blocks/App.svelte
index 01b8867ade..d986710847 100644
--- a/documentation/content/examples/03-logic/00-if-blocks/App.svelte
+++ b/documentation/content/examples/03-logic/00-if-blocks/App.svelte
@@ -7,13 +7,9 @@
</script>
{#if user.loggedIn}
- <button on:click={toggle}>
- Log out
- </button>
+ <button on:click={toggle}> Log out </button>
{/if}
{#if !user.loggedIn}
- <button on:click={toggle}>
- Log in
- </button>
-{/if}
\ No newline at end of file
+ <button on:click={toggle}> Log in </button>
+{/if}
diff --git a/documentation/content/examples/03-logic/01-else-blocks/App.svelte b/documentation/content/examples/03-logic/01-else-blocks/App.svelte
index c82565c2f7..146e54bcc0 100644
--- a/documentation/content/examples/03-logic/01-else-blocks/App.svelte
+++ b/documentation/content/examples/03-logic/01-else-blocks/App.svelte
@@ -7,11 +7,7 @@
</script>
{#if user.loggedIn}
- <button on:click={toggle}>
- Log out
- </button>
+ <button on:click={toggle}> Log out </button>
{:else}
- <button on:click={toggle}>
- Log in
- </button>
-{/if}
\ No newline at end of file
+ <button on:click={toggle}> Log in </button>
+{/if}
diff --git a/documentation/content/examples/03-logic/02-else-if-blocks/App.svelte b/documentation/content/examples/03-logic/02-else-if-blocks/App.svelte
index 9102618ff4..2b740dbf9b 100644
--- a/documentation/content/examples/03-logic/02-else-if-blocks/App.svelte
+++ b/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}
\ No newline at end of file
+{/if}
diff --git a/documentation/content/examples/03-logic/04-keyed-each-blocks/App.svelte b/documentation/content/examples/03-logic/04-keyed-each-blocks/App.svelte
index b4f300668c..4f26f709e2 100644
--- a/documentation/content/examples/03-logic/04-keyed-each-blocks/App.svelte
+++ b/documentation/content/examples/03-logic/04-keyed-each-blocks/App.svelte
@@ -14,22 +14,20 @@
}
</script>
-<button on:click={handleClick}>
- Remove first thing
-</button>
+<button on:click={handleClick}> 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>
diff --git a/documentation/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte b/documentation/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte
index 28c3c65d05..7d069ea7e4 100644
--- a/documentation/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte
+++ b/documentation/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte
@@ -21,4 +21,4 @@
border-radius: 0.2em;
color: white;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/03-logic/05-await-blocks/App.svelte b/documentation/content/examples/03-logic/05-await-blocks/App.svelte
index a6d0346733..fa1e4fe9cb 100644
--- a/documentation/content/examples/03-logic/05-await-blocks/App.svelte
+++ b/documentation/content/examples/03-logic/05-await-blocks/App.svelte
@@ -17,9 +17,7 @@
}
</script>
-<button on:click={handleClick}>
- generate random number
-</button>
+<button on:click={handleClick}> generate random number </button>
{#await promise}
<p>...waiting</p>
diff --git a/documentation/content/examples/04-events/00-dom-events/App.svelte b/documentation/content/examples/04-events/00-dom-events/App.svelte
index de1f664112..54470a9a5e 100644
--- a/documentation/content/examples/04-events/00-dom-events/App.svelte
+++ b/documentation/content/examples/04-events/00-dom-events/App.svelte
@@ -12,5 +12,8 @@
</div>
<style>
- div { width: 100%; height: 100%; }
-</style>
\ No newline at end of file
+ div {
+ width: 100%;
+ height: 100%;
+ }
+</style>
diff --git a/documentation/content/examples/04-events/01-inline-handlers/App.svelte b/documentation/content/examples/04-events/01-inline-handlers/App.svelte
index 36fed40a4f..24127035ad 100644
--- a/documentation/content/examples/04-events/01-inline-handlers/App.svelte
+++ b/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%; }
-</style>
\ No newline at end of file
+ div {
+ width: 100%;
+ height: 100%;
+ }
+</style>
diff --git a/documentation/content/examples/04-events/02-event-modifiers/App.svelte b/documentation/content/examples/04-events/02-event-modifiers/App.svelte
index 94df49cb2d..c22168901f 100644
--- a/documentation/content/examples/04-events/02-event-modifiers/App.svelte
+++ b/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}>
- Click me
-</button>
\ No newline at end of file
+<button on:click|once={handleClick}> Click me </button>
diff --git a/documentation/content/examples/04-events/03-component-events/App.svelte b/documentation/content/examples/04-events/03-component-events/App.svelte
index a8d14a368a..3600b45efd 100644
--- a/documentation/content/examples/04-events/03-component-events/App.svelte
+++ b/documentation/content/examples/04-events/03-component-events/App.svelte
@@ -6,4 +6,4 @@
}
</script>
-<Inner on:message={handleMessage}/>
\ No newline at end of file
+<Inner on:message={handleMessage} />
diff --git a/documentation/content/examples/04-events/03-component-events/Inner.svelte b/documentation/content/examples/04-events/03-component-events/Inner.svelte
index 6ac8301f24..c2e85b4c97 100644
--- a/documentation/content/examples/04-events/03-component-events/Inner.svelte
+++ b/documentation/content/examples/04-events/03-component-events/Inner.svelte
@@ -10,6 +10,4 @@
}
</script>
-<button on:click={sayHello}>
- Click to say hello
-</button>
\ No newline at end of file
+<button on:click={sayHello}> Click to say hello </button>
diff --git a/documentation/content/examples/04-events/04-event-forwarding/App.svelte b/documentation/content/examples/04-events/04-event-forwarding/App.svelte
index 973df50f0a..2e8e743f4e 100644
--- a/documentation/content/examples/04-events/04-event-forwarding/App.svelte
+++ b/documentation/content/examples/04-events/04-event-forwarding/App.svelte
@@ -6,4 +6,4 @@
}
</script>
-<Outer on:message={handleMessage}/>
\ No newline at end of file
+<Outer on:message={handleMessage} />
diff --git a/documentation/content/examples/04-events/04-event-forwarding/Inner.svelte b/documentation/content/examples/04-events/04-event-forwarding/Inner.svelte
index 6ac8301f24..c2e85b4c97 100644
--- a/documentation/content/examples/04-events/04-event-forwarding/Inner.svelte
+++ b/documentation/content/examples/04-events/04-event-forwarding/Inner.svelte
@@ -10,6 +10,4 @@
}
</script>
-<button on:click={sayHello}>
- Click to say hello
-</button>
\ No newline at end of file
+<button on:click={sayHello}> Click to say hello </button>
diff --git a/documentation/content/examples/04-events/04-event-forwarding/Outer.svelte b/documentation/content/examples/04-events/04-event-forwarding/Outer.svelte
index 10c28f298a..62a5d1d852 100644
--- a/documentation/content/examples/04-events/04-event-forwarding/Outer.svelte
+++ b/documentation/content/examples/04-events/04-event-forwarding/Outer.svelte
@@ -2,4 +2,4 @@
import Inner from './Inner.svelte';
</script>
-<Inner on:message/>
\ No newline at end of file
+<Inner on:message />
diff --git a/documentation/content/examples/04-events/05-dom-event-forwarding/App.svelte b/documentation/content/examples/04-events/05-dom-event-forwarding/App.svelte
index e75c78106a..4e5764a310 100644
--- a/documentation/content/examples/04-events/05-dom-event-forwarding/App.svelte
+++ b/documentation/content/examples/04-events/05-dom-event-forwarding/App.svelte
@@ -6,4 +6,4 @@
}
</script>
-<CustomButton on:click={handleClick}/>
\ No newline at end of file
+<CustomButton on:click={handleClick} />
diff --git a/documentation/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte b/documentation/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte
index 4004ffbf29..1f90fac103 100644
--- a/documentation/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte
+++ b/documentation/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte
@@ -1,6 +1,4 @@
-<button on:click>
- Click me
-</button>
+<button on:click> Click me </button>
<style>
button {
@@ -19,4 +17,4 @@
background-position: 0;
color: #aaa;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/05-bindings/00-text-inputs/App.svelte b/documentation/content/examples/05-bindings/00-text-inputs/App.svelte
index 5eab79764a..9ec139df21 100644
--- a/documentation/content/examples/05-bindings/00-text-inputs/App.svelte
+++ b/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">
-<p>Hello {name || 'stranger'}!</p>
\ No newline at end of file
+<input bind:value={name} placeholder="enter your name" />
+<p>Hello {name || 'stranger'}!</p>
diff --git a/documentation/content/examples/05-bindings/01-numeric-inputs/App.svelte b/documentation/content/examples/05-bindings/01-numeric-inputs/App.svelte
index 798d57e021..15ef23c466 100644
--- a/documentation/content/examples/05-bindings/01-numeric-inputs/App.svelte
+++ b/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=range 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" />
</label>
<label>
- <input type=number bind:value={b} min=0 max=10>
- <input type=range 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" />
</label>
-<p>{a} + {b} = {a + b}</p>
\ No newline at end of file
+<p>{a} + {b} = {a + b}</p>
diff --git a/documentation/content/examples/05-bindings/02-checkbox-inputs/App.svelte b/documentation/content/examples/05-bindings/02-checkbox-inputs/App.svelte
index 1831da1793..b337359317 100644
--- a/documentation/content/examples/05-bindings/02-checkbox-inputs/App.svelte
+++ b/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}>
- Subscribe
-</button>
\ No newline at end of file
+<button disabled={!yes}> Subscribe </button>
diff --git a/documentation/content/examples/05-bindings/03-group-inputs/App.svelte b/documentation/content/examples/05-bindings/03-group-inputs/App.svelte
index a46c61c7e7..0ab215d519 100644
--- a/documentation/content/examples/05-bindings/03-group-inputs/App.svelte
+++ b/documentation/content/examples/05-bindings/03-group-inputs/App.svelte
@@ -2,11 +2,7 @@
let scoops = 1;
let flavours = ['Mint choc chip'];
- let menu = [
- 'Cookies and cream',
- 'Mint choc chip',
- 'Raspberry ripple'
- ];
+ let menu = ['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}
diff --git a/documentation/content/examples/05-bindings/04-textarea-inputs/App.svelte b/documentation/content/examples/05-bindings/04-textarea-inputs/App.svelte
index 19a2814c9f..ecb809095d 100644
--- a/documentation/content/examples/05-bindings/04-textarea-inputs/App.svelte
+++ b/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>
diff --git a/documentation/content/examples/05-bindings/05-file-inputs/App.svelte b/documentation/content/examples/05-bindings/05-file-inputs/App.svelte
index a3334dbd01..fdf478e1bb 100644
--- a/documentation/content/examples/05-bindings/05-file-inputs/App.svelte
+++ b/documentation/content/examples/05-bindings/05-file-inputs/App.svelte
@@ -13,25 +13,14 @@
</script>
<label for="avatar">Upload a picture:</label>
-<input
- accept="image/png, image/jpeg"
- bind:files
- id="avatar"
- name="avatar"
- type="file"
-/>
+<input accept="image/png, image/jpeg" bind:files id="avatar" name="avatar" type="file" />
<label for="many">Upload multiple files of any type:</label>
-<input
- bind:files
- id="many"
- multiple
- type="file"
-/>
+<input 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}
diff --git a/documentation/content/examples/05-bindings/06-select-bindings/App.svelte b/documentation/content/examples/05-bindings/06-select-bindings/App.svelte
index a3607a6f4f..7785258fe2 100644
--- a/documentation/content/examples/05-bindings/06-select-bindings/App.svelte
+++ b/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>
- Submit
- </button>
+ <button disabled={!answer} type="submit"> Submit </button>
</form>
<p>selected question {selected ? selected.id : '[waiting...]'}</p>
<style>
- input { display: block; width: 500px; max-width: 100%; }
-</style>
\ No newline at end of file
+ input {
+ display: block;
+ width: 500px;
+ max-width: 100%;
+ }
+</style>
diff --git a/documentation/content/examples/05-bindings/07-multiple-select-bindings/App.svelte b/documentation/content/examples/05-bindings/07-multiple-select-bindings/App.svelte
index d808850158..2fd19c28ad 100644
--- a/documentation/content/examples/05-bindings/07-multiple-select-bindings/App.svelte
+++ b/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 = [
- 'Cookies and cream',
- 'Mint choc chip',
- 'Raspberry ripple'
- ];
+ let menu = ['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}
diff --git a/documentation/content/examples/05-bindings/08-each-block-bindings/App.svelte b/documentation/content/examples/05-bindings/08-each-block-bindings/App.svelte
index 4d3d75420c..a8118093d3 100644
--- a/documentation/content/examples/05-bindings/08-each-block-bindings/App.svelte
+++ b/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
- type=checkbox
- bind:checked={todo.done}
- >
-
- <input
- placeholder="What needs to be done?"
- bind:value={todo.text}
- disabled={todo.done}
- >
+ <input type="checkbox" bind:checked={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}>
- Add new
-</button>
+<button on:click={add}> Add new </button>
-<button on:click={clear}>
- Clear completed
-</button>
+<button on:click={clear}> Clear completed </button>
diff --git a/documentation/content/examples/05-bindings/09-media-elements/App.svelte b/documentation/content/examples/05-bindings/09-media-elements/App.svelte
index de89b1be8d..836804f8bc 100644
--- a/documentation/content/examples/05-bindings/09-media-elements/App.svelte
+++ b/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>
- <track kind="captions"/>
+ bind:paused
+ >
+ <track kind="captions" />
</video>
<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
- <progress value="{(time / duration) || 0}"/>
+ <progress value={time / duration || 0} />
<div class="info">
<span class="time">{format(time)}</span>
@@ -107,7 +108,9 @@
width: 3em;
}
- .time:last-child { text-align: right }
+ .time:last-child {
+ text-align: right;
+ }
progress {
display: block;
@@ -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 {
diff --git a/documentation/content/examples/05-bindings/10-dimensions/App.svelte b/documentation/content/examples/05-bindings/10-dimensions/App.svelte
index c955aeba8e..4d4a8b2cf2 100644
--- a/documentation/content/examples/05-bindings/10-dimensions/App.svelte
+++ b/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 bind:value={text}>
+<input type="range" bind:value={size} />
+<input bind:value={text} />
<p>size: {w}px x {h}px</p>
@@ -15,6 +15,10 @@
</div>
<style>
- input { display: block; }
- div { display: inline-block; }
-</style>
\ No newline at end of file
+ input {
+ display: block;
+ }
+ div {
+ display: inline-block;
+ }
+</style>
diff --git a/documentation/content/examples/05-bindings/11-bind-this/App.svelte b/documentation/content/examples/05-bindings/11-bind-this/App.svelte
index ddf37a9be3..fe0fbe1b01 100644
--- a/documentation/content/examples/05-bindings/11-bind-this/App.svelte
+++ b/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 g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1400));
+ 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 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
- bind:this={canvas}
- width={32}
- height={32}
-></canvas>
+<canvas bind:this={canvas} width={32} height={32} />
<style>
canvas {
diff --git a/documentation/content/examples/05-bindings/12-component-bindings/App.svelte b/documentation/content/examples/05-bindings/12-component-bindings/App.svelte
index 67fec4a5ad..b3666f891d 100644
--- a/documentation/content/examples/05-bindings/12-component-bindings/App.svelte
+++ b/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}/>
\ No newline at end of file
+<Keypad bind:value={pin} on:submit={handleSubmit} />
diff --git a/documentation/content/examples/05-bindings/12-component-bindings/Keypad.svelte b/documentation/content/examples/05-bindings/12-component-bindings/Keypad.svelte
index 631f7964e2..c814a2238f 100644
--- a/documentation/content/examples/05-bindings/12-component-bindings/Keypad.svelte
+++ b/documentation/content/examples/05-bindings/12-component-bindings/Keypad.svelte
@@ -5,8 +5,8 @@
const dispatch = createEventDispatcher();
- const select = num => () => value += num;
- const clear = () => value = '';
+ const select = (num) => () => (value += num);
+ 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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/06-lifecycle/00-onmount/App.svelte b/documentation/content/examples/06-lifecycle/00-onmount/App.svelte
index 06997161f0..c8d1f6092f 100644
--- a/documentation/content/examples/06-lifecycle/00-onmount/App.svelte
+++ b/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;
}
diff --git a/documentation/content/examples/06-lifecycle/01-ondestroy/App.svelte b/documentation/content/examples/06-lifecycle/01-ondestroy/App.svelte
index 93a721ef44..ededcc4f9e 100644
--- a/documentation/content/examples/06-lifecycle/01-ondestroy/App.svelte
+++ b/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'}
-</p>
\ No newline at end of file
+ {seconds}
+ {seconds === 1 ? 'second' : 'seconds'}
+</p>
diff --git a/documentation/content/examples/06-lifecycle/02-update/App.svelte b/documentation/content/examples/06-lifecycle/02-update/App.svelte
index ee3bca32df..fc68cbf99e 100644
--- a/documentation/content/examples/06-lifecycle/02-update/App.svelte
+++ b/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 = [
- { author: 'eliza', text: eliza.getInitial() }
- ];
+ let comments = [{ author: 'eliza', text: eliza.getInitial() }];
function handleKeydown(event) {
if (event.key === 'Enter') {
@@ -41,10 +39,12 @@
});
setTimeout(() => {
- comments = comments.filter(comment => !comment.placeholder).concat({
- author: 'eliza',
- text: reply
- });
+ comments = comments
+ .filter((comment) => !comment.placeholder)
+ .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;
}
diff --git a/documentation/content/examples/06-lifecycle/03-tick/App.svelte b/documentation/content/examples/06-lifecycle/03-tick/App.svelte
index e678020d3d..2f076946b3 100644
--- a/documentation/content/examples/06-lifecycle/03-tick/App.svelte
+++ b/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)
- ? selection.toUpperCase()
- : selection.toLowerCase();
+ const replacement = /[a-z]/.test(selection) ? selection.toUpperCase() : selection.toLowerCase();
- text = (
- value.slice(0, selectionStart) +
- replacement +
- value.slice(selectionEnd)
- );
+ text = 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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/07-stores/00-writable-stores/App.svelte b/documentation/content/examples/07-stores/00-writable-stores/App.svelte
index 61e55401a5..3d301a760f 100644
--- a/documentation/content/examples/07-stores/00-writable-stores/App.svelte
+++ b/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/>
-<Decrementer/>
-<Resetter/>
\ No newline at end of file
+<Incrementer />
+<Decrementer />
+<Resetter />
diff --git a/documentation/content/examples/07-stores/00-writable-stores/Decrementer.svelte b/documentation/content/examples/07-stores/00-writable-stores/Decrementer.svelte
index 043b795047..596ba4bbab 100644
--- a/documentation/content/examples/07-stores/00-writable-stores/Decrementer.svelte
+++ b/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>
\ No newline at end of file
+<button on:click={decrement}> - </button>
diff --git a/documentation/content/examples/07-stores/00-writable-stores/Incrementer.svelte b/documentation/content/examples/07-stores/00-writable-stores/Incrementer.svelte
index 2b5763012b..1fb7dea3cb 100644
--- a/documentation/content/examples/07-stores/00-writable-stores/Incrementer.svelte
+++ b/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>
\ No newline at end of file
+<button on:click={increment}> + </button>
diff --git a/documentation/content/examples/07-stores/00-writable-stores/Resetter.svelte b/documentation/content/examples/07-stores/00-writable-stores/Resetter.svelte
index 4183421e51..9c8809961f 100644
--- a/documentation/content/examples/07-stores/00-writable-stores/Resetter.svelte
+++ b/documentation/content/examples/07-stores/00-writable-stores/Resetter.svelte
@@ -6,6 +6,4 @@
}
</script>
-<button on:click={reset}>
- reset
-</button>
\ No newline at end of file
+<button on:click={reset}> reset </button>
diff --git a/documentation/content/examples/07-stores/01-auto-subscriptions/App.svelte b/documentation/content/examples/07-stores/01-auto-subscriptions/App.svelte
index 10ebfb65bb..9923689329 100644
--- a/documentation/content/examples/07-stores/01-auto-subscriptions/App.svelte
+++ b/documentation/content/examples/07-stores/01-auto-subscriptions/App.svelte
@@ -7,6 +7,6 @@
<h1>The count is {$count}</h1>
-<Incrementer/>
-<Decrementer/>
-<Resetter/>
\ No newline at end of file
+<Incrementer />
+<Decrementer />
+<Resetter />
diff --git a/documentation/content/examples/07-stores/01-auto-subscriptions/Decrementer.svelte b/documentation/content/examples/07-stores/01-auto-subscriptions/Decrementer.svelte
index 043b795047..596ba4bbab 100644
--- a/documentation/content/examples/07-stores/01-auto-subscriptions/Decrementer.svelte
+++ b/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>
\ No newline at end of file
+<button on:click={decrement}> - </button>
diff --git a/documentation/content/examples/07-stores/01-auto-subscriptions/Incrementer.svelte b/documentation/content/examples/07-stores/01-auto-subscriptions/Incrementer.svelte
index 2b5763012b..1fb7dea3cb 100644
--- a/documentation/content/examples/07-stores/01-auto-subscriptions/Incrementer.svelte
+++ b/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>
\ No newline at end of file
+<button on:click={increment}> + </button>
diff --git a/documentation/content/examples/07-stores/01-auto-subscriptions/Resetter.svelte b/documentation/content/examples/07-stores/01-auto-subscriptions/Resetter.svelte
index 4183421e51..9c8809961f 100644
--- a/documentation/content/examples/07-stores/01-auto-subscriptions/Resetter.svelte
+++ b/documentation/content/examples/07-stores/01-auto-subscriptions/Resetter.svelte
@@ -6,6 +6,4 @@
}
</script>
-<button on:click={reset}>
- reset
-</button>
\ No newline at end of file
+<button on:click={reset}> reset </button>
diff --git a/documentation/content/examples/07-stores/02-readable-stores/App.svelte b/documentation/content/examples/07-stores/02-readable-stores/App.svelte
index 3ff0b0362f..6d1d80b455 100644
--- a/documentation/content/examples/07-stores/02-readable-stores/App.svelte
+++ b/documentation/content/examples/07-stores/02-readable-stores/App.svelte
@@ -9,4 +9,4 @@
});
</script>
-<h1>The time is {formatter.format($time)}</h1>
\ No newline at end of file
+<h1>The time is {formatter.format($time)}</h1>
diff --git a/documentation/content/examples/07-stores/03-derived-stores/App.svelte b/documentation/content/examples/07-stores/03-derived-stores/App.svelte
index 8182ecd671..d1013c1a26 100644
--- a/documentation/content/examples/07-stores/03-derived-stores/App.svelte
+++ b/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'}
-</p>
\ No newline at end of file
+ {$elapsed}
+ {$elapsed === 1 ? 'second' : 'seconds'}
+</p>
diff --git a/documentation/content/examples/07-stores/04-custom-stores/App.svelte b/documentation/content/examples/07-stores/04-custom-stores/App.svelte
index a320cc052f..dbdd299d69 100644
--- a/documentation/content/examples/07-stores/04-custom-stores/App.svelte
+++ b/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>
\ No newline at end of file
+<button on:click={count.reset}>reset</button>
diff --git a/documentation/content/examples/08-motion/00-tweened/App.svelte b/documentation/content/examples/08-motion/00-tweened/App.svelte
index ee3c7a1b5d..f4fb499f0f 100644
--- a/documentation/content/examples/08-motion/00-tweened/App.svelte
+++ b/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)}">
- 0%
-</button>
+<button on:click={() => progress.set(0)}> 0% </button>
-<button on:click="{() => progress.set(0.25)}">
- 25%
-</button>
+<button on:click={() => progress.set(0.25)}> 25% </button>
-<button on:click="{() => progress.set(0.5)}">
- 50%
-</button>
+<button on:click={() => progress.set(0.5)}> 50% </button>
-<button on:click="{() => progress.set(0.75)}">
- 75%
-</button>
+<button on:click={() => progress.set(0.75)}> 75% </button>
-<button on:click="{() => progress.set(1)}">
- 100%
-</button>
+<button on:click={() => progress.set(1)}> 100% </button>
<style>
progress {
display: block;
width: 100%;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/08-motion/01-spring/App.svelte b/documentation/content/examples/08-motion/01-spring/App.svelte
index 251bf640ee..59346dcb3b 100644
--- a/documentation/content/examples/08-motion/01-spring/App.svelte
+++ b/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 }, {
- stiffness: 0.1,
- damping: 0.25
- });
+ 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:mousedown="{() => size.set(30)}"
- on:mouseup="{() => size.set(10)}"
+ on:mousemove={(e) => coords.set({ x: e.clientX, y: e.clientY })}
+ on:mousedown={() => size.set(30)}
+ 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 }
- circle { fill: #ff3e00 }
-</style>
\ No newline at end of file
+ svg {
+ width: 100%;
+ height: 100%;
+ margin: -8px;
+ }
+ circle {
+ fill: #ff3e00;
+ }
+</style>
diff --git a/documentation/content/examples/09-transitions/00-transition/App.svelte b/documentation/content/examples/09-transitions/00-transition/App.svelte
index b7909fb86e..29e9254d14 100644
--- a/documentation/content/examples/09-transitions/00-transition/App.svelte
+++ b/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>
- Fades in and out
- </p>
-{/if}
\ No newline at end of file
+ <p transition:fade>Fades in and out</p>
+{/if}
diff --git a/documentation/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte b/documentation/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
index 01047f5e37..318739f1d0 100644
--- a/documentation/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
+++ b/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 }}">
- Flies in and out
- </p>
-{/if}
\ No newline at end of file
+ <p transition:fly={{ y: 200, duration: 2000 }}>Flies in and out</p>
+{/if}
diff --git a/documentation/content/examples/09-transitions/02-in-and-out/App.svelte b/documentation/content/examples/09-transitions/02-in-and-out/App.svelte
index 36d36664e6..bb44e5ca9f 100644
--- a/documentation/content/examples/09-transitions/02-in-and-out/App.svelte
+++ b/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>
- Flies in, fades out
- </p>
-{/if}
\ No newline at end of file
+ <p in:fly={{ y: 200, duration: 2000 }} out:fade>Flies in, fades out</p>
+{/if}
diff --git a/documentation/content/examples/09-transitions/03-custom-css-transitions/App.svelte b/documentation/content/examples/09-transitions/03-custom-css-transitions/App.svelte
index a98f38272a..c85fe7ef89 100644
--- a/documentation/content/examples/09-transitions/03-custom-css-transitions/App.svelte
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/09-transitions/04-custom-js-transitions/App.svelte b/documentation/content/examples/09-transitions/04-custom-js-transitions/App.svelte
index 90701aeab4..9ccd18a0f7 100644
--- a/documentation/content/examples/09-transitions/04-custom-js-transitions/App.svelte
+++ b/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 = (
- node.childNodes.length === 1 &&
- node.childNodes[0].nodeType === Node.TEXT_NODE
- );
+ const valid = 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>
- The quick brown fox jumps over the lazy dog
- </p>
+ <p transition:typewriter>The quick brown fox jumps over the lazy dog</p>
{/if}
diff --git a/documentation/content/examples/09-transitions/05-transition-events/App.svelte b/documentation/content/examples/09-transitions/05-transition-events/App.svelte
index da79897365..31ef18c930 100644
--- a/documentation/content/examples/09-transitions/05-transition-events/App.svelte
+++ b/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 }}"
- on:introstart="{() => status = 'intro started'}"
- on:outrostart="{() => status = 'outro started'}"
- on:introend="{() => status = 'intro ended'}"
- on:outroend="{() => status = 'outro ended'}"
+ transition:fly={{ y: 200, duration: 2000 }}
+ on:introstart={() => (status = 'intro started')}
+ on:outrostart={() => (status = 'outro started')}
+ on:introend={() => (status = 'intro ended')}
+ on:outroend={() => (status = 'outro ended')}
>
Flies in and out
</p>
-{/if}
\ No newline at end of file
+{/if}
diff --git a/documentation/content/examples/09-transitions/06-deferred-transitions/App.svelte b/documentation/content/examples/09-transitions/06-deferred-transitions/App.svelte
index 5ee7da1263..c88ba67d25 100644
--- a/documentation/content/examples/09-transitions/06-deferred-transitions/App.svelte
+++ b/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 timeout = setTimeout(() => loading = image, 100);
+ const load = (image) => {
+ 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)}"
- in:receive={{key:image.id}}
- out:send={{key:image.id}}
- >{loading === image ? '...' : image.id}</button>
+ on:click={() => load(image)}
+ in:receive={{ key: image.id }}
+ out:send={{ key: image.id }}>{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}}>
- <img
- alt={d.alt}
- src="{ASSETS}/{d.id}.jpg"
- on:click="{() => selected = null}"
- >
-
- <p class='credit'>
- <a target="_blank" rel="noreferrer" href="https://www.flickr.com/photos/{d.path}">via Flickr</a> –
+ <div class="photo" in:receive={{ key: d.id }} out:send={{ key: d.id }}>
+ <img alt={d.alt} src="{ASSETS}/{d.id}.jpg" on:click={() => (selected = null)} />
+
+ <p class="credit">
+ <a target="_blank" rel="noreferrer" href="https://www.flickr.com/photos/{d.path}"
+ >via Flickr</a
+ >
+ –
<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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/10-animations/00-animate/App.svelte b/documentation/content/examples/10-animations/00-animate/App.svelte
index d1842671da..7228fee49b 100644
--- a/documentation/content/examples/10-animations/00-animate/App.svelte
+++ b/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)}
- <label
- in:receive="{{key: todo.id}}"
- out:send="{{key: todo.id}}"
- animate:flip
- >
- <input type=checkbox bind:checked={todo.done}>
+ {#each todos.filter((t) => !t.done) as todo (todo.id)}
+ <label in:receive={{ key: todo.id }} 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)}
- <label
- in:receive="{{key: todo.id}}"
- out:send="{{key: todo.id}}"
- animate:flip
- >
- <input type=checkbox bind:checked={todo.done}>
+ {#each todos.filter((t) => t.done) as todo (todo.id)}
+ <label in:receive={{ key: todo.id }} 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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/11-easing/00-easing/App.svelte b/documentation/content/examples/11-easing/00-easing/App.svelte
index 8dd92f2b20..9ebb009a51 100644
--- a/documentation/content/examples/11-easing/00-easing/App.svelte
+++ b/documentation/content/examples/11-easing/00-easing/App.svelte
@@ -21,13 +21,13 @@
async function runAnimations() {
playing = true;
- value.set(1000, {duration: 0});
- time.set(0, {duration: 0});
+ value.set(1000, { duration: 0 });
+ time.set(0, { duration: 0 });
await ease_path.set(current.shape);
await Promise.all([
- time.set(1000, {duration, easing: x => x}),
- value.set(0, {duration, easing: current.fn})
+ time.set(1000, { duration, easing: (x) => x }),
+ 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
- d={$ease_path}
- stroke="#333"
- stroke-width="2"
- fill="none"
- />
+ <path 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
- cx="{$time}"
- cy="{$value}"
- r="15"
- fill="#ff3e00"
- />
+ <circle 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);
diff --git a/documentation/content/examples/11-easing/00-easing/Controls.svelte b/documentation/content/examples/11-easing/00-easing/Controls.svelte
index 3123b8a25b..5b51b8b84b 100644
--- a/documentation/content/examples/11-easing/00-easing/Controls.svelte
+++ b/documentation/content/examples/11-easing/00-easing/Controls.svelte
@@ -15,71 +15,57 @@
</script>
<div class="easing-sidebar">
- <div class="easing-types">
- <h3>Ease</h3>
- {#if mobile}
- <select bind:value={current_ease}>
- {#each [...eases] as [name]}
- <option
- value={name}
- class:selected={name === current_ease}
- >
- {name}
- </option>
- {/each}
- </select>
- {:else}
- <ul>
- {#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}
+ <div class="easing-types">
+ <h3>Ease</h3>
+ {#if mobile}
+ <select bind:value={current_ease}>
+ {#each [...eases] as [name]}
+ <option value={name} class:selected={name === current_ease}>
+ {name}
+ </option>
+ {/each}
+ </select>
+ {:else}
+ <ul>
+ {#each [...eases] as [name]}
+ <li class:selected={name === current_ease} on:click={() => (current_ease = name)}>
+ {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>
+ {/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}
+ </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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/11-easing/00-easing/Grid.svelte b/documentation/content/examples/11-easing/00-easing/Grid.svelte
index c0c9d47913..313b46553a 100644
--- a/documentation/content/examples/11-easing/00-easing/Grid.svelte
+++ b/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
- y=0
- width=1400
- height=1800
- stroke=#ccc
+ x="0"
+ y="0"
+ width="1400"
+ height="1800"
+ stroke="#ccc"
style="opacity: 0.5"
- fill=none
- stroke-width=2
+ fill="none"
+ stroke-width="2"
/>
{#each { length: 8 } as _, i}
{#if i < 6}
- <path
- d="M{(i+1) * 200} 0 L{(i+1)*200} 1802"
- class="grid-line"
- />
+ <path d="M{(i + 1) * 200} 0 L{(i + 1) * 200} 1802" class="grid-line" />
{/if}
- <path
- d="M0 {(i+1) * 200} L1400 {(i+1)*200} "
- class="grid-line"
- />
+ <path d="M0 {(i + 1) * 200} L1400 {(i + 1) * 200} " class="grid-line" />
{/each}
-<path
- style="transform: translateX({x+200}px)"
- d="M0 0 L0 1800"
- 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
-/>
+<path style="transform: translateX({x + 200}px)" d="M0 0 L0 1800" 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;
}
diff --git a/documentation/content/examples/12-svg/01-clock/App.svelte b/documentation/content/examples/12-svg/01-clock/App.svelte
index 44f7e484a1..7548dff2c9 100644
--- a/documentation/content/examples/12-svg/01-clock/App.svelte
+++ b/documentation/content/examples/12-svg/01-clock/App.svelte
@@ -20,48 +20,28 @@
});
</script>
-<svg viewBox='-50 -50 100 100'>
- <circle class='clock-face' r='48'/>
+<svg viewBox="-50 -50 100 100">
+ <circle class="clock-face" r="48" />
<!-- markers -->
{#each [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] as minute}
- <line
- class='major'
- y1='35'
- y2='45'
- transform='rotate({30 * minute})'
- />
+ <line class="major" y1="35" y2="45" transform="rotate({30 * minute})" />
{#each [1, 2, 3, 4] as offset}
- <line
- class='minor'
- y1='42'
- y2='45'
- transform='rotate({6 * (minute + offset)})'
- />
+ <line class="minor" y1="42" y2="45" transform="rotate({6 * (minute + offset)})" />
{/each}
{/each}
<!-- hour hand -->
- <line
- class='hour'
- y1='2'
- y2='-20'
- transform='rotate({30 * hours + minutes / 2})'
- />
+ <line class="hour" y1="2" y2="-20" transform="rotate({30 * hours + minutes / 2})" />
<!-- minute hand -->
- <line
- class='minute'
- y1='4'
- y2='-30'
- transform='rotate({6 * minutes + seconds / 10})'
- />
+ <line class="minute" y1="4" y2="-30" transform="rotate({6 * minutes + seconds / 10})" />
<!-- second hand -->
- <g transform='rotate({6 * seconds})'>
- <line class='second' y1='10' y2='-38'/>
- <line class='second-counterweight' y1='10' y2='2'/>
+ <g transform="rotate({6 * seconds})">
+ <line class="second" y1="10" y2="-38" />
+ <line class="second-counterweight" y1="10" y2="2" />
</g>
</svg>
@@ -94,11 +74,12 @@
stroke: #666;
}
- .second, .second-counterweight {
- stroke: rgb(180,0,0);
+ .second,
+ .second-counterweight {
+ stroke: rgb(180, 0, 0);
}
.second-counterweight {
stroke-width: 3;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/12-svg/02-bar-chart/App.svelte b/documentation/content/examples/12-svg/02-bar-chart/App.svelte
index 7ad21545ff..283b109ac0 100644
--- a/documentation/content/examples/12-svg/02-bar-chart/App.svelte
+++ b/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}"
- y="{yScale(point.birthrate)}"
- width="{barWidth - 4}"
- height="{yScale(0) - yScale(point.birthrate)}"
- ></rect>
+ x={xScale(i) + 2}
+ y={yScale(point.birthrate)}
+ width={barWidth - 4}
+ height={yScale(0) - yScale(point.birthrate)}
+ />
{/each}
</g>
</svg>
@@ -88,7 +88,7 @@
.tick {
font-family: Helvetica, Arial;
- font-size: .725em;
+ font-size: 0.725em;
font-weight: 200;
}
diff --git a/documentation/content/examples/12-svg/03-area-chart/App.svelte b/documentation/content/examples/12-svg/03-area-chart/App.svelte
index 2fe39280e4..2e11ee61c6 100644
--- a/documentation/content/examples/12-svg/03-area-chart/App.svelte
+++ b/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})">
- <line y1="-{height}" y2="-{padding.bottom}" x1="0" x2="0"></line>
+ <g class="tick tick-{tick}" transform="translate({xScale(tick)},{height})">
+ <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-line" d={path}></path>
+ <path class="path-area" d={area} />
+ <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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/12-svg/04-scatterplot/App.svelte b/documentation/content/examples/12-svg/04-scatterplot/App.svelte
index 1ceb1d221c..186193b119 100644
--- a/documentation/content/examples/12-svg/04-scatterplot/App.svelte
+++ b/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.b}/>
- <Scatterplot points={data.c}/>
- <Scatterplot points={data.d}/>
+ <Scatterplot points={data.a} />
+ <Scatterplot points={data.b} />
+ <Scatterplot points={data.c} />
+ <Scatterplot points={data.d} />
</div>
<style>
@@ -21,4 +21,4 @@
max-height: 480px;
margin: 0 auto;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/12-svg/04-scatterplot/Scatterplot.svelte b/documentation/content/examples/12-svg/04-scatterplot/Scatterplot.svelte
index 7ae113ab06..9c0a96efc5 100644
--- a/documentation/content/examples/12-svg/04-scatterplot/Scatterplot.svelte
+++ b/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 ?
- [0, 4, 8, 12, 16, 20] :
- [0, 10, 20];
+ $: xTicks = width > 180 ? [0, 4, 8, 12, 16, 20] : [0, 10, 20];
- $: yTicks = height > 180 ?
- [0, 2, 4, 6, 8, 10, 12] :
- [0, 4, 8, 12];
+ $: yTicks = height > 180 ? [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)})'>
- <line x1='{padding.left}' x2='{xScale(22)}'/>
- <text x='{padding.left - 8}' y='+4'>{tick}</text>
+ <g class="tick tick-{tick}" transform="translate(0, {yScale(tick)})">
+ <line x1={padding.left} x2={xScale(22)} />
+ <text x={padding.left - 8} y="+4">{tick}</text>
</g>
{/each}
</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)'>
- <line y1='{yScale(0)}' y2='{yScale(13)}'/>
- <text y='{height - padding.bottom + 16}'>{tick}</text>
+ <g class="tick" transform="translate({xScale(tick)},0)">
+ <line y1={yScale(0)} y2={yScale(13)} />
+ <text y={height - padding.bottom + 16}>{tick}</text>
</g>
{/each}
</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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/12-svg/05-svg-transitions/App.svelte b/documentation/content/examples/12-svg/05-svg-transitions/App.svelte
index 7f3a774a2c..e0aef64fa4 100644
--- a/documentation/content/examples/12-svg/05-svg-transitions/App.svelte
+++ b/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
- in:draw="{{duration: 1000}}"
- style="stroke:#ff3e00; stroke-width: 1.5"
- d={inner}
- />
+ <path 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
- in:fade="{{delay: 1000 + i * 150, duration: 800}}"
- >{char}</span>
+ <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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/13-actions/00-actions/App.svelte b/documentation/content/examples/13-actions/00-actions/App.svelte
index 79214ec81f..fcd0ca6ae3 100644
--- a/documentation/content/examples/13-actions/00-actions/App.svelte
+++ b/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)}>
- Click outside me!
- </div>
+ <div class="box" use:clickOutside on:outclick={() => (showModal = false)}>Click outside me!</div>
{/if}
<style>
diff --git a/documentation/content/examples/13-actions/01-adding-parameters-to-actions/App.svelte b/documentation/content/examples/13-actions/01-adding-parameters-to-actions/App.svelte
index d6eaa0ff12..23cc9f2f9e 100644
--- a/documentation/content/examples/13-actions/01-adding-parameters-to-actions/App.svelte
+++ b/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}
- on:longpress="{() => pressed = true}"
- on:mouseenter="{() => pressed = false}"
->press and hold</button>
+<button
+ use:longpress={duration}
+ on:longpress={() => (pressed = true)}
+ on:mouseenter={() => (pressed = false)}>press and hold</button
+>
{#if pressed}
<p>congratulations, you pressed and held for {duration}ms</p>
-{/if}
\ No newline at end of file
+{/if}
diff --git a/documentation/content/examples/13-actions/03-actions-pannable/App.svelte b/documentation/content/examples/13-actions/03-actions-pannable/App.svelte
index 4548a5cbb6..5fdce1131a 100644
--- a/documentation/content/examples/13-actions/03-actions-pannable/App.svelte
+++ b/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 }, {
- stiffness: 0.2,
- damping: 0.4
- });
+ 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 {
@@ -48,4 +52,4 @@
background-color: #ff3e00;
cursor: move;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/14-classes/00-classes/App.svelte b/documentation/content/examples/14-classes/00-classes/App.svelte
index 1073242bcf..395ed8ee5e 100644
--- a/documentation/content/examples/14-classes/00-classes/App.svelte
+++ b/documentation/content/examples/14-classes/00-classes/App.svelte
@@ -2,20 +2,11 @@
let current = 'foo';
</script>
-<button
- class:active="{current === 'foo'}"
- on:click="{() => current = 'foo'}"
->foo</button>
+<button class:active={current === 'foo'} on:click={() => (current = 'foo')}>foo</button>
-<button
- class:active="{current === 'bar'}"
- on:click="{() => current = 'bar'}"
->bar</button>
+<button class:active={current === 'bar'} on:click={() => (current = 'bar')}>bar</button>
-<button
- class:active="{current === 'baz'}"
- on:click="{() => current = 'baz'}"
->baz</button>
+<button class:active={current === 'baz'} on:click={() => (current = 'baz')}>baz</button>
<style>
button {
@@ -26,4 +17,4 @@
background-color: #ff3e00;
color: white;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/14-classes/01-class-shorthand/App.svelte b/documentation/content/examples/14-classes/01-class-shorthand/App.svelte
index c91385e4e5..ad39916ce5 100644
--- a/documentation/content/examples/14-classes/01-class-shorthand/App.svelte
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/15-composition/00-slots/App.svelte b/documentation/content/examples/15-composition/00-slots/App.svelte
index cd0ebde935..986bdc01c5 100644
--- a/documentation/content/examples/15-composition/00-slots/App.svelte
+++ b/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>
\ No newline at end of file
+</Box>
diff --git a/documentation/content/examples/15-composition/00-slots/Box.svelte b/documentation/content/examples/15-composition/00-slots/Box.svelte
index b17fdbe60d..2d0a378d25 100644
--- a/documentation/content/examples/15-composition/00-slots/Box.svelte
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/15-composition/01-slot-fallbacks/App.svelte b/documentation/content/examples/15-composition/01-slot-fallbacks/App.svelte
index e30be6d1fc..708428d4d8 100644
--- a/documentation/content/examples/15-composition/01-slot-fallbacks/App.svelte
+++ b/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/>
\ No newline at end of file
+<Box />
diff --git a/documentation/content/examples/15-composition/01-slot-fallbacks/Box.svelte b/documentation/content/examples/15-composition/01-slot-fallbacks/Box.svelte
index bdaf61b874..8cb8128b31 100644
--- a/documentation/content/examples/15-composition/01-slot-fallbacks/Box.svelte
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/15-composition/02-named-slots/App.svelte b/documentation/content/examples/15-composition/02-named-slots/App.svelte
index 620b602eca..ea27d75edf 100644
--- a/documentation/content/examples/15-composition/02-named-slots/App.svelte
+++ b/documentation/content/examples/15-composition/02-named-slots/App.svelte
@@ -3,12 +3,10 @@
</script>
<ContactCard>
- <span slot="name">
- P. Sherman
- </span>
+ <span slot="name"> P. Sherman </span>
<span slot="address">
- 42 Wallaby Way<br>
+ 42 Wallaby Way<br />
Sydney
</span>
-</ContactCard>
\ No newline at end of file
+</ContactCard>
diff --git a/documentation/content/examples/15-composition/02-named-slots/ContactCard.svelte b/documentation/content/examples/15-composition/02-named-slots/ContactCard.svelte
index 1068641891..d72da2ad4c 100644
--- a/documentation/content/examples/15-composition/02-named-slots/ContactCard.svelte
+++ b/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) }
- .email { background-image: url(/tutorial/icons/email.svg) }
- .missing { color: #999 }
+ .address {
+ background-image: url(/tutorial/icons/map-marker.svg);
+ }
+ .email {
+ background-image: url(/tutorial/icons/email.svg);
+ }
+ .missing {
+ color: #999;
+ }
</style>
diff --git a/documentation/content/examples/15-composition/03-slot-props/App.svelte b/documentation/content/examples/15-composition/03-slot-props/App.svelte
index 5525867932..43a52ec11b 100644
--- a/documentation/content/examples/15-composition/03-slot-props/App.svelte
+++ b/documentation/content/examples/15-composition/03-slot-props/App.svelte
@@ -43,7 +43,7 @@
background-color: #ff3e00;
color: white;
}
-
+
p {
pointer-events: none;
}
diff --git a/documentation/content/examples/15-composition/03-slot-props/Hoverable.svelte b/documentation/content/examples/15-composition/03-slot-props/Hoverable.svelte
index 69f2fc8ef6..773a8ecf6a 100644
--- a/documentation/content/examples/15-composition/03-slot-props/Hoverable.svelte
+++ b/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>
-</div>
\ No newline at end of file
+ <slot {hovering} />
+</div>
diff --git a/documentation/content/examples/15-composition/04-conditional-slots/App.svelte b/documentation/content/examples/15-composition/04-conditional-slots/App.svelte
index 69142b807d..feba6b18d6 100644
--- a/documentation/content/examples/15-composition/04-conditional-slots/App.svelte
+++ b/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>
diff --git a/documentation/content/examples/15-composition/04-conditional-slots/Profile.svelte b/documentation/content/examples/15-composition/04-conditional-slots/Profile.svelte
index 834c23dc14..963506ebca 100644
--- a/documentation/content/examples/15-composition/04-conditional-slots/Profile.svelte
+++ b/documentation/content/examples/15-composition/04-conditional-slots/Profile.svelte
@@ -21,4 +21,4 @@
border: 1px solid #888;
margin-bottom: 16px;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/15-composition/05-modal/App.svelte b/documentation/content/examples/15-composition/05-modal/App.svelte
index af93ba39af..107affa11d 100644
--- a/documentation/content/examples/15-composition/05-modal/App.svelte
+++ b/documentation/content/examples/15-composition/05-modal/App.svelte
@@ -4,9 +4,7 @@
let showModal = false;
</script>
-<button on:click={() => (showModal = true)}>
- show modal
-</button>
+<button on:click={() => (showModal = true)}> 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>
diff --git a/documentation/content/examples/16-context/00-context-api/App.svelte b/documentation/content/examples/16-context/00-context-api/App.svelte
index ea1ba4c7ae..d564c9eee6 100644
--- a/documentation/content/examples/16-context/00-context-api/App.svelte
+++ b/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={33.8981} lon={-118.4169} label="Svelte Barbershop & Essentials"/>
- <MapMarker lat={29.7230} lon={-95.4189} label="Svelte Waxing Studio"/>
- <MapMarker lat={28.3378} lon={-81.3966} label="Svelte 30 Nutritional Consultants"/>
- <MapMarker lat={40.6483} lon={-74.0237} label="Svelte Brands LLC"/>
- <MapMarker lat={40.6986} lon={-74.4100} label="Svelte Medical Systems"/>
-</Map>
\ No newline at end of file
+ <MapMarker lat={37.8225} lon={-122.0024} label="Svelte Body Shaping" />
+ <MapMarker lat={33.8981} lon={-118.4169} label="Svelte Barbershop & Essentials" />
+ <MapMarker lat={29.723} lon={-95.4189} label="Svelte Waxing Studio" />
+ <MapMarker lat={28.3378} lon={-81.3966} label="Svelte 30 Nutritional Consultants" />
+ <MapMarker lat={40.6483} lon={-74.0237} label="Svelte Brands LLC" />
+ <MapMarker lat={40.6986} lon={-74.41} label="Svelte Medical Systems" />
+</Map>
diff --git a/documentation/content/examples/16-context/00-context-api/Map.svelte b/documentation/content/examples/16-context/00-context-api/Map.svelte
index 99aead054b..a69d18c7fd 100644
--- a/documentation/content/examples/16-context/00-context-api/Map.svelte
+++ b/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
- rel="stylesheet"
- href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css"
- on:load={load}
- />
+ <link rel="stylesheet" href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css" on:load={load} />
</svelte:head>
<div bind:this={container}>
diff --git a/documentation/content/examples/16-context/00-context-api/MapMarker.svelte b/documentation/content/examples/16-context/00-context-api/MapMarker.svelte
index c936652507..9c6df339cf 100644
--- a/documentation/content/examples/16-context/00-context-api/MapMarker.svelte
+++ b/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 })
- .setText(label);
+ const popup = new mapbox.Popup({ offset: 25 }).setText(label);
- const marker = new mapbox.Marker()
- .setLngLat([lon, lat])
- .setPopup(popup)
- .addTo(map);
-</script>
\ No newline at end of file
+ const marker = new mapbox.Marker().setLngLat([lon, lat]).setPopup(popup).addTo(map);
+</script>
diff --git a/documentation/content/examples/17-special-elements/00-svelte-self/App.svelte b/documentation/content/examples/17-special-elements/00-svelte-self/App.svelte
index ff02fa6a42..52c6daf613 100644
--- a/documentation/content/examples/17-special-elements/00-svelte-self/App.svelte
+++ b/documentation/content/examples/17-special-elements/00-svelte-self/App.svelte
@@ -5,9 +5,7 @@
{
type: 'folder',
name: 'Important work stuff',
- files: [
- { type: 'file', name: 'quarterly-results.xlsx' }
- ]
+ files: [{ type: 'file', name: 'quarterly-results.xlsx' }]
},
{
type: 'folder',
@@ -38,4 +36,4 @@
];
</script>
-<Folder name="Home" files={root} expanded/>
\ No newline at end of file
+<Folder name="Home" files={root} expanded />
diff --git a/documentation/content/examples/17-special-elements/00-svelte-self/Folder.svelte b/documentation/content/examples/17-special-elements/00-svelte-self/Folder.svelte
index 7e9f667dd2..8350aacf49 100644
--- a/documentation/content/examples/17-special-elements/00-svelte-self/Folder.svelte
+++ b/documentation/content/examples/17-special-elements/00-svelte-self/Folder.svelte
@@ -1,7 +1,7 @@
<script>
import File from './File.svelte';
- import {slide} from 'svelte/transition'
-
+ import { slide } from 'svelte/transition';
+
export let expanded = false;
export let name;
export let files;
@@ -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}
diff --git a/documentation/content/examples/17-special-elements/01-svelte-component/App.svelte b/documentation/content/examples/17-special-elements/01-svelte-component/App.svelte
index a510fa8ad8..69e51253fc 100644
--- a/documentation/content/examples/17-special-elements/01-svelte-component/App.svelte
+++ b/documentation/content/examples/17-special-elements/01-svelte-component/App.svelte
@@ -4,9 +4,9 @@
import BlueThing from './BlueThing.svelte';
const options = [
- { color: 'red', component: RedThing },
+ { 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}/>
\ No newline at end of file
+<svelte:component this={selected.component} />
diff --git a/documentation/content/examples/17-special-elements/01-svelte-component/BlueThing.svelte b/documentation/content/examples/17-special-elements/01-svelte-component/BlueThing.svelte
index eb7ba64163..551f1afbbe 100644
--- a/documentation/content/examples/17-special-elements/01-svelte-component/BlueThing.svelte
+++ b/documentation/content/examples/17-special-elements/01-svelte-component/BlueThing.svelte
@@ -4,4 +4,4 @@
strong {
color: blue;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/17-special-elements/01-svelte-component/GreenThing.svelte b/documentation/content/examples/17-special-elements/01-svelte-component/GreenThing.svelte
index ed2aa49f27..a224720e6c 100644
--- a/documentation/content/examples/17-special-elements/01-svelte-component/GreenThing.svelte
+++ b/documentation/content/examples/17-special-elements/01-svelte-component/GreenThing.svelte
@@ -4,4 +4,4 @@
strong {
color: green;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/17-special-elements/01-svelte-component/RedThing.svelte b/documentation/content/examples/17-special-elements/01-svelte-component/RedThing.svelte
index 365f226492..9774363c1b 100644
--- a/documentation/content/examples/17-special-elements/01-svelte-component/RedThing.svelte
+++ b/documentation/content/examples/17-special-elements/01-svelte-component/RedThing.svelte
@@ -4,4 +4,4 @@
strong {
color: red;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/17-special-elements/03-svelte-window/App.svelte b/documentation/content/examples/17-special-elements/03-svelte-window/App.svelte
index 8452f160b0..8ccc87d2b3 100644
--- a/documentation/content/examples/17-special-elements/03-svelte-window/App.svelte
+++ b/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-left: 5px solid rgba(255,255,255,0.5);
- border-right: 5px solid rgba(0,0,0,0.2);
- border-bottom: 5px solid rgba(0,0,0,0.2);
+ border-top: 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-bottom: 5px solid rgba(0, 0, 0, 0.2);
color: #555;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/17-special-elements/04-svelte-window-bindings/App.svelte b/documentation/content/examples/17-special-elements/04-svelte-window-bindings/App.svelte
index 15c2aa0ebc..7e85600abe 100644
--- a/documentation/content/examples/17-special-elements/04-svelte-window-bindings/App.svelte
+++ b/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)}">
- scroll down
- </span>
+ <span style="opacity: {1 - Math.max(0, y / 40)}"> 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;
}
diff --git a/documentation/content/examples/17-special-elements/05-svelte-document/App.svelte b/documentation/content/examples/17-special-elements/05-svelte-document/App.svelte
index 5dd44aa389..e11a9005db 100644
--- a/documentation/content/examples/17-special-elements/05-svelte-document/App.svelte
+++ b/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} />
diff --git a/documentation/content/examples/17-special-elements/06-svelte-body/App.svelte b/documentation/content/examples/17-special-elements/06-svelte-body/App.svelte
index fddc8f8d0a..71edebea48 100644
--- a/documentation/content/examples/17-special-elements/06-svelte-body/App.svelte
+++ b/documentation/content/examples/17-special-elements/06-svelte-body/App.svelte
@@ -1,21 +1,18 @@
<script>
let hereKitty = false;
- const handleMouseenter = () => hereKitty = true;
- const handleMouseleave = () => hereKitty = false;
+ const handleMouseenter = () => (hereKitty = true);
+ const handleMouseleave = () => (hereKitty = false);
</script>
-<svelte:body
- on:mouseenter={handleMouseenter}
- on:mouseleave={handleMouseleave}
-/>
+<svelte:body 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 {
diff --git a/documentation/content/examples/17-special-elements/07-svelte-head/App.svelte b/documentation/content/examples/17-special-elements/07-svelte-head/App.svelte
index 8323b56ad0..5e6bb2d945 100644
--- a/documentation/content/examples/17-special-elements/07-svelte-head/App.svelte
+++ b/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>
diff --git a/documentation/content/examples/18-module-context/01-module-exports/App.svelte b/documentation/content/examples/18-module-context/01-module-exports/App.svelte
index 1d5d94b5d1..a018d3429f 100644
--- a/documentation/content/examples/18-module-context/01-module-exports/App.svelte
+++ b/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}>
- stop all audio
-</button>
+<button on:click={stopAll}> stop all audio </button>
<!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
<AudioPlayer
diff --git a/documentation/content/examples/18-module-context/01-module-exports/AudioPlayer.svelte b/documentation/content/examples/18-module-context/01-module-exports/AudioPlayer.svelte
index 561c7094a4..b76601e025 100644
--- a/documentation/content/examples/18-module-context/01-module-exports/AudioPlayer.svelte
+++ b/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
- bind:this={audio}
- bind:paused
- on:play={stopOthers}
- controls
- {src}
- ></audio>
+ <audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
</article>
<style>
- article { margin: 0 0 1em 0; max-width: 800px }
- h2, p { margin: 0 0 0.3em 0; }
- audio { width: 100%; margin: 0.5em 0 1em 0; }
- .playing { color: #ff3e00; }
-</style>
\ No newline at end of file
+ article {
+ margin: 0 0 1em 0;
+ max-width: 800px;
+ }
+ h2,
+ p {
+ margin: 0 0 0.3em 0;
+ }
+ audio {
+ width: 100%;
+ margin: 0.5em 0 1em 0;
+ }
+ .playing {
+ color: #ff3e00;
+ }
+</style>
diff --git a/documentation/content/examples/19-debugging/00-debug/App.svelte b/documentation/content/examples/19-debugging/00-debug/App.svelte
index 1b91ac740b..30bffc896c 100644
--- a/documentation/content/examples/19-debugging/00-debug/App.svelte
+++ b/documentation/content/examples/19-debugging/00-debug/App.svelte
@@ -5,9 +5,9 @@
};
</script>
-<input bind:value={user.firstname}>
-<input bind:value={user.lastname}>
+<input bind:value={user.firstname} />
+<input bind:value={user.lastname} />
{@debug user}
-<h1>Hello {user.firstname}!</h1>
\ No newline at end of file
+<h1>Hello {user.firstname}!</h1>
diff --git a/documentation/content/examples/20-7guis/01-7guis-counter/App.svelte b/documentation/content/examples/20-7guis/01-7guis-counter/App.svelte
index 832891b735..26c8c51477 100644
--- a/documentation/content/examples/20-7guis/01-7guis-counter/App.svelte
+++ b/documentation/content/examples/20-7guis/01-7guis-counter/App.svelte
@@ -3,5 +3,5 @@
let count = 0;
</script>
-<input type=number bind:value={count}>
-<button on:click="{() => count += 1}">count</button>
\ No newline at end of file
+<input type="number" bind:value={count} />
+<button on:click={() => (count += 1)}>count</button>
diff --git a/documentation/content/examples/20-7guis/02-7guis-temperature/App.svelte b/documentation/content/examples/20-7guis/02-7guis-temperature/App.svelte
index a98a5fd06c..e7de8eb707 100644
--- a/documentation/content/examples/20-7guis/02-7guis-temperature/App.svelte
+++ b/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={f} on:input="{e => setBothFromF(e.target.value)}" type=number> °F
+<input value={c} on:input={(e) => setBothFromC(e.target.value)} type="number" /> °C =
+<input value={f} on:input={(e) => setBothFromF(e.target.value)} type="number" /> °F
<style>
input {
diff --git a/documentation/content/examples/20-7guis/03-7guis-flight-booker/App.svelte b/documentation/content/examples/20-7guis/03-7guis-flight-booker/App.svelte
index f9484aa360..42caebe506 100644
--- a/documentation/content/examples/20-7guis/03-7guis-flight-booker/App.svelte
+++ b/documentation/content/examples/20-7guis/03-7guis-flight-booker/App.svelte
@@ -42,18 +42,17 @@
<option value={true}>return flight</option>
</select>
-<input type=date bind:value={start}>
-<input type=date bind:value={end} disabled={!isReturn}>
+<input type="date" bind:value={start} />
+<input type="date" bind:value={end} disabled={!isReturn} />
-<button
- on:click={bookFlight}
- disabled="{isReturn && (startDate >= endDate)}"
->book</button>
+<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;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/20-7guis/04-7guis-timer/App.svelte b/documentation/content/examples/20-7guis/04-7guis-timer/App.svelte
index 47afd6c48b..dab2d6de44 100644
--- a/documentation/content/examples/20-7guis/04-7guis-timer/App.svelte
+++ b/documentation/content/examples/20-7guis/04-7guis-timer/App.svelte
@@ -13,13 +13,10 @@
frame = requestAnimationFrame(update);
const time = window.performance.now();
- elapsed += Math.min(
- time - last_time,
- duration - elapsed
- );
+ elapsed += Math.min(time - last_time, duration - elapsed);
last_time = time;
- }());
+ })();
onDestroy(() => {
cancelAnimationFrame(frame);
@@ -28,14 +25,14 @@
<label>
elapsed time:
- <progress value="{elapsed / duration}"></progress>
+ <progress value={elapsed / duration} />
</label>
<div>{(elapsed / 1000).toFixed(1)}s</div>
<label>
duration:
- <input type="range" bind:value={duration} min="1" max="20000">
+ <input type="range" bind:value={duration} min="1" max="20000" />
</label>
-<button on:click="{() => elapsed = 0}">reset</button>
\ No newline at end of file
+<button on:click={() => (elapsed = 0)}>reset</button>
diff --git a/documentation/content/examples/20-7guis/05-7guis-crud/App.svelte b/documentation/content/examples/20-7guis/05-7guis-crud/App.svelte
index 5097eebe26..15a2ee6cd0 100644
--- a/documentation/content/examples/20-7guis/05-7guis-crud/App.svelte
+++ b/documentation/content/examples/20-7guis/05-7guis-crud/App.svelte
@@ -13,10 +13,10 @@
let i = 0;
$: filteredPeople = prefix
- ? people.filter(person => {
- const name = `${person.last}, ${person.first}`;
- return name.toLowerCase().startsWith(prefix.toLowerCase());
- })
+ ? people.filter((person) => {
+ const name = `${person.last}, ${person.first}`;
+ return name.toLowerCase().startsWith(prefix.toLowerCase());
+ })
: people;
$: selected = filteredPeople[i];
@@ -50,7 +50,7 @@
}
</script>
-<input placeholder="filter prefix" bind:value={prefix}>
+<input placeholder="filter prefix" bind:value={prefix} />
<select bind:value={i} size={5}>
{#each filteredPeople as person, i}
@@ -58,13 +58,13 @@
{/each}
</select>
-<label><input bind:value={first} placeholder="first"></label>
-<label><input bind:value={last} placeholder="last"></label>
+<label><input bind:value={first} placeholder="first" /></label>
+<label><input bind:value={last} placeholder="last" /></label>
-<div class='buttons'>
- <button on:click={create} disabled="{!first || !last}">create</button>
- <button on:click={update} disabled="{!first || !last || !selected}">update</button>
- <button on:click={remove} disabled="{!selected}">delete</button>
+<div class="buttons">
+ <button on:click={create} disabled={!first || !last}>create</button>
+ <button on:click={update} disabled={!first || !last || !selected}>update</button>
+ <button on:click={remove} disabled={!selected}>delete</button>
</div>
<style>
@@ -87,4 +87,4 @@
.buttons {
clear: both;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/20-7guis/06-7guis-circles/App.svelte b/documentation/content/examples/20-7guis/06-7guis-circles/App.svelte
index 2c42250f8e..7ce1e76bda 100644
--- a/documentation/content/examples/20-7guis/06-7guis-circles/App.svelte
+++ b/documentation/content/examples/20-7guis/06-7guis-circles/App.svelte
@@ -56,7 +56,7 @@ radius of the selected circle.
}
function travel(d) {
- circles = clone(undoStack[i += d]);
+ circles = clone(undoStack[(i += d)]);
adjusting = false;
}
@@ -66,19 +66,22 @@ radius of the selected circle.
</script>
<div class="controls">
- <button on:click="{() => travel(-1)}" disabled="{i === 0}">undo</button>
- <button on:click="{() => travel(+1)}" disabled="{i === undoStack.length -1}">redo</button>
+ <button on:click={() => travel(-1)} disabled={i === 0}>undo</button>
+ <button on:click={() => travel(+1)} disabled={i === undoStack.length - 1}>redo</button>
</div>
-<svg on:click={handleClick} >
+<svg on:click={handleClick}>
{#each circles as circle}
- <circle cx={circle.cx} cy={circle.cy} r={circle.r}
- on:click="{event => select(circle, event)}"
- on:contextmenu|stopPropagation|preventDefault="{() => {
+ <circle
+ cx={circle.cx}
+ cy={circle.cy}
+ r={circle.r}
+ on:click={(event) => select(circle, event)}
+ on:contextmenu|stopPropagation|preventDefault={() => {
adjusting = !adjusting;
if (adjusting) selected = circle;
- }}"
- fill="{circle === selected ? '#ccc': 'white'}"
+ }}
+ fill={circle === selected ? '#ccc' : 'white'}
/>
{/each}
</svg>
@@ -86,7 +89,7 @@ radius of the selected circle.
{#if adjusting}
<div class="adjuster">
<p>adjust diameter of circle at {selected.cx}, {selected.cy}</p>
- <input type="range" value={selected.r} on:input={adjust}>
+ <input type="range" value={selected.r} on:input={adjust} />
</div>
{/if}
@@ -112,14 +115,14 @@ radius of the selected circle.
width: 80%;
top: 50%;
left: 50%;
- transform: translate(-50%,-50%);
+ transform: translate(-50%, -50%);
padding: 1em;
text-align: center;
- background-color: rgba(255,255,255,0.7);
+ background-color: rgba(255, 255, 255, 0.7);
border-radius: 4px;
}
input[type='range'] {
width: 100%;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/21-miscellaneous/01-hacker-news/App.svelte b/documentation/content/examples/21-miscellaneous/01-hacker-news/App.svelte
index f8a2e9066a..2f78cbc9a3 100644
--- a/documentation/content/examples/21-miscellaneous/01-hacker-news/App.svelte
+++ b/documentation/content/examples/21-miscellaneous/01-hacker-news/App.svelte
@@ -12,9 +12,9 @@
if (path.startsWith('/item')) {
const id = path.slice(6);
- item = await fetch(`https://node-hnapi.herokuapp.com/item/${id}`).then(r => r.json());
+ item = await fetch(`https://node-hnapi.herokuapp.com/item/${id}`).then((r) => r.json());
- window.scrollTo(0,0);
+ window.scrollTo(0, 0);
} else if (path.startsWith('/top')) {
page = +path.slice(5);
item = null;
@@ -26,13 +26,13 @@
onMount(hashchange);
</script>
-<svelte:window on:hashchange={hashchange}/>
+<svelte:window on:hashchange={hashchange} />
<main>
{#if item}
- <Item {item} returnTo="#/top/{page}"/>
+ <Item {item} returnTo="#/top/{page}" />
{:else if page}
- <List {page}/>
+ <List {page} />
{/if}
</main>
@@ -52,6 +52,6 @@
}
main :global(a) {
- color: rgb(0,0,150);
+ color: rgb(0, 0, 150);
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/21-miscellaneous/01-hacker-news/Comment.svelte b/documentation/content/examples/21-miscellaneous/01-hacker-news/Comment.svelte
index 3faa345746..56a9c74af5 100644
--- a/documentation/content/examples/21-miscellaneous/01-hacker-news/Comment.svelte
+++ b/documentation/content/examples/21-miscellaneous/01-hacker-news/Comment.svelte
@@ -9,7 +9,7 @@
<div class="replies">
{#each comment.comments as child}
- <svelte:self comment={child}/>
+ <svelte:self comment={child} />
{/each}
</div>
</article>
@@ -29,4 +29,4 @@
.replies {
padding: 0 0 0 1em;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/21-miscellaneous/01-hacker-news/Item.svelte b/documentation/content/examples/21-miscellaneous/01-hacker-news/Item.svelte
index 190d8fe20c..db57a25757 100644
--- a/documentation/content/examples/21-miscellaneous/01-hacker-news/Item.svelte
+++ b/documentation/content/examples/21-miscellaneous/01-hacker-news/Item.svelte
@@ -1,5 +1,5 @@
<script>
- import Comment from "./Comment.svelte";
+ import Comment from './Comment.svelte';
export let item;
export let returnTo;
@@ -10,19 +10,19 @@
<a href={returnTo}>« back</a>
<article>
- <a href="{url}">
+ <a href={url}>
<h1>{item.title}</h1>
{#if item.domain}
<small>{item.domain}</small>
{/if}
</a>
- <p class="meta">submitted by {item.user} {item.time_ago}
+ <p class="meta">submitted by {item.user} {item.time_ago}</p>
</article>
<div class="comments">
{#each item.comments as comment}
- <Comment {comment}/>
+ <Comment {comment} />
{/each}
</div>
@@ -40,4 +40,4 @@
font-size: 1.4em;
margin: 0;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/21-miscellaneous/01-hacker-news/List.svelte b/documentation/content/examples/21-miscellaneous/01-hacker-news/List.svelte
index 46b934a2e7..e3f0b7b822 100644
--- a/documentation/content/examples/21-miscellaneous/01-hacker-news/List.svelte
+++ b/documentation/content/examples/21-miscellaneous/01-hacker-news/List.svelte
@@ -1,6 +1,6 @@
<script>
- import { beforeUpdate } from "svelte";
- import Summary from "./Summary.svelte";
+ import { beforeUpdate } from 'svelte';
+ import Summary from './Summary.svelte';
const PAGE_SIZE = 20;
@@ -10,8 +10,8 @@
let offset;
$: fetch(`https://node-hnapi.herokuapp.com/news?page=${page}`)
- .then(r => r.json())
- .then(data => {
+ .then((r) => r.json())
+ .then((data) => {
items = data;
offset = PAGE_SIZE * (page - 1);
window.scrollTo(0, 0);
@@ -20,7 +20,7 @@
{#if items}
{#each items as item, i}
- <Summary {item} {i} {offset}/>
+ <Summary {item} {i} {offset} />
{/each}
<a href="#/top/{page + 1}">page {page + 1}</a>
@@ -40,7 +40,11 @@
}
@keyframes fade-in {
- from { opacity: 0; }
- to { opacity: 1; }
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte b/documentation/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte
index 2a54289119..e4e1c9eef6 100644
--- a/documentation/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte
+++ b/documentation/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte
@@ -8,7 +8,7 @@
return `${c} ${c === 1 ? 'comment' : 'comments'}`;
}
- $: url = item.type === "ask" ? `https://news.ycombinator.com/${item.url}` : item.url;
+ $: url = item.type === 'ask' ? `https://news.ycombinator.com/${item.url}` : item.url;
</script>
<article>
diff --git a/documentation/content/examples/21-miscellaneous/02-immutable-data/App.svelte b/documentation/content/examples/21-miscellaneous/02-immutable-data/App.svelte
index 0e2b0e6ae0..6e9373a14d 100644
--- a/documentation/content/examples/21-miscellaneous/02-immutable-data/App.svelte
+++ b/documentation/content/examples/21-miscellaneous/02-immutable-data/App.svelte
@@ -9,7 +9,7 @@
];
function toggle(id) {
- todos = todos.map(todo => {
+ todos = todos.map((todo) => {
if (todo.id === id) {
// return a new object
return {
@@ -27,10 +27,10 @@
<h2>Immutable</h2>
{#each todos as todo}
- <ImmutableTodo {todo} on:click="{() => toggle(todo.id)}"/>
+ <ImmutableTodo {todo} on:click={() => toggle(todo.id)} />
{/each}
<h2>Mutable</h2>
{#each todos as todo}
- <MutableTodo {todo} on:click="{() => toggle(todo.id)}"/>
+ <MutableTodo {todo} on:click={() => toggle(todo.id)} />
{/each}
diff --git a/documentation/content/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte b/documentation/content/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
index 2a62cf7021..440c23dcbe 100644
--- a/documentation/content/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
+++ b/documentation/content/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
@@ -1,4 +1,4 @@
-<svelte:options immutable/>
+<svelte:options immutable />
<script>
import { afterUpdate } from 'svelte';
@@ -16,7 +16,8 @@
<!-- the text will flash red whenever
the `todo` object changes -->
<div bind:this={div} on:click>
- {todo.done ? '👍': ''} {todo.text}
+ {todo.done ? '👍' : ''}
+ {todo.text}
</div>
<style>
diff --git a/documentation/content/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte b/documentation/content/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
index a4d37c54fe..8e9676e75f 100644
--- a/documentation/content/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
+++ b/documentation/content/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
@@ -14,7 +14,8 @@
<!-- the text will flash red whenever
the `todo` object changes -->
<div bind:this={div} on:click>
- {todo.done ? '👍': ''} {todo.text}
+ {todo.done ? '👍' : ''}
+ {todo.text}
</div>
<style>
@@ -22,4 +23,4 @@
cursor: pointer;
line-height: 1.5;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte b/documentation/content/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte
index ccb1ad8834..a2046d0392 100644
--- a/documentation/content/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte
+++ b/documentation/content/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte
@@ -3,8 +3,15 @@
import Hero from './Hero.svelte';
</script>
-<Hero/>
+<Hero />
<div class={comicSans}>
- <p>Did you enjoy your lunch, mom? You drank it fast enough. I know, I just call her Annabelle cause she's shaped like a…she's the belle of the ball! YOU'RE the Chiclet! Not me. Caw ca caw, caw ca caw, caw ca caw! A Colombian cartel that WON'T kidnap and kill you. You go buy a tape recorder and record yourself for a whole day. <a class={link} href="https://bluthipsum.com/">I think you'll be surprised at some of your phrasing.</a></p>
-</div>
\ No newline at end of file
+ <p>
+ Did you enjoy your lunch, mom? You drank it fast enough. I know, I just call her Annabelle cause
+ she's shaped like a…she's the belle of the ball! YOU'RE the Chiclet! Not me. Caw ca caw, caw ca
+ caw, caw ca caw! A Colombian cartel that WON'T kidnap and kill you. You go buy a tape recorder
+ and record yourself for a whole day. <a class={link} href="https://bluthipsum.com/"
+ >I think you'll be surprised at some of your phrasing.</a
+ >
+ </p>
+</div>
diff --git a/documentation/content/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte b/documentation/content/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte
index 9f60c276ce..b59a11871a 100644
--- a/documentation/content/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte
+++ b/documentation/content/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte
@@ -12,4 +12,4 @@
in HTML
</div>
</h1>
-</div>
\ No newline at end of file
+</div>
diff --git a/documentation/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte b/documentation/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte
index 46cf93b0fc..89b10d2a17 100644
--- a/documentation/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte
+++ b/documentation/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte
@@ -3,7 +3,7 @@
let b = 2;
</script>
-<input type="number" bind:value={a}>
-<input type="number" bind:value={b}>
+<input type="number" bind:value={a} />
+<input type="number" bind:value={b} />
-<p>{a} + {b} = {a + b}</p>
\ No newline at end of file
+<p>{a} + {b} = {a + b}</p>
diff --git a/documentation/content/tutorial/01-introduction/01-basics/app-a/App.svelte b/documentation/content/tutorial/01-introduction/01-basics/app-a/App.svelte
index efe5048cbc..597ecf5fc4 100644
--- a/documentation/content/tutorial/01-introduction/01-basics/app-a/App.svelte
+++ b/documentation/content/tutorial/01-introduction/01-basics/app-a/App.svelte
@@ -1 +1 @@
-<h1>Hello world!</h1>
\ No newline at end of file
+<h1>Hello world!</h1>
diff --git a/documentation/content/tutorial/01-introduction/02-adding-data/app-a/App.svelte b/documentation/content/tutorial/01-introduction/02-adding-data/app-a/App.svelte
index efe5048cbc..597ecf5fc4 100644
--- a/documentation/content/tutorial/01-introduction/02-adding-data/app-a/App.svelte
+++ b/documentation/content/tutorial/01-introduction/02-adding-data/app-a/App.svelte
@@ -1 +1 @@
-<h1>Hello world!</h1>
\ No newline at end of file
+<h1>Hello world!</h1>
diff --git a/documentation/content/tutorial/01-introduction/02-adding-data/app-b/App.svelte b/documentation/content/tutorial/01-introduction/02-adding-data/app-b/App.svelte
index 2ab60ba0ac..5c48373a2a 100644
--- a/documentation/content/tutorial/01-introduction/02-adding-data/app-b/App.svelte
+++ b/documentation/content/tutorial/01-introduction/02-adding-data/app-b/App.svelte
@@ -2,4 +2,4 @@
let name = 'world';
</script>
-<h1>Hello {name.toUpperCase()}!</h1>
\ No newline at end of file
+<h1>Hello {name.toUpperCase()}!</h1>
diff --git a/documentation/content/tutorial/01-introduction/03-dynamic-attributes/app-a/App.svelte b/documentation/content/tutorial/01-introduction/03-dynamic-attributes/app-a/App.svelte
index 03850a3670..94db39ab72 100644
--- a/documentation/content/tutorial/01-introduction/03-dynamic-attributes/app-a/App.svelte
+++ b/documentation/content/tutorial/01-introduction/03-dynamic-attributes/app-a/App.svelte
@@ -2,4 +2,4 @@
let src = '/tutorial/image.gif';
</script>
-<img>
+<img />
diff --git a/documentation/content/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte b/documentation/content/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte
index f2f9101d51..1ef6d8c326 100644
--- a/documentation/content/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte
+++ b/documentation/content/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte
@@ -3,4 +3,4 @@
let name = 'Rick Astley';
</script>
-<img {src} alt="{name} dances.">
+<img {src} alt="{name} dances." />
diff --git a/documentation/content/tutorial/01-introduction/05-nested-components/app-b/App.svelte b/documentation/content/tutorial/01-introduction/05-nested-components/app-b/App.svelte
index b6cac46d2a..8319b69efa 100644
--- a/documentation/content/tutorial/01-introduction/05-nested-components/app-b/App.svelte
+++ b/documentation/content/tutorial/01-introduction/05-nested-components/app-b/App.svelte
@@ -3,7 +3,7 @@
</script>
<p>This is a paragraph.</p>
-<Nested/>
+<Nested />
<style>
p {
diff --git a/documentation/content/tutorial/01-introduction/06-making-an-app/app-a/App.svelte b/documentation/content/tutorial/01-introduction/06-making-an-app/app-a/App.svelte
index c4de2848c2..90035cbf1d 100644
--- a/documentation/content/tutorial/01-introduction/06-making-an-app/app-a/App.svelte
+++ b/documentation/content/tutorial/01-introduction/06-making-an-app/app-a/App.svelte
@@ -1 +1 @@
-<h1>What now?</h1>
\ No newline at end of file
+<h1>What now?</h1>
diff --git a/documentation/content/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte b/documentation/content/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte
index b93b48055b..836e573dc6 100644
--- a/documentation/content/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte
+++ b/documentation/content/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte
@@ -7,5 +7,6 @@
</script>
<button>
- Clicked {count} {count === 1 ? 'time' : 'times'}
+ Clicked {count}
+ {count === 1 ? 'time' : 'times'}
</button>
diff --git a/documentation/content/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte b/documentation/content/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte
index dff5942d6e..382b2ee9e0 100644
--- a/documentation/content/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte
+++ b/documentation/content/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte
@@ -7,5 +7,6 @@
</script>
<button on:click={incrementCount}>
- Clicked {count} {count === 1 ? 'time' : 'times'}
+ Clicked {count}
+ {count === 1 ? 'time' : 'times'}
</button>
diff --git a/documentation/content/tutorial/02-reactivity/02-reactive-declarations/app-a/App.svelte b/documentation/content/tutorial/02-reactivity/02-reactive-declarations/app-a/App.svelte
index bc50d74cfc..6d78f949e1 100644
--- a/documentation/content/tutorial/02-reactivity/02-reactive-declarations/app-a/App.svelte
+++ b/documentation/content/tutorial/02-reactivity/02-reactive-declarations/app-a/App.svelte
@@ -7,5 +7,6 @@
</script>
<button on:click={handleClick}>
- Clicked {count} {count === 1 ? 'time' : 'times'}
-</button>
\ No newline at end of file
+ Clicked {count}
+ {count === 1 ? 'time' : 'times'}
+</button>
diff --git a/documentation/content/tutorial/02-reactivity/02-reactive-declarations/app-b/App.svelte b/documentation/content/tutorial/02-reactivity/02-reactive-declarations/app-b/App.svelte
index a9fc207851..d031bc1879 100644
--- a/documentation/content/tutorial/02-reactivity/02-reactive-declarations/app-b/App.svelte
+++ b/documentation/content/tutorial/02-reactivity/02-reactive-declarations/app-b/App.svelte
@@ -8,7 +8,8 @@
</script>
<button on:click={handleClick}>
- Clicked {count} {count === 1 ? 'time' : 'times'}
+ Clicked {count}
+ {count === 1 ? 'time' : 'times'}
</button>
-<p>{count} doubled is {doubled}</p>
\ No newline at end of file
+<p>{count} doubled is {doubled}</p>
diff --git a/documentation/content/tutorial/02-reactivity/03-reactive-statements/app-a/App.svelte b/documentation/content/tutorial/02-reactivity/03-reactive-statements/app-a/App.svelte
index bc50d74cfc..6d78f949e1 100644
--- a/documentation/content/tutorial/02-reactivity/03-reactive-statements/app-a/App.svelte
+++ b/documentation/content/tutorial/02-reactivity/03-reactive-statements/app-a/App.svelte
@@ -7,5 +7,6 @@
</script>
<button on:click={handleClick}>
- Clicked {count} {count === 1 ? 'time' : 'times'}
-</button>
\ No newline at end of file
+ Clicked {count}
+ {count === 1 ? 'time' : 'times'}
+</button>
diff --git a/documentation/content/tutorial/02-reactivity/03-reactive-statements/app-b/App.svelte b/documentation/content/tutorial/02-reactivity/03-reactive-statements/app-b/App.svelte
index 3e82cd562c..8d6f7aded5 100644
--- a/documentation/content/tutorial/02-reactivity/03-reactive-statements/app-b/App.svelte
+++ b/documentation/content/tutorial/02-reactivity/03-reactive-statements/app-b/App.svelte
@@ -12,5 +12,6 @@
</script>
<button on:click={handleClick}>
- Clicked {count} {count === 1 ? 'time' : 'times'}
-</button>
\ No newline at end of file
+ Clicked {count}
+ {count === 1 ? 'time' : 'times'}
+</button>
diff --git a/documentation/content/tutorial/02-reactivity/04-updating-arrays-and-objects/app-a/App.svelte b/documentation/content/tutorial/02-reactivity/04-updating-arrays-and-objects/app-a/App.svelte
index 74b11d2399..5b55360fe3 100644
--- a/documentation/content/tutorial/02-reactivity/04-updating-arrays-and-objects/app-a/App.svelte
+++ b/documentation/content/tutorial/02-reactivity/04-updating-arrays-and-objects/app-a/App.svelte
@@ -10,6 +10,4 @@
<p>{numbers.join(' + ')} = {sum}</p>
-<button on:click={addNumber}>
- Add a number
-</button>
\ No newline at end of file
+<button on:click={addNumber}> Add a number </button>
diff --git a/documentation/content/tutorial/02-reactivity/04-updating-arrays-and-objects/app-b/App.svelte b/documentation/content/tutorial/02-reactivity/04-updating-arrays-and-objects/app-b/App.svelte
index 3c2111712e..f8583940fc 100644
--- a/documentation/content/tutorial/02-reactivity/04-updating-arrays-and-objects/app-b/App.svelte
+++ b/documentation/content/tutorial/02-reactivity/04-updating-arrays-and-objects/app-b/App.svelte
@@ -10,6 +10,4 @@
<p>{numbers.join(' + ')} = {sum}</p>
-<button on:click={addNumber}>
- Add a number
-</button>
\ No newline at end of file
+<button on:click={addNumber}> Add a number </button>
diff --git a/documentation/content/tutorial/03-props/01-declaring-props/app-a/App.svelte b/documentation/content/tutorial/03-props/01-declaring-props/app-a/App.svelte
index 79d7e6b789..f64b69a87c 100644
--- a/documentation/content/tutorial/03-props/01-declaring-props/app-a/App.svelte
+++ b/documentation/content/tutorial/03-props/01-declaring-props/app-a/App.svelte
@@ -2,4 +2,4 @@
import Nested from './Nested.svelte';
</script>
-<Nested answer={42}/>
\ No newline at end of file
+<Nested answer={42} />
diff --git a/documentation/content/tutorial/03-props/01-declaring-props/app-a/Nested.svelte b/documentation/content/tutorial/03-props/01-declaring-props/app-a/Nested.svelte
index da9270c7a2..141cae3230 100644
--- a/documentation/content/tutorial/03-props/01-declaring-props/app-a/Nested.svelte
+++ b/documentation/content/tutorial/03-props/01-declaring-props/app-a/Nested.svelte
@@ -2,4 +2,4 @@
let answer;
</script>
-<p>The answer is {answer}</p>
\ No newline at end of file
+<p>The answer is {answer}</p>
diff --git a/documentation/content/tutorial/03-props/01-declaring-props/app-b/App.svelte b/documentation/content/tutorial/03-props/01-declaring-props/app-b/App.svelte
index 79d7e6b789..f64b69a87c 100644
--- a/documentation/content/tutorial/03-props/01-declaring-props/app-b/App.svelte
+++ b/documentation/content/tutorial/03-props/01-declaring-props/app-b/App.svelte
@@ -2,4 +2,4 @@
import Nested from './Nested.svelte';
</script>
-<Nested answer={42}/>
\ No newline at end of file
+<Nested answer={42} />
diff --git a/documentation/content/tutorial/03-props/01-declaring-props/app-b/Nested.svelte b/documentation/content/tutorial/03-props/01-declaring-props/app-b/Nested.svelte
index ecd3cb6254..7267c0edea 100644
--- a/documentation/content/tutorial/03-props/01-declaring-props/app-b/Nested.svelte
+++ b/documentation/content/tutorial/03-props/01-declaring-props/app-b/Nested.svelte
@@ -2,4 +2,4 @@
export let answer;
</script>
-<p>The answer is {answer}</p>
\ No newline at end of file
+<p>The answer is {answer}</p>
diff --git a/documentation/content/tutorial/03-props/02-default-values/app-a/App.svelte b/documentation/content/tutorial/03-props/02-default-values/app-a/App.svelte
index 79d7e6b789..f64b69a87c 100644
--- a/documentation/content/tutorial/03-props/02-default-values/app-a/App.svelte
+++ b/documentation/content/tutorial/03-props/02-default-values/app-a/App.svelte
@@ -2,4 +2,4 @@
import Nested from './Nested.svelte';
</script>
-<Nested answer={42}/>
\ No newline at end of file
+<Nested answer={42} />
diff --git a/documentation/content/tutorial/03-props/02-default-values/app-a/Nested.svelte b/documentation/content/tutorial/03-props/02-default-values/app-a/Nested.svelte
index ecd3cb6254..7267c0edea 100644
--- a/documentation/content/tutorial/03-props/02-default-values/app-a/Nested.svelte
+++ b/documentation/content/tutorial/03-props/02-default-values/app-a/Nested.svelte
@@ -2,4 +2,4 @@
export let answer;
</script>
-<p>The answer is {answer}</p>
\ No newline at end of file
+<p>The answer is {answer}</p>
diff --git a/documentation/content/tutorial/03-props/02-default-values/app-b/App.svelte b/documentation/content/tutorial/03-props/02-default-values/app-b/App.svelte
index f9d63b30d6..27e880eb5c 100644
--- a/documentation/content/tutorial/03-props/02-default-values/app-b/App.svelte
+++ b/documentation/content/tutorial/03-props/02-default-values/app-b/App.svelte
@@ -2,5 +2,5 @@
import Nested from './Nested.svelte';
</script>
-<Nested answer={42}/>
-<Nested/>
\ No newline at end of file
+<Nested answer={42} />
+<Nested />
diff --git a/documentation/content/tutorial/03-props/02-default-values/app-b/Nested.svelte b/documentation/content/tutorial/03-props/02-default-values/app-b/Nested.svelte
index 35ee5c9f88..3efe9ccb75 100644
--- a/documentation/content/tutorial/03-props/02-default-values/app-b/Nested.svelte
+++ b/documentation/content/tutorial/03-props/02-default-values/app-b/Nested.svelte
@@ -2,4 +2,4 @@
export let answer = 'a mystery';
</script>
-<p>The answer is {answer}</p>
\ No newline at end of file
+<p>The answer is {answer}</p>
diff --git a/documentation/content/tutorial/03-props/03-spread-props/app-a/App.svelte b/documentation/content/tutorial/03-props/03-spread-props/app-a/App.svelte
index 91ff42146d..448895faf2 100644
--- a/documentation/content/tutorial/03-props/03-spread-props/app-a/App.svelte
+++ b/documentation/content/tutorial/03-props/03-spread-props/app-a/App.svelte
@@ -9,4 +9,4 @@
};
</script>
-<Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website}/>
\ No newline at end of file
+<Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website} />
diff --git a/documentation/content/tutorial/03-props/03-spread-props/app-a/Info.svelte b/documentation/content/tutorial/03-props/03-spread-props/app-a/Info.svelte
index 7412398244..241b84a9af 100644
--- a/documentation/content/tutorial/03-props/03-spread-props/app-a/Info.svelte
+++ b/documentation/content/tutorial/03-props/03-spread-props/app-a/Info.svelte
@@ -6,7 +6,7 @@
</script>
<p>
- The <code>{name}</code> package is {speed} fast.
- Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
+ The <code>{name}</code> package is {speed} fast. Download version {version} from
+ <a href="https://www.npmjs.com/package/{name}">npm</a>
and <a href={website}>learn more here</a>
-</p>
\ No newline at end of file
+</p>
diff --git a/documentation/content/tutorial/03-props/03-spread-props/app-b/App.svelte b/documentation/content/tutorial/03-props/03-spread-props/app-b/App.svelte
index 7071bdbbb7..d2f97713d1 100644
--- a/documentation/content/tutorial/03-props/03-spread-props/app-b/App.svelte
+++ b/documentation/content/tutorial/03-props/03-spread-props/app-b/App.svelte
@@ -9,4 +9,4 @@
};
</script>
-<Info {...pkg}/>
\ No newline at end of file
+<Info {...pkg} />
diff --git a/documentation/content/tutorial/03-props/03-spread-props/app-b/Info.svelte b/documentation/content/tutorial/03-props/03-spread-props/app-b/Info.svelte
index 7412398244..241b84a9af 100644
--- a/documentation/content/tutorial/03-props/03-spread-props/app-b/Info.svelte
+++ b/documentation/content/tutorial/03-props/03-spread-props/app-b/Info.svelte
@@ -6,7 +6,7 @@
</script>
<p>
- The <code>{name}</code> package is {speed} fast.
- Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
+ The <code>{name}</code> package is {speed} fast. Download version {version} from
+ <a href="https://www.npmjs.com/package/{name}">npm</a>
and <a href={website}>learn more here</a>
-</p>
\ No newline at end of file
+</p>
diff --git a/documentation/content/tutorial/04-logic/01-if-blocks/app-a/App.svelte b/documentation/content/tutorial/04-logic/01-if-blocks/app-a/App.svelte
index 38efdc9ddd..a68a0b1219 100644
--- a/documentation/content/tutorial/04-logic/01-if-blocks/app-a/App.svelte
+++ b/documentation/content/tutorial/04-logic/01-if-blocks/app-a/App.svelte
@@ -6,10 +6,6 @@
}
</script>
-<button on:click={toggle}>
- Log out
-</button>
+<button on:click={toggle}> Log out </button>
-<button on:click={toggle}>
- Log in
-</button>
\ No newline at end of file
+<button on:click={toggle}> Log in </button>
diff --git a/documentation/content/tutorial/04-logic/01-if-blocks/app-b/App.svelte b/documentation/content/tutorial/04-logic/01-if-blocks/app-b/App.svelte
index 01b8867ade..d986710847 100644
--- a/documentation/content/tutorial/04-logic/01-if-blocks/app-b/App.svelte
+++ b/documentation/content/tutorial/04-logic/01-if-blocks/app-b/App.svelte
@@ -7,13 +7,9 @@
</script>
{#if user.loggedIn}
- <button on:click={toggle}>
- Log out
- </button>
+ <button on:click={toggle}> Log out </button>
{/if}
{#if !user.loggedIn}
- <button on:click={toggle}>
- Log in
- </button>
-{/if}
\ No newline at end of file
+ <button on:click={toggle}> Log in </button>
+{/if}
diff --git a/documentation/content/tutorial/04-logic/02-else-blocks/app-a/App.svelte b/documentation/content/tutorial/04-logic/02-else-blocks/app-a/App.svelte
index 01b8867ade..d986710847 100644
--- a/documentation/content/tutorial/04-logic/02-else-blocks/app-a/App.svelte
+++ b/documentation/content/tutorial/04-logic/02-else-blocks/app-a/App.svelte
@@ -7,13 +7,9 @@
</script>
{#if user.loggedIn}
- <button on:click={toggle}>
- Log out
- </button>
+ <button on:click={toggle}> Log out </button>
{/if}
{#if !user.loggedIn}
- <button on:click={toggle}>
- Log in
- </button>
-{/if}
\ No newline at end of file
+ <button on:click={toggle}> Log in </button>
+{/if}
diff --git a/documentation/content/tutorial/04-logic/02-else-blocks/app-b/App.svelte b/documentation/content/tutorial/04-logic/02-else-blocks/app-b/App.svelte
index c82565c2f7..146e54bcc0 100644
--- a/documentation/content/tutorial/04-logic/02-else-blocks/app-b/App.svelte
+++ b/documentation/content/tutorial/04-logic/02-else-blocks/app-b/App.svelte
@@ -7,11 +7,7 @@
</script>
{#if user.loggedIn}
- <button on:click={toggle}>
- Log out
- </button>
+ <button on:click={toggle}> Log out </button>
{:else}
- <button on:click={toggle}>
- Log in
- </button>
-{/if}
\ No newline at end of file
+ <button on:click={toggle}> Log in </button>
+{/if}
diff --git a/documentation/content/tutorial/04-logic/03-else-if-blocks/app-a/App.svelte b/documentation/content/tutorial/04-logic/03-else-if-blocks/app-a/App.svelte
index efffa9af2b..2b740dbf9b 100644
--- a/documentation/content/tutorial/04-logic/03-else-if-blocks/app-a/App.svelte
+++ b/documentation/content/tutorial/04-logic/03-else-if-blocks/app-a/App.svelte
@@ -4,10 +4,8 @@
{#if x > 10}
<p>{x} is greater than 10</p>
+{:else if 5 > x}
+ <p>{x} is less than 5</p>
{:else}
- {#if 5 > x}
- <p>{x} is less than 5</p>
- {:else}
- <p>{x} is between 5 and 10</p>
- {/if}
-{/if}
\ No newline at end of file
+ <p>{x} is between 5 and 10</p>
+{/if}
diff --git a/documentation/content/tutorial/04-logic/03-else-if-blocks/app-b/App.svelte b/documentation/content/tutorial/04-logic/03-else-if-blocks/app-b/App.svelte
index 9102618ff4..2b740dbf9b 100644
--- a/documentation/content/tutorial/04-logic/03-else-if-blocks/app-b/App.svelte
+++ b/documentation/content/tutorial/04-logic/03-else-if-blocks/app-b/App.svelte
@@ -8,4 +8,4 @@
<p>{x} is less than 5</p>
{:else}
<p>{x} is between 5 and 10</p>
-{/if}
\ No newline at end of file
+{/if}
diff --git a/documentation/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte b/documentation/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte
index 6c0cca3587..de2601e7e6 100644
--- a/documentation/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte
+++ b/documentation/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte
@@ -10,8 +10,10 @@
<ul>
<!-- open each block -->
- <li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}" rel="noreferrer">
+ <li>
+ <a target="_blank" href="https://www.youtube.com/watch?v={cat.id}" rel="noreferrer">
{cat.name}
- </a></li>
+ </a>
+ </li>
<!-- close each block -->
-</ul>
\ No newline at end of file
+</ul>
diff --git a/documentation/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte b/documentation/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte
index 3a13c0057f..527372f5ed 100644
--- a/documentation/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte
+++ b/documentation/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte
@@ -10,8 +10,10 @@
<ul>
{#each cats as { id, name }, i}
- <li><a target="_blank" href="https://www.youtube.com/watch?v={id}" rel="noreferrer">
- {i + 1}: {name}
- </a></li>
+ <li>
+ <a target="_blank" href="https://www.youtube.com/watch?v={id}" rel="noreferrer">
+ {i + 1}: {name}
+ </a>
+ </li>
{/each}
-</ul>
\ No newline at end of file
+</ul>
diff --git a/documentation/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte b/documentation/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte
index 36a97ea1ba..60cd74fbe7 100644
--- a/documentation/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte
+++ b/documentation/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte
@@ -6,7 +6,7 @@
{ id: 2, name: 'banana' },
{ id: 3, name: 'carrot' },
{ id: 4, name: 'doughnut' },
- { id: 5, name: 'egg' },
+ { id: 5, name: 'egg' }
];
function handleClick() {
@@ -14,10 +14,8 @@
}
</script>
-<button on:click={handleClick}>
- Remove first thing
-</button>
+<button on:click={handleClick}> Remove first thing </button>
{#each things as thing}
- <Thing name={thing.name}/>
+ <Thing name={thing.name} />
{/each}
diff --git a/documentation/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte b/documentation/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte
index e91026fb98..3290a5a4d9 100644
--- a/documentation/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte
+++ b/documentation/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte
@@ -2,12 +2,12 @@
import { onDestroy } from 'svelte';
const emojis = {
- apple: "🍎",
- banana: "🍌",
- carrot: "🥕",
- doughnut: "🍩",
- egg: "🥚"
- }
+ apple: '🍎',
+ banana: '🍌',
+ carrot: '🥕',
+ doughnut: '🍩',
+ egg: '🥚'
+ };
// the name is updated whenever the prop value changes...
export let name;
@@ -17,12 +17,12 @@
// observe in the console which entry is removed
onDestroy(() => {
- console.log('thing destroyed: ' + name)
+ console.log('thing destroyed: ' + name);
});
</script>
<p>
- <span>The emoji for { name } is { emoji }</span>
+ <span>The emoji for {name} is {emoji}</span>
</p>
<style>
@@ -34,6 +34,6 @@
padding: 0.2em 1em 0.3em;
text-align: center;
border-radius: 0.2em;
- background-color: #FFDFD3;
+ background-color: #ffdfd3;
}
</style>
diff --git a/documentation/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte b/documentation/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte
index 0939d58b8a..4e485456da 100644
--- a/documentation/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte
+++ b/documentation/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte
@@ -6,7 +6,7 @@
{ id: 2, name: 'banana' },
{ id: 3, name: 'carrot' },
{ id: 4, name: 'doughnut' },
- { id: 5, name: 'egg' },
+ { id: 5, name: 'egg' }
];
function handleClick() {
@@ -14,10 +14,8 @@
}
</script>
-<button on:click={handleClick}>
- Remove first thing
-</button>
+<button on:click={handleClick}> Remove first thing </button>
-{#each things as thing (thing.id) }
- <Thing name={thing.name}/>
+{#each things as thing (thing.id)}
+ <Thing name={thing.name} />
{/each}
diff --git a/documentation/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte b/documentation/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte
index e91026fb98..3290a5a4d9 100644
--- a/documentation/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte
+++ b/documentation/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte
@@ -2,12 +2,12 @@
import { onDestroy } from 'svelte';
const emojis = {
- apple: "🍎",
- banana: "🍌",
- carrot: "🥕",
- doughnut: "🍩",
- egg: "🥚"
- }
+ apple: '🍎',
+ banana: '🍌',
+ carrot: '🥕',
+ doughnut: '🍩',
+ egg: '🥚'
+ };
// the name is updated whenever the prop value changes...
export let name;
@@ -17,12 +17,12 @@
// observe in the console which entry is removed
onDestroy(() => {
- console.log('thing destroyed: ' + name)
+ console.log('thing destroyed: ' + name);
});
</script>
<p>
- <span>The emoji for { name } is { emoji }</span>
+ <span>The emoji for {name} is {emoji}</span>
</p>
<style>
@@ -34,6 +34,6 @@
padding: 0.2em 1em 0.3em;
text-align: center;
border-radius: 0.2em;
- background-color: #FFDFD3;
+ background-color: #ffdfd3;
}
</style>
diff --git a/documentation/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte b/documentation/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte
index c473065f63..430bade379 100644
--- a/documentation/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte
+++ b/documentation/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte
@@ -17,9 +17,7 @@
}
</script>
-<button on:click={handleClick}>
- generate random number
-</button>
+<button on:click={handleClick}> generate random number </button>
<!-- replace this element -->
<p>{promise}</p>
diff --git a/documentation/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte b/documentation/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte
index a05bd884d1..ac46be1d63 100644
--- a/documentation/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte
+++ b/documentation/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte
@@ -9,7 +9,7 @@
throw new Error(text);
}
}
-
+
let promise = getRandomNumber();
function handleClick() {
@@ -17,9 +17,7 @@
}
</script>
-<button on:click={handleClick}>
- generate random number
-</button>
+<button on:click={handleClick}> generate random number </button>
{#await promise}
<p>...waiting</p>
diff --git a/documentation/content/tutorial/05-events/01-dom-events/app-a/App.svelte b/documentation/content/tutorial/05-events/01-dom-events/app-a/App.svelte
index 0ba620308e..5a020e0ea9 100644
--- a/documentation/content/tutorial/05-events/01-dom-events/app-a/App.svelte
+++ b/documentation/content/tutorial/05-events/01-dom-events/app-a/App.svelte
@@ -12,5 +12,8 @@
</div>
<style>
- div { width: 100%; height: 100%; }
-</style>
\ No newline at end of file
+ div {
+ width: 100%;
+ height: 100%;
+ }
+</style>
diff --git a/documentation/content/tutorial/05-events/01-dom-events/app-b/App.svelte b/documentation/content/tutorial/05-events/01-dom-events/app-b/App.svelte
index de1f664112..54470a9a5e 100644
--- a/documentation/content/tutorial/05-events/01-dom-events/app-b/App.svelte
+++ b/documentation/content/tutorial/05-events/01-dom-events/app-b/App.svelte
@@ -12,5 +12,8 @@
</div>
<style>
- div { width: 100%; height: 100%; }
-</style>
\ No newline at end of file
+ div {
+ width: 100%;
+ height: 100%;
+ }
+</style>
diff --git a/documentation/content/tutorial/05-events/02-inline-handlers/app-a/App.svelte b/documentation/content/tutorial/05-events/02-inline-handlers/app-a/App.svelte
index de1f664112..54470a9a5e 100644
--- a/documentation/content/tutorial/05-events/02-inline-handlers/app-a/App.svelte
+++ b/documentation/content/tutorial/05-events/02-inline-handlers/app-a/App.svelte
@@ -12,5 +12,8 @@
</div>
<style>
- div { width: 100%; height: 100%; }
-</style>
\ No newline at end of file
+ div {
+ width: 100%;
+ height: 100%;
+ }
+</style>
diff --git a/documentation/content/tutorial/05-events/02-inline-handlers/app-b/App.svelte b/documentation/content/tutorial/05-events/02-inline-handlers/app-b/App.svelte
index 36fed40a4f..24127035ad 100644
--- a/documentation/content/tutorial/05-events/02-inline-handlers/app-b/App.svelte
+++ b/documentation/content/tutorial/05-events/02-inline-handlers/app-b/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%; }
-</style>
\ No newline at end of file
+ div {
+ width: 100%;
+ height: 100%;
+ }
+</style>
diff --git a/documentation/content/tutorial/05-events/03-event-modifiers/app-a/App.svelte b/documentation/content/tutorial/05-events/03-event-modifiers/app-a/App.svelte
index e49115d4f1..0a000c832f 100644
--- a/documentation/content/tutorial/05-events/03-event-modifiers/app-a/App.svelte
+++ b/documentation/content/tutorial/05-events/03-event-modifiers/app-a/App.svelte
@@ -1,9 +1,7 @@
<script>
function handleClick() {
- alert('clicked')
+ alert('clicked');
}
</script>
-<button on:click={handleClick}>
- Click me
-</button>
\ No newline at end of file
+<button on:click={handleClick}> Click me </button>
diff --git a/documentation/content/tutorial/05-events/03-event-modifiers/app-b/App.svelte b/documentation/content/tutorial/05-events/03-event-modifiers/app-b/App.svelte
index 94df49cb2d..c22168901f 100644
--- a/documentation/content/tutorial/05-events/03-event-modifiers/app-b/App.svelte
+++ b/documentation/content/tutorial/05-events/03-event-modifiers/app-b/App.svelte
@@ -1,9 +1,7 @@
<script>
function handleClick() {
- alert('no more alerts')
+ alert('no more alerts');
}
</script>
-<button on:click|once={handleClick}>
- Click me
-</button>
\ No newline at end of file
+<button on:click|once={handleClick}> Click me </button>
diff --git a/documentation/content/tutorial/05-events/04-component-events/app-a/App.svelte b/documentation/content/tutorial/05-events/04-component-events/app-a/App.svelte
index a8d14a368a..3600b45efd 100644
--- a/documentation/content/tutorial/05-events/04-component-events/app-a/App.svelte
+++ b/documentation/content/tutorial/05-events/04-component-events/app-a/App.svelte
@@ -6,4 +6,4 @@
}
</script>
-<Inner on:message={handleMessage}/>
\ No newline at end of file
+<Inner on:message={handleMessage} />
diff --git a/documentation/content/tutorial/05-events/04-component-events/app-a/Inner.svelte b/documentation/content/tutorial/05-events/04-component-events/app-a/Inner.svelte
index 0a7980c45c..cf0d8c89f2 100644
--- a/documentation/content/tutorial/05-events/04-component-events/app-a/Inner.svelte
+++ b/documentation/content/tutorial/05-events/04-component-events/app-a/Inner.svelte
@@ -1,11 +1,7 @@
<script>
// setup code goes here
- function sayHello() {
-
- }
+ function sayHello() {}
</script>
-<button on:click={sayHello}>
- Click to say hello
-</button>
\ No newline at end of file
+<button on:click={sayHello}> Click to say hello </button>
diff --git a/documentation/content/tutorial/05-events/04-component-events/app-b/App.svelte b/documentation/content/tutorial/05-events/04-component-events/app-b/App.svelte
index a8d14a368a..3600b45efd 100644
--- a/documentation/content/tutorial/05-events/04-component-events/app-b/App.svelte
+++ b/documentation/content/tutorial/05-events/04-component-events/app-b/App.svelte
@@ -6,4 +6,4 @@
}
</script>
-<Inner on:message={handleMessage}/>
\ No newline at end of file
+<Inner on:message={handleMessage} />
diff --git a/documentation/content/tutorial/05-events/04-component-events/app-b/Inner.svelte b/documentation/content/tutorial/05-events/04-component-events/app-b/Inner.svelte
index 6ac8301f24..c2e85b4c97 100644
--- a/documentation/content/tutorial/05-events/04-component-events/app-b/Inner.svelte
+++ b/documentation/content/tutorial/05-events/04-component-events/app-b/Inner.svelte
@@ -10,6 +10,4 @@
}
</script>
-<button on:click={sayHello}>
- Click to say hello
-</button>
\ No newline at end of file
+<button on:click={sayHello}> Click to say hello </button>
diff --git a/documentation/content/tutorial/05-events/05-event-forwarding/app-a/App.svelte b/documentation/content/tutorial/05-events/05-event-forwarding/app-a/App.svelte
index 973df50f0a..2e8e743f4e 100644
--- a/documentation/content/tutorial/05-events/05-event-forwarding/app-a/App.svelte
+++ b/documentation/content/tutorial/05-events/05-event-forwarding/app-a/App.svelte
@@ -6,4 +6,4 @@
}
</script>
-<Outer on:message={handleMessage}/>
\ No newline at end of file
+<Outer on:message={handleMessage} />
diff --git a/documentation/content/tutorial/05-events/05-event-forwarding/app-a/Inner.svelte b/documentation/content/tutorial/05-events/05-event-forwarding/app-a/Inner.svelte
index 6ac8301f24..c2e85b4c97 100644
--- a/documentation/content/tutorial/05-events/05-event-forwarding/app-a/Inner.svelte
+++ b/documentation/content/tutorial/05-events/05-event-forwarding/app-a/Inner.svelte
@@ -10,6 +10,4 @@
}
</script>
-<button on:click={sayHello}>
- Click to say hello
-</button>
\ No newline at end of file
+<button on:click={sayHello}> Click to say hello </button>
diff --git a/documentation/content/tutorial/05-events/05-event-forwarding/app-a/Outer.svelte b/documentation/content/tutorial/05-events/05-event-forwarding/app-a/Outer.svelte
index 6c13070e79..77f0490d23 100644
--- a/documentation/content/tutorial/05-events/05-event-forwarding/app-a/Outer.svelte
+++ b/documentation/content/tutorial/05-events/05-event-forwarding/app-a/Outer.svelte
@@ -2,4 +2,4 @@
import Inner from './Inner.svelte';
</script>
-<Inner/>
\ No newline at end of file
+<Inner />
diff --git a/documentation/content/tutorial/05-events/05-event-forwarding/app-b/App.svelte b/documentation/content/tutorial/05-events/05-event-forwarding/app-b/App.svelte
index 973df50f0a..2e8e743f4e 100644
--- a/documentation/content/tutorial/05-events/05-event-forwarding/app-b/App.svelte
+++ b/documentation/content/tutorial/05-events/05-event-forwarding/app-b/App.svelte
@@ -6,4 +6,4 @@
}
</script>
-<Outer on:message={handleMessage}/>
\ No newline at end of file
+<Outer on:message={handleMessage} />
diff --git a/documentation/content/tutorial/05-events/05-event-forwarding/app-b/Inner.svelte b/documentation/content/tutorial/05-events/05-event-forwarding/app-b/Inner.svelte
index 6ac8301f24..c2e85b4c97 100644
--- a/documentation/content/tutorial/05-events/05-event-forwarding/app-b/Inner.svelte
+++ b/documentation/content/tutorial/05-events/05-event-forwarding/app-b/Inner.svelte
@@ -10,6 +10,4 @@
}
</script>
-<button on:click={sayHello}>
- Click to say hello
-</button>
\ No newline at end of file
+<button on:click={sayHello}> Click to say hello </button>
diff --git a/documentation/content/tutorial/05-events/05-event-forwarding/app-b/Outer.svelte b/documentation/content/tutorial/05-events/05-event-forwarding/app-b/Outer.svelte
index 10c28f298a..62a5d1d852 100644
--- a/documentation/content/tutorial/05-events/05-event-forwarding/app-b/Outer.svelte
+++ b/documentation/content/tutorial/05-events/05-event-forwarding/app-b/Outer.svelte
@@ -2,4 +2,4 @@
import Inner from './Inner.svelte';
</script>
-<Inner on:message/>
\ No newline at end of file
+<Inner on:message />
diff --git a/documentation/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte b/documentation/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte
index 32c4e2a33c..f7dc6576bf 100644
--- a/documentation/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte
+++ b/documentation/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte
@@ -6,4 +6,4 @@
}
</script>
-<CustomButton on:click={handleClick}/>
\ No newline at end of file
+<CustomButton on:click={handleClick} />
diff --git a/documentation/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte b/documentation/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
index d7292a3717..be35e53a41 100644
--- a/documentation/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
+++ b/documentation/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
@@ -1,22 +1,20 @@
-<button>
- Click me
-</button>
+<button> Click me </button>
<style>
button {
- background: #E2E8F0;
- color: #64748B;
+ background: #e2e8f0;
+ color: #64748b;
border: unset;
border-radius: 6px;
- padding: .75rem 1.5rem;
+ padding: 0.75rem 1.5rem;
cursor: pointer;
}
button:hover {
- background: #CBD5E1;
+ background: #cbd5e1;
color: #475569;
}
button:focus {
- background: #94A3B8;
- color: #F1F5F9;
+ background: #94a3b8;
+ color: #f1f5f9;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte b/documentation/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte
index 32c4e2a33c..f7dc6576bf 100644
--- a/documentation/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte
+++ b/documentation/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte
@@ -6,4 +6,4 @@
}
</script>
-<CustomButton on:click={handleClick}/>
\ No newline at end of file
+<CustomButton on:click={handleClick} />
diff --git a/documentation/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte b/documentation/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
index 141ea14980..04f17a4436 100644
--- a/documentation/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
+++ b/documentation/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
@@ -1,22 +1,20 @@
-<button on:click>
- Click me
-</button>
+<button on:click> Click me </button>
<style>
button {
- background: #E2E8F0;
- color: #64748B;
+ background: #e2e8f0;
+ color: #64748b;
border: unset;
border-radius: 6px;
- padding: .75rem 1.5rem;
+ padding: 0.75rem 1.5rem;
cursor: pointer;
}
button:hover {
- background: #CBD5E1;
+ background: #cbd5e1;
color: #475569;
}
button:focus {
- background: #94A3B8;
- color: #F1F5F9;
+ background: #94a3b8;
+ color: #f1f5f9;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/06-bindings/01-text-inputs/app-a/App.svelte b/documentation/content/tutorial/06-bindings/01-text-inputs/app-a/App.svelte
index f1c03071ed..39ae9ad6b9 100644
--- a/documentation/content/tutorial/06-bindings/01-text-inputs/app-a/App.svelte
+++ b/documentation/content/tutorial/06-bindings/01-text-inputs/app-a/App.svelte
@@ -2,6 +2,6 @@
let name = 'world';
</script>
-<input value={name}>
+<input value={name} />
-<h1>Hello {name}!</h1>
\ No newline at end of file
+<h1>Hello {name}!</h1>
diff --git a/documentation/content/tutorial/06-bindings/01-text-inputs/app-b/App.svelte b/documentation/content/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
index 89dd54a709..94061c0df2 100644
--- a/documentation/content/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
+++ b/documentation/content/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
@@ -2,6 +2,6 @@
let name = 'world';
</script>
-<input bind:value={name}>
+<input bind:value={name} />
-<h1>Hello {name}!</h1>
\ No newline at end of file
+<h1>Hello {name}!</h1>
diff --git a/documentation/content/tutorial/06-bindings/02-numeric-inputs/app-a/App.svelte b/documentation/content/tutorial/06-bindings/02-numeric-inputs/app-a/App.svelte
index 795090a8bd..69f1405744 100644
--- a/documentation/content/tutorial/06-bindings/02-numeric-inputs/app-a/App.svelte
+++ b/documentation/content/tutorial/06-bindings/02-numeric-inputs/app-a/App.svelte
@@ -4,18 +4,23 @@
</script>
<label>
- <input type=number value={a} min=0 max=10>
- <input type=range value={a} min=0 max=10>
+ <input type="number" value={a} min="0" max="10" />
+ <input type="range" value={a} min="0" max="10" />
</label>
<label>
- <input type=number value={b} min=0 max=10>
- <input type=range value={b} min=0 max=10>
+ <input type="number" value={b} min="0" max="10" />
+ <input type="range" value={b} min="0" max="10" />
</label>
<p>{a} + {b} = {a + b}</p>
<style>
- label { display: flex }
- input, p { margin: 6px }
-</style>
\ No newline at end of file
+ label {
+ display: flex;
+ }
+ input,
+ p {
+ margin: 6px;
+ }
+</style>
diff --git a/documentation/content/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte b/documentation/content/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
index a419675623..0598d99ee0 100644
--- a/documentation/content/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
+++ b/documentation/content/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
@@ -4,18 +4,23 @@
</script>
<label>
- <input type=number bind:value={a} min=0 max=10>
- <input type=range 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" />
</label>
<label>
- <input type=number bind:value={b} min=0 max=10>
- <input type=range 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" />
</label>
<p>{a} + {b} = {a + b}</p>
<style>
- label { display: flex }
- input, p { margin: 6px }
-</style>
\ No newline at end of file
+ label {
+ display: flex;
+ }
+ input,
+ p {
+ margin: 6px;
+ }
+</style>
diff --git a/documentation/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte b/documentation/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte
index 7d8425a8db..fcc421e3b9 100644
--- a/documentation/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte
+++ b/documentation/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte
@@ -3,7 +3,7 @@
</script>
<label>
- <input type=checkbox checked={yes}>
+ <input type="checkbox" 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}>
- Subscribe
-</button>
\ No newline at end of file
+<button disabled={!yes}> Subscribe </button>
diff --git a/documentation/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte b/documentation/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
index 1831da1793..b337359317 100644
--- a/documentation/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
+++ b/documentation/content/tutorial/06-bindings/03-checkbox-inputs/app-b/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}>
- Subscribe
-</button>
\ No newline at end of file
+<button disabled={!yes}> Subscribe </button>
diff --git a/documentation/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte b/documentation/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte
index 3a29f89484..f41a922a4b 100644
--- a/documentation/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte
+++ b/documentation/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte
@@ -11,34 +11,34 @@
<h2>Size</h2>
<label>
- <input type=radio group={scoops} name="scoops" value={1}>
+ <input type="radio" group={scoops} name="scoops" value={1} />
One scoop
</label>
<label>
- <input type=radio group={scoops} name="scoops" value={2}>
+ <input type="radio" group={scoops} name="scoops" value={2} />
Two scoops
</label>
<label>
- <input type=radio group={scoops} name="scoops" value={3}>
+ <input type="radio" group={scoops} name="scoops" value={3} />
Three scoops
</label>
<h2>Flavours</h2>
<label>
- <input type=checkbox group={flavours} name="flavours" value="Cookies and cream">
+ <input type="checkbox" group={flavours} name="flavours" value="Cookies and cream" />
Cookies and cream
</label>
<label>
- <input type=checkbox group={flavours} name="flavours" value="Mint choc chip">
+ <input type="checkbox" group={flavours} name="flavours" value="Mint choc chip" />
Mint choc chip
</label>
<label>
- <input type=checkbox group={flavours} name="flavours" value="Raspberry ripple">
+ <input type="checkbox" group={flavours} name="flavours" value="Raspberry ripple" />
Raspberry ripple
</label>
@@ -48,7 +48,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}
\ No newline at end of file
+{/if}
diff --git a/documentation/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte b/documentation/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
index d97db41f0b..ce0565ab8e 100644
--- a/documentation/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
+++ b/documentation/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
@@ -2,11 +2,7 @@
let scoops = 1;
let flavours = ['Mint choc chip'];
- let menu = [
- 'Cookies and cream',
- 'Mint choc chip',
- 'Raspberry ripple'
- ];
+ let menu = ['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} name="scoops" value={1}>
+ <input type="radio" bind:group={scoops} name="scoops" value={1} />
One scoop
</label>
<label>
- <input type=radio bind:group={scoops} name="scoops" value={2}>
+ <input type="radio" bind:group={scoops} name="scoops" value={2} />
Two scoops
</label>
<label>
- <input type=radio bind:group={scoops} name="scoops" value={3}>
+ <input type="radio" bind:group={scoops} name="scoops" value={3} />
Three scoops
</label>
@@ -35,7 +31,7 @@
{#each menu as flavour}
<label>
- <input type=checkbox bind:group={flavours} name="flavours" value={flavour}>
+ <input type="checkbox" bind:group={flavours} name="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}
\ No newline at end of file
+{/if}
diff --git a/documentation/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte b/documentation/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte
index b3b9024e13..8de3d510d2 100644
--- a/documentation/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte
+++ b/documentation/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte
@@ -5,8 +5,11 @@
{@html marked(value)}
-<textarea value={value}></textarea>
+<textarea {value} />
<style>
- textarea { width: 100%; height: 200px; }
+ textarea {
+ width: 100%;
+ height: 200px;
+ }
</style>
diff --git a/documentation/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte b/documentation/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte
index dbeaf9b67b..ccfaad4c2a 100644
--- a/documentation/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte
+++ b/documentation/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte
@@ -5,8 +5,11 @@
{@html marked(value)}
-<textarea bind:value></textarea>
+<textarea bind:value />
<style>
- textarea { width: 100%; height: 200px; }
+ textarea {
+ width: 100%;
+ height: 200px;
+ }
</style>
diff --git a/documentation/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte b/documentation/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
index a70b928809..eaaa0aeabe 100644
--- a/documentation/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
+++ b/documentation/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
@@ -17,7 +17,7 @@
<h2>Insecurity questions</h2>
<form on:submit|preventDefault={handleSubmit}>
- <select value={selected} on:change="{() => answer = ''}">
+ <select value={selected} on:change={() => (answer = '')}>
{#each questions as question}
<option value={question}>
{question.text}
@@ -25,11 +25,9 @@
{/each}
</select>
- <input bind:value={answer}>
+ <input bind:value={answer} />
- <button disabled={!answer} type=submit>
- Submit
- </button>
+ <button disabled={!answer} type="submit"> Submit </button>
</form>
<p>selected question {selected ? selected.id : '[waiting...]'}</p>
@@ -40,4 +38,4 @@
width: 500px;
max-width: 100%;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte b/documentation/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
index c584c95b0e..7785258fe2 100644
--- a/documentation/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
+++ b/documentation/content/tutorial/06-bindings/06-select-bindings/app-b/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,11 +25,9 @@
{/each}
</select>
- <input bind:value={answer}>
+ <input bind:value={answer} />
- <button disabled={!answer} type=submit>
- Submit
- </button>
+ <button disabled={!answer} type="submit"> Submit </button>
</form>
<p>selected question {selected ? selected.id : '[waiting...]'}</p>
@@ -40,4 +38,4 @@
width: 500px;
max-width: 100%;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte b/documentation/content/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
index a46c61c7e7..0ab215d519 100644
--- a/documentation/content/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
+++ b/documentation/content/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
@@ -2,11 +2,7 @@
let scoops = 1;
let flavours = ['Mint choc chip'];
- let menu = [
- 'Cookies and cream',
- 'Mint choc chip',
- 'Raspberry ripple'
- ];
+ let menu = ['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}
diff --git a/documentation/content/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte b/documentation/content/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
index d808850158..2fd19c28ad 100644
--- a/documentation/content/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
+++ b/documentation/content/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
@@ -2,11 +2,7 @@
let scoops = 1;
let flavours = ['Mint choc chip'];
- let menu = [
- 'Cookies and cream',
- 'Mint choc chip',
- 'Raspberry ripple'
- ];
+ let menu = ['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}
diff --git a/documentation/content/tutorial/06-bindings/08-contenteditable-bindings/app-a/App.svelte b/documentation/content/tutorial/06-bindings/08-contenteditable-bindings/app-a/App.svelte
index 55d699959c..2d01a6ced8 100644
--- a/documentation/content/tutorial/06-bindings/08-contenteditable-bindings/app-a/App.svelte
+++ b/documentation/content/tutorial/06-bindings/08-contenteditable-bindings/app-a/App.svelte
@@ -2,7 +2,7 @@
let html = '<p>Write some text!</p>';
</script>
-<div contenteditable="true"></div>
+<div contenteditable="true" />
<pre>{html}</pre>
@@ -12,4 +12,4 @@
border: 1px solid #eee;
border-radius: 4px;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte b/documentation/content/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte
index ee97cf19c0..b7c0ad8c31 100644
--- a/documentation/content/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte
+++ b/documentation/content/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte
@@ -2,10 +2,7 @@
let html = '<p>Write some text!</p>';
</script>
-<div
- contenteditable="true"
- bind:innerHTML={html}
-></div>
+<div contenteditable="true" bind:innerHTML={html} />
<pre>{html}</pre>
@@ -15,4 +12,4 @@
border: 1px solid #eee;
border-radius: 4px;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/06-bindings/09-each-block-bindings/app-a/App.svelte b/documentation/content/tutorial/06-bindings/09-each-block-bindings/app-a/App.svelte
index b0323eb00a..a42c8136ad 100644
--- a/documentation/content/tutorial/06-bindings/09-each-block-bindings/app-a/App.svelte
+++ b/documentation/content/tutorial/06-bindings/09-each-block-bindings/app-a/App.svelte
@@ -10,40 +10,30 @@
}
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 class:done={todo.done}>
- <input
- type=checkbox
- checked={todo.done}
- >
-
- <input
- placeholder="What needs to be done?"
- value={todo.text}
- >
+ <input type="checkbox" checked={todo.done} />
+
+ <input placeholder="What needs to be done?" value={todo.text} />
</div>
{/each}
<p>{remaining} remaining</p>
-<button on:click={add}>
- Add new
-</button>
+<button on:click={add}> Add new </button>
-<button on:click={clear}>
- Clear completed
-</button>
+<button on:click={clear}> Clear completed </button>
<style>
.done {
opacity: 0.4;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte b/documentation/content/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
index b42cbe3b0a..3ddb1a4fb4 100644
--- a/documentation/content/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
+++ b/documentation/content/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
@@ -10,40 +10,30 @@
}
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 class:done={todo.done}>
- <input
- type=checkbox
- bind:checked={todo.done}
- >
-
- <input
- placeholder="What needs to be done?"
- bind:value={todo.text}
- >
+ <input type="checkbox" bind:checked={todo.done} />
+
+ <input placeholder="What needs to be done?" bind:value={todo.text} />
</div>
{/each}
<p>{remaining} remaining</p>
-<button on:click={add}>
- Add new
-</button>
+<button on:click={add}> Add new </button>
-<button on:click={clear}>
- Clear completed
-</button>
+<button on:click={clear}> Clear completed </button>
<style>
.done {
opacity: 0.4;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/06-bindings/10-media-elements/app-a/App.svelte b/documentation/content/tutorial/06-bindings/10-media-elements/app-a/App.svelte
index 33d6e3f6eb..2ab418cc08 100644
--- a/documentation/content/tutorial/06-bindings/10-media-elements/app-a/App.svelte
+++ b/documentation/content/tutorial/06-bindings/10-media-elements/app-a/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
@@ -59,12 +59,13 @@
on:mousemove={handleMove}
on:touchmove|preventDefault={handleMove}
on:mousedown={handleMousedown}
- on:mouseup={handleMouseup}>
- <track kind="captions">
+ on:mouseup={handleMouseup}
+ >
+ <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>
@@ -104,7 +105,9 @@
width: 3em;
}
- .time:last-child { text-align: right }
+ .time:last-child {
+ text-align: right;
+ }
progress {
display: block;
@@ -115,11 +118,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 {
diff --git a/documentation/content/tutorial/06-bindings/10-media-elements/app-b/App.svelte b/documentation/content/tutorial/06-bindings/10-media-elements/app-b/App.svelte
index 8048f7e133..836804f8bc 100644
--- a/documentation/content/tutorial/06-bindings/10-media-elements/app-b/App.svelte
+++ b/documentation/content/tutorial/06-bindings/10-media-elements/app-b/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>
- <track kind="captions">
+ bind:paused
+ >
+ <track kind="captions" />
</video>
<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
- <progress value="{(time / duration) || 0}"/>
+ <progress value={time / duration || 0} />
<div class="info">
<span class="time">{format(time)}</span>
@@ -107,7 +108,9 @@
width: 3em;
}
- .time:last-child { text-align: right }
+ .time:last-child {
+ text-align: right;
+ }
progress {
display: block;
@@ -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 {
diff --git a/documentation/content/tutorial/06-bindings/11-dimensions/app-a/App.svelte b/documentation/content/tutorial/06-bindings/11-dimensions/app-a/App.svelte
index 67bb5db8af..96fb6d2477 100644
--- a/documentation/content/tutorial/06-bindings/11-dimensions/app-a/App.svelte
+++ b/documentation/content/tutorial/06-bindings/11-dimensions/app-a/App.svelte
@@ -5,8 +5,8 @@
let text = 'edit me';
</script>
-<input type=range bind:value={size}>
-<input bind:value={text}>
+<input type="range" bind:value={size} />
+<input bind:value={text} />
<p>size: {w}px x {h}px</p>
@@ -15,7 +15,13 @@
</div>
<style>
- input { display: block; }
- div { display: inline-block; }
- span { word-break: break-all; }
-</style>
\ No newline at end of file
+ input {
+ display: block;
+ }
+ div {
+ display: inline-block;
+ }
+ span {
+ word-break: break-all;
+ }
+</style>
diff --git a/documentation/content/tutorial/06-bindings/11-dimensions/app-b/App.svelte b/documentation/content/tutorial/06-bindings/11-dimensions/app-b/App.svelte
index fbed44dadc..699664748a 100644
--- a/documentation/content/tutorial/06-bindings/11-dimensions/app-b/App.svelte
+++ b/documentation/content/tutorial/06-bindings/11-dimensions/app-b/App.svelte
@@ -5,8 +5,8 @@
let text = 'edit me';
</script>
-<input type=range bind:value={size}>
-<input bind:value={text}>
+<input type="range" bind:value={size} />
+<input bind:value={text} />
<p>size: {w}px x {h}px</p>
@@ -15,7 +15,13 @@
</div>
<style>
- input { display: block; }
- div { display: inline-block; }
- span { word-break: break-all; }
-</style>
\ No newline at end of file
+ input {
+ display: block;
+ }
+ div {
+ display: inline-block;
+ }
+ span {
+ word-break: break-all;
+ }
+</style>
diff --git a/documentation/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte b/documentation/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte
index 9c30979ace..b84f7f6bcc 100644
--- a/documentation/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte
+++ b/documentation/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte
@@ -15,10 +15,10 @@
for (let p = 0; p < imageData.data.length; p += 4) {
const i = p / 4;
const x = i % canvas.width;
- const y = i / canvas.width >>> 0;
+ const y = (i / canvas.width) >>> 0;
- const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000));
- const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(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 / 1000);
const b = 128;
imageData.data[p + 0] = r;
@@ -36,10 +36,7 @@
});
</script>
-<canvas
- width={32}
- height={32}
-></canvas>
+<canvas width={32} height={32} />
<style>
canvas {
diff --git a/documentation/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte b/documentation/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte
index 5714f3149a..b73e800947 100644
--- a/documentation/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte
+++ b/documentation/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte
@@ -15,10 +15,10 @@
for (let p = 0; p < imageData.data.length; p += 4) {
const i = p / 4;
const x = i % canvas.width;
- const y = i / canvas.width >>> 0;
+ const y = (i / canvas.width) >>> 0;
- const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000));
- const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(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 / 1000);
const b = 128;
imageData.data[p + 0] = r;
@@ -36,11 +36,7 @@
});
</script>
-<canvas
- bind:this={canvas}
- width={32}
- height={32}
-></canvas>
+<canvas bind:this={canvas} width={32} height={32} />
<style>
canvas {
diff --git a/documentation/content/tutorial/06-bindings/13-component-bindings/app-a/App.svelte b/documentation/content/tutorial/06-bindings/13-component-bindings/app-a/App.svelte
index 4eba735de6..9a31c537a6 100644
--- a/documentation/content/tutorial/06-bindings/13-component-bindings/app-a/App.svelte
+++ b/documentation/content/tutorial/06-bindings/13-component-bindings/app-a/App.svelte
@@ -11,4 +11,4 @@
<h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>
-<Keypad on:submit={handleSubmit}/>
\ No newline at end of file
+<Keypad on:submit={handleSubmit} />
diff --git a/documentation/content/tutorial/06-bindings/13-component-bindings/app-a/Keypad.svelte b/documentation/content/tutorial/06-bindings/13-component-bindings/app-a/Keypad.svelte
index 631f7964e2..c814a2238f 100644
--- a/documentation/content/tutorial/06-bindings/13-component-bindings/app-a/Keypad.svelte
+++ b/documentation/content/tutorial/06-bindings/13-component-bindings/app-a/Keypad.svelte
@@ -5,8 +5,8 @@
const dispatch = createEventDispatcher();
- const select = num => () => value += num;
- const clear = () => value = '';
+ const select = (num) => () => (value += num);
+ 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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/06-bindings/13-component-bindings/app-b/App.svelte b/documentation/content/tutorial/06-bindings/13-component-bindings/app-b/App.svelte
index 67fec4a5ad..b3666f891d 100644
--- a/documentation/content/tutorial/06-bindings/13-component-bindings/app-b/App.svelte
+++ b/documentation/content/tutorial/06-bindings/13-component-bindings/app-b/App.svelte
@@ -11,4 +11,4 @@
<h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>
-<Keypad bind:value={pin} on:submit={handleSubmit}/>
\ No newline at end of file
+<Keypad bind:value={pin} on:submit={handleSubmit} />
diff --git a/documentation/content/tutorial/06-bindings/13-component-bindings/app-b/Keypad.svelte b/documentation/content/tutorial/06-bindings/13-component-bindings/app-b/Keypad.svelte
index 631f7964e2..c814a2238f 100644
--- a/documentation/content/tutorial/06-bindings/13-component-bindings/app-b/Keypad.svelte
+++ b/documentation/content/tutorial/06-bindings/13-component-bindings/app-b/Keypad.svelte
@@ -5,8 +5,8 @@
const dispatch = createEventDispatcher();
- const select = num => () => value += num;
- const clear = () => value = '';
+ const select = (num) => () => (value += num);
+ 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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/06-bindings/14-component-this/app-a/InputField.svelte b/documentation/content/tutorial/06-bindings/14-component-this/app-a/InputField.svelte
index e2b04b93ed..caf9c2c9e3 100644
--- a/documentation/content/tutorial/06-bindings/14-component-this/app-a/InputField.svelte
+++ b/documentation/content/tutorial/06-bindings/14-component-this/app-a/InputField.svelte
@@ -6,4 +6,4 @@
}
</script>
-<input bind:this={input} />
\ No newline at end of file
+<input bind:this={input} />
diff --git a/documentation/content/tutorial/06-bindings/14-component-this/app-b/App.svelte b/documentation/content/tutorial/06-bindings/14-component-this/app-b/App.svelte
index f14332b398..b5bd3d2e7d 100644
--- a/documentation/content/tutorial/06-bindings/14-component-this/app-b/App.svelte
+++ b/documentation/content/tutorial/06-bindings/14-component-this/app-b/App.svelte
@@ -4,6 +4,6 @@
let field;
</script>
-<InputField bind:this={field}/>
+<InputField bind:this={field} />
<button on:click={() => field.focus()}>Focus field</button>
diff --git a/documentation/content/tutorial/06-bindings/14-component-this/app-b/InputField.svelte b/documentation/content/tutorial/06-bindings/14-component-this/app-b/InputField.svelte
index e2b04b93ed..caf9c2c9e3 100644
--- a/documentation/content/tutorial/06-bindings/14-component-this/app-b/InputField.svelte
+++ b/documentation/content/tutorial/06-bindings/14-component-this/app-b/InputField.svelte
@@ -6,4 +6,4 @@
}
</script>
-<input bind:this={input} />
\ No newline at end of file
+<input bind:this={input} />
diff --git a/documentation/content/tutorial/07-lifecycle/01-onmount/app-a/App.svelte b/documentation/content/tutorial/07-lifecycle/01-onmount/app-a/App.svelte
index f76c377ad3..43f8fbd05c 100644
--- a/documentation/content/tutorial/07-lifecycle/01-onmount/app-a/App.svelte
+++ b/documentation/content/tutorial/07-lifecycle/01-onmount/app-a/App.svelte
@@ -7,7 +7,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}
@@ -24,8 +24,9 @@
grid-gap: 8px;
}
- figure, img {
+ figure,
+ img {
width: 100%;
margin: 0;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/07-lifecycle/01-onmount/app-b/App.svelte b/documentation/content/tutorial/07-lifecycle/01-onmount/app-b/App.svelte
index 7dc7a1ec7a..c8d1f6092f 100644
--- a/documentation/content/tutorial/07-lifecycle/01-onmount/app-b/App.svelte
+++ b/documentation/content/tutorial/07-lifecycle/01-onmount/app-b/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,8 +31,9 @@
grid-gap: 8px;
}
- figure, img {
+ figure,
+ img {
width: 100%;
margin: 0;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte b/documentation/content/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte
index 8fdca8d81d..33a2710ba2 100644
--- a/documentation/content/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte
+++ b/documentation/content/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte
@@ -12,9 +12,10 @@
<button on:click={toggle}>{open ? 'Close' : 'Open'} Timer</button>
<p>
The Timer component has been open for
- {seconds} {seconds === 1 ? 'second' : 'seconds'}
+ {seconds}
+ {seconds === 1 ? 'second' : 'seconds'}
</p>
{#if open}
- <Timer callback={handleTick} />
+ <Timer callback={handleTick} />
{/if}
</div>
diff --git a/documentation/content/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte b/documentation/content/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte
index 0eb5a7461d..bf801d908d 100644
--- a/documentation/content/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte
+++ b/documentation/content/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte
@@ -8,12 +8,12 @@
</script>
<p>
- This component executes a callback every
+ This component executes a callback every
{interval} millisecond{interval === 1 ? '' : 's'}
</p>
<style>
- p {
+ p {
border: 1px solid blue;
padding: 5px;
}
diff --git a/documentation/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte b/documentation/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte
index 49936b6617..40406f6cd0 100644
--- a/documentation/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte
+++ b/documentation/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte
@@ -12,9 +12,10 @@
<button on:click={toggle}>{open ? 'Close' : 'Open'} Timer</button>
<p>
The Timer component has been open for
- {seconds} {seconds === 1 ? 'second' : 'seconds'}
+ {seconds}
+ {seconds === 1 ? 'second' : 'seconds'}
</p>
{#if open}
- <Timer callback={handleTick} />
+ <Timer callback={handleTick} />
{/if}
</div>
diff --git a/documentation/content/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte b/documentation/content/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte
index 0eb5a7461d..bf801d908d 100644
--- a/documentation/content/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte
+++ b/documentation/content/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte
@@ -8,12 +8,12 @@
</script>
<p>
- This component executes a callback every
+ This component executes a callback every
{interval} millisecond{interval === 1 ? '' : 's'}
</p>
<style>
- p {
+ p {
border: 1px solid blue;
padding: 5px;
}
diff --git a/documentation/content/tutorial/07-lifecycle/03-update/app-a/App.svelte b/documentation/content/tutorial/07-lifecycle/03-update/app-a/App.svelte
index a009b2cc1f..1677825de4 100644
--- a/documentation/content/tutorial/07-lifecycle/03-update/app-a/App.svelte
+++ b/documentation/content/tutorial/07-lifecycle/03-update/app-a/App.svelte
@@ -15,9 +15,7 @@
const eliza = new Eliza();
- let comments = [
- { author: 'eliza', text: eliza.getInitial() }
- ];
+ let comments = [{ author: 'eliza', text: eliza.getInitial() }];
function handleKeydown(event) {
if (event.key === 'Enter') {
@@ -41,16 +39,32 @@
});
setTimeout(() => {
- comments = comments.filter(comment => !comment.placeholder).concat({
- author: 'eliza',
- text: reply
- });
+ comments = comments
+ .filter((comment) => !comment.placeholder)
+ .concat({
+ author: 'eliza',
+ text: reply
+ });
}, 500 + Math.random() * 500);
}, 200 + Math.random() * 200);
}
}
</script>
+<div class="chat">
+ <h1>Eliza</h1>
+
+ <div class="scrollable" bind:this={div}>
+ {#each comments as comment}
+ <article class={comment.author}>
+ <span>{comment.text}</span>
+ </article>
+ {/each}
+ </div>
+
+ <input on:keydown={handleKeydown} />
+</div>
+
<style>
.chat {
display: flex;
@@ -85,23 +99,9 @@
}
.user span {
- background-color: #0074D9;
+ background-color: #0074d9;
color: white;
border-radius: 1em 1em 0 1em;
word-break: break-all;
}
</style>
-
-<div class="chat">
- <h1>Eliza</h1>
-
- <div class="scrollable" bind:this={div}>
- {#each comments as comment}
- <article class={comment.author}>
- <span>{comment.text}</span>
- </article>
- {/each}
- </div>
-
- <input on:keydown={handleKeydown}>
-</div>
diff --git a/documentation/content/tutorial/07-lifecycle/03-update/app-b/App.svelte b/documentation/content/tutorial/07-lifecycle/03-update/app-b/App.svelte
index 97caca99d5..644810a35e 100644
--- a/documentation/content/tutorial/07-lifecycle/03-update/app-b/App.svelte
+++ b/documentation/content/tutorial/07-lifecycle/03-update/app-b/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 = [
- { author: 'eliza', text: eliza.getInitial() }
- ];
+ let comments = [{ author: 'eliza', text: eliza.getInitial() }];
function handleKeydown(event) {
if (event.key === 'Enter') {
@@ -41,16 +39,32 @@
});
setTimeout(() => {
- comments = comments.filter(comment => !comment.placeholder).concat({
- author: 'eliza',
- text: reply
- });
+ comments = comments
+ .filter((comment) => !comment.placeholder)
+ .concat({
+ author: 'eliza',
+ text: reply
+ });
}, 500 + Math.random() * 500);
}, 200 + Math.random() * 200);
}
}
</script>
+<div class="chat">
+ <h1>Eliza</h1>
+
+ <div class="scrollable" bind:this={div}>
+ {#each comments as comment}
+ <article class={comment.author}>
+ <span>{comment.text}</span>
+ </article>
+ {/each}
+ </div>
+
+ <input on:keydown={handleKeydown} />
+</div>
+
<style>
.chat {
display: flex;
@@ -85,23 +99,9 @@
}
.user span {
- background-color: #0074D9;
+ background-color: #0074d9;
color: white;
border-radius: 1em 1em 0 1em;
word-break: break-all;
}
</style>
-
-<div class="chat">
- <h1>Eliza</h1>
-
- <div class="scrollable" bind:this={div}>
- {#each comments as comment}
- <article class={comment.author}>
- <span>{comment.text}</span>
- </article>
- {/each}
- </div>
-
- <input on:keydown={handleKeydown}>
-</div>
diff --git a/documentation/content/tutorial/07-lifecycle/04-tick/app-a/App.svelte b/documentation/content/tutorial/07-lifecycle/04-tick/app-a/App.svelte
index 97edefa935..28251429b5 100644
--- a/documentation/content/tutorial/07-lifecycle/04-tick/app-a/App.svelte
+++ b/documentation/content/tutorial/07-lifecycle/04-tick/app-a/App.svelte
@@ -9,15 +9,9 @@
const { selectionStart, selectionEnd, value } = this;
const selection = value.slice(selectionStart, selectionEnd);
- const replacement = /[a-z]/.test(selection)
- ? selection.toUpperCase()
- : selection.toLowerCase();
+ const replacement = /[a-z]/.test(selection) ? selection.toUpperCase() : selection.toLowerCase();
- text = (
- value.slice(0, selectionStart) +
- replacement +
- value.slice(selectionEnd)
- );
+ text = value.slice(0, selectionStart) + replacement + value.slice(selectionEnd);
// this has no effect, because the DOM hasn't updated yet
this.selectionStart = selectionStart;
@@ -25,11 +19,11 @@
}
</script>
+<textarea value={text} on:keydown={handleKeydown} />
+
<style>
textarea {
width: 100%;
height: 200px;
}
</style>
-
-<textarea value={text} on:keydown={handleKeydown}></textarea>
diff --git a/documentation/content/tutorial/07-lifecycle/04-tick/app-b/App.svelte b/documentation/content/tutorial/07-lifecycle/04-tick/app-b/App.svelte
index 477b5ffb79..2f076946b3 100644
--- a/documentation/content/tutorial/07-lifecycle/04-tick/app-b/App.svelte
+++ b/documentation/content/tutorial/07-lifecycle/04-tick/app-b/App.svelte
@@ -11,15 +11,9 @@
const { selectionStart, selectionEnd, value } = this;
const selection = value.slice(selectionStart, selectionEnd);
- const replacement = /[a-z]/.test(selection)
- ? selection.toUpperCase()
- : selection.toLowerCase();
+ const replacement = /[a-z]/.test(selection) ? selection.toUpperCase() : selection.toLowerCase();
- text = (
- value.slice(0, selectionStart) +
- replacement +
- value.slice(selectionEnd)
- );
+ text = value.slice(0, selectionStart) + replacement + value.slice(selectionEnd);
await tick();
this.selectionStart = selectionStart;
@@ -27,11 +21,11 @@
}
</script>
+<textarea value={text} on:keydown={handleKeydown} />
+
<style>
textarea {
width: 100%;
height: 200px;
}
</style>
-
-<textarea value={text} on:keydown={handleKeydown}></textarea>
diff --git a/documentation/content/tutorial/08-stores/01-writable-stores/app-a/App.svelte b/documentation/content/tutorial/08-stores/01-writable-stores/app-a/App.svelte
index 481b3070dc..4838325b67 100644
--- a/documentation/content/tutorial/08-stores/01-writable-stores/app-a/App.svelte
+++ b/documentation/content/tutorial/08-stores/01-writable-stores/app-a/App.svelte
@@ -6,13 +6,13 @@
let countValue;
- count.subscribe(value => {
+ count.subscribe((value) => {
countValue = value;
});
</script>
<h1>The count is {countValue}</h1>
-<Incrementer/>
-<Decrementer/>
-<Resetter/>
+<Incrementer />
+<Decrementer />
+<Resetter />
diff --git a/documentation/content/tutorial/08-stores/01-writable-stores/app-a/Decrementer.svelte b/documentation/content/tutorial/08-stores/01-writable-stores/app-a/Decrementer.svelte
index 9bd4422f49..049f8aeb47 100644
--- a/documentation/content/tutorial/08-stores/01-writable-stores/app-a/Decrementer.svelte
+++ b/documentation/content/tutorial/08-stores/01-writable-stores/app-a/Decrementer.svelte
@@ -6,6 +6,4 @@
}
</script>
-<button on:click={decrement}>
- -
-</button>
\ No newline at end of file
+<button on:click={decrement}> - </button>
diff --git a/documentation/content/tutorial/08-stores/01-writable-stores/app-a/Incrementer.svelte b/documentation/content/tutorial/08-stores/01-writable-stores/app-a/Incrementer.svelte
index 3581f243d8..bfce8f2eac 100644
--- a/documentation/content/tutorial/08-stores/01-writable-stores/app-a/Incrementer.svelte
+++ b/documentation/content/tutorial/08-stores/01-writable-stores/app-a/Incrementer.svelte
@@ -6,6 +6,4 @@
}
</script>
-<button on:click={increment}>
- +
-</button>
\ No newline at end of file
+<button on:click={increment}> + </button>
diff --git a/documentation/content/tutorial/08-stores/01-writable-stores/app-a/Resetter.svelte b/documentation/content/tutorial/08-stores/01-writable-stores/app-a/Resetter.svelte
index b4a6b7559b..88f0b975d6 100644
--- a/documentation/content/tutorial/08-stores/01-writable-stores/app-a/Resetter.svelte
+++ b/documentation/content/tutorial/08-stores/01-writable-stores/app-a/Resetter.svelte
@@ -6,6 +6,4 @@
}
</script>
-<button on:click={reset}>
- reset
-</button>
\ No newline at end of file
+<button on:click={reset}> reset </button>
diff --git a/documentation/content/tutorial/08-stores/01-writable-stores/app-b/App.svelte b/documentation/content/tutorial/08-stores/01-writable-stores/app-b/App.svelte
index 57bbde1c1e..4838325b67 100644
--- a/documentation/content/tutorial/08-stores/01-writable-stores/app-b/App.svelte
+++ b/documentation/content/tutorial/08-stores/01-writable-stores/app-b/App.svelte
@@ -6,13 +6,13 @@
let countValue;
- count.subscribe(value => {
+ count.subscribe((value) => {
countValue = value;
});
</script>
<h1>The count is {countValue}</h1>
-<Incrementer/>
-<Decrementer/>
-<Resetter/>
\ No newline at end of file
+<Incrementer />
+<Decrementer />
+<Resetter />
diff --git a/documentation/content/tutorial/08-stores/01-writable-stores/app-b/Decrementer.svelte b/documentation/content/tutorial/08-stores/01-writable-stores/app-b/Decrementer.svelte
index 043b795047..596ba4bbab 100644
--- a/documentation/content/tutorial/08-stores/01-writable-stores/app-b/Decrementer.svelte
+++ b/documentation/content/tutorial/08-stores/01-writable-stores/app-b/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>
\ No newline at end of file
+<button on:click={decrement}> - </button>
diff --git a/documentation/content/tutorial/08-stores/01-writable-stores/app-b/Incrementer.svelte b/documentation/content/tutorial/08-stores/01-writable-stores/app-b/Incrementer.svelte
index 2b5763012b..1fb7dea3cb 100644
--- a/documentation/content/tutorial/08-stores/01-writable-stores/app-b/Incrementer.svelte
+++ b/documentation/content/tutorial/08-stores/01-writable-stores/app-b/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>
\ No newline at end of file
+<button on:click={increment}> + </button>
diff --git a/documentation/content/tutorial/08-stores/01-writable-stores/app-b/Resetter.svelte b/documentation/content/tutorial/08-stores/01-writable-stores/app-b/Resetter.svelte
index 4183421e51..9c8809961f 100644
--- a/documentation/content/tutorial/08-stores/01-writable-stores/app-b/Resetter.svelte
+++ b/documentation/content/tutorial/08-stores/01-writable-stores/app-b/Resetter.svelte
@@ -6,6 +6,4 @@
}
</script>
-<button on:click={reset}>
- reset
-</button>
\ No newline at end of file
+<button on:click={reset}> reset </button>
diff --git a/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte b/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte
index 481b3070dc..4838325b67 100644
--- a/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte
+++ b/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte
@@ -6,13 +6,13 @@
let countValue;
- count.subscribe(value => {
+ count.subscribe((value) => {
countValue = value;
});
</script>
<h1>The count is {countValue}</h1>
-<Incrementer/>
-<Decrementer/>
-<Resetter/>
+<Incrementer />
+<Decrementer />
+<Resetter />
diff --git a/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-a/Decrementer.svelte b/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-a/Decrementer.svelte
index 043b795047..596ba4bbab 100644
--- a/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-a/Decrementer.svelte
+++ b/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-a/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>
\ No newline at end of file
+<button on:click={decrement}> - </button>
diff --git a/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-a/Incrementer.svelte b/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-a/Incrementer.svelte
index 2b5763012b..1fb7dea3cb 100644
--- a/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-a/Incrementer.svelte
+++ b/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-a/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>
\ No newline at end of file
+<button on:click={increment}> + </button>
diff --git a/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-a/Resetter.svelte b/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-a/Resetter.svelte
index 4183421e51..9c8809961f 100644
--- a/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-a/Resetter.svelte
+++ b/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-a/Resetter.svelte
@@ -6,6 +6,4 @@
}
</script>
-<button on:click={reset}>
- reset
-</button>
\ No newline at end of file
+<button on:click={reset}> reset </button>
diff --git a/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-b/App.svelte b/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-b/App.svelte
index 10ebfb65bb..9923689329 100644
--- a/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-b/App.svelte
+++ b/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-b/App.svelte
@@ -7,6 +7,6 @@
<h1>The count is {$count}</h1>
-<Incrementer/>
-<Decrementer/>
-<Resetter/>
\ No newline at end of file
+<Incrementer />
+<Decrementer />
+<Resetter />
diff --git a/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-b/Decrementer.svelte b/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-b/Decrementer.svelte
index 043b795047..596ba4bbab 100644
--- a/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-b/Decrementer.svelte
+++ b/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-b/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>
\ No newline at end of file
+<button on:click={decrement}> - </button>
diff --git a/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-b/Incrementer.svelte b/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-b/Incrementer.svelte
index 2b5763012b..1fb7dea3cb 100644
--- a/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-b/Incrementer.svelte
+++ b/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-b/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>
\ No newline at end of file
+<button on:click={increment}> + </button>
diff --git a/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-b/Resetter.svelte b/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-b/Resetter.svelte
index 4183421e51..9c8809961f 100644
--- a/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-b/Resetter.svelte
+++ b/documentation/content/tutorial/08-stores/02-auto-subscriptions/app-b/Resetter.svelte
@@ -6,6 +6,4 @@
}
</script>
-<button on:click={reset}>
- reset
-</button>
\ No newline at end of file
+<button on:click={reset}> reset </button>
diff --git a/documentation/content/tutorial/08-stores/03-readable-stores/app-a/App.svelte b/documentation/content/tutorial/08-stores/03-readable-stores/app-a/App.svelte
index 3ff0b0362f..6d1d80b455 100644
--- a/documentation/content/tutorial/08-stores/03-readable-stores/app-a/App.svelte
+++ b/documentation/content/tutorial/08-stores/03-readable-stores/app-a/App.svelte
@@ -9,4 +9,4 @@
});
</script>
-<h1>The time is {formatter.format($time)}</h1>
\ No newline at end of file
+<h1>The time is {formatter.format($time)}</h1>
diff --git a/documentation/content/tutorial/08-stores/03-readable-stores/app-b/App.svelte b/documentation/content/tutorial/08-stores/03-readable-stores/app-b/App.svelte
index 3ff0b0362f..6d1d80b455 100644
--- a/documentation/content/tutorial/08-stores/03-readable-stores/app-b/App.svelte
+++ b/documentation/content/tutorial/08-stores/03-readable-stores/app-b/App.svelte
@@ -9,4 +9,4 @@
});
</script>
-<h1>The time is {formatter.format($time)}</h1>
\ No newline at end of file
+<h1>The time is {formatter.format($time)}</h1>
diff --git a/documentation/content/tutorial/08-stores/04-derived-stores/app-a/App.svelte b/documentation/content/tutorial/08-stores/04-derived-stores/app-a/App.svelte
index 8182ecd671..d1013c1a26 100644
--- a/documentation/content/tutorial/08-stores/04-derived-stores/app-a/App.svelte
+++ b/documentation/content/tutorial/08-stores/04-derived-stores/app-a/App.svelte
@@ -13,5 +13,6 @@
<p>
This page has been open for
- {$elapsed} {$elapsed === 1 ? 'second' : 'seconds'}
-</p>
\ No newline at end of file
+ {$elapsed}
+ {$elapsed === 1 ? 'second' : 'seconds'}
+</p>
diff --git a/documentation/content/tutorial/08-stores/04-derived-stores/app-b/App.svelte b/documentation/content/tutorial/08-stores/04-derived-stores/app-b/App.svelte
index 8182ecd671..d1013c1a26 100644
--- a/documentation/content/tutorial/08-stores/04-derived-stores/app-b/App.svelte
+++ b/documentation/content/tutorial/08-stores/04-derived-stores/app-b/App.svelte
@@ -13,5 +13,6 @@
<p>
This page has been open for
- {$elapsed} {$elapsed === 1 ? 'second' : 'seconds'}
-</p>
\ No newline at end of file
+ {$elapsed}
+ {$elapsed === 1 ? 'second' : 'seconds'}
+</p>
diff --git a/documentation/content/tutorial/08-stores/05-custom-stores/app-a/App.svelte b/documentation/content/tutorial/08-stores/05-custom-stores/app-a/App.svelte
index a320cc052f..dbdd299d69 100644
--- a/documentation/content/tutorial/08-stores/05-custom-stores/app-a/App.svelte
+++ b/documentation/content/tutorial/08-stores/05-custom-stores/app-a/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>
\ No newline at end of file
+<button on:click={count.reset}>reset</button>
diff --git a/documentation/content/tutorial/08-stores/05-custom-stores/app-b/App.svelte b/documentation/content/tutorial/08-stores/05-custom-stores/app-b/App.svelte
index a320cc052f..dbdd299d69 100644
--- a/documentation/content/tutorial/08-stores/05-custom-stores/app-b/App.svelte
+++ b/documentation/content/tutorial/08-stores/05-custom-stores/app-b/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>
\ No newline at end of file
+<button on:click={count.reset}>reset</button>
diff --git a/documentation/content/tutorial/08-stores/06-store-bindings/app-a/App.svelte b/documentation/content/tutorial/08-stores/06-store-bindings/app-a/App.svelte
index 3839224826..ede9beab31 100644
--- a/documentation/content/tutorial/08-stores/06-store-bindings/app-a/App.svelte
+++ b/documentation/content/tutorial/08-stores/06-store-bindings/app-a/App.svelte
@@ -3,4 +3,4 @@
</script>
<h1>{$greeting}</h1>
-<input value={$name}>
\ No newline at end of file
+<input value={$name} />
diff --git a/documentation/content/tutorial/08-stores/06-store-bindings/app-b/App.svelte b/documentation/content/tutorial/08-stores/06-store-bindings/app-b/App.svelte
index 52f04be957..84331e1e7b 100644
--- a/documentation/content/tutorial/08-stores/06-store-bindings/app-b/App.svelte
+++ b/documentation/content/tutorial/08-stores/06-store-bindings/app-b/App.svelte
@@ -3,8 +3,6 @@
</script>
<h1>{$greeting}</h1>
-<input bind:value={$name}>
+<input bind:value={$name} />
-<button on:click="{() => $name += '!'}">
- Add exclamation mark!
-</button>
\ No newline at end of file
+<button on:click={() => ($name += '!')}> Add exclamation mark! </button>
diff --git a/documentation/content/tutorial/09-motion/01-tweened/app-a/App.svelte b/documentation/content/tutorial/09-motion/01-tweened/app-a/App.svelte
index a4f828264c..c209dcf36d 100644
--- a/documentation/content/tutorial/09-motion/01-tweened/app-a/App.svelte
+++ b/documentation/content/tutorial/09-motion/01-tweened/app-a/App.svelte
@@ -4,31 +4,21 @@
const progress = writable(0);
</script>
-<progress value={$progress}></progress>
+<progress value={$progress} />
-<button on:click="{() => progress.set(0)}">
- 0%
-</button>
+<button on:click={() => progress.set(0)}> 0% </button>
-<button on:click="{() => progress.set(0.25)}">
- 25%
-</button>
+<button on:click={() => progress.set(0.25)}> 25% </button>
-<button on:click="{() => progress.set(0.5)}">
- 50%
-</button>
+<button on:click={() => progress.set(0.5)}> 50% </button>
-<button on:click="{() => progress.set(0.75)}">
- 75%
-</button>
+<button on:click={() => progress.set(0.75)}> 75% </button>
-<button on:click="{() => progress.set(1)}">
- 100%
-</button>
+<button on:click={() => progress.set(1)}> 100% </button>
<style>
progress {
display: block;
width: 100%;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/09-motion/01-tweened/app-b/App.svelte b/documentation/content/tutorial/09-motion/01-tweened/app-b/App.svelte
index ee3c7a1b5d..f4fb499f0f 100644
--- a/documentation/content/tutorial/09-motion/01-tweened/app-b/App.svelte
+++ b/documentation/content/tutorial/09-motion/01-tweened/app-b/App.svelte
@@ -8,31 +8,21 @@
});
</script>
-<progress value={$progress}></progress>
+<progress value={$progress} />
-<button on:click="{() => progress.set(0)}">
- 0%
-</button>
+<button on:click={() => progress.set(0)}> 0% </button>
-<button on:click="{() => progress.set(0.25)}">
- 25%
-</button>
+<button on:click={() => progress.set(0.25)}> 25% </button>
-<button on:click="{() => progress.set(0.5)}">
- 50%
-</button>
+<button on:click={() => progress.set(0.5)}> 50% </button>
-<button on:click="{() => progress.set(0.75)}">
- 75%
-</button>
+<button on:click={() => progress.set(0.75)}> 75% </button>
-<button on:click="{() => progress.set(1)}">
- 100%
-</button>
+<button on:click={() => progress.set(1)}> 100% </button>
<style>
progress {
display: block;
width: 100%;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/09-motion/02-spring/app-a/App.svelte b/documentation/content/tutorial/09-motion/02-spring/app-a/App.svelte
index aa8a406c2b..39afc6c1a7 100644
--- a/documentation/content/tutorial/09-motion/02-spring/app-a/App.svelte
+++ b/documentation/content/tutorial/09-motion/02-spring/app-a/App.svelte
@@ -8,21 +8,21 @@
<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:mousedown="{() => size.set(30)}"
- on:mouseup="{() => size.set(10)}"
+ on:mousemove={(e) => coords.set({ x: e.clientX, y: e.clientY })}
+ on:mousedown={() => size.set(30)}
+ 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>
@@ -34,4 +34,4 @@
circle {
fill: #ff3e00;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/09-motion/02-spring/app-b/App.svelte b/documentation/content/tutorial/09-motion/02-spring/app-b/App.svelte
index 3ded9350a9..59346dcb3b 100644
--- a/documentation/content/tutorial/09-motion/02-spring/app-b/App.svelte
+++ b/documentation/content/tutorial/09-motion/02-spring/app-b/App.svelte
@@ -1,10 +1,13 @@
<script>
import { spring } from 'svelte/motion';
- let coords = spring({ x: 50, y: 50 }, {
- stiffness: 0.1,
- damping: 0.25
- });
+ let coords = spring(
+ { x: 50, y: 50 },
+ {
+ stiffness: 0.1,
+ damping: 0.25
+ }
+ );
let size = spring(10);
</script>
@@ -12,21 +15,21 @@
<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:mousedown="{() => size.set(30)}"
- on:mouseup="{() => size.set(10)}"
+ on:mousemove={(e) => coords.set({ x: e.clientX, y: e.clientY })}
+ on:mousedown={() => size.set(30)}
+ 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>
@@ -38,4 +41,4 @@
circle {
fill: #ff3e00;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/10-transitions/01-transition/app-a/App.svelte b/documentation/content/tutorial/10-transitions/01-transition/app-a/App.svelte
index fdb1d21540..5ba3e7fb7b 100644
--- a/documentation/content/tutorial/10-transitions/01-transition/app-a/App.svelte
+++ b/documentation/content/tutorial/10-transitions/01-transition/app-a/App.svelte
@@ -3,12 +3,10 @@
</script>
<label>
- <input type="checkbox" bind:checked={visible}>
+ <input type="checkbox" bind:checked={visible} />
visible
</label>
{#if visible}
- <p>
- Fades in and out
- </p>
-{/if}
\ No newline at end of file
+ <p>Fades in and out</p>
+{/if}
diff --git a/documentation/content/tutorial/10-transitions/01-transition/app-b/App.svelte b/documentation/content/tutorial/10-transitions/01-transition/app-b/App.svelte
index b7909fb86e..29e9254d14 100644
--- a/documentation/content/tutorial/10-transitions/01-transition/app-b/App.svelte
+++ b/documentation/content/tutorial/10-transitions/01-transition/app-b/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>
- Fades in and out
- </p>
-{/if}
\ No newline at end of file
+ <p transition:fade>Fades in and out</p>
+{/if}
diff --git a/documentation/content/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte b/documentation/content/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte
index b7909fb86e..29e9254d14 100644
--- a/documentation/content/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte
+++ b/documentation/content/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/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>
- Fades in and out
- </p>
-{/if}
\ No newline at end of file
+ <p transition:fade>Fades in and out</p>
+{/if}
diff --git a/documentation/content/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte b/documentation/content/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte
index 01047f5e37..318739f1d0 100644
--- a/documentation/content/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte
+++ b/documentation/content/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/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 }}">
- Flies in and out
- </p>
-{/if}
\ No newline at end of file
+ <p transition:fly={{ y: 200, duration: 2000 }}>Flies in and out</p>
+{/if}
diff --git a/documentation/content/tutorial/10-transitions/03-in-and-out/app-a/App.svelte b/documentation/content/tutorial/10-transitions/03-in-and-out/app-a/App.svelte
index 01047f5e37..318739f1d0 100644
--- a/documentation/content/tutorial/10-transitions/03-in-and-out/app-a/App.svelte
+++ b/documentation/content/tutorial/10-transitions/03-in-and-out/app-a/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 }}">
- Flies in and out
- </p>
-{/if}
\ No newline at end of file
+ <p transition:fly={{ y: 200, duration: 2000 }}>Flies in and out</p>
+{/if}
diff --git a/documentation/content/tutorial/10-transitions/03-in-and-out/app-b/App.svelte b/documentation/content/tutorial/10-transitions/03-in-and-out/app-b/App.svelte
index 36d36664e6..bb44e5ca9f 100644
--- a/documentation/content/tutorial/10-transitions/03-in-and-out/app-b/App.svelte
+++ b/documentation/content/tutorial/10-transitions/03-in-and-out/app-b/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>
- Flies in, fades out
- </p>
-{/if}
\ No newline at end of file
+ <p in:fly={{ y: 200, duration: 2000 }} out:fade>Flies in, fades out</p>
+{/if}
diff --git a/documentation/content/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte b/documentation/content/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
index 872c2e4aa3..621a581342 100644
--- a/documentation/content/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
+++ b/documentation/content/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
@@ -6,18 +6,18 @@
function spin(node, { duration }) {
return {
duration,
- css: t => ``
+ css: (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}
@@ -27,12 +27,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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte b/documentation/content/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
index 4bb475157c..df055bd8f9 100644
--- a/documentation/content/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
+++ b/documentation/content/tutorial/10-transitions/04-custom-css-transitions/app-b/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 @@
${Math.trunc(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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte b/documentation/content/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
index 7ce4a86e92..d5d029f223 100644
--- a/documentation/content/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
+++ b/documentation/content/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
@@ -4,19 +4,15 @@
function typewriter(node, { speed = 50 }) {
// implementation goes here
- return {
-
- };
+ return {};
}
</script>
<label>
- <input type="checkbox" bind:checked={visible}>
+ <input type="checkbox" bind:checked={visible} />
visible
</label>
{#if visible}
- <p transition:typewriter>
- The quick brown fox jumps over the lazy dog
- </p>
+ <p transition:typewriter>The quick brown fox jumps over the lazy dog</p>
{/if}
diff --git a/documentation/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte b/documentation/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
index 563803387b..21536e8683 100644
--- a/documentation/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
+++ b/documentation/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
@@ -2,10 +2,7 @@
let visible = false;
function typewriter(node, { speed = 1 }) {
- const valid = (
- node.childNodes.length === 1 &&
- node.childNodes[0].nodeType === Node.TEXT_NODE
- );
+ const valid = 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 = Math.trunc(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>
- The quick brown fox jumps over the lazy dog
- </p>
+ <p transition:typewriter>The quick brown fox jumps over the lazy dog</p>
{/if}
diff --git a/documentation/content/tutorial/10-transitions/06-transition-events/app-a/App.svelte b/documentation/content/tutorial/10-transitions/06-transition-events/app-a/App.svelte
index 3369af077f..59458e9c2f 100644
--- a/documentation/content/tutorial/10-transitions/06-transition-events/app-a/App.svelte
+++ b/documentation/content/tutorial/10-transitions/06-transition-events/app-a/App.svelte
@@ -8,12 +8,10 @@
<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 }}">
- Flies in and out
- </p>
-{/if}
\ No newline at end of file
+ <p transition:fly={{ y: 200, duration: 2000 }}>Flies in and out</p>
+{/if}
diff --git a/documentation/content/tutorial/10-transitions/06-transition-events/app-b/App.svelte b/documentation/content/tutorial/10-transitions/06-transition-events/app-b/App.svelte
index da79897365..31ef18c930 100644
--- a/documentation/content/tutorial/10-transitions/06-transition-events/app-b/App.svelte
+++ b/documentation/content/tutorial/10-transitions/06-transition-events/app-b/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 }}"
- on:introstart="{() => status = 'intro started'}"
- on:outrostart="{() => status = 'outro started'}"
- on:introend="{() => status = 'intro ended'}"
- on:outroend="{() => status = 'outro ended'}"
+ transition:fly={{ y: 200, duration: 2000 }}
+ on:introstart={() => (status = 'intro started')}
+ on:outrostart={() => (status = 'outro started')}
+ on:introend={() => (status = 'intro ended')}
+ on:outroend={() => (status = 'outro ended')}
>
Flies in and out
</p>
-{/if}
\ No newline at end of file
+{/if}
diff --git a/documentation/content/tutorial/10-transitions/07-local-transitions/app-a/App.svelte b/documentation/content/tutorial/10-transitions/07-local-transitions/app-a/App.svelte
index 2e01048cc0..9700f945b4 100644
--- a/documentation/content/tutorial/10-transitions/07-local-transitions/app-a/App.svelte
+++ b/documentation/content/tutorial/10-transitions/07-local-transitions/app-a/App.svelte
@@ -7,13 +7,12 @@
</script>
<label>
- <input type="checkbox" bind:checked={showItems}>
+ <input type="checkbox" bind:checked={showItems} />
show list
</label>
<label>
- <input type="range" bind:value={i} max=10>
-
+ <input type="range" bind:value={i} max="10" />
</label>
{#if showItems}
@@ -29,4 +28,4 @@
padding: 0.5em 0;
border-top: 1px solid #eee;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/10-transitions/07-local-transitions/app-b/App.svelte b/documentation/content/tutorial/10-transitions/07-local-transitions/app-b/App.svelte
index 46603a8b53..57f24e93b6 100644
--- a/documentation/content/tutorial/10-transitions/07-local-transitions/app-b/App.svelte
+++ b/documentation/content/tutorial/10-transitions/07-local-transitions/app-b/App.svelte
@@ -7,13 +7,12 @@
</script>
<label>
- <input type="checkbox" bind:checked={showItems}>
+ <input type="checkbox" bind:checked={showItems} />
show list
</label>
<label>
- <input type="range" bind:value={i} max=10>
-
+ <input type="range" bind:value={i} max="10" />
</label>
{#if showItems}
@@ -29,4 +28,4 @@
padding: 0.5em 0;
border-top: 1px solid #eee;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte b/documentation/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
index 3b6c6776a6..d18cb77192 100644
--- a/documentation/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
+++ b/documentation/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
@@ -3,7 +3,7 @@
import { crossfade } from 'svelte/transition';
const [send, receive] = crossfade({
- duration: d => Math.sqrt(d * 200),
+ duration: (d) => Math.sqrt(d * 200),
fallback(node, params) {
const style = getComputedStyle(node);
@@ -12,7 +12,7 @@
return {
duration: 600,
easing: quintOut,
- css: t => `
+ css: (t) => `
transform: ${transform} scale(${t});
opacity: ${t}
`
@@ -25,10 +25,10 @@
let todos = [
{ id: uid++, done: false, description: 'write some docs' },
{ id: uid++, done: false, description: 'start writing blog post' },
- { id: uid++, done: true, description: 'buy some milk' },
+ { id: uid++, done: true, description: 'buy some milk' },
{ id: uid++, done: false, description: 'mow the lawn' },
{ id: uid++, done: false, description: 'feed the turtle' },
- { id: uid++, done: false, description: 'fix some bugs' },
+ { id: uid++, done: false, description: 'fix some bugs' }
];
function add(input) {
@@ -43,7 +43,7 @@
}
function remove(todo) {
- todos = todos.filter(t => t !== todo);
+ todos = todos.filter((t) => t !== todo);
}
function mark(todo, done) {
@@ -53,30 +53,30 @@
}
</script>
-<div class='board'>
+<div class="board">
<input
placeholder="what needs to be done?"
- on:keydown={e => e.key === 'Enter' && add(e.target)}
- >
+ on:keydown={(e) => e.key === 'Enter' && add(e.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>
- <input type=checkbox on:change={() => mark(todo, true)}>
+ <input type="checkbox" on:change={() => mark(todo, true)} />
{todo.description}
- <button on:click="{() => remove(todo)}">remove</button>
+ <button on:click={() => remove(todo)}>remove</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 class="done">
- <input type=checkbox checked on:change={() => mark(todo, false)}>
+ <input type="checkbox" checked on:change={() => mark(todo, false)} />
{todo.description}
- <button on:click="{() => remove(todo)}">remove</button>
+ <button on:click={() => remove(todo)}>remove</button>
</label>
{/each}
</div>
@@ -111,11 +111,11 @@
border-radius: 2px;
user-select: none;
border: 1px solid hsl(240, 8%, 70%);
- background-color:hsl(240, 8%, 93%);
+ background-color: hsl(240, 8%, 93%);
color: #333;
}
- input[type="checkbox"] {
+ input[type='checkbox'] {
position: absolute;
left: 0.5em;
top: 0.6em;
@@ -124,7 +124,7 @@
.done {
border: 1px solid hsl(240, 8%, 90%);
- background-color:hsl(240, 8%, 98%);
+ background-color: hsl(240, 8%, 98%);
}
button {
@@ -133,7 +133,8 @@
right: 0.2em;
width: 2em;
height: 100%;
- background: no-repeat 50% 50% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
+ background: no-repeat 50% 50%
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
background-size: 1.4em 1.4em;
border: none;
opacity: 0;
@@ -145,4 +146,4 @@
label:hover button {
opacity: 1;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte b/documentation/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte
index f3a26915a3..2d832689d9 100644
--- a/documentation/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte
+++ b/documentation/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte
@@ -3,7 +3,7 @@
import { crossfade } from 'svelte/transition';
const [send, receive] = crossfade({
- duration: d => Math.sqrt(d * 200),
+ duration: (d) => Math.sqrt(d * 200),
fallback(node, params) {
const style = getComputedStyle(node);
@@ -12,7 +12,7 @@
return {
duration: 600,
easing: quintOut,
- css: t => `
+ css: (t) => `
transform: ${transform} scale(${t});
opacity: ${t}
`
@@ -25,10 +25,10 @@
let todos = [
{ id: uid++, done: false, description: 'write some docs' },
{ id: uid++, done: false, description: 'start writing blog post' },
- { id: uid++, done: true, description: 'buy some milk' },
+ { id: uid++, done: true, description: 'buy some milk' },
{ id: uid++, done: false, description: 'mow the lawn' },
{ id: uid++, done: false, description: 'feed the turtle' },
- { id: uid++, done: false, description: 'fix some bugs' },
+ { id: uid++, done: false, description: 'fix some bugs' }
];
function add(input) {
@@ -43,7 +43,7 @@
}
function remove(todo) {
- todos = todos.filter(t => t !== todo);
+ todos = todos.filter((t) => t !== todo);
}
function mark(todo, done) {
@@ -53,37 +53,30 @@
}
</script>
-<div class='board'>
+<div class="board">
<input
placeholder="what needs to be done?"
- on:keydown={e => e.key === 'Enter' && add(e.target)}
- >
+ on:keydown={(e) => e.key === 'Enter' && add(e.target)}
+ />
- <div class='left'>
+ <div class="left">
<h2>todo</h2>
- {#each todos.filter(t => !t.done) as todo (todo.id)}
- <label
- in:receive="{{key: todo.id}}"
- out:send="{{key: todo.id}}"
- >
- <input type=checkbox on:change={() => mark(todo, true)}>
+ {#each todos.filter((t) => !t.done) as todo (todo.id)}
+ <label in:receive={{ key: todo.id }} out:send={{ key: todo.id }}>
+ <input type="checkbox" on:change={() => mark(todo, true)} />
{todo.description}
- <button on:click="{() => remove(todo)}">remove</button>
+ <button on:click={() => remove(todo)}>remove</button>
</label>
{/each}
</div>
- <div class='right'>
+ <div class="right">
<h2>done</h2>
- {#each todos.filter(t => t.done) as todo (todo.id)}
- <label
- class="done"
- in:receive="{{key: todo.id}}"
- out:send="{{key: todo.id}}"
- >
- <input type=checkbox checked on:change={() => mark(todo, false)}>
+ {#each todos.filter((t) => t.done) as todo (todo.id)}
+ <label class="done" in:receive={{ key: todo.id }} out:send={{ key: todo.id }}>
+ <input type="checkbox" checked on:change={() => mark(todo, false)} />
{todo.description}
- <button on:click="{() => remove(todo)}">remove</button>
+ <button on:click={() => remove(todo)}>remove</button>
</label>
{/each}
</div>
@@ -118,11 +111,11 @@
border-radius: 2px;
user-select: none;
border: 1px solid hsl(240, 8%, 70%);
- background-color:hsl(240, 8%, 93%);
+ background-color: hsl(240, 8%, 93%);
color: #333;
}
- input[type="checkbox"] {
+ input[type='checkbox'] {
position: absolute;
left: 0.5em;
top: 0.6em;
@@ -131,7 +124,7 @@
.done {
border: 1px solid hsl(240, 8%, 90%);
- background-color:hsl(240, 8%, 98%);
+ background-color: hsl(240, 8%, 98%);
}
button {
@@ -140,7 +133,8 @@
right: 0.2em;
width: 2em;
height: 100%;
- background: no-repeat 50% 50% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
+ background: no-repeat 50% 50%
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
background-size: 1.4em 1.4em;
border: none;
opacity: 0;
@@ -152,4 +146,4 @@
label:hover button {
opacity: 1;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/10-transitions/09-key-blocks/app-a/App.svelte b/documentation/content/tutorial/10-transitions/09-key-blocks/app-a/App.svelte
index 3385a02339..2a318c510a 100644
--- a/documentation/content/tutorial/10-transitions/09-key-blocks/app-a/App.svelte
+++ b/documentation/content/tutorial/10-transitions/09-key-blocks/app-a/App.svelte
@@ -14,6 +14,7 @@
<button
on:click={() => {
number += 1;
- }}>
+ }}
+>
Increment
</button>
diff --git a/documentation/content/tutorial/10-transitions/09-key-blocks/app-b/App.svelte b/documentation/content/tutorial/10-transitions/09-key-blocks/app-b/App.svelte
index 0e40dc57d1..04b06b2169 100644
--- a/documentation/content/tutorial/10-transitions/09-key-blocks/app-b/App.svelte
+++ b/documentation/content/tutorial/10-transitions/09-key-blocks/app-b/App.svelte
@@ -16,6 +16,7 @@
<button
on:click={() => {
number += 1;
- }}>
+ }}
+>
Increment
</button>
diff --git a/documentation/content/tutorial/11-animations/01-animate/app-a/App.svelte b/documentation/content/tutorial/11-animations/01-animate/app-a/App.svelte
index f3a26915a3..2d832689d9 100644
--- a/documentation/content/tutorial/11-animations/01-animate/app-a/App.svelte
+++ b/documentation/content/tutorial/11-animations/01-animate/app-a/App.svelte
@@ -3,7 +3,7 @@
import { crossfade } from 'svelte/transition';
const [send, receive] = crossfade({
- duration: d => Math.sqrt(d * 200),
+ duration: (d) => Math.sqrt(d * 200),
fallback(node, params) {
const style = getComputedStyle(node);
@@ -12,7 +12,7 @@
return {
duration: 600,
easing: quintOut,
- css: t => `
+ css: (t) => `
transform: ${transform} scale(${t});
opacity: ${t}
`
@@ -25,10 +25,10 @@
let todos = [
{ id: uid++, done: false, description: 'write some docs' },
{ id: uid++, done: false, description: 'start writing blog post' },
- { id: uid++, done: true, description: 'buy some milk' },
+ { id: uid++, done: true, description: 'buy some milk' },
{ id: uid++, done: false, description: 'mow the lawn' },
{ id: uid++, done: false, description: 'feed the turtle' },
- { id: uid++, done: false, description: 'fix some bugs' },
+ { id: uid++, done: false, description: 'fix some bugs' }
];
function add(input) {
@@ -43,7 +43,7 @@
}
function remove(todo) {
- todos = todos.filter(t => t !== todo);
+ todos = todos.filter((t) => t !== todo);
}
function mark(todo, done) {
@@ -53,37 +53,30 @@
}
</script>
-<div class='board'>
+<div class="board">
<input
placeholder="what needs to be done?"
- on:keydown={e => e.key === 'Enter' && add(e.target)}
- >
+ on:keydown={(e) => e.key === 'Enter' && add(e.target)}
+ />
- <div class='left'>
+ <div class="left">
<h2>todo</h2>
- {#each todos.filter(t => !t.done) as todo (todo.id)}
- <label
- in:receive="{{key: todo.id}}"
- out:send="{{key: todo.id}}"
- >
- <input type=checkbox on:change={() => mark(todo, true)}>
+ {#each todos.filter((t) => !t.done) as todo (todo.id)}
+ <label in:receive={{ key: todo.id }} out:send={{ key: todo.id }}>
+ <input type="checkbox" on:change={() => mark(todo, true)} />
{todo.description}
- <button on:click="{() => remove(todo)}">remove</button>
+ <button on:click={() => remove(todo)}>remove</button>
</label>
{/each}
</div>
- <div class='right'>
+ <div class="right">
<h2>done</h2>
- {#each todos.filter(t => t.done) as todo (todo.id)}
- <label
- class="done"
- in:receive="{{key: todo.id}}"
- out:send="{{key: todo.id}}"
- >
- <input type=checkbox checked on:change={() => mark(todo, false)}>
+ {#each todos.filter((t) => t.done) as todo (todo.id)}
+ <label class="done" in:receive={{ key: todo.id }} out:send={{ key: todo.id }}>
+ <input type="checkbox" checked on:change={() => mark(todo, false)} />
{todo.description}
- <button on:click="{() => remove(todo)}">remove</button>
+ <button on:click={() => remove(todo)}>remove</button>
</label>
{/each}
</div>
@@ -118,11 +111,11 @@
border-radius: 2px;
user-select: none;
border: 1px solid hsl(240, 8%, 70%);
- background-color:hsl(240, 8%, 93%);
+ background-color: hsl(240, 8%, 93%);
color: #333;
}
- input[type="checkbox"] {
+ input[type='checkbox'] {
position: absolute;
left: 0.5em;
top: 0.6em;
@@ -131,7 +124,7 @@
.done {
border: 1px solid hsl(240, 8%, 90%);
- background-color:hsl(240, 8%, 98%);
+ background-color: hsl(240, 8%, 98%);
}
button {
@@ -140,7 +133,8 @@
right: 0.2em;
width: 2em;
height: 100%;
- background: no-repeat 50% 50% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
+ background: no-repeat 50% 50%
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
background-size: 1.4em 1.4em;
border: none;
opacity: 0;
@@ -152,4 +146,4 @@
label:hover button {
opacity: 1;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/11-animations/01-animate/app-b/App.svelte b/documentation/content/tutorial/11-animations/01-animate/app-b/App.svelte
index 5c5e76331d..c9866a126d 100644
--- a/documentation/content/tutorial/11-animations/01-animate/app-b/App.svelte
+++ b/documentation/content/tutorial/11-animations/01-animate/app-b/App.svelte
@@ -4,7 +4,7 @@
import { flip } from 'svelte/animate';
const [send, receive] = crossfade({
- duration: d => Math.sqrt(d * 200),
+ duration: (d) => Math.sqrt(d * 200),
fallback(node, params) {
const style = getComputedStyle(node);
@@ -13,7 +13,7 @@
return {
duration: 600,
easing: quintOut,
- css: t => `
+ css: (t) => `
transform: ${transform} scale(${t});
opacity: ${t}
`
@@ -26,10 +26,10 @@
let todos = [
{ id: uid++, done: false, description: 'write some docs' },
{ id: uid++, done: false, description: 'start writing blog post' },
- { id: uid++, done: true, description: 'buy some milk' },
+ { id: uid++, done: true, description: 'buy some milk' },
{ id: uid++, done: false, description: 'mow the lawn' },
{ id: uid++, done: false, description: 'feed the turtle' },
- { id: uid++, done: false, description: 'fix some bugs' },
+ { id: uid++, done: false, description: 'fix some bugs' }
];
function add(input) {
@@ -44,7 +44,7 @@
}
function remove(todo) {
- todos = todos.filter(t => t !== todo);
+ todos = todos.filter((t) => t !== todo);
}
function mark(todo, done) {
@@ -54,39 +54,30 @@
}
</script>
-<div class='board'>
+<div class="board">
<input
placeholder="what needs to be done?"
- on:keydown={e => e.key === 'Enter' && add(e.target)}
- >
+ on:keydown={(e) => e.key === 'Enter' && add(e.target)}
+ />
- <div class='left'>
+ <div class="left">
<h2>todo</h2>
- {#each todos.filter(t => !t.done) as todo (todo.id)}
- <label
- in:receive="{{key: todo.id}}"
- out:send="{{key: todo.id}}"
- animate:flip
- >
- <input type=checkbox on:change={() => mark(todo, true)}>
+ {#each todos.filter((t) => !t.done) as todo (todo.id)}
+ <label in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
+ <input type="checkbox" on:change={() => mark(todo, true)} />
{todo.description}
- <button on:click="{() => remove(todo)}">remove</button>
+ <button on:click={() => remove(todo)}>remove</button>
</label>
{/each}
</div>
- <div class='right'>
+ <div class="right">
<h2>done</h2>
- {#each todos.filter(t => t.done) as todo (todo.id)}
- <label
- class="done"
- in:receive="{{key: todo.id}}"
- out:send="{{key: todo.id}}"
- animate:flip
- >
- <input type=checkbox checked on:change={() => mark(todo, false)}>
+ {#each todos.filter((t) => t.done) as todo (todo.id)}
+ <label class="done" in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
+ <input type="checkbox" checked on:change={() => mark(todo, false)} />
{todo.description}
- <button on:click="{() => remove(todo)}">remove</button>
+ <button on:click={() => remove(todo)}>remove</button>
</label>
{/each}
</div>
@@ -121,11 +112,11 @@
border-radius: 2px;
user-select: none;
border: 1px solid hsl(240, 8%, 70%);
- background-color:hsl(240, 8%, 93%);
+ background-color: hsl(240, 8%, 93%);
color: #333;
}
- input[type="checkbox"] {
+ input[type='checkbox'] {
position: absolute;
left: 0.5em;
top: 0.6em;
@@ -134,7 +125,7 @@
.done {
border: 1px solid hsl(240, 8%, 90%);
- background-color:hsl(240, 8%, 98%);
+ background-color: hsl(240, 8%, 98%);
}
button {
@@ -143,7 +134,8 @@
right: 0.2em;
width: 2em;
height: 100%;
- background: no-repeat 50% 50% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
+ background: no-repeat 50% 50%
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
background-size: 1.4em 1.4em;
border: none;
opacity: 0;
@@ -155,4 +147,4 @@
label:hover button {
opacity: 1;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/12-actions/01-actions/app-a/App.svelte b/documentation/content/tutorial/12-actions/01-actions/app-a/App.svelte
index 0e78f482c5..cc2ebf66b3 100644
--- a/documentation/content/tutorial/12-actions/01-actions/app-a/App.svelte
+++ b/documentation/content/tutorial/12-actions/01-actions/app-a/App.svelte
@@ -1,14 +1,10 @@
<script>
-
-
let showModal = true;
</script>
<button on:click={() => (showModal = true)}>Show Modal</button>
{#if showModal}
- <div class="box" on:outclick={() => (showModal = false)}>
- Click outside me!
- </div>
+ <div class="box" on:outclick={() => (showModal = false)}>Click outside me!</div>
{/if}
<style>
diff --git a/documentation/content/tutorial/12-actions/01-actions/app-b/App.svelte b/documentation/content/tutorial/12-actions/01-actions/app-b/App.svelte
index 79214ec81f..fcd0ca6ae3 100644
--- a/documentation/content/tutorial/12-actions/01-actions/app-b/App.svelte
+++ b/documentation/content/tutorial/12-actions/01-actions/app-b/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)}>
- Click outside me!
- </div>
+ <div class="box" use:clickOutside on:outclick={() => (showModal = false)}>Click outside me!</div>
{/if}
<style>
diff --git a/documentation/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte b/documentation/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
index 8ed286b574..4428fa1f4f 100644
--- a/documentation/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
+++ b/documentation/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
@@ -6,15 +6,14 @@
</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
- on:longpress="{() => pressed = true}"
- on:mouseenter="{() => pressed = false}"
->press and hold</button>
+<button use:longpress on:longpress={() => (pressed = true)} on:mouseenter={() => (pressed = false)}
+ >press and hold</button
+>
{#if pressed}
<p>congratulations, you pressed and held for {duration}ms</p>
-{/if}
\ No newline at end of file
+{/if}
diff --git a/documentation/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte b/documentation/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
index d6eaa0ff12..23cc9f2f9e 100644
--- a/documentation/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
+++ b/documentation/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/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}
- on:longpress="{() => pressed = true}"
- on:mouseenter="{() => pressed = false}"
->press and hold</button>
+<button
+ use:longpress={duration}
+ on:longpress={() => (pressed = true)}
+ on:mouseenter={() => (pressed = false)}>press and hold</button
+>
{#if pressed}
<p>congratulations, you pressed and held for {duration}ms</p>
-{/if}
\ No newline at end of file
+{/if}
diff --git a/documentation/content/tutorial/13-advanced-styling/01-classes/app-a/App.svelte b/documentation/content/tutorial/13-advanced-styling/01-classes/app-a/App.svelte
index f0db8b3214..15efeb2c9f 100644
--- a/documentation/content/tutorial/13-advanced-styling/01-classes/app-a/App.svelte
+++ b/documentation/content/tutorial/13-advanced-styling/01-classes/app-a/App.svelte
@@ -2,20 +2,11 @@
let current = 'foo';
</script>
-<button
- class="{current === 'foo' ? 'selected' : ''}"
- on:click="{() => current = 'foo'}"
->foo</button>
+<button class={current === 'foo' ? 'selected' : ''} on:click={() => (current = 'foo')}>foo</button>
-<button
- class="{current === 'bar' ? 'selected' : ''}"
- on:click="{() => current = 'bar'}"
->bar</button>
+<button class={current === 'bar' ? 'selected' : ''} on:click={() => (current = 'bar')}>bar</button>
-<button
- class="{current === 'baz' ? 'selected' : ''}"
- on:click="{() => current = 'baz'}"
->baz</button>
+<button class={current === 'baz' ? 'selected' : ''} on:click={() => (current = 'baz')}>baz</button>
<style>
button {
@@ -26,4 +17,4 @@
background-color: #ff3e00;
color: white;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/13-advanced-styling/01-classes/app-b/App.svelte b/documentation/content/tutorial/13-advanced-styling/01-classes/app-b/App.svelte
index 00851567ef..1dc18806b3 100644
--- a/documentation/content/tutorial/13-advanced-styling/01-classes/app-b/App.svelte
+++ b/documentation/content/tutorial/13-advanced-styling/01-classes/app-b/App.svelte
@@ -2,20 +2,11 @@
let current = 'foo';
</script>
-<button
- class:selected="{current === 'foo'}"
- on:click="{() => current = 'foo'}"
->foo</button>
+<button class:selected={current === 'foo'} on:click={() => (current = 'foo')}>foo</button>
-<button
- class:selected="{current === 'bar'}"
- on:click="{() => current = 'bar'}"
->bar</button>
+<button class:selected={current === 'bar'} on:click={() => (current = 'bar')}>bar</button>
-<button
- class:selected="{current === 'baz'}"
- on:click="{() => current = 'baz'}"
->baz</button>
+<button class:selected={current === 'baz'} on:click={() => (current = 'baz')}>baz</button>
<style>
button {
@@ -26,4 +17,4 @@
background-color: #ff3e00;
color: white;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte b/documentation/content/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte
index d944a63313..ad39916ce5 100644
--- a/documentation/content/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte
+++ b/documentation/content/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte
@@ -3,11 +3,11 @@
</script>
<label>
- <input type=checkbox bind:checked={big}>
+ <input type="checkbox" bind:checked={big} />
big
</label>
-<div class:big={big}>
+<div class:big>
some {big ? 'big' : 'small'} text
</div>
@@ -15,4 +15,4 @@
.big {
font-size: 4em;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte b/documentation/content/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte
index c91385e4e5..ad39916ce5 100644
--- a/documentation/content/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte
+++ b/documentation/content/tutorial/13-advanced-styling/02-class-shorthand/app-b/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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte b/documentation/content/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
index b86665ce55..7a806717ef 100644
--- a/documentation/content/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
+++ b/documentation/content/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
@@ -9,7 +9,7 @@
<style>
p {
- font-family: "Comic Sans MS", cursive;
+ font-family: 'Comic Sans MS', cursive;
background: rgba(255, 62, 0, var(--opacity));
}
</style>
diff --git a/documentation/content/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte b/documentation/content/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
index 58280f71ad..758db1c567 100644
--- a/documentation/content/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
+++ b/documentation/content/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
@@ -9,7 +9,7 @@
<style>
p {
- font-family: "Comic Sans MS", cursive;
+ font-family: 'Comic Sans MS', cursive;
background: rgba(255, 62, 0, var(--opacity));
}
</style>
diff --git a/documentation/content/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte b/documentation/content/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
index 58280f71ad..758db1c567 100644
--- a/documentation/content/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
+++ b/documentation/content/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
@@ -9,7 +9,7 @@
<style>
p {
- font-family: "Comic Sans MS", cursive;
+ font-family: 'Comic Sans MS', cursive;
background: rgba(255, 62, 0, var(--opacity));
}
</style>
diff --git a/documentation/content/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte b/documentation/content/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
index aade861b43..d75db22ad4 100644
--- a/documentation/content/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
+++ b/documentation/content/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
@@ -1,6 +1,6 @@
<script>
let bgOpacity = 0.5;
- $: color = bgOpacity < 0.6 ? "#000" : "#fff";
+ $: color = bgOpacity < 0.6 ? '#000' : '#fff';
</script>
<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
@@ -9,7 +9,7 @@
<style>
p {
- font-family: "Comic Sans MS", cursive;
+ font-family: 'Comic Sans MS', cursive;
background: rgba(255, 62, 0, var(--opacity));
}
</style>
diff --git a/documentation/content/tutorial/14-composition/01-slots/app-a/App.svelte b/documentation/content/tutorial/14-composition/01-slots/app-a/App.svelte
index 14ce1bb677..7f7b5d4437 100644
--- a/documentation/content/tutorial/14-composition/01-slots/app-a/App.svelte
+++ b/documentation/content/tutorial/14-composition/01-slots/app-a/App.svelte
@@ -4,4 +4,4 @@
<Box>
<!-- put content here -->
-</Box>
\ No newline at end of file
+</Box>
diff --git a/documentation/content/tutorial/14-composition/01-slots/app-a/Box.svelte b/documentation/content/tutorial/14-composition/01-slots/app-a/Box.svelte
index e199b8ce81..36e57ccd88 100644
--- a/documentation/content/tutorial/14-composition/01-slots/app-a/Box.svelte
+++ b/documentation/content/tutorial/14-composition/01-slots/app-a/Box.svelte
@@ -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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/14-composition/01-slots/app-b/App.svelte b/documentation/content/tutorial/14-composition/01-slots/app-b/App.svelte
index cd0ebde935..986bdc01c5 100644
--- a/documentation/content/tutorial/14-composition/01-slots/app-b/App.svelte
+++ b/documentation/content/tutorial/14-composition/01-slots/app-b/App.svelte
@@ -5,4 +5,4 @@
<Box>
<h2>Hello!</h2>
<p>This is a box. It can contain anything.</p>
-</Box>
\ No newline at end of file
+</Box>
diff --git a/documentation/content/tutorial/14-composition/01-slots/app-b/Box.svelte b/documentation/content/tutorial/14-composition/01-slots/app-b/Box.svelte
index b17fdbe60d..2d0a378d25 100644
--- a/documentation/content/tutorial/14-composition/01-slots/app-b/Box.svelte
+++ b/documentation/content/tutorial/14-composition/01-slots/app-b/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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/14-composition/02-slot-fallbacks/app-a/App.svelte b/documentation/content/tutorial/14-composition/02-slot-fallbacks/app-a/App.svelte
index cd0ebde935..986bdc01c5 100644
--- a/documentation/content/tutorial/14-composition/02-slot-fallbacks/app-a/App.svelte
+++ b/documentation/content/tutorial/14-composition/02-slot-fallbacks/app-a/App.svelte
@@ -5,4 +5,4 @@
<Box>
<h2>Hello!</h2>
<p>This is a box. It can contain anything.</p>
-</Box>
\ No newline at end of file
+</Box>
diff --git a/documentation/content/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte b/documentation/content/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte
index b17fdbe60d..2d0a378d25 100644
--- a/documentation/content/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte
+++ b/documentation/content/tutorial/14-composition/02-slot-fallbacks/app-a/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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/14-composition/02-slot-fallbacks/app-b/App.svelte b/documentation/content/tutorial/14-composition/02-slot-fallbacks/app-b/App.svelte
index e30be6d1fc..708428d4d8 100644
--- a/documentation/content/tutorial/14-composition/02-slot-fallbacks/app-b/App.svelte
+++ b/documentation/content/tutorial/14-composition/02-slot-fallbacks/app-b/App.svelte
@@ -7,4 +7,4 @@
<p>This is a box. It can contain anything.</p>
</Box>
-<Box/>
\ No newline at end of file
+<Box />
diff --git a/documentation/content/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte b/documentation/content/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte
index bdaf61b874..8cb8128b31 100644
--- a/documentation/content/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte
+++ b/documentation/content/tutorial/14-composition/02-slot-fallbacks/app-b/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>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/14-composition/03-named-slots/app-a/App.svelte b/documentation/content/tutorial/14-composition/03-named-slots/app-a/App.svelte
index af4a8a6b0a..f3143305ca 100644
--- a/documentation/content/tutorial/14-composition/03-named-slots/app-a/App.svelte
+++ b/documentation/content/tutorial/14-composition/03-named-slots/app-a/App.svelte
@@ -4,4 +4,4 @@
<ContactCard>
<!-- contact details go here -->
-</ContactCard>
\ No newline at end of file
+</ContactCard>
diff --git a/documentation/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte b/documentation/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
index af21dbf379..a3174a9217 100644
--- a/documentation/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
+++ b/documentation/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
@@ -23,19 +23,20 @@
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 50% no-repeat;
+ background: 0 50% no-repeat;
background-size: 1em 1em;
margin: 0 0 0.5em 0;
line-height: 1.2;
diff --git a/documentation/content/tutorial/14-composition/03-named-slots/app-b/App.svelte b/documentation/content/tutorial/14-composition/03-named-slots/app-b/App.svelte
index 620b602eca..ea27d75edf 100644
--- a/documentation/content/tutorial/14-composition/03-named-slots/app-b/App.svelte
+++ b/documentation/content/tutorial/14-composition/03-named-slots/app-b/App.svelte
@@ -3,12 +3,10 @@
</script>
<ContactCard>
- <span slot="name">
- P. Sherman
- </span>
+ <span slot="name"> P. Sherman </span>
<span slot="address">
- 42 Wallaby Way<br>
+ 42 Wallaby Way<br />
Sydney
</span>
-</ContactCard>
\ No newline at end of file
+</ContactCard>
diff --git a/documentation/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte b/documentation/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
index 6f07d2aecb..d72da2ad4c 100644
--- a/documentation/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
+++ b/documentation/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
@@ -23,19 +23,20 @@
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;
diff --git a/documentation/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte b/documentation/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte
index 3dd126be75..f120d03a30 100755
--- a/documentation/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte
+++ b/documentation/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte
@@ -1,19 +1,13 @@
<script>
- import Project from './Project.svelte'
- import Comment from './Comment.svelte'
+ import Project from './Project.svelte';
+ import Comment from './Comment.svelte';
</script>
-<h1>
- Projects
-</h1>
+<h1>Projects</h1>
<ul>
<li>
- <Project
- title="Add TypeScript support"
- tasksCompleted={25}
- totalTasks={57}
- >
+ <Project title="Add TypeScript support" tasksCompleted={25} totalTasks={57}>
<div slot="comments">
<Comment name="Ecma Script" postedAt={new Date('2020-08-17T14:12:23')}>
<p>Those interface tests are now passing.</p>
@@ -22,11 +16,7 @@
</Project>
</li>
<li>
- <Project
- title="Update documentation"
- tasksCompleted={18}
- totalTasks={21}
- />
+ <Project title="Update documentation" tasksCompleted={18} totalTasks={21} />
</li>
</ul>
@@ -54,4 +44,4 @@
flex: 1 1 50%;
min-width: 200px;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte b/documentation/content/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte
index b3c10febf5..153c734376 100755
--- a/documentation/content/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte
+++ b/documentation/content/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte
@@ -2,19 +2,22 @@
export let name;
export let postedAt;
- $: avatar = `https://ui-avatars.com/api/?name=${name.replace(/ /g, '+')}&rounded=true&background=ff3e00&color=fff&bold=true`;
+ $: avatar = `https://ui-avatars.com/api/?name=${name.replace(
+ / /g,
+ '+'
+ )}&rounded=true&background=ff3e00&color=fff&bold=true`;
</script>
<article>
<div class="header">
- <img src={avatar} alt="" height="32" width="32">
+ <img src={avatar} alt="" height="32" width="32" />
<div class="details">
<h4>{name}</h4>
<time datetime={postedAt.toISOString()}>{postedAt.toLocaleDateString()}</time>
</div>
</div>
<div class="body">
- <slot></slot>
+ <slot />
</div>
</article>
@@ -33,7 +36,7 @@
.details {
flex: 1 1 auto;
- margin-left: 0.5rem
+ margin-left: 0.5rem;
}
h4 {
@@ -53,4 +56,4 @@
.body :global(p) {
margin: 0;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/14-composition/04-optional-slots/app-a/Project.svelte b/documentation/content/tutorial/14-composition/04-optional-slots/app-a/Project.svelte
index 2d98458966..6c5a6b7590 100755
--- a/documentation/content/tutorial/14-composition/04-optional-slots/app-a/Project.svelte
+++ b/documentation/content/tutorial/14-composition/04-optional-slots/app-a/Project.svelte
@@ -11,7 +11,7 @@
</div>
<div class="discussion">
<h3>Comments</h3>
- <slot name="comments"></slot>
+ <slot name="comments" />
</div>
</article>
@@ -30,7 +30,7 @@
content: '';
background-color: #ff3e00;
border-radius: 10px;
- box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
height: 20px;
position: absolute;
right: -10px;
@@ -59,4 +59,4 @@
background-color: #eee;
border-top: 1px #ccc solid;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte b/documentation/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte
index 3dd126be75..f120d03a30 100755
--- a/documentation/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte
+++ b/documentation/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte
@@ -1,19 +1,13 @@
<script>
- import Project from './Project.svelte'
- import Comment from './Comment.svelte'
+ import Project from './Project.svelte';
+ import Comment from './Comment.svelte';
</script>
-<h1>
- Projects
-</h1>
+<h1>Projects</h1>
<ul>
<li>
- <Project
- title="Add TypeScript support"
- tasksCompleted={25}
- totalTasks={57}
- >
+ <Project title="Add TypeScript support" tasksCompleted={25} totalTasks={57}>
<div slot="comments">
<Comment name="Ecma Script" postedAt={new Date('2020-08-17T14:12:23')}>
<p>Those interface tests are now passing.</p>
@@ -22,11 +16,7 @@
</Project>
</li>
<li>
- <Project
- title="Update documentation"
- tasksCompleted={18}
- totalTasks={21}
- />
+ <Project title="Update documentation" tasksCompleted={18} totalTasks={21} />
</li>
</ul>
@@ -54,4 +44,4 @@
flex: 1 1 50%;
min-width: 200px;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte b/documentation/content/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte
index b3c10febf5..153c734376 100755
--- a/documentation/content/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte
+++ b/documentation/content/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte
@@ -2,19 +2,22 @@
export let name;
export let postedAt;
- $: avatar = `https://ui-avatars.com/api/?name=${name.replace(/ /g, '+')}&rounded=true&background=ff3e00&color=fff&bold=true`;
+ $: avatar = `https://ui-avatars.com/api/?name=${name.replace(
+ / /g,
+ '+'
+ )}&rounded=true&background=ff3e00&color=fff&bold=true`;
</script>
<article>
<div class="header">
- <img src={avatar} alt="" height="32" width="32">
+ <img src={avatar} alt="" height="32" width="32" />
<div class="details">
<h4>{name}</h4>
<time datetime={postedAt.toISOString()}>{postedAt.toLocaleDateString()}</time>
</div>
</div>
<div class="body">
- <slot></slot>
+ <slot />
</div>
</article>
@@ -33,7 +36,7 @@
.details {
flex: 1 1 auto;
- margin-left: 0.5rem
+ margin-left: 0.5rem;
}
h4 {
@@ -53,4 +56,4 @@
.body :global(p) {
margin: 0;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/14-composition/04-optional-slots/app-b/Project.svelte b/documentation/content/tutorial/14-composition/04-optional-slots/app-b/Project.svelte
index 39f55abd18..41aa4111b9 100755
--- a/documentation/content/tutorial/14-composition/04-optional-slots/app-b/Project.svelte
+++ b/documentation/content/tutorial/14-composition/04-optional-slots/app-b/Project.svelte
@@ -12,7 +12,7 @@
{#if $$slots.comments}
<div class="discussion">
<h3>Comments</h3>
- <slot name="comments"></slot>
+ <slot name="comments" />
</div>
{/if}
</article>
@@ -32,7 +32,7 @@
content: '';
background-color: #ff3e00;
border-radius: 10px;
- box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
height: 20px;
position: absolute;
right: -10px;
@@ -61,4 +61,4 @@
background-color: #eee;
border-top: 1px #ccc solid;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/14-composition/05-slot-props/app-a/App.svelte b/documentation/content/tutorial/14-composition/05-slot-props/app-a/App.svelte
index e95b4cbe93..afdde09a4c 100644
--- a/documentation/content/tutorial/14-composition/05-slot-props/app-a/App.svelte
+++ b/documentation/content/tutorial/14-composition/05-slot-props/app-a/App.svelte
@@ -23,4 +23,4 @@
background-color: #ff3e00;
color: white;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/14-composition/05-slot-props/app-a/Hoverable.svelte b/documentation/content/tutorial/14-composition/05-slot-props/app-a/Hoverable.svelte
index e02f788929..cee53ffc08 100644
--- a/documentation/content/tutorial/14-composition/05-slot-props/app-a/Hoverable.svelte
+++ b/documentation/content/tutorial/14-composition/05-slot-props/app-a/Hoverable.svelte
@@ -11,5 +11,5 @@
</script>
<div on:mouseenter={enter} on:mouseleave={leave}>
- <slot></slot>
-</div>
\ No newline at end of file
+ <slot />
+</div>
diff --git a/documentation/content/tutorial/14-composition/05-slot-props/app-b/App.svelte b/documentation/content/tutorial/14-composition/05-slot-props/app-b/App.svelte
index 299cd336a6..2d3d6e2301 100644
--- a/documentation/content/tutorial/14-composition/05-slot-props/app-b/App.svelte
+++ b/documentation/content/tutorial/14-composition/05-slot-props/app-b/App.svelte
@@ -43,4 +43,4 @@
background-color: #ff3e00;
color: white;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/14-composition/05-slot-props/app-b/Hoverable.svelte b/documentation/content/tutorial/14-composition/05-slot-props/app-b/Hoverable.svelte
index 69f2fc8ef6..773a8ecf6a 100644
--- a/documentation/content/tutorial/14-composition/05-slot-props/app-b/Hoverable.svelte
+++ b/documentation/content/tutorial/14-composition/05-slot-props/app-b/Hoverable.svelte
@@ -11,5 +11,5 @@
</script>
<div on:mouseenter={enter} on:mouseleave={leave}>
- <slot hovering={hovering}></slot>
-</div>
\ No newline at end of file
+ <slot {hovering} />
+</div>
diff --git a/documentation/content/tutorial/15-context/01-context-api/app-a/App.svelte b/documentation/content/tutorial/15-context/01-context-api/app-a/App.svelte
index ea1ba4c7ae..d564c9eee6 100644
--- a/documentation/content/tutorial/15-context/01-context-api/app-a/App.svelte
+++ b/documentation/content/tutorial/15-context/01-context-api/app-a/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={33.8981} lon={-118.4169} label="Svelte Barbershop & Essentials"/>
- <MapMarker lat={29.7230} lon={-95.4189} label="Svelte Waxing Studio"/>
- <MapMarker lat={28.3378} lon={-81.3966} label="Svelte 30 Nutritional Consultants"/>
- <MapMarker lat={40.6483} lon={-74.0237} label="Svelte Brands LLC"/>
- <MapMarker lat={40.6986} lon={-74.4100} label="Svelte Medical Systems"/>
-</Map>
\ No newline at end of file
+ <MapMarker lat={37.8225} lon={-122.0024} label="Svelte Body Shaping" />
+ <MapMarker lat={33.8981} lon={-118.4169} label="Svelte Barbershop & Essentials" />
+ <MapMarker lat={29.723} lon={-95.4189} label="Svelte Waxing Studio" />
+ <MapMarker lat={28.3378} lon={-81.3966} label="Svelte 30 Nutritional Consultants" />
+ <MapMarker lat={40.6483} lon={-74.0237} label="Svelte Brands LLC" />
+ <MapMarker lat={40.6986} lon={-74.41} label="Svelte Medical Systems" />
+</Map>
diff --git a/documentation/content/tutorial/15-context/01-context-api/app-a/Map.svelte b/documentation/content/tutorial/15-context/01-context-api/app-a/Map.svelte
index e94bd3f0cd..495aae6a0d 100644
--- a/documentation/content/tutorial/15-context/01-context-api/app-a/Map.svelte
+++ b/documentation/content/tutorial/15-context/01-context-api/app-a/Map.svelte
@@ -16,7 +16,7 @@
container,
style: 'mapbox://styles/mapbox/streets-v9',
center: [lon, lat],
- zoom,
+ zoom
});
}
@@ -27,11 +27,7 @@
<!-- this special element will be explained in a later section -->
<svelte:head>
- <link
- rel="stylesheet"
- href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css"
- on:load={load}
- />
+ <link rel="stylesheet" href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css" on:load={load} />
</svelte:head>
<div bind:this={container}>
diff --git a/documentation/content/tutorial/15-context/01-context-api/app-a/MapMarker.svelte b/documentation/content/tutorial/15-context/01-context-api/app-a/MapMarker.svelte
index 9bebce66e4..94436445c7 100644
--- a/documentation/content/tutorial/15-context/01-context-api/app-a/MapMarker.svelte
+++ b/documentation/content/tutorial/15-context/01-context-api/app-a/MapMarker.svelte
@@ -7,11 +7,7 @@
export let lon;
export let label;
- const popup = new mapbox.Popup({ offset: 25 })
- .setText(label);
+ const popup = new mapbox.Popup({ offset: 25 }).setText(label);
- const marker = new mapbox.Marker()
- .setLngLat([lon, lat])
- .setPopup(popup)
- .addTo(map);
-</script>
\ No newline at end of file
+ const marker = new mapbox.Marker().setLngLat([lon, lat]).setPopup(popup).addTo(map);
+</script>
diff --git a/documentation/content/tutorial/15-context/01-context-api/app-b/App.svelte b/documentation/content/tutorial/15-context/01-context-api/app-b/App.svelte
index ea1ba4c7ae..d564c9eee6 100644
--- a/documentation/content/tutorial/15-context/01-context-api/app-b/App.svelte
+++ b/documentation/content/tutorial/15-context/01-context-api/app-b/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={33.8981} lon={-118.4169} label="Svelte Barbershop & Essentials"/>
- <MapMarker lat={29.7230} lon={-95.4189} label="Svelte Waxing Studio"/>
- <MapMarker lat={28.3378} lon={-81.3966} label="Svelte 30 Nutritional Consultants"/>
- <MapMarker lat={40.6483} lon={-74.0237} label="Svelte Brands LLC"/>
- <MapMarker lat={40.6986} lon={-74.4100} label="Svelte Medical Systems"/>
-</Map>
\ No newline at end of file
+ <MapMarker lat={37.8225} lon={-122.0024} label="Svelte Body Shaping" />
+ <MapMarker lat={33.8981} lon={-118.4169} label="Svelte Barbershop & Essentials" />
+ <MapMarker lat={29.723} lon={-95.4189} label="Svelte Waxing Studio" />
+ <MapMarker lat={28.3378} lon={-81.3966} label="Svelte 30 Nutritional Consultants" />
+ <MapMarker lat={40.6483} lon={-74.0237} label="Svelte Brands LLC" />
+ <MapMarker lat={40.6986} lon={-74.41} label="Svelte Medical Systems" />
+</Map>
diff --git a/documentation/content/tutorial/15-context/01-context-api/app-b/Map.svelte b/documentation/content/tutorial/15-context/01-context-api/app-b/Map.svelte
index bd4010e765..ddc3ebe7cc 100644
--- a/documentation/content/tutorial/15-context/01-context-api/app-b/Map.svelte
+++ b/documentation/content/tutorial/15-context/01-context-api/app-b/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
});
}
@@ -29,11 +29,7 @@
<!-- this special element will be explained in a later section -->
<svelte:head>
- <link
- rel="stylesheet"
- href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css"
- on:load={load}
- />
+ <link rel="stylesheet" href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css" on:load={load} />
</svelte:head>
<div bind:this={container}>
diff --git a/documentation/content/tutorial/15-context/01-context-api/app-b/MapMarker.svelte b/documentation/content/tutorial/15-context/01-context-api/app-b/MapMarker.svelte
index c936652507..9c6df339cf 100644
--- a/documentation/content/tutorial/15-context/01-context-api/app-b/MapMarker.svelte
+++ b/documentation/content/tutorial/15-context/01-context-api/app-b/MapMarker.svelte
@@ -9,11 +9,7 @@
export let lon;
export let label;
- const popup = new mapbox.Popup({ offset: 25 })
- .setText(label);
+ const popup = new mapbox.Popup({ offset: 25 }).setText(label);
- const marker = new mapbox.Marker()
- .setLngLat([lon, lat])
- .setPopup(popup)
- .addTo(map);
-</script>
\ No newline at end of file
+ const marker = new mapbox.Marker().setLngLat([lon, lat]).setPopup(popup).addTo(map);
+</script>
diff --git a/documentation/content/tutorial/16-special-elements/01-svelte-self/app-a/App.svelte b/documentation/content/tutorial/16-special-elements/01-svelte-self/app-a/App.svelte
index de0b2e0179..38dc3a3b5e 100644
--- a/documentation/content/tutorial/16-special-elements/01-svelte-self/app-a/App.svelte
+++ b/documentation/content/tutorial/16-special-elements/01-svelte-self/app-a/App.svelte
@@ -4,26 +4,18 @@
let root = [
{
name: 'Important work stuff',
- files: [
- { name: 'quarterly-results.xlsx' }
- ]
+ files: [{ name: 'quarterly-results.xlsx' }]
},
{
name: 'Animal GIFs',
files: [
{
name: 'Dogs',
- files: [
- { name: 'treadmill.gif' },
- { name: 'rope-jumping.gif' }
- ]
+ files: [{ name: 'treadmill.gif' }, { name: 'rope-jumping.gif' }]
},
{
name: 'Goats',
- files: [
- { name: 'parkour.gif' },
- { name: 'rampage.gif' }
- ]
+ files: [{ name: 'parkour.gif' }, { name: 'rampage.gif' }]
},
{ name: 'cat-roomba.gif' },
{ name: 'duck-shuffle.gif' },
@@ -34,4 +26,4 @@
];
</script>
-<Folder name="Home" files={root} expanded/>
+<Folder name="Home" files={root} expanded />
diff --git a/documentation/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte b/documentation/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
index 814e383924..cf49668e99 100644
--- a/documentation/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
+++ b/documentation/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
@@ -19,7 +19,7 @@
{#if file.files}
<!-- show folder -->
{:else}
- <File {...file}/>
+ <File {...file} />
{/if}
</li>
{/each}
diff --git a/documentation/content/tutorial/16-special-elements/01-svelte-self/app-b/App.svelte b/documentation/content/tutorial/16-special-elements/01-svelte-self/app-b/App.svelte
index de0b2e0179..38dc3a3b5e 100644
--- a/documentation/content/tutorial/16-special-elements/01-svelte-self/app-b/App.svelte
+++ b/documentation/content/tutorial/16-special-elements/01-svelte-self/app-b/App.svelte
@@ -4,26 +4,18 @@
let root = [
{
name: 'Important work stuff',
- files: [
- { name: 'quarterly-results.xlsx' }
- ]
+ files: [{ name: 'quarterly-results.xlsx' }]
},
{
name: 'Animal GIFs',
files: [
{
name: 'Dogs',
- files: [
- { name: 'treadmill.gif' },
- { name: 'rope-jumping.gif' }
- ]
+ files: [{ name: 'treadmill.gif' }, { name: 'rope-jumping.gif' }]
},
{
name: 'Goats',
- files: [
- { name: 'parkour.gif' },
- { name: 'rampage.gif' }
- ]
+ files: [{ name: 'parkour.gif' }, { name: 'rampage.gif' }]
},
{ name: 'cat-roomba.gif' },
{ name: 'duck-shuffle.gif' },
@@ -34,4 +26,4 @@
];
</script>
-<Folder name="Home" files={root} expanded/>
+<Folder name="Home" files={root} expanded />
diff --git a/documentation/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte b/documentation/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
index bc9fca21f6..dcf80e3645 100644
--- a/documentation/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
+++ b/documentation/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
@@ -17,9 +17,9 @@
{#each files as file}
<li>
{#if file.files}
- <svelte:self {...file}/>
+ <svelte:self {...file} />
{:else}
- <File {...file}/>
+ <File {...file} />
{/if}
</li>
{/each}
diff --git a/documentation/content/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte b/documentation/content/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
index 9fbec68593..79aad72bdf 100644
--- a/documentation/content/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
+++ b/documentation/content/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
@@ -4,9 +4,9 @@
import BlueThing from './BlueThing.svelte';
const options = [
- { color: 'red', component: RedThing },
+ { color: 'red', component: RedThing },
{ color: 'green', component: GreenThing },
- { color: 'blue', component: BlueThing },
+ { color: 'blue', component: BlueThing }
];
let selected = options[0];
@@ -19,9 +19,9 @@
</select>
{#if selected.color === 'red'}
- <RedThing/>
+ <RedThing />
{:else if selected.color === 'green'}
- <GreenThing/>
+ <GreenThing />
{:else if selected.color === 'blue'}
- <BlueThing/>
-{/if}
\ No newline at end of file
+ <BlueThing />
+{/if}
diff --git a/documentation/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte b/documentation/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte
index eb7ba64163..551f1afbbe 100644
--- a/documentation/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte
+++ b/documentation/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte
@@ -4,4 +4,4 @@
strong {
color: blue;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte b/documentation/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte
index ed2aa49f27..a224720e6c 100644
--- a/documentation/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte
+++ b/documentation/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte
@@ -4,4 +4,4 @@
strong {
color: green;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte b/documentation/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte
index 365f226492..9774363c1b 100644
--- a/documentation/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte
+++ b/documentation/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte
@@ -4,4 +4,4 @@
strong {
color: red;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte b/documentation/content/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
index a510fa8ad8..69e51253fc 100644
--- a/documentation/content/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
+++ b/documentation/content/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
@@ -4,9 +4,9 @@
import BlueThing from './BlueThing.svelte';
const options = [
- { color: 'red', component: RedThing },
+ { 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}/>
\ No newline at end of file
+<svelte:component this={selected.component} />
diff --git a/documentation/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte b/documentation/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte
index eb7ba64163..551f1afbbe 100644
--- a/documentation/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte
+++ b/documentation/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte
@@ -4,4 +4,4 @@
strong {
color: blue;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte b/documentation/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte
index ed2aa49f27..a224720e6c 100644
--- a/documentation/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte
+++ b/documentation/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte
@@ -4,4 +4,4 @@
strong {
color: green;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte b/documentation/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte
index 365f226492..9774363c1b 100644
--- a/documentation/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte
+++ b/documentation/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte
@@ -4,4 +4,4 @@
strong {
color: red;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte b/documentation/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte
index 47f3d8a87f..d42d315b80 100644
--- a/documentation/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte
+++ b/documentation/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte
@@ -8,7 +8,7 @@
}
</script>
-<svelte:window/>
+<svelte:window />
<div style="text-align: center">
{#if key}
diff --git a/documentation/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte b/documentation/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte
index c4b5ae53b3..2a90bbef8b 100644
--- a/documentation/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte
+++ b/documentation/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte
@@ -8,7 +8,7 @@
}
</script>
-<svelte:window on:keydown={handleKeydown}/>
+<svelte:window on:keydown={handleKeydown} />
<div style="text-align: center">
{#if key}
diff --git a/documentation/content/tutorial/16-special-elements/05-svelte-window-bindings/app-a/App.svelte b/documentation/content/tutorial/16-special-elements/05-svelte-window-bindings/app-a/App.svelte
index ba51140ff4..97e557a0b5 100644
--- a/documentation/content/tutorial/16-special-elements/05-svelte-window-bindings/app-a/App.svelte
+++ b/documentation/content/tutorial/16-special-elements/05-svelte-window-bindings/app-a/App.svelte
@@ -4,22 +4,20 @@
let y;
</script>
-<svelte:window/>
+<svelte:window />
<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)}">
- scroll down
- </span>
+ <span style="opacity: {1 - Math.max(0, y / 40)}"> 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;
}
@@ -85,4 +83,4 @@
padding: 0;
background-color: rgb(253, 174, 51);
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte b/documentation/content/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte
index 2fc076b991..7e85600abe 100644
--- a/documentation/content/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte
+++ b/documentation/content/tutorial/16-special-elements/05-svelte-window-bindings/app-b/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)}">
- scroll down
- </span>
+ <span style="opacity: {1 - Math.max(0, y / 40)}"> 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;
}
@@ -85,4 +83,4 @@
padding: 0;
background-color: rgb(253, 174, 51);
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/16-special-elements/06-svelte-document/app-a/App.svelte b/documentation/content/tutorial/16-special-elements/06-svelte-document/app-a/App.svelte
index 09cc596e8c..7b9cc7bcb7 100644
--- a/documentation/content/tutorial/16-special-elements/06-svelte-document/app-a/App.svelte
+++ b/documentation/content/tutorial/16-special-elements/06-svelte-document/app-a/App.svelte
@@ -1,7 +1,7 @@
<script>
let selection = '';
- const handleSelectionChange = (e) => selection = document.getSelection();
+ const handleSelectionChange = (e) => (selection = document.getSelection());
</script>
<svelte:document />
diff --git a/documentation/content/tutorial/16-special-elements/06-svelte-document/app-b/App.svelte b/documentation/content/tutorial/16-special-elements/06-svelte-document/app-b/App.svelte
index 5dd44aa389..e11a9005db 100644
--- a/documentation/content/tutorial/16-special-elements/06-svelte-document/app-b/App.svelte
+++ b/documentation/content/tutorial/16-special-elements/06-svelte-document/app-b/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} />
diff --git a/documentation/content/tutorial/16-special-elements/07-svelte-body/app-a/App.svelte b/documentation/content/tutorial/16-special-elements/07-svelte-body/app-a/App.svelte
index e74bcc6a4c..43d6c6b7eb 100644
--- a/documentation/content/tutorial/16-special-elements/07-svelte-body/app-a/App.svelte
+++ b/documentation/content/tutorial/16-special-elements/07-svelte-body/app-a/App.svelte
@@ -1,18 +1,18 @@
<script>
let hereKitty = false;
- const handleMouseenter = () => hereKitty = true;
- const handleMouseleave = () => hereKitty = false;
+ const handleMouseenter = () => (hereKitty = true);
+ const handleMouseleave = () => (hereKitty = false);
</script>
-<svelte:body/>
+<svelte:body />
<!-- 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 {
diff --git a/documentation/content/tutorial/16-special-elements/07-svelte-body/app-b/App.svelte b/documentation/content/tutorial/16-special-elements/07-svelte-body/app-b/App.svelte
index fddc8f8d0a..71edebea48 100644
--- a/documentation/content/tutorial/16-special-elements/07-svelte-body/app-b/App.svelte
+++ b/documentation/content/tutorial/16-special-elements/07-svelte-body/app-b/App.svelte
@@ -1,21 +1,18 @@
<script>
let hereKitty = false;
- const handleMouseenter = () => hereKitty = true;
- const handleMouseleave = () => hereKitty = false;
+ const handleMouseenter = () => (hereKitty = true);
+ const handleMouseleave = () => (hereKitty = false);
</script>
-<svelte:body
- on:mouseenter={handleMouseenter}
- on:mouseleave={handleMouseleave}
-/>
+<svelte:body 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 {
diff --git a/documentation/content/tutorial/16-special-elements/08-svelte-head/app-a/App.svelte b/documentation/content/tutorial/16-special-elements/08-svelte-head/app-a/App.svelte
index 2f5fed88cb..73477dbe9d 100644
--- a/documentation/content/tutorial/16-special-elements/08-svelte-head/app-a/App.svelte
+++ b/documentation/content/tutorial/16-special-elements/08-svelte-head/app-a/App.svelte
@@ -2,4 +2,4 @@
<!-- elements go here -->
</svelte:head>
-<h1>Hello world!</h1>
\ No newline at end of file
+<h1>Hello world!</h1>
diff --git a/documentation/content/tutorial/16-special-elements/08-svelte-head/app-b/App.svelte b/documentation/content/tutorial/16-special-elements/08-svelte-head/app-b/App.svelte
index 8323b56ad0..5e6bb2d945 100644
--- a/documentation/content/tutorial/16-special-elements/08-svelte-head/app-b/App.svelte
+++ b/documentation/content/tutorial/16-special-elements/08-svelte-head/app-b/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>
diff --git a/documentation/content/tutorial/16-special-elements/09-svelte-options/app-a/App.svelte b/documentation/content/tutorial/16-special-elements/09-svelte-options/app-a/App.svelte
index 298526902d..96eb7b3977 100644
--- a/documentation/content/tutorial/16-special-elements/09-svelte-options/app-a/App.svelte
+++ b/documentation/content/tutorial/16-special-elements/09-svelte-options/app-a/App.svelte
@@ -8,7 +8,7 @@
];
function toggle(toggled) {
- todos = todos.map(todo => {
+ todos = todos.map((todo) => {
if (todo === toggled) {
// return a new object
return {
@@ -26,5 +26,5 @@
<h2>Todos</h2>
{#each todos as todo}
- <Todo {todo} on:click={() => toggle(todo)}/>
-{/each}
\ No newline at end of file
+ <Todo {todo} on:click={() => toggle(todo)} />
+{/each}
diff --git a/documentation/content/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte b/documentation/content/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte
index cc3856316c..14083c0ba4 100644
--- a/documentation/content/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte
+++ b/documentation/content/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte
@@ -14,7 +14,8 @@
<!-- the text will flash red whenever
the `todo` object changes -->
<button bind:this={button} type="button" on:click>
- {todo.done ? '👍': ''} {todo.text}
+ {todo.done ? '👍' : ''}
+ {todo.text}
</button>
<style>
diff --git a/documentation/content/tutorial/16-special-elements/09-svelte-options/app-b/App.svelte b/documentation/content/tutorial/16-special-elements/09-svelte-options/app-b/App.svelte
index 298526902d..96eb7b3977 100644
--- a/documentation/content/tutorial/16-special-elements/09-svelte-options/app-b/App.svelte
+++ b/documentation/content/tutorial/16-special-elements/09-svelte-options/app-b/App.svelte
@@ -8,7 +8,7 @@
];
function toggle(toggled) {
- todos = todos.map(todo => {
+ todos = todos.map((todo) => {
if (todo === toggled) {
// return a new object
return {
@@ -26,5 +26,5 @@
<h2>Todos</h2>
{#each todos as todo}
- <Todo {todo} on:click={() => toggle(todo)}/>
-{/each}
\ No newline at end of file
+ <Todo {todo} on:click={() => toggle(todo)} />
+{/each}
diff --git a/documentation/content/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte b/documentation/content/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte
index 848f167d02..6104f16493 100644
--- a/documentation/content/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte
+++ b/documentation/content/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte
@@ -1,4 +1,4 @@
-<svelte:options immutable={true}/>
+<svelte:options immutable={true} />
<script>
import { afterUpdate } from 'svelte';
@@ -16,7 +16,8 @@
<!-- the text will flash red whenever
the `todo` object changes -->
<button bind:this={button} type="button" on:click>
- {todo.done ? '👍': ''} {todo.text}
+ {todo.done ? '👍' : ''}
+ {todo.text}
</button>
<style>
diff --git a/documentation/content/tutorial/16-special-elements/09-svelte-options/text.md b/documentation/content/tutorial/16-special-elements/09-svelte-options/text.md
index 0dcaa02dc5..4c78d4d13e 100644
--- a/documentation/content/tutorial/16-special-elements/09-svelte-options/text.md
+++ b/documentation/content/tutorial/16-special-elements/09-svelte-options/text.md
@@ -20,11 +20,11 @@ Now, when you toggle todos by clicking on them, only the updated component flash
The options that can be set here are:
-* `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed
-* `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed
-* `accessors={true}` — adds getters and setters for the component's props
-* `accessors={false}` — the default
-* `namespace="..."` — the namespace where this component will be used, most commonly `"svg"`
-* `customElement="..."` — the name to use when compiling this component as a custom element
+- `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed
+- `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed
+- `accessors={true}` — adds getters and setters for the component's props
+- `accessors={false}` — the default
+- `namespace="..."` — the namespace where this component will be used, most commonly `"svg"`
+- `customElement="..."` — the name to use when compiling this component as a custom element
Consult the [API reference](/docs) for more information on these options.
diff --git a/documentation/content/tutorial/16-special-elements/10-svelte-fragment/app-a/App.svelte b/documentation/content/tutorial/16-special-elements/10-svelte-fragment/app-a/App.svelte
index 442ff07d26..d3ccc673c8 100644
--- a/documentation/content/tutorial/16-special-elements/10-svelte-fragment/app-a/App.svelte
+++ b/documentation/content/tutorial/16-special-elements/10-svelte-fragment/app-a/App.svelte
@@ -1,5 +1,5 @@
<script>
- import Box from './Box.svelte'
+ import Box from './Box.svelte';
</script>
<Box>
@@ -7,4 +7,4 @@
<p>All rights reserved.</p>
<p>Copyright (c) 2019 Svelte Industries</p>
</div>
-</Box>
\ No newline at end of file
+</Box>
diff --git a/documentation/content/tutorial/16-special-elements/10-svelte-fragment/app-a/Box.svelte b/documentation/content/tutorial/16-special-elements/10-svelte-fragment/app-a/Box.svelte
index ed389182a7..843a3940aa 100644
--- a/documentation/content/tutorial/16-special-elements/10-svelte-fragment/app-a/Box.svelte
+++ b/documentation/content/tutorial/16-special-elements/10-svelte-fragment/app-a/Box.svelte
@@ -1,7 +1,7 @@
<div class="box">
<slot name="header">No header was provided</slot>
<p>Some content between header and footer</p>
- <slot name="footer"></slot>
+ <slot name="footer" />
</div>
<style>
@@ -12,9 +12,9 @@
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
padding: 1em;
margin: 0 0 1em 0;
-
+
display: flex;
flex-direction: column;
gap: 1em;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/16-special-elements/10-svelte-fragment/app-b/App.svelte b/documentation/content/tutorial/16-special-elements/10-svelte-fragment/app-b/App.svelte
index e66b026d90..9ad2616ad7 100644
--- a/documentation/content/tutorial/16-special-elements/10-svelte-fragment/app-b/App.svelte
+++ b/documentation/content/tutorial/16-special-elements/10-svelte-fragment/app-b/App.svelte
@@ -1,5 +1,5 @@
<script>
- import Box from './Box.svelte'
+ import Box from './Box.svelte';
</script>
<Box>
@@ -7,4 +7,4 @@
<p>All rights reserved.</p>
<p>Copyright (c) 2019 Svelte Industries</p>
</svelte:fragment>
-</Box>
\ No newline at end of file
+</Box>
diff --git a/documentation/content/tutorial/16-special-elements/10-svelte-fragment/app-b/Box.svelte b/documentation/content/tutorial/16-special-elements/10-svelte-fragment/app-b/Box.svelte
index ed389182a7..843a3940aa 100644
--- a/documentation/content/tutorial/16-special-elements/10-svelte-fragment/app-b/Box.svelte
+++ b/documentation/content/tutorial/16-special-elements/10-svelte-fragment/app-b/Box.svelte
@@ -1,7 +1,7 @@
<div class="box">
<slot name="header">No header was provided</slot>
<p>Some content between header and footer</p>
- <slot name="footer"></slot>
+ <slot name="footer" />
</div>
<style>
@@ -12,9 +12,9 @@
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
padding: 1em;
margin: 0 0 1em 0;
-
+
display: flex;
flex-direction: column;
gap: 1em;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte b/documentation/content/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
index 179bdacffe..0533ec0876 100644
--- a/documentation/content/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
+++ b/documentation/content/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
@@ -16,26 +16,23 @@
<h2>{title}</h2>
<p><strong>{composer}</strong> / performed by {performer}</p>
- <audio
- bind:this={audio}
- bind:paused
- on:play={stopOthers}
- controls
- {src}
- ></audio>
+ <audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
</article>
<style>
article {
- margin: 0 0 1em 0; max-width: 800px;
+ margin: 0 0 1em 0;
+ max-width: 800px;
}
- h2, p {
+ h2,
+ p {
margin: 0 0 0.3em 0;
}
audio {
- width: 100%; margin: 0.5em 0 1em 0;
+ width: 100%;
+ margin: 0.5em 0 1em 0;
}
.playing {
color: #ff3e00;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte b/documentation/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
index 3352074a2c..6e2e605026 100644
--- a/documentation/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
+++ b/documentation/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
@@ -21,26 +21,23 @@
<h2>{title}</h2>
<p><strong>{composer}</strong> / performed by {performer}</p>
- <audio
- bind:this={audio}
- bind:paused
- on:play={stopOthers}
- controls
- {src}
- ></audio>
+ <audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
</article>
<style>
article {
- margin: 0 0 1em 0; max-width: 800px;
+ margin: 0 0 1em 0;
+ max-width: 800px;
}
- h2, p {
+ h2,
+ p {
margin: 0 0 0.3em 0;
}
audio {
- width: 100%; margin: 0.5em 0 1em 0;
+ width: 100%;
+ margin: 0.5em 0 1em 0;
}
.playing {
color: #ff3e00;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/17-module-context/02-module-exports/app-a/App.svelte b/documentation/content/tutorial/17-module-context/02-module-exports/app-a/App.svelte
index 1550db6a09..9365c46c0a 100644
--- a/documentation/content/tutorial/17-module-context/02-module-exports/app-a/App.svelte
+++ b/documentation/content/tutorial/17-module-context/02-module-exports/app-a/App.svelte
@@ -2,9 +2,7 @@
import AudioPlayer from './AudioPlayer.svelte';
</script>
-<button>
- stop all audio
-</button>
+<button> stop all audio </button>
<!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
<AudioPlayer
diff --git a/documentation/content/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte b/documentation/content/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
index 90f3c67551..2b229e50dd 100644
--- a/documentation/content/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
+++ b/documentation/content/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
@@ -19,7 +19,7 @@
});
function stopOthers() {
- elements.forEach(element => {
+ elements.forEach((element) => {
if (element !== audio) element.pause();
});
}
@@ -29,26 +29,23 @@
<h2>{title}</h2>
<p><strong>{composer}</strong> / performed by {performer}</p>
- <audio
- bind:this={audio}
- bind:paused
- on:play={stopOthers}
- controls
- {src}
- ></audio>
+ <audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
</article>
<style>
article {
- margin: 0 0 1em 0; max-width: 800px;
+ margin: 0 0 1em 0;
+ max-width: 800px;
}
- h2, p {
+ h2,
+ p {
margin: 0 0 0.3em 0;
}
audio {
- width: 100%; margin: 0.5em 0 1em 0;
+ width: 100%;
+ margin: 0.5em 0 1em 0;
}
.playing {
color: #ff3e00;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/17-module-context/02-module-exports/app-b/App.svelte b/documentation/content/tutorial/17-module-context/02-module-exports/app-b/App.svelte
index 1d5d94b5d1..a018d3429f 100644
--- a/documentation/content/tutorial/17-module-context/02-module-exports/app-b/App.svelte
+++ b/documentation/content/tutorial/17-module-context/02-module-exports/app-b/App.svelte
@@ -2,9 +2,7 @@
import AudioPlayer, { stopAll } from './AudioPlayer.svelte';
</script>
-<button on:click={stopAll}>
- stop all audio
-</button>
+<button on:click={stopAll}> stop all audio </button>
<!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
<AudioPlayer
diff --git a/documentation/content/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte b/documentation/content/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
index f28e8b0c7f..b76601e025 100644
--- a/documentation/content/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
+++ b/documentation/content/tutorial/17-module-context/02-module-exports/app-b/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,26 +35,23 @@
<h2>{title}</h2>
<p><strong>{composer}</strong> / performed by {performer}</p>
- <audio
- bind:this={audio}
- bind:paused
- on:play={stopOthers}
- controls
- {src}
- ></audio>
+ <audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
</article>
<style>
article {
- margin: 0 0 1em 0; max-width: 800px;
+ margin: 0 0 1em 0;
+ max-width: 800px;
}
- h2, p {
+ h2,
+ p {
margin: 0 0 0.3em 0;
}
audio {
- width: 100%; margin: 0.5em 0 1em 0;
+ width: 100%;
+ margin: 0.5em 0 1em 0;
}
.playing {
color: #ff3e00;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/documentation/content/tutorial/18-special-tags/01-debug/app-a/App.svelte b/documentation/content/tutorial/18-special-tags/01-debug/app-a/App.svelte
index dd2243d7ae..78a0b81741 100644
--- a/documentation/content/tutorial/18-special-tags/01-debug/app-a/App.svelte
+++ b/documentation/content/tutorial/18-special-tags/01-debug/app-a/App.svelte
@@ -5,9 +5,9 @@
};
</script>
-<input bind:value={user.firstname}>
-<input bind:value={user.lastname}>
+<input bind:value={user.firstname} />
+<input bind:value={user.lastname} />
{(console.log(user), '')}
-<h1>Hello {user.firstname}!</h1>
\ No newline at end of file
+<h1>Hello {user.firstname}!</h1>
diff --git a/documentation/content/tutorial/18-special-tags/01-debug/app-b/App.svelte b/documentation/content/tutorial/18-special-tags/01-debug/app-b/App.svelte
index 1b91ac740b..30bffc896c 100644
--- a/documentation/content/tutorial/18-special-tags/01-debug/app-b/App.svelte
+++ b/documentation/content/tutorial/18-special-tags/01-debug/app-b/App.svelte
@@ -5,9 +5,9 @@
};
</script>
-<input bind:value={user.firstname}>
-<input bind:value={user.lastname}>
+<input bind:value={user.firstname} />
+<input bind:value={user.lastname} />
{@debug user}
-<h1>Hello {user.firstname}!</h1>
\ No newline at end of file
+<h1>Hello {user.firstname}!</h1>
diff --git a/documentation/content/tutorial/18-special-tags/02-html-tags/app-a/App.svelte b/documentation/content/tutorial/18-special-tags/02-html-tags/app-a/App.svelte
index e366d78865..77270433f1 100644
--- a/documentation/content/tutorial/18-special-tags/02-html-tags/app-a/App.svelte
+++ b/documentation/content/tutorial/18-special-tags/02-html-tags/app-a/App.svelte
@@ -2,4 +2,4 @@
let string = `this string contains some <strong>HTML!!!</strong>`;
</script>
-<p>{string}</p>
\ No newline at end of file
+<p>{string}</p>
diff --git a/documentation/content/tutorial/18-special-tags/02-html-tags/app-b/App.svelte b/documentation/content/tutorial/18-special-tags/02-html-tags/app-b/App.svelte
index 527e9a4830..463eb8250e 100644
--- a/documentation/content/tutorial/18-special-tags/02-html-tags/app-b/App.svelte
+++ b/documentation/content/tutorial/18-special-tags/02-html-tags/app-b/App.svelte
@@ -2,4 +2,4 @@
let string = `this string contains some <strong>HTML!!!</strong>`;
</script>
-<p>{@html string}</p>
\ No newline at end of file
+<p>{@html string}</p>
diff --git a/documentation/content/tutorial/19-next-steps/01-congratulations/app-a/App.svelte b/documentation/content/tutorial/19-next-steps/01-congratulations/app-a/App.svelte
index 9ce2dd648d..a5db2e5eab 100644
--- a/documentation/content/tutorial/19-next-steps/01-congratulations/app-a/App.svelte
+++ b/documentation/content/tutorial/19-next-steps/01-congratulations/app-a/App.svelte
@@ -3,7 +3,8 @@
let characters = ['🥳', '🎉', '✨'];
- let confetti = new Array(100).fill()
+ let confetti = new Array(100)
+ .fill()
.map((_, i) => {
return {
character: characters[i % characters.length],
@@ -20,7 +21,7 @@
function loop() {
frame = requestAnimationFrame(loop);
- confetti = confetti.map(emoji => {
+ confetti = confetti.map((emoji) => {
emoji.y += 0.7 * emoji.r;
if (emoji.y > 120) emoji.y = -20;
return emoji;
diff --git a/sites/svelte.dev/README.md b/sites/svelte.dev/README.md
index 7c9587b142..f20bf9b5d9 100644
--- a/sites/svelte.dev/README.md
+++ b/sites/svelte.dev/README.md
@@ -101,7 +101,7 @@ The name of the file is what determines the URL of the page. For example, the UR
```json
{
- "title": "Getting Started"
+ "title": "Getting Started"
}
```