msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

Modify prettierrc

Browse Source
pull/8289/head
Puru Vijay 4 years ago
parent 1a4d4844c2
commit 19f79c3314
116 changed files with 17002 additions and 16990 deletions
Show Stats Download Patch File Download Diff File

4
.prettierrc
Unescape View File

@ -2,5 +2,7 @@
"singleQuote": true, "singleQuote": true,
"printWidth": 100, "printWidth": 100,
"useTabs": true, "useTabs": true,
"trailingComma": "es5" "tabWidth": 2,
"trailingComma": "none",
"plugins": ["prettier-plugin-svelte"]
} }

19041
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
Unescape View File

@ -151,6 +151,7 @@
"magic-string": "^0.30.0", "magic-string": "^0.30.0",
"mocha": "^7.0.0", "mocha": "^7.0.0",
"periscopic": "^3.1.0", "periscopic": "^3.1.0",
"prettier-plugin-svelte": "^2.10.0",
"puppeteer": "^2.0.0", "puppeteer": "^2.0.0",
"rollup": "^1.27.14", "rollup": "^1.27.14",
"source-map": "^0.7.4", "source-map": "^0.7.4",

16
site/content/blog/2018-04-18-version-2.md
Unescape View File

@ -51,8 +51,8 @@ Another thing that people often found confusing about Svelte is the way computed
```js ```js
export default { export default {
computed: { computed: {
d: (a, b, c) => (a = b + c), d: (a, b, c) => (a = b + c)
}, }
}; };
``` ```
@ -63,8 +63,8 @@ In v2, we use [destructuring](http://www.jstips.co/en/javascript/use-destructuri
```js ```js
export default { export default {
computed: { computed: {
d: ({ a, b, c }) => (a = b + c), d: ({ a, b, c }) => (a = b + c)
}, }
}; };
``` ```
@ -93,7 +93,7 @@ export default {
// this fires after oncreate, and // this fires after oncreate, and
// whenever the DOM has been updated // whenever the DOM has been updated
// following a state change // following a state change
}, }
}; };
``` ```
@ -138,8 +138,8 @@ import { observe } from 'svelte-extras';
export default { export default {
methods: { methods: {
observe, observe
}, }
}; };
``` ```
@ -173,7 +173,7 @@ Previously, numeric values passed to components were treated as numbers:
That causes unexpected behaviour, and has been changed: if you need to pass a literal number, do so as an expression: That causes unexpected behaviour, and has been changed: if you need to pass a literal number, do so as an expression:
```svelte ```svelte
<Counter start="{1}" /> <Counter start={1} />
``` ```
## Compiler changes ## Compiler changes

4
site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
Unescape View File

@ -38,7 +38,7 @@ In old Svelte, you would tell the computer that some state had changed by callin
```js ```js
const { count } = this.get(); const { count } = this.get();
this.set({ this.set({
count: count + 1, count: count + 1
}); });
``` ```
@ -47,7 +47,7 @@ That would cause the component to _react_. Speaking of which, `this.set` is almo
```js ```js
const { count } = this.state; const { count } = this.state;
this.setState({ this.setState({
count: count + 1, count: count + 1
}); });
``` ```

18
site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md
Unescape View File

@ -19,17 +19,17 @@ Welcome to the first edition of our "What's new in Svelte" series! We'll try to
```svelte ```svelte
<script lang="ts"> <script lang="ts">
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher<{ const dispatch = createEventDispatcher<{
/** /**
* you can also add docs * you can also add docs
*/ */
checked: boolean; // Will translate to `CustomEvent<boolean>` checked: boolean; // Will translate to `CustomEvent<boolean>`
hello: string; hello: string;
}>(); }>();
// ... // ...
</script> </script>
``` ```

8
site/content/blog/2023-03-09-zero-config-type-safety.md
Unescape View File

@ -27,7 +27,7 @@ import type { ServerLoadEvent } from '@sveltejs/kit';
export async function load(event: ServerLoadEvent) { export async function load(event: ServerLoadEvent) {
return { return {
post: await database.getPost(event.params.post), post: await database.getPost(event.params.post)
}; };
} }
``` ```
@ -56,13 +56,13 @@ After we have loaded our data, we want to display it in our `+page.svelte`. The
```svelte ```svelte
<!-- src/routes/blog/[slug]/+page.svelte --> <!-- src/routes/blog/[slug]/+page.svelte -->
<script lang="ts"> <script lang="ts">
import type { PageData } from './$types'; import type { PageData } from './$types';
export let data: PageData; export let data: PageData;
</script> </script>
<h1>{data.post.title}</h1> <h1>{data.post.title}</h1>
<div>{@html data.post.content}</div> <div>{@html data.post.content}</div>
``` ```

4
site/content/docs/03-template-syntax.md
Unescape View File

@ -61,8 +61,8 @@ Boolean attributes are included on the element if their value is [truthy](https:
All other attributes are included unless their value is [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish) (`null` or `undefined`). All other attributes are included unless their value is [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish) (`null` or `undefined`).
```svelte ```svelte
<input required="{false}" placeholder="This input field is not required" /> <input required={false} placeholder="This input field is not required" />
<div title="{null}">This div has no title attribute</div> <div title={null}>This div has no title attribute</div>
``` ```
--- ---

27
site/content/docs/04-run-time.md
Unescape View File

@ -540,7 +540,7 @@ If the initial value is `undefined` or `null`, the first value change will take
```js ```js
const size = tweened(undefined, { const size = tweened(undefined, {
duration: 300, duration: 300,
easing: cubicOut, easing: cubicOut
}); });
$: $size = big ? 100 : 10; $: $size = big ? 100 : 10;
@ -555,11 +555,7 @@ The `interpolate` option allows you to tween between _any_ arbitrary values. It
import { interpolateLab } from 'd3-interpolate'; import { interpolateLab } from 'd3-interpolate';
import { tweened } from 'svelte/motion'; import { tweened } from 'svelte/motion';
const colors = [ const colors = ['rgb(255, 62, 0)', 'rgb(64, 179, 255)', 'rgb(103, 103, 120)'];
'rgb(255, 62, 0)',
'rgb(64, 179, 255)',
'rgb(103, 103, 120)'
];
const color = tweened(colors[0], { const color = tweened(colors[0], {
duration: 800, duration: 800,
@ -568,11 +564,8 @@ The `interpolate` option allows you to tween between _any_ arbitrary values. It
</script> </script>
{#each colors as c} {#each colors as c}
<button <button style="background-color: {c}; color: white; border: none;" on:click={(e) => color.set(c)}>
style="background-color: {c}; color: white; border: none;" {c}
on:click={e => color.set(c)}
>
{c}
</button> </button>
{/each} {/each}
@ -1004,7 +997,7 @@ To set compile options, or to use a custom file extension, call the `register` h
```js ```js
require('svelte/register')({ require('svelte/register')({
extensions: ['.customextension'], // defaults to ['.html', '.svelte'] extensions: ['.customextension'], // defaults to ['.html', '.svelte']
preserveComments: true, preserveComments: true
}); });
``` ```
@ -1026,8 +1019,8 @@ const app = new App({
props: { props: {
// assuming App.svelte contains something like // assuming App.svelte contains something like
// `export let answer`: // `export let answer`:
answer: 42, answer: 42
}, }
}); });
``` ```
@ -1057,7 +1050,7 @@ import App from './App.svelte';
const app = new App({ const app = new App({
target: document.querySelector('#server-rendered-html'), target: document.querySelector('#server-rendered-html'),
hydrate: true, hydrate: true
}); });
``` ```
@ -1210,7 +1203,7 @@ require('svelte/register');
const App = require('./App.svelte').default; const App = require('./App.svelte').default;
const { head, html, css } = App.render({ const { head, html, css } = App.render({
answer: 42, answer: 42
}); });
``` ```
@ -1235,7 +1228,7 @@ const { head, html, css } = App.render(
{ answer: 42 }, { answer: 42 },
// options // options
{ {
context: new Map([['context-key', 'context-value']]), context: new Map([['context-key', 'context-value']])
} }
); );
``` ```

24
site/content/docs/05-compile-time.md
Unescape View File

@ -231,12 +231,12 @@ const { code } = await svelte.preprocess(
s.overwrite(pos, pos + 3, 'bar', { storeName: true }); s.overwrite(pos, pos + 3, 'bar', { storeName: true });
return { return {
code: s.toString(), code: s.toString(),
map: s.generateMap(), map: s.generateMap()
}; };
}, }
}, },
{ {
filename: 'App.svelte', filename: 'App.svelte'
} }
); );
``` ```
@ -264,7 +264,7 @@ const { code, dependencies } = await svelte.preprocess(
{ {
file: filename, file: filename,
data: content, data: content,
includePaths: [dirname(filename)], includePaths: [dirname(filename)]
}, },
(err, result) => { (err, result) => {
if (err) reject(err); if (err) reject(err);
@ -275,12 +275,12 @@ const { code, dependencies } = await svelte.preprocess(
return { return {
code: css.toString(), code: css.toString(),
dependencies: stats.includedFiles, dependencies: stats.includedFiles
}; };
}, }
}, },
{ {
filename: 'App.svelte', filename: 'App.svelte'
} }
); );
``` ```
@ -304,7 +304,7 @@ const { code } = await svelte.preprocess(
}, },
style: () => { style: () => {
console.log('this runs fifth'); console.log('this runs fifth');
}, }
}, },
{ {
markup: () => { markup: () => {
@ -315,11 +315,11 @@ const { code } = await svelte.preprocess(
}, },
style: () => { style: () => {
console.log('this runs sixth'); console.log('this runs sixth');
}, }
}, }
], ],
{ {
filename: 'App.svelte', filename: 'App.svelte'
} }
); );
``` ```
@ -350,7 +350,7 @@ svelte.walk(ast, {
}, },
leave(node, parent, prop, index) { leave(node, parent, prop, index) {
do_something_else(node); do_something_else(node);
}, }
}); });
``` ```

