docs-i18n 0.8.0 → 0.8.2

package/template/content/virtual/en/quick-start.md

@@ -0,0 +1,114 @@
+---
+title: Quick Start
+description: Get up and running with TanStack Virtual
+---
+
+# Quick Start
+
+## Basic Vertical List
+
+Create a virtualizer for a simple vertical list:
+
+```tsx
+import { useVirtualizer } from '@tanstack/react-virtual'
+
+function RowVirtualizer() {
+  const parentRef = React.useRef<HTMLDivElement>(null)
+
+  const rowVirtualizer = useVirtualizer({
+    count: 10000,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 35,
+    overscan: 5,
+  })
+
+  return (
+    <div
+      ref={parentRef}
+      style={{ height: '400px', overflow: 'auto' }}
+    >
+      <div
+        style={{
+          height: `${rowVirtualizer.getTotalSize()}px`,
+          width: '100%',
+          position: 'relative',
+        }}
+      >
+        {rowVirtualizer.getVirtualItems().map((virtualRow) => (
+          <div
+            key={virtualRow.index}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: `${virtualRow.size}px`,
+              transform: `translateY(${virtualRow.start}px)`,
+            }}
+          >
+            Row {virtualRow.index}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+```
+
+## Dynamic Row Heights
+
+For variable-height items, provide a `measureElement` callback:
+
+```tsx
+const rowVirtualizer = useVirtualizer({
+  count: items.length,
+  getScrollElement: () => parentRef.current,
+  estimateSize: () => 50, // estimated height
+})
+
+// In your rendered items:
+{rowVirtualizer.getVirtualItems().map((virtualRow) => (
+  <div
+    key={virtualRow.index}
+    ref={rowVirtualizer.measureElement}
+    data-index={virtualRow.index}
+  >
+    {items[virtualRow.index].content}
+  </div>
+))}
+```
+
+## Horizontal List
+
+Pass the `horizontal` option to virtualize a horizontal list:
+
+```tsx
+const columnVirtualizer = useVirtualizer({
+  horizontal: true,
+  count: 10000,
+  getScrollElement: () => parentRef.current,
+  estimateSize: () => 100,
+})
+```
+
+## Grid Virtualization
+
+Combine two virtualizers for grid layouts:
+
+```tsx
+const rowVirtualizer = useVirtualizer({
+  count: 10000,
+  getScrollElement: () => parentRef.current,
+  estimateSize: () => 35,
+})
+
+const columnVirtualizer = useVirtualizer({
+  horizontal: true,
+  count: 10000,
+  getScrollElement: () => parentRef.current,
+  estimateSize: () => 100,
+})
+```
+
+> [!NOTE]
+> The `overscan` option controls how many items are rendered outside the visible area. Higher values reduce flicker during fast scrolling but use more memory.

package/template/content/virtual/ja/installation.md

@@ -0,0 +1,57 @@
+---
+title: インストール
+description: プロジェクトに TanStack Virtual をインストールする方法
+---
+
+# インストール
+
+## React
+
+```bash
+npm install @tanstack/react-virtual
+```
+
+```bash
+pnpm add @tanstack/react-virtual
+```
+
+```bash
+yarn add @tanstack/react-virtual
+```
+
+```bash
+bun add @tanstack/react-virtual
+```
+
+## Vue
+
+```bash
+npm install @tanstack/vue-virtual
+```
+
+## Solid
+
+```bash
+npm install @tanstack/solid-virtual
+```
+
+## Svelte
+
+```bash
+npm install @tanstack/svelte-virtual
+```
+
+## 必要要件
+
+- React 18+ / Vue 3+ / Solid 1.6+ / Svelte 4+
+- 固定の高さ（水平リストの場合は幅）を持つスクロールコンテナ
+
+## バンドルサイズ
+
+TanStack Virtual は非常に軽量です：
+
+| パッケージ | サイズ（gzip） |
+|---------|---------------|
+| `@tanstack/virtual-core` | ~2.5 KB |
+| `@tanstack/react-virtual` | ~3.5 KB |
+| `@tanstack/vue-virtual` | ~3.5 KB |

package/template/content/virtual/ja/overview.md

