From 4a5d4f482b56c0074962ec2c6d11fbdfeb5f5310 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Sun, 20 Nov 2016 22:52:42 -0500
Subject: [PATCH] =?UTF-8?q?constructors=20not=20factories=20=E2=80=93=20cl?=
 =?UTF-8?q?oses=20#2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 compiler/generate/index.js | 28 +++++++++++++++-------------
 test/test.js               |  6 +++---
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/compiler/generate/index.js b/compiler/generate/index.js
index bcf1270494..4b5d78c337 100644
--- a/compiler/generate/index.js
+++ b/compiler/generate/index.js
@@ -30,7 +30,7 @@ function createRenderer ( fragment ) {
 	`;
 }
 
-export default function generate ( parsed, template ) {
+export default function generate ( parsed, template, options = {} ) {
 	const code = new MagicString( template );
 
 	function addSourcemapLocations ( node ) {
@@ -609,13 +609,15 @@ export default function generate ( parsed, template ) {
 		dispatchObservers( observers.deferred, newState, oldState );
 	` );
 
+	const constructorName = options.name || 'SvelteComponent';
+
 	const result = deindent`
 		${parsed.js ? `[✂${parsed.js.content.start}-${parsed.js.content.end}✂]` : ``}
 
 		${renderers.reverse().join( '\n\n' )}
 
-		export default function createComponent ( options ) {
-			var component = ${templateProperties.methods ? `Object.create( template.methods )` : `{}`};${usesRefs ? `\ncomponent.refs = {}` : ``}
+		export default function ${constructorName} ( options ) {
+			var component = this;${usesRefs ? `\nthis.refs = {}` : ``}
 			var state = {};
 
 			var observers = {
@@ -641,15 +643,15 @@ export default function generate ( parsed, template ) {
 				}
 			}
 
-			component.get = function get ( key ) {
+			this.get = function get ( key ) {
 				return state[ key ];
 			};
 
-			component.set = function set ( newState ) {
+			this.set = function set ( newState ) {
 				${setStatements.join( '\n\n' )}
 			};
 
-			component.observe = function ( key, callback, options = {} ) {
+			this.observe = function ( key, callback, options = {} ) {
 				const group = options.defer ? observers.deferred : observers.immediate;
 
 				( group[ key ] || ( group[ key ] = [] ) ).push( callback );
@@ -663,22 +665,22 @@ export default function generate ( parsed, template ) {
 				};
 			};
 
-			component.teardown = function teardown () {
+			this.teardown = function teardown () {
 				mainFragment.teardown();
 				mainFragment = null;
 
 				state = {};
 
-				${templateProperties.onteardown ? `template.onteardown.call( component );` : ``}
+				${templateProperties.onteardown ? `template.onteardown.call( this );` : ``}
 			};
 
-			let mainFragment = renderMainFragment( component, options.target );
-			component.set( ${templateProperties.data ? `Object.assign( template.data(), options.data )` : `options.data`} );
-
-			${templateProperties.onrender ? `template.onrender.call( component );` : ``}
+			let mainFragment = renderMainFragment( this, options.target );
+			this.set( ${templateProperties.data ? `Object.assign( template.data(), options.data )` : `options.data`} );
 
-			return component;
+			${templateProperties.onrender ? `template.onrender.call( this );` : ``}
 		}
+
+		${templateProperties.methods ? `${constructorName}.prototype = template.methods` : ''}
 	`;
 
 	const pattern = /\[✂(\d+)-(\d+)$/;
diff --git a/test/test.js b/test/test.js
index f856948625..e57b20c8a1 100644
--- a/test/test.js
+++ b/test/test.js
@@ -96,10 +96,10 @@ describe( 'svelte', () => {
 
 				cache[ path.resolve( `test/compiler/${dir}/main.html` ) ] = code;
 
-				let factory;
+				let SvelteComponent;
 
 				try {
-					factory = require( `./compiler/${dir}/main.html` ).default;
+					SvelteComponent = require( `./compiler/${dir}/main.html` ).default;
 				} catch ( err ) {
 					console.log( withLineNumbers ); // eslint-disable-line no-console
 					throw err;
@@ -113,7 +113,7 @@ describe( 'svelte', () => {
 					.then( window => {
 						const target = window.document.querySelector( 'main' );
 
-						const component = factory({
+						const component = new SvelteComponent({
 							target,
 							data: config.data
 						});