Only update dynamic subtrees

src/generators/Generator.js

@@ -66,12 +66,11 @@ export default class Generator {
 		this.addSourcemapLocations( expression );
 
 		const usedContexts = [];
-		const dependencies = [];
 
 		const { code, helpers } = this;
-		const { contextDependencies, contexts, indexes } = block;
+		const { contexts, indexes } = block;
 
-		let scope = annotateWithScopes( expression );
+		let scope = annotateWithScopes( expression ); // TODO this already happens in findDependencies
 		let lexicalDepth = 0;
 
 		const self = this;
@@ -108,7 +107,6 @@ export default class Generator {
 							code.overwrite( node.start, node.start + name.length, contextName, true );
 						}
 
-						dependencies.push( ...contextDependencies.get( name ) );
 						if ( !~usedContexts.indexOf( name ) ) usedContexts.push( name );
 					}
 
@@ -133,7 +131,6 @@ export default class Generator {
 							code.prependRight( node.start, `root.` );
 						}
 
-						dependencies.push( name );
 						if ( !~usedContexts.indexOf( 'root' ) ) usedContexts.push( 'root' );
 					}
 
@@ -147,18 +144,52 @@ export default class Generator {
 			}
 		});
 
+		return {
+			dependencies: expression._dependencies, // TODO probably a better way to do this
+			contexts: usedContexts,
+			snippet: `[✂${expression.start}-${expression.end}✂]`
+		};
+	}
+
+	findDependencies ( contextDependencies, expression ) {
+		if ( expression._dependencies ) return expression._dependencies;
+
+		let scope = annotateWithScopes( expression );
+		const dependencies = [];
+
+		walk( expression, {
+			enter ( node, parent ) {
+				if ( node._scope ) {
+					scope = node._scope;
+					return;
+				}
+
+				if ( isReference( node, parent ) ) {
+					const { name } = flattenReference( node );
+					if ( scope.has( name ) ) return;
+
+					if ( contextDependencies.has( name ) ) {
+						dependencies.push( ...contextDependencies.get( name ) );
+					} else {
+						dependencies.push( name );
+					}
+
+					this.skip();
+				}
+			},
+
+			leave ( node ) {
+				if ( node._scope ) scope = scope.parent;
+			}
+		});
+
 		dependencies.forEach( name => {
 			if ( !globalWhitelist.has( name ) ) {
 				this.expectedProperties.add( name );
 			}
 		});
 
-		return {
-			dependencies,
-			contexts: usedContexts,
-			snippet: `[✂${expression.start}-${expression.end}✂]`,
-			string: this.code.slice( expression.start, expression.end )
-		};
+		return ( expression._dependencies = dependencies );
 	}
 
 	generate ( result, options, { name, format } ) {

src/generators/dom/Block.js

@@ -2,20 +2,23 @@ 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;
+	constructor ( options ) {
+		this.generator = options.generator;
+		this.name = options.name;
+		this.key = options.key;
+		this.expression = options.expression;
+		this.context = options.context;
 
-		this.contexts = contexts;
-		this.indexes = indexes;
-		this.contextDependencies = contextDependencies;
+		this.contexts = options.contexts;
+		this.indexes = options.indexes;
+		this.contextDependencies = options.contextDependencies;
+		this.dependencies = new Set();
 
-		this.params = params;
-		this.indexNames = indexNames;
-		this.listNames = listNames;
+		this.params = options.params;
+		this.indexNames = options.indexNames;
+		this.listNames = options.listNames;
+
+		this.listName = options.listName;
 
 		this.builders = {
 			create: new CodeBuilder(),
@@ -26,10 +29,19 @@ export default class Block {
 			destroy: new CodeBuilder()
 		};
 
-		this.getUniqueName = generator.getUniqueNameMaker( params );
+		this.getUniqueName = this.generator.getUniqueNameMaker( options.params );
 
 		// unique names
 		this.component = this.getUniqueName( 'component' );
+		this.target = this.getUniqueName( 'target' );
+
+		this.hasUpdateMethod = false; // determined later
+	}
+
+	addDependencies ( dependencies ) {
+		dependencies.forEach( dependency => {
+			this.dependencies.add( dependency );
+		});
 	}
 
 	addElement ( name, renderStatement, parentNode, needsIdentifier = false ) {
@@ -62,11 +74,15 @@ export default class Block {
 		this.addElement( name, renderStatement, parentNode, true );
 	}
 
+	findDependencies ( expression ) {
+		return this.generator.findDependencies( this.contextDependencies, expression );
+	}
+
 	mount ( 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 );` );
+			this.builders.mount.addLine( `${this.generator.helper( 'insertNode' )}( ${name}, ${this.target}, anchor );` );
 		}
 	}
 
@@ -99,21 +115,23 @@ export default class Block {
 			properties.addBlock( `mount: ${this.generator.helper( 'noop' )},` );
 		} else {
 			properties.addBlock( deindent`
-				mount: function ( target, anchor ) {
+				mount: function ( ${this.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.hasUpdateMethod ) {
+			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() ) {
@@ -136,9 +154,4 @@ export default class Block {
 			}
 		`;
 	}
-
-	tmp () {
-		if ( !this._tmp ) this._tmp = this.getUniqueName( 'tmp' );
-		return this._tmp;
-	}
 }

src/generators/dom/index.js

@@ -7,7 +7,7 @@ import deindent from '../../utils/deindent.js';
 import CodeBuilder from '../../utils/CodeBuilder.js';
 import visit from './visit.js';
 import Generator from '../Generator.js';
-import Block from './Block.js';
+import preprocess from './preprocess.js';
 import * as shared from '../../shared/index.js';
 
 class DomGenerator extends Generator {
@@ -24,10 +24,6 @@ class DomGenerator extends Generator {
 		};
 	}
 
-	addBlock ( block ) {
-		this.blocks.push( block );
-	}
-
 	helper ( name ) {
 		if ( this.options.dev && `${name}Dev` in shared ) {
 			name = `${name}Dev`;
@@ -47,25 +43,7 @@ export default function dom ( parsed, source, options ) {
 
 	const { computations, hasJs, templateProperties, namespace } = generator.parseJs();
 
-	const getUniqueName = generator.getUniqueNameMaker( [ 'root' ] );
-	const component = getUniqueName( 'component' );
-
-	const mainBlock = new Block({
-		generator,
-		name: generator.alias( 'create_main_fragment' ),
-		key: null,
-
-		component,
-
-		contexts: new Map(),
-		indexes: new Map(),
-
-		params: [ 'root' ],
-		indexNames: new Map(),
-		listNames: new Map(),
-
-		getUniqueName
-	});
+	const block = preprocess( generator, parsed.html.children );
 
 	const state = {
 		namespace,
@@ -74,19 +52,17 @@ export default function dom ( parsed, source, options ) {
 	};
 
 	parsed.html.children.forEach( node => {
-		visit( generator, mainBlock, state, node );
+		visit( generator, block, state, node );
 	});
 
-	generator.addBlock( mainBlock );
-
 	const builders = {
 		main: new CodeBuilder(),
 		init: new CodeBuilder(),
 		_set: new CodeBuilder()
 	};
 
 	if ( options.dev ) {
-		builders._set.addBlock ( deindent`
+		builders._set.addBlock( deindent`
 			if ( typeof newState !== 'object' ) {
 				throw new Error( 'Component .set was called without an object of data key-values to update.' );
 			}
@@ -131,12 +107,9 @@ export default function dom ( parsed, source, options ) {
 		builders._set.addLine( `${generator.alias( 'recompute' )}( this._state, newState, oldState, false )` );
 	}
 
-	// TODO is the `if` necessary?
-	builders._set.addBlock( deindent`
-		${generator.helper( 'dispatchObservers' )}( this, this._observers.pre, newState, oldState );
-		if ( this._fragment ) this._fragment.update( newState, this._state );
-		${generator.helper( 'dispatchObservers' )}( this, this._observers.post, newState, oldState );
-	` );
+	builders._set.addLine( `${generator.helper( 'dispatchObservers' )}( this, this._observers.pre, newState, oldState );` );
+	if ( block.hasUpdateMethod ) builders._set.addLine( `if ( this._fragment ) this._fragment.update( newState, this._state );` ); // TODO is the condition necessary?
+	builders._set.addLine( `${generator.helper( 'dispatchObservers' )}( this, this._observers.post, newState, oldState );` );
 
 	if ( hasJs ) {
 		builders.main.addBlock( `[✂${parsed.js.content.start}-${parsed.js.content.end}✂]` );
@@ -155,8 +128,9 @@ export default function dom ( parsed, source, options ) {
 		` );
 	}
 
-	let i = generator.blocks.length;
-	while ( i-- ) builders.main.addBlock( generator.blocks[i].render() );
+	generator.blocks.forEach( block => {
+		builders.main.addBlock( block.render() );
+	});
 
 	builders.init.addLine( `this._torndown = false;` );