diff --git a/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md b/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md index 0f6266a4d1..614f266136 100644 --- a/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md +++ b/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md @@ -48,7 +48,7 @@ What happens if we use the new model as a starting point? ## Introducing Sapper - + [Sapper](https://sapper.svelte.technology) is the answer to that question. **Sapper is a Next.js-style framework that aims to meet the eleven criteria at the top of this article while dramatically reducing the amount of code that gets sent to the browser.** It's implemented as Express-compatible middleware, meaning it's easy to understand and customise. @@ -67,7 +67,7 @@ But size is only part of the story. Svelte apps are also extremely performant an The biggest drawback for many developers evaluating Sapper would be 'but I like React, and I already know how to use it', which is fair. -If you're in that camp, I'd invite you to at least try alternative frameworks. You might be pleasantly surprised! The [Sapper RealWorld](https://github.com/sveltejs/realworld) implementation totals 1,201 lines of source code, compared to 2,377 for the reference implementation, because you're able to express concepts very concisely using Svelte's template syntax (which [takes all of five minutes to master](https://svelte.technology/guide#template-syntax)). You get [scoped CSS](the-zen-of-just-writing-css), with unused style removal and minification built-in, and you can use preprocessors like LESS if you want. You no longer need to use Babel. SSR is ridiculously fast, because it's just string concatenation. And we recently introduced [svelte/store](https://svelte.technology/guide#state-management), a tiny global store that synchronises state across your component hierarchy with zero boilerplate. The worst that can happen is that you'll end up feeling vindicated! +If you're in that camp, I'd invite you to at least try alternative frameworks. You might be pleasantly surprised! The [Sapper RealWorld](https://github.com/sveltejs/realworld) implementation totals 1,201 lines of source code, compared to 2,377 for the reference implementation, because you're able to express concepts very concisely using Svelte's template syntax (which [takes all of five minutes to master](https://svelte.technology/docs#template-syntax)). You get [scoped CSS](the-zen-of-just-writing-css), with unused style removal and minification built-in, and you can use preprocessors like LESS if you want. You no longer need to use Babel. SSR is ridiculously fast, because it's just string concatenation. And we recently introduced [svelte/store](https://svelte.technology/docs#state-management), a tiny global store that synchronises state across your component hierarchy with zero boilerplate. The worst that can happen is that you'll end up feeling vindicated! But there are trade-offs nonetheless. Some people have a pathological aversion to any form of 'template language', and maybe that applies to you. JSX proponents will clobber you with the 'it's just JavaScript' mantra, and therein lies React's greatest strength, which is that it is infinitely flexible. That flexibility comes with its own set of trade-offs, but we're not here to discuss those. diff --git a/site/content/blog/2018-04-18-version-2.md b/site/content/blog/2018-04-18-version-2.md index 3204fa1035..295efbbd11 100644 --- a/site/content/blog/2018-04-18-version-2.md +++ b/site/content/blog/2018-04-18-version-2.md @@ -86,7 +86,7 @@ If you need to support IE11 and friends, you will need to use a transpiler like ## New lifecycle hooks -In addition to `oncreate` and `ondestroy`, Svelte v2 adds two more [lifecycle hooks](guide#lifecycle-hooks) for responding to state changes: +In addition to `oncreate` and `ondestroy`, Svelte v2 adds two more [lifecycle hooks](docs#lifecycle-hooks) for responding to state changes: ```js export default { @@ -169,7 +169,7 @@ This change might seem annoying initially, but it's the right move: among other ## event_handler.destroy -If your app has [custom event handlers](guide#custom-event-handlers), they must return an object with a `destroy` method, *not* a `teardown` method (this aligns event handlers with the component API). +If your app has [custom event handlers](docs#custom-event-handlers), they must return an object with a `destroy` method, *not* a `teardown` method (this aligns event handlers with the component API). ## No more type coercion diff --git a/site/content/examples/bar-chart/App.svelte b/site/content/examples/bar-chart/App.svelte index 82af1834a8..a4b01f97dd 100644 --- a/site/content/examples/bar-chart/App.svelte +++ b/site/content/examples/bar-chart/App.svelte @@ -9,9 +9,6 @@ let width = 500; let height = 200; - let barWidth; - let xScale; - let yScale; function formatMobile(tick) { return "'" + tick % 100; @@ -25,10 +22,8 @@ .domain([0, Math.max.apply(null, yTicks)]) .range([height - padding.bottom, padding.top]); - $: { - const innerWidth = width - (padding.left + padding.right); - barWidth = innerWidth / xTicks.length; - } + $: innerWidth = width - (padding.left + padding.right); + $: barWidth = innerWidth / xTicks.length; + +

This is a paragraph.

\ No newline at end of file diff --git a/site/content/tutorial/01-introduction/04-styling/app-b/App.svelte b/site/content/tutorial/01-introduction/04-styling/app-b/App.svelte new file mode 100644 index 0000000000..ab87af83d8 --- /dev/null +++ b/site/content/tutorial/01-introduction/04-styling/app-b/App.svelte @@ -0,0 +1,9 @@ + + +

This is a paragraph.

\ No newline at end of file diff --git a/site/content/tutorial/01-introduction/04-styling/text.md b/site/content/tutorial/01-introduction/04-styling/text.md new file mode 100644 index 0000000000..9f285d2f51 --- /dev/null +++ b/site/content/tutorial/01-introduction/04-styling/text.md @@ -0,0 +1,19 @@ +--- +title: Styling +--- + +Just like in HTML, you can add a ` + +

This is a paragraph.

+``` + +Importantly, these rules are *scoped to the component*. You won't accidentally change the style of `

