Merge pull request #1280 from sveltejs/dynamic-component-mount-ref

when mounting dynamic components, set ref if required

Author: Rich-Harris

src/generators/nodes/Component.ts

@@ -307,9 +307,12 @@ export default class Component extends Node {
 				);
 			}
 
-			block.builders.mount.addLine(
-				`if (${name}) ${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});`
-			);
+			block.builders.mount.addBlock(deindent`
+				if (${name}) {
+					${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});
+					${ref && `#component.refs.${ref.name} = ${name};`}
+				}
+			`);
 
 			const updateMountNode = this.getUpdateMountNode(anchor);
 

test/runtime/samples/dynamic-component-ref/Foo.html

@@ -0,0 +1 @@
+Foo

test/runtime/samples/dynamic-component-ref/_config.js

@@ -0,0 +1,7 @@
+export default {
+	html: `Foo`,
+
+	test(assert, component) {
+		assert.ok(component.refs.test);
+	}
+};

test/runtime/samples/dynamic-component-ref/main.html

@@ -0,0 +1,11 @@
+<:Component {foo} ref:test/>
+
+<script>
+	import Foo from './Foo.html';
+
+	export default {
+		data() {
+			return { foo: Foo };
+		}
+	};
+</script>