Feat: preact

packages/preact/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@scrolloop/preact",
+  "version": "0.1.0",
+  "description": "Preact adapter for @scrolloop/core",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "preact": ">=10.0.0"
+  },
+  "dependencies": {
+    "@scrolloop/core": "workspace:*",
+    "@scrolloop/shared": "workspace:*"
+  },
+  "devDependencies": {
+    "preact": "^10.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "license": "MIT"
+}

packages/preact/src/components/InfiniteList.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useCallback, useMemo } from "preact/hooks";
+import type { CSSProperties } from "preact";
+import type { InfiniteListProps } from "../types";
+import { VirtualList } from "./VirtualList";
+import { useInfinitePages } from "../hooks/useInfinitePages";
+
+export function InfiniteList<T>({
+  fetchPage,
+  renderItem,
+  itemSize,
+  pageSize = 20,
+  initialPage = 0,
+  height = 400,
+  overscan: userOverscan,
+  class: className,
+  style,
+  renderLoading,
+  renderError,
+  renderEmpty,
+  onPageLoad,
+  onError,
+}: InfiniteListProps<T>) {
+  const overscan = useMemo(
+    () => userOverscan ?? Math.max(20, pageSize * 2),
+    [userOverscan, pageSize]
+  );
+
+  const { allItems, loadingPages, hasMore, error, loadPage, retry } =
+    useInfinitePages({ fetchPage, pageSize, initialPage, onPageLoad, onError });
+
+  useEffect(() => {
+    if (!allItems.length && !error) {
+      const needed = Math.ceil(height / itemSize) + overscan * 2;
+      const pagesToLoad = Math.ceil(needed / pageSize);
+      for (let p = 0; p < pagesToLoad; p++) loadPage(p);
+    }
+  }, [allItems.length, error, height, itemSize, pageSize, overscan, loadPage]);
+
+  const handleRangeChange = useCallback(
+    (range: { startIndex: number; endIndex: number }) => {
+      const ps = (range.startIndex / pageSize) | 0;
+      const pe = ((range.endIndex / pageSize) | 0) + 1;
+      for (let p = ps; p <= pe; p++) loadPage(p);
+    },
+    [pageSize, loadPage]
+  );
+
+  const virtualRenderItem = useCallback(
+    (index: number, itemStyle: CSSProperties) =>
+      renderItem(allItems[index], index, itemStyle),
+    [allItems, renderItem]
+  );
+
+  const centerStyle: CSSProperties = {
+    height,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  };
+
+  if (error && !allItems.length) {
+    if (renderError)
+      return <div style={{ height }}>{renderError(error, retry)}</div>;
+    return (
+      <div style={centerStyle}>
+        <div style={{ textAlign: "center" }}>
+          <p>Error.</p>
+          <p style={{ color: "#666", fontSize: "0.9em" }}>{error.message}</p>
+          <button
+            onClick={retry}
+            style={{ marginTop: 8, padding: "4px 12px", cursor: "pointer" }}
+          >
+            Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!allItems.length && loadingPages.size > 0) {
+    if (renderLoading) return <div style={{ height }}>{renderLoading()}</div>;
+    return (
+      <div style={centerStyle}>
+        <p>Loading...</p>
+      </div>
+    );
+  }
+
+  if (!allItems.length && !hasMore) {
+    if (renderEmpty) return <div style={{ height }}>{renderEmpty()}</div>;
+    return (
+      <div style={centerStyle}>
+        <p>No data.</p>
+      </div>
+    );
+  }
+
+  return (
+    <VirtualList
+      count={allItems.length}
+      itemSize={itemSize}
+      height={height}
+      overscan={overscan}
+      class={className}
+      style={style}
+      onRangeChange={handleRangeChange}
+      renderItem={virtualRenderItem}
+    />
+  );
+}

packages/preact/src/components/VirtualList.tsx

@@ -0,0 +1,108 @@
+import {
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+} from "preact/hooks";
+import type { CSSProperties } from "preact";
+import { calculateVirtualRange } from "@scrolloop/core";
+import type { VirtualListProps } from "../types";
+
+export function VirtualList({
+  count,
+  itemSize,
+  renderItem,
+  height = 400,
+  overscan = 4,
+  class: className,
+  style,
+  onRangeChange,
+}: VirtualListProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const scrollTopRef = useRef(0);
+  const prevScrollTopRef = useRef(0);
+  const onRangeChangeRef = useRef(onRangeChange);
+  const [, forceUpdate] = useState(0);
+  const prevRangeRef = useRef({ start: -1, end: -1 });
+
+  useEffect(() => {
+    onRangeChangeRef.current = onRangeChange;
+  }, [onRangeChange]);
+
+  const totalHeight = count * itemSize;
+
+  const { renderStart, renderEnd } = calculateVirtualRange(
+    scrollTopRef.current,
+    height,
+    itemSize,
+    count,
+    overscan,
+    prevScrollTopRef.current
+  );
+
+  useEffect(() => {
+    const cb = onRangeChangeRef.current;
+    if (
+      cb &&
+      (prevRangeRef.current.start !== renderStart ||
+        prevRangeRef.current.end !== renderEnd)
+    ) {
+      prevRangeRef.current = { start: renderStart, end: renderEnd };
+      cb({ startIndex: renderStart, endIndex: renderEnd });
+    }
+  }, [renderStart, renderEnd]);
+
+  const handleScroll = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    prevScrollTopRef.current = scrollTopRef.current;
+    scrollTopRef.current = el.scrollTop;
+    forceUpdate((n) => n + 1);
+  }, []);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    return () => el.removeEventListener("scroll", handleScroll);
+  }, [handleScroll]);
+
+  const items = useMemo(() => {
+    const result = [];
+    for (let i = renderStart; i <= renderEnd; i++) {
+      const itemStyle: CSSProperties = {
+        position: "absolute",
+        top: i * itemSize,
+        left: 0,
+        right: 0,
+        height: itemSize,
+      };
+      result.push(
+        <div key={i} role="listitem">
+          {renderItem(i, itemStyle)}
+        </div>
+      );
+    }
+    return result;
+  }, [renderStart, renderEnd, itemSize, renderItem]);
+
+  const containerStyle: CSSProperties = {
+    overflow: "auto",
+    height,
+    ...style,
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      role="list"
+      class={className}
+      style={containerStyle}
+    >
+      <div style={{ position: "relative", height: totalHeight, width: "100%" }}>
+        {items}
+      </div>
+    </div>
+  );
+}

