Merge remote-tracking branch 'upstream/master' into hmr-capture-state

CHANGELOG.md

@@ -24,6 +24,7 @@ Also:
 * Flush changes in newly attached block when using `{#await}` ([#3660](https://github.com/sveltejs/svelte/issues/3660))
 * Throw exception immediately when calling `createEventDispatcher()` after component instantiation ([#3667](https://github.com/sveltejs/svelte/pull/3667))
 * Fix globals shadowing contextual template scope ([#3674](https://github.com/sveltejs/svelte/issues/3674))
+* Fix `<svelte:window>` bindings to stores ([#3832](https://github.com/sveltejs/svelte/issues/3832))
 
 ## 3.12.1
 

site/content/examples/15-composition/04-modal/Modal.svelte

@@ -49,8 +49,6 @@
 
 	<!-- svelte-ignore a11y-autofocus -->
 	<button autofocus on:click={close}>close modal</button>
-
-	<a href="argh">argh</a>
 </div>
 
 <style>

site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte

@@ -3,7 +3,6 @@
 	import flash from './flash.js';
 
 	export let todo;
-	export let toggle;
 
 	let div;
 

site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte

@@ -5,7 +5,6 @@
 	import flash from './flash.js';
 
 	export let todo;
-	export let toggle;
 
 	let div;
 

src/compiler/compile/render_dom/wrappers/Window.ts

@@ -127,7 +127,7 @@ export default class WindowWrapper extends Wrapper {
 
 			component.partly_hoisted.push(b`
 				function ${id}() {
-					${props.map(prop => b`$$invalidate('${prop.name}', ${prop.name} = @_window.${prop.value});`)}
+					${props.map(prop => component.invalidate(prop.name, x`${prop.name} = @_window.${prop.value}`))}
 				}
 			`);
 
@@ -167,7 +167,7 @@ export default class WindowWrapper extends Wrapper {
 
 			component.partly_hoisted.push(b`
 				function ${id}() {
-					$$invalidate('${name}', ${name} = @_navigator.onLine);
+					${component.invalidate(name, x`${name} = @_navigator.onLine`)}
 				}
 			`);
 

src/compiler/compile/render_dom/wrappers/shared/Tag.ts

@@ -5,6 +5,7 @@ import Block from '../../Block';
 import MustacheTag from '../../../nodes/MustacheTag';
 import RawMustacheTag from '../../../nodes/RawMustacheTag';
 import { Node } from 'estree';
+import { changed } from './changed';
 
 export default class Tag extends Wrapper {
 	node: MustacheTag | RawMustacheTag;
@@ -39,10 +40,7 @@ export default class Tag extends Wrapper {
 		if (this.node.should_cache) block.add_variable(value, snippet); // TODO may need to coerce snippet to string
 
 		if (dependencies.length > 0) {
-			let condition = x`#changed.${dependencies[0]}`;
+			let condition = changed(dependencies);
-			for (let i = 1; i < dependencies.length; i += 1) {
-				condition = x`${condition} || #changed.${dependencies[i]}`;
-			}
 
 			if (block.has_outros) {
 				condition = x`!#current || ${condition}`;

test/helpers.js

@@ -52,12 +52,19 @@ global.document = window.document;
 global.navigator = window.navigator;
 global.getComputedStyle = window.getComputedStyle;
 global.requestAnimationFrame = null; // placeholder, filled in using set_raf
+global.window = window;
 
 // add missing ecmascript globals to window
 for (const key of Object.getOwnPropertyNames(global)) {
 	window[key] = window[key] || global[key];
 }
 
+// implement mock scroll
+window.scrollTo = function(pageXOffset, pageYOffset) {
+	window.pageXOffset = pageXOffset;
+	window.pageYOffset = pageYOffset;
+};
+
 export function env() {
 	window.document.title = '';
 	window.document.body.innerHTML = '<main></main>';
@@ -204,3 +211,25 @@ export function spaces(i) {
 	while (i--) result += ' ';
 	return result;
 }
+
+// fake timers
+const original_set_timeout = global.setTimeout;
+
+export function useFakeTimers() {
+	const callbacks = [];
+
+	global.setTimeout = function(fn) {
+		callbacks.push(fn);
+	};
+
+	return {
+		flush() {
+			callbacks.forEach(fn => fn());
+			callbacks.splice(0, callbacks.length);
+		},
+		removeFakeTimers() {
+			callbacks.splice(0, callbacks.length);
+			global.setTimeout = original_set_timeout;
+		}
+	};
+}

test/js/samples/window-binding-scroll/expected.js

@@ -68,7 +68,7 @@ function instance($$self, $$props, $$invalidate) {
 	let { y } = $$props;
 
 	function onwindowscroll() {
-		$$invalidate("y", y = window.pageYOffset);
+		$$invalidate("y", y = window.pageYOffset)
 	}
 
 	$$self.$set = $$props => {

test/runtime/index.js

@@ -190,7 +190,7 @@ describe("runtime", () => {
 						if (typeof config.error === 'function') {
 							config.error(assert, err);
 						} else {
-							assert.equal(config.error, err.message);
+							assert.equal(err.message, config.error);
 						}
 					} else {
 						throw err;

test/runtime/samples/binding-select-in-each-block/_config.js

@@ -1,5 +1,16 @@
 export default {
-	skip: true, // JSDOM...
+
+	ssrHtml: `
+		<select value='hullo'>
+			<option value='hullo'>Hullo</option>
+			<option value='world'>World</option>
+		</select>
+
+		<select value='world'>
+			<option value='hullo'>Hullo</option>
+			<option value='world'>World</option>
+		</select>
+	`,
 
 	html: `
 		<select>

test/runtime/samples/binding-select-in-each-block/main.svelte

@@ -1,3 +1,6 @@
+<script>
+	export let items;
+</script>
 {#each items as item}
 	<select bind:value={item.value}>
 		<option value="hullo">Hullo</option>

test/runtime/samples/binding-select-multiple/_config.js

@@ -1,49 +1,58 @@
 export default {
-	skip: true, // JSDOM
 
 	props: {
 		selected: [ 'two', 'three' ]
 	},
 
+	ssrHtml: `
+		<select multiple value="two,three">
+			<option value="one">one</option>
+			<option value="two">two</option>
+			<option value="three">three</option>
+		</select>
+
+		<p>selected: two, three</p>
+	`,
+
 	html: `
 		<select multiple>
-			<option>one</option>
+			<option value="one">one</option>
-			<option>two</option>
+			<option value="two">two</option>
-			<option>three</option>
+			<option value="three">three</option>
 		</select>
 
 		<p>selected: two, three</p>
 	`,
 
-	test({ assert, component, target, window }) {
+	async test({ assert, component, target, window }) {
 		const select = target.querySelector( 'select' );
 		const options = [ ...target.querySelectorAll( 'option' ) ];
 
 		const change = new window.Event( 'change' );
 
 		options[1].selected = false;
-		select.dispatchEvent( change );
+		await select.dispatchEvent( change );
 
 		assert.deepEqual( component.selected, [ 'three' ] );
 		assert.htmlEqual( target.innerHTML, `
 			<select multiple>
-				<option>one</option>
+				<option value="one">one</option>
-				<option>two</option>
+				<option value="two">two</option>
-				<option>three</option>
+				<option value="three">three</option>
 			</select>
 
 			<p>selected: three</p>
 		` );
 
 		options[0].selected = true;
-		select.dispatchEvent( change );
+		await select.dispatchEvent( change );
 
 		assert.deepEqual( component.selected, [ 'one', 'three' ] );
 		assert.htmlEqual( target.innerHTML, `
 			<select multiple>
-				<option>one</option>
+				<option value="one">one</option>
-				<option>two</option>
+				<option value="two">two</option>
-				<option>three</option>
+				<option value="three">three</option>
 			</select>
 
 			<p>selected: one, three</p>
@@ -57,9 +66,9 @@ export default {
 
 		assert.htmlEqual( target.innerHTML, `
 			<select multiple>
-				<option>one</option>
+				<option value="one">one</option>
-				<option>two</option>
+				<option value="two">two</option>
-				<option>three</option>
+				<option value="three">three</option>
 			</select>
 
 			<p>selected: one, two</p>

test/runtime/samples/binding-select-optgroup/_config.js

@@ -1,5 +1,15 @@
 export default {
-	skip: true, // JSDOM
+
+	ssrHtml: `
+		<h1>Hello undefined!</h1>
+
+		<select>
+			<option value="Harry">Harry</option>
+			<optgroup label="Group">
+				<option value="World">World</option>
+			</optgroup>
+		</select>
+	`,
 
 	html: `
 		<h1>Hello Harry!</h1>
@@ -12,17 +22,17 @@ export default {
 		</select>
 	`,
 
-	test({ assert, component, target, window }) {
+	async test({ assert, component, target, window }) {
 		const select = target.querySelector('select');
 		const options = [...target.querySelectorAll('option')];
 
-		assert.deepEqual(options, select.options);
+		assert.deepEqual(options, [...select.options]);
 		assert.equal(component.name, 'Harry');
 
 		const change = new window.Event('change');
 
 		options[1].selected = true;
-		select.dispatchEvent(change);
+		await select.dispatchEvent(change);
 
 		assert.equal(component.name, 'World');
 		assert.htmlEqual(target.innerHTML, `

test/runtime/samples/window-bind-scroll-update/_config.js

@@ -1,10 +1,37 @@
+import { env, useFakeTimers } from "../../../helpers";
+
+let clock;
+
 export default {
-	skip: true, // JSDOM
+	before_test()  {
+		clock = useFakeTimers();
+
+		const window = env();
+		Object.defineProperties(window, {
+			pageYOffset: {
+				value: 0,
+				configurable: true
+			},
+			pageXOffset: {
+				value: 0,
+				configurable: true
+			}
+		});
+	},
 
-	test({ assert, component, target, window }) {
+	after_test() {
+		clock.removeFakeTimers();
+		clock = null;
+	},
+
+	async test({ assert, component, target, window }) {
 		assert.equal(window.pageYOffset, 0);
 
+		// clear the previous 'scrolling' state
+		clock.flush();
 		component.scrollY = 100;
+
+		clock.flush();
 		assert.equal(window.pageYOffset, 100);
-	}
+	},
 };

test/runtime/samples/window-binding-resize/_config.js

@@ -1,16 +1,25 @@
 export default {
 	html: `<div>1024x768</div>`,
 
-	skip: true, // some weird stuff happening with JSDOM 11
+	before_test() {
-	// skip: /^v4/.test(process.version), // node 4 apparently does some dumb stuff
+		Object.defineProperties(window, {
+			innerWidth: {
+				value: 1024,
+				configurable: true
+			},
+			innerHeight: {
+				value: 768,
+				configurable: true
+			}
+		});
+	},
+
 	skip_if_ssr: true, // there's some kind of weird bug with this test... it compiles with the wrong require.extensions hook for some bizarre reason
 
 	async test({ assert, component, target, window }) {
 		const event = new window.Event('resize');
 
-		// JSDOM executes window event listeners with `global` rather than
+		Object.defineProperties(window, {
-		// `window` (bug?) so we need to do this
-		Object.defineProperties(global, {
 			innerWidth: {
 				value: 567,
 				configurable: true

test/runtime/samples/window-binding-scroll-store/_config.js

@@ -0,0 +1,29 @@
+export default {
+	skip_if_ssr: true,
+	before_test() {
+		Object.defineProperties(window, {
+			pageYOffset: {
+				value: 0,
+				configurable: true,
+			},
+		});
+	},
+	async test({ assert, component, target, window }) {
+		assert.equal(window.pageYOffset, 0);
+
+		const event = new window.Event('scroll');
+		Object.defineProperties(window, {
+			pageYOffset: {
+				value: 234,
+				configurable: true,
+			},
+		});
+
+		await window.dispatchEvent(event);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<p style="position: fixed; top: 1em; left: 1em;">scroll\ny\nis\n234.\n234\n*\n234\n=\n54756</p><div style="height: 9999px;"></div>`
+		);
+	},
+};

test/runtime/samples/window-binding-scroll-store/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	import { writable, derived } from 'svelte/store';
+	const y = writable(0);
+	const y_squared = derived(y, $y => $y * $y);
+</script>
+
+<svelte:window bind:scrollY={$y}/>
+
+<p style="position: fixed; top: 1em; left: 1em;">
+	scroll y is {$y}. {$y} * {$y} = {$y_squared}
+</p>
+
+<div style="height: 9999px">
+	
+</div>

test/runtime/samples/window-event/_config.js

@@ -1,16 +1,12 @@
 export default {
 	html: `<div>undefinedxundefined</div>`,
 
-	skip: true, // some weird stuff happening with JSDOM 11
-	// skip: /^v4/.test(process.version), // node 4 apparently does some dumb stuff
 	skip_if_ssr: true, // there's some kind of weird bug with this test... it compiles with the wrong require.extensions hook for some bizarre reason
 
 	async test({ assert, component, target, window }) {
 		const event = new window.Event('resize');
 
-		// JSDOM executes window event listeners with `global` rather than
+		Object.defineProperties(window, {
-		// `window` (bug?) so we need to do this
-		Object.defineProperties(global, {
 			innerWidth: {
 				value: 567,
 				configurable: true

test/runtime/samples/window-event/main.svelte

@@ -3,6 +3,6 @@
 	export let height;
 </script>
 
-<svelte:window on:resize='{() => width = this.innerWidth, height = this.innerHeight}'/>
+<svelte:window on:resize={function () { width = this.innerWidth, height = this.innerHeight; }}/>
 
 <div>{width}x{height}</div>

test/server-side-rendering/index.js

@@ -138,7 +138,7 @@ describe("ssr", () => {
 					if (typeof config.error === 'function') {
 						config.error(assert, err);
 					} else {
-						assert.equal(config.error, err.message);
+						assert.equal(err.message, config.error);
 					}
 				} else {
 					showOutput(cwd, compileOptions);