2
site/content/examples/07-stores/04-custom-stores/stores.js
Unescape View File

@ -7,7 +7,7 @@ function createCount() {
subscribe, subscribe,
increment: () => update((n) => n + 1), increment: () => update((n) => n + 1),
decrement: () => update((n) => n - 1), decrement: () => update((n) => n - 1),
reset: () => set(0), reset: () => set(0)
}; };
} }

32
site/content/examples/09-transitions/06-deferred-transitions/images.js
Unescape View File

@ -1,16 +1,16 @@
const BY = { const BY = {
name: 'CC BY 2.0', name: 'CC BY 2.0',
url: 'https://creativecommons.org/licenses/by/2.0/', url: 'https://creativecommons.org/licenses/by/2.0/'
}; };
const BY_SA = { const BY_SA = {
name: 'CC BY-SA 2.0', name: 'CC BY-SA 2.0',
url: 'https://creativecommons.org/licenses/by-sa/2.0/', url: 'https://creativecommons.org/licenses/by-sa/2.0/'
}; };
const BY_ND = { const BY_ND = {
name: 'CC BY-ND 2.0', name: 'CC BY-ND 2.0',
url: 'https://creativecommons.org/licenses/by-nd/2.0/', url: 'https://creativecommons.org/licenses/by-nd/2.0/'
}; };
// via http://labs.tineye.com/multicolr // via http://labs.tineye.com/multicolr
@ -20,83 +20,83 @@ export default [
id: '1', id: '1',
alt: 'Crepuscular rays', alt: 'Crepuscular rays',
path: '43428526@N03/7863279376', path: '43428526@N03/7863279376',
license: BY, license: BY
}, },
{ {
color: '#0074D9', color: '#0074D9',
id: '2', id: '2',
alt: 'Lapland winter scene', alt: 'Lapland winter scene',
path: '25507134@N00/6527537485', path: '25507134@N00/6527537485',
license: BY, license: BY
}, },
{ {
color: '#7FDBFF', color: '#7FDBFF',
id: '3', id: '3',
alt: 'Jellyfish', alt: 'Jellyfish',
path: '37707866@N00/3354331318', path: '37707866@N00/3354331318',
license: BY, license: BY
}, },
{ {
color: '#39CCCC', color: '#39CCCC',
id: '4', id: '4',
alt: 'A man scuba diving', alt: 'A man scuba diving',
path: '32751486@N00/4608886209', path: '32751486@N00/4608886209',
license: BY_SA, license: BY_SA
}, },
{ {
color: '#3D9970', color: '#3D9970',
id: '5', id: '5',
alt: 'Underwater scene', alt: 'Underwater scene',
path: '25483059@N08/5548569010', path: '25483059@N08/5548569010',
license: BY, license: BY
}, },
{ {
color: '#2ECC40', color: '#2ECC40',
id: '6', id: '6',
alt: 'Ferns', alt: 'Ferns',
path: '8404611@N06/2447470760', path: '8404611@N06/2447470760',
license: BY, license: BY
}, },
{ {
color: '#01FF70', color: '#01FF70',
id: '7', id: '7',
alt: 'Posters in a bar', alt: 'Posters in a bar',
path: '33917831@N00/114428206', path: '33917831@N00/114428206',
license: BY_SA, license: BY_SA
}, },
{ {
color: '#FFDC00', color: '#FFDC00',
id: '8', id: '8',
alt: 'Daffodil', alt: 'Daffodil',
path: '46417125@N04/4818617089', path: '46417125@N04/4818617089',
license: BY_ND, license: BY_ND
}, },
{ {
color: '#FF851B', color: '#FF851B',
id: '9', id: '9',
alt: 'Dust storm in Sydney', alt: 'Dust storm in Sydney',
path: '56068058@N00/3945496657', path: '56068058@N00/3945496657',
license: BY, license: BY
}, },
{ {
color: '#FF4136', color: '#FF4136',
id: '10', id: '10',
alt: 'Postbox', alt: 'Postbox',
path: '31883499@N05/4216820032', path: '31883499@N05/4216820032',
license: BY, license: BY
}, },
{ {
color: '#85144b', color: '#85144b',
id: '11', id: '11',
alt: 'Fireworks', alt: 'Fireworks',
path: '8484971@N07/2625506561', path: '8484971@N07/2625506561',
license: BY_ND, license: BY_ND
}, },
{ {
color: '#B10DC9', color: '#B10DC9',
id: '12', id: '12',
alt: 'The Stereophonics', alt: 'The Stereophonics',
path: '58028312@N00/5385464371', path: '58028312@N00/5385464371',
license: BY_ND, license: BY_ND
}, }
]; ];

4
site/content/examples/11-easing/00-easing/eases.js
Unescape View File

@ -31,13 +31,13 @@ const sorted_eases = new Map([
['circ', processed_eases.circ], ['circ', processed_eases.circ],
['back', processed_eases.back], ['back', processed_eases.back],
['elastic', processed_eases.elastic], ['elastic', processed_eases.elastic],
['bounce', processed_eases.bounce], ['bounce', processed_eases.bounce]
]); ]);
export const types = [ export const types = [
['Ease In', 'In'], ['Ease In', 'In'],
['Ease Out', 'Out'], ['Ease Out', 'Out'],
['Ease In Out', 'InOut'], ['Ease In Out', 'InOut']
]; ];
export { sorted_eases as eases }; export { sorted_eases as eases };

2
site/content/examples/12-svg/03-area-chart/data.js
Unescape View File

@ -41,5 +41,5 @@ export default [
{ x: 2018, y: 4.79 }, { x: 2018, y: 4.79 },
{ x: 2019, y: 4.36 }, { x: 2019, y: 4.36 },
{ x: 2020, y: 4 }, { x: 2020, y: 4 },
{ x: 2021, y: 4.92 }, { x: 2021, y: 4.92 }
]; ];

10
site/content/examples/12-svg/04-scatterplot/data.js
Unescape View File

@ -10,7 +10,7 @@ export default {
{ x: 4, y: 4.26 }, { x: 4, y: 4.26 },
{ x: 12, y: 10.84 }, { x: 12, y: 10.84 },
{ x: 7, y: 4.82 }, { x: 7, y: 4.82 },
{ x: 5, y: 5.68 }, { x: 5, y: 5.68 }
], ],
b: [ b: [
{ x: 10, y: 9.14 }, { x: 10, y: 9.14 },
@ -23,7 +23,7 @@ export default {
{ x: 4, y: 3.1 }, { x: 4, y: 3.1 },
{ x: 12, y: 9.13 }, { x: 12, y: 9.13 },
{ x: 7, y: 7.26 }, { x: 7, y: 7.26 },
{ x: 5, y: 4.74 }, { x: 5, y: 4.74 }
], ],
c: [ c: [
{ x: 10, y: 7.46 }, { x: 10, y: 7.46 },
@ -36,7 +36,7 @@ export default {
{ x: 4, y: 5.39 }, { x: 4, y: 5.39 },
{ x: 12, y: 8.15 }, { x: 12, y: 8.15 },
{ x: 7, y: 6.42 }, { x: 7, y: 6.42 },
{ x: 5, y: 5.73 }, { x: 5, y: 5.73 }
], ],
d: [ d: [
{ x: 8, y: 6.58 }, { x: 8, y: 6.58 },
@ -49,6 +49,6 @@ export default {
{ x: 19, y: 12.5 }, { x: 19, y: 12.5 },
{ x: 8, y: 5.56 }, { x: 8, y: 5.56 },
{ x: 8, y: 7.91 }, { x: 8, y: 7.91 },
{ x: 8, y: 6.89 }, { x: 8, y: 6.89 }
], ]
}; };

2
site/content/examples/12-svg/05-svg-transitions/custom-transitions.js
Unescape View File

@ -9,6 +9,6 @@ export function expand(node, params) {
delay, delay,
duration, duration,
easing, easing,
css: (t) => `opacity: ${t}; stroke-width: ${t * w}`, css: (t) => `opacity: ${t}; stroke-width: ${t * w}`
}; };
} }

2
site/content/examples/13-actions/00-actions/click_outside.js
Unescape View File

@ -10,6 +10,6 @@ export function clickOutside(node) {
return { return {
destroy() { destroy() {
document.removeEventListener('click', handleClick, true); document.removeEventListener('click', handleClick, true);
}, }
}; };
} }

2
site/content/examples/13-actions/01-adding-parameters-to-actions/longpress.js
Unescape View File

@ -21,6 +21,6 @@ export function longpress(node, duration) {
destroy() { destroy() {
node.removeEventListener('mousedown', handleMousedown); node.removeEventListener('mousedown', handleMousedown);
node.removeEventListener('mouseup', handleMouseup); node.removeEventListener('mouseup', handleMouseup);
}, }
}; };
} }

8
site/content/examples/13-actions/03-actions-pannable/pannable.js
Unescape View File

@ -8,7 +8,7 @@ export function pannable(node) {
node.dispatchEvent( node.dispatchEvent(
new CustomEvent('panstart', { new CustomEvent('panstart', {
detail: { x, y }, detail: { x, y }
}) })
); );
@ -24,7 +24,7 @@ export function pannable(node) {
node.dispatchEvent( node.dispatchEvent(
new CustomEvent('panmove', { new CustomEvent('panmove', {
detail: { x, y, dx, dy }, detail: { x, y, dx, dy }
}) })
); );
} }
@ -35,7 +35,7 @@ export function pannable(node) {
node.dispatchEvent( node.dispatchEvent(
new CustomEvent('panend', { new CustomEvent('panend', {
detail: { x, y }, detail: { x, y }
}) })
); );
@ -48,6 +48,6 @@ export function pannable(node) {
return { return {
destroy() { destroy() {
node.removeEventListener('mousedown', handleMousedown); node.removeEventListener('mousedown', handleMousedown);
}, }
}; };
} }

8
site/content/tutorial/01-introduction/03-dynamic-attributes/text.md
Unescape View File

