mirror of
https://github.com/compiler-explorer/compiler-explorer.git
synced 2025-12-27 09:23:52 -05:00
## 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>
4.6 KiB
4.6 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
- ⚠️ NEVER BYPASS PRE-COMMIT HOOKS! NEVER use
git commit -nor--no-verify⚠️ - ALWAYS run
make pre-commitor at minimumnpm run ts-checkandnpm run lintbefore committing - The full process must always be:
- Make changes
- Run
npm run ts-checkto verify TypeScript types - Run
npm run lintto fix style issues (will auto-fix many problems) - Run
npm run testto verify functionality (or at leastnpm run test-min) - ONLY THEN commit changes with plain
git commit(NO FLAGS!)
- Bypassing these checks will lead to broken builds, failed tests, and PRs that cannot be merged
- ALWAYS use HEREDOC syntax for complex shell commands, especially those containing quotes, newlines, or special characters:
gh pr create --title "Title" --body "$(cat <<'EOF' PR body content with "quotes" and special chars like $variables that would otherwise need escaping EOF )"
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(); - Avoid redundant function header comments that merely repeat the function name. For example:
In this case, the function name already clearly states what it does.
/** * Sets up compiler change handling */ function setupCompilerChangeHandling() {...} - Comments should provide additional context or explain "why" something is done, not just restate "what" is being done.
- Only add function header comments when they provide meaningful information beyond what the function name and signature convey.
- Use British English spellings for things like "initialise" and "colour", but only in new code. It's a preference not a hard requirement
- Use modern Typescript features like optional chaining when updating existing code or adding new code
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