Add basic preact integration

Author: JoviDeCroock

docs/config.json

@@ -22,6 +22,15 @@
             }
           ]
         },
+        {
+          "label": "preact",
+          "children": [
+            {
+              "label": "Preact Virtual",
+              "to": "framework/preact/preact-virtual"
+            }
+          ]
+        },
         {
           "label": "angular",
           "children": [

docs/framework/preact/preact-virtual.md

@@ -0,0 +1,34 @@
+---
+title: Preact Virtual
+---
+
+The `@tanstack/preact-virtual` adapter is a wrapper around the core virtual logic.
+
+## `useVirtualizer`
+
+```tsx
+function useVirtualizer<TScrollElement, TItemElement = unknown>(
+  options: PartialKeys<
+    VirtualizerOptions<TScrollElement, TItemElement>,
+    'observeElementRect' | 'observeElementOffset' | 'scrollToFn'
+  >,
+): Virtualizer<TScrollElement, TItemElement>
+```
+
+This function returns a standard `Virtualizer` instance configured to work with an HTML element as the scrollElement.
+
+## `useWindowVirtualizer`
+
+```tsx
+function useWindowVirtualizer<TItemElement = unknown>(
+  options: PartialKeys<
+    VirtualizerOptions<Window, TItemElement>,
+    | 'getScrollElement'
+    | 'observeElementRect'
+    | 'observeElementOffset'
+    | 'scrollToFn'
+  >,
+): Virtualizer<Window, TItemElement>
+```
+
+This function returns a window-based `Virtualizer` instance configured to work with the window as the scrollElement.

docs/installation.md

@@ -12,6 +12,12 @@ Install your TanStack Virtual adapter as a dependency using your favorite npm pa
 npm install @tanstack/react-virtual
 ```
 
+## Preact Virtual
+
+```bash
+npm install @tanstack/preact-virtual
+```
+
 ## Solid Virtual
 
 ```bash

docs/introduction.md

@@ -2,7 +2,7 @@
 title: Introduction
 ---
 
-TanStack Virtual is a headless UI utility for virtualizing long lists of elements in JS/TS, React, Vue, Svelte, Solid, Lit, and Angular. It is not a component therefore does not ship with or render any markup or styles for you. While this requires a bit of markup and styles from you, you will retain 100% control over your styles, design and implementation.
+TanStack Virtual is a headless UI utility for virtualizing long lists of elements in JS/TS, React, Preact, Vue, Svelte, Solid, Lit, and Angular. It is not a component therefore does not ship with or render any markup or styles for you. While this requires a bit of markup and styles from you, you will retain 100% control over your styles, design and implementation.
 
 ## The Virtualizer
 

packages/preact-virtual/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @tanstack/preact-virtual
+
+## 3.13.18
+
+### Patch Changes
+
+- Initial Preact adapter release.
+
+### Dependencies
+
+- Updated dependency [`@tanstack/virtual-core`](../virtual-core/CHANGELOG.md)

packages/preact-virtual/eslint.config.js

@@ -0,0 +1,5 @@
+// @ts-check
+
+import rootConfig from '../../eslint.config.js'
+
+export default [...rootConfig]

packages/preact-virtual/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@tanstack/preact-virtual",
+  "version": "3.13.18",
+  "description": "Headless UI for virtualizing scrollable elements in Preact",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/virtual.git",
+    "directory": "packages/preact-virtual"
+  },
+  "homepage": "https://tanstack.com/virtual",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "preact",
+    "virtual",
+    "virtual-core",
+    "datagrid"
+  ],
+  "scripts": {
+    "clean": "premove ./dist ./coverage",
+    "test:eslint": "eslint ./src",
+    "test:types": "tsc",
+    "test:lib": "vitest",
+    "test:lib:dev": "pnpm run test:lib --watch",
+    "test:build": "publint --strict",
+    "build": "vite build"
+  },
+  "type": "module",
+  "types": "dist/esm/index.d.ts",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@tanstack/virtual-core": "workspace:*"
+  },
+  "devDependencies": {
+    "preact": "^10.27.2"
+  },
+  "peerDependencies": {
+    "preact": "^10.0.0"
+  }
+}

packages/preact-virtual/src/index.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useLayoutEffect, useState } from 'preact/hooks'
+import {
+  Virtualizer,
+  elementScroll,
+  observeElementOffset,
+  observeElementRect,
+  observeWindowOffset,
+  observeWindowRect,
+  windowScroll,
+} from '@tanstack/virtual-core'
+import type { PartialKeys, VirtualizerOptions } from '@tanstack/virtual-core'
+
+export * from '@tanstack/virtual-core'
+
+const useIsomorphicLayoutEffect =
+  typeof document !== 'undefined' ? useLayoutEffect : useEffect
+
+function useVirtualizerBase<
+  TScrollElement extends Element | Window,
+  TItemElement extends Element,
+>(
+  options: VirtualizerOptions<TScrollElement, TItemElement>,
+): Virtualizer<TScrollElement, TItemElement> {
+  const [, rerender] = useState(0)
+
+  const resolvedOptions: VirtualizerOptions<TScrollElement, TItemElement> = {
+    ...options,
+    onChange: (instance, sync) => {
+      rerender((d) => d + 1)
+      options.onChange?.(instance, sync)
+    },
+  }
+
+  const [instance] = useState(
+    () => new Virtualizer<TScrollElement, TItemElement>(resolvedOptions),
+  )
+
+  instance.setOptions(resolvedOptions)
+
+  useIsomorphicLayoutEffect(() => {
+    return instance._didMount()
+  }, [])
+
+  useIsomorphicLayoutEffect(() => {
+    return instance._willUpdate()
+  })
+
+  return instance
+}
+
+export function useVirtualizer<
+  TScrollElement extends Element,
+  TItemElement extends Element,
+>(
+  options: PartialKeys<
+    VirtualizerOptions<TScrollElement, TItemElement>,
+    'observeElementRect' | 'observeElementOffset' | 'scrollToFn'
+  >,
+): Virtualizer<TScrollElement, TItemElement> {
+  return useVirtualizerBase<TScrollElement, TItemElement>({
+    observeElementRect: observeElementRect,
+    observeElementOffset: observeElementOffset,
+    scrollToFn: elementScroll,
+    ...options,
+  })
+}
+
+export function useWindowVirtualizer<TItemElement extends Element>(
+  options: PartialKeys<
+    VirtualizerOptions<Window, TItemElement>,
+    | 'getScrollElement'
+    | 'observeElementRect'
+    | 'observeElementOffset'
+    | 'scrollToFn'
+  >,
+): Virtualizer<Window, TItemElement> {
+  return useVirtualizerBase<Window, TItemElement>({
+    getScrollElement: () => (typeof document !== 'undefined' ? window : null),
+    observeElementRect: observeWindowRect,
+    observeElementOffset: observeWindowOffset,
+    scrollToFn: windowScroll,
+    initialOffset: () => (typeof document !== 'undefined' ? window.scrollY : 0),
+    ...options,
+  })
+}