DrSmoothl
90f65654c7
Give the virtualized log viewer motion without hurting readability or choking at high rate. A genuinely new tail line fades and rises in (200ms, ease-out-expo); detection lives in the SSE flush (real arrivals only), is bounded by a 260ms timer, and never replays when an old row scrolls back into view or when a filter toggles. A firehose batch (more than 4 new lines in one flush) suppresses the per-row entrance so a 100 line/s stream never strobes — the scroll flow and edge fade carry it instead. Scrolling gets a soft, scroll-position-aware edge fade: a boundary dissolves only when there is actually hidden content past it (a ResizeObserver + scroll listener keep it in sync), so a fully-scrolled top/bottom row is never dimmed. The entrance animation lives on an inner element so it never collides with the virtual row's own translateY positioning or perturbs measureElement. All of it is gated on the motion switches: the entrance on reduce/disable-motion, the static edge fade on the hard 关闭全部动效 only.
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Oxc
- @vitejs/plugin-react-swc uses SWC
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])