each binding with store props (#5289)

pull/5321/head
Tan Li Hau 4 years ago committed by GitHub
parent c752ed3527
commit 8148a7a334
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -10,6 +10,7 @@
* Fix using `<Namespaced.Component/>`s in child `{#await}`/`{#each}` contexts ([#5255](https://github.com/sveltejs/svelte/issues/5255)) * Fix using `<Namespaced.Component/>`s in child `{#await}`/`{#each}` contexts ([#5255](https://github.com/sveltejs/svelte/issues/5255))
* Fix using `<svelte:component>` in `{:catch}` ([#5259](https://github.com/sveltejs/svelte/issues/5259)) * Fix using `<svelte:component>` in `{:catch}` ([#5259](https://github.com/sveltejs/svelte/issues/5259))
* Fix setting one-way bound `<input>` `value` to `undefined` when it has spread attributes ([#5270](https://github.com/sveltejs/svelte/issues/5270)) * Fix setting one-way bound `<input>` `value` to `undefined` when it has spread attributes ([#5270](https://github.com/sveltejs/svelte/issues/5270))
* Fix deep two-way bindings inside an `{#each}` involving a store ([#5286](https://github.com/sveltejs/svelte/issues/5286))
## 3.24.1 ## 3.24.1

@ -4,6 +4,15 @@ import { b, x } from 'code-red';
import { Node, Identifier, ArrayPattern } from 'estree'; import { Node, Identifier, ArrayPattern } from 'estree';
import { is_head } from './wrappers/shared/is_head'; import { is_head } from './wrappers/shared/is_head';
export interface Bindings {
object: Identifier;
property: Identifier;
snippet: Node;
store: string;
tail: Node;
modifier: (node: Node) => Node;
}
export interface BlockOptions { export interface BlockOptions {
parent?: Block; parent?: Block;
name: Identifier; name: Identifier;
@ -11,14 +20,7 @@ export interface BlockOptions {
renderer?: Renderer; renderer?: Renderer;
comment?: string; comment?: string;
key?: Identifier; key?: Identifier;
bindings?: Map<string, { bindings?: Map<string, Bindings>;
object: Identifier;
property: Identifier;
snippet: Node;
store: string;
tail: Node;
modifier: (node: Node) => Node;
}>;
dependencies?: Set<string>; dependencies?: Set<string>;
} }
@ -36,14 +38,7 @@ export default class Block {
dependencies: Set<string> = new Set(); dependencies: Set<string> = new Set();
bindings: Map<string, { bindings: Map<string, Bindings>;
object: Identifier;
property: Identifier;
snippet: Node;
store: string;
tail: Node;
modifier: (node: Node) => Node;
}>;
chunks: { chunks: {
declarations: Array<Node | Node[]>; declarations: Array<Node | Node[]>;

@ -7,6 +7,7 @@ import FragmentWrapper from './Fragment';
import { b, x } from 'code-red'; import { b, x } from 'code-red';
import ElseBlock from '../../nodes/ElseBlock'; import ElseBlock from '../../nodes/ElseBlock';
import { Identifier, Node } from 'estree'; import { Identifier, Node } from 'estree';
import get_object from '../../utils/get_object';
export class ElseBlockWrapper extends Wrapper { export class ElseBlockWrapper extends Wrapper {
node: ElseBlock; node: ElseBlock;
@ -139,11 +140,8 @@ export default class EachBlockWrapper extends Wrapper {
view_length: fixed_length === null ? x`${iterations}.length` : fixed_length view_length: fixed_length === null ? x`${iterations}.length` : fixed_length
}; };
const store = const object = get_object(node.expression.node);
node.expression.node.type === 'Identifier' && const store = object.type === 'Identifier' && object.name[0] === '$' ? object.name.slice(1) : null;
node.expression.node.name[0] === '$'
? node.expression.node.name.slice(1)
: null;
node.contexts.forEach(prop => { node.contexts.forEach(prop => {
this.block.bindings.set(prop.key.name, { this.block.bindings.set(prop.key.name, {

@ -0,0 +1,14 @@
export default {
async test({ assert, target, window }) {
const input = target.querySelector('input');
const event = new window.Event('input');
input.value = 'changed';
await input.dispatchEvent(event);
assert.htmlEqual(target.innerHTML, `
<input>
<p>changed</p>
`);
}
};

@ -0,0 +1,11 @@
<script>
import { writable } from 'svelte/store';
let itemStore = writable({prop: {things: [{name: "item store"}]}});
</script>
{#each $itemStore.prop.things as thing }
<input bind:value={thing.name} >
{/each}
<p>{$itemStore.prop.things[0].name}</p>
Loading…
Cancel
Save