From d707f6a3b25c2e35dc2ccee2b86b839630d56f89 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Thu, 6 Jul 2017 08:51:04 -0400
Subject: [PATCH] call oncreate functions before bindings

---
 src/generators/dom/index.ts                   |  8 ++---
 .../non-imported-component/expected-bundle.js |  1 +
 .../non-imported-component/expected.js        |  1 +
 .../oncreate-before-bindings/Nested.html      | 30 +++++++++++++++++++
 .../oncreate-before-bindings/Visibility.html  | 11 +++++++
 .../oncreate-before-bindings/_config.js       | 21 +++++++++++++
 .../oncreate-before-bindings/counter.js       |  3 ++
 .../oncreate-before-bindings/main.html        | 24 +++++++++++++++
 8 files changed, 95 insertions(+), 4 deletions(-)
 create mode 100644 test/runtime/samples/oncreate-before-bindings/Nested.html
 create mode 100644 test/runtime/samples/oncreate-before-bindings/Visibility.html
 create mode 100644 test/runtime/samples/oncreate-before-bindings/_config.js
 create mode 100644 test/runtime/samples/oncreate-before-bindings/counter.js
 create mode 100644 test/runtime/samples/oncreate-before-bindings/main.html

diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
index 2810f2cbd1..779029a5d8 100644
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@@ -122,10 +122,10 @@ export default function dom(
 		@dispatchObservers( this, this._observers.pre, newState, oldState );
 		${block.hasUpdateMethod && `this._fragment.update( newState, this._state );`}
 		@dispatchObservers( this, this._observers.post, newState, oldState );
-		${generator.hasComplexBindings &&
-			`while ( this._bindings.length ) this._bindings.pop()();`}
 		${(generator.hasComponents || generator.hasIntroTransitions) &&
 			`this._flush();`}
+		${generator.hasComplexBindings &&
+			`while ( this._bindings.length ) this._bindings.pop()();`}
 	`;
 
 	if (hasJs) {
@@ -219,10 +219,10 @@ export default function dom(
 				this._fragment.${block.hasIntroMethod ? 'intro' : 'mount'}( options.target, null );
 			}
 			
-			${generator.hasComplexBindings &&
-				`while ( this._bindings.length ) this._bindings.pop()();`}
 			${(generator.hasComponents || generator.hasIntroTransitions) &&
 				`this._flush();`}
+			${generator.hasComplexBindings &&
+				`while ( this._bindings.length ) this._bindings.pop()();`}
 
 			${templateProperties.oncreate &&
 				deindent`
diff --git a/test/js/samples/non-imported-component/expected-bundle.js b/test/js/samples/non-imported-component/expected-bundle.js
index 06e2ea9a7d..cdcd2607bd 100644
--- a/test/js/samples/non-imported-component/expected-bundle.js
+++ b/test/js/samples/non-imported-component/expected-bundle.js
@@ -191,6 +191,7 @@ function SvelteComponent ( options ) {
 		this._fragment.create();
 		this._fragment.mount( options.target, null );
 	}
+
 	this._flush();
 }
 
diff --git a/test/js/samples/non-imported-component/expected.js b/test/js/samples/non-imported-component/expected.js
index c4ebb32172..87c7e4b5b1 100644
--- a/test/js/samples/non-imported-component/expected.js
+++ b/test/js/samples/non-imported-component/expected.js
@@ -70,6 +70,7 @@ function SvelteComponent ( options ) {
 		this._fragment.create();
 		this._fragment.mount( options.target, null );
 	}
+
 	this._flush();
 }
 
diff --git a/test/runtime/samples/oncreate-before-bindings/Nested.html b/test/runtime/samples/oncreate-before-bindings/Nested.html
new file mode 100644
index 0000000000..9b5a838cb4
--- /dev/null
+++ b/test/runtime/samples/oncreate-before-bindings/Nested.html
@@ -0,0 +1,30 @@
+{{#each things as thing}}
+	<Visibility bind:isVisible="visibilityMap[thing]">
+		<p>{{thing}} ({{visibilityMap[thing]}})</p>
+	</Visibility> 
+{{/each}}
+
+<script>
+	import Visibility from './Visibility.html';
+	import counter from './counter.js';
+
+	export default {
+		data() {
+			return {
+				things: ['first thing', 'second thing'],
+				visibilityMap: {}
+			};
+		},
+
+		computed: {
+			visibleThings: (things, visibilityMap) => {
+				counter.count += 1;
+				return things.filter(text => visibilityMap[text]);
+			}
+		},
+
+		components: {
+			Visibility
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/oncreate-before-bindings/Visibility.html b/test/runtime/samples/oncreate-before-bindings/Visibility.html
new file mode 100644
index 0000000000..7b4c4f0d25
--- /dev/null
+++ b/test/runtime/samples/oncreate-before-bindings/Visibility.html
@@ -0,0 +1,11 @@
+<div>
+	{{yield}}
+</div>
+
+<script>
+	export default {
+		oncreate() {
+			this.set({ isVisible: true });
+		}
+	};
+</script>
diff --git a/test/runtime/samples/oncreate-before-bindings/_config.js b/test/runtime/samples/oncreate-before-bindings/_config.js
new file mode 100644
index 0000000000..07bad1e2c8
--- /dev/null
+++ b/test/runtime/samples/oncreate-before-bindings/_config.js
@@ -0,0 +1,21 @@
+import counter from './counter.js';
+
+export default {
+	'skip-ssr': true,
+
+	html: `
+		<div><p>first thing (true)</p></div>
+		<div><p>second thing (true)</p></div>
+	`,
+
+	test(assert, component) {
+		const visibleThings = component.get('visibleThings');
+		assert.deepEqual(visibleThings, ['first thing', 'second thing']);
+
+		const snapshots = component.snapshots;
+		assert.deepEqual(snapshots, [visibleThings]);
+
+		// TODO minimise the number of recomputations during oncreate
+		// assert.equal(counter.count, 1);
+	}
+};
\ No newline at end of file
diff --git a/test/runtime/samples/oncreate-before-bindings/counter.js b/test/runtime/samples/oncreate-before-bindings/counter.js
new file mode 100644
index 0000000000..63872cd6a2
--- /dev/null
+++ b/test/runtime/samples/oncreate-before-bindings/counter.js
@@ -0,0 +1,3 @@
+export default {
+	count: 0
+};
\ No newline at end of file
diff --git a/test/runtime/samples/oncreate-before-bindings/main.html b/test/runtime/samples/oncreate-before-bindings/main.html
new file mode 100644
index 0000000000..b078cffc8c
--- /dev/null
+++ b/test/runtime/samples/oncreate-before-bindings/main.html
@@ -0,0 +1,24 @@
+<Nested bind:visibleThings="visibleThings" />
+
+<script>
+	import Nested from './Nested.html';
+
+	export default {
+		data() {
+			return {
+				visibleThings: []
+			};
+		},
+
+		components: {
+			Nested
+		},
+
+		oncreate() {
+			this.snapshots = [];
+			this.observe('visibleThings', things => {
+				this.snapshots.push(things);
+			});
+		}
+	};
+</script>
\ No newline at end of file