mirror of
https://github.com/compiler-explorer/compiler-explorer.git
synced 2025-12-27 10:33:59 -05:00
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>
3.2 KiB
3.2 KiB
CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
Build & Test Commands
- Build:
npm run webpack,npm start - Dev Mode:
make dev,make gpu-dev - Lint:
npm run lint(auto-fix),npm run lint-check(check only) - Type Check:
npm run ts-check - Test:
npm run test(all),npm run test-min(minimal) - Test Single File:
npm run test -- --run base-compiler-tests.ts - Test Specific Pattern:
npm run test -- -t "should handle execution failures" - Cypress Tests:
npm run cypress - Pre-commit Check:
make pre-commitornpm run check
Important Workflow Requirements
- ALWAYS run
npm run lintbefore any git operations (git add,git commit, etc.) - The linter will automatically fix formatting issues, so this must be run before committing
- Failing to run the linter may result in style issues and commit failures
Style Guidelines
- TypeScript: Strict typing, no implicit any, no unused locals
- Formatting: 4-space indentation, 120 char line width, single quotes
- No semicolon omission, prefer const/let over var
- Client-side: TypeScript transpiled to ES5 JavaScript. This process requires import of
blah.jseven thoughblah.tsis the actual filename - ALWAYS place imports at the top of files, never inside functions or methods, unless absolutely necessary (and confirm before proposing)
- Use Underscore.js for utility functions
- Write tests for new server-side components
- Where appropriate suggest follow-up improvements to code to improve code quality, and DRY up where feasible
- Documentation is in
docs/directory; update where necessary, in particular if anything about the RESTful API changes - Don't add comments above code that's clearly self-documenting. For example, don't put comments like this:
// Initialises the thing initialiseThing();
Testing Guidelines
- Use Vitest for unit tests (compatible with Jest syntax)
- Tests are in the
/testdirectory, typically named like the source files they test - Use spy functions with
vi.spyOn()for mocking dependencies - Test structure follows describe/it pattern with descriptive test names
- Separate tests with clear section headers using comments for readability
- Consider cross-platform compatibility (especially Windows path handling)
- For complex files, organize tests by functionality rather than by method
- Use
beforeEach/afterEachto set up and clean up test environment - Remember to restore mocks with
vi.restoreAllMocks()after tests - Test both success and error cases
- Coverage is available with
npm test:coverage - For Windows-specific path issues, either:
- Skip tests with
if (process.platform === 'win32') return; - Write platform-specific assertions
- Use path-agnostic checks
- Skip tests with
Compiler Testing Specifics
- Mock filesystem operations when testing file I/O
- Use
makeFakeCompilerInfo()for creating test compiler configurations - Use
makeCompilationEnvironment()to create test environments - Mock
execcalls for testing compilation and execution - For BaseCompiler, use the test utils from
/test/utils.js - Test specific combinations of compiler capabilities
- Focus tests on behavior, not implementation details
- Use platform-agnostic assertions where possible