refs

compiler/generate/index.js

@@ -94,6 +94,8 @@ export default function generate ( parsed, template ) {
 		parent: null
 	};
 
+	let usesRefs = false;
+
 	parsed.html.children.forEach( child => {
 		walkHtml( child, {
 			Comment: {
@@ -256,6 +258,14 @@ export default function generate ( parsed, template ) {
 							createBinding( node, name, attribute, current, initStatements, updateStatements, teardownStatements, allUsedContexts );
 						}
 
+						else if ( attribute.type === 'Ref' ) {
+							usesRefs = true;
+
+							initStatements.push( deindent`
+								component.refs.${attribute.name} = ${name};
+							` );
+						}
+
 						else {
 							throw new Error( `Not implemented: ${attribute.type}` );
 						}
@@ -580,7 +590,7 @@ export default function generate ( parsed, template ) {
 		${renderers.reverse().join( '\n\n' )}
 
 		export default function createComponent ( options ) {
-			var component = ${templateProperties.methods ? `Object.create( template.methods )` : `{}`};
+			var component = ${templateProperties.methods ? `Object.create( template.methods )` : `{}`};${usesRefs ? `\ncomponent.refs = {}` : ``}
 			var state = {};
 
 			var observers = {

compiler/parse/state/tag.js

@@ -149,6 +149,15 @@ function readAttribute ( parser ) {
 		return readBindingDirective( parser, start, name.slice( 5 ) );
 	}
 
+	if ( /^ref:/.test( name ) ) {
+		return {
+			start,
+			end: parser.index,
+			type: 'Ref',
+			name: name.slice( 4 )
+		};
+	}
+
 	const value = parser.eat( '=' ) ? readAttributeValue( parser ) : true;
 
 	return {

test/compiler/refs/_config.js

@@ -0,0 +1,9 @@
+import * as assert from 'assert';
+
+export default {
+	html: '<canvas></canvas>',
+	test ( component, target ) {
+		const canvas = target.querySelector( 'canvas' );
+		assert.equal( canvas, component.refs.foo );
+	}
+};

test/compiler/refs/main.svelte

@@ -0,0 +1 @@
+<canvas ref:foo></canvas>

test/parser/refs/input.svelte

@@ -0,0 +1 @@
+<canvas ref:foo></canvas>

test/parser/refs/output.json

@@ -0,0 +1,26 @@
+{
+	"html": {
+		"start": 0,
+		"end": 25,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 25,
+				"type": "Element",
+				"name": "canvas",
+				"attributes": [
+					{
+						"start": 8,
+						"end": 15,
+						"type": "Ref",
+						"name": "foo"
+					}
+				],
+				"children": []
+			}
+		]
+	},
+	"css": null,
+	"js": null
+}