Merge pull request #1170 from sveltejs/gh-1100-onchange

Deep component store bindings
pull/1182/head
Rich Harris 7 years ago committed by GitHub
commit fd69ada3b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -137,27 +137,21 @@ export default class Component extends Node {
block.addVariable(name_updating, '{}'); block.addVariable(name_updating, '{}');
statements.push(`var ${name_initial_data} = ${initialPropString};`); statements.push(`var ${name_initial_data} = ${initialPropString};`);
const setParentFromChildOnChange = new CodeBuilder(); let hasLocalBindings = false;
const setParentFromChildOnInit = new CodeBuilder(); let hasStoreBindings = false;
const setStoreFromChildOnChange = new CodeBuilder(); const builder = new CodeBuilder();
const setStoreFromChildOnInit = new CodeBuilder();
bindings.forEach((binding: Binding) => { bindings.forEach((binding: Binding) => {
let { name: key } = getObject(binding.value); 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 => { binding.contexts.forEach(context => {
allContexts.add(context); allContexts.add(context);
}); });
let setFromChild; let setFromChild;
if (!isStoreProp && block.contexts.has(key)) { if (block.contexts.has(key)) {
const prop = binding.dependencies[0];
const computed = isComputed(binding.value); const computed = isComputed(binding.value);
const tail = binding.value.type === 'MemberExpression' ? getTailSnippet(binding.value) : ''; const tail = binding.value.type === 'MemberExpression' ? getTailSnippet(binding.value) : '';
@ -167,20 +161,38 @@ export default class Component extends Node {
list[index]${tail} = childState.${binding.name}; list[index]${tail} = childState.${binding.name};
${binding.dependencies ${binding.dependencies
.map((prop: string) => `${newState}.${prop} = state.${prop};`) .map((name: string) => {
.join('\n')} const isStoreProp = generator.options.store && name[0] === '$';
`; const prop = isStoreProp ? name.slice(1) : name;
} const newState = isStoreProp ? 'newStoreState' : 'newState';
else if (binding.value.type === 'MemberExpression') { if (isStoreProp) hasStoreBindings = true;
setFromChild = deindent` else hasLocalBindings = true;
${binding.snippet} = childState.${binding.name};
${binding.dependencies.map((prop: string) => `${newState}.${prop} = state.${prop};`).join('\n')} return `${newState}.${prop} = state.${name};`;
})
.join('\n')}
`; `;
} }
else { else {
setFromChild = `${newState}.${key} = childState.${binding.name};`; 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}.${prop} = state.${key};
`;
}
else {
setFromChild = `${newState}.${prop} = childState.${binding.name};`;
}
} }
statements.push(deindent` statements.push(deindent`
@ -190,16 +202,11 @@ export default class Component extends Node {
}` }`
); );
(isStoreProp ? setStoreFromChildOnChange : setParentFromChildOnChange).addConditional( builder.addConditional(
`!${name_updating}.${binding.name} && changed.${binding.name}`, `!${name_updating}.${binding.name} && changed.${binding.name}`,
setFromChild setFromChild
); );
(isStoreProp ? setStoreFromChildOnInit : setParentFromChildOnInit).addConditional(
`!${name_updating}.${binding.name}`,
setFromChild
);
// TODO could binding.dependencies.length ever be 0? // TODO could binding.dependencies.length ever be 0?
if (binding.dependencies.length) { if (binding.dependencies.length) {
updates.push(deindent` updates.push(deindent`
@ -215,44 +222,23 @@ export default class Component extends Node {
const initialisers = [ const initialisers = [
'state = #component.get()', 'state = #component.get()',
!setParentFromChildOnChange.isEmpty() && 'newState = {}', hasLocalBindings && 'newState = {}',
!setStoreFromChildOnChange.isEmpty() && 'newStoreState = {}', hasStoreBindings && 'newStoreState = {}',
].filter(Boolean).join(', '); ].filter(Boolean).join(', ');
componentInitProperties.push(deindent` componentInitProperties.push(deindent`
_bind: function(changed, childState) { _bind: function(changed, childState) {
var ${initialisers}; var ${initialisers};
${!setStoreFromChildOnChange.isEmpty() && deindent` ${builder}
${setStoreFromChildOnChange} ${hasStoreBindings && `#component.store.set(newStoreState);`}
${name_updating} = @assign({}, changed); ${hasLocalBindings && `#component._set(newState);`}
#component.store.set(newStoreState);
`}
${!setParentFromChildOnChange.isEmpty() && deindent`
${setParentFromChildOnChange}
${name_updating} = @assign({}, changed);
#component._set(newState);
`}
${name_updating} = {}; ${name_updating} = {};
} }
`); `);
// TODO can `!childState` ever be true?
beforecreate = deindent` beforecreate = deindent`
#component.root._beforecreate.push(function() { #component.root._beforecreate.push(function() {
var childState = ${name}.get(), ${initialisers}; ${name}._bind({ ${bindings.map(b => `${b.name}: 1`).join(', ')} }, ${name}.get());
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} = {};
}); });
`; `;
} else if (initialProps.length) { } else if (initialProps.length) {

@ -0,0 +1,42 @@
import { Store } from '../../../../store.js';
const store = new Store({
name: {
value: 'world'
}
});
export default {
store,
html: `
<h1>Hello world!</h1>
<input>
`,
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, `
<h1>Hello everybody!</h1>
<input>
`);
assert.deepEqual(changeRecord, [
{
state: { name: { value: 'everybody' } },
changes: { name: true }
}
]);
}
};

@ -0,0 +1,10 @@
<h1>Hello {{$name.value}}!</h1>
<TextInput bind:value=$name.value/>
<script>
import TextInput from './TextInput.html';
export default {
components: { TextInput }
};
</script>

@ -0,0 +1,30 @@
import { Store } from '../../../../store.js';
const store = new Store({
a: ['foo', 'bar', 'baz']
});
export default {
store,
html: `
<input><input><input>
<p>foo, bar, baz</p>
`,
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, `
<input><input><input>
<p>blah, bar, baz</p>
`);
component.destroy();
},
};

@ -0,0 +1,15 @@
{{#each $a as x}}
<Widget bind:value='x'/>
{{/each}}
<p>{{$a.join(', ')}}</p>
<script>
import Widget from './Widget.html';
export default {
components: {
Widget
}
};
</script>

@ -16,6 +16,11 @@ export default {
const input = target.querySelector('input'); const input = target.querySelector('input');
const event = new window.Event('input'); const event = new window.Event('input');
const changeRecord = [];
store.onchange((state, changes) => {
changeRecord.push({ state, changes });
});
input.value = 'everybody'; input.value = 'everybody';
input.dispatchEvent(event); input.dispatchEvent(event);
@ -24,5 +29,12 @@ export default {
<h1>Hello everybody!</h1> <h1>Hello everybody!</h1>
<input> <input>
`); `);
assert.deepEqual(changeRecord, [
{
state: { name: 'everybody' },
changes: { name: true }
}
]);
} }
}; };
Loading…
Cancel
Save