Merge branch 'master' into improve-typings

site/content/examples/19-7guis/05-7guis-crud/App.svelte

@@ -30,10 +30,7 @@
 
 	$: selected = filteredPeople[i];
 
-	$: {
-		first = selected ? selected.first : '';
-		last = selected ? selected.last : '';
-	}
+	$: reset_inputs(selected);
 
 	function create() {
 		people = people.concat({ first, last });
@@ -53,7 +50,8 @@
 	}
 
 	function reset_inputs(person) {
-		({ first, last } = person);
+		first = person ? person.first : '';
+		last = person ? person.last : '';
 	}
 </script>
 

site/content/tutorial/12-actions/01-actions/text.md

@@ -27,7 +27,7 @@ import { pannable } from './pannable.js';
 ></div>
 ```
 
-Open the `pannable.js` file. Like transition functions, an action function receives a `node` and some optional parameters, and returns an action object. That object must have a `destroy` function, which is called when the element is unmounted.
+Open the `pannable.js` file. Like transition functions, an action function receives a `node` and some optional parameters, and returns an action object. That object can have a `destroy` function, which is called when the element is unmounted.
 
 We want to fire `panstart` event when the user mouses down on the element, `panmove` events (with `dx` and `dy` properties showing how far the mouse moved) when they drag it, and `panend` events when they mouse up. One possible implementation looks like this:
 
@@ -84,4 +84,3 @@ export function pannable(node) {
 Update the `pannable` function and try moving the box around.
 
 > This implementation is for demonstration purposes — a more complete one would also consider touch events.
-

site/src/routes/faq.js

@@ -0,0 +1,4 @@
+export function get(req, res) {
+	res.writeHead(302, { Location: 'https://github.com/sveltejs/svelte/wiki/FAQ' });
+	res.end();
+}

src/compile/nodes/Element.ts

@@ -548,7 +548,7 @@ export default class Element extends Node {
 						message: `'group' binding can only be used with <input type="checkbox"> or <input type="radio">`
 					});
 				}
-			} else if (name == 'files') {
+			} else if (name === 'files') {
 				if (this.name !== 'input') {
 					component.error(binding, {
 						code: `invalid-binding`,
@@ -564,6 +564,14 @@ export default class Element extends Node {
 						message: `'files' binding can only be used with <input type="file">`
 					});
 				}
+
+			} else if (name === 'open') {
+				if (this.name !== 'details') {
+					component.error(binding, {
+						code: `invalid-binding`,
+						message: `'${name}' binding can only be used with <details>`
+					});
+				}
 			} else if (
 				name === 'currentTime' ||
 				name === 'duration' ||

src/compile/render-dom/wrappers/Element/index.ts

@@ -90,6 +90,12 @@ const events = [
 			name === 'playbackRate'
 	},
 
+	// details event
+	{
+		event_names: ['toggle'],
+		filter: (node: Element, name: string) =>
+			node.name === 'details'
+	},
 ];
 
 export default class ElementWrapper extends Wrapper {
@@ -455,7 +461,7 @@ export default class ElementWrapper extends Wrapper {
 					function ${handler}() {
 						${animation_frame && deindent`
 						cancelAnimationFrame(${animation_frame});
-						if (!${this.var}.paused) ${animation_frame} = requestAnimationFrame(${handler});`}
+						if (!${this.var}.paused) ${animation_frame} = @raf(${handler});`}
 						${needs_lock && `${lock} = true;`}
 						ctx.${handler}.call(${this.var}${contextual_dependencies.size > 0 ? ', ctx' : ''});
 					}

src/internal/loop.js

@@ -1,4 +1,4 @@
-import { now } from './utils.js';
+import { now, raf } from './utils.js';
 
 const tasks = new Set();
 let running = false;
@@ -12,7 +12,7 @@ function run_tasks() {
 	});
 
 	running = tasks.size > 0;
