fix: mark subtree dynamic for bind with sequence expressions (#14626)

pull/14628/head
Paolo Ricciuti 9 months ago committed by GitHub
parent c1c59e77a5
commit c66bf178aa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: mark subtree dynamic for bind with sequence expressions

@ -11,6 +11,7 @@ import * as w from '../../../warnings.js';
import { binding_properties } from '../../bindings.js'; import { binding_properties } from '../../bindings.js';
import fuzzymatch from '../../1-parse/utils/fuzzymatch.js'; import fuzzymatch from '../../1-parse/utils/fuzzymatch.js';
import { is_content_editable_binding, is_svg } from '../../../../utils.js'; import { is_content_editable_binding, is_svg } from '../../../../utils.js';
import { mark_subtree_dynamic } from './shared/fragment.js';
/** /**
* @param {AST.BindDirective} node * @param {AST.BindDirective} node
@ -141,6 +142,8 @@ export function BindDirective(node, context) {
e.bind_invalid_expression(node); e.bind_invalid_expression(node);
} }
mark_subtree_dynamic(context.path);
return; return;
} }

@ -4,17 +4,23 @@ import { assert_ok } from '../../../suite';
export default test({ export default test({
async test({ assert, target, logs }) { async test({ assert, target, logs }) {
const input = target.querySelector('input'); const [input, checkbox] = target.querySelectorAll('input');
assert_ok(input);
input.value = '2'; input.value = '2';
input.dispatchEvent(new window.Event('input')); input.dispatchEvent(new window.Event('input'));
flushSync(); flushSync();
assert.htmlEqual(target.innerHTML, `<button>a: 2</button><input type="value">`); assert.htmlEqual(
target.innerHTML,
`<button>a: 2</button><input type="value"><div><input type="checkbox" ></div>`
);
assert.deepEqual(logs, ['b', '2', 'a', '2']); assert.deepEqual(logs, ['b', '2', 'a', '2']);
flushSync(() => {
checkbox.click();
});
assert.deepEqual(logs, ['b', '2', 'a', '2', 'check', false]);
} }
}); });

@ -2,6 +2,7 @@
import Child from './Child.svelte'; import Child from './Child.svelte';
let a = $state(0); let a = $state(0);
let check = $state(true);
</script> </script>
<button onclick={() => a++}>a: {a}</button> <button onclick={() => a++}>a: {a}</button>
@ -14,3 +15,11 @@
}} }}
/> />
<div>
<input type="checkbox"
bind:checked={()=>check,
(v)=>{
console.log('check', v);
check = v;
}} />
</div>
Loading…
Cancel
Save