Merge pull request #453 from sveltejs/refactor

Refactor

.eslintignore

@@ -1,3 +1,5 @@
 src/shared
 shared.js
-test/test.js
+test/test.js
+**/_actual.js
+**/expected.js

src/generators/Generator.js

@@ -12,11 +12,10 @@ import processCss from './shared/processCss.js';
 import annotateWithScopes from './annotateWithScopes.js';
 
 export default class Generator {
-	constructor ( parsed, source, name, visitors, options ) {
+	constructor ( parsed, source, name, options ) {
 		this.parsed = parsed;
 		this.source = source;
 		this.name = name;
-		this.visitors = visitors;
 		this.options = options;
 
 		this.imports = [];
@@ -31,8 +30,6 @@ export default class Generator {
 		// in dev mode
 		this.expectedProperties = new Set();
 
-		this.elementDepth = 0;
-
 		this.code = new MagicString( source );
 		this.css = parsed.css ? processCss( parsed, this.code ) : null;
 		this.cssId = parsed.css ? `svelte-${parsed.hash}` : '';
@@ -43,8 +40,6 @@ export default class Generator {
 		this.importedNames = new Set();
 		this._aliases = new Map();
 		this._usedNames = new Set();
-
-		this._callbacks = new Map();
 	}
 
 	addSourcemapLocations ( node ) {
@@ -65,14 +60,14 @@ export default class Generator {
 		return alias;
 	}
 
-	contextualise ( expression, isEventHandler ) {
+	contextualise ( fragment, expression, isEventHandler ) {
 		this.addSourcemapLocations( expression );
 
 		const usedContexts = [];
 		const dependencies = [];
 
 		const { code, helpers } = this;
-		const { contextDependencies, contexts, indexes } = this.current;
+		const { contextDependencies, contexts, indexes } = fragment;
 
 		let scope = annotateWithScopes( expression );
 
@@ -154,15 +149,6 @@ export default class Generator {
 		};
 	}
 
-	fire ( eventName, data ) {
-		const handlers = this._callbacks.has( eventName ) && this._callbacks.get( eventName ).slice();
-		if ( !handlers ) return;
-
-		for ( let i = 0; i < handlers.length; i += 1 ) {
-			handlers[i].call( this, data );
-		}
-	}
-
 	generate ( result, options, { name, format } ) {
 		if ( this.imports.length ) {
 			const statements = [];
@@ -430,50 +416,4 @@ export default class Generator {
 			templateProperties
 		};
 	}
-
-	on ( eventName, handler ) {
-		if ( this._callbacks.has( eventName ) ) {
-			this._callbacks.get( eventName ).push( handler );
-		} else {
-			this._callbacks.set( eventName, [ handler ] );
-		}
-	}
-
-	pop () {
-		const tail = this.current;
-		this.current = tail.parent;
-
-		return tail;
-	}
-
-	push ( fragment ) {
-		const newFragment = Object.assign( {}, this.current, fragment, {
-			parent: this.current
-		});
-
-		this.current = newFragment;
-	}
-
-	visit ( node ) {
-		const visitor = this.visitors[ node.type ];
-		if ( !visitor ) throw new Error( `Not implemented: ${node.type}` );
-
-		if ( visitor.enter ) visitor.enter( this, node );
-
-		if ( visitor.type === 'Element' ) {
-			this.elementDepth += 1;
-		}
-
-		if ( node.children ) {
-			node.children.forEach( child => {
-				this.visit( child );
-			});
-		}
-
-		if ( visitor.type === 'Element' ) {
-			this.elementDepth -= 1;
-		}
-
-		if ( visitor.leave ) visitor.leave( this, node );
-	}
 }

src/generators/dom/Block.js

@@ -0,0 +1,140 @@
+import CodeBuilder from '../../utils/CodeBuilder.js';
+import deindent from '../../utils/deindent.js';
+
+export default class Block {
+	constructor ({ generator, name, key, expression, context, contextDependencies, contexts, indexes, params, indexNames, listNames }) {
+		this.generator = generator;
+		this.name = name;
+		this.key = key;
+		this.expression = expression;
+		this.context = context;
+
+		this.contexts = contexts;
+		this.indexes = indexes;
+		this.contextDependencies = contextDependencies;
+
+		this.params = params;
+		this.indexNames = indexNames;
+		this.listNames = listNames;
+
+		this.builders = {
+			create: new CodeBuilder(),
+			mount: new CodeBuilder(),
+			update: new CodeBuilder(),
+			detach: new CodeBuilder(),
+			detachRaw: new CodeBuilder(),
+			destroy: new CodeBuilder()
+		};
+
+		this.getUniqueName = generator.getUniqueNameMaker( params );
+
+		// unique names
+		this.component = this.getUniqueName( 'component' );
+	}
+
+	addElement ( name, renderStatement, parentNode, needsIdentifier = false ) {
+		const isToplevel = !parentNode;
+		if ( needsIdentifier || isToplevel ) {
+			this.builders.create.addLine(
+				`var ${name} = ${renderStatement};`
+			);
+
+			this.createMountStatement( name, parentNode );
+		} else {
+			this.builders.create.addLine( `${this.generator.helper( 'appendNode' )}( ${renderStatement}, ${parentNode} );` );
+		}
+
+		if ( isToplevel ) {
+			this.builders.detach.addLine( `${this.generator.helper( 'detachNode' )}( ${name} );` );
+		}
+	}
+
+	child ( options ) {
+		return new Block( Object.assign( {}, this, options, { parent: this } ) );
+	}
+
+	createAnchor ( name, parentNode ) {
+		const renderStatement = `${this.generator.helper( 'createComment' )}()`;
+		this.addElement( name, renderStatement, parentNode, true );
+	}
+
+	createMountStatement ( name, parentNode ) {
+		if ( parentNode ) {
+			this.builders.create.addLine( `${this.generator.helper( 'appendNode' )}( ${name}, ${parentNode} );` );
+		} else {
+			this.builders.mount.addLine( `${this.generator.helper( 'insertNode' )}( ${name}, target, anchor );` );
+		}
+	}
+
+	render () {
+		if ( this.autofocus ) {
+			this.builders.create.addLine( `${this.autofocus}.focus();` );
+		}
+
+		// minor hack – we need to ensure that any {{{triples}}} are detached
+		// first, so we append normal detach statements to detachRaw
+		this.builders.detachRaw.addBlock( this.builders.detach );
+
+		if ( !this.builders.detachRaw.isEmpty() ) {
+			this.builders.destroy.addBlock( deindent`
+				if ( detach ) {
+					${this.builders.detachRaw}
+				}
+			` );
+		}
+
+		const properties = new CodeBuilder();
+
+		let localKey;
+		if ( this.key ) {
+			localKey = this.getUniqueName( 'key' );
+			properties.addBlock( `key: ${localKey},` );
+		}
+
+		if ( this.builders.mount.isEmpty() ) {
+			properties.addBlock( `mount: ${this.generator.helper( 'noop' )},` );
+		} else {
+			properties.addBlock( deindent`
+				mount: function ( target, anchor ) {
+					${this.builders.mount}
+				},
+			` );
+		}
+
+		if ( this.builders.update.isEmpty() ) {
+			properties.addBlock( `update: ${this.generator.helper( 'noop' )},` );
+		} else {
+			if ( this._tmp ) this.builders.update.addBlockAtStart( `var ${this._tmp};` );
+			properties.addBlock( deindent`
+				update: function ( changed, ${this.params.join( ', ' )} ) {
+					${this.builders.update}
+				},
+			` );
+		}
+
+		if ( this.builders.destroy.isEmpty() ) {
+			properties.addBlock( `destroy: ${this.generator.helper( 'noop' )}` );
+		} else {
+			properties.addBlock( deindent`
+				destroy: function ( detach ) {
+					${this.builders.destroy}
+				}
+			` );
+		}
+
+		return deindent`
+			function ${this.name} ( ${this.params.join( ', ' )}, ${this.component}${this.key ? `, ${localKey}` : ''} ) {
+				${this.builders.create}
+
+				return {
+					${properties}
+				};
+			}
+		`;
+	}
+
+	tmp () {
+		if ( !this._tmp ) this._tmp = this.getUniqueName( 'tmp' );
+		return this._tmp;
+	}
+}