Merge pull request #497 from inokawa/svelte-resize

Fixed bug Svelte VList ignores items resize

src/svelte/ListItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+  import { afterUpdate, onDestroy } from "svelte";
   import { isRTLDocument, type ItemResizeObserver } from "./core";
-  import { effect, styleToString } from "./utils";
+  import { styleToString } from "./utils";
 
   export let index: number;
   export let offset: number;
@@ -10,11 +11,16 @@
 
   let elementRef: HTMLDivElement;
 
+  let cleanupResizer: (() => void) | undefined;
   // The index may be changed if elements are inserted to or removed from the start of props.children
   let prevIndex: number | undefined;
-  effect(() => {
+  afterUpdate(() => {
     if (prevIndex === index) return;
-    return resizer(elementRef, (prevIndex = index));
+    if (cleanupResizer) cleanupResizer();
+    cleanupResizer = resizer(elementRef, (prevIndex = index));
+  });
+  onDestroy(() => {
+    if (cleanupResizer) cleanupResizer();
   });
 
   let style: string;

src/svelte/VList.svelte

@@ -25,7 +25,7 @@
     SCROLL_TO_INDEX,
   } from "./core";
   import {
-    effect,
+    onUpdate,
     type UnwrapCustomEvents,
     defaultGetKey,
     styleToString,
@@ -131,20 +131,20 @@
   });
 
   let prevLength = data.length;
-  effect(() => {
+  onUpdate(() => {
     if (prevLength === data.length) return;
     virtualizer[CHANGE_ITEM_LENGTH]((prevLength = data.length), shift);
   }, true);
 
   let prevJumpCount: number | undefined;
-  effect(() => {
+  onUpdate(() => {
     if (prevJumpCount === jumpCount) return;
     prevJumpCount = jumpCount;
     virtualizer[FIX_SCROLL_JUMP]();
   });
 
   let prevRange: typeof range | undefined;
-  effect(() => {
+  onUpdate(() => {
     if (prevRange && prevRange[0] === range[0] && prevRange[1] === range[1])
       return;
     prevRange = range;

src/svelte/utils.ts

@@ -1,15 +1,8 @@
-import { afterUpdate, beforeUpdate, onDestroy } from "svelte";
-
-export const effect = (cb: () => (() => void) | void, before?: boolean) => {
-  let cleanup: (() => void) | void;
+import { afterUpdate, beforeUpdate } from "svelte";
 
+export const onUpdate = (cb: () => void, before?: boolean) => {
   (before ? beforeUpdate : afterUpdate)(() => {
-    if (cleanup) cleanup();
-    cleanup = cb();
-  });
-
-  onDestroy(() => {
-    if (cleanup) cleanup();
+    cb();
   });
 };