fix(devtools-vite): preserve valid syntax when removing parenthesized devtools JSX

[vedant416]

🎯 Changes

Fixes an issue where removing devtools JSX could leave behind an invalid empty parenthesized expression.

Example:

Before transform:

return (
  <TanStackDevtools />
)

Generated output:

return (
);

This PR replaces the removed JSX with null to preserve valid syntax:

return (
  null
)

Closes #444

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested this code locally with pnpm test:pr.

🚀 Release Impact

• This change affects published code, and I have generated a changeset.
• This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

• Bug Fixes

  • Fixed syntax errors when removing devtools components from certain code patterns.

• Tests

  • Added test case for removing devtools components in edge cases.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR fixes a build failure where removing devtools code from parenthesized return expressions left invalid return (); syntax. It threads parent node context through the AST walk function, uses that context to decide whether to replace or remove devtools JSX, adds test coverage, and declares a patch release.

Changes

Parenthesized Devtools JSX Removal Fix

Layer / File(s)	Summary
Parent node threading in AST walk packages/devtools-vite/src/ast-utils.ts	The walk function signature is updated to accept and thread an optional parentNode parameter through recursive traversal, allowing visitors to inspect surrounding context.
Conditional replacement based on parent context packages/devtools-vite/src/remove-devtools.ts	Pass 2 of the removal transform uses parent node awareness to decide whether to replace devtools JSX with null (when inside ParenthesizedExpression) or remove it entirely (in other contexts), preserving syntactic validity.
Test parenthesized expression handling packages/devtools-vite/src/remove-devtools.test.ts	New test case verifies that removing TanStackDevtools from a parenthesized function return produces valid return null output instead of leaving an empty parenthesized expression.
Release notes for patch fix .changeset/small-papers-wink.md	Changeset entry documents a patch bump and describes the fix for invalid syntax when removing parenthesized devtools JSX expressions.

🎯 2 (Simple) | ⏱️ ~10 minutes

🐰 A syntax error was roaming free,
Return parentheses, empty as can be!
Parent nodes now know the context true,
Replace with null, and fix what's askew!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main fix: preventing invalid syntax when removing parenthesized devtools JSX expressions.
Description check	✅ Passed	The PR description follows the template with completed sections including changes, checklist items, and release impact confirmation with a changeset.
Linked Issues check	✅ Passed	The PR fully addresses issue #444 by implementing the fix to replace removed JSX with null in parenthesized expressions, preventing empty parenthesized syntax errors.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the parenthesized JSX removal issue, including ast-utils traversal enhancement, test case, and removal logic updates.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (2)

.changeset/small-papers-wink.md (1)

5-5: ⚡ Quick win

Consider a more user-facing description.

The current description is technically accurate but focuses on the internal fix. Users scanning the changelog will more easily recognize whether this patch resolves their issue if the description mentions the user-visible symptom (build failures with syntax errors).

📝 Suggested rewording

-Fix invalid syntax generated when removing parenthesized devtools JSX expressions.
+Fix build failures caused by invalid `return ();` syntax when removing parenthesized devtools JSX.

This wording leads with the symptom (build failures) that users experienced, making it easier to identify the fix when reviewing release notes.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.changeset/small-papers-wink.md at line 5, Replace the internal-focused
changelog line "Fix invalid syntax generated when removing parenthesized
devtools JSX expressions." with a user-facing sentence that leads with the
symptom—e.g., "Fix build failures caused by invalid syntax when removing
parenthesized devtools JSX expressions."—so users scanning the .changeset entry
can immediately see the visible impact; update the single-line description in
the changelog entry accordingly.

packages/devtools-vite/src/ast-utils.ts (1)

48-50: ⚡ Quick win

Update JSDoc to document parent node tracking.

The function signature now includes parent node tracking, but the JSDoc doesn't mention this capability. Since JSDoc gets converted to markdown docs, readers should know that visitors receive parent context.

📝 Suggested JSDoc update

 /**
- * Recursively walk AST nodes, calling `visitor` for each node with a `type`.
+ * Recursively walk AST nodes, calling `visitor` for each node with a `type`.
+ * The visitor receives both the current node and its parent node (if any).
  */

As per coding guidelines, JSDoc should read like documentation as it gets converted to markdown docs for the website.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/devtools-vite/src/ast-utils.ts` around lines 48 - 50, Update the
JSDoc for the AST walker to document parent node tracking: state that the walker
recursively visits nodes and calls the provided visitor with the current node
and its parent (e.g., visitor(node, parent)), note that parent is undefined/null
for the root, and mention that the walker passes the current node as parent when
recursing into its children; reference the `visitor` parameter and the AST walk
function in this comment so generated markdown documents include the parent
context behavior.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In @.changeset/small-papers-wink.md:
- Line 5: Replace the internal-focused changelog line "Fix invalid syntax
generated when removing parenthesized devtools JSX expressions." with a
user-facing sentence that leads with the symptom—e.g., "Fix build failures
caused by invalid syntax when removing parenthesized devtools JSX
expressions."—so users scanning the .changeset entry can immediately see the
visible impact; update the single-line description in the changelog entry
accordingly.

In `@packages/devtools-vite/src/ast-utils.ts`:
- Around line 48-50: Update the JSDoc for the AST walker to document parent node
tracking: state that the walker recursively visits nodes and calls the provided
visitor with the current node and its parent (e.g., visitor(node, parent)), note
that parent is undefined/null for the root, and mention that the walker passes
the current node as parent when recursing into its children; reference the
`visitor` parameter and the AST walk function in this comment so generated
markdown documents include the parent context behavior.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 84d3c078-7d75-40ac-bf12-7af16723b5b3

📥 Commits

Reviewing files that changed from the base of the PR and between 58d0232 and 7384598.

📒 Files selected for processing (4)

• .changeset/small-papers-wink.md
• packages/devtools-vite/src/ast-utils.ts
• packages/devtools-vite/src/remove-devtools.test.ts
• packages/devtools-vite/src/remove-devtools.ts