From 8402ae9c24439b1d49d9ab7021c63fcb238d1582 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 25 Jun 2017 12:27:11 -0400
Subject: [PATCH] use #target and #component instead of block.target and
 block.component

---
 src/generators/dom/Block.ts                   | 22 +++++-----------
 .../dom/visitors/Component/Binding.ts         |  2 +-
 .../dom/visitors/Component/Component.ts       |  6 ++---
 .../dom/visitors/Component/EventHandler.ts    |  2 +-
 src/generators/dom/visitors/Component/Ref.ts  |  4 +--
 src/generators/dom/visitors/EachBlock.ts      | 26 +++++++++----------
 .../dom/visitors/Element/Binding.ts           | 10 +++----
 .../dom/visitors/Element/Element.ts           |  4 +--
 .../dom/visitors/Element/EventHandler.ts      |  8 +++---
 src/generators/dom/visitors/Element/Ref.ts    |  4 +--
 .../dom/visitors/Element/addTransitions.ts    | 12 ++++-----
 .../dom/visitors/Element/meta/Window.ts       | 18 ++++++-------
 src/generators/dom/visitors/IfBlock.ts        | 26 +++++++++----------
 src/generators/dom/visitors/YieldTag.ts       |  6 ++---
 .../dom/visitors/shared/binding/getSetter.ts  | 12 ++++-----
 15 files changed, 77 insertions(+), 85 deletions(-)

diff --git a/src/generators/dom/Block.ts b/src/generators/dom/Block.ts
index 47cf59e0ce..733bb68490 100644
--- a/src/generators/dom/Block.ts
+++ b/src/generators/dom/Block.ts
@@ -62,9 +62,6 @@ export default class Block {
 	variables: Map<string, string>;
 	getUniqueName: (name: string) => string;
 
-	component: string;
-	target: string;
-
 	hasUpdateMethod: boolean;
 	autofocus: string;
 
@@ -111,10 +108,6 @@ export default class Block {
 		this.variables = new Map();
 		this.getUniqueName = this.generator.getUniqueNameMaker(options.params);
 
-		// unique names
-		this.component = this.getUniqueName('component');
-		this.target = this.getUniqueName('target');
-
 		this.hasUpdateMethod = false; // determined later
 	}
 
@@ -192,7 +185,7 @@ export default class Block {
 			);
 		} else {
 			this.builders.mount.addLine(
-				`@insertNode( ${name}, ${this.target}, anchor );`
+				`@insertNode( ${name}, #target, anchor );`
 			);
 		}
 	}
