diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts index 2810f2cbd1..ee04867668 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) { @@ -200,7 +200,7 @@ export default function dom( options.css !== false && `if ( !document.getElementById( '${generator.cssId}-style' ) ) @add_css();`} ${(generator.hasComponents || generator.hasIntroTransitions) && - `this._renderHooks = [];`} + `this._oncreate = [];`} ${generator.hasComplexBindings && `this._bindings = [];`} this._fragment = @create_main_fragment( this._state, this ); @@ -219,15 +219,15 @@ 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` if ( options._root ) { - options._root._renderHooks.push( @template.oncreate.bind( this ) ); + options._root._oncreate.push( @template.oncreate.bind( this ) ); } else { @template.oncreate.call( this ); } diff --git a/src/generators/dom/visitors/Element/addTransitions.ts b/src/generators/dom/visitors/Element/addTransitions.ts index b533ef8536..d5f0f4c6f9 100644 --- a/src/generators/dom/visitors/Element/addTransitions.ts +++ b/src/generators/dom/visitors/Element/addTransitions.ts @@ -23,7 +23,7 @@ export default function addTransitions( const fn = `@template.transitions.${intro.name}`; block.builders.intro.addBlock(deindent` - #component._renderHooks.push( function () { + #component._oncreate.push( function () { if ( !${name} ) ${name} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, true, null ); ${name}.run( true, function () { #component.fire( 'intro.end', { node: ${state.name} }); @@ -58,7 +58,7 @@ export default function addTransitions( } block.builders.intro.addBlock(deindent` - #component._renderHooks.push( function () { + #component._oncreate.push( function () { ${introName} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, true, null ); ${introName}.run( true, function () { #component.fire( 'intro.end', { node: ${state.name} }); diff --git a/src/shared/index.js b/src/shared/index.js index b7b5ff7b64..5dde09c66f 100644 --- a/src/shared/index.js +++ b/src/shared/index.js @@ -110,10 +110,10 @@ export function set(newState) { } export function _flush() { - if (!this._renderHooks) return; + if (!this._oncreate) return; - while (this._renderHooks.length) { - this._renderHooks.pop()(); + while (this._oncreate.length) { + this._oncreate.pop()(); } } diff --git a/test/js/samples/collapses-text-around-comments/expected-bundle.js b/test/js/samples/collapses-text-around-comments/expected-bundle.js index 54bd3af679..057ece3065 100644 --- a/test/js/samples/collapses-text-around-comments/expected-bundle.js +++ b/test/js/samples/collapses-text-around-comments/expected-bundle.js @@ -119,10 +119,10 @@ function set(newState) { } function _flush() { - if (!this._renderHooks) return; + if (!this._oncreate) return; - while (this._renderHooks.length) { - this._renderHooks.pop()(); + while (this._oncreate.length) { + this._oncreate.pop()(); } } diff --git a/test/js/samples/computed-collapsed-if/expected-bundle.js b/test/js/samples/computed-collapsed-if/expected-bundle.js index d82dbc3616..d85fd55c51 100644 --- a/test/js/samples/computed-collapsed-if/expected-bundle.js +++ b/test/js/samples/computed-collapsed-if/expected-bundle.js @@ -95,10 +95,10 @@ function set(newState) { } function _flush() { - if (!this._renderHooks) return; + if (!this._oncreate) return; - while (this._renderHooks.length) { - this._renderHooks.pop()(); + while (this._oncreate.length) { + this._oncreate.pop()(); } } diff --git a/test/js/samples/each-block-changed-check/expected-bundle.js b/test/js/samples/each-block-changed-check/expected-bundle.js index 6f3a1a886d..4bbecf3f71 100644 --- a/test/js/samples/each-block-changed-check/expected-bundle.js +++ b/test/js/samples/each-block-changed-check/expected-bundle.js @@ -128,10 +128,10 @@ function set(newState) { } function _flush() { - if (!this._renderHooks) return; + if (!this._oncreate) return; - while (this._renderHooks.length) { - this._renderHooks.pop()(); + while (this._oncreate.length) { + this._oncreate.pop()(); } } diff --git a/test/js/samples/event-handlers-custom/expected-bundle.js b/test/js/samples/event-handlers-custom/expected-bundle.js index f7a9c0aa73..8fa8ead617 100644 --- a/test/js/samples/event-handlers-custom/expected-bundle.js +++ b/test/js/samples/event-handlers-custom/expected-bundle.js @@ -113,10 +113,10 @@ function set(newState) { } function _flush() { - if (!this._renderHooks) return; + if (!this._oncreate) return; - while (this._renderHooks.length) { - this._renderHooks.pop()(); + while (this._oncreate.length) { + this._oncreate.pop()(); } } diff --git a/test/js/samples/if-block-no-update/expected-bundle.js b/test/js/samples/if-block-no-update/expected-bundle.js index e017940f2e..65634e0748 100644 --- a/test/js/samples/if-block-no-update/expected-bundle.js +++ b/test/js/samples/if-block-no-update/expected-bundle.js @@ -119,10 +119,10 @@ function set(newState) { } function _flush() { - if (!this._renderHooks) return; + if (!this._oncreate) return; - while (this._renderHooks.length) { - this._renderHooks.pop()(); + while (this._oncreate.length) { + this._oncreate.pop()(); } } diff --git a/test/js/samples/if-block-simple/expected-bundle.js b/test/js/samples/if-block-simple/expected-bundle.js index 13695550b0..bf78f1ca68 100644 --- a/test/js/samples/if-block-simple/expected-bundle.js +++ b/test/js/samples/if-block-simple/expected-bundle.js @@ -119,10 +119,10 @@ function set(newState) { } function _flush() { - if (!this._renderHooks) return; + if (!this._oncreate) return; - while (this._renderHooks.length) { - this._renderHooks.pop()(); + while (this._oncreate.length) { + this._oncreate.pop()(); } } diff --git a/test/js/samples/non-imported-component/expected-bundle.js b/test/js/samples/non-imported-component/expected-bundle.js index 06e2ea9a7d..030c57369b 100644 --- a/test/js/samples/non-imported-component/expected-bundle.js +++ b/test/js/samples/non-imported-component/expected-bundle.js @@ -107,10 +107,10 @@ function set(newState) { } function _flush() { - if (!this._renderHooks) return; + if (!this._oncreate) return; - while (this._renderHooks.length) { - this._renderHooks.pop()(); + while (this._oncreate.length) { + this._oncreate.pop()(); } } @@ -183,7 +183,7 @@ function SvelteComponent ( options ) { this._yield = options._yield; this._torndown = false; - this._renderHooks = []; + this._oncreate = []; this._fragment = create_main_fragment( this._state, this ); @@ -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..e2aa2d4457 100644 --- a/test/js/samples/non-imported-component/expected.js +++ b/test/js/samples/non-imported-component/expected.js @@ -62,7 +62,7 @@ function SvelteComponent ( options ) { this._yield = options._yield; this._torndown = false; - this._renderHooks = []; + this._oncreate = []; this._fragment = create_main_fragment( this._state, this ); @@ -70,6 +70,7 @@ function SvelteComponent ( options ) { this._fragment.create(); this._fragment.mount( options.target, null ); } + this._flush(); } diff --git a/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js b/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js index 6998c7b5e0..f5849818fe 100644 --- a/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js +++ b/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js @@ -95,10 +95,10 @@ function set(newState) { } function _flush() { - if (!this._renderHooks) return; + if (!this._oncreate) return; - while (this._renderHooks.length) { - this._renderHooks.pop()(); + while (this._oncreate.length) { + this._oncreate.pop()(); } } @@ -156,7 +156,7 @@ function SvelteComponent ( options ) { } if ( options._root ) { - options._root._renderHooks.push( template.oncreate.bind( this ) ); + options._root._oncreate.push( template.oncreate.bind( this ) ); } else { template.oncreate.call( this ); } diff --git a/test/js/samples/onrender-onteardown-rewritten/expected.js b/test/js/samples/onrender-onteardown-rewritten/expected.js index 3869d14cb7..96aa37d766 100644 --- a/test/js/samples/onrender-onteardown-rewritten/expected.js +++ b/test/js/samples/onrender-onteardown-rewritten/expected.js @@ -45,7 +45,7 @@ function SvelteComponent ( options ) { } if ( options._root ) { - options._root._renderHooks.push( template.oncreate.bind( this ) ); + options._root._oncreate.push( template.oncreate.bind( this ) ); } else { template.oncreate.call( this ); } diff --git a/test/js/samples/use-elements-as-anchors/expected-bundle.js b/test/js/samples/use-elements-as-anchors/expected-bundle.js index 4037f07e34..63138c0157 100644 --- a/test/js/samples/use-elements-as-anchors/expected-bundle.js +++ b/test/js/samples/use-elements-as-anchors/expected-bundle.js @@ -119,10 +119,10 @@ function set(newState) { } function _flush() { - if (!this._renderHooks) return; + if (!this._oncreate) return; - while (this._renderHooks.length) { - this._renderHooks.pop()(); + while (this._oncreate.length) { + this._oncreate.pop()(); } } diff --git a/test/runtime/samples/bindings-before-oncreate/One.html b/test/runtime/samples/bindings-before-oncreate/One.html new file mode 100644 index 0000000000..3a1ff8a008 --- /dev/null +++ b/test/runtime/samples/bindings-before-oncreate/One.html @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/test/runtime/samples/bindings-before-oncreate/Two.html b/test/runtime/samples/bindings-before-oncreate/Two.html new file mode 100644 index 0000000000..f6fc00fcaf --- /dev/null +++ b/test/runtime/samples/bindings-before-oncreate/Two.html @@ -0,0 +1,15 @@ + \ No newline at end of file diff --git a/test/runtime/samples/bindings-before-oncreate/_config.js b/test/runtime/samples/bindings-before-oncreate/_config.js new file mode 100644 index 0000000000..e9e09c678d --- /dev/null +++ b/test/runtime/samples/bindings-before-oncreate/_config.js @@ -0,0 +1,5 @@ +export default { + test(assert, component) { + assert.equal(component.refs.one.snapshot, 2); + } +}; \ No newline at end of file diff --git a/test/runtime/samples/bindings-before-oncreate/main.html b/test/runtime/samples/bindings-before-oncreate/main.html new file mode 100644 index 0000000000..02746ecc51 --- /dev/null +++ b/test/runtime/samples/bindings-before-oncreate/main.html @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/test/runtime/samples/flush-before-bindings/Nested.html b/test/runtime/samples/flush-before-bindings/Nested.html new file mode 100644 index 0000000000..9b5a838cb4 --- /dev/null +++ b/test/runtime/samples/flush-before-bindings/Nested.html @@ -0,0 +1,30 @@ +{{#each things as thing}} + +

