From 2866b11c7d43b6a9ae9bc573d1d42c032ff14aee Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 29 Apr 2018 18:32:28 -0400
Subject: [PATCH 1/6] WIP towards #984

---
 src/compile/nodes/Binding.ts                  |  17 +-
 src/compile/nodes/Element.ts                  |   9 +-
 src/shared/dom.js                             |  25 +++
 src/validate/html/validateElement.ts          |   2 +-
 .../bind-width-height.solo/expected-bundle.js | 178 ++++++++++++++++++
 .../bind-width-height.solo/expected.js        |  50 +++++
 .../samples/bind-width-height.solo/input.html |   3 +
 7 files changed, 278 insertions(+), 6 deletions(-)
 create mode 100644 test/js/samples/bind-width-height.solo/expected-bundle.js
 create mode 100644 test/js/samples/bind-width-height.solo/expected.js
 create mode 100644 test/js/samples/bind-width-height.solo/input.html

diff --git a/src/compile/nodes/Binding.ts b/src/compile/nodes/Binding.ts
index 3c56da0f43..bbe8aa46ac 100644
--- a/src/compile/nodes/Binding.ts
+++ b/src/compile/nodes/Binding.ts
@@ -14,6 +14,9 @@ const readOnlyMediaAttributes = new Set([
 	'played'
 ]);
 
