feat: add ?grab=1 query-flag loader integrations for Vite and Next.js by devin-ai-integration[bot] · Pull Request #466 · aidenybai/react-grab

devin-ai-integration · 2026-06-10T19:23:50Z

Summary

Adds opt-in loader integrations so React Grab can be enabled in any environment, including production, via a URL flag instead of being hardcoded to dev builds.

New entry points on the react-grab package:

react-grab/vite — reactGrab() Vite plugin that uses transformIndexHtml to prepend an inline loader snippet into <head>.
react-grab/next — <ReactGrab /> component (plain inline <script>, works in both App router layout.tsx and Pages router _document.tsx).

Both render the same tiny inline snippet (createFlagLoaderSnippet in packages/react-grab/src/utils/create-flag-loader-snippet.ts):

flag = searchParams.get("grab")
if (flag is "1"/"true")  sessionStorage["react-grab:flag-enabled"] = "true"
if (flag is "0"/"false") remove it
if enabled -> inject <script src="https://unpkg.com/react-grab/dist/index.global.js">

sessionStorage persistence keeps React Grab active across navigations/reloads within the tab session after visiting once with ?grab=1; ?grab=0 turns it off.

Shared options: flag (query param name, default "grab"), src (script URL), enabled (set false to skip injection entirely).

Other changes:

Added ./vite and ./next exports + build entries (cjs/esm + dts), changeset, README docs.
skills/react-grab/SKILL.md whitespace change is from pnpm format (oxfmt).

Link to Devin session: https://app.devin.ai/sessions/5f712600fa3f47d4acc0965a2f1ac873
Requested by: @aidenybai

Note

Low Risk
Additive integrations and docs; optional third-party script load only when users opt in via URL flag, with no changes to core grab runtime behavior.

Overview
Adds opt-in production loading for React Grab via URL query flags (?grab=1 / ?grab=true), with sessionStorage persistence for the tab session and ?grab=0 to disable.

New package entry points react-grab/vite (reactGrab() plugin) and react-grab/next (<ReactGrab />) both inject the same inline loader from createFlagLoaderSnippet, which only fetches the global bundle when the flag is active. Shared options: flag, src, enabled. The Vite plugin can also turn on build.sourcemap by default (unless already set or sourcemap: false).

Build exports and README docs for the query-flag loader are included; skills/react-grab/SKILL.md has a minor formatting-only tweak.

^{Reviewed by Cursor Bugbot for commit f173ecb. Bugbot is set up for automated code reviews on this repo. Configure here.}

Summary by cubic

Adds an opt-in flag loader for react-grab via react-grab/vite and react-grab/next, so ?grab=1 can enable React Grab in any environment, including production. The flag persists for the tab session and ?grab=0 turns it off.

New Features
- react-grab/vite: Vite plugin that prepends an inline loader script via transformIndexHtml, and enables build sourcemaps by default unless you already set them (sourcemap: false to opt out).
- react-grab/next: <ReactGrab /> component that injects the same inline script (works in App and Pages routers).
- Loader behavior: reads ?grab=1/true or ?grab=0/false, persists to sessionStorage, and conditionally injects <script src="https://unpkg.com/react-grab/dist/index.global.js" crossorigin="anonymous">.
- Options: flag (default "grab"), src (override script URL), enabled (set false to skip), plus Vite-only sourcemap (default true).
- Added ./vite and ./next exports with build entries and docs updates.
Migration
- For Next.js, set productionBrowserSourceMaps: true in next.config.ts.

^{Written for commit f173ecb. Summary will update on new commits.}

Co-Authored-By: Aiden Bai <aiden.bai05@gmail.com>

devin-ai-integration · 2026-06-10T19:23:53Z

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

Disable automatic comment, CI, and merge conflict monitoring

vercel · 2026-06-10T19:23:56Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
react-grab-storybook	Ready	Preview, Comment	Jun 10, 2026 7:43pm
react-grab-website	Ready	Preview, Comment	Jun 10, 2026 7:43pm

pkg-pr-new · 2026-06-10T19:24:49Z

Open in StackBlitz

npm i https://pkg.pr.new/@react-grab/cli@466

npm i https://pkg.pr.new/grab@466

npm i https://pkg.pr.new/react-grab@466

commit: f173ecb

cursor

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.}

^{Reviewed by Cursor Bugbot for commit 7be5799. Configure here.}

