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