{{thing}} ({{visibilityMap[thing]}})

+ +{{/each}} + + \ No newline at end of file diff --git a/test/runtime/samples/flush-before-bindings/Visibility.html b/test/runtime/samples/flush-before-bindings/Visibility.html new file mode 100644 index 0000000000..7b4c4f0d25 --- /dev/null +++ b/test/runtime/samples/flush-before-bindings/Visibility.html @@ -0,0 +1,11 @@ +
+ {{yield}} +
+ + diff --git a/test/runtime/samples/flush-before-bindings/_config.js b/test/runtime/samples/flush-before-bindings/_config.js new file mode 100644 index 0000000000..07bad1e2c8 --- /dev/null +++ b/test/runtime/samples/flush-before-bindings/_config.js @@ -0,0 +1,21 @@ +import counter from './counter.js'; + +export default { + 'skip-ssr': true, + + html: ` +

first thing (true)

+

second thing (true)

+ `, + + 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/flush-before-bindings/counter.js b/test/runtime/samples/flush-before-bindings/counter.js new file mode 100644 index 0000000000..63872cd6a2 --- /dev/null +++ b/test/runtime/samples/flush-before-bindings/counter.js @@ -0,0 +1,3 @@ +export default { + count: 0 +}; \ No newline at end of file diff --git a/test/runtime/samples/flush-before-bindings/main.html b/test/runtime/samples/flush-before-bindings/main.html new file mode 100644 index 0000000000..b078cffc8c --- /dev/null +++ b/test/runtime/samples/flush-before-bindings/main.html @@ -0,0 +1,24 @@ + + + \ No newline at end of file