Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix invalidate while update #4101

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/runtime/internal/scheduler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,9 @@ function update($$) {
if ($$.fragment !== null) {
$$.update();
run_all($$.before_update);
$$.fragment && $$.fragment.p($$.ctx, $$.dirty);
const dirty = $$.dirty;
$$.dirty = [-1];
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will cause update to refresh everything, whether changed or not.
Also, we need to be sure that the action callback is only triggered once.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought of another oops... what if the 32nd element is invalidated?
We'd lose the bit since the special [-1] is not handled inside p.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tanhauhau,

I think I'm losing it because I thought I saw the fragment update called twice but it is only once.... so nevermind, you are absolutely correct here.

Since this change exists in the other PR, we should close this out.

$$.fragment && $$.fragment.p($$.ctx, dirty);

$$.after_update.forEach(add_render_callback);
}
Expand Down
44 changes: 44 additions & 0 deletions test/runtime/samples/store-invalidation-while-update-1/_config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
export default {
html: `
<input>
<div></div>
<div>simple</div>
<button>click me</button>
`,

async test({ assert, component, target, window }) {
const input = target.querySelector('input');
const button = target.querySelector('button');

const inputEvent = new window.InputEvent('input');
const clickEvent = new window.MouseEvent('click');

input.value = 'foo';
await input.dispatchEvent(inputEvent);

assert.htmlEqual(target.innerHTML, `
<input>
<div>foo</div>
<div>foo</div>
<button>click me</button>
`);

await button.dispatchEvent(clickEvent);
assert.htmlEqual(target.innerHTML, `
<input>
<div>foo</div>
<div>clicked</div>
<button>click me</button>
`);

input.value = 'bar';
await input.dispatchEvent(inputEvent);

assert.htmlEqual(target.innerHTML, `
<input>
<div>bar</div>
<div>bar</div>
<button>click me</button>
`);
}
};
20 changes: 20 additions & 0 deletions test/runtime/samples/store-invalidation-while-update-1/main.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<script>
import {writable} from 'svelte/store';

function action(node, binding) {
return {
update: (value) => s.set(value),
}
}
let s = writable("simple");
let v = "";

function click() {
s.set('clicked');
}
</script>

<input bind:value={v} use:action={v}>
<div>{v}</div>
<div>{$s}</div>
<button on:click={click}>click me</button>
44 changes: 44 additions & 0 deletions test/runtime/samples/store-invalidation-while-update-2/_config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
export default {
html: `
<div></div>
<div>simple</div>
<input>
<button>click me</button>
`,

async test({ assert, component, target, window }) {
const input = target.querySelector('input');
const button = target.querySelector('button');

const inputEvent = new window.InputEvent('input');
const clickEvent = new window.MouseEvent('click');

input.value = 'foo';
await input.dispatchEvent(inputEvent);

assert.htmlEqual(target.innerHTML, `
<div>foo</div>
<div>foo</div>
<input>
<button>click me</button>
`);

await button.dispatchEvent(clickEvent);
assert.htmlEqual(target.innerHTML, `
<div>foo</div>
<div>clicked</div>
<input>
<button>click me</button>
`);

input.value = 'bar';
await input.dispatchEvent(inputEvent);

assert.htmlEqual(target.innerHTML, `
<div>bar</div>
<div>bar</div>
<input>
<button>click me</button>
`);
}
};
20 changes: 20 additions & 0 deletions test/runtime/samples/store-invalidation-while-update-2/main.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<script>
import {writable} from 'svelte/store';

function action(node, binding) {
return {
update: (value) => s.set(value),
}
}
let s = writable("simple");
let v = "";

function click() {
s.set('clicked');
}
</script>

<div>{v}</div>
<div>{$s}</div>
<input bind:value={v} use:action={v}>
<button on:click={click}>click me</button>