Merge pull request #1094 from sveltejs/gh-1061-b

fire oncreate handlers for components inside await blocks

Author: Rich-Harris

src/generators/nodes/AwaitBlock.ts

@@ -101,6 +101,10 @@ export default class AwaitBlock extends Node {
 		block.addVariable(promise);
 		block.addVariable(resolved);
 
+		// the `#component.root.set({})` below is just a cheap way to flush
+		// any oncreate handlers. We could have a dedicated `flush()` method
+		// but it's probably not worth it
+
 		block.builders.init.addBlock(deindent`
 			function ${replace_await_block}(${token}, type, ${value}, ${params}) {
 				if (${token} !== ${await_token}) return;
@@ -113,6 +117,8 @@ export default class AwaitBlock extends Node {
 					${old_block}.d();
 					${await_block}.c();
 					${await_block}.m(${updateMountNode}, ${anchor});
+
+					#component.root.set({});
 				}
 			}
 

test/runtime/samples/await-component-oncreate/Foo.html

@@ -0,0 +1,14 @@
+<p>{{value}}</p>
+<p>{{called}}</p>
+
+<script>
+	export default {
+		data() {
+			return { called: false };
+		},
+
+		oncreate() {
+			this.set({ called: true });
+		}
+	};
+</script>

test/runtime/samples/await-component-oncreate/_config.js

@@ -0,0 +1,16 @@
+const promise = Promise.resolve(42);
+
+export default {
+	data: {
+		promise
+	},
+
+	test(assert, component, target) {
+		return promise.then(() => {
+			assert.htmlEqual(target.innerHTML, `
+				<p>42</p>
+				<p>true</p>
+			`);
+		});
+	}
+};

test/runtime/samples/await-component-oncreate/main.html

@@ -0,0 +1,13 @@
+{{#await promise then value}}
+	<Foo :value />
+{{/await}}
+
+<script>
+	import Foo from './Foo.html';
+
+	export default {
+		components: {
+			Foo
+		}
+	};
+</script>