@@ -268,7 +261,7 @@ export default class Block {
 			properties.addBlock(`mount: @noop,`);
 		} else {
 			properties.addBlock(deindent`
-				mount: function ( ${this.target}, anchor ) {
+				mount: function ( #target, anchor ) {
 					${this.builders.mount}
 				},
 			`);
@@ -289,20 +282,20 @@ export default class Block {
 		if (this.hasIntroMethod) {
 			if (hasIntros) {
 				properties.addBlock(deindent`
-					intro: function ( ${this.target}, anchor ) {
+					intro: function ( #target, anchor ) {
 						if ( ${introing} ) return;
 						${introing} = true;
 						${hasOutros && `${outroing} = false;`}
 
 						${this.builders.intro}
 
-						this.mount( ${this.target}, anchor );
+						this.mount( #target, anchor );
 					},
 				`);
 			} else {
 				properties.addBlock(deindent`
-					intro: function ( ${this.target}, anchor ) {
-						this.mount( ${this.target}, anchor );
+					intro: function ( #target, anchor ) {
+						this.mount( #target, anchor );
 					},
 				`);
 			}
@@ -351,8 +344,7 @@ export default class Block {
 		}
 
 		return deindent`
-			function ${this.name} ( ${this.params.join(', ')}, ${this.component}${this
-			.key
+			function ${this.name} ( ${this.params.join(', ')}, #component${this.key
 			? `, ${localKey}`
 			: ''} ) {
 				${this.variables.size > 0 && (
diff --git a/src/generators/dom/visitors/Component/Binding.ts b/src/generators/dom/visitors/Component/Binding.ts
index a071dc1439..cd10709238 100644
--- a/src/generators/dom/visitors/Component/Binding.ts
+++ b/src/generators/dom/visitors/Component/Binding.ts
@@ -66,7 +66,7 @@ export default function visitBinding(
 	block.addVariable(updating, 'false');
 
 	local.create.addBlock(deindent`
-		${block.component}._bindings.push( function () {
+		#component._bindings.push( function () {
 			if ( ${local.name}._torndown ) return;
 			${local.name}.observe( '${attribute.name}', function ( value ) {
 				if ( ${updating} ) return;
diff --git a/src/generators/dom/visitors/Component/Component.ts b/src/generators/dom/visitors/Component/Component.ts
index a33458e037..0180a2c553 100644
--- a/src/generators/dom/visitors/Component/Component.ts
+++ b/src/generators/dom/visitors/Component/Component.ts
@@ -113,7 +113,7 @@ export default function visitComponent(
 	}
 
 	const componentInitProperties = [
-		`_root: ${block.component}._root`,
+		`_root: #component._root`,
 	];
 
 	// Component has children, put them in a separate {{yield}} block
@@ -129,7 +129,7 @@ export default function visitComponent(
 		const yieldFragment = block.getUniqueName(`${name}_yield_fragment`);
 
 		block.builders.init.addLine(
-			`var ${yieldFragment} = ${childBlock.name}( ${params}, ${block.component} );`
+			`var ${yieldFragment} = ${childBlock.name}( ${params}, #component );`
 		);
 
 		block.builders.create.addLine(
@@ -225,7 +225,7 @@ export default function visitComponent(
 
 	block.builders.init.addBlock(local.create);
 
-	const targetNode = state.parentNode || block.target;
+	const targetNode = state.parentNode || '#target';
 	const anchorNode = state.parentNode ? 'null' : 'anchor';
 
 	block.builders.create.addLine(`${name}._fragment.create();`);
diff --git a/src/generators/dom/visitors/Component/EventHandler.ts b/src/generators/dom/visitors/Component/EventHandler.ts
index 2db9549389..1010456253 100644
--- a/src/generators/dom/visitors/Component/EventHandler.ts
+++ b/src/generators/dom/visitors/Component/EventHandler.ts
@@ -16,7 +16,7 @@ export default function visitEventHandler(
 	generator.addSourcemapLocations(attribute.expression);
 	generator.code.prependRight(
 		attribute.expression.start,
-		`${block.component}.`
+		`${block.alias('component')}.`
 	);
 
 	const usedContexts: string[] = [];
diff --git a/src/generators/dom/visitors/Component/Ref.ts b/src/generators/dom/visitors/Component/Ref.ts
index 3b9a929ed1..8de874ac2f 100644
--- a/src/generators/dom/visitors/Component/Ref.ts
+++ b/src/generators/dom/visitors/Component/Ref.ts
@@ -15,10 +15,10 @@ export default function visitRef(
 	generator.usesRefs = true;
 
 	local.create.addLine(
-		`${block.component}.refs.${attribute.name} = ${local.name};`
+		`#component.refs.${attribute.name} = ${local.name};`
 	);
 
 	block.builders.destroy.addLine(deindent`
-		if ( ${block.component}.refs.${attribute.name} === ${local.name} ) ${block.component}.refs.${attribute.name} = null;
+		if ( #component.refs.${attribute.name} === ${local.name} ) #component.refs.${attribute.name} = null;
 	`);
 }
diff --git a/src/generators/dom/visitors/EachBlock.ts b/src/generators/dom/visitors/EachBlock.ts
index ef4e52ce3d..921be74683 100644
--- a/src/generators/dom/visitors/EachBlock.ts
+++ b/src/generators/dom/visitors/EachBlock.ts
@@ -63,14 +63,14 @@ export default function visitEachBlock(
 		// TODO neaten this up... will end up with an empty line in the block
 		block.builders.init.addBlock(deindent`
 			if ( !${each_block_value}.length ) {
-				${each_block_else} = ${node.else._block.name}( ${params}, ${block.component} );
+				${each_block_else} = ${node.else._block.name}( ${params}, #component );
 				${each_block_else}.create();
 			}
 		`);
 
 		block.builders.mount.addBlock(deindent`
 			if ( ${each_block_else} ) {
-				${each_block_else}.${mountOrIntro}( ${state.parentNode || block.target}, null );
+				${each_block_else}.${mountOrIntro}( ${state.parentNode || '#target'}, null );
 			}
 		`);
 
@@ -81,7 +81,7 @@ export default function visitEachBlock(
 				if ( !${each_block_value}.length && ${each_block_else} ) {
 					${each_block_else}.update( changed, ${params} );
 				} else if ( !${each_block_value}.length ) {
-					${each_block_else} = ${node.else._block.name}( ${params}, ${block.component} );
+					${each_block_else} = ${node.else._block.name}( ${params}, #component );
 					${each_block_else}.create();
 					${each_block_else}.${mountOrIntro}( ${parentNode}, ${anchor} );
 				} else if ( ${each_block_else} ) {
@@ -99,7 +99,7 @@ export default function visitEachBlock(
 						${each_block_else} = null;
 					}
 				} else if ( !${each_block_else} ) {
-					${each_block_else} = ${node.else._block.name}( ${params}, ${block.component} );
+					${each_block_else} = ${node.else._block.name}( ${params}, #component );
 					${each_block_else}.create();
 					${each_block_else}.${mountOrIntro}( ${parentNode}, ${anchor} );
 				}
@@ -169,7 +169,7 @@ function keyed(
 	block.builders.init.addBlock(deindent`
 		for ( var #i = 0; #i < ${each_block_value}.length; #i += 1 ) {
 			var ${key} = ${each_block_value}[#i].${node.key};
-			var ${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component}, ${key} );
+			var ${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component, ${key} );
 
 			if ( ${last} ) ${last}.next = ${iteration};
 			${iteration}.last = ${last};
@@ -179,7 +179,7 @@ function keyed(
 		}
 	`);
 
-	const targetNode = state.parentNode || block.target;
+	const targetNode = state.parentNode || '#target';
 	const anchorNode = state.parentNode ? 'null' : 'anchor';
 
 	block.builders.create.addBlock(deindent`
@@ -293,7 +293,7 @@ function keyed(
 						if (!${expected}) ${iteration}.mount( ${parentNode}, ${anchor} );
 					} else {
 						// key is being inserted
-						${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component}, ${key} );
+						${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component, ${key} );
 						${iteration}.create();
 						${iteration}.${mountOrIntro}( ${parentNode}, ${expected}.first );
 
@@ -308,7 +308,7 @@ function keyed(
 					${iteration}.next = null;
 					${iteration}.mount( ${parentNode}, ${anchor} );
 				} else {
-					${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component}, ${key} );
+					${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component, ${key} );
 					${iteration}.create();
 					${iteration}.${mountOrIntro}( ${parentNode}, ${anchor} );
 				}
@@ -366,11 +366,11 @@ function unkeyed(
 		var ${iterations} = [];
 
 		for ( var #i = 0; #i < ${each_block_value}.length; #i += 1 ) {
-			${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component} );
+			${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component );
 		}
 	`);
 
-	const targetNode = state.parentNode || block.target;
+	const targetNode = state.parentNode || '#target';
 	const anchorNode = state.parentNode ? 'null' : 'anchor';
 
 	block.builders.create.addBlock(deindent`
@@ -411,7 +411,7 @@ function unkeyed(
 					if ( ${iterations}[#i] ) {
 						${iterations}[#i].update( changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i );
 					} else {
-						${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component} );
+						${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component );
 						${iterations}[#i].create();
 					}
 					${iterations}[#i].intro( ${parentNode}, ${anchor} );
@@ -420,13 +420,13 @@ function unkeyed(
 					if ( ${iterations}[#i] ) {
 						${iterations}[#i].update( changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i );
 					} else {
-						${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component} );
+						${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component );
 						${iterations}[#i].create();
 						${iterations}[#i].mount( ${parentNode}, ${anchor} );
 					}
 				`
 			: deindent`
-				${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component} );
+				${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component );
 				${iterations}[#i].${mountOrIntro}( ${parentNode}, ${anchor} );
 			`;
 
diff --git a/src/generators/dom/visitors/Element/Binding.ts b/src/generators/dom/visitors/Element/Binding.ts
index d13b7ffdb0..c19faf2b7f 100644
--- a/src/generators/dom/visitors/Element/Binding.ts
+++ b/src/generators/dom/visitors/Element/Binding.ts
@@ -91,7 +91,7 @@ export default function visitBinding(
 
 		generator.hasComplexBindings = true;
 		block.builders.hydrate.addBlock(
-			`if ( !('${name}' in state) ) ${block.component}._bindings.push( ${handler} );`
+			`if ( !('${name}' in state) ) #component._bindings.push( ${handler} );`
 		);
 	} else if (attribute.name === 'group') {
 		// <input type='checkbox|radio' bind:group='selected'> special case
@@ -107,18 +107,18 @@ export default function visitBinding(
 			: `${state.parentNode}.__value === ${snippet}`;
 
 		block.builders.hydrate.addLine(
-			`${block.component}._bindingGroups[${bindingGroup}].push( ${state.parentNode} );`
+			`#component._bindingGroups[${bindingGroup}].push( ${state.parentNode} );`
 		);
 
 		block.builders.destroy.addBlock(
-			`${block.component}._bindingGroups[${bindingGroup}].splice( ${block.component}._bindingGroups[${bindingGroup}].indexOf( ${state.parentNode} ), 1 );`
+			`#component._bindingGroups[${bindingGroup}].splice( #component._bindingGroups[${bindingGroup}].indexOf( ${state.parentNode} ), 1 );`
 		);
 
 		updateElement = `${state.parentNode}.checked = ${condition};`;
 	} else if (node.name === 'audio' || node.name === 'video') {
 		generator.hasComplexBindings = true;
 		block.builders.hydrate.addBlock(
-			`${block.component}._bindings.push( ${handler} );`
+			`#component._bindings.push( ${handler} );`
 		);
 
 		if (attribute.name === 'currentTime') {
@@ -221,7 +221,7 @@ function getBindingValue(
 	// <input type='checkbox' bind:group='foo'>
 	if (attribute.name === 'group') {
 		if (type === 'checkbox') {
-			return `@getBindingGroupValue( ${block.component}._bindingGroups[${bindingGroup}] )`;
+			return `@getBindingGroupValue( #component._bindingGroups[${bindingGroup}] )`;
 		}
 
 		return `${state.parentNode}.__value`;
diff --git a/src/generators/dom/visitors/Element/Element.ts b/src/generators/dom/visitors/Element/Element.ts
index 946f716b73..0851878c6f 100644
--- a/src/generators/dom/visitors/Element/Element.ts
+++ b/src/generators/dom/visitors/Element/Element.ts
@@ -63,7 +63,7 @@ export default function visitElement(
 	if (state.parentNode) {
 		block.builders.mount.addLine(`@appendNode( ${name}, ${state.parentNode} );`);
 	} else {
-		block.builders.mount.addLine(`@insertNode( ${name}, ${block.target}, anchor );`);
+		block.builders.mount.addLine(`@insertNode( ${name}, #target, anchor );`);
 	}
 
 	// add CSS encapsulation attribute
@@ -97,7 +97,7 @@ export default function visitElement(
 			const updates: string[] = [];
 
 			if (childState.usesComponent) {
-				initialProps.push(`component: ${block.component}`);
+				initialProps.push(`component: #component`);
 			}
 
 			childState.allUsedContexts.forEach((contextName: string) => {
diff --git a/src/generators/dom/visitors/Element/EventHandler.ts b/src/generators/dom/visitors/Element/EventHandler.ts
index 2a13379364..9aeea16302 100644
--- a/src/generators/dom/visitors/Element/EventHandler.ts
+++ b/src/generators/dom/visitors/Element/EventHandler.ts
@@ -24,7 +24,7 @@ export default function visitEventHandler(
 		// TODO verify that it's a valid callee (i.e. built-in or declared method)
 		generator.code.prependRight(
 			attribute.expression.start,
-			`${block.component}.`
+			`${block.alias('component')}.`
 		);
 		if (shouldHoist) state.usesComponent = true; // this feels a bit hacky but it works!
 	}
@@ -45,7 +45,7 @@ export default function visitEventHandler(
 	const declarations = usedContexts.map(name => {
 		if (name === 'state') {
 			if (shouldHoist) state.usesComponent = true;
-			return `var state = ${block.component}.get();`;
+			return `var state = #component.get();`;
 		}
 
 		const listName = block.listNames.get(name);
@@ -63,7 +63,7 @@ export default function visitEventHandler(
 
 	// create the handler body
 	const handlerBody = deindent`
-		${state.usesComponent && `var ${block.component} = this._svelte.component;`}
+		${state.usesComponent && `var ${block.alias('component')} = this._svelte.component;`}
 		${declarations}
 		[✂${attribute.expression.start}-${attribute.expression.end}✂];
 	`;
@@ -72,7 +72,7 @@ export default function visitEventHandler(
 		block.addVariable(handlerName);
 
 		block.builders.hydrate.addBlock(deindent`
-			${handlerName} = @template.events.${name}.call( ${block.component}, ${state.parentNode}, function ( event ) {
+			${handlerName} = @template.events.${name}.call( #component, ${state.parentNode}, function ( event ) {
 				${handlerBody}
 			});
 		`);
diff --git a/src/generators/dom/visitors/Element/Ref.ts b/src/generators/dom/visitors/Element/Ref.ts
index 53b808c97e..54af267ef6 100644
--- a/src/generators/dom/visitors/Element/Ref.ts
+++ b/src/generators/dom/visitors/Element/Ref.ts
@@ -14,11 +14,11 @@ export default function visitRef(
 	const name = attribute.name;
 
 	block.builders.mount.addLine(
-		`${block.component}.refs.${name} = ${state.parentNode};`
+		`#component.refs.${name} = ${state.parentNode};`
 	);
 
 	block.builders.unmount.addLine(deindent`
-		if ( ${block.component}.refs.${name} === ${state.parentNode} ) ${block.component}.refs.${name} = null;
+		if ( #component.refs.${name} === ${state.parentNode} ) #component.refs.${name} = null;
 	`);
 
 	generator.usesRefs = true; // so this component.refs object is created
diff --git a/src/generators/dom/visitors/Element/addTransitions.ts b/src/generators/dom/visitors/Element/addTransitions.ts
index 0681fcc154..b533ef8536 100644
--- a/src/generators/dom/visitors/Element/addTransitions.ts
+++ b/src/generators/dom/visitors/Element/addTransitions.ts
@@ -23,17 +23,17 @@ export default function addTransitions(
 		const fn = `@template.transitions.${intro.name}`;
 
 		block.builders.intro.addBlock(deindent`
-			${block.component}._renderHooks.push( function () {
+			#component._renderHooks.push( function () {
 				if ( !${name} ) ${name} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, true, null );
 				${name}.run( true, function () {
-					${block.component}.fire( 'intro.end', { node: ${state.name} });
+					#component.fire( 'intro.end', { node: ${state.name} });
 				});
 			});
 		`);
 
 		block.builders.outro.addBlock(deindent`
 			${name}.run( false, function () {
-				${block.component}.fire( 'outro.end', { node: ${state.name} });
+				#component.fire( 'outro.end', { node: ${state.name} });
 				if ( --#outros === 0 ) #outrocallback();
 				${name} = null;
 			});
@@ -58,10 +58,10 @@ export default function addTransitions(
 			}
 
 			block.builders.intro.addBlock(deindent`
-				${block.component}._renderHooks.push( function () {
+				#component._renderHooks.push( function () {
 					${introName} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, true, null );
 					${introName}.run( true, function () {
-						${block.component}.fire( 'intro.end', { node: ${state.name} });
+						#component.fire( 'intro.end', { node: ${state.name} });
 					});
 				});
 			`);
@@ -80,7 +80,7 @@ export default function addTransitions(
 			block.builders.outro.addBlock(deindent`
 				${outroName} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, false, null );
 				${outroName}.run( false, function () {
-					${block.component}.fire( 'outro.end', { node: ${state.name} });
+					#component.fire( 'outro.end', { node: ${state.name} });
 					if ( --#outros === 0 ) #outrocallback();
 				});
 			`);
diff --git a/src/generators/dom/visitors/Element/meta/Window.ts b/src/generators/dom/visitors/Element/meta/Window.ts
index 867ecdfba6..ea27f4ae43 100644
--- a/src/generators/dom/visitors/Element/meta/Window.ts
+++ b/src/generators/dom/visitors/Element/meta/Window.ts
@@ -47,13 +47,13 @@ export default function visitWindow(
 				// allow event.stopPropagation(), this.select() etc
 				generator.code.prependRight(
 					attribute.expression.start,
-					`${block.component}.`
+					`${block.alias('component')}.`
 				);
 			}
 
 			const handlerName = block.getUniqueName(`onwindow${attribute.name}`);
 			const handlerBody = deindent`
-				${usesState && `var state = ${block.component}.get();`}
+				${usesState && `var state = #component.get();`}
 				[✂${attribute.expression.start}-${attribute.expression.end}✂];
 			`;
 
@@ -113,7 +113,7 @@ export default function visitWindow(
 			${event === 'scroll' && `${lock} = true;`}
 			${generator.options.dev && `component._updatingReadonlyProperty = true;`}
 
-			${block.component}.set({
+			#component.set({
 				${props}
 			});
 
@@ -141,10 +141,10 @@ export default function visitWindow(
 			function ${observerCallback} () {
 				if ( ${lock} ) return;
 				var x = ${bindings.scrollX
-					? `${block.component}.get( '${bindings.scrollX}' )`
+					? `#component.get( '${bindings.scrollX}' )`
 					: `window.scrollX`};
 				var y = ${bindings.scrollY
-					? `${block.component}.get( '${bindings.scrollY}' )`
+					? `#component.get( '${bindings.scrollY}' )`
 					: `window.scrollY`};
 				window.scrollTo( x, y );
 			};
@@ -152,17 +152,17 @@ export default function visitWindow(
 
 		if (bindings.scrollX)
 			block.builders.init.addLine(
-				`${block.component}.observe( '${bindings.scrollX}', ${observerCallback} );`
+				`#component.observe( '${bindings.scrollX}', ${observerCallback} );`
 			);
 		if (bindings.scrollY)
 			block.builders.init.addLine(
-				`${block.component}.observe( '${bindings.scrollY}', ${observerCallback} );`
+				`#component.observe( '${bindings.scrollY}', ${observerCallback} );`
 			);
 	} else if (bindings.scrollX || bindings.scrollY) {
 		const isX = !!bindings.scrollX;
 
 		block.builders.init.addBlock(deindent`
-			${block.component}.observe( '${bindings.scrollX ||
+			#component.observe( '${bindings.scrollX ||
 			bindings.scrollY}', function ( ${isX ? 'x' : 'y'} ) {
 				if ( ${lock} ) return;
 				window.scrollTo( ${isX ? 'x, window.scrollY' : 'window.scrollX, y'} );
@@ -175,7 +175,7 @@ export default function visitWindow(
 		const handlerName = block.getUniqueName(`onlinestatuschanged`);
 		block.builders.init.addBlock(deindent`
 			function ${handlerName} ( event ) {
-				${block.component}.set({ ${bindings.online}: navigator.onLine });
+				#component.set({ ${bindings.online}: navigator.onLine });
 			};
 			window.addEventListener( 'online', ${handlerName} );
 			window.addEventListener( 'offline', ${handlerName} );
diff --git a/src/generators/dom/visitors/IfBlock.ts b/src/generators/dom/visitors/IfBlock.ts
index ace976952d..ac29d1d897 100644
--- a/src/generators/dom/visitors/IfBlock.ts
+++ b/src/generators/dom/visitors/IfBlock.ts
@@ -136,12 +136,12 @@ function simple(
 	{ name, anchor, params, if_name }
 ) {
 	block.builders.init.addBlock(deindent`
-		var ${name} = (${branch.condition}) && ${branch.block}( ${params}, ${block.component} );
+		var ${name} = (${branch.condition}) && ${branch.block}( ${params}, #component );
 	`);
 
 	const isTopLevel = !state.parentNode;
 	const mountOrIntro = branch.hasIntroMethod ? 'intro' : 'mount';
-	const targetNode = state.parentNode || block.target;
+	const targetNode = state.parentNode || '#target';
 	const anchorNode = state.parentNode ? 'null' : 'anchor';
 
 	block.builders.mount.addLine(
@@ -156,7 +156,7 @@ function simple(
 				if ( ${name} ) {
 					${name}.update( changed, ${params} );
 				} else {
-					${name} = ${branch.block}( ${params}, ${block.component} );
+					${name} = ${branch.block}( ${params}, #component );
 					if ( ${name} ) ${name}.create();
 				}
 
@@ -166,7 +166,7 @@ function simple(
 				if ( ${name} ) {
 					${name}.update( changed, ${params} );
 				} else {
-					${name} = ${branch.block}( ${params}, ${block.component} );
+					${name} = ${branch.block}( ${params}, #component );
 					${name}.create();
 					${name}.mount( ${parentNode}, ${anchor} );
 				}
@@ -174,14 +174,14 @@ function simple(
 		: branch.hasIntroMethod
 			? deindent`
 				if ( !${name} ) {
-					${name} = ${branch.block}( ${params}, ${block.component} );
+					${name} = ${branch.block}( ${params}, #component );
 					${name}.create();
 				}
 				${name}.intro( ${parentNode}, ${anchor} );
 			`
 			: deindent`
 				if ( !${name} ) {
-					${name} = ${branch.block}( ${params}, ${block.component} );
+					${name} = ${branch.block}( ${params}, #component );
 					${name}.create();
 					${name}.mount( ${parentNode}, ${anchor} );
 				}
@@ -239,13 +239,13 @@ function compound(
 		}
 
 		var ${current_block} = ${get_block}( ${params} );
-		var ${name} = ${current_block_and}${current_block}( ${params}, ${block.component} );
+		var ${name} = ${current_block_and}${current_block}( ${params}, #component );
 	`);
 
 	const isTopLevel = !state.parentNode;
 	const mountOrIntro = branches[0].hasIntroMethod ? 'intro' : 'mount';
 
-	const targetNode = state.parentNode || block.target;
+	const targetNode = state.parentNode || '#target';
 	const anchorNode = state.parentNode ? 'null' : 'anchor';
 	block.builders.mount.addLine(
 		`${if_name}${name}.${mountOrIntro}( ${targetNode}, ${anchorNode} );`
@@ -264,7 +264,7 @@ function compound(
 					${name}.unmount();
 					${name}.destroy();
 				}`}
-		${name} = ${current_block_and}${current_block}( ${params}, ${block.component} );
+		${name} = ${current_block_and}${current_block}( ${params}, #component );
 		${if_name}${name}.create();
 		${if_name}${name}.${mountOrIntro}( ${parentNode}, ${anchor} );
 	`;
@@ -339,19 +339,19 @@ function compoundWithOutros(
 	if (hasElse) {
 		block.builders.init.addBlock(deindent`
 			${current_block_index} = ${get_block}( ${params} );
-			${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, ${block.component} );
+			${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, #component );
 		`);
 	} else {
 		block.builders.init.addBlock(deindent`
 			if ( ~( ${current_block_index} = ${get_block}( ${params} ) ) ) {
-				${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, ${block.component} );
+				${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, #component );
 			}
 		`);
 	}
 
 	const isTopLevel = !state.parentNode;
 	const mountOrIntro = branches[0].hasIntroMethod ? 'intro' : 'mount';
-	const targetNode = state.parentNode || block.target;
+	const targetNode = state.parentNode || '#target';
 	const anchorNode = state.parentNode ? 'null' : 'anchor';
 
 	block.builders.mount.addLine(
@@ -371,7 +371,7 @@ function compoundWithOutros(
 	const createNewBlock = deindent`
 		${name} = ${if_blocks}[ ${current_block_index} ];
 		if ( !${name} ) {
-			${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, ${block.component} );
+			${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, #component );
 			${name}.create();
 		}
 		${name}.${mountOrIntro}( ${parentNode}, ${anchor} );
diff --git a/src/generators/dom/visitors/YieldTag.ts b/src/generators/dom/visitors/YieldTag.ts
index 373414f9fc..dbfee33f29 100644
--- a/src/generators/dom/visitors/YieldTag.ts
+++ b/src/generators/dom/visitors/YieldTag.ts
@@ -7,13 +7,13 @@ export default function visitYieldTag(
 	block: Block,
 	state: State
 ) {
-	const parentNode = state.parentNode || block.target;
+	const parentNode = state.parentNode || '#target';
 
 	block.builders.mount.addLine(
-		`if ( ${block.component}._yield ) ${block.component}._yield.mount( ${parentNode}, null );`
+		`if ( #component._yield ) #component._yield.mount( ${parentNode}, null );`
 	);
 
 	block.builders.unmount.addLine(
-		`if ( ${block.component}._yield ) ${block.component}._yield.unmount();`
+		`if ( #component._yield ) #component._yield.unmount();`
 	);
 }
diff --git a/src/generators/dom/visitors/shared/binding/getSetter.ts b/src/generators/dom/visitors/shared/binding/getSetter.ts
index e6a75dfeec..dc4de56471 100644
--- a/src/generators/dom/visitors/shared/binding/getSetter.ts
+++ b/src/generators/dom/visitors/shared/binding/getSetter.ts
@@ -22,25 +22,25 @@ export default function getSetter({
 		return deindent`
 			var list = this.${context}.${block.listNames.get(name)};
 			var index = this.${context}.${block.indexNames.get(name)};
-			${computed && `var state = ${block.component}.get();`}
+			${computed && `var state = #component.get();`}
 			list[index]${tail} = ${value};
 
 			${computed ?
-				`${block.component}._set({ ${dependencies.map((prop: string) => `${prop}: state.${prop}`).join(', ')} });` :
-				`${block.component}._set({ ${dependencies.map((prop: string) => `${prop}: ${block.component}.get( '${prop}' )`).join(', ')} });`
+				`#component._set({ ${dependencies.map((prop: string) => `${prop}: state.${prop}`).join(', ')} });` :
+				`#component._set({ ${dependencies.map((prop: string) => `${prop}: #component.get( '${prop}' )`).join(', ')} });`
 			}
 		`;
 	}
 
 	if (attribute.value.type === 'MemberExpression') {
 		return deindent`
-			var state = ${block.component}.get();
+			var state = #component.get();
 			${snippet} = ${value};
-			${block.component}._set({ ${dependencies.map((prop: string) => `${prop}: state.${prop}`).join(', ')} });
+			#component._set({ ${dependencies.map((prop: string) => `${prop}: state.${prop}`).join(', ')} });
 		`;
 	}
 
-	return `${block.component}._set({ ${name}: ${value} });`;
+	return `#component._set({ ${name}: ${value} });`;
 }
 
 function isComputed(node: Node) {