|
| 1 | +# Biome Code Cleanup TODO |
| 2 | + |
| 3 | +This document lists suggested code improvements identified during the Biome migration. Items are prioritized by impact and effort. |
| 4 | + |
| 5 | +## Priority 1: Quick Wins (Low effort, High value) |
| 6 | + |
| 7 | +### Fix Missing React Keys |
| 8 | + |
| 9 | +**Rule:** `useJsxKeyInIterable` |
| 10 | +**Current:** warn |
| 11 | +**Files:** |
| 12 | + |
| 13 | +- `ui/infra-compare/InfraCompareTable.jsx:74` - Add key to `<tbody>` |
| 14 | +- `ui/infra-compare/InfraCompareTableControls.jsx:134` - Add key to `<InfraCompareTable>` |
| 15 | +- `ui/perfherder/alerts/AlertHeader.jsx:233` - Add key to `<Link>` |
| 16 | +- `ui/shared/AdditionalInformationTable.jsx:165` - Add key to `<tr>` |
| 17 | +- `ui/shared/AdditionalInformationTable.jsx:183` - Add key to `<tr>` |
| 18 | + |
| 19 | +**Why:** Missing keys can cause React rendering bugs and performance issues. |
| 20 | + |
| 21 | +### Remove Unused Variables |
| 22 | + |
| 23 | +**Rule:** `noUnusedVariables` |
| 24 | +**Current:** warn |
| 25 | +**Files:** |
| 26 | + |
| 27 | +- `ui/perfherder/graphs/GraphsContainer.jsx:325` - `selectedDataPoint` unused |
| 28 | +- `ui/perfherder/graphs/GraphsContainer.jsx:326` - `highlightAlerts` unused |
| 29 | + |
| 30 | +**Why:** Dead code that should be removed. |
| 31 | + |
| 32 | +### Fix Import Assignment |
| 33 | + |
| 34 | +**Rule:** `noImportAssign` |
| 35 | +**Current:** warn |
| 36 | +**File:** `ui/taskcluster-auth-callback/TaskclusterCallback.jsx:30` |
| 37 | + |
| 38 | +**Why:** Reassigning an imported variable is a bug - imports are read-only. Use a local variable instead. |
| 39 | + |
| 40 | +--- |
| 41 | + |
| 42 | +## Priority 2: Code Quality (Medium effort, High value) |
| 43 | + |
| 44 | +### Fix Async Promise Executor |
| 45 | + |
| 46 | +**Rule:** `noAsyncPromiseExecutor` |
| 47 | +**Current:** warn |
| 48 | +**File:** `ui/shared/auth/AuthService.js:19` |
| 49 | + |
| 50 | +**Why:** Async promise executors can silently swallow errors. Refactor to use async/await directly without wrapping in Promise. |
| 51 | + |
| 52 | +### Enable React Hooks Exhaustive Dependencies |
| 53 | + |
| 54 | +**Rule:** `useExhaustiveDependencies` |
| 55 | +**Current:** off |
| 56 | +**Estimated files:** ~10 |
| 57 | + |
| 58 | +**Why:** Missing dependencies in useEffect/useCallback can cause stale closures and subtle bugs. |
| 59 | + |
| 60 | +### Enable Array Index Key Warnings |
| 61 | + |
| 62 | +**Rule:** `noArrayIndexKey` |
| 63 | +**Current:** off |
| 64 | +**Estimated files:** ~5 |
| 65 | + |
| 66 | +**Why:** Using array index as key can cause issues when list items are reordered or filtered. |
| 67 | + |
| 68 | +--- |
| 69 | + |
| 70 | +## Priority 3: Performance (Medium effort, Medium value) |
| 71 | + |
| 72 | +### Fix Accumulating Spread Operations |
| 73 | + |
| 74 | +**Rule:** `noAccumulatingSpread` |
| 75 | +**Current:** off |
| 76 | +**Files:** Multiple locations in reducers and helpers |
| 77 | + |
| 78 | +**Why:** Spreading in a loop (e.g., `arr.reduce((acc, x) => [...acc, x])`) is O(n²). Use `push()` or `concat()` instead. |
| 79 | + |
| 80 | +### Enable useFlatMap |
| 81 | + |
| 82 | +**Rule:** `useFlatMap` |
| 83 | +**Current:** off |
| 84 | + |
| 85 | +**Why:** Replace `.map().flat()` with `.flatMap()` for better performance and readability. |
| 86 | + |
| 87 | +--- |
| 88 | + |
| 89 | +## Priority 4: Accessibility (Higher effort, High value) |
| 90 | + |
| 91 | +### Enable Semantic Elements |
| 92 | + |
| 93 | +**Rule:** `useSemanticElements` |
| 94 | +**Current:** off |
| 95 | +**Estimated files:** ~15 |
| 96 | + |
| 97 | +**Why:** Using `role="button"` on `<div>` instead of `<button>` reduces accessibility. Requires careful testing. |
| 98 | + |
| 99 | +### Enable ARIA Props Validation |
| 100 | + |
| 101 | +**Rule:** `useAriaPropsSupportedByRole` |
| 102 | +**Current:** off |
| 103 | + |
| 104 | +**Why:** Ensures ARIA attributes are valid for the element's role. |
| 105 | + |
| 106 | +### Enable SVG Accessibility |
| 107 | + |
| 108 | +**Rule:** `noSvgWithoutTitle` |
| 109 | +**Current:** off |
| 110 | +**File:** `ui/shared/GraphIcon.jsx:28` |
| 111 | + |
| 112 | +**Why:** SVGs should have titles for screen readers. |
| 113 | + |
| 114 | +--- |
| 115 | + |
| 116 | +## Priority 5: Code Style (Optional) |
| 117 | + |
| 118 | +### Enable Formatter |
| 119 | + |
| 120 | +**Current:** disabled |
| 121 | + |
| 122 | +Enabling the Biome formatter would standardize code style across the codebase. This is a large change that would touch many files. Consider doing this in a separate PR. |
| 123 | + |
| 124 | +### Enable Import Organization |
| 125 | + |
| 126 | +**Current:** disabled |
| 127 | + |
| 128 | +Biome can auto-organize imports. This would be a large change affecting many files. |
| 129 | + |
| 130 | +### Refactor Static-Only Classes |
| 131 | + |
| 132 | +**Rule:** `noStaticOnlyClass` |
| 133 | +**Current:** off |
| 134 | +**Files:** Multiple files in `ui/models/` |
| 135 | + |
| 136 | +**Why:** Classes with only static methods could be plain objects or ES modules. This is a stylistic preference. |
| 137 | + |
| 138 | +--- |
| 139 | + |
| 140 | +## How to Enable Rules |
| 141 | + |
| 142 | +To enable a rule, update `biome.json`: |
| 143 | + |
| 144 | +```json |
| 145 | +{ |
| 146 | + "linter": { |
| 147 | + "rules": { |
| 148 | + "correctness": { |
| 149 | + "useJsxKeyInIterable": "error" // Change from "warn" to "error" |
| 150 | + } |
| 151 | + } |
| 152 | + } |
| 153 | +} |
| 154 | +``` |
| 155 | + |
| 156 | +To auto-fix issues where possible: |
| 157 | + |
| 158 | +```bash |
| 159 | +pnpm biome lint --write |
| 160 | +``` |
| 161 | + |
| 162 | +--- |
| 163 | + |
| 164 | +## Tracking Progress |
| 165 | + |
| 166 | +- [ ] Priority 1: Quick Wins |
| 167 | +- [ ] Priority 2: Code Quality |
| 168 | +- [ ] Priority 3: Performance |
| 169 | +- [ ] Priority 4: Accessibility |
| 170 | +- [ ] Priority 5: Code Style (optional) |
0 commit comments