update content

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...<br>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.
 

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
 <!--{ title: 'Hello world!' }-->
@@ -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 <svg class="icon" style="color:var(--text)"><use xlink:href='#maximize-2' /></svg> links, click through for an interactive example
+> Wherever you see <strong style="font-weight: 700; font-size: 16px; font-family: Inconsolata, monospace; color: rgba(170,30,30, 0.8)">REPL</strong> links, click through for an interactive example
 
 Svelte turns this into a JavaScript module that you can import into your app:
 
@@ -42,7 +43,7 @@ import App from './App.html';
 
 const app = new App({
 	target: document.querySelector('main'),
-  data: { name: 'world' },
+	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 `<script>` tag. But because Svelte runs at build time, it works a little bit differently.
@@ -64,7 +66,7 @@ The best way to use Svelte is to integrate it into your build system – there
 
 #### Getting started using the REPL
 
-Going to the [REPL](/repl) and pressing the _download_ button on any of the examples will give you a .zip file containing everything you need to run that example locally. Just unzip it, `cd` to the directory, and run `npm install` and `npm run dev`. See [this blog post](/blog/the-easiest-way-to-get-started) for more information.
+Going to the [REPL](/repl) and pressing the *download* button on any of the examples will give you a .zip file containing everything you need to run that example locally. Just unzip it, `cd` to the directory, and run `npm install` and `npm run dev`. See [this blog post](/blog/the-easiest-way-to-get-started) for more information.
 
 #### Getting started using degit
 
@@ -85,8 +87,8 @@ npm run dev
 
 You can use any git repo you like — these are the 'official' templates:
 
-- [sveltejs/template](https://github.com/sveltejs/template) — this is what you get by downloading from the REPL
-- [sveltejs/template-webpack](https://github.com/sveltejs/template-webpack) — similar, but uses [webpack](https://webpack.js.org/) instead of [Rollup](https://rollupjs.org/guide/en)
+* [sveltejs/template](https://github.com/sveltejs/template) — this is what you get by downloading from the REPL
+* [sveltejs/template-webpack](https://github.com/sveltejs/template-webpack) — similar, but uses [webpack](https://webpack.js.org/) instead of [Rollup](https://rollupjs.org/guide/en)
 
 #### Getting started using the CLI
 
@@ -99,8 +101,7 @@ If you've installed `svelte` globally, you can use `svelte --help` for a complet
 svelte compile MyComponent.html > MyComponent.js
 svelte compile -i MyComponent.html -o MyComponent.js
 
-# Generate a UMD module from MyComponent.html,
-# inferring its name from the filename ('MyComponent')
+# Generate a UMD module from MyComponent.html, inferring its name from the filename ('MyComponent')
 svelte compile -f umd MyComponent.html > MyComponent.js
 
 # Generate a UMD module, specifying the name

site/content/guide/01-component-api.md

@@ -9,12 +9,17 @@ As we saw above, you create a component instance with the `new` keyword:
 import MyComponent from './MyComponent.html';
 
 const component = new MyComponent({
-	// `target` is the only required option – the element
-	// to render the component to
+	// `target` is the only required option. This is the
+	// DOM element your component will be appended to
 	target: document.querySelector('main'),
 
-	// `data` is optional. A component can also have
-	// default data – we'll learn about that later.
+	// `anchor` is optional.
+	// The component is inserted immediately before this
+	// DOM element, which must be a child of `target`
+	anchor: document.querySelector('main #child'),
+
+	// `data` is optional.
+	// A component can have default data – we'll learn about that later.
 	data: {
 		questions: [
 			'life',

site/content/guide/02-template-syntax.md

@@ -39,8 +39,7 @@ You can also use tags in attributes:
 	hideParagraph: false
 }
 ```
-[Boolean attributes](https://www.w3.org/TR/html5/infrastructure.html#sec-boolean-attributes) like `hidden` will be omitted if the tag expression evaluates to false.
-
+[Boolean attributes](https://www.w3.org/TR/html5/infrastructure.html#sec-boolean-attributes) like `hidden` will be omitted if the tag expression evaluates to false. Attributes will be removed from the element if their value is `undefined` or `null`.
 
 ### HTML
 

site/content/guide/06-special-components.md

@@ -29,7 +29,7 @@ Sometimes, a component needs to embed itself recursively — for example if you
 
 ### `<svelte:component>`
 
-If you don't know what kind of component to render until the app runs — in other words, it's driven by state — you can use `<svelte:component>`:
+If you don't know what kind of component to render until the app runs — in other words, it's driven by state (aka a dynamic component) — you can use `<svelte:component>`:
 
 ```html
 <!-- { title: '<svelte:component> tags' } -->
@@ -167,6 +167,11 @@ You can also bind to certain values — so far `innerWidth`, `outerWidth`, `inne
 ```
 
 
+### `<svelte:document>`
+
+The `<svelte:document>` tag, just like `<svelte:window>`, gives you a convenient way to declaratively add event listeners to the `document` object. This is useful for listening to events that don't fire on `window`, such as `mouseenter` and `mouseleave`.
+
+
 ### `<svelte:head>`
 
 If you're building an application with Svelte — particularly if you're using [Sapper](https://sapper.svelte.technology) — then it's likely you'll need to add some content to the `<head>` of your page, such as adding a `<title>` element.

site/content/guide/07-element-directives.md

@@ -76,6 +76,51 @@ The target node can be referenced as `this`, meaning you can do this sort of thi
 <input on:focus="this.select()" value="click to select">
 ```
 
+### Event handler modifiers
+
+While you can invoke methods like `event.stopPropagation` directly...
+
+```html
+<!-- { repl: false } -->
+<div on:click="event.stopPropagation()">...</div>
+```
+
+...it gets annoying if you want to combine that with some other behaviour:
+
+```html
+<!-- { repl: false } -->
+<div on:click="setFoo(event)">...</div>
+
+<script>
+	export default {
+		methods: {
+			setFoo(event) {
+				event.stopPropagation();
+				event.preventDefault();
+				this.set({ foo: true });
+			}
+		}
+	};
+</script>
+```
+
+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
+<!-- { repl: false } -->
+<div on:click|stopPropagation|preventDefault="set({ foo: true })">...</div>
+```
+
 ### 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`                                                         | `<input>` `<textarea>` `<select>`            | <span>Two-way</span> |
-| `checked`                                                       | `<input type=checkbox>`                      | <span>Two-way</span> |
+| `checked` `indeterminate`                                       | `<input type=checkbox>`                      | <span>Two-way</span> |
 | `group` (see note)                                              | `<input type=checkbox>` `<input type=radio>` | <span>Two-way</span> |
 | `currentTime` `paused` `played` `volume`                        | `<audio>` `<video>`                          | <span>Two-way</span> |
 | `buffered` `duration` `seekable`                                | `<audio>` `<video>`                          | <span>One-way</span> |
@@ -420,6 +465,8 @@ Here is a complete example of using two way bindings with a form:
 }
 ```
 
+> 'two way' bindings allow you to update a value in a nested property as seen in [checkbox input](repl?demo=binding-input-checkbox).
+
 ### Actions
 
 Actions let you decorate elements with additional functionality. Actions are functions which may return an object with lifecycle methods, `update` and `destroy`. The action will be called when its element is added to the DOM.

site/content/guide/11-state-management.md

@@ -28,7 +28,7 @@ Each instance of `Store` has `get`, `set`, `on` and `fire` methods that behave i
 ```js
 const { name } = store.get(); // 'world'
 
-store.on('state', ({ current }) => {
+store.on('state', ({ current, changed, previous }) => {
 	console.log(`hello ${current.name}`);
 });