+// TODO a lot of this element-specific stuff should live in Element —
+// Binding should ideally be agnostic between Element and Component
+
 export default class Binding extends Node {
 	name: string;
 	value: Expression;
@@ -57,7 +60,10 @@ export default class Binding extends Node {
 		const node: Element = this.parent;
 
 		const needsLock = node.name !== 'input' || !/radio|checkbox|range|color/.test(node.getStaticAttributeValue('type'));
-		const isReadOnly = node.isMediaNode() && readOnlyMediaAttributes.has(this.name);
+		const isReadOnly = (
+			(node.isMediaNode() && readOnlyMediaAttributes.has(this.name)) ||
+			this.name === 'width' || this.name === 'height'
+		);
 
 		let updateCondition: string;
 
@@ -103,8 +109,7 @@ export default class Binding extends Node {
 		if (this.name === 'currentTime' || this.name === 'volume') {
 			updateCondition = `!isNaN(${snippet})`;
 
-			if (this.name === 'currentTime')
-				initialUpdate = null;
+			if (this.name === 'currentTime') initialUpdate = null;
 		}
 
 		if (this.name === 'paused') {
@@ -117,6 +122,12 @@ export default class Binding extends Node {
 			initialUpdate = null;
 		}
 
+		// bind:width and bind:height
+		if (this.name === 'width' || this.name === 'height') {
+			initialUpdate = null;
+			updateDom = null;
+		}
+
 		return {
 			name: this.name,
 			object: name,
diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts
index a025eb7b05..3b84b0c369 100644
--- a/src/compile/nodes/Element.ts
+++ b/src/compile/nodes/Element.ts
@@ -262,7 +262,7 @@ export default class Element extends Node {
 			parentNode;
 
 		block.addVariable(name);
-		const renderStatement = getRenderStatement(this.compiler, this.namespace, this.name);
+		const renderStatement = getRenderStatement(this.namespace, this.name);
 		block.builders.create.addLine(
 			`${name} = ${renderStatement};`
 		);
@@ -916,7 +916,6 @@ export default class Element extends Node {
 }
 
 function getRenderStatement(
-	compiler: Compiler,
 	namespace: string,
 	name: string
 ) {
@@ -971,6 +970,12 @@ const events = [
 			node.name === 'input' && /radio|checkbox|range/.test(node.getStaticAttributeValue('type'))
 	},
 
+	{
+		eventNames: ['resize'],
+		filter: (node: Element, name: string) =>
+			(name === 'width' || name === 'height')
+	},
+
 	// media events
 	{
 		eventNames: ['timeupdate'],
diff --git a/src/shared/dom.js b/src/shared/dom.js
index 0eb53585d7..5661a121c1 100644
--- a/src/shared/dom.js
+++ b/src/shared/dom.js
@@ -193,3 +193,28 @@ export function selectMultipleValue(select) {
 		return option.__value;
 	});
 }
+
+export function addResizeListener(element, fn) {
+	if (getComputedStyle(element).position === 'static') {
+		element.style.position = 'relative';
+	}
+
+	const object = document.createElement('object');
+	object.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
+	object.type = 'text/html';
+
+	if (isIE) element.appendChild(object);
+	object.data = 'about:blank';
+	if (!isIE) element.appendChild(object);
+
+	object.onload = () => {
+		object.contentDocument.defaultView.addEventListener('resize', fn);
+	};
+
+	return {
+		cancel: () => {
+			object.contentDocument.defaultView.removeEventListener('resize', fn);
+			element.removeChild(object);
+		}
+	};
+}
\ No newline at end of file
diff --git a/src/validate/html/validateElement.ts b/src/validate/html/validateElement.ts
index 83de0b49aa..3e73d390b1 100644
--- a/src/validate/html/validateElement.ts
+++ b/src/validate/html/validateElement.ts
@@ -157,7 +157,7 @@ export default function validateElement(
 						message: `'${name}' binding can only be used with <audio> or <video>`
 					});
 				}
-			} else {
+			} else if (name !== 'width' && name !== 'height') {
 				validator.error(attribute, {
 					code: `invalid-binding`,
 					message: `'${attribute.name}' is not a valid binding`
diff --git a/test/js/samples/bind-width-height.solo/expected-bundle.js b/test/js/samples/bind-width-height.solo/expected-bundle.js
new file mode 100644
index 0000000000..66d67c2332
--- /dev/null
+++ b/test/js/samples/bind-width-height.solo/expected-bundle.js
@@ -0,0 +1,178 @@
+function noop() {}
+
+function assign(tar, src) {
+	for (var k in src) tar[k] = src[k];
+	return tar;
+}
+
+function insertNode(node, target, anchor) {
+	target.insertBefore(node, anchor);
+}
+
+function detachNode(node) {
+	node.parentNode.removeChild(node);
+}
+
+function createElement(name) {
+	return document.createElement(name);
+}
+
+function blankObject() {
+	return Object.create(null);
+}
+
+function destroy(detach) {
+	this.destroy = noop;
+	this.fire('destroy');
+	this.set = noop;
+
+	if (detach !== false) this._fragment.u();
+	this._fragment.d();
+	this._fragment = null;
+	this._state = {};
+}
+
+function _differs(a, b) {
+	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
+}
+
+function fire(eventName, data) {
+	var handlers =
+		eventName in this._handlers && this._handlers[eventName].slice();
+	if (!handlers) return;
+
+	for (var i = 0; i < handlers.length; i += 1) {
+		var handler = handlers[i];
+
+		if (!handler.__calling) {
+			handler.__calling = true;
+			handler.call(this, data);
+			handler.__calling = false;
+		}
+	}
+}
+
+function get() {
+	return this._state;
+}
+
+function init(component, options) {
+	component._handlers = blankObject();
+	component._bind = options._bind;
+
+	component.options = options;
+	component.root = options.root || component;
+	component.store = component.root.store || options.store;
+}
+
+function on(eventName, handler) {
+	var handlers = this._handlers[eventName] || (this._handlers[eventName] = []);
+	handlers.push(handler);
+
+	return {
+		cancel: function() {
+			var index = handlers.indexOf(handler);
+			if (~index) handlers.splice(index, 1);
+		}
+	};
+}
+
+function set(newState) {
+	this._set(assign({}, newState));
+	if (this.root._lock) return;
+	this.root._lock = true;
+	callAll(this.root._beforecreate);
+	callAll(this.root._oncreate);
+	callAll(this.root._aftercreate);
+	this.root._lock = false;
+}
+
+function _set(newState) {
+	var oldState = this._state,
+		changed = {},
+		dirty = false;
+
+	for (var key in newState) {
+		if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
+	}
+	if (!dirty) return;
+
+	this._state = assign(assign({}, oldState), newState);
+	this._recompute(changed, this._state);
+	if (this._bind) this._bind(changed, this._state);
+
+	if (this._fragment) {
+		this.fire("state", { changed: changed, current: this._state, previous: oldState });
+		this._fragment.p(changed, this._state);
+		this.fire("update", { changed: changed, current: this._state, previous: oldState });
+	}
+}
+
+function callAll(fns) {
+	while (fns && fns.length) fns.shift()();
+}
+
+function _mount(target, anchor) {
+	this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+}
+
+function _unmount() {
+	if (this._fragment) this._fragment.u();
+}
+
+var proto = {
+	destroy,
+	get,
+	fire,
+	on,
+	set,
+	_recompute: noop,
+	_set,
+	_mount,
+	_unmount,
+	_differs
+};
+
+/* generated by Svelte vX.Y.Z */
+
+function create_main_fragment(component, ctx) {
+	var div;
+
+	return {
+		c: function create() {
+			div = createElement("div");
+			div.textContent = "some content";
+		},
+
+		m: function mount(target, anchor) {
+			insertNode(div, target, anchor);
+
+			div.width = ctx.width ;
+			div.height = ctx.height;
+		},
+
+		p: noop,
+
+		u: function unmount() {
+			detachNode(div);
+		},
+
+		d: noop
+	};
+}
+
+function SvelteComponent(options) {
+	init(this, options);
+	this._state = assign({}, options.data);
+
+	this._fragment = create_main_fragment(this, this._state);
+
+	if (options.target) {
+		this._fragment.c();
+		this._mount(options.target, options.anchor);
+	}
+}
+
+assign(SvelteComponent.prototype, proto);
+
+export default SvelteComponent;
diff --git a/test/js/samples/bind-width-height.solo/expected.js b/test/js/samples/bind-width-height.solo/expected.js
new file mode 100644
index 0000000000..21b184cfaf
--- /dev/null
+++ b/test/js/samples/bind-width-height.solo/expected.js
@@ -0,0 +1,50 @@
+/* generated by Svelte vX.Y.Z */
+import { addResizeListener, assign, createElement, detachNode, init, insertNode, noop, proto } from "svelte/shared.js";
+
+function create_main_fragment(component, ctx) {
+	var div, div_resize_listener;
+
+	function div_resize_handler() {
+		component.set({ w: div.offsetWidth, h: offsetHeight });
+	}
+
+	return {
+		c: function create() {
+			div = createElement("div");
+			div.textContent = "some content";
+		},
+
+		h: function hydrate() {
+			div_resize_listener = addResizeListener(div, div_resize_handler);
+			component._beforecreate.push(div_resize_handler);
+		},
+
+		m: function mount(target, anchor) {
+			insertNode(div, target, anchor);
+		},
+
+		p: noop,
+
+		u: function unmount() {
+			div_resize_listener.cancel();
+			detachNode(div);
+		},
+
+		d: noop
+	};
+}
+
+function SvelteComponent(options) {
+	init(this, options);
+	this._state = assign({}, options.data);
+
+	this._fragment = create_main_fragment(this, this._state);
+
+	if (options.target) {
+		this._fragment.c();
+		this._mount(options.target, options.anchor);
+	}
+}
+
+assign(SvelteComponent.prototype, proto);
+export default SvelteComponent;
\ No newline at end of file
diff --git a/test/js/samples/bind-width-height.solo/input.html b/test/js/samples/bind-width-height.solo/input.html
new file mode 100644
index 0000000000..5565dc6f96
--- /dev/null
+++ b/test/js/samples/bind-width-height.solo/input.html
@@ -0,0 +1,3 @@
+<div bind:width=w bind:height=h>
+	some content
+</div>
\ No newline at end of file

From 541ec6c39723dbc75cb0038c27470179d4644dde Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 29 Apr 2018 19:17:52 -0400
Subject: [PATCH 2/6] bind to dimensions

---
 src/compile/nodes/Binding.ts                  |  7 +--
 src/compile/nodes/Element.ts                  | 37 +++++++++++---
 src/shared/dom.js                             | 12 +++--
 src/utils/patterns.ts                         |  2 +
 src/validate/html/validateElement.ts          |  3 +-
 .../samples/bind-width-height.solo/input.html |  3 --
 .../expected-bundle.js                        | 48 +++++++++++++++++--
 .../expected.js                               | 10 ++--
 test/js/samples/bind-width-height/input.html  |  3 ++
 9 files changed, 98 insertions(+), 27 deletions(-)
 delete mode 100644 test/js/samples/bind-width-height.solo/input.html
 rename test/js/samples/{bind-width-height.solo => bind-width-height}/expected-bundle.js (74%)
 rename test/js/samples/{bind-width-height.solo => bind-width-height}/expected.js (83%)
 create mode 100644 test/js/samples/bind-width-height/input.html

diff --git a/src/compile/nodes/Binding.ts b/src/compile/nodes/Binding.ts
index 771721cb34..e0f928ccfa 100644
--- a/src/compile/nodes/Binding.ts
+++ b/src/compile/nodes/Binding.ts
@@ -6,6 +6,7 @@ import flattenReference from '../../utils/flattenReference';
 import Compiler from '../Compiler';
 import Block from '../dom/Block';
 import Expression from './shared/Expression';
+import { dimensions } from '../../utils/patterns';
 
 const readOnlyMediaAttributes = new Set([
 	'duration',
@@ -62,7 +63,7 @@ export default class Binding extends Node {
 		const needsLock = node.name !== 'input' || !/radio|checkbox|range|color/.test(node.getStaticAttributeValue('type'));
 		const isReadOnly = (
 			(node.isMediaNode() && readOnlyMediaAttributes.has(this.name)) ||
-			this.name === 'width' || this.name === 'height'
+			dimensions.test(this.name)
 		);
 
 		let updateCondition: string;
@@ -122,8 +123,8 @@ export default class Binding extends Node {
 			initialUpdate = null;
 		}
 
-		// bind:width and bind:height
-		if (this.name === 'width' || this.name === 'height') {
+		// bind:offsetWidth and bind:offsetHeight
+		if (dimensions.test(this.name)) {
 			initialUpdate = null;
 			updateDom = null;
 		}
diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts
index 3b84b0c369..bb7d71fcd7 100644
--- a/src/compile/nodes/Element.ts
+++ b/src/compile/nodes/Element.ts
@@ -17,6 +17,7 @@ import Action from './Action';
 import Text from './Text';
 import * as namespaces from '../../utils/namespaces';
 import mapChildren from './shared/mapChildren';
+import { dimensions } from '../../utils/patterns';
 
 // source: https://gist.github.com/ArjanSchouten/0b8574a6ad7f5065a5e7
 const booleanAttributes = new Set('async autocomplete autofocus autoplay border challenge checked compact contenteditable controls default defer disabled formnovalidate frameborder hidden indeterminate ismap loop multiple muted nohref noresize noshade novalidate nowrap open readonly required reversed scoped scrolling seamless selected sortable spellcheck translate'.split(' '));
@@ -489,13 +490,27 @@ export default class Element extends Node {
 			`);
 
 			group.events.forEach(name => {
-				block.builders.hydrate.addLine(
-					`@addListener(${this.var}, "${name}", ${handler});`
-				);
+				if (name === 'resize') {
+					// special case
+					const resize_listener = block.getUniqueName(`${this.var}_resize_listener`);
+					block.addVariable(resize_listener);
 
-				block.builders.destroy.addLine(
-					`@removeListener(${this.var}, "${name}", ${handler});`
-				);
+					block.builders.mount.addLine(
+						`${resize_listener} = @addResizeListener(${this.var}, ${handler});`
+					);
+
+					block.builders.unmount.addLine(
+						`${resize_listener}.cancel();`
+					);
+				} else {
+					block.builders.hydrate.addLine(
+						`@addListener(${this.var}, "${name}", ${handler});`
+					);
+
+					block.builders.destroy.addLine(
+						`@removeListener(${this.var}, "${name}", ${handler});`
+					);
+				}
 			});
 
 			const allInitialStateIsDefined = group.bindings
@@ -509,6 +524,14 @@ export default class Element extends Node {
 					`if (!(${allInitialStateIsDefined})) #component.root._beforecreate.push(${handler});`
 				);
 			}
+
+			if (group.events[0] === 'resize') {
+				this.compiler.target.hasComplexBindings = true;
+
+				block.builders.hydrate.addLine(
+					`#component.root._beforecreate.push(${handler});`
+				);
+			}
 		});
 
 		this.initialUpdate = mungedBindings.map(binding => binding.initialUpdate).filter(Boolean).join('\n');
@@ -973,7 +996,7 @@ const events = [
 	{
 		eventNames: ['resize'],
 		filter: (node: Element, name: string) =>
-			(name === 'width' || name === 'height')
+			dimensions.test(name)
 	},
 
 	// media events
diff --git a/src/shared/dom.js b/src/shared/dom.js
index 5661a121c1..54778d1aaf 100644
--- a/src/shared/dom.js
+++ b/src/shared/dom.js
@@ -203,14 +203,18 @@ export function addResizeListener(element, fn) {
 	object.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
 	object.type = 'text/html';
 
-	if (isIE) element.appendChild(object);
-	object.data = 'about:blank';
-	if (!isIE) element.appendChild(object);
-
 	object.onload = () => {
 		object.contentDocument.defaultView.addEventListener('resize', fn);
 	};
 
+	if (/Trident/.test(navigator.userAgent)) {
+		element.appendChild(object);
+		object.data = 'about:blank';
+	} else {
+		object.data = 'about:blank';
+		element.appendChild(object);
+	}
+
 	return {
 		cancel: () => {
 			object.contentDocument.defaultView.removeEventListener('resize', fn);
diff --git a/src/utils/patterns.ts b/src/utils/patterns.ts
index 8fea930aa6..317a7c1990 100644
--- a/src/utils/patterns.ts
+++ b/src/utils/patterns.ts
@@ -1 +1,3 @@
 export const whitespace = /[ \t\r\n]/;
+
+export const dimensions = /^(?:offset|client)(?:Width|Height)$/;
diff --git a/src/validate/html/validateElement.ts b/src/validate/html/validateElement.ts
index 3e73d390b1..cd1db6664b 100644
--- a/src/validate/html/validateElement.ts
+++ b/src/validate/html/validateElement.ts
@@ -2,6 +2,7 @@ import * as namespaces from '../../utils/namespaces';
 import validateEventHandler from './validateEventHandler';
 import validate, { Validator } from '../index';
 import { Node } from '../../interfaces';
+import { dimensions } from '../../utils/patterns';
 
 const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
 
@@ -157,7 +158,7 @@ export default function validateElement(
 						message: `'${name}' binding can only be used with <audio> or <video>`
 					});
 				}
-			} else if (name !== 'width' && name !== 'height') {
+			} else if (!dimensions.test(name)) {
 				validator.error(attribute, {
 					code: `invalid-binding`,
 					message: `'${attribute.name}' is not a valid binding`
diff --git a/test/js/samples/bind-width-height.solo/input.html b/test/js/samples/bind-width-height.solo/input.html
deleted file mode 100644
index 5565dc6f96..0000000000
--- a/test/js/samples/bind-width-height.solo/input.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div bind:width=w bind:height=h>
-	some content
-</div>
\ No newline at end of file
diff --git a/test/js/samples/bind-width-height.solo/expected-bundle.js b/test/js/samples/bind-width-height/expected-bundle.js
similarity index 74%
rename from test/js/samples/bind-width-height.solo/expected-bundle.js
rename to test/js/samples/bind-width-height/expected-bundle.js
index 66d67c2332..acc96ca79d 100644
--- a/test/js/samples/bind-width-height.solo/expected-bundle.js
+++ b/test/js/samples/bind-width-height/expected-bundle.js
@@ -17,6 +17,35 @@ function createElement(name) {
 	return document.createElement(name);
 }
 
+function addResizeListener(element, fn) {
+	if (getComputedStyle(element).position === 'static') {
+		element.style.position = 'relative';
+	}
+
+	const object = document.createElement('object');
+	object.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
+	object.type = 'text/html';
+
+	if (/Trident/.test(navigator.userAgent)) {
+		element.appendChild(object);
+		object.data = 'about:blank';
+	} else {
+		object.data = 'about:blank';
+		element.appendChild(object);
+	}
+
+	object.onload = () => {
+		object.contentDocument.defaultView.addEventListener('resize', fn);
+	};
+
+	return {
+		cancel: () => {
+			object.contentDocument.defaultView.removeEventListener('resize', fn);
+			element.removeChild(object);
+		}
+	};
+}
+
 function blankObject() {
 	return Object.create(null);
 }
@@ -136,19 +165,26 @@ var proto = {
 /* generated by Svelte vX.Y.Z */
 
 function create_main_fragment(component, ctx) {
-	var div;
+	var div, div_resize_listener;
+
+	function div_resize_handler() {
+		component.set({ w: div.offsetWidth, h: div.offsetHeight });
+	}
 
 	return {
 		c: function create() {
 			div = createElement("div");
 			div.textContent = "some content";
+			this.h();
+		},
+
+		h: function hydrate() {
+			div_resize_listener = addResizeListener(div, div_resize_handler);
+			component.root._beforecreate.push(div_resize_handler);
 		},
 
 		m: function mount(target, anchor) {
 			insertNode(div, target, anchor);
-
-			div.width = ctx.width ;
-			div.height = ctx.height;
 		},
 
 		p: noop,
@@ -157,7 +193,9 @@ function create_main_fragment(component, ctx) {
 			detachNode(div);
 		},
 
-		d: noop
+		d: function destroy$$1() {
+			div_resize_listener.cancel();
+		}
 	};
 }
 
diff --git a/test/js/samples/bind-width-height.solo/expected.js b/test/js/samples/bind-width-height/expected.js
similarity index 83%
rename from test/js/samples/bind-width-height.solo/expected.js
rename to test/js/samples/bind-width-height/expected.js
index 21b184cfaf..55e58033ee 100644
--- a/test/js/samples/bind-width-height.solo/expected.js
+++ b/test/js/samples/bind-width-height/expected.js
@@ -5,18 +5,19 @@ function create_main_fragment(component, ctx) {
 	var div, div_resize_listener;
 
 	function div_resize_handler() {
-		component.set({ w: div.offsetWidth, h: offsetHeight });
+		component.set({ w: div.offsetWidth, h: div.offsetHeight });
 	}
 
 	return {
 		c: function create() {
 			div = createElement("div");
 			div.textContent = "some content";
+			this.h();
 		},
 
 		h: function hydrate() {
 			div_resize_listener = addResizeListener(div, div_resize_handler);
-			component._beforecreate.push(div_resize_handler);
+			component.root._beforecreate.push(div_resize_handler);
 		},
 
 		m: function mount(target, anchor) {
@@ -26,11 +27,12 @@ function create_main_fragment(component, ctx) {
 		p: noop,
 
 		u: function unmount() {
-			div_resize_listener.cancel();
 			detachNode(div);
 		},
 
-		d: noop
+		d: function destroy() {
+			div_resize_listener.cancel();
+		}
 	};
 }
 
diff --git a/test/js/samples/bind-width-height/input.html b/test/js/samples/bind-width-height/input.html
new file mode 100644
index 0000000000..c48fe356d0
--- /dev/null
+++ b/test/js/samples/bind-width-height/input.html
@@ -0,0 +1,3 @@
+<div bind:offsetWidth=w bind:offsetHeight=h>
+	some content
+</div>
\ No newline at end of file

From 1bacad1087af43700d7e44e2831628a279d86a1d Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 29 Apr 2018 19:21:30 -0400
Subject: [PATCH 3/6] update tests

---
 .../bind-width-height/expected-bundle.js      | 22 ++++++++++++-------
 test/js/samples/bind-width-height/expected.js | 16 +++++++++-----
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/test/js/samples/bind-width-height/expected-bundle.js b/test/js/samples/bind-width-height/expected-bundle.js
index acc96ca79d..23fac43e0d 100644
--- a/test/js/samples/bind-width-height/expected-bundle.js
+++ b/test/js/samples/bind-width-height/expected-bundle.js
@@ -26,6 +26,10 @@ function addResizeListener(element, fn) {
 	object.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
 	object.type = 'text/html';
 
+	object.onload = () => {
+		object.contentDocument.defaultView.addEventListener('resize', fn);
+	};
+
 	if (/Trident/.test(navigator.userAgent)) {
 		element.appendChild(object);
 		object.data = 'about:blank';
@@ -34,10 +38,6 @@ function addResizeListener(element, fn) {
 		element.appendChild(object);
 	}
 
-	object.onload = () => {
-		object.contentDocument.defaultView.addEventListener('resize', fn);
-	};
-
 	return {
 		cancel: () => {
 			object.contentDocument.defaultView.removeEventListener('resize', fn);
@@ -179,23 +179,22 @@ function create_main_fragment(component, ctx) {
 		},
 
 		h: function hydrate() {
-			div_resize_listener = addResizeListener(div, div_resize_handler);
 			component.root._beforecreate.push(div_resize_handler);
 		},
 
 		m: function mount(target, anchor) {
 			insertNode(div, target, anchor);
+			div_resize_listener = addResizeListener(div, div_resize_handler);
 		},
 
 		p: noop,
 
 		u: function unmount() {
 			detachNode(div);
+			div_resize_listener.cancel();
 		},
 
-		d: function destroy$$1() {
-			div_resize_listener.cancel();
-		}
+		d: noop
 	};
 }
 
@@ -203,11 +202,18 @@ function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
 
+	if (!options.root) {
+		this._oncreate = [];
+		this._beforecreate = [];
+	}
+
 	this._fragment = create_main_fragment(this, this._state);
 
 	if (options.target) {
 		this._fragment.c();
 		this._mount(options.target, options.anchor);
+
+		callAll(this._beforecreate);
 	}
 }
 
diff --git a/test/js/samples/bind-width-height/expected.js b/test/js/samples/bind-width-height/expected.js
index 55e58033ee..eafdfe2a83 100644
--- a/test/js/samples/bind-width-height/expected.js
+++ b/test/js/samples/bind-width-height/expected.js
@@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { addResizeListener, assign, createElement, detachNode, init, insertNode, noop, proto } from "svelte/shared.js";
+import { addResizeListener, assign, callAll, createElement, detachNode, init, insertNode, noop, proto } from "svelte/shared.js";
 
 function create_main_fragment(component, ctx) {
 	var div, div_resize_listener;
@@ -16,23 +16,22 @@ function create_main_fragment(component, ctx) {
 		},
 
 		h: function hydrate() {
-			div_resize_listener = addResizeListener(div, div_resize_handler);
 			component.root._beforecreate.push(div_resize_handler);
 		},
 
 		m: function mount(target, anchor) {
 			insertNode(div, target, anchor);
+			div_resize_listener = addResizeListener(div, div_resize_handler);
 		},
 
 		p: noop,
 
 		u: function unmount() {
 			detachNode(div);
+			div_resize_listener.cancel();
 		},
 
-		d: function destroy() {
-			div_resize_listener.cancel();
-		}
+		d: noop
 	};
 }
 
@@ -40,11 +39,18 @@ function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
 
+	if (!options.root) {
+		this._oncreate = [];
+		this._beforecreate = [];
+	}
+
 	this._fragment = create_main_fragment(this, this._state);
 
 	if (options.target) {
 		this._fragment.c();
 		this._mount(options.target, options.anchor);
+
+		callAll(this._beforecreate);
 	}
 }
 

From fe4637305b9ab919da0135cba496b2e54bea391d Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 29 Apr 2018 20:00:02 -0400
Subject: [PATCH 4/6] add validation logic, error on dimension bindings for SVG
 elements

---
 src/validate/html/validateElement.ts              | 14 +++++++++++++-
 .../binding-dimensions-svg-child/errors.json      | 15 +++++++++++++++
 .../binding-dimensions-svg-child/input.html       |  3 +++
 .../samples/binding-dimensions-svg/errors.json    | 15 +++++++++++++++
 .../samples/binding-dimensions-svg/input.html     |  1 +
 5 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 test/validator/samples/binding-dimensions-svg-child/errors.json
 create mode 100644 test/validator/samples/binding-dimensions-svg-child/input.html
 create mode 100644 test/validator/samples/binding-dimensions-svg/errors.json
 create mode 100644 test/validator/samples/binding-dimensions-svg/input.html

diff --git a/src/validate/html/validateElement.ts b/src/validate/html/validateElement.ts
index cd1db6664b..abba1161eb 100644
--- a/src/validate/html/validateElement.ts
+++ b/src/validate/html/validateElement.ts
@@ -158,7 +158,19 @@ export default function validateElement(
 						message: `'${name}' binding can only be used with <audio> or <video>`
 					});
 				}
-			} else if (!dimensions.test(name)) {
+			} else if (dimensions.test(name)) {
+				if (node.name === 'svg' && (name === 'offsetWidth' || name === 'offsetHeight')) {
+					validator.error(attribute, {
+						code: 'invalid-binding',
+						message: `'${attribute.name}' is not a valid binding on <svg>. Use '${name.replace('offset', 'client')}' instead`
+					});
+				} else if (svg.test(node.name)) {
+					validator.error(attribute, {
+						code: 'invalid-binding',
+						message: `'${attribute.name}' is not a valid binding on SVG elements`
+					});
+				}
+			} else {
 				validator.error(attribute, {
 					code: `invalid-binding`,
 					message: `'${attribute.name}' is not a valid binding`
diff --git a/test/validator/samples/binding-dimensions-svg-child/errors.json b/test/validator/samples/binding-dimensions-svg-child/errors.json
new file mode 100644
index 0000000000..d35946678e
--- /dev/null
+++ b/test/validator/samples/binding-dimensions-svg-child/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "'offsetWidth' is not a valid binding on SVG elements",
+	"pos": 13,
+	"start": {
+		"line": 2,
+		"column": 7,
+		"character": 13
+	},
+	"end": {
+		"line": 2,
+		"column": 23,
+		"character": 29
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-dimensions-svg-child/input.html b/test/validator/samples/binding-dimensions-svg-child/input.html
new file mode 100644
index 0000000000..8819dca703
--- /dev/null
+++ b/test/validator/samples/binding-dimensions-svg-child/input.html
@@ -0,0 +1,3 @@
+<svg>
+	<text bind:offsetWidth>some text</text>
+</svg>
\ No newline at end of file
diff --git a/test/validator/samples/binding-dimensions-svg/errors.json b/test/validator/samples/binding-dimensions-svg/errors.json
new file mode 100644
index 0000000000..930f577f22
--- /dev/null
+++ b/test/validator/samples/binding-dimensions-svg/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "'offsetWidth' is not a valid binding on <svg>. Use 'clientWidth' instead",
+	"pos": 5,
+	"start": {
+		"line": 1,
+		"column": 5,
+		"character": 5
+	},
+	"end": {
+		"line": 1,
+		"column": 21,
+		"character": 21
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-dimensions-svg/input.html b/test/validator/samples/binding-dimensions-svg/input.html
new file mode 100644
index 0000000000..ced9988f8f
--- /dev/null
+++ b/test/validator/samples/binding-dimensions-svg/input.html
@@ -0,0 +1 @@
+<svg bind:offsetWidth></svg>
\ No newline at end of file

From 4a67542becbbd39ea447ebea29dd87471499ff61 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 30 Apr 2018 08:57:50 -0400
Subject: [PATCH 5/6] prevent bind:offsetWidth etc on void elements

---
 src/validate/html/validateElement.ts              |  6 ++++++
 .../samples/binding-dimensions-void/errors.json   | 15 +++++++++++++++
 .../samples/binding-dimensions-void/input.html    |  1 +
 3 files changed, 22 insertions(+)
 create mode 100644 test/validator/samples/binding-dimensions-void/errors.json
 create mode 100644 test/validator/samples/binding-dimensions-void/input.html

diff --git a/src/validate/html/validateElement.ts b/src/validate/html/validateElement.ts
index abba1161eb..9f082e0fdd 100644
--- a/src/validate/html/validateElement.ts
+++ b/src/validate/html/validateElement.ts
@@ -3,6 +3,7 @@ import validateEventHandler from './validateEventHandler';
 import validate, { Validator } from '../index';
 import { Node } from '../../interfaces';
 import { dimensions } from '../../utils/patterns';
+import isVoidElementName from '../../utils/isVoidElementName';
 
 const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
 
@@ -169,6 +170,11 @@ export default function validateElement(
 						code: 'invalid-binding',
 						message: `'${attribute.name}' is not a valid binding on SVG elements`
 					});
+				} else if (isVoidElementName(node.name)) {
+					validator.error(attribute, {
+						code: 'invalid-binding',
+						message: `'${attribute.name}' is not a valid binding on void elements like <${node.name}>. Use a wrapper element instead`
+					});
 				}
 			} else {
 				validator.error(attribute, {
diff --git a/test/validator/samples/binding-dimensions-void/errors.json b/test/validator/samples/binding-dimensions-void/errors.json
new file mode 100644
index 0000000000..555cb33f5d
--- /dev/null
+++ b/test/validator/samples/binding-dimensions-void/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "'offsetWidth' is not a valid binding on void elements like <img>. Use a wrapper element instead",
+	"pos": 22,
+	"start": {
+		"line": 1,
+		"column": 22,
+		"character": 22
+	},
+	"end": {
+		"line": 1,
+		"column": 38,
+		"character": 38
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-dimensions-void/input.html b/test/validator/samples/binding-dimensions-void/input.html
new file mode 100644
index 0000000000..985f6b1930
--- /dev/null
+++ b/test/validator/samples/binding-dimensions-void/input.html
@@ -0,0 +1 @@
+<img src='potato.jpg' bind:offsetWidth>
\ No newline at end of file

From 8f8b1308b7030f9beda7441b54c3e48c46c79eb8 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 30 Apr 2018 09:09:03 -0400
Subject: [PATCH 6/6] update tests

---
 test/js/samples/bind-width-height/expected-bundle.js | 10 +++-------
 test/js/samples/bind-width-height/expected.js        | 10 +++-------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/test/js/samples/bind-width-height/expected-bundle.js b/test/js/samples/bind-width-height/expected-bundle.js
index 23fac43e0d..4d003e7e85 100644
--- a/test/js/samples/bind-width-height/expected-bundle.js
+++ b/test/js/samples/bind-width-height/expected-bundle.js
@@ -172,24 +172,20 @@ function create_main_fragment(component, ctx) {
 	}
 
 	return {
-		c: function create() {
+		c() {
 			div = createElement("div");
 			div.textContent = "some content";
-			this.h();
-		},
-
-		h: function hydrate() {
 			component.root._beforecreate.push(div_resize_handler);
 		},
 
-		m: function mount(target, anchor) {
+		m(target, anchor) {
 			insertNode(div, target, anchor);
 			div_resize_listener = addResizeListener(div, div_resize_handler);
 		},
 
 		p: noop,
 
-		u: function unmount() {
+		u() {
 			detachNode(div);
 			div_resize_listener.cancel();
 		},
diff --git a/test/js/samples/bind-width-height/expected.js b/test/js/samples/bind-width-height/expected.js
index eafdfe2a83..19014886a2 100644
--- a/test/js/samples/bind-width-height/expected.js
+++ b/test/js/samples/bind-width-height/expected.js
@@ -9,24 +9,20 @@ function create_main_fragment(component, ctx) {
 	}
 
 	return {
-		c: function create() {
+		c() {
 			div = createElement("div");
 			div.textContent = "some content";
-			this.h();
-		},
-
-		h: function hydrate() {
 			component.root._beforecreate.push(div_resize_handler);
 		},
 
-		m: function mount(target, anchor) {
+		m(target, anchor) {
 			insertNode(div, target, anchor);
 			div_resize_listener = addResizeListener(div, div_resize_handler);
 		},
 
 		p: noop,
 
-		u: function unmount() {
+		u() {
 			detachNode(div);
 			div_resize_listener.cancel();
 		},