diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts index 55c6599cd727..b620444b2a10 100644 --- a/src/generators/dom/index.ts +++ b/src/generators/dom/index.ts @@ -126,7 +126,6 @@ export default function dom( ${block.hasUpdateMethod && `this._fragment.update( newState, this._state );`} @dispatchObservers( this, this._observers.post, newState, oldState ); ${generator.hasComponents && `@callAll(this._oncreate);`} - ${generator.hasComplexBindings && `@callAll(this._bindings);`} ${generator.hasIntroTransitions && `@callAll(this._postcreate);`} `; @@ -208,8 +207,7 @@ export default function dom( options.css !== false && `if ( !document.getElementById( '${generator.stylesheet.id}-style' ) ) @add_css();`} ${generator.hasComponents && `this._oncreate = [];`} - ${generator.hasComplexBindings && `this._bindings = [];`} - ${generator.hasIntroTransitions && `this._postcreate = [];`} + ${(generator.hasComplexBindings || generator.hasIntroTransitions) && `this._postcreate = [];`} this._fragment = @create_main_fragment( this._state, this ); @@ -228,7 +226,6 @@ export default function dom( } ${generator.hasComponents && `@callAll(this._oncreate);`} - ${generator.hasComplexBindings && `@callAll(this._bindings);`} ${templateProperties.oncreate && deindent` if ( options._root ) { diff --git a/src/generators/dom/visitors/Component/Binding.ts b/src/generators/dom/visitors/Component/Binding.ts index 26d853242a9c..3fedce450e4b 100644 --- a/src/generators/dom/visitors/Component/Binding.ts +++ b/src/generators/dom/visitors/Component/Binding.ts @@ -67,15 +67,18 @@ export default function visitBinding( block.addVariable(updating, 'false'); local.create.addBlock(deindent` - #component._bindings.push( function () { - if ( ${local.name}._torndown ) return; - ${local.name}.observe( '${attribute.name}', function ( value ) { - if ( ${updating} ) return; - ${updating} = true; + ${local.name}.observe( '${attribute.name}', function ( value ) { + if ( ${updating} ) return; + ${updating} = true; + ${setter} + ${updating} = false; + }, { init: false }); + + if ( @differs( ${local.name}.get( '${attribute.name}' ), ${snippet} ) ) { + #component._postcreate.push( function () { ${setter} - ${updating} = false; - }, { init: @differs( ${local.name}.get( '${attribute.name}' ), ${snippet} ) }); - }); + }); + } `); local.update.addBlock(deindent` diff --git a/src/generators/dom/visitors/Element/Binding.ts b/src/generators/dom/visitors/Element/Binding.ts index 37482f19864a..74da69c54e33 100644 --- a/src/generators/dom/visitors/Element/Binding.ts +++ b/src/generators/dom/visitors/Element/Binding.ts @@ -94,7 +94,7 @@ export default function visitBinding( generator.hasComplexBindings = true; block.builders.hydrate.addBlock( - `if ( !('${name}' in state) ) #component._bindings.push( ${handler} );` + `if ( !('${name}' in state) ) #component._postcreate.push( ${handler} );` ); } else if (attribute.name === 'group') { // special case @@ -120,7 +120,7 @@ export default function visitBinding( updateElement = `${state.parentNode}.checked = ${condition};`; } else if (node.name === 'audio' || node.name === 'video') { generator.hasComplexBindings = true; - block.builders.hydrate.addBlock(`#component._bindings.push( ${handler} );`); + block.builders.hydrate.addBlock(`#component._postcreate.push( ${handler} );`); if (attribute.name === 'currentTime') { const frame = block.getUniqueName(`${state.parentNode}_animationframe`); diff --git a/test/runtime/samples/component-binding-blowback-b/Nested.html b/test/runtime/samples/component-binding-blowback-b/Nested.html new file mode 100644 index 000000000000..af2f9d0071a3 --- /dev/null +++ b/test/runtime/samples/component-binding-blowback-b/Nested.html @@ -0,0 +1,17 @@ +