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,
"printWidth": 100,
"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",
"mocha": "^7.0.0",
"periscopic": "^3.1.0",
"prettier-plugin-svelte": "^2.10.0",
"puppeteer": "^2.0.0",
"rollup": "^1.27.14",
"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
export default {
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
export default {
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
// whenever the DOM has been updated
// following a state change
},
}
};
```
@ -138,8 +138,8 @@ import { observe } from 'svelte-extras';
export default {
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:
```svelte
<Counter start="{1}" />
<Counter start={1} />
```
## 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
const { count } = this.get();
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
const { count } = this.state;
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
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher<{
/**
* you can also add docs
*/
checked: boolean; // Will translate to `CustomEvent<boolean>`
hello: string;
}>();
const dispatch = createEventDispatcher<{
/**
* you can also add docs
*/
checked: boolean; // Will translate to `CustomEvent<boolean>`
hello: string;
}>();
// ...
// ...
</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) {
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
<!-- src/routes/blog/[slug]/+page.svelte -->
<script lang="ts">
import type { PageData } from './$types';
import type { PageData } from './$types';
export let data: PageData;
export let data: PageData;
</script>
<h1>{data.post.title}</h1>
<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`).
```svelte
<input required="{false}" placeholder="This input field is not required" />
<div title="{null}">This div has no title attribute</div>
<input required={false} placeholder="This input field is not required" />
<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
const size = tweened(undefined, {
duration: 300,
easing: cubicOut,
easing: cubicOut
});
$: $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 { tweened } from 'svelte/motion';
const colors = [
'rgb(255, 62, 0)',
'rgb(64, 179, 255)',
'rgb(103, 103, 120)'
];
const colors = ['rgb(255, 62, 0)', 'rgb(64, 179, 255)', 'rgb(103, 103, 120)'];
const color = tweened(colors[0], {
duration: 800,
@ -568,11 +564,8 @@ The `interpolate` option allows you to tween between _any_ arbitrary values. It
</script>
{#each colors as c}
<button
style="background-color: {c}; color: white; border: none;"
on:click={e => color.set(c)}
>
{c}
<button style="background-color: {c}; color: white; border: none;" on:click={(e) => color.set(c)}>
{c}
</button>
{/each}
@ -1004,7 +997,7 @@ To set compile options, or to use a custom file extension, call the `register` h
```js
require('svelte/register')({
extensions: ['.customextension'], // defaults to ['.html', '.svelte']
preserveComments: true,
preserveComments: true
});
```
@ -1026,8 +1019,8 @@ const app = new App({
props: {
// assuming App.svelte contains something like
// `export let answer`:
answer: 42,
},
answer: 42
}
});
```
@ -1057,7 +1050,7 @@ import App from './App.svelte';
const app = new App({
target: document.querySelector('#server-rendered-html'),
hydrate: true,
hydrate: true
});
```
@ -1210,7 +1203,7 @@ require('svelte/register');
const App = require('./App.svelte').default;
const { head, html, css } = App.render({
answer: 42,
answer: 42
});
```
@ -1235,7 +1228,7 @@ const { head, html, css } = App.render(
{ answer: 42 },
// 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 });
return {
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,
data: content,
includePaths: [dirname(filename)],
includePaths: [dirname(filename)]
},
(err, result) => {
if (err) reject(err);
@ -275,12 +275,12 @@ const { code, dependencies } = await svelte.preprocess(
return {
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: () => {
console.log('this runs fifth');
},
}
},
{
markup: () => {
@ -315,11 +315,11 @@ const { code } = await svelte.preprocess(
},
style: () => {
console.log('this runs sixth');
},
},
}
}
],
{
filename: 'App.svelte',
filename: 'App.svelte'
}
);
```
@ -350,7 +350,7 @@ svelte.walk(ast, {
},
leave(node, parent, prop, index) {
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,
increment: () => 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 = {
name: 'CC BY 2.0',
url: 'https://creativecommons.org/licenses/by/2.0/',
url: 'https://creativecommons.org/licenses/by/2.0/'
};
const BY_SA = {
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 = {
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
@ -20,83 +20,83 @@ export default [
id: '1',
alt: 'Crepuscular rays',
path: '43428526@N03/7863279376',
license: BY,
license: BY
},
{
color: '#0074D9',
id: '2',
alt: 'Lapland winter scene',
path: '25507134@N00/6527537485',
license: BY,
license: BY
},
{
color: '#7FDBFF',
id: '3',
alt: 'Jellyfish',
path: '37707866@N00/3354331318',
license: BY,
license: BY
},
{
color: '#39CCCC',
id: '4',
alt: 'A man scuba diving',
path: '32751486@N00/4608886209',
license: BY_SA,
license: BY_SA
},
{
color: '#3D9970',
id: '5',
alt: 'Underwater scene',
path: '25483059@N08/5548569010',
license: BY,
license: BY
},
{
color: '#2ECC40',
id: '6',
alt: 'Ferns',
path: '8404611@N06/2447470760',
license: BY,
license: BY
},
{
color: '#01FF70',
id: '7',
alt: 'Posters in a bar',
path: '33917831@N00/114428206',
license: BY_SA,
license: BY_SA
},
{
color: '#FFDC00',
id: '8',
alt: 'Daffodil',
path: '46417125@N04/4818617089',
license: BY_ND,
license: BY_ND
},
{
color: '#FF851B',
id: '9',
alt: 'Dust storm in Sydney',
path: '56068058@N00/3945496657',
license: BY,
license: BY
},
{
color: '#FF4136',
id: '10',
alt: 'Postbox',
path: '31883499@N05/4216820032',
license: BY,
license: BY
},
{
color: '#85144b',
id: '11',
alt: 'Fireworks',
path: '8484971@N07/2625506561',
license: BY_ND,
license: BY_ND
},
{
color: '#B10DC9',
id: '12',
alt: 'The Stereophonics',
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],
['back', processed_eases.back],
['elastic', processed_eases.elastic],
['bounce', processed_eases.bounce],
['bounce', processed_eases.bounce]
]);
export const types = [
['Ease In', 'In'],
['Ease Out', 'Out'],
['Ease In Out', 'InOut'],
['Ease In Out', 'InOut']
];
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: 2019, y: 4.36 },
{ 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: 12, y: 10.84 },
{ x: 7, y: 4.82 },
{ x: 5, y: 5.68 },
{ x: 5, y: 5.68 }
],
b: [
{ x: 10, y: 9.14 },
@ -23,7 +23,7 @@ export default {
{ x: 4, y: 3.1 },
{ x: 12, y: 9.13 },
{ x: 7, y: 7.26 },
{ x: 5, y: 4.74 },
{ x: 5, y: 4.74 }
],
c: [
{ x: 10, y: 7.46 },
@ -36,7 +36,7 @@ export default {
{ x: 4, y: 5.39 },
{ x: 12, y: 8.15 },
{ x: 7, y: 6.42 },
{ x: 5, y: 5.73 },
{ x: 5, y: 5.73 }
],
d: [
{ x: 8, y: 6.58 },
@ -49,6 +49,6 @@ export default {
{ x: 19, y: 12.5 },
{ x: 8, y: 5.56 },
{ 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,
duration,
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 {
destroy() {
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() {
node.removeEventListener('mousedown', handleMousedown);
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(
new CustomEvent('panstart', {
detail: { x, y },
detail: { x, y }
})
);
@ -24,7 +24,7 @@ export function pannable(node) {
node.dispatchEvent(
new CustomEvent('panmove', {
detail: { x, y, dx, dy },
detail: { x, y, dx, dy }
})
);
}
@ -35,7 +35,7 @@ export function pannable(node) {
node.dispatchEvent(
new CustomEvent('panend', {
detail: { x, y },
detail: { x, y }
})
);
@ -48,6 +48,6 @@ export function pannable(node) {
return {
destroy() {
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:
<!-- prettier-ignore -->
```svelte
<img src={src}>
<img src={src} />
```
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:
<!-- prettier-ignore -->
```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.
@ -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:
```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
<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.

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,
props: {
// 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:
```svelte
<Nested answer={42}/>
<Nested/>
<Nested answer={42} />
<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:
```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.

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
{#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>
<button on:click={toggle}> Log in </button>
{/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
{#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>
<button on:click={toggle}> Log in </button>
{/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
<ul>
{#each cats as cat}
<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}" rel="noreferrer">
{cat.name}
</a></li>
<li>
<a target="_blank" href="https://www.youtube.com/watch?v={cat.id}" rel="noreferrer">
{cat.name}
</a>
</li>
{/each}
</ul>
```
@ -20,9 +22,11 @@ You can get the current _index_ as a second argument, like so:
```svelte
{#each cats as cat, i}
<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}" rel="noreferrer">
{i + 1}: {cat.name}
</a></li>
<li>
<a target="_blank" href="https://www.youtube.com/watch?v={cat.id}" rel="noreferrer">
{i + 1}: {cat.name}
</a>
</li>
{/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
{#each things as thing (thing.id)}
<Thing name={thing.name}/>
<Thing name={thing.name} />
{/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:
```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}
</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
<script>
function handleClick() {
alert('no more alerts')
alert('no more alerts');
}
</script>
<button on:click|once={handleClick}>
Click me
</button>
<button on:click|once={handleClick}> Click me </button>
```
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>
<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'.
@ -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';
</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`:
```svelte
<button on:click>
Click me
</button>
<button on:click> 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:
```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`.

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:
```svelte
<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" />
```

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`:
```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:
```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...
@ -23,7 +23,7 @@ let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
{#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}

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:
```svelte
<textarea bind:value={value}></textarea>
<textarea bind:value />
```
In cases like these, where the names match, we can also use a shorthand form:
```svelte
<textarea bind:value></textarea>
<textarea bind:value />
```
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:
- [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)
- [`innerText`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText)
- [`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).
```svelte
<div
contenteditable="true"
bind:innerHTML={html}
></div>
<div contenteditable="true" bind:innerHTML={html} />
```

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
{#each todos as todo}
<div class:done={todo.done}>
<input
type=checkbox
bind:checked={todo.done}
>
<input type="checkbox" bind:checked={todo.done} />
<input
placeholder="What needs to be done?"
bind:value={todo.text}
>
<input placeholder="What needs to be done?" bind:value={todo.text} />
</div>
{/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}
bind:currentTime={time}
bind:duration
bind:paused>
<track kind="captions">
bind:paused
>
<track kind="captions" />
</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:
```svelte
<canvas
bind:this={canvas}
width={32}
height={32}
></canvas>
<canvas bind:this={canvas} width={32} height={32} />
```
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:
```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.

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`.
```svelte
<button on:click="{() => field.focus()}">
Focus field
</button>
<button on:click={() => field.focus()}> 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.

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';
let counter = 0;
const interval = setInterval(() => counter += 1, 1000);
const interval = setInterval(() => (counter += 1), 1000);
onDestroy(() => clearInterval(interval));
</script>
@ -38,7 +38,7 @@ export function onInterval(callback, milliseconds) {
import { onInterval } from './utils.js';
let counter = 0;
onInterval(() => counter += 1, 1000);
onInterval(() => (counter += 1), 1000);
</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;
const unsubscribe = count.subscribe(value => {
const unsubscribe = count.subscribe((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,
increment: () => {},
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,
increment: () => 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,
increment: () => 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:
```svelte
<input bind:value={$name}>
<input bind:value={$name} />
```
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:
```svelte
<button on:click="{() => $name += '!'}">
Add exclamation mark!
</button>
<button on:click={() => ($name += '!')}> Add exclamation mark! </button>
```
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
<script>
import { spring } from "svelte/motion";
import { spring } from 'svelte/motion';
let coords = spring({ x: 50, y: 50 });
let size = spring(10);
@ -22,7 +22,7 @@ let coords = spring(
{ x: 50, y: 50 },
{
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:
```svelte
<p transition:fly="{{ y: 200, duration: 2000 }}">
Flies in and out
</p>
<p transition:fly={{ y: 200, duration: 2000 }}>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.

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:
```svelte
<p in:fly="{{ y: 200, duration: 2000 }}" out:fade>
Flies in, fades out
</p>
<p in:fly={{ y: 200, duration: 2000 }} out:fade>Flies in, fades out</p>
```
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 {
delay,
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 }) {
return {
duration,
css: t => {
css: (t) => {
const eased = elasticOut(t);
return `
@ -67,7 +67,7 @@ We can get a lot more creative though. Let's make something truly gratuitous:
${Math.trunc(t * 360)},
${Math.min(100, 1000 - 1000 * 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) => {
const i = Math.trunc(text.length * t);
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
<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>

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 {
destroy() {
// ...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 {
destroy() {
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:
```svelte
<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>
```
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 {
destroy() {
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);
node.removeEventListener('mousedown', handleMousedown);
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);
node.removeEventListener('mousedown', handleMousedown);
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 {
update(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:
<!-- prettier-ignore -->
```svelte
<button
class="{current === 'foo' ? 'selected' : ''}"
on:click="{() => current = 'foo'}"
class={current === 'foo' ? 'selected' : ''}
on:click={() => current = 'foo'}
>foo</button>
```
This is such a common pattern in UI development that Svelte includes a special directive to simplify it:
<!-- prettier-ignore -->
```svelte
<button
class:selected="{current === 'foo'}"
on:click="{() => current = 'foo'}"
class:selected={current === 'foo'}
on:click={() => current = 'foo'}
>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:
<!-- prettier-ignore -->
```svelte
<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
<div class="box">
<slot></slot>
<slot />
</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>
</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
<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>

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}
<div class="discussion">
<h3>Comments</h3>
<slot name="comments"></slot>
<slot name="comments" />
</div>
{/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:
<!-- prettier-ignore -->
```svelte
<div on:mouseenter={enter} on:mouseleave={leave}>
<slot hovering={hovering}></slot>
<slot hovering={hovering} />
</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:
<!-- prettier-ignore -->
```svelte
<Hoverable let:hovering={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';
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
{#if file.files}
<Folder {...file}/>
<Folder {...file} />
{:else}
<File {...file}/>
<File {...file} />
{/if}
```
@ -18,8 +18,8 @@ It's useful for things like this folder tree view, where folders can contain _ot
```svelte
{#if file.files}
<svelte:self {...file}/>
<svelte:self {...file} />
{:else}
<File {...file}/>
<File {...file} />
{/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
{#if selected.color === 'red'}
<RedThing/>
<RedThing />
{:else if selected.color === 'green'}
<GreenThing/>
<GreenThing />
{:else if selected.color === 'blue'}
<BlueThing/>
<BlueThing />
{/if}
```
...we can have a single dynamic component:
```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.

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:
```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`.

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:
```svelte
<svelte:window bind:scrollY={y}/>
<svelte:window bind:scrollY={y} />
```
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:
<!-- prettier-ignore -->
```svelte
<svelte:body
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:head>
<link rel="stylesheet" href="/tutorial/dark-theme.css">
<link rel="stylesheet" href="/tutorial/dark-theme.css" />
</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:
```svelte
<svelte:options immutable={true}/>
<svelte:options immutable={true} />
```
> 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();
export function stopAll() {
elements.forEach(element => {
elements.forEach((element) => {
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:
```svelte
<button on:click={stopAll}>
stop all audio
</button>
<button on:click={stopAll}> stop all audio </button>
```
> 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' }],
'arrow-spacing': 2,
'no-inner-declarations': 0,
'require-atomic-updates': 0,
'require-atomic-updates': 0
},
env: {
es6: true,
browser: true,
node: true,
mocha: true,
mocha: true
},
extends: ['eslint:recommended', 'plugin:import/errors', 'plugin:import/warnings'],
plugins: ['svelte3'],
overrides: [
{
files: ['*.svelte'],
processor: 'svelte3/svelte3',
},
processor: 'svelte3/svelte3'
}
],
parserOptions: {
ecmaVersion: 9,
sourceType: 'module',
sourceType: 'module'
},
settings: {
'import/core-modules': ['svelte'],
@ -49,6 +49,6 @@ module.exports = {
} catch (e) {
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",
"version": "1.0.0",
"description": "Docs and examples for Svelte",
"type": "module",
"scripts": {
"dev": "node scripts/update.js && vite dev",
"build": "node scripts/update.js && vite build",
"update": "node scripts/update.js --force=true",
"preview": "vite preview",
"start": "node build",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
"format": "npm run check:format -- --write",
"check:format": "prettier --check . --ignore-path .gitignore --plugin-search-dir=.",
"test": "uvu -r ts-node/register src/lib/server/markdown"
},
"dependencies": {
"@supabase/supabase-js": "^2.12.1",
"@sveltejs/repl": "^0.2.0",
"cookie": "^0.5.0",
"devalue": "^4.3.0",
"do-not-zip": "^1.0.0",
"flexsearch": "^0.7.31",
"flru": "^1.0.2",
"sourcemap-codec": "^1.4.8",
"svelte-local-storage-store": "^0.4.0"
},
"devDependencies": {
"@resvg/resvg-js": "^2.4.1",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.14.0",
"@sveltejs/site-kit": "^3.3.6",
"@sveltejs/vite-plugin-svelte": "^2.0.3",
"@types/marked": "^4.0.8",
"@types/prismjs": "^1.26.0",
"degit": "^2.8.4",
"dotenv": "^16.0.3",
"jimp": "^0.22.7",
"marked": "^4.3.0",
"node-fetch": "^3.3.1",
"prettier": "^2.8.7",
"prettier-plugin-svelte": "^2.10.0",
"prism-svelte": "^0.5.0",
"prismjs": "^1.29.0",
"satori": "^0.4.4",
"satori-html": "^0.3.2",
"shelljs": "^0.8.5",
"shiki": "^0.14.1",
"shiki-twoslash": "^3.1.1",
"svelte": "^3.57.0",
"svelte-check": "^3.1.4",
"typescript": "^5.0.2",
"vite": "^4.2.1",
"vite-imagetools": "^4.0.18"
}
"name": "svelte.dev",
"version": "1.0.0",
"description": "Docs and examples for Svelte",
"type": "module",
"scripts": {
"dev": "node scripts/update.js && vite dev",
"build": "node scripts/update.js && vite build",
"update": "node scripts/update.js --force=true",
"preview": "vite preview",
"start": "node build",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
"format": "npm run check:format -- --write",
"check:format": "prettier --check . --ignore-path .gitignore --plugin-search-dir=.",
"test": "uvu -r ts-node/register src/lib/server/markdown"
},
"dependencies": {
"@supabase/supabase-js": "^2.12.1",
"@sveltejs/repl": "^0.2.0",
"cookie": "^0.5.0",
"devalue": "^4.3.0",
"do-not-zip": "^1.0.0",
"flexsearch": "^0.7.31",
"flru": "^1.0.2",
"sourcemap-codec": "^1.4.8",
"svelte-local-storage-store": "^0.4.0"
},
"devDependencies": {
"@resvg/resvg-js": "^2.4.1",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.14.0",
"@sveltejs/site-kit": "^3.3.6",
"@sveltejs/vite-plugin-svelte": "^2.0.3",
"@types/marked": "^4.0.8",
"@types/prismjs": "^1.26.0",
"degit": "^2.8.4",
"dotenv": "^16.0.3",
"jimp": "^0.22.7",
"marked": "^4.3.0",
"node-fetch": "^3.3.1",
"prettier": "^2.8.7",
"prettier-plugin-svelte": "^2.10.0",
"prism-svelte": "^0.5.0",
"prismjs": "^1.29.0",
"satori": "^0.4.4",
"satori-html": "^0.3.2",
"shelljs": "^0.8.5",
"shiki": "^0.14.1",
"shiki-twoslash": "^3.1.1",
"svelte": "^3.57.0",
"svelte-check": "^3.1.4",
"typescript": "^5.0.2",
"vite": "^4.2.1",
"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([
sh.exec('node ./scripts/get_contributors.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_userid: user.id,
list_count: PAGE_SIZE,
list_start: offset,
list_start: offset
});
if (error) throw new Error(error.message);
@ -22,7 +22,7 @@ export async function list(user, { offset, search }) {
return {
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', {
name: gist.name,
files: gist.files,
userid: user.id,
userid: user.id
});
if (error) {
@ -71,7 +71,7 @@ export async function update(user, gistid, gist) {
gist_id: gistid,
gist_name: gist.name,
gist_files: gist.files,
gist_userid: user.id,
gist_userid: user.id
});
if (error) {
@ -88,7 +88,7 @@ export async function update(user, gistid, gist) {
export async function destroy(userid, ids) {
const { error } = await client.rpc('gist_destroy', {
gist_ids: ids,
gist_userid: userid,
gist_userid: userid
});
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_name: user.github_name,
user_github_login: user.github_login,
user_github_avatar_url: user.github_avatar_url,
user_github_avatar_url: user.github_avatar_url
});
if (error) {
@ -26,12 +26,12 @@ export async function create(user, access_token) {
id: data.userid,
github_name: user.github_name,
github_login: user.github_login,
github_avatar_url: user.github_avatar_url,
github_avatar_url: user.github_avatar_url
});
return {
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,
title: metadata.title,
description: metadata.description,
draft: !!metadata.draft,
draft: !!metadata.draft
};
});
}
@ -50,10 +50,10 @@ export function get_post(slug) {
description: metadata.description,
author: {
name: metadata.author,
url: metadata.authorURL,
url: metadata.authorURL
},
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;',
'>': '&gt;',
'"': '&quot;',
"'": '&#39;',
"'": '&#39;'
};
const get_escape_replacement = (ch) => escape_replacements[ch];
@ -45,7 +45,7 @@ const prism_languages = {
css: 'css',
diff: 'diff',
ts: 'typescript',
'': '',
'': ''
};
/** @type {Partial<import('marked').Renderer>} */
@ -165,7 +165,7 @@ const default_renderer = {
text(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.
// `new Marked(options).parse(markdown)`
...default_renderer,
...renderer,
},
...renderer
}
});
return marked(markdown);

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

@ -62,7 +62,7 @@ const languages = {
css: 'css',
diff: 'diff',
ts: 'typescript',
'': '',
'': ''
};
/**
@ -310,7 +310,7 @@ export async function read_file(file) {
// }) +
'</code>'
);
},
}
});
return {
@ -318,7 +318,7 @@ export async function read_file(file) {
slug: match[1],
title: metadata.title,
content,
sections,
sections
};
}
@ -370,14 +370,14 @@ function parse({ file, body, code, codespan }) {
section = {
title,
slug,
sections: [],
sections: []
};
sections.push(section);
} else if (level === 4 || level === 5) {
(section?.sections ?? sections).push({
title,
slug,
slug
});
} else {
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}>`;
},
code: (source, language) => code(source, language, current),
codespan,
codespan
});
return {
sections,
content,
content
};
}
@ -585,7 +585,7 @@ function convert_to_ts(js_code, indent = '', offset = '') {
name,
generics
.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;',
'>': '&gt;',
'"': '&quot;',
"'": '&#39;',
"'": '&#39;'
};
/**
@ -153,7 +153,7 @@ const default_renderer = {
text(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.
// `new Marked(options).parse(markdown)`
...default_renderer,
...renderer,
},
...renderer
}
});
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,
week: 7 * 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) => {

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

@ -11,7 +11,7 @@ export function keyEvent(code) {
return {
destroy() {
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 }) {
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) {
return new Response(await res.json(), {
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,
owner: null,
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,
owner: app.userid,
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 {
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, '');
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 {
version: query.get('version') || '3',
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(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',
alt: '1Password logo',
width: 364,
height: 68,
height: 68
},
{
href: 'https://www.alaskaair.com/',
@ -13,14 +13,14 @@ export const companies = [
alt: 'Alaska Airlines logo',
invert: true,
width: 113,
height: 48,
height: 48
},
{
href: 'https://avast.com',
filename: 'avast.svg',
alt: 'Avast logo',
width: 300,
height: 95,
height: 95
},
{
href: 'https://chess.com',
@ -29,56 +29,56 @@ export const companies = [
alt: 'Chess.com logo',
invert: true,
width: 300,
height: 85,
height: 85
},
{
href: 'https://fusioncharts.com',
filename: 'fusioncharts.svg',
alt: 'FusionCharts logo',
width: 735,
height: 115,
height: 115
},
{
href: 'https://godaddy.com',
filename: 'godaddy.svg',
alt: 'GoDaddy logo',
width: 300,
height: 84,
height: 84
},
{
href: 'https://www.ibm.com/',
filename: 'ibm.svg',
alt: 'IBM logo',
width: 1000,
height: 400,
height: 400
},
{
href: 'https://media.lesechos.fr/infographie',
filename: 'les-echos.svg',
alt: 'Les Echos',
width: 142,
height: 33,
height: 33
},
{
href: 'https://www.philips.co.uk',
filename: 'philips.svg',
alt: 'Philips logo',
width: 140,
height: 30,
height: 30
},
{
href: 'https://global.rakuten.com/corp/',
filename: 'rakuten.svg',
alt: 'Rakuten logo',
width: 300,
height: 89,
height: 89
},
{
href: 'https://razorpay.com',
filename: 'razorpay.svg',
alt: 'Razorpay logo',
width: 316,
height: 67,
height: 67
},
// {
// href: 'https://www.se.com',
@ -92,20 +92,20 @@ export const companies = [
filename: 'square.svg',
alt: 'Square',
width: 144,
height: 36,
height: 36
},
{
href: 'https://nytimes.com',
filename: 'nyt.svg',
alt: 'The New York Times logo',
width: 300,
height: 49,
height: 49
},
{
href: 'https://transloadit.com',
filename: 'transloadit.svg',
alt: 'Transloadit',
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({
code: url.searchParams.get('code'),
client_id,
client_secret,
client_secret
})
);
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', {
headers: {
'User-Agent': 'svelte.dev',
Authorization: `token ${access_token}`,
},
Authorization: `token ${access_token}`
}
});
const profile = await r2.json();
@ -33,7 +33,7 @@ export async function GET({ url }) {
github_id: profile.id,
github_name: profile.name,
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);
@ -52,10 +52,10 @@ export async function GET({ url }) {
expires: new Date(expires),
path: '/',
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) {

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

@ -9,7 +9,7 @@ export const GET = client_id
stringify({
scope: 'read:user',
client_id,
redirect_uri: `${url.origin}/auth/callback`,
redirect_uri: `${url.origin}/auth/callback`
});
throw redirect(302, Location);
@ -28,7 +28,7 @@ export const GET = client_id
{
status: 500,
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,
path: '/',
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() {
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