@ -6,8 +6,9 @@ You can use curly braces to control element attributes, just like you use them t
Our image is missing a `src` attribute — let's add one: Our image is missing a `src` attribute — let's add one:
<!-- prettier-ignore -->
```svelte ```svelte
<img src={src}> <img src={src} />
``` ```
That's better. But Svelte is giving us a warning: That's better. But Svelte is giving us a warning:
@ -18,8 +19,9 @@ When building web apps, it's important to make sure that they're _accessible_ to
In this case, we're missing the `alt` attribute that describes the image for people using screenreaders, or people with slow or flaky internet connections that can't download the image. Let's add one: In this case, we're missing the `alt` attribute that describes the image for people using screenreaders, or people with slow or flaky internet connections that can't download the image. Let's add one:
<!-- prettier-ignore -->
```svelte ```svelte
<img src={src} alt="A man dances."> <img src={src} alt="A man dances." />
``` ```
We can use curly braces _inside_ attributes. Try changing it to `"{name} dances."` — remember to declare a `name` variable in the `<script>` block. We can use curly braces _inside_ attributes. Try changing it to `"{name} dances."` — remember to declare a `name` variable in the `<script>` block.
@ -29,5 +31,5 @@ We can use curly braces _inside_ attributes. Try changing it to `"{name} dances.
It's not uncommon to have an attribute where the name and value are the same, like `src={src}`. Svelte gives us a convenient shorthand for these cases: It's not uncommon to have an attribute where the name and value are the same, like `src={src}`. Svelte gives us a convenient shorthand for these cases:
```svelte ```svelte
<img {src} alt="A man dances."> <img {src} alt="A man dances." />
``` ```

2
site/content/tutorial/01-introduction/05-nested-components/text.md
Unescape View File

@ -20,7 +20,7 @@ Let's add a `<script>` tag to `App.svelte` that imports the file (our component)
```svelte ```svelte
<p>This is a paragraph.</p> <p>This is a paragraph.</p>
<Nested/> <Nested />
``` ```
Notice that even though `Nested.svelte` has a `<p>` element, the styles from `App.svelte` don't leak in. Notice that even though `Nested.svelte` has a `<p>` element, the styles from `App.svelte` don't leak in.

4
site/content/tutorial/01-introduction/06-making-an-app/text.md
Unescape View File

@ -29,8 +29,8 @@ const app = new App({
target: document.body, target: document.body,
props: { props: {
// we'll learn about props later // we'll learn about props later
answer: 42, answer: 42
}, }
}); });
``` ```

4
site/content/tutorial/03-props/02-default-values/text.md
Unescape View File

@ -13,6 +13,6 @@ We can easily specify default values for props in `Nested.svelte`:
If we now add a second component _without_ an `answer` prop, it will fall back to the default: If we now add a second component _without_ an `answer` prop, it will fall back to the default:
```svelte ```svelte
<Nested answer={42}/> <Nested answer={42} />
<Nested/> <Nested />
``` ```

2
site/content/tutorial/03-props/03-spread-props/text.md
Unescape View File

@ -5,7 +5,7 @@ title: Spread props
If you have an object of properties, you can 'spread' them onto a component instead of specifying each one: If you have an object of properties, you can 'spread' them onto a component instead of specifying each one:
```svelte ```svelte
<Info {...pkg}/> <Info {...pkg} />
``` ```
> Conversely, if you need to reference all the props that were passed into a component, including ones that weren't declared with `export`, you can do so by accessing `$$props` directly. It's not generally recommended, as it's difficult for Svelte to optimise, but it's useful in rare cases. > Conversely, if you need to reference all the props that were passed into a component, including ones that weren't declared with `export`, you can do so by accessing `$$props` directly. It's not generally recommended, as it's difficult for Svelte to optimise, but it's useful in rare cases.

8
site/content/tutorial/04-logic/01-if-blocks/text.md
Unescape View File

@ -8,15 +8,11 @@ To conditionally render some markup, we wrap it in an `if` block:
```svelte ```svelte
{#if user.loggedIn} {#if user.loggedIn}
<button on:click={toggle}> <button on:click={toggle}> Log out </button>
Log out
</button>
{/if} {/if}
{#if !user.loggedIn} {#if !user.loggedIn}
<button on:click={toggle}> <button on:click={toggle}> Log in </button>
Log in
</button>
{/if} {/if}
``` ```

8
site/content/tutorial/04-logic/02-else-blocks/text.md
Unescape View File

@ -6,13 +6,9 @@ Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are
```svelte ```svelte
{#if user.loggedIn} {#if user.loggedIn}
<button on:click={toggle}> <button on:click={toggle}> Log out </button>
Log out
</button>
{:else} {:else}
<button on:click={toggle}> <button on:click={toggle}> Log in </button>
Log in
</button>
{/if} {/if}
``` ```

16
site/content/tutorial/04-logic/04-each-blocks/text.md
Unescape View File

@ -7,9 +7,11 @@ If you need to loop over lists of data, use an `each` block:
```svelte ```svelte
<ul> <ul>
{#each cats as cat} {#each cats as cat}
<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}" rel="noreferrer"> <li>
{cat.name} <a target="_blank" href="https://www.youtube.com/watch?v={cat.id}" rel="noreferrer">
</a></li> {cat.name}
</a>
</li>
{/each} {/each}
</ul> </ul>
``` ```
@ -20,9 +22,11 @@ You can get the current _index_ as a second argument, like so:
```svelte ```svelte
{#each cats as cat, i} {#each cats as cat, i}
<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}" rel="noreferrer"> <li>
{i + 1}: {cat.name} <a target="_blank" href="https://www.youtube.com/watch?v={cat.id}" rel="noreferrer">
</a></li> {i + 1}: {cat.name}
</a>
</li>
{/each} {/each}
``` ```

2
site/content/tutorial/04-logic/05-keyed-each-blocks/text.md
Unescape View File

@ -12,7 +12,7 @@ To do that, we specify a unique identifier (or "key") for the `each` block:
```svelte ```svelte
{#each things as thing (thing.id)} {#each things as thing (thing.id)}
<Thing name={thing.name}/> <Thing name={thing.name} />
{/each} {/each}
``` ```

2
site/content/tutorial/05-events/02-inline-handlers/text.md
Unescape View File

@ -5,7 +5,7 @@ title: Inline handlers
You can also declare event handlers inline: You can also declare event handlers inline:
```svelte ```svelte
<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} The mouse position is {m.x} x {m.y}
</div> </div>
``` ```

6
site/content/tutorial/05-events/03-event-modifiers/text.md
Unescape View File

@ -7,13 +7,11 @@ DOM event handlers can have _modifiers_ that alter their behaviour. For example,
```svelte ```svelte
<script> <script>
function handleClick() { function handleClick() {
alert('no more alerts') alert('no more alerts');
} }
</script> </script>
<button on:click|once={handleClick}> <button on:click|once={handleClick}> Click me </button>
Click me
</button>
``` ```
The full list of modifiers: The full list of modifiers:

4
site/content/tutorial/05-events/05-event-forwarding/text.md
Unescape View File

@ -20,7 +20,7 @@ One way we could solve the problem is adding `createEventDispatcher` to `Outer.s
} }
</script> </script>
<Inner on:message={forward}/> <Inner on:message={forward} />
``` ```
But that's a lot of code to write, so Svelte gives us an equivalent shorthand — an `on:message` event directive without a value means 'forward all `message` events'. But that's a lot of code to write, so Svelte gives us an equivalent shorthand — an `on:message` event directive without a value means 'forward all `message` events'.
@ -30,5 +30,5 @@ But that's a lot of code to write, so Svelte gives us an equivalent shorthand
import Inner from './Inner.svelte'; import Inner from './Inner.svelte';
</script> </script>
<Inner on:message/> <Inner on:message />
``` ```

4
site/content/tutorial/05-events/06-dom-event-forwarding/text.md
Unescape View File

@ -7,7 +7,5 @@ Event forwarding works for DOM events too.
We want to get notified of clicks on our `<CustomButton>` — to do that, we just need to forward `click` events on the `<button>` element in `CustomButton.svelte`: We want to get notified of clicks on our `<CustomButton>` — to do that, we just need to forward `click` events on the `<button>` element in `CustomButton.svelte`:
```svelte ```svelte
<button on:click> <button on:click> Click me </button>
Click me
</button>
``` ```

2
site/content/tutorial/06-bindings/01-text-inputs/text.md
Unescape View File

@ -9,7 +9,7 @@ Sometimes it's useful to break that rule. Take the case of the `<input>` element
Instead, we can use the `bind:value` directive: Instead, we can use the `bind:value` directive:
```svelte ```svelte
<input bind:value={name}> <input bind:value={name} />
``` ```
This means that not only will changes to the value of `name` update the input value, but changes to the input value will update `name`. This means that not only will changes to the value of `name` update the input value, but changes to the input value will update `name`.

4
site/content/tutorial/06-bindings/02-numeric-inputs/text.md
Unescape View File

@ -7,6 +7,6 @@ In the DOM, everything is a string. That's unhelpful when you're dealing with nu
With `bind:value`, Svelte takes care of it for you: With `bind:value`, Svelte takes care of it for you:
```svelte ```svelte
<input type=number bind:value={a} min=0 max=10> <input type="number" bind:value={a} min="0" max="10" />
<input type=range bind:value={a} min=0 max=10> <input type="range" bind:value={a} min="0" max="10" />
``` ```

2
site/content/tutorial/06-bindings/03-checkbox-inputs/text.md
Unescape View File

@ -5,5 +5,5 @@ title: Checkbox inputs
Checkboxes are used for toggling between states. Instead of binding to `input.value`, we bind to `input.checked`: Checkboxes are used for toggling between states. Instead of binding to `input.value`, we bind to `input.checked`:
```svelte ```svelte
<input type=checkbox bind:checked={yes}> <input type="checkbox" bind:checked={yes} />
``` ```

4
site/content/tutorial/06-bindings/04-group-inputs/text.md
Unescape View File

