always use renderer.reference

src/compiler/compile/nodes/shared/Expression.ts

@@ -268,8 +268,8 @@ export default class Expression {
 						// function can be hoisted inside the component init
 						component.partly_hoisted.push(declaration);
 
-						const i = block.renderer.add_to_context(id.name);
+						block.renderer.add_to_context(id.name);
-						this.replace(x`#ctx[${i}]` as any);
+						this.replace(block.renderer.reference(id.name));
 					}
 
 					else {
@@ -285,20 +285,21 @@ export default class Expression {
 
 						component.partly_hoisted.push(declaration);
 
-						const i = block.renderer.add_to_context(id.name);
+						block.renderer.add_to_context(id.name);
+						const callee = block.renderer.reference(id.name);
 
 						this.replace(id as any);
 
 						if ((node as FunctionExpression).params.length > 0) {
 							declarations.push(b`
 								function ${id}(...args) {
-									return #ctx[${i}](${context_args}, ...args);
+									return ${callee}(${context_args}, ...args);
 								}
 							`);
 						} else {
 							declarations.push(b`
 								function ${id}() {
-									return #ctx[${i}](${context_args});
+									return ${callee}(${context_args});
 								}
 							`);
 						}

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -460,7 +460,7 @@ export default class ElementWrapper extends Wrapper {
 
 		groups.forEach(group => {
 			const handler = renderer.component.get_unique_name(`${this.var.name}_${group.events.join('_')}_handler`);
-			const i = renderer.add_to_context(handler.name);
+			renderer.add_to_context(handler.name);
 
 			// TODO figure out how to handle locks
 			const needs_lock = group.bindings.some(binding => binding.needs_lock);
@@ -488,7 +488,7 @@ export default class ElementWrapper extends Wrapper {
 
 			const has_local_function = contextual_dependencies.size > 0 || needs_lock || animation_frame;
 
-			let callee;
+			let callee = renderer.reference(handler.name);
 
 			// TODO dry this out — similar code for event handlers and component bindings
 			if (has_local_function) {
@@ -503,21 +503,19 @@ export default class ElementWrapper extends Wrapper {
 								${animation_frame} = @raf(${handler});
 								${needs_lock && b`${lock} = true;`}
 							}
-							#ctx[${i}].call(${this.var}, ${args});
+							${callee}.call(${this.var}, ${args});
 						}
 					`);
 				} else {
 					block.chunks.init.push(b`
 						function ${handler}() {
 							${needs_lock && b`${lock} = true;`}
-							#ctx[${i}].call(${this.var}, ${args});
+							${callee}.call(${this.var}, ${args});
 						}
 					`);
 				}
 
 				callee = handler;
-			} else {
-				callee = x`#ctx[${i}]`;
 			}
 
 			const params = Array.from(contextual_dependencies).map(name => ({

src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts

@@ -280,7 +280,8 @@ export default class InlineComponentWrapper extends Wrapper {
 			}
 
 			const id = component.get_unique_name(`${this.var.name}_${binding.name}_binding`);
-			const i = renderer.add_to_context(id.name);
+			renderer.add_to_context(id.name);
+			const callee = renderer.reference(id.name);
 
 			const updating = block.get_unique_name(`updating_${binding.name}`);
 			block.add_variable(updating);
@@ -333,7 +334,7 @@ export default class InlineComponentWrapper extends Wrapper {
 
 				block.chunks.init.push(b`
 					function ${id}(${value}) {
-						#ctx[${i}].call(null, ${value}, ${args});
+						${callee}.call(null, ${value}, ${args});
 					}
 				`);
 
@@ -341,7 +342,7 @@ export default class InlineComponentWrapper extends Wrapper {
 			} else {
 				block.chunks.init.push(b`
 					function ${id}(${value}) {
-						#ctx[${i}].call(null, ${value});
+						${callee}.call(null, ${value});
 					}
 				`);
 			}

src/compiler/compile/render_dom/wrappers/Window.ts

@@ -124,7 +124,8 @@ export default class WindowWrapper extends Wrapper {
 				`);
 			}
 
-			const i = renderer.add_to_context(id.name);
+			renderer.add_to_context(id.name);
+			const reference = renderer.reference(id.name);
 
 			component.partly_hoisted.push(b`
 				function ${id}() {
@@ -133,7 +134,7 @@ export default class WindowWrapper extends Wrapper {
 			`);
 
 			block.chunks.init.push(b`
-				@add_render_callback(#ctx[${i}]);
+				@add_render_callback(${reference});
 			`);
 
 			component.has_reactive_assignments = true;
@@ -161,7 +162,8 @@ export default class WindowWrapper extends Wrapper {
 			const id = block.get_unique_name(`onlinestatuschanged`);
 			const name = bindings.online;
 
-			const i = renderer.add_to_context(id.name);
+			renderer.add_to_context(id.name);
+			const reference = renderer.reference(id.name);
 
 			component.partly_hoisted.push(b`
 				function ${id}() {
@@ -170,12 +172,12 @@ export default class WindowWrapper extends Wrapper {
 			`);
 
 			block.chunks.init.push(b`
-				@add_render_callback(#ctx[${i}]);
+				@add_render_callback(${reference});
 			`);
 
 			block.event_listeners.push(
-				x`@listen(@_window, "online", #ctx[${i}])`,
+				x`@listen(@_window, "online", ${reference})`,
-				x`@listen(@_window, "offline", #ctx[${i}])`
+				x`@listen(@_window, "offline", ${reference})`
 			);
 
 			component.has_reactive_assignments = true;

src/compiler/compile/render_dom/wrappers/shared/bind_this.ts

@@ -7,7 +7,9 @@ import { Identifier } from 'estree';
 
 export default function bind_this(component: Component, block: Block, binding: Binding, variable: Identifier) {
 	const fn = component.get_unique_name(`${variable.name}_binding`);
-	const i = block.renderer.add_to_context(fn.name);
+
+	block.renderer.add_to_context(fn.name);
+	const callee = block.renderer.reference(fn.name);
 
 	let lhs;
 	let object;
@@ -60,8 +62,8 @@ export default function bind_this(component: Component, block: Block, binding: B
 		const unassign = block.get_unique_name(`unassign_${variable.name}`);
 
 		block.chunks.init.push(b`
-			const ${assign} = () => #ctx[${i}](${variable}, ${args});
+			const ${assign} = () => ${callee}(${variable}, ${args});
-			const ${unassign} = () => #ctx[${i}](null, ${args});
+			const ${unassign} = () => ${callee}(null, ${args});
 		`);
 
 		const condition = Array.from(contextual_dependencies)
@@ -91,6 +93,6 @@ export default function bind_this(component: Component, block: Block, binding: B
 		}
 	`);
 
-	block.chunks.destroy.push(b`#ctx[${i}](null);`);
+	block.chunks.destroy.push(b`${callee}(null);`);
-	return b`#ctx[${i}](${variable});`;
+	return b`${callee}(${variable});`;
 }