From cccc3e4c41ef912566be20c35afe2fccaf00770c Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 10 Feb 2018 13:01:27 -0500 Subject: [PATCH 1/6] failing test for second part of #1100 --- .../TextInput.html | 1 + .../store-component-binding-deep/_config.js | 42 +++++++++++++++++++ .../store-component-binding-deep/main.html | 10 +++++ .../store-component-binding/_config.js | 12 ++++++ 4 files changed, 65 insertions(+) create mode 100644 test/runtime/samples/store-component-binding-deep/TextInput.html create mode 100644 test/runtime/samples/store-component-binding-deep/_config.js create mode 100644 test/runtime/samples/store-component-binding-deep/main.html diff --git a/test/runtime/samples/store-component-binding-deep/TextInput.html b/test/runtime/samples/store-component-binding-deep/TextInput.html new file mode 100644 index 0000000000..f24d608cd5 --- /dev/null +++ b/test/runtime/samples/store-component-binding-deep/TextInput.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/runtime/samples/store-component-binding-deep/_config.js b/test/runtime/samples/store-component-binding-deep/_config.js new file mode 100644 index 0000000000..66ae5ac4ae --- /dev/null +++ b/test/runtime/samples/store-component-binding-deep/_config.js @@ -0,0 +1,42 @@ +import { Store } from '../../../../store.js'; + +const store = new Store({ + name: { + value: 'world' + } +}); + +export default { + store, + + html: ` +

Hello world!

+ + `, + + test(assert, component, target, window) { + const input = target.querySelector('input'); + const event = new window.Event('input'); + + const changeRecord = []; + store.onchange((state, changes) => { + changeRecord.push({ state, changes }); + }); + + input.value = 'everybody'; + input.dispatchEvent(event); + + assert.equal(store.get('name').value, 'everybody'); + assert.htmlEqual(target.innerHTML, ` +

Hello everybody!

