refactor(hex-viewer): split monolith, fix React anti-patterns, add tests & CI - #1
Merged
Merged
Conversation
…sts & CI Component quality: - Remove ref-during-render mirroring (cursor/nibble/selection/data refs) that violated React purity and tripped react-hooks/refs lint errors. Handlers now read state directly; stability is unnecessary for JSX event props. - Replace the setState-in-effect reset on hexString change with the recommended "adjust state from prev prop during render" pattern. - Split the ~500-line component into focused units: - src/lib/hex.ts pure parse/format/interpret helpers - src/lib/cx.ts className join helper - src/hooks/useHexEditor.ts editor state + interactions - src/hooks/useVirtualRows.ts windowed rendering - src/components/* HexHeader, HexRow (memoized), StatusBar, DebugPanel - Memoize rows with primitive props so navigation/edits re-render only the affected rows. Hoist the hex-key RegExp out of the handler. - Scroll the viewport back to top on new buffers (fixes state/DOM desync). Tests & CI: - Add Node unit tests for the pure logic (hex.ts, cx.ts) under a dedicated vitest "unit" project; keep the Storybook browser project separate. - Add scripts: test, test:watch, test:storybook, test:all, typecheck. - Add .github/workflows/ci.yaml running lint, typecheck, build and unit tests, plus a separate Playwright job for Storybook interaction tests. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…xample/) eslint-plugin-react-hooks v7 needs project info; with both the root and example/ tsconfigs as candidates the parser failed in CI with 'No tsconfigRootDir was set'. Pin tsconfigRootDir to the repo root and exclude the standalone example app from the root lint. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概要
バイナリビュワー
HexViewerのReactコンポーネントとしての品質を改善し、ユニットテストとCIを追加しました。React的な問題の修正
cursorRef.current = cursorのように state を ref にミラーしてレンダー中に書き込んでいた箇所（react-hooks/refsで4件のlintエラー）を削除。ハンドラは state を直接参照する形へ。hexString変更時のリセットを、React公式推奨の「前回propをstateに持ちレンダー中に調整」パターンへ（react-hooks/set-state-in-effectの解消）。src/lib/hex.ts— パース/フォーマット/数値解釈の純粋関数src/lib/cx.ts— className 結合ヘルパーsrc/hooks/useHexEditor.ts— 編集状態と操作src/hooks/useVirtualRows.ts— 仮想スクロールsrc/components/—HexHeader/HexRow(memo) /StatusBar/DebugPanelHexRowを memo 化 し primitive な props を渡すことで、カーソル移動や1バイト編集で該当行のみ再描画。挙動は元と等価になるよう保持（nbsp、Float32の
toPrecision(7)表示、選択/カーソル判定など）。テスト & CI
hex.ts/cx.ts）のユニットテスト23ケースを追加。vitestにunit（node環境）プロジェクトを新設し、既存の Storybook ブラウザプロジェクトと分離 → Playwright不要で高速・安定。test/test:watch/test:storybook/test:all/typecheck。.github/workflows/ci.yaml:lint→typecheck→build→ unit test、別ジョブでPlaywright導入の上 Storybook インタラクションテスト。ローカル検証
pnpm lint→ 0 エラー（before: 5エラー）pnpm typecheck→ 成功pnpm build→ 成功pnpm test（unit）→ 23/23 passedpnpm test:storybook（実ブラウザ）→ 6/6 passed🤖 Generated with Claude Code