From 8b71d7be8c7fccb44ce37e40aa8e17981ef218fd Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 24 Feb 2017 16:57:11 -0500 Subject: [PATCH 1/5] failing tests for second bug in #290 --- .../component-binding-each-nested/Widget.html | 1 + .../component-binding-each-nested/_config.js | 28 +++++++++++++++++++ .../component-binding-each-nested/main.html | 22 +++++++++++++++ .../component-binding-each/Widget.html | 1 + .../component-binding-each/_config.js | 28 +++++++++++++++++++ .../component-binding-each/main.html | 21 ++++++++++++++ 6 files changed, 101 insertions(+) create mode 100644 test/generator/component-binding-each-nested/Widget.html create mode 100644 test/generator/component-binding-each-nested/_config.js create mode 100644 test/generator/component-binding-each-nested/main.html create mode 100644 test/generator/component-binding-each/Widget.html create mode 100644 test/generator/component-binding-each/_config.js create mode 100644 test/generator/component-binding-each/main.html diff --git a/test/generator/component-binding-each-nested/Widget.html b/test/generator/component-binding-each-nested/Widget.html new file mode 100644 index 0000000000..f24d608cd5 --- /dev/null +++ b/test/generator/component-binding-each-nested/Widget.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/generator/component-binding-each-nested/_config.js b/test/generator/component-binding-each-nested/_config.js new file mode 100644 index 0000000000..c25c9cf803 --- /dev/null +++ b/test/generator/component-binding-each-nested/_config.js @@ -0,0 +1,28 @@ +export default { + html: ` + + + + +

foo, bar, baz

+ `, + + test ( assert, component, target, window ) { + const change = new window.MouseEvent( 'change' ); + const inputs = target.querySelectorAll( 'input' ); + + inputs[0].value = 'blah'; + inputs[0].dispatchEvent( change ); + + assert.deepEqual( component.get( 'a' ), [ 'blah', 'bar', 'baz' ] ); + assert.htmlEqual( target.innerHTML, ` + + + + +

blah, bar, baz

+ ` ); + + component.teardown(); + } +}; diff --git a/test/generator/component-binding-each-nested/main.html b/test/generator/component-binding-each-nested/main.html new file mode 100644 index 0000000000..bdda96fe75 --- /dev/null +++ b/test/generator/component-binding-each-nested/main.html @@ -0,0 +1,22 @@ +{{#each a as x}} + +{{/each}} + +

{{a.map(getName).join(', ')}}

+ + diff --git a/test/generator/component-binding-each/Widget.html b/test/generator/component-binding-each/Widget.html new file mode 100644 index 0000000000..f24d608cd5 --- /dev/null +++ b/test/generator/component-binding-each/Widget.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/generator/component-binding-each/_config.js b/test/generator/component-binding-each/_config.js new file mode 100644 index 0000000000..c25c9cf803 --- /dev/null +++ b/test/generator/component-binding-each/_config.js @@ -0,0 +1,28 @@ +export default { + html: ` + + + + +

foo, bar, baz

+ `, + + test ( assert, component, target, window ) { + const change = new window.MouseEvent( 'change' ); + const inputs = target.querySelectorAll( 'input' ); + + inputs[0].value = 'blah'; + inputs[0].dispatchEvent( change ); + + assert.deepEqual( component.get( 'a' ), [ 'blah', 'bar', 'baz' ] ); + assert.htmlEqual( target.innerHTML, ` + + + + +

blah, bar, baz

+ ` ); + + component.teardown(); + } +}; diff --git a/test/generator/component-binding-each/main.html b/test/generator/component-binding-each/main.html new file mode 100644 index 0000000000..6dbae7e403 --- /dev/null +++ b/test/generator/component-binding-each/main.html @@ -0,0 +1,21 @@ +{{#each a as x}} + +{{/each}} + +

{{a.join(', ')}}

+ + From 875d84e9677aed6f5bbd1767784a9b42de4d170e Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 27 Feb 2017 14:25:28 -0500 Subject: [PATCH 2/5] fix tests --- .../component-binding-each-nested/_config.js | 12 +++--------- test/generator/component-binding-each/_config.js | 10 ++-------- 2 files changed, 5 insertions(+), 17 deletions(-) diff --git a/test/generator/component-binding-each-nested/_config.js b/test/generator/component-binding-each-nested/_config.js index c25c9cf803..aa3559d777 100644 --- a/test/generator/component-binding-each-nested/_config.js +++ b/test/generator/component-binding-each-nested/_config.js @@ -1,9 +1,6 @@ export default { html: ` - - - - +

foo, bar, baz

`, @@ -14,12 +11,9 @@ export default { inputs[0].value = 'blah'; inputs[0].dispatchEvent( change ); - assert.deepEqual( component.get( 'a' ), [ 'blah', 'bar', 'baz' ] ); + assert.deepEqual( component.get( 'a' ), [{ name: 'blah' }, { name: 'bar' }, { name: 'baz' }] ); assert.htmlEqual( target.innerHTML, ` - - - - +

blah, bar, baz

` ); diff --git a/test/generator/component-binding-each/_config.js b/test/generator/component-binding-each/_config.js index c25c9cf803..550e46da05 100644 --- a/test/generator/component-binding-each/_config.js +++ b/test/generator/component-binding-each/_config.js @@ -1,9 +1,6 @@ export default { html: ` - - - - +

foo, bar, baz

`, @@ -16,10 +13,7 @@ export default { assert.deepEqual( component.get( 'a' ), [ 'blah', 'bar', 'baz' ] ); assert.htmlEqual( target.innerHTML, ` - - - - +