@ -7,7 +7,7 @@ If you have multiple inputs relating to the same value, you can use `bind:group`
Add `bind:group` to each input: Add `bind:group` to each input:
```svelte ```svelte
<input type=radio bind:group={scoops} name="scoops" value={1}> <input type="radio" bind:group={scoops} name="scoops" value={1} />
``` ```
In this case, we could make the code simpler by moving the checkbox inputs into an `each` block. First, add a `menu` variable to the `<script>` block... In this case, we could make the code simpler by moving the checkbox inputs into an `each` block. First, add a `menu` variable to the `<script>` block...
@ -23,7 +23,7 @@ let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
{#each menu as flavour} {#each menu as flavour}
<label> <label>
<input type=checkbox bind:group={flavours} name="flavours" value={flavour}> <input type="checkbox" bind:group={flavours} name="flavours" value={flavour} />
{flavour} {flavour}
</label> </label>
{/each} {/each}

4
site/content/tutorial/06-bindings/05-textarea-inputs/text.md
Unescape View File

@ -5,13 +5,13 @@ title: Textarea inputs
The `<textarea>` element behaves similarly to a text input in Svelte — use `bind:value` to create a two-way binding between the `<textarea>` content and the `value` variable: The `<textarea>` element behaves similarly to a text input in Svelte — use `bind:value` to create a two-way binding between the `<textarea>` content and the `value` variable:
```svelte ```svelte
<textarea bind:value={value}></textarea> <textarea bind:value />
``` ```
In cases like these, where the names match, we can also use a shorthand form: In cases like these, where the names match, we can also use a shorthand form:
```svelte ```svelte
<textarea bind:value></textarea> <textarea bind:value />
``` ```
This applies to all bindings, not just textareas. This applies to all bindings, not just textareas.

6
site/content/tutorial/06-bindings/08-contenteditable-bindings/text.md
Unescape View File

@ -3,6 +3,7 @@ title: Contenteditable bindings
--- ---
Elements with the `contenteditable` attribute support the following bindings: Elements with the `contenteditable` attribute support the following bindings:
- [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) - [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)
- [`innerText`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText) - [`innerText`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText)
- [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
@ -10,8 +11,5 @@ Elements with the `contenteditable` attribute support the following bindings:
There are slight differences between each of these, read more about them [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText). There are slight differences between each of these, read more about them [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText).
```svelte ```svelte
<div <div contenteditable="true" bind:innerHTML={html} />
contenteditable="true"
bind:innerHTML={html}
></div>
``` ```

10
site/content/tutorial/06-bindings/09-each-block-bindings/text.md
Unescape View File

@ -7,15 +7,9 @@ You can even bind to properties inside an `each` block.
```svelte ```svelte
{#each todos as todo} {#each todos as todo}
<div class:done={todo.done}> <div class:done={todo.done}>
<input <input type="checkbox" bind:checked={todo.done} />
type=checkbox
bind:checked={todo.done}
>
<input <input placeholder="What needs to be done?" bind:value={todo.text} />
placeholder="What needs to be done?"
bind:value={todo.text}
>
</div> </div>
{/each} {/each}
``` ```

5
site/content/tutorial/06-bindings/10-media-elements/text.md
Unescape View File

@ -16,8 +16,9 @@ On line 62, add `currentTime={time}`, `duration` and `paused` bindings:
on:mouseup={handleMouseup} on:mouseup={handleMouseup}
bind:currentTime={time} bind:currentTime={time}
bind:duration bind:duration
bind:paused> bind:paused
<track kind="captions"> >
<track kind="captions" />
</video> </video>
``` ```

6
site/content/tutorial/06-bindings/12-bind-this/text.md
Unescape View File

@ -5,11 +5,7 @@ title: This
The readonly `this` binding applies to every element (and component) and allows you to obtain a reference to rendered elements. For example, we can get a reference to a `<canvas>` element: The readonly `this` binding applies to every element (and component) and allows you to obtain a reference to rendered elements. For example, we can get a reference to a `<canvas>` element:
```svelte ```svelte
<canvas <canvas bind:this={canvas} width={32} height={32} />
bind:this={canvas}
width={32}
height={32}
></canvas>
``` ```
Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](/tutorial/onmount). Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](/tutorial/onmount).

2
site/content/tutorial/06-bindings/13-component-bindings/text.md
Unescape View File

@ -5,7 +5,7 @@ title: Component bindings
Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `<Keypad>` component as though it were a form element: Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `<Keypad>` component as though it were a form element:
```svelte ```svelte
<Keypad bind:value={pin} on:submit={handleSubmit}/> <Keypad bind:value={pin} on:submit={handleSubmit} />
``` ```
Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated. Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated.

4
site/content/tutorial/06-bindings/14-component-this/text.md
Unescape View File

@ -15,9 +15,7 @@ Just as you can bind to DOM elements, you can bind to component instances themse
Now we can programmatically interact with this component using `field`. Now we can programmatically interact with this component using `field`.
```svelte ```svelte
<button on:click="{() => field.focus()}"> <button on:click={() => field.focus()}> Focus field </button>
Focus field
</button>
``` ```
> Note that we can't do `{field.focus}` since field is undefined when the button is first rendered and throws an error. > Note that we can't do `{field.focus}` since field is undefined when the button is first rendered and throws an error.

4
site/content/tutorial/07-lifecycle/02-ondestroy/text.md
Unescape View File

@ -11,7 +11,7 @@ For example, we can add a `setInterval` function when our component initialises,
import { onDestroy } from 'svelte'; import { onDestroy } from 'svelte';
let counter = 0; let counter = 0;
const interval = setInterval(() => counter += 1, 1000); const interval = setInterval(() => (counter += 1), 1000);
onDestroy(() => clearInterval(interval)); onDestroy(() => clearInterval(interval));
</script> </script>
@ -38,7 +38,7 @@ export function onInterval(callback, milliseconds) {
import { onInterval } from './utils.js'; import { onInterval } from './utils.js';
let counter = 0; let counter = 0;
onInterval(() => counter += 1, 1000); onInterval(() => (counter += 1), 1000);
</script> </script>
``` ```

2
site/content/tutorial/08-stores/02-auto-subscriptions/text.md
Unescape View File

@ -26,7 +26,7 @@ You now declared `unsubscribe`, but it still needs to be called, for example thr
let countValue; let countValue;
const unsubscribe = count.subscribe(value => { const unsubscribe = count.subscribe((value) => {
countValue = value; countValue = value;
}); });

2
site/content/tutorial/08-stores/05-custom-stores/app-a/stores.js
Unescape View File

@ -7,7 +7,7 @@ function createCount() {
subscribe, subscribe,
increment: () => {}, increment: () => {},
decrement: () => {}, decrement: () => {},
reset: () => {}, reset: () => {}
}; };
} }

2
site/content/tutorial/08-stores/05-custom-stores/app-b/stores.js
Unescape View File

@ -7,7 +7,7 @@ function createCount() {
subscribe, subscribe,
increment: () => update((n) => n + 1), increment: () => update((n) => n + 1),
decrement: () => update((n) => n - 1), decrement: () => update((n) => n - 1),
reset: () => set(0), reset: () => set(0)
}; };
} }

2
site/content/tutorial/08-stores/05-custom-stores/text.md
Unescape View File

@ -14,7 +14,7 @@ function createCount() {
subscribe, subscribe,
increment: () => update((n) => n + 1), increment: () => update((n) => n + 1),
decrement: () => update((n) => n - 1), decrement: () => update((n) => n - 1),
reset: () => set(0), reset: () => set(0)
}; };
} }
``` ```

6
site/content/tutorial/08-stores/06-store-bindings/text.md
Unescape View File

@ -7,7 +7,7 @@ If a store is writable — i.e. it has a `set` method — you can bind to its va
In this example we have a writable store `name` and a derived store `greeting`. Update the `<input>` element: In this example we have a writable store `name` and a derived store `greeting`. Update the `<input>` element:
```svelte ```svelte
<input bind:value={$name}> <input bind:value={$name} />
``` ```
Changing the input value will now update `name` and all its dependents. Changing the input value will now update `name` and all its dependents.
@ -15,9 +15,7 @@ Changing the input value will now update `name` and all its dependents.
We can also assign directly to store values inside a component. Add a `<button>` element: We can also assign directly to store values inside a component. Add a `<button>` element:
```svelte ```svelte
<button on:click="{() => $name += '!'}"> <button on:click={() => ($name += '!')}> Add exclamation mark! </button>
Add exclamation mark!
</button>
``` ```
The `$name += '!'` assignment is equivalent to `name.set($name + '!')`. The `$name += '!'` assignment is equivalent to `name.set($name + '!')`.

4
site/content/tutorial/09-motion/02-spring/text.md
Unescape View File

@ -8,7 +8,7 @@ In this example we have two stores — one representing the circle's coordinates
```svelte ```svelte
<script> <script>
import { spring } from "svelte/motion"; import { spring } from 'svelte/motion';
let coords = spring({ x: 50, y: 50 }); let coords = spring({ x: 50, y: 50 });
let size = spring(10); let size = spring(10);
@ -22,7 +22,7 @@ let coords = spring(
{ x: 50, y: 50 }, { x: 50, y: 50 },
{ {
stiffness: 0.1, stiffness: 0.1,
damping: 0.25, damping: 0.25
} }
); );
``` ```

4
site/content/tutorial/10-transitions/02-adding-parameters-to-transitions/text.md
Unescape View File

