From a16704fbf03e6d629ca21f4f26e27c400f726f18 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Sun, 18 Dec 2016 10:17:42 -0500
Subject: [PATCH 1/7] use helpers for DOM operations

---
 src/generators/dom/index.js                   | 77 +++++++++++++------
 src/generators/dom/visitors/Element.js        | 19 ++++-
 src/generators/dom/visitors/MustacheTag.js    |  3 +-
 src/generators/dom/visitors/RawMustacheTag.js |  6 +-
 src/generators/dom/visitors/Text.js           |  4 +-
 src/shared/index.js                           | 29 +++++++
 6 files changed, 105 insertions(+), 33 deletions(-)
 create mode 100644 src/shared/index.js

diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js
index 8088fbc91220..000ec6d75ffe 100644
--- a/src/generators/dom/index.js
+++ b/src/generators/dom/index.js
@@ -5,11 +5,13 @@ import namespaces from '../../utils/namespaces.js';
 import processCss from '../shared/css/process.js';
 import visitors from './visitors/index.js';
 import Generator from '../Generator.js';
+import * as shared from '../../shared/index.js';
 
 class DomGenerator extends Generator {
 	constructor ( parsed, source, names, visitors ) {
 		super( parsed, source, names, visitors );
 		this.renderers = [];
+		this.uses = {};
 	}
 
 	addElement ( name, renderStatement, needsIdentifier = false ) {
@@ -21,15 +23,13 @@ class DomGenerator extends Generator {
 
 			this.createMountStatement( name );
 		} else {
-			this.current.builders.init.addLine(
-				`${this.current.target}.appendChild( ${renderStatement} );`
-			);
+			this.uses.appendNode = true;
+			this.current.builders.init.addLine( `appendNode( ${renderStatement}, ${this.current.target} );` );
 		}
 
 		if ( isToplevel ) {
-			this.current.builders.detach.addLine(
-				`${name}.parentNode.removeChild( ${name} );`
-			);
+			this.uses.detachNode = true;
+			this.current.builders.detach.addLine( `detachNode( ${name} );` );
 		}
 	}
 
@@ -54,19 +54,38 @@ class DomGenerator extends Generator {
 
 		if ( fragment.key ) properties.addBlock( `key: key,` );
 
-		properties.addBlock( deindent`
-			mount: function ( target, anchor ) {
-				${fragment.builders.mount}
-			},
+		if ( fragment.builders.mount.isEmpty() ) {
+			this.uses.noop = true;
+			properties.addBlock( `mount: noop,` );
+		} else {
+			properties.addBlock( deindent`
+				mount: function ( target, anchor ) {
+					${fragment.builders.mount}
+				},
+			` );
+		}
 
-			update: function ( changed, ${fragment.params} ) {
-				${fragment.builders.update}
-			},
+		if ( fragment.builders.update.isEmpty() ) {
+			this.uses.noop = true;
+			properties.addBlock( `update: noop,` );
+		} else {
+			properties.addBlock( deindent`
+				update: function ( changed, ${fragment.params} ) {
+					${fragment.builders.update}
+				},
+			` );
+		}
 
-			teardown: function ( detach ) {
-				${fragment.builders.teardown}
-			}
-		` );
+		if ( fragment.builders.teardown.isEmpty() ) {
+			this.uses.noop = true;
+			properties.addBlock( `teardown: noop,` );
+		} else {
+			properties.addBlock( deindent`
+				teardown: function ( detach ) {
+					${fragment.builders.teardown}
+				},
+			` );
+		}
 
 		this.renderers.push( deindent`
 			function ${fragment.name} ( ${fragment.params}, component${fragment.key ? `, key` : ''} ) {
@@ -80,18 +99,18 @@ class DomGenerator extends Generator {
 	}
 
 	createAnchor ( name, description = '' ) {
-		const renderStatement = `document.createComment( ${JSON.stringify( description )} )`;
+		this.uses.createComment = true;
+		const renderStatement = `createComment( ${JSON.stringify( description )} )`;
 		this.addElement( name, renderStatement, true );
 	}
 
 	createMountStatement ( name ) {
 		if ( this.current.target === 'target' ) {
-			this.current.builders.mount.addLine(
-				`target.insertBefore( ${name}, anchor );`
-			);
+			this.uses.insertNode = true;
+			this.current.builders.mount.addLine( `insertNode( ${name}, target, anchor );` );
 		} else {
-			this.current.builders.init.addLine(
-				`${this.current.target}.appendChild( ${name} );` );
+			this.uses.appendNode = true;
+			this.current.builders.init.addLine( `appendNode( ${name}, ${this.current.target} );` );
 		}
 	}
 
@@ -192,12 +211,15 @@ export default function dom ( parsed, source, options, names ) {
 	}
 
 	if ( parsed.css && options.css !== false ) {
+		generator.uses.appendNode = true;
+		generator.uses.createElement = true;
+
 		builders.main.addBlock( deindent`
 			let addedCss = false;
 			function addCss () {
-				var style = document.createElement( 'style' );
+				var style = createElement( 'style' );
 				style.textContent = ${JSON.stringify( processCss( parsed ) )};
-				document.head.appendChild( style );
+				appendNode( style, document.head );
 
 				addedCss = true;
 			}
@@ -364,5 +386,10 @@ export default function dom ( parsed, source, options, names ) {
 		builders.main.addBlock( `${name}.prototype = template.methods;` );
 	}
 
+	Object.keys( generator.uses ).forEach( key => {
+		const fn = shared[ key ]; // eslint-disable-line import/namespace
+		builders.main.addBlock( fn.toString() );
+	});
+
 	return generator.generate( builders.main.toString(), options, { name, format } );
 }
diff --git a/src/generators/dom/visitors/Element.js b/src/generators/dom/visitors/Element.js
index 9409ff97107e..92bfec050017 100644
--- a/src/generators/dom/visitors/Element.js
+++ b/src/generators/dom/visitors/Element.js
@@ -57,9 +57,19 @@ export default {
 			local.update.addBlock( updates );
 		}
 
-		let render = local.namespace ?
-			`var ${name} = document.createElementNS( '${local.namespace}', '${node.name}' );` :
-			`var ${name} = document.createElement( '${node.name}' );`;
+		let render;
+
+		if ( local.namespace ) {
+			if ( local.namespace === 'http://www.w3.org/2000/svg' ) {
+				generator.uses.createSvgElement = true;
+				render = `var ${name} = createSvgElement( '${node.name}' )`;
+			} else {
+				render = `var ${name} = document.createElementNS( '${local.namespace}', '${node.name}' );`;
+			}
+		} else {
+			generator.uses.createElement = true;
+			render = `var ${name} = createElement( '${node.name}' );`;
+		}
 
 		if ( generator.cssId && !generator.elementDepth ) {
 			render += `\n${name}.setAttribute( '${generator.cssId}', '' );`;
@@ -67,7 +77,8 @@ export default {
 
 		local.init.addLineAtStart( render );
 		if ( isToplevel ) {
-			generator.current.builders.detach.addLine( `${name}.parentNode.removeChild( ${name} );` );
+			generator.uses.detachNode = true;
+			generator.current.builders.detach.addLine( `detachNode( ${name} );` );
 		}
 
 		// special case – bound <option> without a value attribute
diff --git a/src/generators/dom/visitors/MustacheTag.js b/src/generators/dom/visitors/MustacheTag.js
index f956a7be0839..8360a4737037 100644
--- a/src/generators/dom/visitors/MustacheTag.js
+++ b/src/generators/dom/visitors/MustacheTag.js
@@ -7,7 +7,8 @@ export default {
 		generator.addSourcemapLocations( node.expression );
 		const { snippet } = generator.contextualise( node.expression );
 
-		generator.addElement( name, `document.createTextNode( ${snippet} )`, true );
+		generator.uses.createText = true;
+		generator.addElement( name, `createText( ${snippet} )`, true );
 
 		generator.current.builders.update.addBlock( deindent`
 			${name}.data = ${snippet};
diff --git a/src/generators/dom/visitors/RawMustacheTag.js b/src/generators/dom/visitors/RawMustacheTag.js
index 191b3c8a9d99..f2573021853c 100644
--- a/src/generators/dom/visitors/RawMustacheTag.js
+++ b/src/generators/dom/visitors/RawMustacheTag.js
@@ -9,11 +9,13 @@ export default {
 
 		// we would have used comments here, but the `insertAdjacentHTML` api only
 		// exists for `Element`s.
+		generator.uses.createElement = true;
+
 		const before = `${name}_before`;
-		generator.addElement( before, `document.createElement( 'noscript' )`, true );
+		generator.addElement( before, `createElement( 'noscript' )`, true );
 
 		const after = `${name}_after`;
-		generator.addElement( after, `document.createElement( 'noscript' )`, true );
+		generator.addElement( after, `createElement( 'noscript' )`, true );
 
 		const isToplevel = generator.current.localElementDepth === 0;
 
diff --git a/src/generators/dom/visitors/Text.js b/src/generators/dom/visitors/Text.js
index fcc9f9b447ff..4c948f985fb1 100644
--- a/src/generators/dom/visitors/Text.js
+++ b/src/generators/dom/visitors/Text.js
@@ -5,6 +5,8 @@ export default {
 		}
 
 		const name = generator.current.getUniqueName( `text` );
-		generator.addElement( name, `document.createTextNode( ${JSON.stringify( node.data )} )`, false );
+		generator.addElement( name, `createText( ${JSON.stringify( node.data )} )`, false );
+
+		generator.uses.createText = true;
 	}
 };
diff --git a/src/shared/index.js b/src/shared/index.js
new file mode 100644
index 000000000000..55bc1c0433ed
--- /dev/null
+++ b/src/shared/index.js
@@ -0,0 +1,29 @@
+export function noop () {}
+
+export function appendNode ( node, target ) {
+	target.appendChild( node );
+}
+
+export function insertNode ( node, target, anchor ) {
+	target.insertBefore( node, anchor );
+}
+
+export function detachNode ( node ) {
+	node.parentNode.removeChild( node );
+}
+
+export function createElement ( name ) {
+	return document.createElement( name );
+}
+
+export function createSvgElement ( name ) {
+	return document.createElementNS( 'http://www.w3.org/2000/svg', name );
+}
+
+export function createText ( data ) {
+	return document.createTextNode( data );
+}
+
+export function createComment ( data ) {
+	return document.createComment( data );
+}

From 9d37ae4f4b0a53a834062b1e9c93638b0727ab24 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Sun, 18 Dec 2016 12:23:32 -0500
Subject: [PATCH 2/7] move methods out of constructor

---
 src/generators/dom/index.js | 135 +++++++++++-------------------------
 src/shared/dom.js           |  27 ++++++++
 src/shared/index.js         |  40 +++++------
 src/shared/methods.js       |  43 ++++++++++++
 4 files changed, 130 insertions(+), 115 deletions(-)
 create mode 100644 src/shared/dom.js
 create mode 100644 src/shared/methods.js

diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js
index 000ec6d75ffe..ecfcbab600ff 100644
--- a/src/generators/dom/index.js
+++ b/src/generators/dom/index.js
@@ -177,8 +177,8 @@ export default function dom ( parsed, source, options, names ) {
 		set: new CodeBuilder()
 	};
 
-	builders.set.addLine( 'var oldState = state;' );
-	builders.set.addLine( 'state = Object.assign( {}, oldState, newState );' );
+	builders.set.addLine( 'var oldState = this._state;' );
+	builders.set.addLine( 'this._state = Object.assign( {}, oldState, newState );' );
 
 	if ( computations.length ) {
 		const builder = new CodeBuilder();
@@ -197,13 +197,14 @@ export default function dom ( parsed, source, options, names ) {
 			}
 		` );
 
-		builders.set.addLine( `applyComputations( state, newState, oldState )` );
+		builders.set.addLine( `applyComputations( this._state, newState, oldState )` );
 	}
 
+	// TODO is the `if` necessary?
 	builders.set.addBlock( deindent`
-		dispatchObservers( observers.immediate, newState, oldState );
-		if ( mainFragment ) mainFragment.update( newState, state );
-		dispatchObservers( observers.deferred, newState, oldState );
+		dispatchObservers( this, this._observers.pre, newState, oldState );
+		if ( this._fragment ) this._fragment.update( newState, this._state );
+		dispatchObservers( this, this._observers.post, newState, oldState );
 	` );
 
 	if ( parsed.js ) {
@@ -240,7 +241,7 @@ export default function dom ( parsed, source, options, names ) {
 	if ( generator.hasComplexBindings ) {
 		builders.init.addBlock( deindent`
 			this.__bindings = [];
-			var mainFragment = renderMainFragment( state, this );
+			this._fragment = renderMainFragment( this._state, this );
 			if ( options.target ) this._mount( options.target );
 			while ( this.__bindings.length ) this.__bindings.pop()();
 		` );
@@ -248,7 +249,7 @@ export default function dom ( parsed, source, options, names ) {
 		builders.set.addLine( `while ( this.__bindings.length ) this.__bindings.pop()();` );
 	} else {
 		builders.init.addBlock( deindent`
-			var mainFragment = renderMainFragment( state, this );
+			this._fragment = renderMainFragment( this._state, this );
 			if ( options.target ) this._mount( options.target );
 		` );
 	}
@@ -280,105 +281,44 @@ export default function dom ( parsed, source, options, names ) {
 	builders.main.addBlock( deindent`
 		function ${name} ( options ) {
 			options = options || {};
+			${generator.usesRefs ? `\nthis.refs = {}` : ``}
+			this._state = ${initialState};${templateProperties.computed ? `\napplyComputations( this._state, this._state, {} );` : ``}
 
-			var component = this;${generator.usesRefs ? `\nthis.refs = {}` : ``}
-			var state = ${initialState};${templateProperties.computed ? `\napplyComputations( state, state, {} );` : ``}
-
-			var observers = {
-				immediate: Object.create( null ),
-				deferred: Object.create( null )
-			};
-
-			var callbacks = Object.create( null );
-
-			function dispatchObservers ( group, newState, oldState ) {
-				for ( var key in group ) {
-					if ( !( key in newState ) ) continue;
-
-					var newValue = newState[ key ];
-					var oldValue = oldState[ key ];
-
-					if ( newValue === oldValue && typeof newValue !== 'object' ) continue;
-
-					var callbacks = group[ key ];
-					if ( !callbacks ) continue;
-
-					for ( var i = 0; i < callbacks.length; i += 1 ) {
-						var callback = callbacks[i];
-						if ( callback.__calling ) continue;
-
-						callback.__calling = true;
-						callback.call( component, newValue, oldValue );
-						callback.__calling = false;
-					}
-				}
-			}
-
-			this.fire = function fire ( eventName, data ) {
-				var handlers = eventName in callbacks && callbacks[ eventName ].slice();
-				if ( !handlers ) return;
-
-				for ( var i = 0; i < handlers.length; i += 1 ) {
-					handlers[i].call( this, data );
-				}
+			this._observers = {
+				pre: Object.create( null ),
+				post: Object.create( null )
 			};
 
-			this.get = function get ( key ) {
-				return key ? state[ key ] : state;
-			};
+			this._handlers = Object.create( null );
 
-			this.set = function set ( newState ) {
-				${builders.set}
-			};
+			this.get = get;
+			this.fire = fire;
+			this.observe = observe;
+			this.on = on;
+			this.set = set;
+			this.teardown = teardown;
 
 			this._mount = function mount ( target, anchor ) {
-				mainFragment.mount( target, anchor );
+				this._fragment.mount( target, anchor );
 			}
 
-			this.observe = function ( key, callback, options ) {
-				var group = ( options && options.defer ) ? observers.deferred : observers.immediate;
-
-				( group[ key ] || ( group[ key ] = [] ) ).push( callback );
-
-				if ( !options || options.init !== false ) {
-					callback.__calling = true;
-					callback.call( component, state[ key ] );
-					callback.__calling = false;
-				}
-
-				return {
-					cancel: function () {
-						var index = group[ key ].indexOf( callback );
-						if ( ~index ) group[ key ].splice( index, 1 );
-					}
-				};
-			};
-
-			this.on = function on ( eventName, handler ) {
-				var handlers = callbacks[ eventName ] || ( callbacks[ eventName ] = [] );
-				handlers.push( handler );
-
-				return {
-					cancel: function () {
-						var index = handlers.indexOf( handler );
-						if ( ~index ) handlers.splice( index, 1 );
-					}
-				};
-			};
+			this.root = options.root;
+			this.yield = options.yield;
 
-			this.teardown = function teardown ( detach ) {
-				this.fire( 'teardown' );${templateProperties.onteardown ? `\ntemplate.onteardown.call( this );` : ``}
+			${builders.init}
+		}
 
-				mainFragment.teardown( detach !== false );
-				mainFragment = null;
+		function set ( newState ) {
+			${builders.set}
+		}
 
-				state = {};
-			};
+		function teardown ( detach ) {
+			this.fire( 'teardown' );${templateProperties.onteardown ? `\ntemplate.onteardown.call( this );` : ``}
 
-			this.root = options.root;
-			this.yield = options.yield;
+			this._fragment.teardown( detach !== false );
+			this._fragment = null;
 
-			${builders.init}
+			this._state = {};
 		}
 	` );
 
@@ -386,6 +326,13 @@ export default function dom ( parsed, source, options, names ) {
 		builders.main.addBlock( `${name}.prototype = template.methods;` );
 	}
 
+	builders.main.addBlock( shared.fire.toString() );
+	builders.main.addBlock( shared.get.toString() );
+	builders.main.addBlock( shared.observe.toString() );
+	builders.main.addBlock( shared.on.toString() );
+
+	builders.main.addBlock( shared.dispatchObservers.toString() );
+
 	Object.keys( generator.uses ).forEach( key => {
 		const fn = shared[ key ]; // eslint-disable-line import/namespace
 		builders.main.addBlock( fn.toString() );
diff --git a/src/shared/dom.js b/src/shared/dom.js
new file mode 100644
index 000000000000..9db9b0338675
--- /dev/null
+++ b/src/shared/dom.js
@@ -0,0 +1,27 @@
+export function appendNode ( node, target ) {
+	target.appendChild( node );
+}
+
+export function insertNode ( node, target, anchor ) {
+	target.insertBefore( node, anchor );
+}
+
+export function detachNode ( node ) {
+	node.parentNode.removeChild( node );
+}
+
+export function createElement ( name ) {
+	return document.createElement( name );
+}
+
+export function createSvgElement ( name ) {
+	return document.createElementNS( 'http://www.w3.org/2000/svg', name );
+}
+
+export function createText ( data ) {
+	return document.createTextNode( data );
+}
+
+export function createComment ( data ) {
+	return document.createComment( data );
+}
diff --git a/src/shared/index.js b/src/shared/index.js
index 55bc1c0433ed..7f76df1b4559 100644
--- a/src/shared/index.js
+++ b/src/shared/index.js
@@ -1,29 +1,27 @@
-export function noop () {}
+export * from './dom.js';
+export * from './methods.js';
 
-export function appendNode ( node, target ) {
-	target.appendChild( node );
-}
+export function noop () {}
 
-export function insertNode ( node, target, anchor ) {
-	target.insertBefore( node, anchor );
-}
+export function dispatchObservers ( component, group, newState, oldState ) {
+	for ( var key in group ) {
+		if ( !( key in newState ) ) continue;
 
-export function detachNode ( node ) {
-	node.parentNode.removeChild( node );
-}
+		var newValue = newState[ key ];
+		var oldValue = oldState[ key ];
 
-export function createElement ( name ) {
-	return document.createElement( name );
-}
+		if ( newValue === oldValue && typeof newValue !== 'object' ) continue;
 
-export function createSvgElement ( name ) {
-	return document.createElementNS( 'http://www.w3.org/2000/svg', name );
-}
+		var callbacks = group[ key ];
+		if ( !callbacks ) continue;
 
-export function createText ( data ) {
-	return document.createTextNode( data );
-}
+		for ( var i = 0; i < callbacks.length; i += 1 ) {
+			var callback = callbacks[i];
+			if ( callback.__calling ) continue;
 
-export function createComment ( data ) {
-	return document.createComment( data );
+			callback.__calling = true;
+			callback.call( component, newValue, oldValue );
+			callback.__calling = false;
+		}
+	}
 }
diff --git a/src/shared/methods.js b/src/shared/methods.js
new file mode 100644
index 000000000000..4595a13523a6
--- /dev/null
+++ b/src/shared/methods.js
@@ -0,0 +1,43 @@
+export function get ( key ) {
+	return key ? this._state[ key ] : this._state;
+}
+
+export 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 ) {
+		handlers[i].call( this, data );
+	}
+}
+
+export function observe ( key, callback, options ) {
+	var group = ( options && options.defer ) ? this._observers.pre : this._observers.post;
+
+	( group[ key ] || ( group[ key ] = [] ) ).push( callback );
+
+	if ( !options || options.init !== false ) {
+		callback.__calling = true;
+		callback.call( this, this._state[ key ] );
+		callback.__calling = false;
+	}
+
+	return {
+		cancel: function () {
+			var index = group[ key ].indexOf( callback );
+			if ( ~index ) group[ key ].splice( index, 1 );
+		}
+	};
+}
+
+export 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 );
+		}
+	};
+}

From 09062bcef80a7ba16113aebe9424a97fdad55b0d Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Sun, 18 Dec 2016 12:23:46 -0500
Subject: [PATCH 3/7] ignore ES5 in src/shared

---
 .eslintignore | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 .eslintignore

diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 000000000000..bb90b88b7b87
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1 @@
+src/shared

From ef933ae93b0453aa890433078fb2ef85773c90fc Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Sun, 18 Dec 2016 12:29:46 -0500
Subject: [PATCH 4/7] remove _mount indirection

---
 src/generators/dom/index.js              | 8 ++------
 src/generators/dom/visitors/Component.js | 2 +-
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js
index ecfcbab600ff..a6b49044914c 100644
--- a/src/generators/dom/index.js
+++ b/src/generators/dom/index.js
@@ -242,7 +242,7 @@ export default function dom ( parsed, source, options, names ) {
 		builders.init.addBlock( deindent`
 			this.__bindings = [];
 			this._fragment = renderMainFragment( this._state, this );
-			if ( options.target ) this._mount( options.target );
+			if ( options.target ) this._fragment.mount( options.target, null );
 			while ( this.__bindings.length ) this.__bindings.pop()();
 		` );
 
@@ -250,7 +250,7 @@ export default function dom ( parsed, source, options, names ) {
 	} else {
 		builders.init.addBlock( deindent`
 			this._fragment = renderMainFragment( this._state, this );
-			if ( options.target ) this._mount( options.target );
+			if ( options.target ) this._fragment.mount( options.target, null );
 		` );
 	}
 
@@ -298,10 +298,6 @@ export default function dom ( parsed, source, options, names ) {
 			this.set = set;
 			this.teardown = teardown;
 
-			this._mount = function mount ( target, anchor ) {
-				this._fragment.mount( target, anchor );
-			}
-
 			this.root = options.root;
 			this.yield = options.yield;
 
diff --git a/src/generators/dom/visitors/Component.js b/src/generators/dom/visitors/Component.js
index 72294df8fb6b..7a3b7c98a87f 100644
--- a/src/generators/dom/visitors/Component.js
+++ b/src/generators/dom/visitors/Component.js
@@ -83,7 +83,7 @@ export default {
 		` );
 
 		if ( isToplevel ) {
-			generator.current.builders.mount.addLine( `${name}._mount( target, anchor );` );
+			generator.current.builders.mount.addLine( `${name}._fragment.mount( target, anchor );` );
 		}
 
 		if ( local.dynamicAttributes.length ) {

From 7dd129a3579ab4bd4bf9df924973574959d9f191 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Tue, 20 Dec 2016 09:01:39 -0500
Subject: [PATCH 5/7] make inter-component root and yield options _private

---
 src/generators/dom/index.js              | 8 ++++----
 src/generators/dom/visitors/Component.js | 4 ++--
 src/generators/dom/visitors/YieldTag.js  | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js
index a6b49044914c..c884ef3b0d87 100644
--- a/src/generators/dom/index.js
+++ b/src/generators/dom/index.js
@@ -268,8 +268,8 @@ export default function dom ( parsed, source, options, names ) {
 
 	if ( templateProperties.onrender ) {
 		builders.init.addBlock( deindent`
-			if ( options.root ) {
-				options.root.__renderHooks.push({ fn: template.onrender, context: this });
+			if ( options._root ) {
+				options._root.__renderHooks.push({ fn: template.onrender, context: this });
 			} else {
 				template.onrender.call( this );
 			}
@@ -298,8 +298,8 @@ export default function dom ( parsed, source, options, names ) {
 			this.set = set;
 			this.teardown = teardown;
 
-			this.root = options.root;
-			this.yield = options.yield;
+			this._root = options._root;
+			this._yield = options._yield;
 
 			${builders.init}
 		}
diff --git a/src/generators/dom/visitors/Component.js b/src/generators/dom/visitors/Component.js
index 7a3b7c98a87f..50bcc984660f 100644
--- a/src/generators/dom/visitors/Component.js
+++ b/src/generators/dom/visitors/Component.js
@@ -26,7 +26,7 @@ export default {
 
 		const componentInitProperties = [
 			`target: ${!isToplevel ? generator.current.target: 'null'}`,
-			'root: component.root || component'
+			'_root: component._root || component'
 		];
 
 		// Component has children, put them in a separate {{yield}} block
@@ -43,7 +43,7 @@ export default {
 				`${name}_yieldFragment.update( changed, root );`
 			);
 
-			componentInitProperties.push(`yield: ${name}_yieldFragment`);
+			componentInitProperties.push( `_yield: ${name}_yieldFragment`);
 		}
 
 		const statements = [];
diff --git a/src/generators/dom/visitors/YieldTag.js b/src/generators/dom/visitors/YieldTag.js
index a2ac7f57d7b4..5fefcd73a332 100644
--- a/src/generators/dom/visitors/YieldTag.js
+++ b/src/generators/dom/visitors/YieldTag.js
@@ -4,11 +4,11 @@ export default {
 		generator.createAnchor( anchor, 'yield' );
 
 		generator.current.builders.mount.addLine(
-			`component.yield && component.yield.mount( ${generator.current.target}, ${anchor} );`
+			`component._yield && component._yield.mount( ${generator.current.target}, ${anchor} );`
 		);
 
 		generator.current.builders.teardown.addLine(
-			`component.yield && component.yield.teardown( detach );`
+			`component._yield && component._yield.teardown( detach );`
 		);
 	}
 };

From c1e82f69e311ecb619ccbfd4617d3213c0d1996d Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Tue, 20 Dec 2016 09:13:23 -0500
Subject: [PATCH 6/7] single underscore for component private properties

---
 src/generators/dom/index.js                        | 14 +++++++-------
 .../dom/visitors/attributes/binding/index.js       |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js
index c884ef3b0d87..1c1017f022d3 100644
--- a/src/generators/dom/index.js
+++ b/src/generators/dom/index.js
@@ -235,18 +235,18 @@ export default function dom ( parsed, source, options, names ) {
 	}
 
 	if ( generator.hasComponents ) {
-		builders.init.addLine( `this.__renderHooks = [];` );
+		builders.init.addLine( `this._renderHooks = [];` );
 	}
 
 	if ( generator.hasComplexBindings ) {
 		builders.init.addBlock( deindent`
-			this.__bindings = [];
+			this._bindings = [];
 			this._fragment = renderMainFragment( this._state, this );
 			if ( options.target ) this._fragment.mount( options.target, null );
-			while ( this.__bindings.length ) this.__bindings.pop()();
+			while ( this._bindings.length ) this._bindings.pop()();
 		` );
 
-		builders.set.addLine( `while ( this.__bindings.length ) this.__bindings.pop()();` );
+		builders.set.addLine( `while ( this._bindings.length ) this._bindings.pop()();` );
 	} else {
 		builders.init.addBlock( deindent`
 			this._fragment = renderMainFragment( this._state, this );
@@ -256,8 +256,8 @@ export default function dom ( parsed, source, options, names ) {
 
 	if ( generator.hasComponents ) {
 		const statement = deindent`
-			while ( this.__renderHooks.length ) {
-				var hook = this.__renderHooks.pop();
+			while ( this._renderHooks.length ) {
+				var hook = this._renderHooks.pop();
 				hook.fn.call( hook.context );
 			}
 		`;
@@ -269,7 +269,7 @@ export default function dom ( parsed, source, options, names ) {
 	if ( templateProperties.onrender ) {
 		builders.init.addBlock( deindent`
 			if ( options._root ) {
-				options._root.__renderHooks.push({ fn: template.onrender, context: this });
+				options._root._renderHooks.push({ fn: template.onrender, context: this });
 			} else {
 				template.onrender.call( this );
 			}
diff --git a/src/generators/dom/visitors/attributes/binding/index.js b/src/generators/dom/visitors/attributes/binding/index.js
index 04113576646e..b21c561d37bf 100644
--- a/src/generators/dom/visitors/attributes/binding/index.js
+++ b/src/generators/dom/visitors/attributes/binding/index.js
@@ -87,7 +87,7 @@ export default function createBinding ( generator, node, attribute, current, loc
 		local.init.addBlock( deindent`
 			var ${local.name}_updating = false;
 
-			component.__bindings.push( function () {
+			component._bindings.push( function () {
 				${local.name}.observe( '${attribute.name}', function ( value ) {
 					${local.name}_updating = true;
 					${setter}
@@ -128,6 +128,6 @@ export default function createBinding ( generator, node, attribute, current, loc
 
 	if ( node.name === 'select' ) {
 		generator.hasComplexBindings = true;
-		local.init.addLine( `component.__bindings.push( ${handler} )` );
+		local.init.addLine( `component._bindings.push( ${handler} )` );
 	}
 }

From 7da9a23349839b448d8b578632d3fb882b6a43fb Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Tue, 20 Dec 2016 09:22:08 -0500
Subject: [PATCH 7/7] put component methods on prototype

---
 src/generators/dom/index.js | 38 ++++++++++++++++++-------------------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js
index 1c1017f022d3..2cc549f36230 100644
--- a/src/generators/dom/index.js
+++ b/src/generators/dom/index.js
@@ -291,42 +291,40 @@ export default function dom ( parsed, source, options, names ) {
 
 			this._handlers = Object.create( null );
 
-			this.get = get;
-			this.fire = fire;
-			this.observe = observe;
-			this.on = on;
-			this.set = set;
-			this.teardown = teardown;
-
 			this._root = options._root;
 			this._yield = options._yield;
 
 			${builders.init}
 		}
+	` );
+
+	if ( templateProperties.methods ) {
+		builders.main.addBlock( `${name}.prototype = template.methods;` );
+	}
+
+	builders.main.addBlock( deindent`
+		${name}.prototype.get = ${shared.get};
+
+		${name}.prototype.fire = ${shared.fire};
 
-		function set ( newState ) {
+		${name}.prototype.observe = ${shared.observe};
+
+		${name}.prototype.on = ${shared.on};
+
+		${name}.prototype.set = function set ( newState ) {
 			${builders.set}
-		}
+		};
 
-		function teardown ( detach ) {
+		${name}.prototype.teardown = function teardown ( detach ) {
 			this.fire( 'teardown' );${templateProperties.onteardown ? `\ntemplate.onteardown.call( this );` : ``}
 
 			this._fragment.teardown( detach !== false );
 			this._fragment = null;
 
 			this._state = {};
-		}
+		};
 	` );
 
-	if ( templateProperties.methods ) {
-		builders.main.addBlock( `${name}.prototype = template.methods;` );
-	}
-
-	builders.main.addBlock( shared.fire.toString() );
-	builders.main.addBlock( shared.get.toString() );
-	builders.main.addBlock( shared.observe.toString() );
-	builders.main.addBlock( shared.on.toString() );
-
 	builders.main.addBlock( shared.dispatchObservers.toString() );
 
 	Object.keys( generator.uses ).forEach( key => {