hosted demo live, docs overhaul, bump package versions

release: prepare v0.1.4 — hosted demo live, docs overhaul, bump package versions

Author: Zhang-JiahangH

CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to this project will be documented in this file.
 
 The format is based on Keep a Changelog, and this project follows Semantic Versioning.
 
+## [0.1.4] - 2026-04-07
+
+### Added
+
+- Published hosted demo page: https://www.zhangjiahang.com/react-virtualized-diff.
+
+### Changed
+
+- Bumped workspace package versions to `0.1.4` for the release.
+- Reworked both English and Chinese README documents with clearer, search-friendly structure.
+- Promoted API, benchmark, and demo sections for faster discovery by humans and AI crawlers.
+
 ## [0.1.3] - 2026-04-07
 
 ### Added

README.md

@@ -1,183 +1,122 @@
 # react-virtualized-diff
 
-A high-performance, virtualized React diff viewer designed for **very large text files** and smooth developer experience.
+High-performance React diff viewer for **large text/code files** with virtualized rendering.
 
-> Package name on npm: **`react-virtualized-diff`**
+- 📦 npm: [`react-virtualized-diff`](https://www.npmjs.com/package/react-virtualized-diff)
+- 🌐 Live Demo: https://www.zhangjiahang.com/react-virtualized-diff
+- 📊 Benchmark report: [benchmark-results/results.md](./benchmark-results/results.md)
+- 🇨🇳 中文文档: [README.zh-CN.md](./README.zh-CN.md)
 
-[中文文档（Chinese README）](./README.zh-CN.md)
+## Why react-virtualized-diff
 
----
+Most diff components are smooth for small files, but degrade heavily with 10k+ lines.
 
-## Why this project
+`react-virtualized-diff` is built for:
 
-Most diff viewers are good for small files but become slow when input grows to tens of thousands of lines.
-
-`react-virtualized-diff` focuses on:
-
-- **Performance first** rendering with virtualization
-- **Readable side-by-side UI** for code/text review
-- **Configurable context lines** around changes
-- **TypeScript support** for reliable integration
-- **Simple React API** for quick adoption
-
----
-
-## Features
-
-- ✅ Side-by-side diff layout
-- ✅ Virtualized row rendering (good for large files)
-- ✅ Collapsed unchanged blocks with configurable context
-- ✅ Lightweight integration in React apps
-- ✅ TypeScript declarations out of the box
-
----
+- **Virtualized rendering** for big-file performance
+- **Side-by-side layout** for easy review
+- **Collapsed unchanged blocks** with configurable context
+- **TypeScript support** for predictable integration
 
 ## Installation
 
 ```bash
-# pnpm
 pnpm add react-virtualized-diff
-
-# npm
-npm install react-virtualized-diff
-
-# yarn
-yarn add react-virtualized-diff
+# or npm i react-virtualized-diff
+# or yarn add react-virtualized-diff
 ```
 
----
-
-## Quick start
+## Quick Start
 
 ```tsx
 import { DiffViewer } from 'react-virtualized-diff';
 
-const oldText = `line 1\nline 2\nline 3`;
-const newText = `line 1\nline 2 changed\nline 3\nline 4`;
+const original = `line 1\nline 2\nline 3`;
+const modified = `line 1\nline 2 changed\nline 3\nline 4`;
 
-export function Example() {
+export function App() {
   return (
     <DiffViewer
-      original={oldText}
-      modified={newText}
+      original={original}
+      modified={modified}
       contextLines={2}
       height={480}
     />
   );
 }
 ```
 
----
+## API
 
-## API (current)
+### `DiffViewer`
 
-### `DiffViewer` props
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `original` | `string` | - | Original text content |
+| `modified` | `string` | - | Modified text content |
+| `contextLines` | `number` | `2` | Number of unchanged lines kept around diff hunks |
+| `height` | `number \| string` | `500` | Viewport height of the virtual list |
+| `locale` | `DiffViewerLocale` | - | UI text localization |
+| `language` | `string` | - | Reserved field for future language-related extensions |
 
-- `original: string` – original text content
-- `modified: string` – modified text content
-- `contextLines?: number` – unchanged lines to keep around changes (default behavior from component)
-- `height?: number | string` – viewport height for virtualization container
+### `DiffViewerLocale`
 
-> Tip: for best performance with huge files, keep rendering area constrained with a fixed `height`.
+| Field | Type | Description |
+| --- | --- | --- |
+| `collapse` | `string` | Label for collapse button |
+| `showMoreLines` | `(count: number) => string` | Label factory for “show hidden lines” |
 
----
+## Benchmark
 
-## Benchmark suite
+Included benchmark compares:
 
-A runnable benchmark harness is included to compare:
-
-- `react-virtualized-diff` (this project)
+- `react-virtualized-diff`
 - `react-diff-viewer`
 - `react-diff-viewer-continued`
 - `react-diff-view`
 
-Metrics collected for each dataset size (`1k / 10k / 50k / 100k` lines):
+Dataset sizes: `1k / 10k / 50k / 100k` lines.
+
+Metrics:
 
-- FPS (average during auto-scroll)
-- Initial render time (ms)
-- Memory usage (`usedJSHeapSize` in Chromium)
-- Per benchmark case timeout: `60000 ms` (timeout cases are recorded in results instead of failing the run)
+- FPS (during auto-scroll)
+- initial render time
+- memory usage (`usedJSHeapSize`)
 
-Quick result highlights (from the latest run):
+Quick highlights from latest report:
 
-- At **10k lines**, `react-virtualized-diff` keeps ~**60 FPS**, with **187.2 ms** initial render and **9.5 MB** memory.
-- At **50k/100k lines**, `react-diff-viewer` and `react-diff-viewer-continued` hit timeout, while this project finishes both cases.
-- At **100k lines**, this project uses **141.1 MB** memory vs `react-diff-view` at **1297.0 MB** (~9.2x lower), and keeps **60.4 FPS** vs **5.6 FPS**.
+- At `10k` lines: ~`60 FPS`, `187.2 ms` initial render, `9.5 MB` memory.
+- At `50k/100k` lines: `react-diff-viewer` and `react-diff-viewer-continued` timeout.
+- At `100k` lines: `141.1 MB` (`react-virtualized-diff`) vs `1297.0 MB` (`react-diff-view`).
 
-Run:
+Run benchmark:
 
 ```bash
 pnpm install
 pnpm benchmark
 ```
 
-> If Playwright Chromium is missing, the script will auto-run `pnpm exec playwright install chromium` once.
-
-> `react-diff-viewer-continued` is optional in the benchmark app. If missing locally, benchmark falls back to `react-diff-viewer` for that case.
-
-Output files:
-
-- `benchmark-results/results.json`
-- `benchmark-results/results.md`
-
-➡️ See detailed benchmark table: [benchmark-results/results.md](./benchmark-results/results.md)
-
-## Monorepo structure
-
-```text
-apps/demo/       # Vite demo app
-packages/react/  # npm package: react-virtualized-diff
-```
-
----
+## Demo
 
-## Local development
+- Hosted demo page: https://www.zhangjiahang.com/react-virtualized-diff
+- Local demo:
 
 ```bash
 pnpm install
-pnpm dev       # run demo app
-pnpm build     # build workspace packages
+pnpm dev
 ```
 
----
-
-## npm package README support
-
-To ensure npm users always see correct documentation:
-
-- Package-level README is maintained at `packages/react/README.md`
-- `packages/react/package.json` includes README in publish files
-- Root README links to the package docs and Chinese docs
-
----
-
-## Release log
+## Monorepo Structure
 
-See [CHANGELOG.md](./CHANGELOG.md) for tracked releases and supported capabilities.
-
----
-
-## Future plan
-
-### Near-term roadmap
-
-- [ ] Optional syntax highlighting (performance-aware)
-- [ ] More comprehensive live demo scenarios (big files, mixed edits)
-- [ ] Public hosted demo site for quick evaluation
-- [ ] Better customization hooks (line renderers, gutters)
-
-### Additional TODOs to make this project more popular
+```text
+apps/demo/       # Vite demo app
+apps/benchmark/  # benchmark app
+packages/react/  # npm package source
+```
 
-- [x] Detailed benchmark report vs common diff viewers
-- [ ] Keyboard navigation + accessibility improvements
-- [ ] Dark/light theme presets and design tokens
-- [ ] SSR usage guide (Next.js / Remix examples)
-- [ ] More real-world examples (JSON, logs, markdown, code)
-- [ ] CI release automation + semantic versioning workflow
-- [ ] Contribution guide and issue templates
-- [ ] International docs beyond English/Chinese
+## Changelog
 
----
+See [CHANGELOG.md](./CHANGELOG.md).
 
 ## License