@ -14,9 +14,7 @@ Transition functions can accept parameters. Replace the `fade` transition with `
...and apply it to the `<p>` along with some options: ...and apply it to the `<p>` along with some options:
```svelte ```svelte
<p transition:fly="{{ y: 200, duration: 2000 }}"> <p transition:fly={{ y: 200, duration: 2000 }}>Flies in and out</p>
Flies in and out
</p>
``` ```
Note that the transition is _reversible_ — if you toggle the checkbox while the transition is ongoing, it transitions from the current point, rather than the beginning or the end. Note that the transition is _reversible_ — if you toggle the checkbox while the transition is ongoing, it transitions from the current point, rather than the beginning or the end.

4
site/content/tutorial/10-transitions/03-in-and-out/text.md
Unescape View File

@ -11,9 +11,7 @@ import { fade, fly } from 'svelte/transition';
...then replace the `transition` directive with separate `in` and `out` directives: ...then replace the `transition` directive with separate `in` and `out` directives:
```svelte ```svelte
<p in:fly="{{ y: 200, duration: 2000 }}" out:fade> <p in:fly={{ y: 200, duration: 2000 }} out:fade>Flies in, fades out</p>
Flies in, fades out
</p>
``` ```
In this case, the transitions are _not_ reversed. In this case, the transitions are _not_ reversed.

6
site/content/tutorial/10-transitions/04-custom-css-transitions/text.md
Unescape View File

@ -11,7 +11,7 @@ function fade(node, { delay = 0, duration = 400 }) {
return { return {
delay, delay,
duration, duration,
css: (t) => `opacity: ${t * o}`, css: (t) => `opacity: ${t * o}`
}; };
} }
``` ```
@ -58,7 +58,7 @@ We can get a lot more creative though. Let's make something truly gratuitous:
function spin(node, { duration }) { function spin(node, { duration }) {
return { return {
duration, duration,
css: t => { css: (t) => {
const eased = elasticOut(t); const eased = elasticOut(t);
return ` return `
@ -67,7 +67,7 @@ We can get a lot more creative though. Let's make something truly gratuitous:
${Math.trunc(t * 360)}, ${Math.trunc(t * 360)},
${Math.min(100, 1000 - 1000 * t)}%, ${Math.min(100, 1000 - 1000 * t)}%,
${Math.min(50, 500 - 500 * t)}% ${Math.min(50, 500 - 500 * t)}%
);` );`;
} }
}; };
} }

2
site/content/tutorial/10-transitions/05-custom-js-transitions/text.md
Unescape View File

@ -20,7 +20,7 @@ function typewriter(node, { speed = 1 }) {
tick: (t) => { tick: (t) => {
const i = Math.trunc(text.length * t); const i = Math.trunc(text.length * t);
node.textContent = text.slice(0, i); node.textContent = text.slice(0, i);
}, }
}; };
} }
``` ```

10
site/content/tutorial/10-transitions/06-transition-events/text.md
Unescape View File

@ -6,11 +6,11 @@ It can be useful to know when transitions are beginning and ending. Svelte dispa
```svelte ```svelte
<p <p
transition:fly="{{ y: 200, duration: 2000 }}" transition:fly={{ y: 200, duration: 2000 }}
on:introstart="{() => status = 'intro started'}" on:introstart={() => (status = 'intro started')}
on:outrostart="{() => status = 'outro started'}" on:outrostart={() => (status = 'outro started')}
on:introend="{() => status = 'intro ended'}" on:introend={() => (status = 'intro ended')}
on:outroend="{() => status = 'outro ended'}" on:outroend={() => (status = 'outro ended')}
> >
Flies in and out Flies in and out
</p> </p>

2
site/content/tutorial/12-actions/01-actions/app-a/click_outside.js
Unescape View File

@ -4,6 +4,6 @@ export function clickOutside(node) {
return { return {
destroy() { destroy() {
// ...cleanup goes here // ...cleanup goes here
}, }
}; };
} }

2
site/content/tutorial/12-actions/01-actions/app-b/click_outside.js
Unescape View File

@ -10,6 +10,6 @@ export function clickOutside(node) {
return { return {
destroy() { destroy() {
document.removeEventListener('click', handleClick, true); document.removeEventListener('click', handleClick, true);
}, }
}; };
} }

6
site/content/tutorial/12-actions/01-actions/text.md
Unescape View File

@ -18,9 +18,7 @@ import { clickOutside } from './click_outside.js';
...then use it with the element: ...then use it with the element:
```svelte ```svelte
<div class="box" use:clickOutside on:outclick="{() => (showModal = false)}"> <div class="box" use:clickOutside on:outclick={() => (showModal = false)}>Click outside me!</div>
Click outside me!
</div>
``` ```
Open the `click_outside.js` file. Like transition functions, an action function receives a `node` (which is the element that the action is applied to) and some optional parameters, and returns an action object. That object can have a `destroy` function, which is called when the element is unmounted. Open the `click_outside.js` file. Like transition functions, an action function receives a `node` (which is the element that the action is applied to) and some optional parameters, and returns an action object. That object can have a `destroy` function, which is called when the element is unmounted.
@ -40,7 +38,7 @@ export function clickOutside(node) {
return { return {
destroy() { destroy() {
document.removeEventListener('click', handleClick, true); document.removeEventListener('click', handleClick, true);
}, }
}; };
} }
``` ```

2
site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/longpress.js
Unescape View File

@ -19,6 +19,6 @@ export function longpress(node, duration) {
clearTimeout(timer); clearTimeout(timer);
node.removeEventListener('mousedown', handleMousedown); node.removeEventListener('mousedown', handleMousedown);
node.removeEventListener('mouseup', handleMouseup); node.removeEventListener('mouseup', handleMouseup);
}, }
}; };
} }

2
site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/longpress.js
Unescape View File

@ -22,6 +22,6 @@ export function longpress(node, duration) {
clearTimeout(timer); clearTimeout(timer);
node.removeEventListener('mousedown', handleMousedown); node.removeEventListener('mousedown', handleMousedown);
node.removeEventListener('mouseup', handleMouseup); node.removeEventListener('mouseup', handleMouseup);
}, }
}; };
} }

2
site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md
Unescape View File

@ -36,7 +36,7 @@ To change that, we can add an `update` method in `longpress.js`. This will be ca
return { return {
update(newDuration) { update(newDuration) {
duration = newDuration; duration = newDuration;
}, }
// ... // ...
}; };
``` ```

10
site/content/tutorial/13-advanced-styling/01-classes/text.md
Unescape View File

@ -4,19 +4,21 @@ title: The class directive
Like any other attribute, you can specify classes with a JavaScript attribute, seen here: Like any other attribute, you can specify classes with a JavaScript attribute, seen here:
<!-- prettier-ignore -->
```svelte ```svelte
<button <button
class="{current === 'foo' ? 'selected' : ''}" class={current === 'foo' ? 'selected' : ''}
on:click="{() => current = 'foo'}" on:click={() => current = 'foo'}
>foo</button> >foo</button>
``` ```
This is such a common pattern in UI development that Svelte includes a special directive to simplify it: This is such a common pattern in UI development that Svelte includes a special directive to simplify it:
<!-- prettier-ignore -->
```svelte ```svelte
<button <button
class:selected="{current === 'foo'}" class:selected={current === 'foo'}
on:click="{() => current = 'foo'}" on:click={() => current = 'foo'}
>foo</button> >foo</button>
``` ```

1
site/content/tutorial/13-advanced-styling/02-class-shorthand/text.md
Unescape View File

@ -4,6 +4,7 @@ title: Shorthand class directive
Often, the name of the class will be the same as the name of the value it depends on: Often, the name of the class will be the same as the name of the value it depends on:
<!-- prettier-ignore -->
```svelte ```svelte
<div class:big={big}> <div class:big={big}>
<!-- ... --> <!-- ... -->

2
site/content/tutorial/14-composition/01-slots/text.md
Unescape View File

@ -14,7 +14,7 @@ Just like elements can have children...
```svelte ```svelte
<div class="box"> <div class="box">
<slot></slot> <slot />
</div> </div>
``` ```

2
site/content/tutorial/14-composition/02-slot-fallbacks/text.md
Unescape View File

@ -20,5 +20,5 @@ We can now create instances of `<Box>` without any children:
<p>This is a box. It can contain anything.</p> <p>This is a box. It can contain anything.</p>
</Box> </Box>
<Box/> <Box />
``` ```

6
site/content/tutorial/14-composition/03-named-slots/text.md
Unescape View File

@ -32,12 +32,10 @@ Then, add elements with corresponding `slot="..."` attributes inside the `<Conta
```svelte ```svelte
<ContactCard> <ContactCard>
<span slot="name"> <span slot="name"> P. Sherman </span>
P. Sherman
</span>
<span slot="address"> <span slot="address">
42 Wallaby Way<br> 42 Wallaby Way<br />
Sydney Sydney
</span> </span>
</ContactCard> </ContactCard>

2
site/content/tutorial/14-composition/04-optional-slots/text.md
Unescape View File