+ + `); + + assert.deepEqual(changeRecord, [ + { + state: { name: { value: 'everybody' } }, + changes: { name: true } + } + ]); + } +}; \ No newline at end of file diff --git a/test/runtime/samples/store-component-binding-deep/main.html b/test/runtime/samples/store-component-binding-deep/main.html new file mode 100644 index 0000000000..f77016b549 --- /dev/null +++ b/test/runtime/samples/store-component-binding-deep/main.html @@ -0,0 +1,10 @@ +

Hello {{$name.value}}!

+ + + \ No newline at end of file diff --git a/test/runtime/samples/store-component-binding/_config.js b/test/runtime/samples/store-component-binding/_config.js index aefc4ec652..1d2beab7a7 100644 --- a/test/runtime/samples/store-component-binding/_config.js +++ b/test/runtime/samples/store-component-binding/_config.js @@ -16,6 +16,11 @@ export default { const input = target.querySelector('input'); const event = new window.Event('input'); + const changeRecord = []; + store.onchange((state, changes) => { + changeRecord.push({ state, changes }); + }); + input.value = 'everybody'; input.dispatchEvent(event); @@ -24,5 +29,12 @@ export default {

Hello everybody!

`); + + assert.deepEqual(changeRecord, [ + { + state: { name: 'everybody' }, + changes: { name: true } + } + ]); } }; \ No newline at end of file From 4b8eb251c7c4e565a5231c28ed159702be15366d Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 10 Feb 2018 13:33:40 -0500 Subject: [PATCH 2/6] tidy up --- src/generators/nodes/Component.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/generators/nodes/Component.ts b/src/generators/nodes/Component.ts index 493302c3d5..09e9215a25 100644 --- a/src/generators/nodes/Component.ts +++ b/src/generators/nodes/Component.ts @@ -157,7 +157,6 @@ export default class Component extends Node { let setFromChild; if (!isStoreProp && block.contexts.has(key)) { - const prop = binding.dependencies[0]; const computed = isComputed(binding.value); const tail = binding.value.type === 'MemberExpression' ? getTailSnippet(binding.value) : ''; @@ -175,7 +174,7 @@ export default class Component extends Node { else if (binding.value.type === 'MemberExpression') { setFromChild = deindent` ${binding.snippet} = childState.${binding.name}; - ${binding.dependencies.map((prop: string) => `${newState}.${prop} = state.${prop};`).join('\n')} + ${newState}.${key} = state.${key}; `; } From a16c77569031ef45b5d246b69dc9049c02761dcb Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 10 Feb 2018 19:54:55 -0500 Subject: [PATCH 3/6] remove some more junk --- src/generators/nodes/Component.ts | 27 +++++++++++---------------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/src/generators/nodes/Component.ts b/src/generators/nodes/Component.ts index 09e9215a25..4607789316 100644 --- a/src/generators/nodes/Component.ts +++ b/src/generators/nodes/Component.ts @@ -156,7 +156,7 @@ export default class Component extends Node { let setFromChild; - if (!isStoreProp && block.contexts.has(key)) { + if (block.contexts.has(key)) { const computed = isComputed(binding.value); const tail = binding.value.type === 'MemberExpression' ? getTailSnippet(binding.value) : ''; @@ -171,15 +171,17 @@ export default class Component extends Node { `; } - else if (binding.value.type === 'MemberExpression') { - setFromChild = deindent` - ${binding.snippet} = childState.${binding.name}; - ${newState}.${key} = state.${key}; - `; - } - else { - setFromChild = `${newState}.${key} = childState.${binding.name};`; + if (binding.value.type === 'MemberExpression') { + setFromChild = deindent` + ${binding.snippet} = childState.${binding.name}; + ${newState}.${key} = state.${key}; + `; + } + + else { + setFromChild = `${newState}.${key} = childState.${binding.name};`; + } } statements.push(deindent` @@ -223,32 +225,25 @@ export default class Component extends Node { var ${initialisers}; ${!setStoreFromChildOnChange.isEmpty() && deindent` ${setStoreFromChildOnChange} - ${name_updating} = @assign({}, changed); #component.store.set(newStoreState); `} ${!setParentFromChildOnChange.isEmpty() && deindent` ${setParentFromChildOnChange} - ${name_updating} = @assign({}, changed); #component._set(newState); `} ${name_updating} = {}; } `); - // TODO can `!childState` ever be true? beforecreate = deindent` #component.root._beforecreate.push(function() { var childState = ${name}.get(), ${initialisers}; - if (!childState) return; - ${setParentFromChildOnInit} ${!setStoreFromChildOnInit.isEmpty() && deindent` ${setStoreFromChildOnInit} - ${name_updating} = { ${bindings.map((binding: Binding) => `${binding.name}: true`).join(', ')} }; #component.store.set(newStoreState); `} ${!setParentFromChildOnInit.isEmpty() && deindent` ${setParentFromChildOnInit} - ${name_updating} = { ${bindings.map((binding: Binding) => `${binding.name}: true`).join(', ')} }; #component._set(newState); `} ${name_updating} = {}; From b3382aa7a3efb0c368801a969d384f9afb480c2e Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 10 Feb 2018 20:28:01 -0500 Subject: [PATCH 4/6] combine component binding init/update --- src/generators/nodes/Component.ts | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/src/generators/nodes/Component.ts b/src/generators/nodes/Component.ts index 4607789316..59647d2c5a 100644 --- a/src/generators/nodes/Component.ts +++ b/src/generators/nodes/Component.ts @@ -138,10 +138,7 @@ export default class Component extends Node { statements.push(`var ${name_initial_data} = ${initialPropString};`); const setParentFromChildOnChange = new CodeBuilder(); - const setParentFromChildOnInit = new CodeBuilder(); - const setStoreFromChildOnChange = new CodeBuilder(); - const setStoreFromChildOnInit = new CodeBuilder(); bindings.forEach((binding: Binding) => { let { name: key } = getObject(binding.value); @@ -196,11 +193,6 @@ export default class Component extends Node { setFromChild ); - (isStoreProp ? setStoreFromChildOnInit : setParentFromChildOnInit).addConditional( - `!${name_updating}.${binding.name}`, - setFromChild - ); - // TODO could binding.dependencies.length ever be 0? if (binding.dependencies.length) { updates.push(deindent` @@ -237,16 +229,7 @@ export default class Component extends Node { beforecreate = deindent` #component.root._beforecreate.push(function() { - var childState = ${name}.get(), ${initialisers}; - ${!setStoreFromChildOnInit.isEmpty() && deindent` - ${setStoreFromChildOnInit} - #component.store.set(newStoreState); - `} - ${!setParentFromChildOnInit.isEmpty() && deindent` - ${setParentFromChildOnInit} - #component._set(newState); - `} - ${name_updating} = {}; + ${name}._bind({ ${bindings.map(b => `${b.name}: 1`).join(', ')} }, ${name}.get()); }); `; } else if (initialProps.length) { From 72776b0b2ac3d6bd68eefe599ac528410bc3e959 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 10 Feb 2018 21:28:36 -0500 Subject: [PATCH 5/6] fix store bindings --- src/generators/nodes/Component.ts | 49 ++++++++++++++++++------------- 1 file changed, 29 insertions(+), 20 deletions(-) diff --git a/src/generators/nodes/Component.ts b/src/generators/nodes/Component.ts index 59647d2c5a..584444da65 100644 --- a/src/generators/nodes/Component.ts +++ b/src/generators/nodes/Component.ts @@ -137,16 +137,14 @@ export default class Component extends Node { block.addVariable(name_updating, '{}'); statements.push(`var ${name_initial_data} = ${initialPropString};`); - const setParentFromChildOnChange = new CodeBuilder(); - const setStoreFromChildOnChange = new CodeBuilder(); + let hasLocalBindings = false; + let hasStoreBindings = false; + + const builder = new CodeBuilder(); bindings.forEach((binding: Binding) => { let { name: key } = getObject(binding.value); - const isStoreProp = generator.options.store && key[0] === '$'; - if (isStoreProp) key = key.slice(1); - const newState = isStoreProp ? 'newStoreState' : 'newState'; - binding.contexts.forEach(context => { allContexts.add(context); }); @@ -163,21 +161,37 @@ export default class Component extends Node { list[index]${tail} = childState.${binding.name}; ${binding.dependencies - .map((prop: string) => `${newState}.${prop} = state.${prop};`) + .map((name: string) => { + const isStoreProp = generator.options.store && name[0] === '$'; + const prop = isStoreProp ? name.slice(1) : name; + const newState = isStoreProp ? 'newStoreState' : 'newState'; + + if (isStoreProp) hasStoreBindings = true; + else hasLocalBindings = true; + + return `${newState}.${prop} = state.${name};`; + }) .join('\n')} `; } else { + const isStoreProp = generator.options.store && key[0] === '$'; + const prop = isStoreProp ? key.slice(1) : key; + const newState = isStoreProp ? 'newStoreState' : 'newState'; + + if (isStoreProp) hasStoreBindings = true; + else hasLocalBindings = true; + if (binding.value.type === 'MemberExpression') { setFromChild = deindent` ${binding.snippet} = childState.${binding.name}; - ${newState}.${key} = state.${key}; + ${newState}.${prop} = state.${key}; `; } else { - setFromChild = `${newState}.${key} = childState.${binding.name};`; + setFromChild = `${newState}.${prop} = childState.${binding.name};`; } } @@ -188,7 +202,7 @@ export default class Component extends Node { }` ); - (isStoreProp ? setStoreFromChildOnChange : setParentFromChildOnChange).addConditional( + builder.addConditional( `!${name_updating}.${binding.name} && changed.${binding.name}`, setFromChild ); @@ -208,21 +222,16 @@ export default class Component extends Node { const initialisers = [ 'state = #component.get()', - !setParentFromChildOnChange.isEmpty() && 'newState = {}', - !setStoreFromChildOnChange.isEmpty() && 'newStoreState = {}', + hasLocalBindings && 'newState = {}', + hasStoreBindings && 'newStoreState = {}', ].filter(Boolean).join(', '); componentInitProperties.push(deindent` _bind: function(changed, childState) { var ${initialisers}; - ${!setStoreFromChildOnChange.isEmpty() && deindent` - ${setStoreFromChildOnChange} - #component.store.set(newStoreState); - `} - ${!setParentFromChildOnChange.isEmpty() && deindent` - ${setParentFromChildOnChange} - #component._set(newState); - `} + ${builder} + ${hasStoreBindings && `#component.store.set(newStoreState);`} + ${hasLocalBindings && `#component._set(newState);`} ${name_updating} = {}; } `); From dfff2957a00cc156ac74cd900978fd992273edba Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 10 Feb 2018 22:00:32 -0500 Subject: [PATCH 6/6] increase test coverage --- .../store-component-binding-each/Widget.html | 1 + .../store-component-binding-each/_config.js | 30 +++++++++++++++++++ .../store-component-binding-each/main.html | 15 ++++++++++ 3 files changed, 46 insertions(+) create mode 100644 test/runtime/samples/store-component-binding-each/Widget.html create mode 100644 test/runtime/samples/store-component-binding-each/_config.js create mode 100644 test/runtime/samples/store-component-binding-each/main.html diff --git a/test/runtime/samples/store-component-binding-each/Widget.html b/test/runtime/samples/store-component-binding-each/Widget.html new file mode 100644 index 0000000000..f24d608cd5 --- /dev/null +++ b/test/runtime/samples/store-component-binding-each/Widget.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/runtime/samples/store-component-binding-each/_config.js b/test/runtime/samples/store-component-binding-each/_config.js new file mode 100644 index 0000000000..5d6e6889ae --- /dev/null +++ b/test/runtime/samples/store-component-binding-each/_config.js @@ -0,0 +1,30 @@ +import { Store } from '../../../../store.js'; + +const store = new Store({ + a: ['foo', 'bar', 'baz'] +}); + +export default { + store, + + html: ` + +

foo, bar, baz

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

blah, bar, baz

+ `); + + component.destroy(); + }, +}; diff --git a/test/runtime/samples/store-component-binding-each/main.html b/test/runtime/samples/store-component-binding-each/main.html new file mode 100644 index 0000000000..e150c57af8 --- /dev/null +++ b/test/runtime/samples/store-component-binding-each/main.html @@ -0,0 +1,15 @@ +{{#each $a as x}} + +{{/each}} + +

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

+ +