From 177e4f8049850897ff590bb2aa06da0b3abfcac3 Mon Sep 17 00:00:00 2001 From: Yury Zhuravlev Date: Fri, 21 Jul 2017 10:43:45 +0900 Subject: [PATCH 1/4] Avoid update DOM during Bind init if parent component is not exist. --- src/generators/dom/index.ts | 9 +++++++-- src/generators/dom/visitors/shared/binding/getSetter.ts | 8 ++++---- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts index 55c6599cd7..09b54e896f 100644 --- a/src/generators/dom/index.ts +++ b/src/generators/dom/index.ts @@ -123,7 +123,8 @@ export default function dom( ${computations.length && `@recompute( this._state, newState, oldState, false )`} @dispatchObservers( this, this._observers.pre, newState, oldState ); - ${block.hasUpdateMethod && `this._fragment.update( newState, this._state );`} + + ${block.hasUpdateMethod && `withoutDomUpdate || this._fragment.update( newState, this._state );`} @dispatchObservers( this, this._observers.post, newState, oldState ); ${generator.hasComponents && `@callAll(this._oncreate);`} ${generator.hasComplexBindings && `@callAll(this._bindings);`} @@ -213,6 +214,7 @@ export default function dom( this._fragment = @create_main_fragment( this._state, this ); + this._protectDomUpdate = false; if ( options.target ) { ${generator.hydratable ? deindent` @@ -225,10 +227,13 @@ export default function dom( this._fragment.create(); `} this._fragment.${block.hasIntroMethod ? 'intro' : 'mount'}( options.target, null ); + } else { + this._protectDomUpdate = true; } ${generator.hasComponents && `@callAll(this._oncreate);`} ${generator.hasComplexBindings && `@callAll(this._bindings);`} + this._protectDomUpdate = false; ${templateProperties.oncreate && deindent` if ( options._root ) { @@ -242,7 +247,7 @@ export default function dom( @assign( ${prototypeBase}, ${proto}); - ${name}.prototype._set = function _set ( newState ) { + ${name}.prototype._set = function _set ( newState, withoutDomUpdate ) { ${_set} }; diff --git a/src/generators/dom/visitors/shared/binding/getSetter.ts b/src/generators/dom/visitors/shared/binding/getSetter.ts index 784e1d7302..cfbe59193e 100644 --- a/src/generators/dom/visitors/shared/binding/getSetter.ts +++ b/src/generators/dom/visitors/shared/binding/getSetter.ts @@ -29,10 +29,10 @@ export default function getSetter({ ${computed ? `#component._set({ ${dependencies .map((prop: string) => `${prop}: state.${prop}`) - .join(', ')} });` + .join(', ')} }, #component._protectDomUpdate);` : `#component._set({ ${dependencies .map((prop: string) => `${prop}: #component.get( '${prop}' )`) - .join(', ')} });`} + .join(', ')} }, #component._protectDomUpdate);`} `; } @@ -42,11 +42,11 @@ export default function getSetter({ ${snippet} = ${value}; #component._set({ ${dependencies .map((prop: string) => `${prop}: state.${prop}`) - .join(', ')} }); + .join(', ')} }, #component._protectDomUpdate); `; } - return `#component._set({ ${name}: ${value} });`; + return `#component._set({ ${name}: ${value} }, #component._protectDomUpdate);`; } function isComputed(node: Node) { From 05a270a3c753022c776a0d18529f82a09c6c52d1 Mon Sep 17 00:00:00 2001 From: Yury Zhuravlev Date: Fri, 21 Jul 2017 10:52:19 +0900 Subject: [PATCH 2/4] Add test case for gh-714 situation. --- .../One.html | 20 +++++++++++++++++++ .../Two.html | 15 ++++++++++++++ .../_config.js | 5 +++++ .../main.html | 9 +++++++++ 4 files changed, 49 insertions(+) create mode 100644 test/runtime/samples/bindings-before-oncreate-change-dom/One.html create mode 100644 test/runtime/samples/bindings-before-oncreate-change-dom/Two.html create mode 100644 test/runtime/samples/bindings-before-oncreate-change-dom/_config.js create mode 100644 test/runtime/samples/bindings-before-oncreate-change-dom/main.html diff --git a/test/runtime/samples/bindings-before-oncreate-change-dom/One.html b/test/runtime/samples/bindings-before-oncreate-change-dom/One.html new file mode 100644 index 0000000000..f0f5b8a051 --- /dev/null +++ b/test/runtime/samples/bindings-before-oncreate-change-dom/One.html @@ -0,0 +1,20 @@ + +

+ + \ No newline at end of file diff --git a/test/runtime/samples/bindings-before-oncreate-change-dom/Two.html b/test/runtime/samples/bindings-before-oncreate-change-dom/Two.html new file mode 100644 index 0000000000..f6fc00fcaf --- /dev/null +++ b/test/runtime/samples/bindings-before-oncreate-change-dom/Two.html @@ -0,0 +1,15 @@ + \ No newline at end of file diff --git a/test/runtime/samples/bindings-before-oncreate-change-dom/_config.js b/test/runtime/samples/bindings-before-oncreate-change-dom/_config.js new file mode 100644 index 0000000000..e9e09c678d --- /dev/null +++ b/test/runtime/samples/bindings-before-oncreate-change-dom/_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-change-dom/main.html b/test/runtime/samples/bindings-before-oncreate-change-dom/main.html new file mode 100644 index 0000000000..02746ecc51 --- /dev/null +++ b/test/runtime/samples/bindings-before-oncreate-change-dom/main.html @@ -0,0 +1,9 @@ + + + \ No newline at end of file From afe062d275e2d267ad8d87a8a2c14dbddb97a767 Mon Sep 17 00:00:00 2001 From: Yury Zhuravlev Date: Fri, 21 Jul 2017 14:20:44 +0900 Subject: [PATCH 3/4] Try to avoid tests fails because I changed output. --- .../expected-bundle.js | 17 +++++++++------ .../expected.js | 17 +++++++++------ .../computed-collapsed-if/expected-bundle.js | 6 +++++- .../samples/computed-collapsed-if/expected.js | 6 +++++- .../expected-bundle.js | 15 ++++++++----- .../each-block-changed-check/expected.js | 15 ++++++++----- .../event-handlers-custom/expected-bundle.js | 6 +++++- .../samples/event-handlers-custom/expected.js | 6 +++++- .../if-block-no-update/expected-bundle.js | 9 ++++++-- .../js/samples/if-block-no-update/expected.js | 9 ++++++-- .../if-block-simple/expected-bundle.js | 9 ++++++-- test/js/samples/if-block-simple/expected.js | 9 ++++++-- .../non-imported-component/expected-bundle.js | 8 +++++-- .../non-imported-component/expected.js | 8 +++++-- .../expected-bundle.js | 6 +++++- .../onrender-onteardown-rewritten/expected.js | 6 +++++- .../expected-bundle.js | 21 ++++++++++++------- .../use-elements-as-anchors/expected.js | 21 ++++++++++++------- 18 files changed, 138 insertions(+), 56 deletions(-) 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 ea478745cd..b51a373720 100644 --- a/test/js/samples/collapses-text-around-comments/expected-bundle.js +++ b/test/js/samples/collapses-text-around-comments/expected-bundle.js @@ -140,8 +140,8 @@ var template = (function () { function add_css () { var style = createElement( 'style' ); - style.id = 'svelte-3590263702-style'; - style.textContent = "\n\tp[svelte-3590263702], [svelte-3590263702] p {\n\t\tcolor: red;\n\t}\n"; + style.id = 'svelte-2421768003-style'; + style.textContent = "\r\n\tp[svelte-2421768003], [svelte-2421768003] p {\r\n\t\tcolor: red;\r\n\t}\r\n"; appendNode( style, document.head ); } @@ -156,7 +156,7 @@ function create_main_fragment ( state, component ) { }, hydrate: function ( nodes ) { - setAttribute( p, 'svelte-3590263702', '' ); + setAttribute( p, 'svelte-2421768003', '' ); }, mount: function ( target, anchor ) { @@ -193,23 +193,28 @@ function SvelteComponent ( options ) { this._yield = options._yield; this._torndown = false; - if ( !document.getElementById( 'svelte-3590263702-style' ) ) add_css(); + if ( !document.getElementById( 'svelte-2421768003-style' ) ) add_css(); this._fragment = create_main_fragment( this._state, this ); + this._protectDomUpdate = false; if ( options.target ) { this._fragment.create(); this._fragment.mount( options.target, null ); + } else { + this._protectDomUpdate = true; } + this._protectDomUpdate = false; } assign( SvelteComponent.prototype, proto ); -SvelteComponent.prototype._set = function _set ( newState ) { +SvelteComponent.prototype._set = function _set ( newState, withoutDomUpdate ) { var oldState = this._state; this._state = assign( {}, oldState, newState ); dispatchObservers( this, this._observers.pre, newState, oldState ); - this._fragment.update( newState, this._state ); + + withoutDomUpdate || this._fragment.update( newState, this._state ); dispatchObservers( this, this._observers.post, newState, oldState ); }; diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js index 33931b121c..fce5d90a1a 100644 --- a/test/js/samples/collapses-text-around-comments/expected.js +++ b/test/js/samples/collapses-text-around-comments/expected.js @@ -10,8 +10,8 @@ var template = (function () { function add_css () { var style = createElement( 'style' ); - style.id = 'svelte-3590263702-style'; - style.textContent = "\n\tp[svelte-3590263702], [svelte-3590263702] p {\n\t\tcolor: red;\n\t}\n"; + style.id = 'svelte-2421768003-style'; + style.textContent = "\r\n\tp[svelte-2421768003], [svelte-2421768003] p {\r\n\t\tcolor: red;\r\n\t}\r\n"; appendNode( style, document.head ); } @@ -26,7 +26,7 @@ function create_main_fragment ( state, component ) { }, hydrate: function ( nodes ) { - setAttribute( p, 'svelte-3590263702', '' ); + setAttribute( p, 'svelte-2421768003', '' ); }, mount: function ( target, anchor ) { @@ -63,23 +63,28 @@ function SvelteComponent ( options ) { this._yield = options._yield; this._torndown = false; - if ( !document.getElementById( 'svelte-3590263702-style' ) ) add_css(); + if ( !document.getElementById( 'svelte-2421768003-style' ) ) add_css(); this._fragment = create_main_fragment( this._state, this ); + this._protectDomUpdate = false; if ( options.target ) { this._fragment.create(); this._fragment.mount( options.target, null ); + } else { + this._protectDomUpdate = true; } + this._protectDomUpdate = false; } assign( SvelteComponent.prototype, proto ); -SvelteComponent.prototype._set = function _set ( newState ) { +SvelteComponent.prototype._set = function _set ( newState, withoutDomUpdate ) { var oldState = this._state; this._state = assign( {}, oldState, newState ); dispatchObservers( this, this._observers.pre, newState, oldState ); - this._fragment.update( newState, this._state ); + + withoutDomUpdate || this._fragment.update( newState, this._state ); dispatchObservers( this, this._observers.post, newState, oldState ); }; diff --git a/test/js/samples/computed-collapsed-if/expected-bundle.js b/test/js/samples/computed-collapsed-if/expected-bundle.js index 5cd719b372..2b72f42e5e 100644 --- a/test/js/samples/computed-collapsed-if/expected-bundle.js +++ b/test/js/samples/computed-collapsed-if/expected-bundle.js @@ -154,15 +154,19 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); + this._protectDomUpdate = false; if ( options.target ) { this._fragment.create(); this._fragment.mount( options.target, null ); + } else { + this._protectDomUpdate = true; } + this._protectDomUpdate = false; } assign( SvelteComponent.prototype, proto ); -SvelteComponent.prototype._set = function _set ( newState ) { +SvelteComponent.prototype._set = function _set ( newState, withoutDomUpdate ) { var oldState = this._state; this._state = assign( {}, oldState, newState ); recompute( this._state, newState, oldState, false ); diff --git a/test/js/samples/computed-collapsed-if/expected.js b/test/js/samples/computed-collapsed-if/expected.js index e16d023bfb..44e80a03d1 100644 --- a/test/js/samples/computed-collapsed-if/expected.js +++ b/test/js/samples/computed-collapsed-if/expected.js @@ -48,15 +48,19 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); + this._protectDomUpdate = false; if ( options.target ) { this._fragment.create(); this._fragment.mount( options.target, null ); + } else { + this._protectDomUpdate = true; } + this._protectDomUpdate = false; } assign( SvelteComponent.prototype, proto ); -SvelteComponent.prototype._set = function _set ( newState ) { +SvelteComponent.prototype._set = function _set ( newState, withoutDomUpdate ) { var oldState = this._state; this._state = assign( {}, oldState, newState ); recompute( this._state, newState, oldState, false ) 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 d98ac1db37..30f0a2826c 100644 --- a/test/js/samples/each-block-changed-check/expected-bundle.js +++ b/test/js/samples/each-block-changed-check/expected-bundle.js @@ -156,7 +156,7 @@ function create_main_fragment ( state, component ) { each_block_iterations[i].create(); } - text = createText( "\n\n" ); + text = createText( "\r\n\r\n" ); p = createElement( 'p' ); text_1 = createText( text_1_value = state.foo ); }, @@ -220,13 +220,13 @@ function create_each_block ( state, each_block_value, comment, i, component ) { div = createElement( 'div' ); strong = createElement( 'strong' ); text = createText( text_value = i ); - text_1 = createText( "\n\n\t\t" ); + text_1 = createText( "\r\n\r\n\t\t" ); span = createElement( 'span' ); text_2 = createText( text_2_value = comment.author ); text_3 = createText( " wrote " ); text_4 = createText( text_4_value = state.elapsed(comment.time, state.time) ); text_5 = createText( " ago:" ); - text_6 = createText( "\n\n\t\t" ); + text_6 = createText( "\r\n\r\n\t\t" ); raw_before = createElement( 'noscript' ); raw_after = createElement( 'noscript' ); this.hydrate(); @@ -300,19 +300,24 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); + this._protectDomUpdate = false; if ( options.target ) { this._fragment.create(); this._fragment.mount( options.target, null ); + } else { + this._protectDomUpdate = true; } + this._protectDomUpdate = false; } assign( SvelteComponent.prototype, proto ); -SvelteComponent.prototype._set = function _set ( newState ) { +SvelteComponent.prototype._set = function _set ( newState, withoutDomUpdate ) { var oldState = this._state; this._state = assign( {}, oldState, newState ); dispatchObservers( this, this._observers.pre, newState, oldState ); - this._fragment.update( newState, this._state ); + + withoutDomUpdate || this._fragment.update( newState, this._state ); dispatchObservers( this, this._observers.post, newState, oldState ); }; diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js index 4fa7680a77..5b5d9fae9e 100644 --- a/test/js/samples/each-block-changed-check/expected.js +++ b/test/js/samples/each-block-changed-check/expected.js @@ -17,7 +17,7 @@ function create_main_fragment ( state, component ) { each_block_iterations[i].create(); } - text = createText( "\n\n" ); + text = createText( "\r\n\r\n" ); p = createElement( 'p' ); text_1 = createText( text_1_value = state.foo ); }, @@ -81,13 +81,13 @@ function create_each_block ( state, each_block_value, comment, i, component ) { div = createElement( 'div' ); strong = createElement( 'strong' ); text = createText( text_value = i ); - text_1 = createText( "\n\n\t\t" ); + text_1 = createText( "\r\n\r\n\t\t" ); span = createElement( 'span' ); text_2 = createText( text_2_value = comment.author ); text_3 = createText( " wrote " ); text_4 = createText( text_4_value = state.elapsed(comment.time, state.time) ); text_5 = createText( " ago:" ); - text_6 = createText( "\n\n\t\t" ); + text_6 = createText( "\r\n\r\n\t\t" ); raw_before = createElement( 'noscript' ); raw_after = createElement( 'noscript' ); this.hydrate(); @@ -161,19 +161,24 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); + this._protectDomUpdate = false; if ( options.target ) { this._fragment.create(); this._fragment.mount( options.target, null ); + } else { + this._protectDomUpdate = true; } + this._protectDomUpdate = false; } assign( SvelteComponent.prototype, proto ); -SvelteComponent.prototype._set = function _set ( newState ) { +SvelteComponent.prototype._set = function _set ( newState, withoutDomUpdate ) { var oldState = this._state; this._state = assign( {}, oldState, newState ); dispatchObservers( this, this._observers.pre, newState, oldState ); - this._fragment.update( newState, this._state ); + + withoutDomUpdate || this._fragment.update( newState, this._state ); dispatchObservers( this, this._observers.post, newState, oldState ); }; diff --git a/test/js/samples/event-handlers-custom/expected-bundle.js b/test/js/samples/event-handlers-custom/expected-bundle.js index 3912710a15..abbc8874c0 100644 --- a/test/js/samples/event-handlers-custom/expected-bundle.js +++ b/test/js/samples/event-handlers-custom/expected-bundle.js @@ -189,15 +189,19 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); + this._protectDomUpdate = false; if ( options.target ) { this._fragment.create(); this._fragment.mount( options.target, null ); + } else { + this._protectDomUpdate = true; } + this._protectDomUpdate = false; } assign( SvelteComponent.prototype, template.methods, proto ); -SvelteComponent.prototype._set = function _set ( newState ) { +SvelteComponent.prototype._set = function _set ( newState, withoutDomUpdate ) { var oldState = this._state; this._state = assign( {}, oldState, newState ); dispatchObservers( this, this._observers.pre, newState, oldState ); diff --git a/test/js/samples/event-handlers-custom/expected.js b/test/js/samples/event-handlers-custom/expected.js index 882bc08e85..b06c74fc27 100644 --- a/test/js/samples/event-handlers-custom/expected.js +++ b/test/js/samples/event-handlers-custom/expected.js @@ -65,15 +65,19 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); + this._protectDomUpdate = false; if ( options.target ) { this._fragment.create(); this._fragment.mount( options.target, null ); + } else { + this._protectDomUpdate = true; } + this._protectDomUpdate = false; } assign( SvelteComponent.prototype, template.methods, proto ); -SvelteComponent.prototype._set = function _set ( newState ) { +SvelteComponent.prototype._set = function _set ( newState, withoutDomUpdate ) { var oldState = this._state; this._state = assign( {}, oldState, newState ); dispatchObservers( this, this._observers.pre, newState, oldState ); 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 f00e3816a9..e9764e3299 100644 --- a/test/js/samples/if-block-no-update/expected-bundle.js +++ b/test/js/samples/if-block-no-update/expected-bundle.js @@ -235,19 +235,24 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); + this._protectDomUpdate = false; if ( options.target ) { this._fragment.create(); this._fragment.mount( options.target, null ); + } else { + this._protectDomUpdate = true; } + this._protectDomUpdate = false; } assign( SvelteComponent.prototype, proto ); -SvelteComponent.prototype._set = function _set ( newState ) { +SvelteComponent.prototype._set = function _set ( newState, withoutDomUpdate ) { var oldState = this._state; this._state = assign( {}, oldState, newState ); dispatchObservers( this, this._observers.pre, newState, oldState ); - this._fragment.update( newState, this._state ); + + withoutDomUpdate || this._fragment.update( newState, this._state ); dispatchObservers( this, this._observers.post, newState, oldState ); }; diff --git a/test/js/samples/if-block-no-update/expected.js b/test/js/samples/if-block-no-update/expected.js index fdedd6e4a7..78f6b59ae4 100644 --- a/test/js/samples/if-block-no-update/expected.js +++ b/test/js/samples/if-block-no-update/expected.js @@ -105,19 +105,24 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); + this._protectDomUpdate = false; if ( options.target ) { this._fragment.create(); this._fragment.mount( options.target, null ); + } else { + this._protectDomUpdate = true; } + this._protectDomUpdate = false; } assign( SvelteComponent.prototype, proto ); -SvelteComponent.prototype._set = function _set ( newState ) { +SvelteComponent.prototype._set = function _set ( newState, withoutDomUpdate ) { var oldState = this._state; this._state = assign( {}, oldState, newState ); dispatchObservers( this, this._observers.pre, newState, oldState ); - this._fragment.update( newState, this._state ); + + withoutDomUpdate || this._fragment.update( newState, this._state ); dispatchObservers( this, this._observers.post, newState, oldState ); }; diff --git a/test/js/samples/if-block-simple/expected-bundle.js b/test/js/samples/if-block-simple/expected-bundle.js index 2e2e7e7c09..f724e3939a 100644 --- a/test/js/samples/if-block-simple/expected-bundle.js +++ b/test/js/samples/if-block-simple/expected-bundle.js @@ -211,19 +211,24 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); + this._protectDomUpdate = false; if ( options.target ) { this._fragment.create(); this._fragment.mount( options.target, null ); + } else { + this._protectDomUpdate = true; } + this._protectDomUpdate = false; } assign( SvelteComponent.prototype, proto ); -SvelteComponent.prototype._set = function _set ( newState ) { +SvelteComponent.prototype._set = function _set ( newState, withoutDomUpdate ) { var oldState = this._state; this._state = assign( {}, oldState, newState ); dispatchObservers( this, this._observers.pre, newState, oldState ); - this._fragment.update( newState, this._state ); + + withoutDomUpdate || this._fragment.update( newState, this._state ); dispatchObservers( this, this._observers.post, newState, oldState ); }; diff --git a/test/js/samples/if-block-simple/expected.js b/test/js/samples/if-block-simple/expected.js index 548938d59c..b8858ce52c 100644 --- a/test/js/samples/if-block-simple/expected.js +++ b/test/js/samples/if-block-simple/expected.js @@ -81,19 +81,24 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); + this._protectDomUpdate = false; if ( options.target ) { this._fragment.create(); this._fragment.mount( options.target, null ); + } else { + this._protectDomUpdate = true; } + this._protectDomUpdate = false; } assign( SvelteComponent.prototype, proto ); -SvelteComponent.prototype._set = function _set ( newState ) { +SvelteComponent.prototype._set = function _set ( newState, withoutDomUpdate ) { var oldState = this._state; this._state = assign( {}, oldState, newState ); dispatchObservers( this, this._observers.pre, newState, oldState ); - this._fragment.update( newState, this._state ); + + withoutDomUpdate || this._fragment.update( newState, this._state ); dispatchObservers( this, this._observers.post, newState, oldState ); }; diff --git a/test/js/samples/non-imported-component/expected-bundle.js b/test/js/samples/non-imported-component/expected-bundle.js index 878bdf223e..e201b03308 100644 --- a/test/js/samples/non-imported-component/expected-bundle.js +++ b/test/js/samples/non-imported-component/expected-bundle.js @@ -140,7 +140,7 @@ function create_main_fragment ( state, component ) { return { create: function () { imported._fragment.create(); - text = createText( "\n" ); + text = createText( "\r\n" ); nonimported._fragment.create(); }, @@ -182,17 +182,21 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); + this._protectDomUpdate = false; if ( options.target ) { this._fragment.create(); this._fragment.mount( options.target, null ); + } else { + this._protectDomUpdate = true; } callAll(this._oncreate); + this._protectDomUpdate = false; } assign( SvelteComponent.prototype, proto ); -SvelteComponent.prototype._set = function _set ( newState ) { +SvelteComponent.prototype._set = function _set ( newState, withoutDomUpdate ) { var oldState = this._state; this._state = assign( {}, oldState, newState ); dispatchObservers( this, this._observers.pre, newState, oldState ); diff --git a/test/js/samples/non-imported-component/expected.js b/test/js/samples/non-imported-component/expected.js index c154930593..5bb642976d 100644 --- a/test/js/samples/non-imported-component/expected.js +++ b/test/js/samples/non-imported-component/expected.js @@ -24,7 +24,7 @@ function create_main_fragment ( state, component ) { return { create: function () { imported._fragment.create(); - text = createText( "\n" ); + text = createText( "\r\n" ); nonimported._fragment.create(); }, @@ -66,17 +66,21 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); + this._protectDomUpdate = false; if ( options.target ) { this._fragment.create(); this._fragment.mount( options.target, null ); + } else { + this._protectDomUpdate = true; } callAll(this._oncreate); + this._protectDomUpdate = false; } assign( SvelteComponent.prototype, proto ); -SvelteComponent.prototype._set = function _set ( newState ) { +SvelteComponent.prototype._set = function _set ( newState, withoutDomUpdate ) { var oldState = this._state; this._state = assign( {}, oldState, newState ); dispatchObservers( this, this._observers.pre, newState, oldState ); diff --git a/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js b/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js index e74522a945..c41a00a45c 100644 --- a/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js +++ b/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js @@ -145,10 +145,14 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); + this._protectDomUpdate = false; if ( options.target ) { this._fragment.create(); this._fragment.mount( options.target, null ); + } else { + this._protectDomUpdate = true; } + this._protectDomUpdate = false; if ( options._root ) { options._root._oncreate.push( template.oncreate.bind( this ) ); @@ -159,7 +163,7 @@ function SvelteComponent ( options ) { assign( SvelteComponent.prototype, proto ); -SvelteComponent.prototype._set = function _set ( newState ) { +SvelteComponent.prototype._set = function _set ( newState, withoutDomUpdate ) { var oldState = this._state; this._state = assign( {}, oldState, newState ); dispatchObservers( this, this._observers.pre, newState, oldState ); diff --git a/test/js/samples/onrender-onteardown-rewritten/expected.js b/test/js/samples/onrender-onteardown-rewritten/expected.js index 96aa37d766..b8935f5f0b 100644 --- a/test/js/samples/onrender-onteardown-rewritten/expected.js +++ b/test/js/samples/onrender-onteardown-rewritten/expected.js @@ -39,10 +39,14 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); + this._protectDomUpdate = false; if ( options.target ) { this._fragment.create(); this._fragment.mount( options.target, null ); + } else { + this._protectDomUpdate = true; } + this._protectDomUpdate = false; if ( options._root ) { options._root._oncreate.push( template.oncreate.bind( this ) ); @@ -53,7 +57,7 @@ function SvelteComponent ( options ) { assign( SvelteComponent.prototype, proto ); -SvelteComponent.prototype._set = function _set ( newState ) { +SvelteComponent.prototype._set = function _set ( newState, withoutDomUpdate ) { var oldState = this._state; this._state = assign( {}, oldState, newState ); dispatchObservers( this, this._observers.pre, newState, oldState ); 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 62a6ac86e0..b9b1f3910d 100644 --- a/test/js/samples/use-elements-as-anchors/expected-bundle.js +++ b/test/js/samples/use-elements-as-anchors/expected-bundle.js @@ -147,19 +147,19 @@ function create_main_fragment ( state, component ) { create: function () { div = createElement( 'div' ); if ( if_block ) if_block.create(); - text = createText( "\n\n\t" ); + text = createText( "\r\n\r\n\t" ); p = createElement( 'p' ); text_1 = createText( "this can be used as an anchor" ); - text_2 = createText( "\n\n\t" ); + text_2 = createText( "\r\n\r\n\t" ); if ( if_block_1 ) if_block_1.create(); - text_3 = createText( "\n\n\t" ); + text_3 = createText( "\r\n\r\n\t" ); if ( if_block_2 ) if_block_2.create(); - text_4 = createText( "\n\n\t" ); + text_4 = createText( "\r\n\r\n\t" ); p_1 = createElement( 'p' ); text_5 = createText( "so can this" ); - text_6 = createText( "\n\n\t" ); + text_6 = createText( "\r\n\r\n\t" ); if ( if_block_3 ) if_block_3.create(); - text_8 = createText( "\n\n" ); + text_8 = createText( "\r\n\r\n" ); if ( if_block_4 ) if_block_4.create(); if_block_4_anchor = createComment(); }, @@ -395,19 +395,24 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); + this._protectDomUpdate = false; if ( options.target ) { this._fragment.create(); this._fragment.mount( options.target, null ); + } else { + this._protectDomUpdate = true; } + this._protectDomUpdate = false; } assign( SvelteComponent.prototype, proto ); -SvelteComponent.prototype._set = function _set ( newState ) { +SvelteComponent.prototype._set = function _set ( newState, withoutDomUpdate ) { var oldState = this._state; this._state = assign( {}, oldState, newState ); dispatchObservers( this, this._observers.pre, newState, oldState ); - this._fragment.update( newState, this._state ); + + withoutDomUpdate || this._fragment.update( newState, this._state ); dispatchObservers( this, this._observers.post, newState, oldState ); }; diff --git a/test/js/samples/use-elements-as-anchors/expected.js b/test/js/samples/use-elements-as-anchors/expected.js index 524372861e..918fe9091d 100644 --- a/test/js/samples/use-elements-as-anchors/expected.js +++ b/test/js/samples/use-elements-as-anchors/expected.js @@ -17,19 +17,19 @@ function create_main_fragment ( state, component ) { create: function () { div = createElement( 'div' ); if ( if_block ) if_block.create(); - text = createText( "\n\n\t" ); + text = createText( "\r\n\r\n\t" ); p = createElement( 'p' ); text_1 = createText( "this can be used as an anchor" ); - text_2 = createText( "\n\n\t" ); + text_2 = createText( "\r\n\r\n\t" ); if ( if_block_1 ) if_block_1.create(); - text_3 = createText( "\n\n\t" ); + text_3 = createText( "\r\n\r\n\t" ); if ( if_block_2 ) if_block_2.create(); - text_4 = createText( "\n\n\t" ); + text_4 = createText( "\r\n\r\n\t" ); p_1 = createElement( 'p' ); text_5 = createText( "so can this" ); - text_6 = createText( "\n\n\t" ); + text_6 = createText( "\r\n\r\n\t" ); if ( if_block_3 ) if_block_3.create(); - text_8 = createText( "\n\n" ); + text_8 = createText( "\r\n\r\n" ); if ( if_block_4 ) if_block_4.create(); if_block_4_anchor = createComment(); }, @@ -265,19 +265,24 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); + this._protectDomUpdate = false; if ( options.target ) { this._fragment.create(); this._fragment.mount( options.target, null ); + } else { + this._protectDomUpdate = true; } + this._protectDomUpdate = false; } assign( SvelteComponent.prototype, proto ); -SvelteComponent.prototype._set = function _set ( newState ) { +SvelteComponent.prototype._set = function _set ( newState, withoutDomUpdate ) { var oldState = this._state; this._state = assign( {}, oldState, newState ); dispatchObservers( this, this._observers.pre, newState, oldState ); - this._fragment.update( newState, this._state ); + + withoutDomUpdate || this._fragment.update( newState, this._state ); dispatchObservers( this, this._observers.post, newState, oldState ); }; From 84ebdb961f77c8e4881e3dcda84b01dd2d29c979 Mon Sep 17 00:00:00 2001 From: Zhuravlev Yury Date: Fri, 21 Jul 2017 14:38:03 +0900 Subject: [PATCH 4/4] Fix tests for Unix --- .../expected-bundle.js | 8 ++++---- .../collapses-text-around-comments/expected.js | 8 ++++---- .../each-block-changed-check/expected-bundle.js | 6 +++--- test/js/samples/each-block-changed-check/expected.js | 6 +++--- .../non-imported-component/expected-bundle.js | 2 +- test/js/samples/non-imported-component/expected.js | 2 +- .../use-elements-as-anchors/expected-bundle.js | 12 ++++++------ test/js/samples/use-elements-as-anchors/expected.js | 12 ++++++------ 8 files changed, 28 insertions(+), 28 deletions(-) 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 b51a373720..b79a74aff5 100644 --- a/test/js/samples/collapses-text-around-comments/expected-bundle.js +++ b/test/js/samples/collapses-text-around-comments/expected-bundle.js @@ -140,8 +140,8 @@ var template = (function () { function add_css () { var style = createElement( 'style' ); - style.id = 'svelte-2421768003-style'; - style.textContent = "\r\n\tp[svelte-2421768003], [svelte-2421768003] p {\r\n\t\tcolor: red;\r\n\t}\r\n"; + style.id = 'svelte-3590263702-style'; + style.textContent = "\n\tp[svelte-3590263702], [svelte-3590263702] p {\n\t\tcolor: red;\n\t}\n"; appendNode( style, document.head ); } @@ -156,7 +156,7 @@ function create_main_fragment ( state, component ) { }, hydrate: function ( nodes ) { - setAttribute( p, 'svelte-2421768003', '' ); + setAttribute( p, 'svelte-3590263702', '' ); }, mount: function ( target, anchor ) { @@ -193,7 +193,7 @@ function SvelteComponent ( options ) { this._yield = options._yield; this._torndown = false; - if ( !document.getElementById( 'svelte-2421768003-style' ) ) add_css(); + if ( !document.getElementById( 'svelte-3590263702-style' ) ) add_css(); this._fragment = create_main_fragment( this._state, this ); diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js index fce5d90a1a..8282d6457e 100644 --- a/test/js/samples/collapses-text-around-comments/expected.js +++ b/test/js/samples/collapses-text-around-comments/expected.js @@ -10,8 +10,8 @@ var template = (function () { function add_css () { var style = createElement( 'style' ); - style.id = 'svelte-2421768003-style'; - style.textContent = "\r\n\tp[svelte-2421768003], [svelte-2421768003] p {\r\n\t\tcolor: red;\r\n\t}\r\n"; + style.id = 'svelte-3590263702-style'; + style.textContent = "\n\tp[svelte-3590263702], [svelte-3590263702] p {\n\t\tcolor: red;\n\t}\n"; appendNode( style, document.head ); } @@ -26,7 +26,7 @@ function create_main_fragment ( state, component ) { }, hydrate: function ( nodes ) { - setAttribute( p, 'svelte-2421768003', '' ); + setAttribute( p, 'svelte-3590263702', '' ); }, mount: function ( target, anchor ) { @@ -63,7 +63,7 @@ function SvelteComponent ( options ) { this._yield = options._yield; this._torndown = false; - if ( !document.getElementById( 'svelte-2421768003-style' ) ) add_css(); + if ( !document.getElementById( 'svelte-3590263702-style' ) ) add_css(); this._fragment = create_main_fragment( this._state, this ); 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 30f0a2826c..c83dd90475 100644 --- a/test/js/samples/each-block-changed-check/expected-bundle.js +++ b/test/js/samples/each-block-changed-check/expected-bundle.js @@ -156,7 +156,7 @@ function create_main_fragment ( state, component ) { each_block_iterations[i].create(); } - text = createText( "\r\n\r\n" ); + text = createText( "\n\n" ); p = createElement( 'p' ); text_1 = createText( text_1_value = state.foo ); }, @@ -220,13 +220,13 @@ function create_each_block ( state, each_block_value, comment, i, component ) { div = createElement( 'div' ); strong = createElement( 'strong' ); text = createText( text_value = i ); - text_1 = createText( "\r\n\r\n\t\t" ); + text_1 = createText( "\n\n\t\t" ); span = createElement( 'span' ); text_2 = createText( text_2_value = comment.author ); text_3 = createText( " wrote " ); text_4 = createText( text_4_value = state.elapsed(comment.time, state.time) ); text_5 = createText( " ago:" ); - text_6 = createText( "\r\n\r\n\t\t" ); + text_6 = createText( "\n\n\t\t" ); raw_before = createElement( 'noscript' ); raw_after = createElement( 'noscript' ); this.hydrate(); diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js index 5b5d9fae9e..6f585d4f32 100644 --- a/test/js/samples/each-block-changed-check/expected.js +++ b/test/js/samples/each-block-changed-check/expected.js @@ -17,7 +17,7 @@ function create_main_fragment ( state, component ) { each_block_iterations[i].create(); } - text = createText( "\r\n\r\n" ); + text = createText( "\n\n" ); p = createElement( 'p' ); text_1 = createText( text_1_value = state.foo ); }, @@ -81,13 +81,13 @@ function create_each_block ( state, each_block_value, comment, i, component ) { div = createElement( 'div' ); strong = createElement( 'strong' ); text = createText( text_value = i ); - text_1 = createText( "\r\n\r\n\t\t" ); + text_1 = createText( "\n\n\t\t" ); span = createElement( 'span' ); text_2 = createText( text_2_value = comment.author ); text_3 = createText( " wrote " ); text_4 = createText( text_4_value = state.elapsed(comment.time, state.time) ); text_5 = createText( " ago:" ); - text_6 = createText( "\r\n\r\n\t\t" ); + text_6 = createText( "\n\n\t\t" ); raw_before = createElement( 'noscript' ); raw_after = createElement( 'noscript' ); this.hydrate(); diff --git a/test/js/samples/non-imported-component/expected-bundle.js b/test/js/samples/non-imported-component/expected-bundle.js index e201b03308..033608e3f2 100644 --- a/test/js/samples/non-imported-component/expected-bundle.js +++ b/test/js/samples/non-imported-component/expected-bundle.js @@ -140,7 +140,7 @@ function create_main_fragment ( state, component ) { return { create: function () { imported._fragment.create(); - text = createText( "\r\n" ); + text = createText( "\n" ); nonimported._fragment.create(); }, diff --git a/test/js/samples/non-imported-component/expected.js b/test/js/samples/non-imported-component/expected.js index 5bb642976d..d38ca081ac 100644 --- a/test/js/samples/non-imported-component/expected.js +++ b/test/js/samples/non-imported-component/expected.js @@ -24,7 +24,7 @@ function create_main_fragment ( state, component ) { return { create: function () { imported._fragment.create(); - text = createText( "\r\n" ); + text = createText( "\n" ); nonimported._fragment.create(); }, 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 b9b1f3910d..6228aa8c2c 100644 --- a/test/js/samples/use-elements-as-anchors/expected-bundle.js +++ b/test/js/samples/use-elements-as-anchors/expected-bundle.js @@ -147,19 +147,19 @@ function create_main_fragment ( state, component ) { create: function () { div = createElement( 'div' ); if ( if_block ) if_block.create(); - text = createText( "\r\n\r\n\t" ); + text = createText( "\n\n\t" ); p = createElement( 'p' ); text_1 = createText( "this can be used as an anchor" ); - text_2 = createText( "\r\n\r\n\t" ); + text_2 = createText( "\n\n\t" ); if ( if_block_1 ) if_block_1.create(); - text_3 = createText( "\r\n\r\n\t" ); + text_3 = createText( "\n\n\t" ); if ( if_block_2 ) if_block_2.create(); - text_4 = createText( "\r\n\r\n\t" ); + text_4 = createText( "\n\n\t" ); p_1 = createElement( 'p' ); text_5 = createText( "so can this" ); - text_6 = createText( "\r\n\r\n\t" ); + text_6 = createText( "\n\n\t" ); if ( if_block_3 ) if_block_3.create(); - text_8 = createText( "\r\n\r\n" ); + text_8 = createText( "\n\n" ); if ( if_block_4 ) if_block_4.create(); if_block_4_anchor = createComment(); }, diff --git a/test/js/samples/use-elements-as-anchors/expected.js b/test/js/samples/use-elements-as-anchors/expected.js index 918fe9091d..4195fa527c 100644 --- a/test/js/samples/use-elements-as-anchors/expected.js +++ b/test/js/samples/use-elements-as-anchors/expected.js @@ -17,19 +17,19 @@ function create_main_fragment ( state, component ) { create: function () { div = createElement( 'div' ); if ( if_block ) if_block.create(); - text = createText( "\r\n\r\n\t" ); + text = createText( "\n\n\t" ); p = createElement( 'p' ); text_1 = createText( "this can be used as an anchor" ); - text_2 = createText( "\r\n\r\n\t" ); + text_2 = createText( "\n\n\t" ); if ( if_block_1 ) if_block_1.create(); - text_3 = createText( "\r\n\r\n\t" ); + text_3 = createText( "\n\n\t" ); if ( if_block_2 ) if_block_2.create(); - text_4 = createText( "\r\n\r\n\t" ); + text_4 = createText( "\n\n\t" ); p_1 = createElement( 'p' ); text_5 = createText( "so can this" ); - text_6 = createText( "\r\n\r\n\t" ); + text_6 = createText( "\n\n\t" ); if ( if_block_3 ) if_block_3.create(); - text_8 = createText( "\r\n\r\n" ); + text_8 = createText( "\n\n" ); if ( if_block_4 ) if_block_4.create(); if_block_4_anchor = createComment(); },