expose context on components

src/generators/dom/visitors/Component.js

@@ -24,6 +24,36 @@ export default {
 
 		addComponentAttributes( generator, node, local );
 
+		if ( local.allUsedContexts.size ) {
+			const contextNames = [...local.allUsedContexts];
+
+			const initialProps = contextNames.map( contextName => {
+				if ( contextName === 'root' ) return `root: root`;
+
+				const listName = generator.current.listNames[ contextName ];
+				const indexName = generator.current.indexNames[ contextName ];
+
+				return `${listName}: ${listName},\n${indexName}: ${indexName}`;
+			}).join( ',\n' );
+
+			const updates = contextNames.map( contextName => {
+				if ( contextName === 'root' ) return `${name}._context.root = root;`;
+
+				const listName = generator.current.listNames[ contextName ];
+				const indexName = generator.current.indexNames[ contextName ];
+
+				return `${name}._context.${listName} = ${listName};\n${name}._context.${indexName} = ${indexName};`;
+			}).join( '\n' );
+
+			local.init.addBlock( deindent`
+				${name}._context = {
+					${initialProps}
+				};
+			` );
+
+			local.update.addBlock( updates );
+		}
+
 		const componentInitProperties = [
 			`target: ${!isToplevel ? generator.current.target: 'null'}`,
 			'_root: component._root || component'

src/generators/dom/visitors/attributes/addComponentAttributes.js

@@ -94,12 +94,12 @@ export default function addComponentAttributes ( generator, node, local ) {
 
 			// TODO hoist event handlers? can do `this.__component.method(...)`
 			const declarations = [...usedContexts].map( name => {
-				if ( name === 'root' ) return 'var root = this.__svelte.root;';
+				if ( name === 'root' ) return 'var root = this._context.root;';
 
 				const listName = generator.current.listNames[ name ];
 				const indexName = generator.current.indexNames[ name ];
 
-				return `var ${listName} = this.__svelte.${listName}, ${indexName} = this.__svelte.${indexName}, ${name} = ${listName}[${indexName}]`;
+				return `var ${listName} = this._context.${listName}, ${indexName} = this._context.${indexName}, ${name} = ${listName}[${indexName}]`;
 			});
 
 			const handlerBody = ( declarations.length ? declarations.join( '\n' ) + '\n\n' : '' ) + `[✂${attribute.expression.start}-${attribute.expression.end}✂];`;