Merge branch 'master' into optional-shadow-dom

.gitattributes

@@ -0,0 +1 @@
+*.svelte linguist-language=HTML

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## 3.1.0
+
+* Allow store subscribe functions to return an object with an `unsubscribe` method, providing native RxJS support ([#2549](https://github.com/sveltejs/svelte/issues/2549))
+
 ## 3.0.1
 
 * Prevent text input cursor jumping in Safari ([#2506](https://github.com/sveltejs/svelte/issues/2506))

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2016 [these people](https://github.com/sveltejs/svelte/graphs/contributors)
+Copyright (c) 2016-19 [these people](https://github.com/sveltejs/svelte/graphs/contributors)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -58,7 +58,7 @@ The source code for https://svelte.dev, including all the documentation, lives i
 
 ```bash
 cd site
-npm install
+npm install && npm run update
 npm run dev
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",

site/content/docs/03-run-time.md

@@ -573,10 +573,14 @@ component.$on(event, callback)
 
 Causes the `callback` function to be called whenever the component dispatches an `event`.
 
+A function is returned that will remove the event listener when called.
+
 ```js
-app.$on('selected', event => {
+const off = app.$on('selected', event => {
 	console.log(event.detail.selection);
 });
+
+off();
 ```
 
 #### `$destroy`

site/content/tutorial/05-events/03-event-modifiers/text.md

@@ -18,10 +18,10 @@ DOM event handlers can have *modifiers* that alter their behaviour. For example,
 
 The full list of modifiers:
 
-* `preventDefault` — calls `event.preventDefault()` before running the handler. Useful for e.g. client-side form handling
+* `preventDefault` — calls `event.preventDefault()` before running the handler. Useful for client-side form handling, for example.
 * `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 ([MDN docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture))
 * `once` — remove the handler after the first time it runs
 
-You can chain modifiers together, e.g. `on:click|once|capture={...}`.
+You can chain modifiers together, e.g. `on:click|once|capture={...}`.

site/content/tutorial/06-bindings/09-media-elements/text.md

@@ -8,8 +8,8 @@ On line 116, add `currentTime={time}`, `duration` and `paused` bindings:
 
 ```html
 <video
-	poster="http://svelte-assets.surge.sh/caminandes-llamigos.jpg"
-	src="http://svelte-assets.surge.sh/caminandes-llamigos.mp4"
+	poster="https://svelte-assets.surge.sh/caminandes-llamigos.jpg"
+	src="https://svelte-assets.surge.sh/caminandes-llamigos.mp4"
 	on:mousemove={handleMousemove}
 	on:mousedown={handleMousedown}
 	bind:currentTime={time}
@@ -36,4 +36,4 @@ The complete set of bindings for `<audio>` and `<video>` is as follows — four
 * `currentTime` — the current point in the video, in seconds
 * `playbackRate` — how fast to play the video, where `1` is 'normal'
 * `paused` — this one should be self-explanatory
-* `volume` — a value between 0 and 1
+* `volume` — a value between 0 and 1

site/content/tutorial/06-bindings/11-bind-this/text.md

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

site/content/tutorial/10-transitions/07-local-transitions/text.md

@@ -4,7 +4,7 @@ title: Local transitions
 
 Ordinarily, transitions will play on elements when any container block is added or destroyed. In the example here, toggling the visibility of the entire list also applies transitions to individual list elements.
 
-Instead, we'd like transitions to play only when individual items are added and removed — on other words, when the user drags the slider.
+Instead, we'd like transitions to play only when individual items are added and removed — in other words, when the user drags the slider.
 
 We can achieve this with a *local* transition, which only plays when the immediate parent block is added or removed:
 
@@ -12,4 +12,4 @@ We can achieve this with a *local* transition, which only plays when the immedia
 <div transition:slide|local>
 	{item}
 </div>
-```
+```

site/content/tutorial/14-composition/04-slot-props/text.md

@@ -42,6 +42,6 @@ You can rename the variable, if you want — let's call it `active` in the paren
 </Hoverable>
 ```
 
-You can have as many of these components you like, and the slotted props will remain local to the component where they're declared.
+You can have as many of these components as you like, and the slotted props will remain local to the component where they're declared.
 
-> Named slots can also have props; use the `let` directive on an element with a `slot="..."` attribute, instead of on the component itself.
+> Named slots can also have props; use the `let` directive on an element with a `slot="..."` attribute, instead of on the component itself.

site/src/template.html

@@ -2,7 +2,7 @@
 <html lang='en' class="theme-default typo-default">
 <head>
 	<meta charset='utf-8'>
-	<meta name='viewport' content='width=device-width'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
 	<meta name='theme-color' content='#ff3e00'>
 
 	%sapper.base%

src/internal/utils.js

@@ -48,7 +48,11 @@ export function validate_store(store, name) {
 }
 
 export function subscribe(component, store, callback) {
-	component.$$.on_destroy.push(store.subscribe(callback));
+	const unsub = store.subscribe(callback);
+
+	component.$$.on_destroy.push(unsub.unsubscribe
+		? () => unsub.unsubscribe()
+		: unsub);
 }
 
 export function create_slot(definition, ctx, fn) {
@@ -74,4 +78,4 @@ export function exclude_internal_props(props) {
 	const result = {};
 	for (const k in props) if (k[0] !== '$') result[k] = props[k];
 	return result;
-}
+}

test/runtime/samples/observable-auto-subscribe/Nested.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let observable;
+</script>
+
+<p>value: {$observable}</p>

test/runtime/samples/observable-auto-subscribe/_config.js

@@ -0,0 +1,49 @@
+const subscribers = [];
+
+let value = 'initial';
+
+const observable = {
+	subscribe: fn => {
+		subscribers.push(fn);
+
+		fn(value);
+
+		return {
+			unsubscribe: () => {
+				const i = subscribers.indexOf(fn);
+				subscribers.splice(i, 1);
+			}
+		};
+	}
+};
+
+export default {
+	props: {
+		observable,
+		visible: false
+	},
+
+	html: ``,
+
+	async test({ assert, component, target }) {
+		assert.equal(subscribers.length, 0);
+
+		component.visible = true;
+
+		assert.equal(subscribers.length, 1);
+		assert.htmlEqual(target.innerHTML, `
+			<p>value: initial</p>
+		`);
+
+		value = 42;
+		await subscribers.forEach(fn => fn(value));
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>value: 42</p>
+		`);
+
+		component.visible = false;
+
+		assert.equal(subscribers.length, 0);
+	}
+};

test/runtime/samples/observable-auto-subscribe/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let observable;
+	export let visible;
+</script>
+
+{#if visible}
+	<Nested {observable}/>
+{/if}