Files
compiler-explorer/CLAUDE.md
Matt Godbolt 637564f389 Migrate to Bootstrap 5 (#7582)
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>
2025-04-24 12:10:37 -05:00

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-commit or npm run check

Important Workflow Requirements

  • ALWAYS run npm run lint before 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.js even though blah.ts is 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 /test directory, 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/afterEach to 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

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 exec calls 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