virtua 0.53.3 → 0.53.4

package/README.md

@@ -420,7 +420,43 @@ See [demo](https://inokawa.github.io/virtua/) and [its source code](./stories).
 
 ### FAQs
 
-#### Is there any way to improve performance further?
+#### What is `ResizeObserver loop completed with undelivered notifications.` error?
+
+It may be dispatched by ResizeObserver in this lib [as described in spec](https://www.w3.org/TR/resize-observer/#deliver-resize-error), and [this is a common problem with ResizeObserver](https://github.com/w3c/csswg-drafts/issues/5488). If it bothers you,
+[you can safely ignore it](https://github.com/DevExpress/testcafe/issues/4857#issuecomment-598775956).
+
+Especially for `webpack-dev-server`, [you can filter out the specific error with `devServer.client.overlay.runtimeErrors` option](https://webpack.js.org/configuration/dev-server/#overlay).
+
+#### Why do my items jump when images or other async content inside them are rendered?
+
+Item sizes are measured from the DOM. If content inside an item is rendered asynchronously, such as images, videos, or components that render their content after mount, the item resizes after it's displayed. Items are also unmounted when they are out of view, so the same resize happens again every time they are mounted again.
+
+To avoid it, make the content take its final size from the first render:
+
+- Reserve the size of the content before it's rendered, for example with `width`/`height` or `aspect-ratio` of images and videos.
+- Keep items mounted with `keepMounted` prop if their content can't be restored, such as a playing video.
+
+#### Why are my items squashed, overlapped or rendered inconsistently on resize/add/remove/reorder?
+
+Check that each item has a unique key, such as the id of your data, not its index.
+
+- React: `key` of the element of each item
+- Vue: `key` of the root element in the default slot
+- Solid: the item of `data` itself, so keep the same reference for the same item
+- Svelte: `getKey` prop
+- Angular: `getKey` input
+
+If it still happens, the `shift` prop may be misused.
+
+#### Why `VListHandle.viewportSize` is 0 on mount?
+
+`viewportSize` will be calculated by ResizeObserver so it's 0 until the first measurement.
+
+#### What is `Cannot find module 'virtua/vue(solid|svelte|angular)' or its corresponding type declarations` error?
+
+This package uses [exports of package.json](https://nodejs.org/api/packages.html#package-entry-points) for entry point of Vue/Solid/Svelte/Angular adapter. This field can't be resolved in TypeScript with `moduleResolution: node`. Try `moduleResolution: bundler` or `moduleResolution: nodenext` instead.
+
+#### How can I improve performance in React?
 
 In complex usage, especially if you re-render frequently the parent of virtual scroller or the children are tons of items, children element creation can be a performance bottle neck. That's because creating React elements is fast enough but not free and new React element instances break some of memoization inside virtual scroller.
 
@@ -464,37 +500,6 @@ const Component = memo(HeavyItem);
 </VList>;
 ```
 
-Decreasing `bufferSize` prop may also improve perf in case that components are large and heavy.
-
-Virtua try to suppress glitch caused by resize as much as possible, but it will also require additional work. If your item contains something resized often, such as lazy loaded image, we recommend to set height or min-height to it if possible.
-
-#### What is `ResizeObserver loop completed with undelivered notifications.` error?
-
-It may be dispatched by ResizeObserver in this lib [as described in spec](https://www.w3.org/TR/resize-observer/#deliver-resize-error), and [this is a common problem with ResizeObserver](https://github.com/w3c/csswg-drafts/issues/5488). If it bothers you,
-[you can safely ignore it](https://github.com/DevExpress/testcafe/issues/4857#issuecomment-598775956).
-
-Especially for `webpack-dev-server`, [you can filter out the specific error with `devServer.client.overlay.runtimeErrors` option](https://webpack.js.org/configuration/dev-server/#overlay).
-
-#### Why are my items squashed, overlapped or rendered inconsistently on resize/add/remove/reorder?
-
-Check that each item has a unique key, such as the id of your data, not its index.
-
-- React: `key` of the element of each item
-- Vue: `key` of the root element in the default slot
-- Solid: the item of `data` itself, so keep the same reference for the same item
-- Svelte: `getKey` prop
-- Angular: `getKey` input
-
-If it still happens, the `shift` prop may be misused.
-
-#### Why `VListHandle.viewportSize` is 0 on mount?
-
-`viewportSize` will be calculated by ResizeObserver so it's 0 until the first measurement.
-
-#### What is `Cannot find module 'virtua/vue(solid|svelte|angular)' or its corresponding type declarations` error?
-
-This package uses [exports of package.json](https://nodejs.org/api/packages.html#package-entry-points) for entry point of Vue/Solid/Svelte/Angular adapter. This field can't be resolved in TypeScript with `moduleResolution: node`. Try `moduleResolution: bundler` or `moduleResolution: nodenext` instead.
-
 ## Comparison
 
 ### Features

package/lib/angular/VGrid.d.ts

@@ -194,7 +194,7 @@ export declare class VGrid<R = number, C = number> implements OnInit, VGridHandl
      */
     readonly keepMounted: import("@angular/core").InputSignal<readonly GridCellType[] | undefined>;
     /**
-     * Extra space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank cells in fast scrolling.
+     * Extra space in pixels to render before/after the viewport. The default value is recommended for most cases. A smaller value gives better performance, and a larger value avoids showing blank cells in fast scrolling.
      * @defaultValue 200
      */
     readonly bufferSize: import("@angular/core").InputSignal<number | undefined>;

package/lib/angular/VList.d.ts

@@ -28,7 +28,7 @@ export declare class VList<T> implements OnInit, VListHandle {
      */
     readonly itemProps: import("@angular/core").InputSignal<ItemProps<T> | undefined>;
     /**
-     * Extra item space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling.
+     * Extra space in pixels to render before/after the viewport. The default value is recommended for most cases. A smaller value gives better performance, and a larger value avoids showing blank items in fast scrolling.
      * @defaultValue 200
      */
     readonly bufferSize: import("@angular/core").InputSignal<number | undefined>;

package/lib/angular/VMasonry.d.ts

@@ -80,7 +80,7 @@ export declare class VMasonry<T> implements OnInit, VMasonryHandle {
      */
     readonly itemSize: import("@angular/core").InputSignal<number | undefined>;
     /**
-     * Extra item space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling.
+     * Extra space in pixels to render before/after the viewport. The default value is recommended for most cases. A smaller value gives better performance, and a larger value avoids showing blank items in fast scrolling.
      * @defaultValue 200
      */
     readonly bufferSize: import("@angular/core").InputSignal<number | undefined>;

package/lib/angular/Virtualizer.d.ts

@@ -75,7 +75,7 @@ export declare class Virtualizer<T> implements OnInit, VirtualizerHandle {
      */
     readonly itemProps: import("@angular/core").InputSignal<ItemProps<T> | undefined>;
     /**
-     * Extra item space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling.
+     * Extra space in pixels to render before/after the viewport. The default value is recommended for most cases. A smaller value gives better performance, and a larger value avoids showing blank items in fast scrolling.
      * @defaultValue 200
      */
     readonly bufferSize: import("@angular/core").InputSignal<number | undefined>;

package/lib/angular/WindowVirtualizer.d.ts

@@ -56,7 +56,7 @@ export declare class WindowVirtualizer<T> implements OnInit, WindowVirtualizerHa
      */
     readonly getKey: import("@angular/core").InputSignal<(data: T, index: number) => string | number>;
     /**
-     * Extra item space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling.
+     * Extra space in pixels to render before/after the viewport. The default value is recommended for most cases. A smaller value gives better performance, and a larger value avoids showing blank items in fast scrolling.
      * @defaultValue 200
      */
     readonly bufferSize: import("@angular/core").InputSignal<number | undefined>;