@ -20,7 +20,7 @@ Next, wrap the `comments` slot and its wrapping `<div>` in an `if` block that ch
{#if $$slots.comments} {#if $$slots.comments}
<div class="discussion"> <div class="discussion">
<h3>Comments</h3> <h3>Comments</h3>
<slot name="comments"></slot> <slot name="comments" />
</div> </div>
{/if} {/if}
``` ```

4
site/content/tutorial/14-composition/05-slot-props/text.md
Unescape View File

@ -6,9 +6,10 @@ In this app, we have a `<Hoverable>` component that tracks whether the mouse is
For this, we use _slot props_. In `Hoverable.svelte`, pass the `hovering` value into the slot: For this, we use _slot props_. In `Hoverable.svelte`, pass the `hovering` value into the slot:
<!-- prettier-ignore -->
```svelte ```svelte
<div on:mouseenter={enter} on:mouseleave={leave}> <div on:mouseenter={enter} on:mouseleave={leave}>
<slot hovering={hovering}></slot> <slot hovering={hovering} />
</div> </div>
``` ```
@ -16,6 +17,7 @@ For this, we use _slot props_. In `Hoverable.svelte`, pass the `hovering` value
Then, to expose `hovering` to the contents of the `<Hoverable>` component, we use the `let` directive: Then, to expose `hovering` to the contents of the `<Hoverable>` component, we use the `let` directive:
<!-- prettier-ignore -->
```svelte ```svelte
<Hoverable let:hovering={hovering}> <Hoverable let:hovering={hovering}>
<div class:active={hovering}> <div class:active={hovering}>

2
site/content/tutorial/15-context/01-context-api/text.md
Unescape View File

@ -15,7 +15,7 @@ import { onDestroy, setContext } from 'svelte';
import { mapbox, key } from './mapbox.js'; import { mapbox, key } from './mapbox.js';
setContext(key, { setContext(key, {
getMap: () => map, getMap: () => map
}); });
``` ```

8
site/content/tutorial/16-special-elements/01-svelte-self/text.md
Unescape View File

@ -8,9 +8,9 @@ It's useful for things like this folder tree view, where folders can contain _ot
```svelte ```svelte
{#if file.files} {#if file.files}
<Folder {...file}/> <Folder {...file} />
{:else} {:else}
<File {...file}/> <File {...file} />
{/if} {/if}
``` ```
@ -18,8 +18,8 @@ It's useful for things like this folder tree view, where folders can contain _ot
```svelte ```svelte
{#if file.files} {#if file.files}
<svelte:self {...file}/> <svelte:self {...file} />
{:else} {:else}
<File {...file}/> <File {...file} />
{/if} {/if}
``` ```

8
site/content/tutorial/16-special-elements/02-svelte-component/text.md
Unescape View File

@ -6,18 +6,18 @@ A component can change its category altogether with `<svelte:component>`. Instea
```svelte ```svelte
{#if selected.color === 'red'} {#if selected.color === 'red'}
<RedThing/> <RedThing />
{:else if selected.color === 'green'} {:else if selected.color === 'green'}
<GreenThing/> <GreenThing />
{:else if selected.color === 'blue'} {:else if selected.color === 'blue'}
<BlueThing/> <BlueThing />
{/if} {/if}
``` ```
...we can have a single dynamic component: ...we can have a single dynamic component:
```svelte ```svelte
<svelte:component this={selected.component}/> <svelte:component this={selected.component} />
``` ```
The `this` value can be any component constructor, or a falsy value — if it's falsy, no component is rendered. The `this` value can be any component constructor, or a falsy value — if it's falsy, no component is rendered.

2
site/content/tutorial/16-special-elements/04-svelte-window/text.md
Unescape View File

@ -7,7 +7,7 @@ Just as you can add event listeners to any DOM element, you can add event listen
On line 11, add the `keydown` listener: On line 11, add the `keydown` listener:
```svelte ```svelte
<svelte:window on:keydown={handleKeydown}/> <svelte:window on:keydown={handleKeydown} />
``` ```
> As with DOM elements, you can add [event modifiers](/tutorial/event-modifiers) like `preventDefault`. > As with DOM elements, you can add [event modifiers](/tutorial/event-modifiers) like `preventDefault`.

2
site/content/tutorial/16-special-elements/05-svelte-window-bindings/text.md
Unescape View File

@ -5,7 +5,7 @@ title: <svelte:window> bindings
We can also bind to certain properties of `window`, such as `scrollY`. Update line 7: We can also bind to certain properties of `window`, such as `scrollY`. Update line 7:
```svelte ```svelte
<svelte:window bind:scrollY={y}/> <svelte:window bind:scrollY={y} />
``` ```
The list of properties you can bind to is as follows: The list of properties you can bind to is as follows:

1
site/content/tutorial/16-special-elements/07-svelte-body/text.md
Unescape View File

@ -6,6 +6,7 @@ Similar to `<svelte:window>` and `<svelte:document>`, the `<svelte:body>` elemen
Add the `mouseenter` and `mouseleave` handlers to the `<svelte:body>` tag: Add the `mouseenter` and `mouseleave` handlers to the `<svelte:body>` tag:
<!-- prettier-ignore -->
```svelte ```svelte
<svelte:body <svelte:body
on:mouseenter={handleMouseenter} on:mouseenter={handleMouseenter}

2
site/content/tutorial/16-special-elements/08-svelte-head/text.md
Unescape View File

@ -6,7 +6,7 @@ The `<svelte:head>` element allows you to insert elements inside the `<head>` of
```svelte ```svelte
<svelte:head> <svelte:head>
<link rel="stylesheet" href="/tutorial/dark-theme.css"> <link rel="stylesheet" href="/tutorial/dark-theme.css" />
</svelte:head> </svelte:head>
``` ```

2
site/content/tutorial/16-special-elements/09-svelte-options/text.md
Unescape View File

@ -11,7 +11,7 @@ We can optimise this by telling the `<Todo>` component to expect _immutable_ dat
Add this to the top of the `Todo.svelte` file: Add this to the top of the `Todo.svelte` file:
```svelte ```svelte
<svelte:options immutable={true}/> <svelte:options immutable={true} />
``` ```
> You can shorten this to `<svelte:options immutable/>` if you prefer. > You can shorten this to `<svelte:options immutable/>` if you prefer.

6
site/content/tutorial/17-module-context/02-module-exports/text.md
Unescape View File

@ -9,7 +9,7 @@ Anything exported from a `context="module"` script block becomes an export from
const elements = new Set(); const elements = new Set();
export function stopAll() { export function stopAll() {
elements.forEach(element => { elements.forEach((element) => {
element.pause(); element.pause();
}); });
} }
@ -27,9 +27,7 @@ Anything exported from a `context="module"` script block becomes an export from
...and use it in an event handler: ...and use it in an event handler:
```svelte ```svelte
<button on:click={stopAll}> <button on:click={stopAll}> stop all audio </button>
stop all audio
</button>
``` ```
> You can't have a default export, because the component _is_ the default export. > You can't have a default export, because the component _is_ the default export.

14
sites/svelte.dev/.eslintrc.cjs
Unescape View File

@ -21,25 +21,25 @@ module.exports = {
'prefer-const': [2, { destructuring: 'all' }], 'prefer-const': [2, { destructuring: 'all' }],
'arrow-spacing': 2, 'arrow-spacing': 2,
'no-inner-declarations': 0, 'no-inner-declarations': 0,
'require-atomic-updates': 0, 'require-atomic-updates': 0
}, },
env: { env: {
es6: true, es6: true,
browser: true, browser: true,
node: true, node: true,
mocha: true, mocha: true
}, },
extends: ['eslint:recommended', 'plugin:import/errors', 'plugin:import/warnings'], extends: ['eslint:recommended', 'plugin:import/errors', 'plugin:import/warnings'],
plugins: ['svelte3'], plugins: ['svelte3'],
overrides: [ overrides: [
{ {
files: ['*.svelte'], files: ['*.svelte'],
processor: 'svelte3/svelte3', processor: 'svelte3/svelte3'
}, }
], ],
parserOptions: { parserOptions: {
ecmaVersion: 9, ecmaVersion: 9,
sourceType: 'module', sourceType: 'module'
}, },
settings: { settings: {
'import/core-modules': ['svelte'], 'import/core-modules': ['svelte'],
@ -49,6 +49,6 @@ module.exports = {
} catch (e) { } catch (e) {
return null; return null;
} }
})(), })()
}, }
}; };

14154
sites/svelte.dev/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

110
sites/svelte.dev/package.json
Unescape View File

@ -1,57 +1,57 @@
{ {
"name": "svelte.dev", "name": "svelte.dev",
"version": "1.0.0", "version": "1.0.0",
"description": "Docs and examples for Svelte", "description": "Docs and examples for Svelte",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "node scripts/update.js && vite dev", "dev": "node scripts/update.js && vite dev",
"build": "node scripts/update.js && vite build", "build": "node scripts/update.js && vite build",
"update": "node scripts/update.js --force=true", "update": "node scripts/update.js --force=true",
"preview": "vite preview", "preview": "vite preview",
"start": "node build", "start": "node build",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json", "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
"format": "npm run check:format -- --write", "format": "npm run check:format -- --write",
"check:format": "prettier --check . --ignore-path .gitignore --plugin-search-dir=.", "check:format": "prettier --check . --ignore-path .gitignore --plugin-search-dir=.",
"test": "uvu -r ts-node/register src/lib/server/markdown" "test": "uvu -r ts-node/register src/lib/server/markdown"
}, },
"dependencies": { "dependencies": {
"@supabase/supabase-js": "^2.12.1", "@supabase/supabase-js": "^2.12.1",
"@sveltejs/repl": "^0.2.0", "@sveltejs/repl": "^0.2.0",
"cookie": "^0.5.0", "cookie": "^0.5.0",
"devalue": "^4.3.0", "devalue": "^4.3.0",
"do-not-zip": "^1.0.0", "do-not-zip": "^1.0.0",
"flexsearch": "^0.7.31", "flexsearch": "^0.7.31",
"flru": "^1.0.2", "flru": "^1.0.2",
"sourcemap-codec": "^1.4.8", "sourcemap-codec": "^1.4.8",
"svelte-local-storage-store": "^0.4.0" "svelte-local-storage-store": "^0.4.0"
}, },
"devDependencies": { "devDependencies": {
"@resvg/resvg-js": "^2.4.1", "@resvg/resvg-js": "^2.4.1",
"@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.14.0", "@sveltejs/kit": "^1.14.0",
"@sveltejs/site-kit": "^3.3.6", "@sveltejs/site-kit": "^3.3.6",
"@sveltejs/vite-plugin-svelte": "^2.0.3", "@sveltejs/vite-plugin-svelte": "^2.0.3",
"@types/marked": "^4.0.8", "@types/marked": "^4.0.8",
"@types/prismjs": "^1.26.0", "@types/prismjs": "^1.26.0",
"degit": "^2.8.4", "degit": "^2.8.4",
"dotenv": "^16.0.3", "dotenv": "^16.0.3",
"jimp": "^0.22.7", "jimp": "^0.22.7",
"marked": "^4.3.0", "marked": "^4.3.0",
"node-fetch": "^3.3.1", "node-fetch": "^3.3.1",
"prettier": "^2.8.7", "prettier": "^2.8.7",
"prettier-plugin-svelte": "^2.10.0", "prettier-plugin-svelte": "^2.10.0",
"prism-svelte": "^0.5.0", "prism-svelte": "^0.5.0",
"prismjs": "^1.29.0", "prismjs": "^1.29.0",
"satori": "^0.4.4", "satori": "^0.4.4",
"satori-html": "^0.3.2", "satori-html": "^0.3.2",
"shelljs": "^0.8.5", "shelljs": "^0.8.5",
"shiki": "^0.14.1", "shiki": "^0.14.1",
"shiki-twoslash": "^3.1.1", "shiki-twoslash": "^3.1.1",
"svelte": "^3.57.0", "svelte": "^3.57.0",
"svelte-check": "^3.1.4", "svelte-check": "^3.1.4",
"typescript": "^5.0.2", "typescript": "^5.0.2",
"vite": "^4.2.1", "vite": "^4.2.1",
"vite-imagetools": "^4.0.18" "vite-imagetools": "^4.0.18"
} }
} }

