mirror of
https://github.com/jkingsman/Remote-Terminal-for-MeshCore.git
synced 2026-07-31 22:12:34 +02:00
Ryan Gregg
fab331e67e
A conversation rendered every message it had loaded. Nothing bounded that
work, so cost grew with history: at 2000 messages the list mounted ~20k DOM
nodes, took ~285ms to mount, and ~212ms to re-render on any update. While
that runs, nothing else on the main thread gets a turn, typing included.
Only the visible window is mounted now, measured in Chromium with the real
component tree:
history mount re-render DOM nodes
2000 285ms -> 4ms 212ms -> 2.2ms 22038 -> 225
Rendered rows stay at ~17 regardless of how much history is loaded.
Row heights are measured rather than assumed, since messages vary from one line
to a wrapped paragraph with path badges, so the scroll behaviors that used
to do height arithmetic now anchor by index instead, which is exact even
when off-screen rows still carry estimated heights:
- opening a conversation, and following new messages, anchor to the last row
- loading older messages anchors to the message that was on top
- jump-to-message and jump-to-unread scroll by index, since the target row
may not be mounted yet
Two degenerate cases are handled explicitly: a viewport that measures zero
(before first layout, hidden tab) falls back to a nominal height instead of
collapsing the window to nothing, and a row that measures zero keeps its
estimate instead of ballooning the window.
Most of the diff is re-indentation from the new wrapper element; the real
change is 112 added / 36 removed lines (git diff -w).
74 lines
2.2 KiB
JSON
74 lines
2.2 KiB
JSON
{
|
|
"name": "remoteterm-meshcore-frontend",
|
|
"private": true,
|
|
"version": "3.17.0",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "tsc && vite build",
|
|
"packaged-build": "vite build --outDir prebuilt",
|
|
"preview": "vite preview",
|
|
"test": "vitest",
|
|
"test:run": "vitest run",
|
|
"lint": "eslint src/ --cache",
|
|
"lint:fix": "eslint src/ --fix --cache",
|
|
"format": "prettier --write src/",
|
|
"format:check": "prettier --check src/"
|
|
},
|
|
"dependencies": {
|
|
"@codemirror/lang-python": "^6.2.1",
|
|
"@codemirror/theme-one-dark": "^6.1.3",
|
|
"@michaelhart/meshcore-decoder": "npm:meshcore-decoder-multibyte-patch@0.3.0",
|
|
"@radix-ui/react-checkbox": "^1.3.3",
|
|
"@radix-ui/react-dialog": "^1.1.15",
|
|
"@radix-ui/react-label": "^2.1.8",
|
|
"@radix-ui/react-separator": "^1.1.8",
|
|
"@radix-ui/react-slot": "^1.2.4",
|
|
"@radix-ui/react-tabs": "^1.1.13",
|
|
"@tanstack/react-virtual": "^3.14.8",
|
|
"@uiw/react-codemirror": "^4.25.4",
|
|
"class-variance-authority": "^0.7.1",
|
|
"clsx": "^2.1.1",
|
|
"cmdk": "^1.1.1",
|
|
"d3-force": "^3.0.0",
|
|
"d3-force-3d": "^3.0.6",
|
|
"leaflet": "^1.9.4",
|
|
"lucide-react": "^0.562.0",
|
|
"meshcore-hashtag-cracker": "^1.11.0",
|
|
"nosleep.js": "^0.12.0",
|
|
"react": "^18.3.1",
|
|
"react-dom": "^18.3.1",
|
|
"react-leaflet": "^4.2.1",
|
|
"react-swipeable": "^7.0.2",
|
|
"recharts": "^3.8.1",
|
|
"sonner": "^2.0.7",
|
|
"tailwind-merge": "^3.4.0",
|
|
"tailwindcss-animate": "^1.0.7",
|
|
"three": "^0.182.0"
|
|
},
|
|
"devDependencies": {
|
|
"@eslint/js": "^9.17.0",
|
|
"@testing-library/jest-dom": "^6.6.0",
|
|
"@testing-library/react": "^16.0.0",
|
|
"@testing-library/user-event": "^14.6.1",
|
|
"@types/d3-force": "^3.0.10",
|
|
"@types/leaflet": "^1.9.21",
|
|
"@types/node": "^25.0.3",
|
|
"@types/react": "^18.3.12",
|
|
"@types/react-dom": "^18.3.1",
|
|
"@types/three": "^0.182.0",
|
|
"@vitejs/plugin-react": "^6.0.3",
|
|
"autoprefixer": "^10.4.23",
|
|
"eslint": "^9.17.0",
|
|
"eslint-plugin-react-hooks": "^5.1.0",
|
|
"jsdom": "^25.0.0",
|
|
"postcss": "^8.5.10",
|
|
"prettier": "^3.4.2",
|
|
"tailwindcss": "^3.4.19",
|
|
"typescript": "^5.6.3",
|
|
"typescript-eslint": "^8.19.0",
|
|
"vite": "^8.1.3",
|
|
"vitest": "^4.1.4"
|
|
}
|
|
}
|