mirror of https://github.com/sveltejs/svelte
feat: allow $inspect reactivity map, set, date (#11164)
* feat: allow $inspect reactivity map, set, date * feat: inspect map without adding new data source * feat: add inspect * feat: define inspect on dev mode only * fix: lint errorpull/11223/head
parent
70b47de124
commit
43d13e92a0
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
feat: allow inspect reactivity map, set, date
|
@ -0,0 +1,81 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { log } from './log';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
compileOptions: {
|
||||||
|
dev: true
|
||||||
|
},
|
||||||
|
before_test() {
|
||||||
|
log.length = 0;
|
||||||
|
},
|
||||||
|
async test({ assert, target }) {
|
||||||
|
const [in1, in2] = target.querySelectorAll('input');
|
||||||
|
const [b1, b2, b3] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
assert.deepEqual(log, [
|
||||||
|
{ label: 'map', type: 'init', values: [] },
|
||||||
|
{ label: 'set', type: 'init', values: [] },
|
||||||
|
{ label: 'date', type: 'init', values: 1712966400000 }
|
||||||
|
]);
|
||||||
|
log.length = 0;
|
||||||
|
|
||||||
|
flushSync(() => b1.click()); // map.set('key', 'value')
|
||||||
|
|
||||||
|
in1.value = 'name';
|
||||||
|
in2.value = 'Svelte';
|
||||||
|
in1.dispatchEvent(new window.Event('input', { bubbles: true }));
|
||||||
|
in2.dispatchEvent(new window.Event('input', { bubbles: true }));
|
||||||
|
flushSync(() => b1.click()); // map.set('name', 'Svelte')
|
||||||
|
|
||||||
|
in2.value = 'World';
|
||||||
|
in2.dispatchEvent(new window.Event('input', { bubbles: true }));
|
||||||
|
flushSync(() => b1.click()); // map.set('name', 'World')
|
||||||
|
flushSync(() => b1.click()); // map.set('name', 'World')
|
||||||
|
|
||||||
|
assert.deepEqual(log, [
|
||||||
|
{ label: 'map', type: 'update', values: [['key', 'value']] },
|
||||||
|
{
|
||||||
|
label: 'map',
|
||||||
|
type: 'update',
|
||||||
|
values: [
|
||||||
|
['key', 'value'],
|
||||||
|
['name', 'Svelte']
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'map',
|
||||||
|
type: 'update',
|
||||||
|
values: [
|
||||||
|
['key', 'value'],
|
||||||
|
['name', 'World']
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
log.length = 0;
|
||||||
|
|
||||||
|
flushSync(() => b2.click()); // set.add('name');
|
||||||
|
|
||||||
|
in1.value = 'Svelte';
|
||||||
|
in1.dispatchEvent(new window.Event('input', { bubbles: true }));
|
||||||
|
flushSync(() => b2.click()); // set.add('Svelte');
|
||||||
|
|
||||||
|
flushSync(() => b2.click()); // set.add('Svelte');
|
||||||
|
|
||||||
|
assert.deepEqual(log, [
|
||||||
|
{ label: 'set', type: 'update', values: ['name'] },
|
||||||
|
{ label: 'set', type: 'update', values: ['name', 'Svelte'] }
|
||||||
|
]);
|
||||||
|
log.length = 0;
|
||||||
|
|
||||||
|
flushSync(() => b3.click()); // date.minutes++
|
||||||
|
flushSync(() => b3.click()); // date.minutes++
|
||||||
|
flushSync(() => b3.click()); // date.minutes++
|
||||||
|
|
||||||
|
assert.deepEqual(log, [
|
||||||
|
{ label: 'date', type: 'update', values: 1712966460000 },
|
||||||
|
{ label: 'date', type: 'update', values: 1712966520000 },
|
||||||
|
{ label: 'date', type: 'update', values: 1712966580000 }
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
});
|
@ -0,0 +1,2 @@
|
|||||||
|
/** @type {any[]} */
|
||||||
|
export const log = [];
|
@ -0,0 +1,27 @@
|
|||||||
|
<script>
|
||||||
|
import { Map, Set, Date } from 'svelte/reactivity';
|
||||||
|
import { log } from './log';
|
||||||
|
|
||||||
|
const map = new Map();
|
||||||
|
const set = new Set();
|
||||||
|
const date = new Date('2024-04-13 00:00:00+0000');
|
||||||
|
let key = $state('key');
|
||||||
|
let value = $state('value');
|
||||||
|
|
||||||
|
$inspect(map).with((type, map) => {
|
||||||
|
log.push({ label: 'map', type, values: [...map] });
|
||||||
|
});
|
||||||
|
$inspect(set).with((type, set) => {
|
||||||
|
log.push({ label: 'set', type, values: [...set] });
|
||||||
|
});
|
||||||
|
$inspect(date).with((type, date) => {
|
||||||
|
log.push({ label: 'date', type, values: date.getTime() });
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input bind:value={key} />
|
||||||
|
<input bind:value={value} />
|
||||||
|
|
||||||
|
<button on:click={() => map.set(key, value)}>map</button>
|
||||||
|
<button on:click={() => set.add(key)}>set</button>
|
||||||
|
<button on:click={() => date.setMinutes(date.getMinutes() + 1)}>date</button>
|
Loading…
Reference in new issue