mirror of https://github.com/sveltejs/svelte
				
				
				
			add updating guard to binding callback (#5126)
	
		
	
				
					
				
			
							parent
							
								
									5b80874cd4
								
							
						
					
					
						commit
						ec0f79c5af
					
				@ -0,0 +1,5 @@
 | 
				
			|||||||
 | 
					<script>
 | 
				
			||||||
 | 
						export let value = '';
 | 
				
			||||||
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<input bind:value />
 | 
				
			||||||
@ -0,0 +1,61 @@
 | 
				
			|||||||
 | 
					export default {
 | 
				
			||||||
 | 
						html: `
 | 
				
			||||||
 | 
							<input />
 | 
				
			||||||
 | 
							<input />
 | 
				
			||||||
 | 
							<div></div>
 | 
				
			||||||
 | 
						`,
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						async test({ assert, component, target, window }) {
 | 
				
			||||||
 | 
							let count = 0;
 | 
				
			||||||
 | 
							component.callback = () => {
 | 
				
			||||||
 | 
								count++;
 | 
				
			||||||
 | 
							};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							const [input1, input2] = target.querySelectorAll("input");
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							input1.value = "1";
 | 
				
			||||||
 | 
							await input1.dispatchEvent(new window.Event("input"));
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							assert.htmlEqual(
 | 
				
			||||||
 | 
								target.innerHTML,
 | 
				
			||||||
 | 
								`
 | 
				
			||||||
 | 
									<input />
 | 
				
			||||||
 | 
									<input />
 | 
				
			||||||
 | 
									<div>1</div>
 | 
				
			||||||
 | 
								`
 | 
				
			||||||
 | 
							);
 | 
				
			||||||
 | 
							assert.equal(input1.value, "1");
 | 
				
			||||||
 | 
							assert.equal(input2.value, "1");
 | 
				
			||||||
 | 
							assert.equal(count, 1);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							input2.value = "123";
 | 
				
			||||||
 | 
							await input2.dispatchEvent(new window.Event("input"));
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							assert.htmlEqual(
 | 
				
			||||||
 | 
								target.innerHTML,
 | 
				
			||||||
 | 
								`
 | 
				
			||||||
 | 
									<input />
 | 
				
			||||||
 | 
									<input />
 | 
				
			||||||
 | 
									<div>123</div>
 | 
				
			||||||
 | 
								`
 | 
				
			||||||
 | 
							);
 | 
				
			||||||
 | 
							assert.equal(input1.value, "123");
 | 
				
			||||||
 | 
							assert.equal(input2.value, "123");
 | 
				
			||||||
 | 
							assert.equal(count, 2);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							input1.value = "456";
 | 
				
			||||||
 | 
							await input1.dispatchEvent(new window.Event("input"));
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							assert.htmlEqual(
 | 
				
			||||||
 | 
								target.innerHTML,
 | 
				
			||||||
 | 
								`
 | 
				
			||||||
 | 
									<input />
 | 
				
			||||||
 | 
									<input />
 | 
				
			||||||
 | 
									<div>456</div>
 | 
				
			||||||
 | 
								`
 | 
				
			||||||
 | 
							);
 | 
				
			||||||
 | 
							assert.equal(input1.value, "456");
 | 
				
			||||||
 | 
							assert.equal(input2.value, "456");
 | 
				
			||||||
 | 
							assert.equal(count, 3);
 | 
				
			||||||
 | 
						},
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
@ -0,0 +1,18 @@
 | 
				
			|||||||
 | 
					<script>
 | 
				
			||||||
 | 
						import { writable } from 'svelte/store';
 | 
				
			||||||
 | 
						import Input from './Input.svelte';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						let value = writable({ value: '' });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						export let callback = () => {};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						value.subscribe(() => {
 | 
				
			||||||
 | 
							callback();
 | 
				
			||||||
 | 
						})
 | 
				
			||||||
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<input bind:value={$value.value} />
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<Input bind:value={$value.value}/>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<div>{$value.value}</div>
 | 
				
			||||||
					Loading…
					
					
				
		Reference in new issue