@@ -0,0 +1,74 @@
+---
+title: TanStack Virtual 概要
+description: 大規模な要素リストを 60FPS で仮想化するヘッドレス UI
+---
+
+# TanStack Virtual
+
+TanStack Virtual は、長いリスト要素を仮想化するためのヘッドレスユーティリティを提供します。スクロール位置に基づいてどのアイテムをレンダリングするかのロジックを処理し、マークアップとスタイルの完全な制御はあなたに委ねます。
+
+## なぜ仮想化が必要なのか？
+
+一度に数千の DOM ノードをレンダリングすると、深刻なパフォーマンスの問題が発生します。仮想化は、ビューポートに現在表示されているアイテムと少量のオーバースキャンバッファのみをレンダリングすることで、この問題を解決します。
+
+## 特徴
+
+- **フレームワーク非依存** — React、Vue、Solid、Svelte、バニラ JS で動作
+- **垂直・水平** — 任意の方向でリストを仮想化
+- **グリッド仮想化** — 垂直と水平のバーチャライザーを組み合わせてグリッドを実現
+- **動的な行の高さ** — 可変サイズのアイテムと計測をサポート
+- **固定アイテム** — スクロール領域の上部または下部にアイテムを固定
+- **スクロール復元** — ナビゲーション間でスクロール位置を維持
+- **極小バンドル** — gzip 後 5KB 未満
+
+## 基本的な例
+
+```tsx
+import { useVirtualizer } from '@tanstack/react-virtual'
+
+function VirtualList() {
+  const parentRef = React.useRef<HTMLDivElement>(null)
+
+  const virtualizer = useVirtualizer({
+    count: 10000,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 35,
+  })
+
+  return (
+    <div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
+      <div
+        style={{
+          height: `${virtualizer.getTotalSize()}px`,
+          width: '100%',
+          position: 'relative',
+        }}
+      >
+        {virtualizer.getVirtualItems().map((virtualItem) => (
+          <div
+            key={virtualItem.key}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: `${virtualItem.size}px`,
+              transform: `translateY(${virtualItem.start}px)`,
+            }}
+          >
+            Row {virtualItem.index}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+```
+
+## TanStack Virtual を使うべき場面
+
+- 100 件以上のアイテムを含むリスト
+- 多数の行を持つテーブル
+- チャット・メッセージインターフェース
+- 無限スクロールフィード
+- 大規模な動的データセットを含む任意の UI

package/template/content/virtual/zh-hans/installation.md

@@ -0,0 +1,57 @@
+---
+title: 安装
+description: 如何在项目中安装 TanStack Virtual
+---
+
+# 安装
+
+## React
+
+```bash
+npm install @tanstack/react-virtual
+```
+
+```bash
+pnpm add @tanstack/react-virtual
+```
+
+```bash
+yarn add @tanstack/react-virtual
+```
+
+```bash
+bun add @tanstack/react-virtual
+```
+
+## Vue
+
+```bash
+npm install @tanstack/vue-virtual
+```
+
+## Solid
+
+```bash
+npm install @tanstack/solid-virtual
+```
+
+## Svelte
+
+```bash
+npm install @tanstack/svelte-virtual
+```
+
+## 环境要求
+
+- React 18+ / Vue 3+ / Solid 1.6+ / Svelte 4+
+- 具有固定高度（或水平列表的固定宽度）的滚动容器
+
+## 包体积
+
+TanStack Virtual 非常轻量：
+
+| 包 | 大小（gzip） |
+|---------|---------------|
+| `@tanstack/virtual-core` | ~2.5 KB |
+| `@tanstack/react-virtual` | ~3.5 KB |
+| `@tanstack/vue-virtual` | ~3.5 KB |

package/template/content/virtual/zh-hans/overview.md

@@ -0,0 +1,74 @@
+---
+title: TanStack Virtual 概览
+description: 无头 UI，以 60FPS 虚拟化大型元素列表
+---
+
+# TanStack Virtual
+
+TanStack Virtual 提供无头的虚拟化工具，用于处理长列表元素。它根据滚动位置处理渲染哪些项目的逻辑，同时你保留对标记和样式的完全控制。
+
+## 为什么需要虚拟化？
+
+一次渲染数千个 DOM 节点会导致严重的性能问题。虚拟化通过仅渲染当前在视口中可见的项目以及少量的预渲染缓冲来解决这个问题。
+
+## 特性
+
+- **框架无关** — 支持 React、Vue、Solid、Svelte 和原生 JS
+- **垂直和水平** — 任意方向虚拟化列表
+- **网格虚拟化** — 结合垂直和水平虚拟化器实现网格
+- **动态行高** — 支持可变大小的项目及测量
+- **固定项目** — 将项目固定在滚动区域的顶部或底部
+- **滚动恢复** — 在导航中保持滚动位置
+- **极小的包体积** — gzip 后不到 5KB
+
+## 基本示例
+
+```tsx
+import { useVirtualizer } from '@tanstack/react-virtual'
+
+function VirtualList() {
+  const parentRef = React.useRef<HTMLDivElement>(null)
+
+  const virtualizer = useVirtualizer({
+    count: 10000,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 35,
+  })
+
+  return (
+    <div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
+      <div
+        style={{
+          height: `${virtualizer.getTotalSize()}px`,
+          width: '100%',
+          position: 'relative',
+        }}
+      >
+        {virtualizer.getVirtualItems().map((virtualItem) => (
+          <div
+            key={virtualItem.key}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: `${virtualItem.size}px`,
+              transform: `translateY(${virtualItem.start}px)`,
+            }}
+          >
+            Row {virtualItem.index}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+```
+
+## 何时使用 TanStack Virtual
+
+- 包含 100+ 项的列表
+- 多行的表格
+- 聊天/消息界面
+- 无限滚动的信息流
+- 任何包含大量动态数据集的 UI