cursor · 2026-06-10T19:41:33Z

+    script.src = ${src};
+    script.crossOrigin = "anonymous";
+    document.head.appendChild(script);
+  } catch (error) {}


Query flag ignored on client navigations

Medium Severity

The loader reads window.location.search only when the inline snippet runs (typically the first full HTML load). Client-side route changes that add or remove ?grab=1 / ?grab=0 do not re-run that logic, so enabling or disabling via the query flag can fail until a full reload even though the docs say ?grab=0 turns React Grab off.

^{Reviewed by Cursor Bugbot for commit 7be5799. Configure here.}

…ourcemap config Co-Authored-By: Aiden Bai <aiden.bai05@gmail.com>

devin-ai-integration · 2026-06-10T19:54:24Z

Tested end-to-end — all scenarios passed, CI fully green.

Test 1: Vite plugin — dev server (e2e-app) — PASS

No flag: __REACT_GRAB__ undefined, no loader script
?grab=1: unpkg script appended, react-grab initialized ("React Grab v0.1.44" banner)
Overlay UI renders (label NestedCard.button on hover)
Plain URL after ?grab=1: still loads via sessionStorage
?grab=0: flag cleared, absent on subsequent loads

Note: synthetic Ctrl+C doesn't fire in browser automation, so overlay was demonstrated via __REACT_GRAB__.activate() + hover; script loading/init verified directly.

Test 2: Vite plugin — production build — PASS

Inline snippet present in built dist/index.html head
Preview + ?grab=1 loads react-grab in the prod build
With the sourcemap commit, .js.map files are emitted by default

Test 3: Next.js <ReactGrab /> (apps/website) — PASS

No flag: nothing loaded
?grab=1: /script.js appended (custom src option), toolbar visible

Sourcemaps: the Vite plugin now enables build.sourcemap unless already set (sourcemap: false to opt out); README documents productionBrowserSourceMaps: true for Next.js.

Session

devin-ai-integration Bot and others added 2 commits June 10, 2026 19:23

feat: add query-flag loader integrations for Vite and Next.js

39874c2

Co-Authored-By: Aiden Bai <aiden.bai05@gmail.com>

chore: add changeset

7be5799

Co-Authored-By: Aiden Bai <aiden.bai05@gmail.com>

devin-ai-integration Bot assigned aidenybai Jun 10, 2026

vercel Bot deployed to Preview – react-grab-storybook June 10, 2026 19:24 View deployment

vercel Bot deployed to Preview – react-grab-website June 10, 2026 19:24 View deployment

cursor Bot reviewed Jun 10, 2026

View reviewed changes

feat: enable build sourcemaps from vite plugin and document Next.js s…

f173ecb

…ourcemap config Co-Authored-By: Aiden Bai <aiden.bai05@gmail.com>

vercel Bot deployed to Preview – react-grab-storybook June 10, 2026 19:43 View deployment

vercel Bot deployed to Preview – react-grab-website June 10, 2026 19:43 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add ?grab=1 query-flag loader integrations for Vite and Next.js#466

feat: add ?grab=1 query-flag loader integrations for Vite and Next.js#466
devin-ai-integration[bot] wants to merge 3 commits into
mainfrom
devin/1781119395-flag-loader

devin-ai-integration Bot commented Jun 10, 2026 •

edited by cubic-dev-ai Bot

Loading

Uh oh!

devin-ai-integration Bot commented Jun 10, 2026

Uh oh!

vercel Bot commented Jun 10, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Jun 10, 2026 •

edited

Loading

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot Jun 10, 2026

Uh oh!

devin-ai-integration Bot commented Jun 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

devin-ai-integration Bot commented Jun 10, 2026 • edited by cubic-dev-ai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Summary by cubic

Uh oh!

devin-ai-integration Bot commented Jun 10, 2026

🤖 Devin AI Engineer

Uh oh!

vercel Bot commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Jun 10, 2026

Choose a reason for hiding this comment

Query flag ignored on client navigations

Uh oh!

devin-ai-integration Bot commented Jun 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

devin-ai-integration Bot commented Jun 10, 2026 •

edited by cubic-dev-ai Bot

Loading

vercel Bot commented Jun 10, 2026 •

edited

Loading

pkg-pr-new Bot commented Jun 10, 2026 •

edited

Loading