horrible half-finished commit so I can work on this on another machine

src/generators/Generator.js

@@ -62,14 +62,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 );
 

src/generators/dom/fragment.js

@@ -0,0 +1,85 @@
+import CodeBuilder from '../../utils/CodeBuilder.js';
+import deindent from '../../utils/deindent.js';
+
+export class Block {
+	constructor ({ generator, namespace, node, params, target }) {
+		this.generator = generator;
+		this.namespace = namespace;
+		this.node = node;
+		this.target = target;
+
+		this.create = new CodeBuilder();
+		this.mount = new CodeBuilder();
+		this.update = new CodeBuilder();
+		this.destroy = new CodeBuilder();
+
+		this.contexts = new Map();
+		this.indexes = new Map();
+
+		this.getUniqueName = generator.getUniqueNameMaker( params );
+	}
+
+	contextualise ( expression, isEventHandler ) {
+		return this.generator.contextualise( this, expression, isEventHandler );
+	}
+
+	createElement ( name ) {
+		return new Element({
+			generator: this.generator,
+			nodeName: name,
+			name: this.getUniqueName( name ),
+			namespace: name === 'svg' ? 'http://www.w3.org/2000/svg' : this.namespace,
+			parent: this
+		});
+	}
+}
+
+class Element {
+	constructor ({ generator, name, namespace, nodeName, parent }) {
+		this.generator = generator;
+		this.name = name;
+		this.namespace = namespace;
+		this.nodeName = nodeName;
+		this.parent = parent;
+
+		this.create = new CodeBuilder();
+		this.update = new CodeBuilder();
+		this.destroy = new CodeBuilder();
+
+		let render;
+
+		if ( namespace ) {
+			if ( namespace === 'http://www.w3.org/2000/svg' ) {
+				render = `var ${name} = ${generator.helper( 'createSvgElement' )}( '${nodeName}' )`;
+			} else {
+				render = `var ${name} = document.createElementNS( '${namespace}', '${nodeName}' );`;
+			}
+		} else {
+			render = `var ${name} = ${generator.helper( 'createElement' )}( '${nodeName}' );`;
+		}
+
+		if ( generator.cssId && !generator.elementDepth ) {
+			render += `\n${generator.helper( 'setAttribute' )}( ${name}, '${generator.cssId}', '' );`;
+		}
+
+		this.create.addLine( render );
+	}
+
+	apply () {
+		this.parent.create.addBlock( this.init );
+		if ( !this.update.isEmpty() ) this.parent.update.addBlock( this.update );
+		if ( !this.destroy.isEmpty() ) this.parent.destroy.addBlock( this.destroy );
+
+		const parent = this.parent; // TODO could be ancestor...
+
+		if ( parent.target === 'target' ) {
+			parent.mount.addLine( `${this.generator.helper( 'insertNode' )}( ${this.name}, target, anchor );` );
+		} else {
+			parent.create.addLine( `${this.generator.helper( 'appendNode' )}( ${this.name}, ${parent.target} );` );
+		}
+	}
+
+	contextualise ( expression, isEventHandler ) {
+		return this.parent.contextualise( expression, isEventHandler );
+	}
+}