` elements elsewhere in your app, as we'll see in the next step. \ No newline at end of file diff --git a/site/content/tutorial/01-introduction/05-nested-components/app-a/App.svelte b/site/content/tutorial/01-introduction/05-nested-components/app-a/App.svelte new file mode 100644 index 0000000000..ab87af83d8 --- /dev/null +++ b/site/content/tutorial/01-introduction/05-nested-components/app-a/App.svelte @@ -0,0 +1,9 @@ + + +

This is a paragraph.

\ No newline at end of file diff --git a/site/content/tutorial/01-introduction/05-nested-components/app-a/Nested.svelte b/site/content/tutorial/01-introduction/05-nested-components/app-a/Nested.svelte new file mode 100644 index 0000000000..5297ab1044 --- /dev/null +++ b/site/content/tutorial/01-introduction/05-nested-components/app-a/Nested.svelte @@ -0,0 +1 @@ +

This is another paragraph.

\ No newline at end of file diff --git a/site/content/tutorial/01-introduction/05-nested-components/app-b/App.svelte b/site/content/tutorial/01-introduction/05-nested-components/app-b/App.svelte new file mode 100644 index 0000000000..9ba76665bf --- /dev/null +++ b/site/content/tutorial/01-introduction/05-nested-components/app-b/App.svelte @@ -0,0 +1,14 @@ + + + + +

This is a paragraph.

+ \ No newline at end of file diff --git a/site/content/tutorial/01-introduction/05-nested-components/app-b/Nested.svelte b/site/content/tutorial/01-introduction/05-nested-components/app-b/Nested.svelte new file mode 100644 index 0000000000..5297ab1044 --- /dev/null +++ b/site/content/tutorial/01-introduction/05-nested-components/app-b/Nested.svelte @@ -0,0 +1 @@ +

This is another paragraph.

\ No newline at end of file diff --git a/site/content/tutorial/01-introduction/05-nested-components/text.md b/site/content/tutorial/01-introduction/05-nested-components/text.md new file mode 100644 index 0000000000..f1406f93db --- /dev/null +++ b/site/content/tutorial/01-introduction/05-nested-components/text.md @@ -0,0 +1,22 @@ +--- +title: Nested components +--- + +It would be impractical to put your entire app in a single component. Instead, we can import components from other files and include them as though we were including elements. + +Add a ` +``` + +...then add it to the markup: + +```html +

This is a paragraph.

+ +``` + +Notice that even though `Nested.svelte` has a `

` element, the styles from `App.svelte` don't leak in. \ No newline at end of file diff --git a/site/content/tutorial/01-introduction/06-html-tags/app-a/App.svelte b/site/content/tutorial/01-introduction/06-html-tags/app-a/App.svelte new file mode 100644 index 0000000000..e366d78865 --- /dev/null +++ b/site/content/tutorial/01-introduction/06-html-tags/app-a/App.svelte @@ -0,0 +1,5 @@ + + +

{string}

\ No newline at end of file diff --git a/site/content/tutorial/01-introduction/06-html-tags/app-b/App.svelte b/site/content/tutorial/01-introduction/06-html-tags/app-b/App.svelte new file mode 100644 index 0000000000..527e9a4830 --- /dev/null +++ b/site/content/tutorial/01-introduction/06-html-tags/app-b/App.svelte @@ -0,0 +1,5 @@ + + +

{@html string}

\ No newline at end of file diff --git a/site/content/tutorial/01-introduction/06-html-tags/text.md b/site/content/tutorial/01-introduction/06-html-tags/text.md new file mode 100644 index 0000000000..fdc8a576ff --- /dev/null +++ b/site/content/tutorial/01-introduction/06-html-tags/text.md @@ -0,0 +1,15 @@ +--- +title: HTML tags +--- + +Ordinarily, strings are inserted as plain text, meaning that characters like `<` and `>` have no special meaning. + +But sometimes you need to render HTML directly into a component. For example, the words you're reading right now exist in a markdown file that gets included on this page as a blob of HTML. + +In Svelte, you do this with the special `{@html ...}` tag: + +```html +

{@html string}

