fix: formatting drift & linter in playground#2641
Merged
Conversation
This comment has been minimized.
This comment has been minimized.
Contributor
WalkthroughThis pull request adds ESLint configuration and linting capabilities to the playground directory, introduces new lint-related CI steps, and performs widespread quote style normalization from double to single quotes across the codebase with minor functional refinements. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
📝 Coding Plan for PR comments
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #2641 +/- ##
===========================================
- Coverage 62.85% 46.51% -16.35%
===========================================
Files 244 1043 +799
Lines 25831 141351 +115520
Branches 0 9680 +9680
===========================================
+ Hits 16237 65753 +49516
- Misses 8259 73885 +65626
- Partials 1335 1713 +378 🚀 New features to boost your workflow:
|
Router-nonroot image scan passed✅ No security vulnerabilities found in image: |
comatory
force-pushed
the
ondrej/eng-9175-cosmoplayground-fix-formatting-drift-enable-ci-check
branch
from
b601eb0 to
8a90e02
Compare
This comment has been minimized.
This comment has been minimized.
comatory
force-pushed
the
ondrej/eng-9175-cosmoplayground-fix-formatting-drift-enable-ci-check
branch
from
8a90e02 to
353a75f
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
playground/src/components/code-viewer.tsx (1)
21-34:⚠️ Potential issue | 🟠 MajorPreserve the raw snippet while async formatting runs.
contentstarts empty and the effect returns early for falsycode, so the viewer paints blank on first render and keeps showing the previous snippet whencodebecomes''. Since formatting is async, an older completion or parse failure can also leave stale/empty content on screen. This surfaces in the eagerly mounted tab usages atplayground/src/components/playground/fetch-flow.tsx(lines 240–258) andplayground/src/components/playground/view-input.tsx(line 53, whereinput?.body?.query ?? ''explicitly passes an empty string).Suggested fix
- const [content, setContent] = useState(''); + const [content, setContent] = useState(code); useEffect(() => { - const set = async (source: string) => { - const res = await prettier.format(source, { - parser: language, - plugins: [graphQLPlugin, estreePlugin, babelPlugin], - }); - setContent(res); - }; - - if (!code) return; - set(code); + if (!code) { + setContent(''); + return; + } + + setContent(code); + let cancelled = false; + + const formatCode = async () => { + try { + const res = await prettier.format(code, { + parser: language, + plugins: [graphQLPlugin, estreePlugin, babelPlugin], + }); + + if (!cancelled) { + setContent(res); + } + } catch { + if (!cancelled) { + setContent(code); + } + } + }; + + void formatCode(); + + return () => { + cancelled = true; + }; }, [code, language]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@playground/src/components/code-viewer.tsx` around lines 21 - 34, When code changes we should synchronously show the raw snippet and only replace it when the async formatter completes (and only if it’s still the latest request). In the useEffect that declares set and calls prettier.format, immediately call setContent(code) instead of returning early for falsy code, start the async format, and use a local requestId/token (e.g., incrementing counter or closure-scoped id) captured before awaiting prettier.format to ignore stale results; on format success call setContent(formatted) only if the token matches, and on error do not overwrite the raw snippet. Reference: content, setContent, useEffect, set (async formatter), and prettier.format.
🧹 Nitpick comments (1)
.github/workflows/playground-ci.yaml (1)
32-33: Use the read-onlylinttarget in CI instead oflint:fix.
lint:fixmutates the files and then relies ongit-dirty-checkto fail afterward, making lint/format drift surface as a secondary dirty-tree symptom instead of a direct check failure. Thelinttarget provides read-only verification, which is the appropriate fit for CI; keeplint:fixfor local cleanup.♻️ Suggested change
- - name: Lint & format - run: pnpm run --filter ./playground lint:fix + - name: Lint & format + run: pnpm run --filter ./playground lint🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.github/workflows/playground-ci.yaml around lines 32 - 33, Replace the CI step that runs the mutating target "lint:fix" with the read-only verification target "lint" so CI fails fast on lint/format issues (change the run command from "pnpm run --filter ./playground lint:fix" to "pnpm run --filter ./playground lint"); keep "lint:fix" available for local cleanup and do not rely on "git-dirty-check" to surface formatting drift.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@playground/src/components/playground/monaco-dark-theme.ts`:
- Around line 236-237: Two token scope strings are misspelled in the theme
tokens list: replace "upport.constant.meta.property-value" with
"support.constant.meta.property-value" and replace
"keyword.operator.assignement" with "keyword.operator.assignment" so Monaco can
match them; locate these literal strings in
playground/src/components/playground/monaco-dark-theme.ts within the tokens
array and update the token names accordingly.
In `@playground/src/components/ui/card.tsx`:
- Around line 17-19: The CardTitle forwards a ref but currently uses
HTMLParagraphElement for the ref generic while rendering an <h3>, causing a type
mismatch; update the React.forwardRef generic so the ref type is
HTMLHeadingElement and the props type matches an h3 (e.g., use
React.HTMLAttributes<HTMLHeadingElement> or
React.ComponentPropsWithoutRef<'h3'>) so React.forwardRef<HTMLHeadingElement,
React.HTMLAttributes<HTMLHeadingElement>>(...) (or the ComponentPropsWithoutRef
variant) keeps the ref and props types in sync for the CardTitle component.
---
Outside diff comments:
In `@playground/src/components/code-viewer.tsx`:
- Around line 21-34: When code changes we should synchronously show the raw
snippet and only replace it when the async formatter completes (and only if it’s
still the latest request). In the useEffect that declares set and calls
prettier.format, immediately call setContent(code) instead of returning early
for falsy code, start the async format, and use a local requestId/token (e.g.,
incrementing counter or closure-scoped id) captured before awaiting
prettier.format to ignore stale results; on format success call
setContent(formatted) only if the token matches, and on error do not overwrite
the raw snippet. Reference: content, setContent, useEffect, set (async
formatter), and prettier.format.
---
Nitpick comments:
In @.github/workflows/playground-ci.yaml:
- Around line 32-33: Replace the CI step that runs the mutating target
"lint:fix" with the read-only verification target "lint" so CI fails fast on
lint/format issues (change the run command from "pnpm run --filter ./playground
lint:fix" to "pnpm run --filter ./playground lint"); keep "lint:fix" available
for local cleanup and do not rely on "git-dirty-check" to surface formatting
drift.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 6de9b148-b30c-426a-8f10-382b972625dc
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (28)
.github/workflows/playground-ci.yamlplayground/.eslintignoreplayground/.eslintrc.jsonplayground/.gitignoreplayground/README.mdplayground/package.jsonplayground/postcss.config.jsplayground/src/components/code-viewer.tsxplayground/src/components/empty-state.tsxplayground/src/components/playground/custom-scripts.tsxplayground/src/components/playground/index.tsxplayground/src/components/playground/monaco-dark-theme.tsplayground/src/components/playground/plan-view.tsxplayground/src/components/playground/view-load-stats.tsxplayground/src/components/playground/view-output.tsxplayground/src/components/ui/badge.tsxplayground/src/components/ui/button.tsxplayground/src/components/ui/card.tsxplayground/src/components/ui/cli.tsxplayground/src/components/ui/dialog.tsxplayground/src/components/ui/separator.tsxplayground/src/components/ui/tabs.tsxplayground/src/components/ui/tooltip.tsxplayground/src/lib/random-uuid.tsplayground/src/lib/use-event-callback.tsplayground/src/lib/use-event-listener.tsplayground/src/lib/use-isomorphic-layout-effect.tsplayground/src/lib/utils.ts
|
This PR was marked stale due to lack of activity. It will be closed in 14 days. |
|
This PR was marked stale due to lack of activity. It will be closed in 14 days. |
comatory
force-pushed
the
ondrej/eng-9175-cosmoplayground-fix-formatting-drift-enable-ci-check
branch
from
c08cc1b to
256ae24
Compare
comatory
requested review from
a team,
StarpTech and
thisisnithin
as code owners
Noroth
approved these changes
Apr 21, 2026
comatory
deleted the
ondrej/eng-9175-cosmoplayground-fix-formatting-drift-enable-ci-check
branch
7 tasks
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
2 participants
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.
Summary by CodeRabbit
Release Notes
New Features
Chores
lintandlint:fixcommands to development scripts.Style
Checklist
This PR fixes formatting drift in
playground/package. CI was omitting checks. The package did not contain anylinter configured, so I added same
eslintversion asstudio/. This app is not using Next, so insteada common set of plugins were selected that make sense.
I set few of the rules to warning, to avoid bloating the size of this PR. It can be later addressed in subsequent
PR (removal of any).
Caution
I had to re-generate graphiql by running
pnpm run --filter ./playground build:router. It was outdated.