- Removes `rootDirs` so all imports will be relative in the frontend
- Updates (and unifies) imports to be `../types/...` etc instead of
relying on "types" being in the rootDir for the frontend.
- Fixes one type that was being picked up from `lib` in the frontend.
- Adds a precommit hook to check in future
Paves the way to writing _unit_ tests for the frontend for the subset of
the frontend code we can import from `node` (which might be a lot of
it!)
## Summary
Fixes two related null reference errors in the GCC dump view's TomSelect
dropdown handling that occur during user interactions.
## Root Cause Analysis
**COMPILER-EXPLORER-96P** (1067 occurrences):
- Error: `TypeError: undefined is not an object (evaluating
't.filename_suffix')`
- Location: `gccdump-view.ts:318` in `onPassSelect()`
- Trigger: User deletes a selection via TomSelect → `deleteSelection()`
→ `removeItem()` → `trigger('change')` → `onPassSelect()` called with
passId that no longer exists in `this.selectize.options`
**COMPILER-EXPLORER-E44** (34 occurrences):
- Error: `TypeError: Cannot read properties of undefined (reading '0')`
- Location: `gccdump-view.ts:237` in dropdown open handler
- Trigger: `find()` returns undefined when searching for pass by
filename_suffix, but code uses non-null assertion `activeOption![0]`
Both errors occur due to timing issues when dropdown options are being
updated while user interactions are happening.
## Changes
1. **Added null check in `onPassSelect()`**: Safely handle case where
`this.selectize.options[passId]` returns undefined
2. **Removed unsafe non-null assertion**: Replace `activeOption![0]`
with proper null check and early return
3. **Added CLAUDE.md guidance**: Include preference for modern
TypeScript features like optional chaining
## Impact
- Prevents crashes with 1100+ reported occurrences combined
- Maintains existing user experience - dropdowns continue to work
normally
- No behavioral changes for valid interactions
Fixes COMPILER-EXPLORER-96P
Fixes COMPILER-EXPLORER-E44
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-authored-by: Claude <noreply@anthropic.com>
This PR removes the top-level global variable for the base directory and replaces it with a module-level variable managed through a setter function. Key changes include removing the global declaration in lib/global.ts, introducing a local ce_base_directory variable and setBaseDirectory function in lib/assert.ts, and updating app.ts to use the new setter.
---------
Co-authored-by: Claude <noreply@anthropic.com>
This PR completes the migration from Bootstrap 4 to Bootstrap 5.3.5
following the plan outlined in
[docs/Bootstrap5Migration.md](https://github.com/compiler-explorer/compiler-explorer/blob/mg/bootstrap5/docs/Bootstrap5Migration.md).
## Migration Process
We followed a phased approach as documented in the migration plan:
1. **Phase 1: Dependency Updates and Basic Setup**
- Updated Bootstrap from 4.6.2 to 5.3.5
- Added @popperjs/core dependency (replacing Popper.js)
- Updated Tom Select theme from bootstrap4 to bootstrap5
2. **Phase 2: Global CSS Class Migration**
- Updated directional utility classes (ml/mr → ms/me)
- Updated floating utility classes (float-left/right → float-start/end)
- Updated text alignment classes (text-left/right → text-start/end)
3. **Phase 3: HTML Attribute Updates**
- Updated data attributes to use Bootstrap 5 prefixes (data-bs-toggle,
data-bs-target, etc.)
- Fixed tab navigation issues
4. **Phase 4: JavaScript API Compatibility Layer**
- Created bootstrap-utils.ts compatibility layer
- Updated component initialization for modals, dropdowns, popovers, etc.
5. **Phase 5: Component Migration**
- Updated and tested specific components (modals, dropdowns, toasts,
etc.)
- Fixed styling issues in cards and button groups
6. **Phase 6: Form System Updates**
- Updated form control classes to Bootstrap 5 standards
- Updated checkbox/radio markup patterns
- Simplified input groups
7. **Phase 7: Navbar Structure Updates**
- Updated navbar structure with container-fluid
- Fixed responsive behavior
8. **Phase 8: SCSS Variables and Theming**
- Added custom CSS fixes for navbar alignment
- Verified theme compatibility
9. **Phase 9: Accessibility Improvements**
- Updated sr-only to visually-hidden
- Added proper ARIA attributes
- Enhanced screen reader support
## Key Changes
- No more jQuery dependency in Bootstrap 5
- New prefix for data attributes (data-bs-*)
- Improved accessibility with ARIA attributes
- Updated positioning classes (start/end instead of left/right)
- Simplified input group structure
## Test Plan
1. **Navigation Testing**
- Verify all dropdown menus open and close properly
- Test mobile menu responsiveness
- Check tab navigation in settings dialog
2. **Component Testing**
- Verify all modals open and close correctly (settings, share,
load/save)
- Test tooltips and popovers
- Check form controls in different dialogs
3. **Layout Testing**
- Test responsiveness on different screen sizes
- Verify proper alignment of elements
- Check dark mode compatibility
4. **Specific Features to Test**
- Compiler selection and options
- Share dialog functionality
- Settings dialog
- Tree view (IDE mode)
- Font selection dropdown
5. **Browser Testing**
- Test in Chrome, Firefox, Safari
- Test in mobile browsers
## Note on Further Improvements
After this migration is stable, we could consider Phase 12: removing
jQuery dependency entirely, as Bootstrap 5 no longer requires it. This
would be a separate effort.
---------
Co-authored-by: Claude <noreply@anthropic.com>
