feat: add connect script, Vite plugin, and init command#10
Merged
Conversation
🦋 Changeset detectedLatest commit: 48d5865 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Reduce React app connection boilerplate from ~30 lines to a single import or zero-code Vite plugin: - `agent-react-devtools/connect`: browser module that handles hook stub deletion, react-devtools-core initialization, and WebSocket connection - `agent-react-devtools/vite`: Vite plugin that injects the connect script via transformIndexHtml (dev only) - `agent-react-devtools init`: CLI command that auto-detects framework (Vite/Next.js/CRA/React Native) and patches config files - Expo example app (SDK 54) for testing React Native integration - Updated example react-app to use the Vite plugin - Updated README with connection docs for all approaches - 11 new tests for init command framework detection and patching Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
piotrski
force-pushed
the
feat/connect
branch
from
e047c6c to
7a54137
Compare
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 7a54137d2c
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
…lude react-devtools-core App Router's layout.tsx is a Server Component, so directly importing connect there never runs client-side. Now creates a 'use client' wrapper (devtools.ts) and imports that from layout instead. Pages Router still uses direct import. Also fixes install instructions to always include react-devtools-core since connect.ts dynamically imports it for all frameworks, and fixes idempotency for repeated init runs on App Router projects. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…geset - connect.ts: check import.meta.env.PROD (Vite/bundlers) in addition to process.env.NODE_ENV so the production guard works in browser environments - init.ts: fix dry-run printing misleading "Next steps" when already configured by removing the !dryRun condition from the early exit check - Add changeset for all fixes in this PR Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…olidate changeset - Rename examples/react-app → examples/vite-app to better reflect the framework - Wrap connect() in top-level try/catch so missing react-devtools-core doesn't produce an unhandled rejection - Replace partial changeset with a single minor changeset covering all new features on this branch - Add example-expo-app to changeset ignore list Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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
1 participant
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
agent-react-devtools/connect— single-import browser module that handles Vite hook stub deletion, react-devtools-core init, and WebSocket connection with SSR/production guards and 2s timeoutagent-react-devtools/vite— zero-code Vite plugin (reactDevtools()) that injects the connect script viatransformIndexHtmlin dev mode onlyagent-react-devtools init— CLI command that auto-detects framework (Vite, Next.js, CRA, React Native) and patches config files with--dry-runsupportTest plan
bun run build— all 3 tsup targets (CLI, connect, vite) produce JS + DTSbun run typecheck— cleanbun run test— 49/49 passnpm pack --dry-run— includes connect.js, connect.d.ts, vite.js, vite.d.tsget treeworks🤖 Generated with Claude Code
Note
Medium Risk
Introduces new public entrypoints that inject browser code and auto-modify user project files, which could cause integration/build issues across frameworks if edge cases aren’t handled. Guards for SSR/production and idempotent patching reduce runtime risk, but the init patching and bundler/plugin behavior still warrant review.
Overview
Adds zero-config app connection via three new surfaces:
agent-react-devtools/connect(browser-side auto-connect with SSR/prod guards and non-blocking timeout),agent-react-devtools/vite(dev-only Vite plugin that injects the connect import + optional host/port meta tags), and a newagent-react-devtools init [--dry-run]CLI command that detects Vite/Next.js (Pages vs App Router), CRA, or React Native and patches the appropriate config/entry files (including generating a Next.js App Router'use client'wrapper).Updates packaging/build to ship the new
connectandviteexports (separatetsuptargets, optional peer deps forreact-devtools-core/vite), adds focusedvitestcoverage for framework detection and patching behavior, refreshes docs, and updates/expands examples (Vite example uses the plugin; new Expo example app for RN validation).Written by Cursor Bugbot for commit 48d5865. This will update automatically on new commits. Configure here.