packages/preact/src/hooks/useInfinitePages.ts

@@ -0,0 +1,46 @@
+import { useState, useCallback, useEffect } from "preact/hooks";
+import { InfiniteSource } from "@scrolloop/shared";
+import type {
+  InfiniteSourceState,
+  InfiniteSourceOptions,
+} from "@scrolloop/shared";
+
+export function useInfinitePages<T>(options: InfiniteSourceOptions<T>) {
+  const { fetchPage, pageSize, initialPage, onPageLoad, onError } = options;
+
+  const [manager] = useState<InfiniteSource<T>>(
+    () =>
+      new InfiniteSource({
+        fetchPage,
+        pageSize,
+        initialPage,
+        onPageLoad,
+        onError,
+      })
+  );
+
+  const [state, setState] = useState<InfiniteSourceState<T>>(() =>
+    manager.getState()
+  );
+
+  useEffect(() => {
+    const unsubscribe = manager.subscribe(setState);
+    return () => {
+      unsubscribe();
+      manager.destroy();
+    };
+  }, [manager]);
+
+  useEffect(() => {
+    manager.updateCallbacks({ fetchPage, onPageLoad, onError });
+  }, [manager, fetchPage, onPageLoad, onError]);
+
+  const loadPage = useCallback(
+    (page: number) => manager.loadPage(page),
+    [manager]
+  );
+  const retry = useCallback(() => manager.retry(), [manager]);
+  const reset = useCallback(() => manager.reset(), [manager]);
+
+  return { ...state, loadPage, retry, reset };
+}

packages/preact/src/index.ts

@@ -0,0 +1,4 @@
+export { VirtualList } from "./components/VirtualList";
+export { InfiniteList } from "./components/InfiniteList";
+export { useInfinitePages } from "./hooks/useInfinitePages";
+export type { VirtualListProps, InfiniteListProps } from "./types";

packages/preact/src/types.ts

@@ -0,0 +1,36 @@
+import type { CSSProperties, VNode } from "preact";
+import type { PageResponse, Range } from "@scrolloop/shared";
+
+export type { PageResponse, Range };
+
+export interface VirtualListProps {
+  count: number;
+  itemSize: number;
+  renderItem: (index: number, style: CSSProperties) => VNode | null;
+  height?: number;
+  overscan?: number;
+  class?: string;
+  style?: CSSProperties;
+  onRangeChange?: (range: Range) => void;
+}
+
+export interface InfiniteListProps<T> {
+  fetchPage: (page: number, size: number) => Promise<PageResponse<T>>;
+  renderItem: (
+    item: T | undefined,
+    index: number,
+    style: CSSProperties
+  ) => VNode | null;
+  itemSize: number;
+  pageSize?: number;
+  initialPage?: number;
+  height?: number;
+  overscan?: number;
+  class?: string;
+  style?: CSSProperties;
+  renderLoading?: () => VNode | null;
+  renderError?: (error: Error, retry: () => void) => VNode | null;
+  renderEmpty?: () => VNode | null;
+  onPageLoad?: (page: number, items: T[]) => void;
+  onError?: (error: Error) => void;
+}

packages/preact/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "declaration": true,
+    "declarationMap": true,
+    "jsxImportSource": "preact"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "tsup.config.ts"],
+  "exclude": ["node_modules", "dist"]
+}

packages/preact/tsup.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm", "cjs"],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  external: ["preact", "preact/hooks", "@scrolloop/core", "@scrolloop/shared"],
+  esbuildOptions(options) {
+    options.jsxImportSource = "preact";
+    options.jsx = "automatic";
+  },
+});