2
sites/svelte.dev/scripts/update.js
Unescape View File

@ -5,5 +5,5 @@ sh.env['FORCE_UPDATE'] = process.argv.includes('--force=true');
Promise.all([ Promise.all([
sh.exec('node ./scripts/get_contributors.js'), sh.exec('node ./scripts/get_contributors.js'),
sh.exec('node ./scripts/get_donors.js'), sh.exec('node ./scripts/get_donors.js'),
sh.exec('node ./scripts/update_template.js'), sh.exec('node ./scripts/update_template.js')
]); ]);

10
sites/svelte.dev/src/lib/db/gist.js
Unescape View File

@ -10,7 +10,7 @@ export async function list(user, { offset, search }) {
list_search: search || '', list_search: search || '',
list_userid: user.id, list_userid: user.id,
list_count: PAGE_SIZE, list_count: PAGE_SIZE,
list_start: offset, list_start: offset
}); });
if (error) throw new Error(error.message); if (error) throw new Error(error.message);
@ -22,7 +22,7 @@ export async function list(user, { offset, search }) {
return { return {
gists: data.slice(0, PAGE_SIZE), gists: data.slice(0, PAGE_SIZE),
next: data.length > PAGE_SIZE ? offset + PAGE_SIZE : null, next: data.length > PAGE_SIZE ? offset + PAGE_SIZE : null
}; };
} }
@ -35,7 +35,7 @@ export async function create(user, gist) {
const { data, error } = await client.rpc('gist_create', { const { data, error } = await client.rpc('gist_create', {
name: gist.name, name: gist.name,
files: gist.files, files: gist.files,
userid: user.id, userid: user.id
}); });
if (error) { if (error) {
@ -71,7 +71,7 @@ export async function update(user, gistid, gist) {
gist_id: gistid, gist_id: gistid,
gist_name: gist.name, gist_name: gist.name,
gist_files: gist.files, gist_files: gist.files,
gist_userid: user.id, gist_userid: user.id
}); });
if (error) { if (error) {
@ -88,7 +88,7 @@ export async function update(user, gistid, gist) {
export async function destroy(userid, ids) { export async function destroy(userid, ids) {
const { error } = await client.rpc('gist_destroy', { const { error } = await client.rpc('gist_destroy', {
gist_ids: ids, gist_ids: ids,
gist_userid: userid, gist_userid: userid
}); });
if (error) { if (error) {

6
sites/svelte.dev/src/lib/db/session.js
Unescape View File

@ -15,7 +15,7 @@ export async function create(user, access_token) {
user_github_id: user.github_id, user_github_id: user.github_id,
user_github_name: user.github_name, user_github_name: user.github_name,
user_github_login: user.github_login, user_github_login: user.github_login,
user_github_avatar_url: user.github_avatar_url, user_github_avatar_url: user.github_avatar_url
}); });
if (error) { if (error) {
@ -26,12 +26,12 @@ export async function create(user, access_token) {
id: data.userid, id: data.userid,
github_name: user.github_name, github_name: user.github_name,
github_login: user.github_login, github_login: user.github_login,
github_avatar_url: user.github_avatar_url, github_avatar_url: user.github_avatar_url
}); });
return { return {
sessionid: data.sessionid, sessionid: data.sessionid,
expires: new Date(data.expires), expires: new Date(data.expires)
}; };
} }

6
sites/svelte.dev/src/lib/server/blog/index.js
Unescape View File

@ -24,7 +24,7 @@ export function get_index() {
date, date,
title: metadata.title, title: metadata.title,
description: metadata.description, description: metadata.description,
draft: !!metadata.draft, draft: !!metadata.draft
}; };
}); });
} }
@ -50,10 +50,10 @@ export function get_post(slug) {
description: metadata.description, description: metadata.description,
author: { author: {
name: metadata.author, name: metadata.author,
url: metadata.authorURL, url: metadata.authorURL
}, },
draft: !!metadata.draft, draft: !!metadata.draft,
content: transform(body), content: transform(body)
}; };
} }
} }

10
sites/svelte.dev/src/lib/server/blog/marked.js
Unescape View File

