Describe the bug
In useSelector, slice is Proxied via $state, whereas the data resolved through selector(s) is not Proxied.
Because of this, the comparison performed by compare function (where defaultCompare is used) triggers Svelte's state_proxy_equality_mismatch warning. This causes the comparison to always return false, making this conditional branch a kind of dead code.
|
const compare = options.compare ?? defaultCompare |
|
let slice = $state(selector(source.get())) |
|
|
|
$effect(() => { |
|
const unsub = source.subscribe((s) => { |
|
const data = selector(s) |
|
if (compare(slice, data)) { |
|
return |
|
} |
|
slice = data |
|
}).unsubscribe |
|
|
|
return unsub |
|
}) |
Steps to Reproduce the Bug or Issue
It is easiest to try out @tanstack/svelte-table v9 alpha to understand it better.
Here is the demo in Svelte Playground.
https://svelte.dev/playground/6cb4726d28594a3a9781f8a785d331fe?version=latest
<script lang="ts">
import { createTable, tableFeatures } from '@tanstack/svelte-table';
const _features = tableFeatures({});
let data = $state([{ id: 1 }]);
const table = createTable({
_features,
_rowModels: {},
get data() { return data; },
columns: [{ accessorKey: 'id', header: 'ID' }],
});
</script>
<button onclick={() => (data = [...data, { id: data.length + 1 }])}>Add</button>
{#each table.getRowModel().rows as row (row.id)}
<div>{row.original.id}</div>
{/each}
Expected behavior
Fix this warning so the comparison works right.
Screenshots or Videos
No response
Platform
@tanstack/svelte-store@0.12.0
@tanstack/svelte-table@9.0.0-alpha.45
svelte@5.55.x
Additional context
It will probably be resolved just by changing slice variable $state to $state.raw.
This is because the slice reassigning the entire variable, so there seems to be no reason to make it a Proxy.
Describe the bug
In
useSelector,sliceis Proxied via$state, whereas thedataresolved throughselector(s)is not Proxied.Because of this, the comparison performed by
comparefunction (wheredefaultCompareis used) triggers Svelte'sstate_proxy_equality_mismatchwarning. This causes the comparison to always return false, making this conditional branch a kind of dead code.store/packages/svelte-store/src/useSelector.svelte.ts
Lines 37 to 50 in a378a51
Steps to Reproduce the Bug or Issue
It is easiest to try out
@tanstack/svelte-tablev9 alpha to understand it better.Here is the demo in Svelte Playground.
https://svelte.dev/playground/6cb4726d28594a3a9781f8a785d331fe?version=latest
Expected behavior
Fix this warning so the comparison works right.
Screenshots or Videos
No response
Platform
@tanstack/svelte-store@0.12.0@tanstack/svelte-table@9.0.0-alpha.45svelte@5.55.xAdditional context
It will probably be resolved just by changing
slicevariable$stateto$state.raw.This is because the
slicereassigning the entire variable, so there seems to be no reason to make it a Proxy.