+``` + +> Svelte doesn't perform any sanitization of the data before it gets inserted into the DOM. In other words, it's critical that you manually escape HTML that comes from sources you don't trust, otherwise you risk exposing your users to XSS attacks. \ No newline at end of file diff --git a/site/content/tutorial/01-introduction/07-making-an-app/app-a/App.svelte b/site/content/tutorial/01-introduction/07-making-an-app/app-a/App.svelte new file mode 100644 index 0000000000..c4de2848c2 --- /dev/null +++ b/site/content/tutorial/01-introduction/07-making-an-app/app-a/App.svelte @@ -0,0 +1 @@ +

What now?

\ No newline at end of file diff --git a/site/content/tutorial/01-introduction/07-making-an-app/text.md b/site/content/tutorial/01-introduction/07-making-an-app/text.md new file mode 100644 index 0000000000..136c6b5f07 --- /dev/null +++ b/site/content/tutorial/01-introduction/07-making-an-app/text.md @@ -0,0 +1,31 @@ +--- +title: Making an app +--- + +This tutorial is designed to get you familiar with the process of writing components. But at some point, you'll want to start writing components in the comfort of your own text editor. + +First, you'll need to integrate Svelte with a build tool. Popular choices are: + +* [Rollup](https://rollupjs.org) / [rollup-plugin-svelte](https://github.com/rollup/rollup-plugin-svelte) +* [webpack](https://webpack.js.org/) / [svelte-loader](https://github.com/sveltejs/svelte-loader) +* [Parcel](https://parceljs.org/) / [parcel-plugin-svelte](https://github.com/DeMoorJasper/parcel-plugin-svelte) + +Don't worry if you're relatively new to web development and haven't used these tools before. We've prepared a simple step-by-step guide, [Svelte for new developers](blog/svelte-for-new-developers), which walks you through the process. + +You'll also want to configure your text editor to treat `.svelte` files the same as `.html` for the sake of syntax highlighting. [Read this guide to learn how](blog/setting-up-your-editor). + +Then, once you've got your project set up, using Svelte components is easy. The compiler turns each component into a regular JavaScript class — just import it and instantiate with `new`: + +```js +import App from './App.svelte'; + +const app = new App({ + target: document.body, + props: { + // we'll learn about props later + answer: 42 + } +}); +``` + +You can then interact with `app` using the [component API](docs/component-api) if you need to. diff --git a/site/content/tutorial/01-introduction/meta.json b/site/content/tutorial/01-introduction/meta.json new file mode 100644 index 0000000000..5c8f7bc10b --- /dev/null +++ b/site/content/tutorial/01-introduction/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Introduction" +} \ No newline at end of file diff --git a/site/content/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte b/site/content/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte new file mode 100644 index 0000000000..a3b89cc128 --- /dev/null +++ b/site/content/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte b/site/content/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte new file mode 100644 index 0000000000..bc50d74cfc --- /dev/null +++ b/site/content/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/02-reactivity/01-reactive-assignments/text.md b/site/content/tutorial/02-reactivity/01-reactive-assignments/text.md new file mode 100644 index 0000000000..b0909f1feb --- /dev/null +++ b/site/content/tutorial/02-reactivity/01-reactive-assignments/text.md @@ -0,0 +1,21 @@ +--- +title: Assignments +--- + +At the heart of Svelte is a powerful system of *reactivity* for keeping the DOM in sync with your application state — for example, in response to an event. + +To demonstrate it, we first need to wire up an event handler. Replace line 9 with this: + +```html + \ No newline at end of file diff --git a/site/content/tutorial/02-reactivity/02-reactive-declarations/app-b/App.svelte b/site/content/tutorial/02-reactivity/02-reactive-declarations/app-b/App.svelte new file mode 100644 index 0000000000..a9fc207851 --- /dev/null +++ b/site/content/tutorial/02-reactivity/02-reactive-declarations/app-b/App.svelte @@ -0,0 +1,14 @@ + + + + +

{count} doubled is {doubled}

\ No newline at end of file diff --git a/site/content/tutorial/02-reactivity/02-reactive-declarations/text.md b/site/content/tutorial/02-reactivity/02-reactive-declarations/text.md new file mode 100644 index 0000000000..365908cf22 --- /dev/null +++ b/site/content/tutorial/02-reactivity/02-reactive-declarations/text.md @@ -0,0 +1,22 @@ +--- +title: Declarations +--- + +Svelte automatically updates the DOM when your component's state changes. Often, some parts of a component's state need to be computed from *other* parts (such as a `fullname` derived from a `firstname` and a `lastname`), and recomputed whenever they change. + +For these, we have *reactive declarations*. They look like this: + +```js +let count = 0; +$: doubled = count * 2; +``` + +> Don't worry if this looks a little alien. It's valid (if unconventional) JavaScript, which Svelte interprets to mean 're-run this code whenever any of the referenced values change'. Once you get used to it, there's no going back. + +Let's use `doubled` in our markup: + +```html +

{count} doubled is {doubled}

+``` + +Of course, you could just write `{count * 2}` in the markup instead — you don't have to use reactive values. Reactive values become particularly valuable when you need to reference them multiple times, or you have values that depend on *other* reactive values. \ No newline at end of file diff --git a/site/content/tutorial/02-reactivity/03-reactive-statements/app-a/App.svelte b/site/content/tutorial/02-reactivity/03-reactive-statements/app-a/App.svelte new file mode 100644 index 0000000000..bc50d74cfc --- /dev/null +++ b/site/content/tutorial/02-reactivity/03-reactive-statements/app-a/App.svelte @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/02-reactivity/03-reactive-statements/app-b/App.svelte b/site/content/tutorial/02-reactivity/03-reactive-statements/app-b/App.svelte new file mode 100644 index 0000000000..f757be6f51 --- /dev/null +++ b/site/content/tutorial/02-reactivity/03-reactive-statements/app-b/App.svelte @@ -0,0 +1,16 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/02-reactivity/03-reactive-statements/text.md b/site/content/tutorial/02-reactivity/03-reactive-statements/text.md new file mode 100644 index 0000000000..1b0e90b7d5 --- /dev/null +++ b/site/content/tutorial/02-reactivity/03-reactive-statements/text.md @@ -0,0 +1,27 @@ +--- +title: Statements +--- + +We're not limited to declaring reactive *values* — we can also run arbitrary *statements* reactively. For example, we can log the value of `count` whenever it changes: + +```js +$: console.log(`the count is ${count}`); +``` + +You can easily group statements together with a block: + +```js +$: { + console.log(`the count is ${count}`); + alert(`I SAID THE COUNT IS ${count}`); +} +``` + +You can even put the `$:` in front of things like `if` blocks: + +```js +$: if (count >= 10) { + alert(`count is dangerously high!`); + count = 9; +} +``` \ No newline at end of file diff --git a/site/content/tutorial/02-reactivity/meta.json b/site/content/tutorial/02-reactivity/meta.json new file mode 100644 index 0000000000..c908815e04 --- /dev/null +++ b/site/content/tutorial/02-reactivity/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Reactivity" +} \ No newline at end of file diff --git a/site/content/tutorial/03-props/01-declaring-props/app-a/App.svelte b/site/content/tutorial/03-props/01-declaring-props/app-a/App.svelte new file mode 100644 index 0000000000..79d7e6b789 --- /dev/null +++ b/site/content/tutorial/03-props/01-declaring-props/app-a/App.svelte @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/03-props/01-declaring-props/app-a/Nested.svelte b/site/content/tutorial/03-props/01-declaring-props/app-a/Nested.svelte new file mode 100644 index 0000000000..da9270c7a2 --- /dev/null +++ b/site/content/tutorial/03-props/01-declaring-props/app-a/Nested.svelte @@ -0,0 +1,5 @@ + + +

The answer is {answer}

\ No newline at end of file diff --git a/site/content/tutorial/03-props/01-declaring-props/app-b/App.svelte b/site/content/tutorial/03-props/01-declaring-props/app-b/App.svelte new file mode 100644 index 0000000000..79d7e6b789 --- /dev/null +++ b/site/content/tutorial/03-props/01-declaring-props/app-b/App.svelte @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/03-props/01-declaring-props/app-b/Nested.svelte b/site/content/tutorial/03-props/01-declaring-props/app-b/Nested.svelte new file mode 100644 index 0000000000..ecd3cb6254 --- /dev/null +++ b/site/content/tutorial/03-props/01-declaring-props/app-b/Nested.svelte @@ -0,0 +1,5 @@ + + +

The answer is {answer}

\ No newline at end of file diff --git a/site/content/tutorial/03-props/01-declaring-props/text.md b/site/content/tutorial/03-props/01-declaring-props/text.md new file mode 100644 index 0000000000..26e6762106 --- /dev/null +++ b/site/content/tutorial/03-props/01-declaring-props/text.md @@ -0,0 +1,15 @@ +--- +title: Declaring props +--- + +So far, we've dealt exclusively with internal state — that is to say, the values are only accessible within a given component. + +In any real application, you'll need to pass data from one component down to its children. To do that, we need to declare *properties*, generally shortened to 'props'. In Svelte, we do that with the `export` keyword. Edit the `Nested.svelte` component: + +```html + +``` + +> Just like `$:`, this may feel a little weird at first. That's not how `export` normally works in JavaScript modules! Just roll with it for now — it'll soon become second nature. \ No newline at end of file diff --git a/site/content/tutorial/03-props/02-default-values/app-a/App.svelte b/site/content/tutorial/03-props/02-default-values/app-a/App.svelte new file mode 100644 index 0000000000..79d7e6b789 --- /dev/null +++ b/site/content/tutorial/03-props/02-default-values/app-a/App.svelte @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/03-props/02-default-values/app-a/Nested.svelte b/site/content/tutorial/03-props/02-default-values/app-a/Nested.svelte new file mode 100644 index 0000000000..ecd3cb6254 --- /dev/null +++ b/site/content/tutorial/03-props/02-default-values/app-a/Nested.svelte @@ -0,0 +1,5 @@ + + +

The answer is {answer}

\ No newline at end of file diff --git a/site/content/tutorial/03-props/02-default-values/app-b/App.svelte b/site/content/tutorial/03-props/02-default-values/app-b/App.svelte new file mode 100644 index 0000000000..f9d63b30d6 --- /dev/null +++ b/site/content/tutorial/03-props/02-default-values/app-b/App.svelte @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/site/content/tutorial/03-props/02-default-values/app-b/Nested.svelte b/site/content/tutorial/03-props/02-default-values/app-b/Nested.svelte new file mode 100644 index 0000000000..35ee5c9f88 --- /dev/null +++ b/site/content/tutorial/03-props/02-default-values/app-b/Nested.svelte @@ -0,0 +1,5 @@ + + +

The answer is {answer}

\ No newline at end of file diff --git a/site/content/tutorial/03-props/02-default-values/text.md b/site/content/tutorial/03-props/02-default-values/text.md new file mode 100644 index 0000000000..dda6a370fe --- /dev/null +++ b/site/content/tutorial/03-props/02-default-values/text.md @@ -0,0 +1,18 @@ +--- +title: Default values +--- + +We can easily specify default values for props: + +```html + +``` + +If we now instantiate the component without an `answer` prop, it will fall back to the default: + +```html + + +``` \ No newline at end of file diff --git a/site/content/tutorial/03-props/03-spread-props/app-a/App.svelte b/site/content/tutorial/03-props/03-spread-props/app-a/App.svelte new file mode 100644 index 0000000000..640e853c57 --- /dev/null +++ b/site/content/tutorial/03-props/03-spread-props/app-a/App.svelte @@ -0,0 +1,12 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/03-props/03-spread-props/app-a/Info.svelte b/site/content/tutorial/03-props/03-spread-props/app-a/Info.svelte new file mode 100644 index 0000000000..7412398244 --- /dev/null +++ b/site/content/tutorial/03-props/03-spread-props/app-a/Info.svelte @@ -0,0 +1,12 @@ + + +

+ The {name} package is {speed} fast. + Download version {version} from npm + and learn more here +

\ No newline at end of file diff --git a/site/content/tutorial/03-props/03-spread-props/app-b/App.svelte b/site/content/tutorial/03-props/03-spread-props/app-b/App.svelte new file mode 100644 index 0000000000..f40d3b89c8 --- /dev/null +++ b/site/content/tutorial/03-props/03-spread-props/app-b/App.svelte @@ -0,0 +1,12 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/03-props/03-spread-props/app-b/Info.svelte b/site/content/tutorial/03-props/03-spread-props/app-b/Info.svelte new file mode 100644 index 0000000000..7412398244 --- /dev/null +++ b/site/content/tutorial/03-props/03-spread-props/app-b/Info.svelte @@ -0,0 +1,12 @@ + + +

+ The {name} package is {speed} fast. + Download version {version} from npm + and learn more here +

\ No newline at end of file diff --git a/site/content/tutorial/03-props/03-spread-props/text.md b/site/content/tutorial/03-props/03-spread-props/text.md new file mode 100644 index 0000000000..aa7d4dc831 --- /dev/null +++ b/site/content/tutorial/03-props/03-spread-props/text.md @@ -0,0 +1,11 @@ +--- +title: Spread props +--- + +If you have an object of properties, you can 'spread' them on to a component instead of specifying each one: + +```html + +``` + +> 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. \ No newline at end of file diff --git a/site/content/tutorial/03-props/meta.json b/site/content/tutorial/03-props/meta.json new file mode 100644 index 0000000000..7b9e0a2783 --- /dev/null +++ b/site/content/tutorial/03-props/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Props" +} \ No newline at end of file diff --git a/site/content/tutorial/04-logic/01-if-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/01-if-blocks/app-a/App.svelte new file mode 100644 index 0000000000..38efdc9ddd --- /dev/null +++ b/site/content/tutorial/04-logic/01-if-blocks/app-a/App.svelte @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/site/content/tutorial/04-logic/01-if-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/01-if-blocks/app-b/App.svelte new file mode 100644 index 0000000000..01b8867ade --- /dev/null +++ b/site/content/tutorial/04-logic/01-if-blocks/app-b/App.svelte @@ -0,0 +1,19 @@ + + +{#if user.loggedIn} + +{/if} + +{#if !user.loggedIn} + +{/if} \ No newline at end of file diff --git a/site/content/tutorial/04-logic/01-if-blocks/text.md b/site/content/tutorial/04-logic/01-if-blocks/text.md new file mode 100644 index 0000000000..33915070cb --- /dev/null +++ b/site/content/tutorial/04-logic/01-if-blocks/text.md @@ -0,0 +1,23 @@ +--- +title: If blocks +--- + +HTML doesn't have a way of expressing *logic*, like conditionals and loops. Svelte does. + +To conditionally render some markup, we wrap it in an `if` block: + +```html +{#if user.loggedIn} + +{/if} + +{#if !user.loggedIn} + +{/if} +``` + +Try it — update the component, and click on the buttons. \ No newline at end of file diff --git a/site/content/tutorial/04-logic/02-else-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/02-else-blocks/app-a/App.svelte new file mode 100644 index 0000000000..01b8867ade --- /dev/null +++ b/site/content/tutorial/04-logic/02-else-blocks/app-a/App.svelte @@ -0,0 +1,19 @@ + + +{#if user.loggedIn} + +{/if} + +{#if !user.loggedIn} + +{/if} \ No newline at end of file diff --git a/site/content/tutorial/04-logic/02-else-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/02-else-blocks/app-b/App.svelte new file mode 100644 index 0000000000..c82565c2f7 --- /dev/null +++ b/site/content/tutorial/04-logic/02-else-blocks/app-b/App.svelte @@ -0,0 +1,17 @@ + + +{#if user.loggedIn} + +{:else} + +{/if} \ No newline at end of file diff --git a/site/content/tutorial/04-logic/02-else-blocks/text.md b/site/content/tutorial/04-logic/02-else-blocks/text.md new file mode 100644 index 0000000000..d25a7d3897 --- /dev/null +++ b/site/content/tutorial/04-logic/02-else-blocks/text.md @@ -0,0 +1,19 @@ +--- +title: Else blocks +--- + +Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are mutually exclusive, we can simplify this component slightly by using an `else` block: + +```html +{#if user.loggedIn} + +{:else} + +{/if} +``` + +> A `#` character always indicates a *block opening* tag. A `/` character always indicates a *block closing* tag. A `:` character, as in `{:else}`, indicates a *block continuation* tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML. \ No newline at end of file diff --git a/site/content/tutorial/04-logic/03-else-if-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/03-else-if-blocks/app-a/App.svelte new file mode 100644 index 0000000000..efffa9af2b --- /dev/null +++ b/site/content/tutorial/04-logic/03-else-if-blocks/app-a/App.svelte @@ -0,0 +1,13 @@ + + +{#if x > 10} +

{x} is greater than 10

+{:else} + {#if 5 > x} +

{x} is less than 5

+ {:else} +

{x} is between 5 and 10

+ {/if} +{/if} \ No newline at end of file diff --git a/site/content/tutorial/04-logic/03-else-if-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/03-else-if-blocks/app-b/App.svelte new file mode 100644 index 0000000000..9102618ff4 --- /dev/null +++ b/site/content/tutorial/04-logic/03-else-if-blocks/app-b/App.svelte @@ -0,0 +1,11 @@ + + +{#if x > 10} +

{x} is greater than 10

+{:else if 5 > x} +

{x} is less than 5

+{:else} +

{x} is between 5 and 10

+{/if} \ No newline at end of file diff --git a/site/content/tutorial/04-logic/03-else-if-blocks/text.md b/site/content/tutorial/04-logic/03-else-if-blocks/text.md new file mode 100644 index 0000000000..18faeacfe6 --- /dev/null +++ b/site/content/tutorial/04-logic/03-else-if-blocks/text.md @@ -0,0 +1,15 @@ +--- +title: Else-if blocks +--- + +Multiple conditions can be 'chained' together with `else if`: + +```html +{#if x > 10} +

{x} is greater than 10

+{:else if 5 > x} +

{x} is less than 5

+{:else} +

{x} is between 5 and 10

+{/if} +``` \ No newline at end of file diff --git a/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte new file mode 100644 index 0000000000..34fb2cebfc --- /dev/null +++ b/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte @@ -0,0 +1,17 @@ + + +

The Famous Cats of YouTube

+ + \ No newline at end of file diff --git a/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte new file mode 100644 index 0000000000..6ea5097be2 --- /dev/null +++ b/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte @@ -0,0 +1,17 @@ + + +

The Famous Cats of YouTube

+ + \ No newline at end of file diff --git a/site/content/tutorial/04-logic/04-each-blocks/text.md b/site/content/tutorial/04-logic/04-each-blocks/text.md new file mode 100644 index 0000000000..886990f5a0 --- /dev/null +++ b/site/content/tutorial/04-logic/04-each-blocks/text.md @@ -0,0 +1,29 @@ +--- +title: Each blocks +--- + +If you need to loop over lists of data, use an `each` block: + +```html + +``` + +> The expression (`cats`, in this case) can be any array or array-like object (i.e. it has a `length` property). You can loop over generic iterables with `each [...iterable]`. + +You can get the current *index* as a second argument, like so: + +```html +{#each cats as cat, i} +
  • + {i + 1}: {cat.name} +
    • +{/each} +``` + +If you prefer, you can use destructuring — `each cats as { id, name }` — and replace `cat.id` and `cat.name` with `id` and `name`. \ No newline at end of file diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte new file mode 100644 index 0000000000..3d4a2c801d --- /dev/null +++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte @@ -0,0 +1,23 @@ + + + + +{#each things as thing} + +{/each} \ No newline at end of file diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte new file mode 100644 index 0000000000..4e86d32109 --- /dev/null +++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte @@ -0,0 +1,9 @@ + + +

    {valueAtStart} / {value}

    \ No newline at end of file diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte new file mode 100644 index 0000000000..73a2dcc609 --- /dev/null +++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte @@ -0,0 +1,23 @@ + + + + +{#each things as thing (thing.id)} + +{/each} \ No newline at end of file diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte new file mode 100644 index 0000000000..4e86d32109 --- /dev/null +++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte @@ -0,0 +1,9 @@ + + +

    {valueAtStart} / {value}

    \ No newline at end of file diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md b/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md new file mode 100644 index 0000000000..d0dec628b6 --- /dev/null +++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md @@ -0,0 +1,17 @@ +--- +title: Keyed each blocks +--- + +By default, when you modify the value of an `each` block, it will add and remove items at the *end* of the block, and update any values that have changed. That might not be what you want. + +It's easier to show why than to explain. Click the 'Remove first item' button a few times, and notice that it's removing `` components from the end and updating the `value` for those that remain. Instead, we'd like to remove the first `` component and leave the rest unaffected. + +To do that, we specify a unique identifier for the `each` block: + +```html +{#each things as thing (thing.id)} + +{/each} +``` + +The `(thing.id)` tells Svelte how to figure out what changed. \ No newline at end of file diff --git a/site/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte new file mode 100644 index 0000000000..7ac5ca3c9e --- /dev/null +++ b/site/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte @@ -0,0 +1,25 @@ + + + + + +

    {promise}

    \ No newline at end of file diff --git a/site/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte new file mode 100644 index 0000000000..8c8036c0f1 --- /dev/null +++ b/site/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte @@ -0,0 +1,30 @@ + + + + +{#await promise} +

    ...waiting

    +{:then number} +

    The number is {number}

    +{:catch error} +

    {error.message}

    +{/await} \ No newline at end of file diff --git a/site/content/tutorial/04-logic/06-await-blocks/text.md b/site/content/tutorial/04-logic/06-await-blocks/text.md new file mode 100644 index 0000000000..0d47dcde95 --- /dev/null +++ b/site/content/tutorial/04-logic/06-await-blocks/text.md @@ -0,0 +1,25 @@ +--- +title: Await blocks +--- + +Most web applications have to deal with asynchronous data at some point. Svelte makes it easy to *await* the value of [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) directly in your markup: + +```html +{#await promise} +

    ...waiting

    +{:then number} +

    The number is {number}

    +{:catch error} +

    {error.message}

    +{/await} +``` + +> Only the most recent `promise` is considered, meaning you don't need to worry about race conditions. + +If you know that your promise can't reject, you can omit the `catch` block. You can also omit the first block if you don't want to show anything until the promise resolves: + +```html +{#await promise then value} +

    the value is {value}

    +{/await} +``` \ No newline at end of file diff --git a/site/content/tutorial/04-logic/meta.json b/site/content/tutorial/04-logic/meta.json new file mode 100644 index 0000000000..3ecf1ccee2 --- /dev/null +++ b/site/content/tutorial/04-logic/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Logic" +} \ No newline at end of file diff --git a/site/content/tutorial/05-events/01-dom-events/app-a/App.svelte b/site/content/tutorial/05-events/01-dom-events/app-a/App.svelte new file mode 100644 index 0000000000..dce67f6368 --- /dev/null +++ b/site/content/tutorial/05-events/01-dom-events/app-a/App.svelte @@ -0,0 +1,16 @@ + + + + +
    + The mouse position is {m.x} x {m.y} +
    \ No newline at end of file diff --git a/site/content/tutorial/05-events/01-dom-events/app-b/App.svelte b/site/content/tutorial/05-events/01-dom-events/app-b/App.svelte new file mode 100644 index 0000000000..f26112f06c --- /dev/null +++ b/site/content/tutorial/05-events/01-dom-events/app-b/App.svelte @@ -0,0 +1,16 @@ + + + + +
    + The mouse position is {m.x} x {m.y} +
    \ No newline at end of file diff --git a/site/content/tutorial/05-events/01-dom-events/text.md b/site/content/tutorial/05-events/01-dom-events/text.md new file mode 100644 index 0000000000..1c08c9159a --- /dev/null +++ b/site/content/tutorial/05-events/01-dom-events/text.md @@ -0,0 +1,11 @@ +--- +title: DOM events +--- + +As we've briefly seen already, you can listen to any event on an element with the `on:` directive: + +```html +
    + The mouse position is {m.x} x {m.y} +
    +``` \ No newline at end of file diff --git a/site/content/tutorial/05-events/02-inline-handlers/app-a/App.svelte b/site/content/tutorial/05-events/02-inline-handlers/app-a/App.svelte new file mode 100644 index 0000000000..f26112f06c --- /dev/null +++ b/site/content/tutorial/05-events/02-inline-handlers/app-a/App.svelte @@ -0,0 +1,16 @@ + + + + +
    + The mouse position is {m.x} x {m.y} +
    \ No newline at end of file diff --git a/site/content/tutorial/05-events/02-inline-handlers/app-b/App.svelte b/site/content/tutorial/05-events/02-inline-handlers/app-b/App.svelte new file mode 100644 index 0000000000..f0fd6ff17a --- /dev/null +++ b/site/content/tutorial/05-events/02-inline-handlers/app-b/App.svelte @@ -0,0 +1,11 @@ + + + + +
    + The mouse position is {m.x} x {m.y} +
    \ No newline at end of file diff --git a/site/content/tutorial/05-events/02-inline-handlers/text.md b/site/content/tutorial/05-events/02-inline-handlers/text.md new file mode 100644 index 0000000000..0ec177cb44 --- /dev/null +++ b/site/content/tutorial/05-events/02-inline-handlers/text.md @@ -0,0 +1,15 @@ +--- +title: Inline handlers +--- + +You can also declare event handlers inline: + +```html +
    + The mouse position is {m.x} x {m.y} +
    +``` + +The quote marks are optional, but they're helpful for syntax highlighting in some environments. + +> In some frameworks you may see recommendations to avoid inline event handlers for performance reasons, particularly inside loops. That advice doesn't apply to Svelte — the compiler will always do the right thing, whichever form you choose. \ No newline at end of file diff --git a/site/content/tutorial/05-events/03-event-modifiers/app-a/App.svelte b/site/content/tutorial/05-events/03-event-modifiers/app-a/App.svelte new file mode 100644 index 0000000000..e49115d4f1 --- /dev/null +++ b/site/content/tutorial/05-events/03-event-modifiers/app-a/App.svelte @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/05-events/03-event-modifiers/app-b/App.svelte b/site/content/tutorial/05-events/03-event-modifiers/app-b/App.svelte new file mode 100644 index 0000000000..94df49cb2d --- /dev/null +++ b/site/content/tutorial/05-events/03-event-modifiers/app-b/App.svelte @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/05-events/03-event-modifiers/text.md b/site/content/tutorial/05-events/03-event-modifiers/text.md new file mode 100644 index 0000000000..8927344656 --- /dev/null +++ b/site/content/tutorial/05-events/03-event-modifiers/text.md @@ -0,0 +1,27 @@ +--- +title: Event modifiers +--- + +DOM event handlers can have *modifiers* that alter their behaviour. For example, a handler with a `once` modifier will only run a single time: + +```html + + + +``` + +The full list of modifiers: + +* `preventDefault` — calls `event.preventDefault()` before running the handler. Useful for e.g. client-side form handling +* `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element +* `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so) +* `capture` — fires the handler during the *capture* phase instead of the *bubbling* phase +* `once` — remove the handler after the first time it runs + +You can chain modifiers together, e.g. `on:click|once|capture={...}`. \ No newline at end of file diff --git a/site/content/tutorial/05-events/04-component-events/app-a/App.svelte b/site/content/tutorial/05-events/04-component-events/app-a/App.svelte new file mode 100644 index 0000000000..a8d14a368a --- /dev/null +++ b/site/content/tutorial/05-events/04-component-events/app-a/App.svelte @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/05-events/04-component-events/app-a/Inner.svelte b/site/content/tutorial/05-events/04-component-events/app-a/Inner.svelte new file mode 100644 index 0000000000..0a7980c45c --- /dev/null +++ b/site/content/tutorial/05-events/04-component-events/app-a/Inner.svelte @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/05-events/04-component-events/app-b/App.svelte b/site/content/tutorial/05-events/04-component-events/app-b/App.svelte new file mode 100644 index 0000000000..a8d14a368a --- /dev/null +++ b/site/content/tutorial/05-events/04-component-events/app-b/App.svelte @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/05-events/04-component-events/app-b/Inner.svelte b/site/content/tutorial/05-events/04-component-events/app-b/Inner.svelte new file mode 100644 index 0000000000..6ac8301f24 --- /dev/null +++ b/site/content/tutorial/05-events/04-component-events/app-b/Inner.svelte @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/05-events/04-component-events/text.md b/site/content/tutorial/05-events/04-component-events/text.md new file mode 100644 index 0000000000..222a292b5f --- /dev/null +++ b/site/content/tutorial/05-events/04-component-events/text.md @@ -0,0 +1,21 @@ +--- +title: Component events +--- + +Components can also dispatch events. To do so, they must create an event dispatcher. Update `Inner.svelte`: + +```html + +``` + +> `createEventDispatcher` must be called when the component is first instantiated — you can't do it later inside e.g. a `setTimeout` callback. This links `dispatch` to the component instance. \ No newline at end of file diff --git a/site/content/tutorial/05-events/05-event-forwarding/app-a/App.svelte b/site/content/tutorial/05-events/05-event-forwarding/app-a/App.svelte new file mode 100644 index 0000000000..973df50f0a --- /dev/null +++ b/site/content/tutorial/05-events/05-event-forwarding/app-a/App.svelte @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/05-events/05-event-forwarding/app-a/Inner.svelte b/site/content/tutorial/05-events/05-event-forwarding/app-a/Inner.svelte new file mode 100644 index 0000000000..6ac8301f24 --- /dev/null +++ b/site/content/tutorial/05-events/05-event-forwarding/app-a/Inner.svelte @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/05-events/05-event-forwarding/app-a/Outer.svelte b/site/content/tutorial/05-events/05-event-forwarding/app-a/Outer.svelte new file mode 100644 index 0000000000..6c13070e79 --- /dev/null +++ b/site/content/tutorial/05-events/05-event-forwarding/app-a/Outer.svelte @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/05-events/05-event-forwarding/app-b/App.svelte b/site/content/tutorial/05-events/05-event-forwarding/app-b/App.svelte new file mode 100644 index 0000000000..973df50f0a --- /dev/null +++ b/site/content/tutorial/05-events/05-event-forwarding/app-b/App.svelte @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/05-events/05-event-forwarding/app-b/Inner.svelte b/site/content/tutorial/05-events/05-event-forwarding/app-b/Inner.svelte new file mode 100644 index 0000000000..6ac8301f24 --- /dev/null +++ b/site/content/tutorial/05-events/05-event-forwarding/app-b/Inner.svelte @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/05-events/05-event-forwarding/app-b/Outer.svelte b/site/content/tutorial/05-events/05-event-forwarding/app-b/Outer.svelte new file mode 100644 index 0000000000..10c28f298a --- /dev/null +++ b/site/content/tutorial/05-events/05-event-forwarding/app-b/Outer.svelte @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/05-events/05-event-forwarding/text.md b/site/content/tutorial/05-events/05-event-forwarding/text.md new file mode 100644 index 0000000000..b65a028f27 --- /dev/null +++ b/site/content/tutorial/05-events/05-event-forwarding/text.md @@ -0,0 +1,34 @@ +--- +title: Event forwarding +--- + +Unlike DOM events, component events don't *bubble*. If you want to listen to an event on some deeply nested component, the intermediate components must *forward* the event. + +In this case, we have the same `App.svelte` and `Inner.svelte` as in the [previous chapter](tutorial/component-events), but there's now an `Outer.svelte` component that contains ``. + +One way we could solve the problem is adding `createEventDispatcher` to `Outer.svelte`, listening for the `message` event, and creating a handler for it: + +```html + + + +``` + +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'. + +```html + + + +``` \ No newline at end of file diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte new file mode 100644 index 0000000000..1429cae207 --- /dev/null +++ b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/FancyButton.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/FancyButton.svelte new file mode 100644 index 0000000000..9c3ae75809 --- /dev/null +++ b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/FancyButton.svelte @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte new file mode 100644 index 0000000000..1429cae207 --- /dev/null +++ b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/FancyButton.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/FancyButton.svelte new file mode 100644 index 0000000000..75630ea99c --- /dev/null +++ b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/FancyButton.svelte @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/text.md b/site/content/tutorial/05-events/06-dom-event-forwarding/text.md new file mode 100644 index 0000000000..0959e1d98b --- /dev/null +++ b/site/content/tutorial/05-events/06-dom-event-forwarding/text.md @@ -0,0 +1,13 @@ +--- +title: DOM event forwarding +--- + +Event forwarding works for DOM events too. + +We want to get notified of clicks on our `` — to do that, we just need to forward `click` events on the ` +``` \ No newline at end of file diff --git a/site/content/tutorial/05-events/meta.json b/site/content/tutorial/05-events/meta.json new file mode 100644 index 0000000000..c5f088e208 --- /dev/null +++ b/site/content/tutorial/05-events/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Events" +} \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/01-text-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/01-text-inputs/app-a/App.svelte new file mode 100644 index 0000000000..d3cf1a44ed --- /dev/null +++ b/site/content/tutorial/06-bindings/01-text-inputs/app-a/App.svelte @@ -0,0 +1,9 @@ + + + + +

    Hello {name}!

    \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/01-text-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/01-text-inputs/app-b/App.svelte new file mode 100644 index 0000000000..662785bfce --- /dev/null +++ b/site/content/tutorial/06-bindings/01-text-inputs/app-b/App.svelte @@ -0,0 +1,9 @@ + + + + +

    Hello {name}!

    \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/01-text-inputs/text.md b/site/content/tutorial/06-bindings/01-text-inputs/text.md new file mode 100644 index 0000000000..0082586133 --- /dev/null +++ b/site/content/tutorial/06-bindings/01-text-inputs/text.md @@ -0,0 +1,15 @@ +--- +title: Text inputs +--- + +As a general rule, data flow in Svelte is *top down* — a parent component can set props on a child component, and a component can set attributes on an element, but not the other way around. + +Sometimes it's useful to break that rule. Take the case of the `` element in this component — we *could* add an `on:input` event handler that set the value of `name` to `event.target.value`, but it's a bit... boilerplatey. It gets even worse with other kinds of form element, as we'll see. + +Instead, we can use the `bind:value` directive: + +```html + +``` + +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`. \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/02-numeric-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/02-numeric-inputs/app-a/App.svelte new file mode 100644 index 0000000000..ac4fadf012 --- /dev/null +++ b/site/content/tutorial/06-bindings/02-numeric-inputs/app-a/App.svelte @@ -0,0 +1,16 @@ + + + + + + +

    {a} + {b} = {a + b}

    \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte new file mode 100644 index 0000000000..798d57e021 --- /dev/null +++ b/site/content/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte @@ -0,0 +1,16 @@ + + + + + + +

    {a} + {b} = {a + b}

    \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/02-numeric-inputs/text.md b/site/content/tutorial/06-bindings/02-numeric-inputs/text.md new file mode 100644 index 0000000000..1ede244301 --- /dev/null +++ b/site/content/tutorial/06-bindings/02-numeric-inputs/text.md @@ -0,0 +1,12 @@ +--- +title: Numeric inputs +--- + +In the DOM, everything is a string. That's unhelpful when you're dealing with numeric inputs — `type="number"` and `type="range"` — as it means you have to remember to coerce `input.value` before using it. + +With `bind:value`, Svelte takes care of it for you: + +```html + + +``` \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte new file mode 100644 index 0000000000..2847dad485 --- /dev/null +++ b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte @@ -0,0 +1,18 @@ + + + + +{#if yes} +

    Thank you. We will bombard your inbox and sell your personal details.

    +{:else} +

    You must opt in to continue. If you're not paying, you're the product.

    +{/if} + + \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte new file mode 100644 index 0000000000..b82d31e783 --- /dev/null +++ b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte @@ -0,0 +1,18 @@ + + + + +{#if yes} +

    Thank you. We will bombard your inbox and sell your personal details.

    +{:else} +

    You must opt in to continue. If you're not paying, you're the product.

    +{/if} + + \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/03-checkbox-inputs/text.md b/site/content/tutorial/06-bindings/03-checkbox-inputs/text.md new file mode 100644 index 0000000000..621d9fbb7b --- /dev/null +++ b/site/content/tutorial/06-bindings/03-checkbox-inputs/text.md @@ -0,0 +1,9 @@ +--- +title: Checkbox inputs +--- + +Checkboxes are used for toggling between states. Instead of binding to `input.value`, we bind to `input.checked`: + +```html + +``` \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte new file mode 100644 index 0000000000..5ea04f4e95 --- /dev/null +++ b/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte @@ -0,0 +1,54 @@ + + +

    Size

    + + + + + + + +

    Flavours

    + + + + + + + +{#if flavours.length === 0} +

    Please select at least one flavour

    +{:else if flavours.length > scoops} +

    Can't order more flavours than scoops!

    +{:else} +

    + You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'} + of {join(flavours)} +

    +{/if} diff --git a/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte new file mode 100644 index 0000000000..a46c61c7e7 --- /dev/null +++ b/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte @@ -0,0 +1,52 @@ + + +

    Size

    + + + + + + + +

    Flavours

    + +{#each menu as flavour} + +{/each} + +{#if flavours.length === 0} +

    Please select at least one flavour

    +{:else if flavours.length > scoops} +

    Can't order more flavours than scoops!

    +{:else} +

    + You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'} + of {join(flavours)} +

    +{/if} diff --git a/site/content/tutorial/06-bindings/04-group-inputs/text.md b/site/content/tutorial/06-bindings/04-group-inputs/text.md new file mode 100644 index 0000000000..97edb8db76 --- /dev/null +++ b/site/content/tutorial/06-bindings/04-group-inputs/text.md @@ -0,0 +1,36 @@ +--- +title: Group inputs +--- + +If you have multiple inputs relating to the same value, you can use `bind:group` along with the `value` attribute. Radio inputs in the same group are mutually exclusive; checkbox inputs in the same group form an array of selected values. + +Add `bind:group` to each input: + +```html + +``` + +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 ` + + + + + +{@html marked(value)} \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte new file mode 100644 index 0000000000..be338bf47f --- /dev/null +++ b/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte @@ -0,0 +1,12 @@ + + + + + + +{@html marked(value)} \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/05-textarea-inputs/text.md b/site/content/tutorial/06-bindings/05-textarea-inputs/text.md new file mode 100644 index 0000000000..42763200c7 --- /dev/null +++ b/site/content/tutorial/06-bindings/05-textarea-inputs/text.md @@ -0,0 +1,17 @@ +--- +title: Textarea inputs +--- + +The ` +``` + +In cases like these, where the names match, we can also use a shorthand form: + +```html + +``` + +This applies to all bindings, not just textareas. \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte b/site/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte new file mode 100644 index 0000000000..b6f50b935e --- /dev/null +++ b/site/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte @@ -0,0 +1,39 @@ + + + + +

    Insecurity questions

    + +
    + + + + + +
    + +

    selected question {selected ? selected.id : '[waiting...]'}

    \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte b/site/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte new file mode 100644 index 0000000000..3f1e7fa7e1 --- /dev/null +++ b/site/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte @@ -0,0 +1,39 @@ + + + + +

    Insecurity questions

    + +
    + + + + + +
    + +

    selected question {selected ? selected.id : '[waiting...]'}

    \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/06-select-bindings/text.md b/site/content/tutorial/06-bindings/06-select-bindings/text.md new file mode 100644 index 0000000000..f4972557ab --- /dev/null +++ b/site/content/tutorial/06-bindings/06-select-bindings/text.md @@ -0,0 +1,13 @@ +--- +title: Select bindings +--- + +We can also use `bind:value` with ` +``` + +Note that the ` + {/each} + +``` \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/08-each-block-bindings/app-a/App.svelte b/site/content/tutorial/06-bindings/08-each-block-bindings/app-a/App.svelte new file mode 100644 index 0000000000..6a92e03cca --- /dev/null +++ b/site/content/tutorial/06-bindings/08-each-block-bindings/app-a/App.svelte @@ -0,0 +1,39 @@ + + +

    Todos

    + +{#each todos as todo} +
    + + + +
    +{/each} + + + + diff --git a/site/content/tutorial/06-bindings/08-each-block-bindings/app-b/App.svelte b/site/content/tutorial/06-bindings/08-each-block-bindings/app-b/App.svelte new file mode 100644 index 0000000000..92bdc7754f --- /dev/null +++ b/site/content/tutorial/06-bindings/08-each-block-bindings/app-b/App.svelte @@ -0,0 +1,39 @@ + + +

    Todos

    + +{#each todos as todo} +
    + + + +
    +{/each} + + + + diff --git a/site/content/tutorial/06-bindings/08-each-block-bindings/text.md b/site/content/tutorial/06-bindings/08-each-block-bindings/text.md new file mode 100644 index 0000000000..7e50966c32 --- /dev/null +++ b/site/content/tutorial/06-bindings/08-each-block-bindings/text.md @@ -0,0 +1,19 @@ +--- +title: Each block bindings +--- + +You can even bind to properties inside an `each` block. + +```html + + + +``` + +> Note that interacting with these `` elements will mutate the array. If you prefer to work with immutable data, you should avoid these bindings and use event handlers instead. \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/09-media-elements/app-a/App.svelte b/site/content/tutorial/06-bindings/09-media-elements/app-a/App.svelte new file mode 100644 index 0000000000..a80588d398 --- /dev/null +++ b/site/content/tutorial/06-bindings/09-media-elements/app-a/App.svelte @@ -0,0 +1,127 @@ + + + + +

    Caminandes: Llamigos

    +

    From Blender Open Projects. CC-BY

    + +
    + + +
    + + +
    + {format(time)} + click anywhere to {paused ? 'play' : 'pause'} / drag to seek + {format(duration)} +
    +
    +
    \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/09-media-elements/app-b/App.svelte b/site/content/tutorial/06-bindings/09-media-elements/app-b/App.svelte new file mode 100644 index 0000000000..2cf819fca0 --- /dev/null +++ b/site/content/tutorial/06-bindings/09-media-elements/app-b/App.svelte @@ -0,0 +1,130 @@ + + + + +

    Caminandes: Llamigos

    +

    From Blender Open Projects. CC-BY

    + +
    + + +
    + + +
    + {format(time)} + click anywhere to {paused ? 'play' : 'pause'} / drag to seek + {format(duration)} +
    +
    +
    \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/09-media-elements/text.md b/site/content/tutorial/06-bindings/09-media-elements/text.md new file mode 100644 index 0000000000..df8beec05c --- /dev/null +++ b/site/content/tutorial/06-bindings/09-media-elements/text.md @@ -0,0 +1,38 @@ +--- +title: Media elements +--- + +The `