diff --git a/site/content/blog/2018-04-18-version-2.md b/site/content/blog/2018-04-18-version-2.md index 75239c1023..cde706795a 100644 --- a/site/content/blog/2018-04-18-version-2.md +++ b/site/content/blog/2018-04-18-version-2.md @@ -21,11 +21,6 @@ Each of these items is described in more depth below. If you get stuck, ask for list-style: none; } - li { - position: relative; - list-style: none; - } - li input { position: absolute; left: -2.5em; @@ -95,7 +90,7 @@ The Svelte compiler can still see which values `d` depends on, but it's no longe Again, you don't need to make this change manually — just run svelte-upgrade on your components, as shown above. -## Sorry, IE11. It's not you, it's...
well actually, yeah. It's you +## Sorry, IE11. It's not you, it's... well actually, yeah. It's you Svelte v1 was careful to only emit ES5 code, so that you wouldn't be forced to faff around with transpilers in order to use it. But it's 2018 now, and almost all browsers support modern JavaScript. By ditching the ES5 constraint, we can generate leaner code. diff --git a/site/content/guide/00-introduction.md b/site/content/guide/00-introduction.md index 04ed70d0f5..6892832989 100644 --- a/site/content/guide/00-introduction.md +++ b/site/content/guide/00-introduction.md @@ -8,17 +8,18 @@ Svelte is a tool for building fast web applications. It is similar to JavaScript frameworks such as React, Angular, Vue, and Ractive, which all share a goal of making it easy to build slick interactive user interfaces. -But there's a crucial difference: Svelte converts your app into ideal JavaScript at _build time_, rather than interpreting your application code at _run time_. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads. +But there's a crucial difference: Svelte converts your app into ideal JavaScript at *build time*, rather than interpreting your application code at *run time*. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads. You can build your entire app with Svelte, or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere, without the overhead of a dependency on a conventional framework. [Read the introductory blog post](/blog/frameworks-without-the-framework) to learn more about Svelte's goals and philosophy. + ### Understanding Svelte components -In Svelte, an application is composed from one or more _components_. A component is a reusable self-contained block of code that encapsulates markup, styles and behaviours that belong together. +In Svelte, an application is composed from one or more *components*. A component is a reusable self-contained block of code that encapsulates markup, styles and behaviours that belong together. -Like Ractive and Vue, Svelte promotes the concept of _single-file components_: a component is just an `.html` file. Here's a simple example: +Like Ractive and Vue, Svelte promotes the concept of *single-file components*: a component is just an `.html` file. Here's a simple example: ```html @@ -28,11 +29,11 @@ Like Ractive and Vue, Svelte promotes the concept of _single-file components_: a ```json /* { hidden: true } */ { - "name": "world" + name: 'world' } ``` -> Wherever you see links, click through for an interactive example +> Wherever you see REPL links, click through for an interactive example Svelte turns this into a JavaScript module that you can import into your app: @@ -41,8 +42,8 @@ Svelte turns this into a JavaScript module that you can import into your app: import App from './App.html'; const app = new App({ - target: document.querySelector('main'), - data: { name: 'world' }, + target: document.querySelector('main'), + data: { name: 'world' } }); // change the data associated with the template @@ -54,6 +55,7 @@ app.destroy(); Congratulations, you've just learned about half of Svelte's API! + ### Getting started Normally, this is the part where the instructions might tell you to add the framework to your page as a ` +``` + +For that reason, Svelte lets you use *event modifiers*: + +- [`preventDefault`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) +- [`stopPropagation`](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) +- [`passive`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters) — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so) +- [`once`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters) — removes the listener after the first invocation +- [`capture`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameter) + +> `passive` and `once` are not implemented in `legacy` mode + +The example above can be achieved with modifiers — no need for a custom method: + +```html + +
...
+``` + ### Custom events You can define your own custom events to handle complex user interactions like dragging and swiping. See the earlier section on [custom event handlers](guide#custom-event-handlers) for more information. @@ -379,7 +424,7 @@ Some bindings are *one-way*, meaning that the values are read-only. Most are *tw | Name | Applies to | Kind | |-----------------------------------------------------------------|----------------------------------------------|----------------------| | `value` | `` `