mirror of https://github.com/sveltejs/svelte
fix: improve $inspect handling of derived objects (#10584)
* fix: improve $inspect handling of derived objects * Update packages/svelte/src/internal/client/runtime.js Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>pull/10592/head
parent
29890bb616
commit
58008479fc
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: improve $inspect handling of derived objects
|
@ -0,0 +1,54 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
/**
|
||||
* @type {any[]}
|
||||
*/
|
||||
let log;
|
||||
/**
|
||||
* @type {typeof console.log}}
|
||||
*/
|
||||
let original_log;
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
before_test() {
|
||||
log = [];
|
||||
original_log = console.log;
|
||||
console.log = (...v) => {
|
||||
log.push(...v);
|
||||
};
|
||||
},
|
||||
after_test() {
|
||||
console.log = original_log;
|
||||
},
|
||||
async test({ assert, target }) {
|
||||
const button = target.querySelector('button');
|
||||
|
||||
flushSync(() => {
|
||||
button?.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `<button>update</button>\n1`);
|
||||
assert.deepEqual(log, [
|
||||
'init',
|
||||
{
|
||||
data: {
|
||||
derived: 0,
|
||||
list: []
|
||||
},
|
||||
derived: []
|
||||
},
|
||||
'update',
|
||||
{
|
||||
data: {
|
||||
derived: 0,
|
||||
list: [1]
|
||||
},
|
||||
derived: [1]
|
||||
}
|
||||
]);
|
||||
}
|
||||
});
|
@ -0,0 +1,21 @@
|
||||
<script context="module">
|
||||
const data = $state({
|
||||
list: [],
|
||||
derived: 0
|
||||
});
|
||||
|
||||
const derived = $derived(data.list.filter(() => true));
|
||||
|
||||
const state = {
|
||||
data,
|
||||
get derived() { return derived }
|
||||
};
|
||||
</script>
|
||||
|
||||
<script>
|
||||
data.list.length = 0;
|
||||
$inspect(state);
|
||||
</script>
|
||||
|
||||
<button onclick={() => (state.data.list.push(1))}>update</button>
|
||||
{state.data.list}
|
Loading…
Reference in new issue