blah, bar, baz

` ); From ab7c8657588219ec3aa8fc514e0b57717ef869df Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 27 Feb 2017 14:25:55 -0500 Subject: [PATCH 3/5] generate valid (if incorrect) code for component bindings in each-blocks --- src/generators/dom/visitors/Component.js | 2 +- .../dom/visitors/attributes/binding/index.js | 25 ++++++++++++++----- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/src/generators/dom/visitors/Component.js b/src/generators/dom/visitors/Component.js index 46ba6d4aa1..569ab112d0 100644 --- a/src/generators/dom/visitors/Component.js +++ b/src/generators/dom/visitors/Component.js @@ -98,7 +98,7 @@ export default { const bindings = local.bindings.map( binding => { const parts = binding.value.split( '.' ); const tail = parts.pop(); - return `if ( '${tail}' in ${parts.join( '.' )} ) ${name}_initialData.${binding.name} = ${binding.value};`; + return `if ( ${binding.prop} in ${binding.obj} ) ${name}_initialData.${binding.name} = ${binding.value};`; }); statements.push( bindings.join( '\n' ) ); diff --git a/src/generators/dom/visitors/attributes/binding/index.js b/src/generators/dom/visitors/attributes/binding/index.js index b6adbde630..9e04ee3479 100644 --- a/src/generators/dom/visitors/attributes/binding/index.js +++ b/src/generators/dom/visitors/attributes/binding/index.js @@ -11,10 +11,21 @@ export default function createBinding ( generator, node, attribute, current, loc if ( contextual ) local.allUsedContexts.add( parts[0] ); if ( local.isComponent ) { - local.bindings.push({ - name: attribute.name, - value: contextual ? attribute.value : `root.${attribute.value}` - }); + let obj; + let prop; + let value; + + if ( contextual ) { + obj = current.listNames[ parts[0] ]; + prop = current.indexNames[ parts[0] ]; + value = attribute.value; + } else { + prop = `'${parts.slice( -1 )}'`; + obj = parts.length > 1 ? `root.${parts.slice( 0, -1 ).join( '.' )}` : `root`; + value = `root.${attribute.value}`; + } + + local.bindings.push({ name: attribute.name, value, obj, prop }); } const handler = current.getUniqueName( `${local.name}ChangeHandler` ); @@ -59,9 +70,11 @@ export default function createBinding ( generator, node, attribute, current, loc const listName = current.listNames[ parts[0] ]; const indexName = current.indexNames[ parts[0] ]; + const context = local.isComponent ? `_context` : `__svelte`; + setter = deindent` - var list = this.__svelte.${listName}; - var index = this.__svelte.${indexName}; + var list = this.${context}.${listName}; + var index = this.${context}.${indexName}; list[index]${parts.slice( 1 ).map( part => `.${part}` ).join( '' )} = ${value}; component._set({ ${prop}: component.get( '${prop}' ) }); From 681339abb9a0d77aea2196197fc3a29cf457d33d Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 27 Feb 2017 14:30:34 -0500 Subject: [PATCH 4/5] fix tests --- test/generator/component-binding-each-nested/_config.js | 4 ++-- test/generator/component-binding-each/_config.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/test/generator/component-binding-each-nested/_config.js b/test/generator/component-binding-each-nested/_config.js index aa3559d777..ab5cbef585 100644 --- a/test/generator/component-binding-each-nested/_config.js +++ b/test/generator/component-binding-each-nested/_config.js @@ -5,11 +5,11 @@ export default { `, test ( assert, component, target, window ) { - const change = new window.MouseEvent( 'change' ); + const event = new window.MouseEvent( 'input' ); const inputs = target.querySelectorAll( 'input' ); inputs[0].value = 'blah'; - inputs[0].dispatchEvent( change ); + inputs[0].dispatchEvent( event ); assert.deepEqual( component.get( 'a' ), [{ name: 'blah' }, { name: 'bar' }, { name: 'baz' }] ); assert.htmlEqual( target.innerHTML, ` diff --git a/test/generator/component-binding-each/_config.js b/test/generator/component-binding-each/_config.js index 550e46da05..3cb8d05bc9 100644 --- a/test/generator/component-binding-each/_config.js +++ b/test/generator/component-binding-each/_config.js @@ -5,11 +5,11 @@ export default { `, test ( assert, component, target, window ) { - const change = new window.MouseEvent( 'change' ); + const event = new window.MouseEvent( 'input' ); const inputs = target.querySelectorAll( 'input' ); inputs[0].value = 'blah'; - inputs[0].dispatchEvent( change ); + inputs[0].dispatchEvent( event ); assert.deepEqual( component.get( 'a' ), [ 'blah', 'bar', 'baz' ] ); assert.htmlEqual( target.innerHTML, ` From 34ab0c2122e458c30f1c34d3f882b4ef99590c5b Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 27 Feb 2017 14:32:59 -0500 Subject: [PATCH 5/5] lint --- src/generators/dom/visitors/Component.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/generators/dom/visitors/Component.js b/src/generators/dom/visitors/Component.js index 569ab112d0..a6d63cfc94 100644 --- a/src/generators/dom/visitors/Component.js +++ b/src/generators/dom/visitors/Component.js @@ -96,8 +96,6 @@ export default { if ( local.bindings.length ) { const bindings = local.bindings.map( binding => { - const parts = binding.value.split( '.' ); - const tail = parts.pop(); return `if ( ${binding.prop} in ${binding.obj} ) ${name}_initialData.${binding.name} = ${binding.value};`; });