Merge pull request #1382 from sveltejs/gh-938

set window scroll from bindings on initialisation
sveltejs · Oct 28, 2018 · ed2a01b · ed2a01b
2 parents 8aef96b + d6f25a6
commit ed2a01b
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 13 deletions.
diff --git a/src/compile/render-dom/Renderer.ts b/src/compile/render-dom/Renderer.ts
@@ -2,6 +2,7 @@ import Block from './Block';
 import { CompileOptions } from '../../interfaces';
 import Component from '../Component';
 import FragmentWrapper from './wrappers/Fragment';
+import CodeBuilder from '../../utils/CodeBuilder';
 
 export default class Renderer {
 	component: Component; // TODO Maybe Renderer shouldn't know about Component?
@@ -10,7 +11,7 @@ export default class Renderer {
 	blocks: (Block | string)[];
 	readonly: Set<string>;
 	slots: Set<string>;
-	metaBindings: string[];
+	metaBindings: CodeBuilder;
 	bindingGroups: string[];
 
 	block: Block;
@@ -35,7 +36,7 @@ export default class Renderer {
 		this.fileVar = options.dev && this.component.getUniqueName('file');
 
 		// initial values for e.g. window.innerWidth, if there's a <svelte:window> meta tag
-		this.metaBindings = [];
+		this.metaBindings = new CodeBuilder();
 
 		this.bindingGroups = [];
 

diff --git a/src/compile/render-dom/wrappers/Window.ts b/src/compile/render-dom/wrappers/Window.ts
@@ -97,14 +97,10 @@ export default class WindowWrapper extends Wrapper {
 			const property = properties[binding.name] || binding.name;
 
 			if (!events[associatedEvent]) events[associatedEvent] = [];
-			events[associatedEvent].push(
-				`${binding.value.node.name}: this.${property}`
-			);
-
-			// add initial value
-			renderer.metaBindings.push(
-				`this._state.${binding.value.node.name} = window.${property};`
-			);
+			events[associatedEvent].push({
+				name: binding.value.node.name,
+				value: property
+			});
 		});
 
 		const lock = block.getUniqueName(`window_updating`);
@@ -113,13 +109,35 @@ export default class WindowWrapper extends Wrapper {
 
 		Object.keys(events).forEach(event => {
 			const handlerName = block.getUniqueName(`onwindow${event}`);
-			const props = events[event].join(',\n');
+			const props = events[event];
 
 			if (event === 'scroll') {
 				// TODO other bidirectional bindings...
 				block.addVariable(lock, 'false');
 				block.addVariable(clear, `function() { ${lock} = false; }`);
 				block.addVariable(timeout);
+
+				const condition = [
+					bindings.scrollX && `"${bindings.scrollX}" in this._state`,
+					bindings.scrollY && `"${bindings.scrollY}" in this._state`
+				].filter(Boolean).join(' || ');
+
+ 				const x = bindings.scrollX && `this._state.${bindings.scrollX}`;
+				const y = bindings.scrollY && `this._state.${bindings.scrollY}`;
+
+				renderer.metaBindings.addBlock(deindent`
+					if (${condition}) {
+						window.scrollTo(${x || 'window.pageXOffset'}, ${y || 'window.pageYOffset'});
+					}
+					${x && `${x} = window.pageXOffset;`}
+					${y && `${y} = window.pageYOffset;`}
+				`);
+			} else {
+				props.forEach(prop => {
+					renderer.metaBindings.addLine(
+						`this._state.${prop.name} = window.${prop.value};`
+					);
+				});
 			}
 
 			const handlerBody = deindent`
@@ -130,7 +148,7 @@ export default class WindowWrapper extends Wrapper {
 				${component.options.dev && `component._updatingReadonlyProperty = true;`}
 
 				#component.set({
-					${props}
+					${props.map(prop => `${prop.name}: this.${prop.value}`)}
 				});
 
 				${component.options.dev && `component._updatingReadonlyProperty = false;`}
@@ -185,7 +203,7 @@ export default class WindowWrapper extends Wrapper {
 			`);
 
 			// add initial value
-			renderer.metaBindings.push(
+			renderer.metaBindings.addLine(
 				`this._state.${bindings.online} = navigator.onLine;`
 			);
 

diff --git a/test/js/samples/computed-collapsed-if/expected.js b/test/js/samples/computed-collapsed-if/expected.js
@@ -25,6 +25,7 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+
 	this._recompute({ x: 1 }, this._state);
 	this._intro = true;
 

diff --git a/test/js/samples/dev-warning-missing-data-computed/expected.js b/test/js/samples/dev-warning-missing-data-computed/expected.js
@@ -52,6 +52,7 @@ function SvelteComponent(options) {
 
 	init(this, options);
 	this._state = assign({ Math : Math }, options.data);
+
 	this._recompute({ foo: 1 }, this._state);
 	if (!('foo' in this._state)) console.warn("<SvelteComponent> was created without expected data property 'foo'");
 	this._intro = true;

diff --git a/test/js/samples/window-binding-scroll/expected.js b/test/js/samples/window-binding-scroll/expected.js
@@ -56,6 +56,9 @@ function create_main_fragment(component, ctx) {
 function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
+	if ("y" in this._state) {
+		window.scrollTo(window.pageXOffset, this._state.y);
+	}
 	this._state.y = window.pageYOffset;
 	this._intro = true;