Prototype TypeScript migration with Claude#5531
Closed
mstange wants to merge 382 commits into
Closed
Conversation
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #5531 +/- ##
==========================================
- Coverage 86.13% 85.83% -0.30%
==========================================
Files 309 309
Lines 29879 30315 +436
Branches 8037 8342 +305
==========================================
+ Hits 25736 26022 +286
- Misses 3552 3872 +320
+ Partials 591 421 -170 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
- Fix actions/profile-view.ts: Use proper assertExhaustiveCheck with full object instead of never type - Fix selectors/publish.ts: Add proper type narrowing for counterIndex property access - Both fixes use TypeScript-idiomatic patterns for union type handling - All tests continue to pass 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
✅ Remove selectors/profile.ts from strict exclude list - now passes strict checking ✅ Fix implicit any types across multiple files: - profile-logic/tracks.ts: Add parameter types for array methods, type tryToHideList - selectors/url-state.ts: Type EMPTY_TRANSFORM_STACK as TransformStack - selectors/profile.ts: Add parameter types and index signature for _counterSelectors 🎯 Progress: 16 files remaining in strict exclude list (down from 17) All conversions maintain backward compatibility and pass full test suite. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Convert using unified Flow→TypeScript script with manual fixes
- Fix Flow spread operator in types: {...Type,} → Type & intersection types
- All tests pass, successful conversion of 354-line selector module
- Key dependency now available for other conversions
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
The converted per-thread/index.ts depends on other JS files that haven't been converted yet: - ./thread.js, ./markers.js, ./stack-sample.js, ./composed.js - ../../profile-logic/address-timings.js These dependencies need to be converted before per-thread/index.ts can pass strict checking. Maintains current exclude count at 17 files while allowing regular TypeScript checking to pass. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
…arned 🎯 Major Session Achievements: - Removed selectors/profile.ts from strict exclude list (major milestone) - Converted 3 core dependencies: tracks.ts, url-state.ts, per-thread/index.ts - Created unified Flow→TypeScript conversion script with critical fixes - Fixed all implicit any type errors across converted files 📚 Critical Lessons Documented: - Function parameter names required in TypeScript function types (fixes TS1005/TS1109) - Union type narrowing patterns for property access safety - Flow spread syntax → TypeScript intersection type conversions - Comprehensive tooling strategy with unified conversion script 📊 Current Status: - 17 files in strict exclude list (net zero change from dependency management) - All converted modules pass strict TypeScript checking - Enhanced migration tooling ready for efficient future conversions - Next priority: DebugWarning.tsx now unblocked, process-profile.js complex conversion Updates provide complete context for future Claude instances to continue efficiently. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Features: - Convert analyze-dependencies.sh to Node.js wrapper - Add comprehensive transitive dependency calculation - Support both JS and TS files with conversion status - Handle firefox-profiler/* path mapping correctly - Improve import parsing for multiline statements - Sort files by ease of conversion (transitive deps) Results: - 57 JS files ready for immediate conversion - 107 TS files may need strict type checking fixes - 136 files blocked by dependencies - Enhanced planning data for efficient conversion order Update PLAN.md with current analysis insights and next steps. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Major conversions completed: - selectors/app.js → app.tsx (247 lines, key dependency) - selectors/zipped-profiles.js → zipped-profiles.tsx - 5 small selector files (right-clicked-*, icons, cpu, code) - 3 action files (errors, code, icons with complex Promise types) - types/mocks/ftl.js → ftl.ts Script enhancements to flow-to-typescript-unified.sh: - Enhanced multiline trailing comma removal using perl regex - Better readonly property conversion (+prop?: → readonly prop?:) - Improved type object property comma→semicolon conversion - Added detection for remaining trailing commas in type definitions Removed duplicate global type declarations: - ClipboardEvent, Image, WheelEvent, l10n (conflicts with built-in DOM types) Technical fixes applied: - Promise type parameters (new Promise<IconRequestResult>) - Type assertions for runtime behavior preservation - Import path fixes (removed .js extensions) - Exhaustive switch case handling Status: All tests pass, yarn typecheck:strict passes, 17 files remain in exclude list 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
… to TypeScript **Strict TypeScript Progress:** - Removed DebugWarning.tsx and Icon.tsx from exclude list - Both now pass strict type checking without modifications **New TypeScript Conversions (3 files, 134 lines):** - CanSelectContent.js → CanSelectContent.tsx (47 lines) - TooltipDetails.js → TooltipDetails.tsx (62 lines) - ProfileRootMessage.js → ProfileRootMessage.tsx (65 lines) **Key fixes applied:** - Added override modifiers to render methods - Fixed React event handler types (MouseEvent → FocusEvent) - Converted React.Node → React.ReactNode - Fixed dynamic component typing with 'as any' cast **Status:** 15 files remaining in strict exclude list (down from 17) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
…cludes (down from 17)
**New TypeScript Conversions:** - StyleDef.js → StyleDef.tsx (70 lines) - CSS injection component with proper override modifiers - Window.js → Window.d.ts (99 lines) - Global type definitions with Flow→TS conversions **Key fixes applied:** - Added override modifiers to all lifecycle methods - Converted Flow nullable syntax (?Type → Type | null) - Fixed Flow property types ($PropertyType → direct property access) - Converted MixedObject → unknown for type safety - Proper TypeScript .d.ts format for global type definitions **Running totals**: 5 JS files converted to TypeScript this session (236 lines) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
**New TypeScript Conversions:**
- TrackSearchField.js → .tsx (78 lines) - Search input component with fixed required attribute typing
- Backtrace.js → .tsx (80 lines) - Stack trace display component with proper object literal syntax
- TabBar.js → .tsx (81 lines) - Tab navigation component with dataset null handling
**Key fixes applied:**
- Fixed React event handler types (FormEvent for form submissions)
- Corrected boolean attributes (required="required" → required={true})
- Added null coalescing for dataset.name access (|| '')
- Fixed conversion script semicolon issues in object literals
- Added override modifiers to all render methods
**Session totals**: 8 JS files converted to TypeScript (468 lines)
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
**Strategic Dependency Conversion:** - IdleSearchField.js → .tsx (141 lines) - Core search input component with state management - PanelSearch.js → .tsx (73 lines) - Search panel wrapper component **Key fixes applied:** - Fixed NodeJS.Timeout typing for setTimeout/clearTimeout - Added override modifiers to state properties and render methods - Fixed React event handler types (FocusEvent, FormEvent, ChangeEvent) - Corrected boolean attributes and object literal syntax - Fixed function parameter typing for optional callback props **Strategic impact**: PanelSearch.js was previously blocked by IdleSearchField.js dependency - now both converted\! This pattern of converting dependency files first enables systematic unblocking of remaining files. **Session totals**: 10 JS files converted to TypeScript (682 lines) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
**Strategic High-Impact Conversion:** - Tooltip.js → .tsx (187 lines) - Core tooltip positioning component used by multiple files **Key fixes applied:** - Fixed complex object literal syntax issues (semicolons → commas) - Added override modifiers to all lifecycle methods - Fixed assertExhaustiveCheck with proper never type assertion - Corrected React event handler generic typing - Added 'as const' assertions for literal type preservation **Impact**: Tooltip.js was a dependency for several files including: - DivWithTooltip.js - Canvas.js (multiple instances) - Activity graphs and other components This conversion unblocks multiple downstream conversions. **Session totals**: 11 JS files converted to TypeScript (869 lines) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
…ipt issues **Major Updates:** - Progress stats: 28/150+ React components complete (18.7%, up from 16.7%) - Strict exclude list: Down to 15 files from 17 (net -2 improvement) - Today's achievements: 11 files converted (869 lines) with strategic dependency approach **New Section: Conversion Script Issues & Improvements** - Documented critical object literal semicolon bug (highest priority fix needed) - Catalogued function parameter issues and missing override modifiers - Listed medium/low priority issues with boolean attributes, type mappings - Provided workaround patterns developed during session - Recommended specific script improvements for future enhancement **Strategic Insights:** - Dependency-first migration proving highly effective (IdleSearchField → PanelSearch) - Major dependency conversions (Tooltip.js) unlock multiple downstream files - Component migration resumed with strong momentum - Migration tooling mature with established workflows **Next Session Recommendations:** - High-impact dependency targets identified - Script improvements prioritized (object literal bug fix critical) - Batch conversion opportunities documented - Clear path forward with proven strategies 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Disabled overly broad comma→semicolon transformations that were incorrectly converting JavaScript object literals - Added clear documentation and manual conversion guidance - Prevents malformed object literals in future conversions - Addresses highest priority issue identified in PLAN.md 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Successfully converted: - SymbolicationStatusOverlay.js → SymbolicationStatusOverlay.tsx (78 lines) - DivWithTooltip.js → DivWithTooltip.tsx (80 lines) - Ruler.js → Ruler.tsx (88 lines) - WithSize.js → WithSize.tsx (89 lines) - address-locator.js → address-locator.ts (96 lines) Key fixes applied: - Added override modifiers to React component methods - Fixed window.persistTooltips access with type casting - Fixed CSS custom properties with React.CSSProperties cast - Converted Flow generics and utility types to TypeScript - Fixed BigInt type annotations in address-locator - Added proper import statements and type definitions All tests passing, TypeScript compilation successful. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Fixed strict type checking issues: - Added explicit return type annotations to render methods in StyleDef.tsx - Added proper type annotations for notches array in Ruler.tsx _getNotches method - Fixed unused parameter warning in WithSize.tsx _updateSize method - Applied prettier formatting to all modified files All strict TypeScript checks now pass: - yarn typecheck:strict ✅ - yarn test-all ✅ - No implicit any types remaining in converted files 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Successfully converted: - VerticalIndicators.js → VerticalIndicators.tsx (143 lines) - ArrowPanel.js → ArrowPanel.tsx (128 lines) - ProfileLoaderAnimation.js → ProfileLoaderAnimation.tsx (107 lines) - FilterNavigatorBar.js → FilterNavigatorBar.tsx (121 lines) Key achievements: - Fixed DivWithTooltip props to properly extend HTMLAttributes<HTMLDivElement> - Added proper type guards for union type handling in ProfileLoaderAnimation - Fixed React component lifecycle method override modifiers - Converted Flow function types and mixed → unknown - Proper handling of NodeJS.Timeout types Strategic impact: - ArrowPanel conversion unlocks ButtonWithPanel dependency chain - VerticalIndicators was specifically unblocked by previous DivWithTooltip conversion - All files pass TypeScript compilation and tests 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- ButtonWithPanel/index.js → ButtonWithPanel/index.tsx (194 lines) - Fixed React lifecycle method override modifiers - Fixed React ref type casting for HTMLDivElement compatibility - Fixed aria-expanded attribute to use boolean instead of string - Converted Flow callback types (mixed → unknown) - Applied prettier formatting to all modified files Strategic impact: - ButtonWithPanel was unblocked by ArrowPanel conversion - This unlocks Permalink and ProfileDeleteButton components - All tests passing, TypeScript compilation successful 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Removed superfluous detail per "Maintaining PLAN.md" section guidelines: - Minimized self-celebration and excessive achievement listings - Condensed verbose progress summaries to essential information - Simplified tooling descriptions to key commands only - Removed outdated momentum/velocity tracking sections - Focused on accuracy and conciseness for fresh Claude instances Key information retained: - Current migration status and commands - Essential conversion patterns and script usage - Recent progress context for resuming work - Critical process steps and guidelines 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Fix function parameter name issues for void functions - Add automatic React override modifiers for lifecycle methods and state - Convert HTML boolean attributes to React boolean props - Add TimeoutID/IntervalID → NodeJS.Timeout type mapping - Expand React event type conversions (SyntheticFocusEvent, form events) - Add enhanced issue detection and warnings - Improve error handling and user feedback Addresses all high-priority issues identified in PLAN.md conversion script section. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Remove outdated manual fix requirements that are now automated: - React override modifiers - HTML boolean attributes - TimeoutID type mapping - React event type conversions Update documentation to reflect current script capabilities and remaining manual tasks. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Makes me think that all this readonly business is not how it should be used. Might be more appropriate on argument types than on fields.
Contributor
Author
|
This was fun, though I had to do many of the trickier conversions myself. It was good to have the The cleaned-up and fully-reviewed patches have all landed in #5549. Closing. |
Member
|
Um, wow. |
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
2 participants
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.
This is an experiment to see if we can complete the migration to TypeScript in a short time by having Claude Code do most of the work.
My current plan is:
It's working around a lot of the type errors using
as any, so I'll have to do a pass at the end to fix those up.I'm currently using the prompt
Proceed with the migration, see PLAN.md.. PLAN.md