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();
  });
 };