javascript / expert
Snippet
Abfangen dynamischer Array-Mutationen in Svelte-Actions mittels JavaScript-Proxies
Reaktive Svelte-Statements können interne Mutationen von Arrays übersehen, die über Indexzuweisungen oder push-Aufrufe geändert werden, wenn die Referenz unverändert bleibt. Das Einbetten von Ziel-Arrays in einen JavaScript-Proxy in einer Svelte-Action fängt Set-Operationen ab und benachrichtigt Listener mit frischen Kopien.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
export function watchArrayMutation(node, { targetArray, onUpdate }) {const proxy = new Proxy(targetArray, {set(target, property, value) {target[property] = value;if (property === 'length' || !isNaN(Number(property))) {onUpdate([...target]);}return true;}});return { proxy };}
svelte
Erklärung
1
export function watchArrayMutation(node, { targetArray, onUpdate }) {
Definiert eine Svelte-Action, die ein Ziel-Array und einen Mutation-Callback akzeptiert.
2
const proxy = new Proxy(targetArray, {
Erstellt ein Proxy-Objekt, um Lese- und Schreibzugriffe auf das Array abzufangen.
3
set(target, property, value) {
Fängt Index-Updates und strukturelle Mutationen ab.
4
if (property === 'length' || !isNaN(Number(property))) {
Filtert die Ausführung speziell für numerische Indizes oder Längenänderungen.
5
onUpdate([...target]);
Löst den Callback mit einer flachen Kopie aus, um Unveränderlichkeit zu wahren.