[perf] Replace inline styles in CodeOutputPanel with CSS module classes#51
Draft
github-actions[bot] wants to merge 1 commit intomainfrom
Draft
[perf] Replace inline styles in CodeOutputPanel with CSS module classes#51github-actions[bot] wants to merge 1 commit intomainfrom
github-actions[bot] wants to merge 1 commit intomainfrom
Conversation
Extract 5 static inline style objects from CodeOutputPanel.tsx into a new CodeOutputPanel.module.css. Static styles create new JS objects on every render; moving them to CSS classes eliminates that allocation and avoids redundant style recalculations. Changes: - Create CodeOutputPanel.module.css with .container, .outputLine, .errorLine classes - Replace container div style prop with styles.container - Replace output/returnValue <pre> style prop with styles.outputLine - Replace error <pre> style prop with styles.errorLine - Replace fgColor-muted span style props with Primer utility class Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Author
|
Pull request created: #51 |
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
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.
Tier 2: Render Performance — Inline Style Elimination
Baseline
CodeOutputPanel.tsxcontained 5 staticstyle=\{\{}}objects — none varied at runtime. Each inline style object is allocated fresh on every render, triggering React's style reconciliation on every pass.Fix
Created
CodeOutputPanel.module.csswith three classes:.containerstyle=\{\{ background: 'var(--bgColor-inset)', padding: 12, borderTop: '1px solid var(--borderColor-muted)' }}.outputLinestyle=\{\{ margin: 0, fontFamily: 'var(--fontStack-monospace)' }}(×2).errorLinestyle=\{\{ margin: 0, fontFamily: 'var(--fontStack-monospace)', color: 'var(--fgColor-danger)' }}fgColor-mutedutilitystyle=\{\{ color: 'var(--fgColor-muted)' }}(×2)CSS classes are defined once at stylesheet parse time; they generate zero JS object allocations per render and are not diffed by React's reconciler on each update.
Result
CodeOutputPanel.module.cssadded (13 lines)Verification
npm run lint— cleannpm run build— succeeds, no errorsnpm test— 933/943 tests pass (10 pre-existing failures inclient.test.tsdue to missinggh auth tokenin CI; unrelated to this change)CodeOutputPanel.tsxare all pre-existing environment issues (same pattern inChallengeSandbox.tsxand others)