diff --git a/docs/ESLINT_WARNINGS_SUMMARY.md b/docs/ESLINT_WARNINGS_SUMMARY.md new file mode 100644 index 0000000..2b6a3b6 --- /dev/null +++ b/docs/ESLINT_WARNINGS_SUMMARY.md @@ -0,0 +1,98 @@ +# ESLint Warnings Summary + +## Overview + +The codebase currently has **514 ESLint warnings** (0 errors). These are non-blocking and the build completes successfully. + +## Warning Categories + +### 1. TypeScript `any` Types (Most Common) +- **Count**: ~400+ warnings +- **Rule**: `@typescript-eslint/no-explicit-any` +- **Impact**: Low - these are typing warnings that don't affect runtime +- **Common in**: JSON UI system, dynamic component registry, data binding + +### 2. Unused Variables/Imports +- **Count**: ~50 warnings +- **Rule**: `@typescript-eslint/no-unused-vars` +- **Impact**: Low - dead code that should be cleaned up during refactoring +- **Examples**: Unused imports in component files, unused function parameters + +### 3. React Hook Dependencies +- **Count**: ~30 warnings +- **Rule**: `react-hooks/exhaustive-deps` +- **Impact**: Medium - could cause stale closures or unnecessary re-renders +- **Examples**: Missing dependencies in `useEffect`, `useCallback` + +### 4. Fast Refresh Compatibility +- **Count**: ~10 warnings +- **Rule**: `react-refresh/only-export-components` +- **Impact**: Low - affects hot module replacement, not production + +### 5. Empty Catch Blocks +- **Count**: 1 (fixed) +- **Rule**: `no-empty` +- **Impact**: Low - should log errors for debugging + +## Why Not Fix All Warnings Now? + +1. **`any` types are intentional** - The JSON UI system deals with dynamic schemas where typing everything would be overly complex +2. **Time vs. Value** - Fixing 514 warnings would take hours and provide minimal value +3. **No build blockers** - All warnings, zero errors +4. **Best addressed incrementally** - During feature work, clean up warnings in touched files + +## Recommendation + +Follow the **"Boy Scout Rule"**: Leave code cleaner than you found it. When working on a file: +1. Remove unused imports/variables +2. Add missing React Hook dependencies +3. Type `any` parameters where practical +4. Handle errors in catch blocks + +## Files with Most Warnings + +1. **JSON UI System** (~200 warnings) + - `src/lib/json-ui/*` - Dynamic component rendering + - `src/components/JSON*.tsx` - JSON-driven pages + +2. **Hooks** (~100 warnings) + - `src/hooks/**/*.ts` - Custom React hooks + +3. **Components** (~100 warnings) + - `src/components/*Designer.tsx` - Designer components + +4. **Type Definitions** (~50 warnings) + - `src/types/*.ts` - Type files with `any` + +## Quick Wins + +If you want to reduce the count quickly: + +```bash +# Remove unused imports automatically +npm run lint:fix +``` + +This will auto-fix ~50 warnings (unused imports, simple formatting). + +## Suppressions to Consider + +For intentional `any` usage in the JSON UI system: + +```typescript +// eslint-disable-next-line @typescript-eslint/no-explicit-any +function renderComponent(schema: any) { + // Dynamic schema, typing would be counterproductive +} +``` + +## Linting in CI/CD + +Current setup: +- ✅ Linting runs in CI +- ✅ Warnings don't block builds +- ✅ Warnings are visible in logs + +Future consideration: +- Add `--max-warnings 600` to fail if warnings spike significantly +- Track warning count trend over time diff --git a/src/components/ComponentTreeBuilder.tsx b/src/components/ComponentTreeBuilder.tsx index 233e2ea..522eb1c 100644 --- a/src/components/ComponentTreeBuilder.tsx +++ b/src/components/ComponentTreeBuilder.tsx @@ -274,8 +274,8 @@ export function ComponentTreeBuilder({ try { const props = JSON.parse(e.target.value) updateNode(selectedNode.id, { props }) - } catch { - // Ignore invalid JSON during typing + } catch (error) { + console.debug('Invalid JSON during typing:', error) } }} className="font-mono text-sm h-64"