@ -14,7 +14,7 @@ const escape_replacements = {
'<': '&lt;', '<': '&lt;',
'>': '&gt;', '>': '&gt;',
'"': '&quot;', '"': '&quot;',
"'": '&#39;', "'": '&#39;'
}; };
const get_escape_replacement = (ch) => escape_replacements[ch]; const get_escape_replacement = (ch) => escape_replacements[ch];
@ -45,7 +45,7 @@ const prism_languages = {
css: 'css', css: 'css',
diff: 'diff', diff: 'diff',
ts: 'typescript', ts: 'typescript',
'': '', '': ''
}; };
/** @type {Partial<import('marked').Renderer>} */ /** @type {Partial<import('marked').Renderer>} */
@ -165,7 +165,7 @@ const default_renderer = {
text(text) { text(text) {
return text; return text;
}, }
}; };
/** /**
@ -179,8 +179,8 @@ export function transform(markdown, renderer = {}) {
// options are global, and merged in confusing ways. You can't do e.g. // options are global, and merged in confusing ways. You can't do e.g.
// `new Marked(options).parse(markdown)` // `new Marked(options).parse(markdown)`
...default_renderer, ...default_renderer,
...renderer, ...renderer
}, }
}); });
return marked(markdown); return marked(markdown);

16
sites/svelte.dev/src/lib/server/docs/index.js
Unescape View File

@ -62,7 +62,7 @@ const languages = {
css: 'css', css: 'css',
diff: 'diff', diff: 'diff',
ts: 'typescript', ts: 'typescript',
'': '', '': ''
}; };
/** /**
@ -310,7 +310,7 @@ export async function read_file(file) {
// }) + // }) +
'</code>' '</code>'
); );
}, }
}); });
return { return {
@ -318,7 +318,7 @@ export async function read_file(file) {
slug: match[1], slug: match[1],
title: metadata.title, title: metadata.title,
content, content,
sections, sections
}; };
} }
@ -370,14 +370,14 @@ function parse({ file, body, code, codespan }) {
section = { section = {
title, title,
slug, slug,
sections: [], sections: []
}; };
sections.push(section); sections.push(section);
} else if (level === 4 || level === 5) { } else if (level === 4 || level === 5) {
(section?.sections ?? sections).push({ (section?.sections ?? sections).push({
title, title,
slug, slug
}); });
} else { } else {
throw new Error(`Unexpected <h${level}> in ${file}`); throw new Error(`Unexpected <h${level}> in ${file}`);
@ -388,12 +388,12 @@ function parse({ file, body, code, codespan }) {
} id="${slug}">${html}<a href="#${slug}" class="permalink"><span class="visually-hidden">permalink</span></a></h${level}>`; } id="${slug}">${html}<a href="#${slug}" class="permalink"><span class="visually-hidden">permalink</span></a></h${level}>`;
}, },
code: (source, language) => code(source, language, current), code: (source, language) => code(source, language, current),
codespan, codespan
}); });
return { return {
sections, sections,
content, content
}; };
} }
@ -585,7 +585,7 @@ function convert_to_ts(js_code, indent = '', offset = '') {
name, name,
generics generics
.replaceAll('*', '') // get rid of JSDoc asterisks .replaceAll('*', '') // get rid of JSDoc asterisks
.replace(' }>', '}>'), // unindent closing brace .replace(' }>', '}>') // unindent closing brace
]; ];
} }
} }

8
sites/svelte.dev/src/lib/server/markdown/index.js
Unescape View File

@ -9,7 +9,7 @@ const escapeReplacements = {
'<': '&lt;', '<': '&lt;',
'>': '&gt;', '>': '&gt;',
'"': '&quot;', '"': '&quot;',
"'": '&#39;', "'": '&#39;'
}; };
/** /**
@ -153,7 +153,7 @@ const default_renderer = {
text(text) { text(text) {
return text; return text;
}, }
}; };
/** /**
@ -167,8 +167,8 @@ export function transform(markdown, renderer = {}) {
// options are global, and merged in confusing ways. You can't do e.g. // options are global, and merged in confusing ways. You can't do e.g.
// `new Marked(options).parse(markdown)` // `new Marked(options).parse(markdown)`
...default_renderer, ...default_renderer,
...renderer, ...renderer
}, }
}); });
return marked(markdown); return marked(markdown);

2
sites/svelte.dev/src/lib/time.js
Unescape View File

@ -7,7 +7,7 @@ const o = {
day: 24 * 60 * 1000 * 60, day: 24 * 60 * 1000 * 60,
week: 7 * 24 * 60 * 1000 * 60, week: 7 * 24 * 60 * 1000 * 60,
month: 30 * 24 * 60 * 1000 * 60, month: 30 * 24 * 60 * 1000 * 60,
year: 365 * 24 * 60 * 1000 * 60, year: 365 * 24 * 60 * 1000 * 60
}; };
export const ago = (nd, s) => { export const ago = (nd, s) => {

2
sites/svelte.dev/src/lib/utils/events.js
Unescape View File

@ -11,7 +11,7 @@ export function keyEvent(code) {
return { return {
destroy() { destroy() {
node.removeEventListener('keydown', handleKeydown); node.removeEventListener('keydown', handleKeydown);
}, }
}; };
}; };
} }

2
sites/svelte.dev/src/routes/(authed)/+layout.server.js
Unescape View File

@ -2,6 +2,6 @@ import * as session from '$lib/db/session';
export async function load({ request }) { export async function load({ request }) {
return { return {
user: await session.from_cookie(request.headers.get('cookie')), user: await session.from_cookie(request.headers.get('cookie'))
}; };
} }

6
sites/svelte.dev/src/routes/(authed)/repl/[id].json/+server.js
Unescape View File

@ -47,7 +47,7 @@ export async function GET({ params }) {
if (!res.ok) { if (!res.ok) {
return new Response(await res.json(), { return new Response(await res.json(), {
status: res.status, status: res.status,
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' }
}); });
} }
@ -58,7 +58,7 @@ export async function GET({ params }) {
name: example.name, name: example.name,
owner: null, owner: null,
relaxed: example.relaxed, // TODO is this right? relaxed: example.relaxed, // TODO is this right?
components: munge(example.files), components: munge(example.files)
}); });
} }
@ -83,7 +83,7 @@ export async function GET({ params }) {
name: app.name, name: app.name,
owner: app.userid, owner: app.userid,
relaxed: false, relaxed: false,
components: munge(app.files), components: munge(app.files)
}); });
} }

2
sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.js
Unescape View File

@ -11,6 +11,6 @@ export async function load({ fetch, params, url }) {
return { return {
gist, gist,
version: url.searchParams.get('version') || '3', version: url.searchParams.get('version') || '3'
}; };
} }

2
sites/svelte.dev/src/routes/(authed)/repl/create.json/+server.js
Unescape View File

@ -14,6 +14,6 @@ export async function POST({ request }) {
result.id = result.id.replace(/-/g, ''); result.id = result.id.replace(/-/g, '');
return json(result, { return json(result, {
status: 201, status: 201
}); });
} }

2
sites/svelte.dev/src/routes/(authed)/repl/embed/+page.js
Unescape View File

@ -3,6 +3,6 @@ export function load({ url }) {
return { return {
version: query.get('version') || '3', version: query.get('version') || '3',
gist: query.get('gist'), gist: query.get('gist'),
example: query.get('example'), example: query.get('example')
}; };
} }

2
sites/svelte.dev/src/routes/(authed)/repl/local/[...path]/+server.js
Unescape View File

@ -9,6 +9,6 @@ export function GET({ params: { path } }) {
return new Response(undefined, { status: 403 }); return new Response(undefined, { status: 403 });
} }
return new Response(readFileSync(join(local_svelte_path, path)), { return new Response(readFileSync(join(local_svelte_path, path)), {
headers: { 'Content-Type': 'text/javascript' }, headers: { 'Content-Type': 'text/javascript' }
}); });
} }

30
sites/svelte.dev/src/routes/_components/WhosUsingSvelte/companies.js
Unescape View File

@ -4,7 +4,7 @@ export const companies = [
filename: '1password.svg', filename: '1password.svg',
alt: '1Password logo', alt: '1Password logo',
width: 364, width: 364,
height: 68, height: 68
}, },
{ {
href: 'https://www.alaskaair.com/', href: 'https://www.alaskaair.com/',
@ -13,14 +13,14 @@ export const companies = [
alt: 'Alaska Airlines logo', alt: 'Alaska Airlines logo',
invert: true, invert: true,
width: 113, width: 113,
height: 48, height: 48
}, },
{ {
href: 'https://avast.com', href: 'https://avast.com',
filename: 'avast.svg', filename: 'avast.svg',
alt: 'Avast logo', alt: 'Avast logo',
width: 300, width: 300,
height: 95, height: 95
}, },
{ {
href: 'https://chess.com', href: 'https://chess.com',
@ -29,56 +29,56 @@ export const companies = [
alt: 'Chess.com logo', alt: 'Chess.com logo',
invert: true, invert: true,
width: 300, width: 300,
height: 85, height: 85
}, },
{ {
href: 'https://fusioncharts.com', href: 'https://fusioncharts.com',
filename: 'fusioncharts.svg', filename: 'fusioncharts.svg',
alt: 'FusionCharts logo', alt: 'FusionCharts logo',
width: 735, width: 735,
height: 115, height: 115
}, },
{ {
href: 'https://godaddy.com', href: 'https://godaddy.com',
filename: 'godaddy.svg', filename: 'godaddy.svg',
alt: 'GoDaddy logo', alt: 'GoDaddy logo',
width: 300, width: 300,
height: 84, height: 84
}, },
{ {
href: 'https://www.ibm.com/', href: 'https://www.ibm.com/',
filename: 'ibm.svg', filename: 'ibm.svg',
alt: 'IBM logo', alt: 'IBM logo',
width: 1000, width: 1000,
height: 400, height: 400
}, },
{ {
href: 'https://media.lesechos.fr/infographie', href: 'https://media.lesechos.fr/infographie',
filename: 'les-echos.svg', filename: 'les-echos.svg',
alt: 'Les Echos', alt: 'Les Echos',
width: 142, width: 142,
height: 33, height: 33
}, },
{ {
href: 'https://www.philips.co.uk', href: 'https://www.philips.co.uk',
filename: 'philips.svg', filename: 'philips.svg',
alt: 'Philips logo', alt: 'Philips logo',
width: 140, width: 140,
height: 30, height: 30
}, },
{ {
href: 'https://global.rakuten.com/corp/', href: 'https://global.rakuten.com/corp/',
filename: 'rakuten.svg', filename: 'rakuten.svg',
alt: 'Rakuten logo', alt: 'Rakuten logo',
width: 300, width: 300,
height: 89, height: 89
}, },
{ {
href: 'https://razorpay.com', href: 'https://razorpay.com',
filename: 'razorpay.svg', filename: 'razorpay.svg',
alt: 'Razorpay logo', alt: 'Razorpay logo',
width: 316, width: 316,
height: 67, height: 67
}, },
// { // {
// href: 'https://www.se.com', // href: 'https://www.se.com',
@ -92,20 +92,20 @@ export const companies = [
filename: 'square.svg', filename: 'square.svg',
alt: 'Square', alt: 'Square',
width: 144, width: 144,
height: 36, height: 36
}, },
{ {
href: 'https://nytimes.com', href: 'https://nytimes.com',
filename: 'nyt.svg', filename: 'nyt.svg',
alt: 'The New York Times logo', alt: 'The New York Times logo',
width: 300, width: 300,
height: 49, height: 49
}, },
{ {
href: 'https://transloadit.com', href: 'https://transloadit.com',
filename: 'transloadit.svg', filename: 'transloadit.svg',
alt: 'Transloadit', alt: 'Transloadit',
width: 239, width: 239,
height: 60, height: 60
}, }
]; ];

14
sites/svelte.dev/src/routes/auth/callback/+server.js
Unescape View File

@ -12,7 +12,7 @@ export async function GET({ url }) {
stringify({ stringify({
code: url.searchParams.get('code'), code: url.searchParams.get('code'),
client_id, client_id,
client_secret, client_secret
}) })
); );
const access_token = new URLSearchParams(await r1.text()).get('access_token'); const access_token = new URLSearchParams(await r1.text()).get('access_token');
@ -21,8 +21,8 @@ export async function GET({ url }) {
const r2 = await fetch('https://api.github.com/user', { const r2 = await fetch('https://api.github.com/user', {
headers: { headers: {
'User-Agent': 'svelte.dev', 'User-Agent': 'svelte.dev',
Authorization: `token ${access_token}`, Authorization: `token ${access_token}`
}, }
}); });
const profile = await r2.json(); const profile = await r2.json();
@ -33,7 +33,7 @@ export async function GET({ url }) {
github_id: profile.id, github_id: profile.id,
github_name: profile.name, github_name: profile.name,
github_login: profile.login, github_login: profile.login,
github_avatar_url: profile.avatar_url, github_avatar_url: profile.avatar_url
}; };
const { sessionid, expires } = await session.create(user, access_token); const { sessionid, expires } = await session.create(user, access_token);
@ -52,10 +52,10 @@ export async function GET({ url }) {
expires: new Date(expires), expires: new Date(expires),
path: '/', path: '/',
httpOnly: true, httpOnly: true,
secure: url.protocol === 'https', secure: url.protocol === 'https'
}), }),
'Content-Type': 'text/html; charset=utf-8', 'Content-Type': 'text/html; charset=utf-8'
}, }
} }
); );
} catch (err) { } catch (err) {

6
sites/svelte.dev/src/routes/auth/login/+server.js
Unescape View File

@ -9,7 +9,7 @@ export const GET = client_id
stringify({ stringify({
scope: 'read:user', scope: 'read:user',
client_id, client_id,
redirect_uri: `${url.origin}/auth/callback`, redirect_uri: `${url.origin}/auth/callback`
}); });
throw redirect(302, Location); throw redirect(302, Location);
@ -28,7 +28,7 @@ export const GET = client_id
{ {
status: 500, status: 500,
headers: { headers: {
'Content-Type': 'text/html; charset=utf-8', 'Content-Type': 'text/html; charset=utf-8'
}, }
} }
); );

6
sites/svelte.dev/src/routes/auth/logout/+server.js
Unescape View File

@ -11,8 +11,8 @@ export async function GET({ request }) {
maxAge: -1, maxAge: -1,
path: '/', path: '/',
httpOnly: true, httpOnly: true,
secure: request.url.protocol === 'https', secure: request.url.protocol === 'https'
}), })
}, }
}); });
} }

2
sites/svelte.dev/src/routes/blog/+page.server.js
Unescape View File

@ -4,6 +4,6 @@ export const prerender = true;
export async function load() { export async function load() {
return { return {
posts: get_index(), posts: get_index()
}; };
} }

Some files were not shown because too many files have changed in this diff Show More

Write Preview
Loading…
Cancel
Save