Rename to virtual

packages/virtualized-list/README.md → packages/virtual/README.md

@@ -1,24 +1,24 @@
 <p>
-  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=virtualized-list" alt="Solid Primitives virtualized-list">
+  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=virtual" alt="Solid Primitives virtual">
 </p>
 
-# @solid-primitives/virtualized-list
+# @solid-primitives/virtual
 
 [![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
-[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/virtualized-list?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/virtualized-list)
-[![version](https://img.shields.io/npm/v/@solid-primitives/virtualized-list?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/virtualized-list)
+[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/virtual?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/virtual)
+[![version](https://img.shields.io/npm/v/@solid-primitives/virtual?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/virtual)
 [![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)
 
 A basic [virtualized list](https://www.patterns.dev/vanilla/virtual-lists/) component for improving performance when rendering very large lists
 
 ## Installation
 
 ```bash
-npm install @solid-primitives/virtualized-list
+npm install @solid-primitives/virtual
 # or
-yarn add @solid-primitives/virtualized-list
+yarn add @solid-primitives/virtual
 # or
-pnpm add @solid-primitives/virtualized-list
+pnpm add @solid-primitives/virtual
 ```
 
 ## How to use it
@@ -48,7 +48,7 @@ Note that the component only handles vertical lists where the number of items is
 
 ## Demo
 
-You can see the VirtualizedList in action in the following sandbox: https://primitives.solidjs.community/playground/virtualized-list
+You can see the VirtualizedList in action in the following sandbox: https://primitives.solidjs.community/playground/virtual
 
 ## Changelog
 

packages/virtualized-list/package.json → packages/virtual/package.json

@@ -1,11 +1,11 @@
 {
-  "name": "@solid-primitives/virtualized-list",
-  "version": "0.0.100",
+  "name": "@solid-primitives/virtual",
+  "version": "0.0.1",
   "description": "A virtualized list component for performantly rendering lists with many elements",
   "author": "Spencer Whitehead <[email protected]>",
   "contributors": [],
   "license": "MIT",
-  "homepage": "https://primitives.solidjs.community/package/virtualized-list",
+  "homepage": "https://primitives.solidjs.community/package/virtual",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/solidjs-community/solid-primitives.git"
@@ -14,10 +14,10 @@
     "url": "https://github.com/solidjs-community/solid-primitives/issues"
   },
   "primitive": {
-    "name": "virtualized-list",
+    "name": "virtual",
     "stage": 0,
     "list": [
-      "VirtualizedList"
+      "VirtualList"
     ],
     "category": "Display & Media"
   },

packages/virtualized-list/src/index.tsx → packages/virtual/src/index.tsx

@@ -1,14 +1,5 @@
 import { For, createSignal } from "solid-js";
-import type { Component, JSX } from "solid-js";
-
-type VirtualizedListProps<T, U extends JSX.Element> = {
-  children: (item: T) => U;
-  class?: string;
-  each: readonly T[];
-  overscanCount?: number;
-  rootHeight: number;
-  rowHeight: number;
-};
+import type { Accessor, JSX } from "solid-js";
 
 /**
  * A basic virtualized list (see https://www.patterns.dev/vanilla/virtual-lists/) component for improving performance when rendering very large lists
@@ -21,19 +12,26 @@ type VirtualizedListProps<T, U extends JSX.Element> = {
  * @param rowHeight the height of individual rows in the virtualizedList
  * @return virtualized list component
  */
-export const VirtualList: Component<VirtualizedListProps<any, any>> = <T, U extends JSX.Element>(
-  props: VirtualizedListProps<T, U>,
-) => {
+export function VirtualList<T extends readonly any[], U extends JSX.Element>(props: {
+  children: (item: T[number], index: Accessor<number>) => U;
+  fallback?: JSX.Element;
+  class?: string;
+  each: T | undefined | null | false;
+  overscanCount?: number;
+  rootHeight: number;
+  rowHeight: number;
+}): JSX.Element {
   let rootElement!: HTMLDivElement;
 
   const [offset, setOffset] = createSignal(0);
+  const items = () => props.each || ([] as any as T)
 
   const getFirstIdx = () =>
     Math.max(0, Math.floor(offset() / props.rowHeight) - (props.overscanCount || 1));
 
   const getLastIdx = () =>
     Math.min(
-      props.each.length,
+      items().length,
       Math.floor(offset() / props.rowHeight) +
         Math.ceil(props.rootHeight / props.rowHeight) +
         (props.overscanCount || 1),
@@ -55,7 +53,7 @@ export const VirtualList: Component<VirtualizedListProps<any, any>> = <T, U exte
         style={{
           position: "relative",
           width: "100%",
-          height: `${props.each.length * props.rowHeight}px`,
+          height: `${items().length * props.rowHeight}px`,
         }}
       >
         <div
@@ -64,7 +62,7 @@ export const VirtualList: Component<VirtualizedListProps<any, any>> = <T, U exte
             top: `${getFirstIdx() * props.rowHeight}px`,
           }}
         >
-          <For each={props.each.slice(getFirstIdx(), getLastIdx())}>{props.children}</For>
+          <For fallback={props.fallback} each={items().slice(getFirstIdx(), getLastIdx()) as any as T}>{props.children}</For>
         </div>
       </div>
     </div>

packages/virtualized-list/test/index.test.tsx → packages/virtual/test/index.test.tsx

@@ -1,6 +1,6 @@
 import { describe, test, expect, beforeEach } from "vitest";
 import { cleanup, fireEvent, render, screen } from "@solidjs/testing-library";
-import { VirtualList } from "../src/index.js";
+import { VirtualList } from "../src/index.jsx";
 
 import { TEST_LIST, VirtualListItem } from "./helpers.jsx";
 

packages/virtualized-list/test/server.test.tsx → packages/virtual/test/server.test.tsx

@@ -1,5 +1,5 @@
 import { describe, test, expect } from "vitest";
-import { VirtualList } from "../src/index.js";
+import { VirtualList } from "../src/index.jsx";
 
 import { TEST_LIST, VirtualListItem } from "./helpers.jsx";
 import { renderToString } from "solid-js/web";

scripts/build.ts

@@ -26,7 +26,7 @@ const custom_entries: Record<string, preset.EntryOptions | preset.EntryOptions[]
   "controlled-props": {
     entry: "src/index.tsx",
   },
-  "virtualized-list": {
+  "virtual": {
     entry: "src/index.tsx",
   },
   /*filesystem: [