fix: SolidJS reactivity warnings

src/solid/ListItem.tsx

@@ -4,8 +4,8 @@
 import { ItemResizeObserver } from "../core/resizer";
 import { isRTLDocument } from "../core/environment";
 import {
-  Component,
-  JSX,
+  type Component,
+  type JSX,
   createEffect,
   createMemo,
   mergeProps,
@@ -29,28 +29,25 @@ interface ListItemProps {
  */
 export const ListItem: Component<ListItemProps> = (props) => {
   let elementRef: HTMLDivElement | undefined;
-  props = mergeProps<[Partial<ListItemProps>, ListItemProps]>(
-    { _as: "div" },
-    props
-  );
+  const mergedProps = mergeProps({ _as: "div" }, props);
 
-  // The index may be changed if elements are inserted to or removed from the start of props.children
+  // The index may be changed if elements are inserted to or removed from the start of mergedProps.children
   createEffect(() => {
     if (!elementRef) return;
-    onCleanup(props._resizer(elementRef, props._index));
+    onCleanup(mergedProps._resizer(elementRef, mergedProps._index));
   });
 
   const style = createMemo(() => {
-    const isHorizontal = props._isHorizontal;
+    const isHorizontal = mergedProps._isHorizontal;
     const style: JSX.CSSProperties = {
       margin: 0,
       padding: 0,
       position: "absolute",
       [isHorizontal ? "height" : "width"]: "100%",
       [isHorizontal ? "top" : "left"]: "0px",
       [isHorizontal ? (isRTLDocument() ? "right" : "left") : "top"]:
-        props._offset + "px",
-      visibility: props._hide ? "hidden" : "visible",
+        mergedProps._offset + "px",
+      visibility: mergedProps._hide ? "hidden" : "visible",
     };
     if (isHorizontal) {
       style.display = "flex";
@@ -59,8 +56,8 @@ export const ListItem: Component<ListItemProps> = (props) => {
   });
 
   return (
-    <Dynamic component={props._as} ref={elementRef} style={style()}>
-      {props._children}
+    <Dynamic component={mergedProps._as} ref={elementRef} style={style()}>
+      {mergedProps._children}
     </Dynamic>
   );
 };

src/solid/RangedFor.tsx

@@ -6,11 +6,11 @@
   createRoot,
   createSignal,
   onCleanup,
-  JSX,
-  Signal,
-  Accessor,
+  type JSX,
+  type Signal,
+  type Accessor,
 } from "solid-js";
-import { ItemsRange } from "../core/types";
+import type { ItemsRange } from "../core/types";
 
 interface RenderedNode<T> {
   _data: Signal<T>;
@@ -37,7 +37,7 @@
     }
   });
 
   return createMemo(() => {
     const list = props._each;
     const [start, end] = props._range;
     const current = new Map<number, RenderedNode<T>>();
@@ -50,7 +50,7 @@
         lookup
           ? lookup._element
           : createRoot((dispose) => {
               const data = createSignal(newData);
               const result = props._render(data[0], i);
               current.set(i, {
                 _data: data,
@@ -58,12 +58,12 @@
                 _dispose: dispose,
               });
               return result;
-            })
+            }),
       );
       if (lookup) {
         if (newData !== lookup._data) {
           lookup._data[1](
-            newData as Exclude<T, Function> // TODO improve type
+            newData as Exclude<T, Function>, // TODO improve type
           );
         }
         current.set(i, lookup);

src/solid/VList.tsx

@@ -1,12 +1,12 @@
 /**
  * @jsxImportSource solid-js
  */
-import { JSX } from "solid-js";
-import { ViewportComponentAttributes } from "./types";
+import { type JSX, splitProps } from "solid-js";
+import type { ViewportComponentAttributes } from "./types";
 import {
   Virtualizer,
-  VirtualizerHandle,
-  VirtualizerProps,
+  type VirtualizerHandle,
+  type VirtualizerProps,
 } from "./Virtualizer";
 
 /**
@@ -37,45 +37,44 @@ export interface VListProps<T>
  * Virtualized list component. See {@link VListProps} and {@link VListHandle}.
  */
 export const VList = <T,>(props: VListProps<T>): JSX.Element => {
-  const {
-    ref,
-    data,
-    children,
-    overscan,
-    itemSize,
-    shift,
-    horizontal,
-    onScroll,
-    onScrollEnd,
-    onRangeChange,
-    style,
-    ...attrs
-  } = props;
+  const [local, ...attrs] = splitProps(props, [
+    "ref",
+    "data",
+    "children",
+    "overscan",
+    "itemSize",
+    "shift",
+    "horizontal",
+    "onScroll",
+    "onScrollEnd",
+    "onRangeChange",
+    "style",
+  ]);
 
   return (
     <div
       {...attrs}
       style={{
-        display: horizontal ? "inline-block" : "block",
-        [horizontal ? "overflow-x" : "overflow-y"]: "auto",
+        display: local.horizontal ? "inline-block" : "block",
+        [local.horizontal ? "overflow-x" : "overflow-y"]: "auto",
         contain: "strict",
         width: "100%",
         height: "100%",
-        ...props.style,
+        ...local.style,
       }}
     >
       <Virtualizer
-        ref={props.ref}
-        data={props.data}
-        overscan={props.overscan}
-        itemSize={props.itemSize}
-        shift={props.shift}
-        horizontal={horizontal}
-        onScroll={props.onScroll}
-        onScrollEnd={props.onScrollEnd}
-        onRangeChange={props.onRangeChange}
+        ref={local.ref}
+        data={local.data}
+        overscan={local.overscan}
+        itemSize={local.itemSize}
+        shift={local.shift}
+        horizontal={local.horizontal}
+        onScroll={local.onScroll}
+        onScrollEnd={local.onScrollEnd}
+        onRangeChange={local.onRangeChange}
       >
-        {props.children}
+        {local.children}
       </Virtualizer>
     </div>
   );