-	if (running) requestAnimationFrame(run_tasks);
+	if (running) raf(run_tasks);
 }
 
 export function clear_loops() {
@@ -26,7 +26,7 @@ export function loop(fn) {
 
 	if (!running) {
 		running = true;
-		requestAnimationFrame(run_tasks);
+		raf(run_tasks);
 	}
 
 	return {

src/internal/style_manager.js

@@ -1,4 +1,5 @@
 import { element } from './dom.js';
+import { raf } from './utils.js';
 
 let stylesheet;
 let active = 0;
@@ -56,7 +57,7 @@ export function delete_rule(node, name) {
 }
 
 export function clear_rules() {
-	requestAnimationFrame(() => {
+	raf(() => {
 		if (active) return;
 		let i = stylesheet.cssRules.length;
 		while (i--) stylesheet.deleteRule(i);

src/internal/utils.js

@@ -80,11 +80,19 @@ export function exclude_internal_props(props) {
 	return result;
 }
 
-export let now = typeof window !== 'undefined'
+const is_client = typeof window !== 'undefined';
+
+export let now = is_client
 	? () => window.performance.now()
 	: () => Date.now();
 
+export let raf = is_client ? requestAnimationFrame : noop;
+
 // used internally for testing
 export function set_now(fn) {
 	now = fn;
+}
+
+export function set_raf(fn) {
+	raf = fn;
 }

test/js/samples/bind-open/expected.js

@@ -0,0 +1,69 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	var details, dispose;
+
+	return {
+		c() {
+			details = element("details");
+			details.innerHTML = `<summary>summary</summary>content
+			`;
+			dispose = listen(details, "toggle", ctx.details_toggle_handler);
+		},
+
+		m(target, anchor) {
+			insert(target, details, anchor);
+
+			details.open = ctx.open;
+		},
+
+		p(changed, ctx) {
+			if (changed.open) details.open = ctx.open;
+		},
+
+		i: noop,
+		o: noop,
+
+		d(detaching) {
+			if (detaching) {
+				detach(details);
+			}
+
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { open } = $$props;
+
+	function details_toggle_handler() {
+		open = this.open;
+		$$invalidate('open', open);
+	}
+
+	$$self.$set = $$props => {
+		if ('open' in $$props) $$invalidate('open', open = $$props.open);
+	};
+
+	return { open, details_toggle_handler };
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, ["open"]);
+	}
+}
+
+export default Component;

test/js/samples/bind-open/input.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let open;
+</script>
+
+<details bind:open={open}>
+	<summary>summary</summary>content
+</details>

test/js/samples/debug-hoisted/expected.js

@@ -53,4 +53,4 @@ class Component extends SvelteComponentDev {
 	}
 }
 
-export default Component;
+export default Component;

test/js/samples/media-bindings/expected.js

@@ -8,6 +8,7 @@ import {
 	insert,
 	listen,
 	noop,
+	raf,
 	run_all,
 	safe_not_equal,
 	time_ranges_to_array
@@ -18,7 +19,7 @@ function create_fragment(ctx) {
 
 	function audio_timeupdate_handler() {
 		cancelAnimationFrame(audio_animationframe);
-		if (!audio.paused) audio_animationframe = requestAnimationFrame(audio_timeupdate_handler);
+		if (!audio.paused) audio_animationframe = raf(audio_timeupdate_handler);
 		audio_updating = true;
 		ctx.audio_timeupdate_handler.call(audio);
 	}

test/runtime/index.js

@@ -3,7 +3,7 @@ import * as path from "path";
 import * as fs from "fs";
 import { rollup } from 'rollup';
 import * as virtual from 'rollup-plugin-virtual';
-import { clear_loops, set_now } from "../../internal.js";
+import { clear_loops, set_now, set_raf } from "../../internal.js";
 
 import {
 	showOutput,
@@ -101,7 +101,7 @@ describe("runtime", () => {
 						}
 					};
 					set_now(() => raf.time);
-					global.requestAnimationFrame = cb => {
+					set_raf(cb => {
 						let called = false;
 						raf.callback = () => {
 							if (!called) {
@@ -109,7 +109,7 @@ describe("runtime", () => {
 								cb();
 							}
 						};
-					};
+					});
 
 					try {
 						mod = require(`./samples/${dir}/main.svelte`);

test/runtime/samples/binding-details-open/_config.js

@@ -0,0 +1,25 @@
+export default {
+	html: `
+		<details><summary>toggle</summary></details>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const details = target.querySelector('details');
+		const event = new window.Event('toggle');
+
+		details.open = true;
+		await details.dispatchEvent(event);
+		assert.equal(component.visible, true);
+		assert.htmlEqual(target.innerHTML, `
+			<details open><summary>toggle</summary></details>
+			<p>hello!</p>
+		`);
+
+		details.open = false;
+		await details.dispatchEvent(event);
+		assert.equal(component.visible, false);
+		assert.htmlEqual(target.innerHTML, `
+			<details><summary>toggle</summary></details>
+		`);
+	}
+};

test/runtime/samples/binding-details-open/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	export let visible;
+</script>
+
+<details bind:open={visible}><summary>toggle</summary></details>
+
+{#if visible}
+	<p>hello!</p>
+{/if}