Skip to content

chore(repo): add react-grab to clerk-js sandbox #8666

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jacekradko merged 7 commits into from
May 27, 2026
Merged

chore(repo): add react-grab to clerk-js sandbox #8666

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
46f3fa2
chore(js): add react-grab to clerk-js sandbox
kylemac May 27, 2026
44e504c
chore(repo): dedupe lockfile after react-grab install
kylemac May 27, 2026
3fcb844
chore(js): drop react-grab devDep, load only via unpkg
kylemac May 27, 2026
96e9fd3
revert pnpm-lock changes
alexcarpenter May 27, 2026
739f3cc
chore(js): refresh sandbox sidebar layout with grouped nav and collap…
kylemac May 27, 2026
2466bd7
format
alexcarpenter May 27, 2026
2b8d4cb
fix(repo): Sandbox initial variables (#8668)
alexcarpenter May 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .changeset/old-months-grow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
---
---
1 change: 1 addition & 0 deletions packages/clerk-js/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@
"bundlewatch": "^0.4.2",
"jsdom": "26.1.0",
"minimatch": "^10.2.5",
"react-grab": "^0.1.37",

@alexcarpenter alexcarpenter May 27, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since your loading from unpkg, whats the reason for needing it as devDependencies?

@kylemac kylemac May 27, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no probably not. i didn't catch that. i'll remove from dev dep

"webpack-merge": "^5.10.0"
},
"engines": {
Expand Down
5 changes: 5 additions & 0 deletions packages/clerk-js/sandbox/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,11 @@
}
})();
</script>
<!-- React Grab (development-only: this template is only used by `pnpm dev:sandbox`) -->
<script
src="//unpkg.com/react-grab/dist/index.global.js"
crossorigin="anonymous"
></script>
Comment on lines +97 to +101

@coderabbitai coderabbitai Bot May 27, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify current dependency declaration vs sandbox CDN URL
jq -r '.devDependencies["react-grab"]' packages/clerk-js/package.json
rg -n "react-grab|unpkg.com/react-grab" packages/clerk-js/sandbox/template.html

Repository: clerk/javascript

Length of output: 127

🏁 Script executed:

#!/bin/bash
# 1) Check what files changed (and whether any test-related files are among them)
echo "=== Changed files ==="
git diff --name-only

echo
echo "=== Changed test-related files ==="
git diff --name-only | rg -n -i '(^|/)(test|__tests__|tests|spec|cypress|playwright)/|\.test\.(js|ts|tsx|jsx)$|\.spec\.(js|ts|tsx|jsx)$' || true

echo
# 2) Confirm all unpkg references in the template
echo "=== unpkg.com references in template.html ==="
rg -n "unpkg\.com" packages/clerk-js/sandbox/template.html || true

echo
# 3) Show surrounding context for the snippet
echo "=== Context around CDN script tag ==="
sed -n '25,60p' packages/clerk-js/sandbox/template.html

Repository: clerk/javascript

Length of output: 1728

Pin the React Grab CDN script URL (explicit HTTPS + version) and add sandbox test coverage.

  • packages/clerk-js/sandbox/template.html loads //unpkg.com/react-grab/dist/index.global.js (protocol-relative, unversioned); pin to an explicit https://unpkg.com/react-grab@0.1.37/dist/index.global.js (or another exact version).
  • No tests were added/modified in this PR scope; add an integration/sandbox test that asserts React Grab loads correctly and sandbox wiring works.
🤖 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/clerk-js/sandbox/template.html` around lines 39 - 43, Update the
protocol-relative, unversioned CDN import in the sandbox template to an explicit
HTTPS URL with a fixed version by replacing the script src in
packages/clerk-js/sandbox/template.html with
https://unpkg.com/react-grab@0.1.37/dist/index.global.js; then add a
sandbox/integration test that boots the dev sandbox and asserts the global
ReactGrab is present (e.g., a test that loads the template and checks
window.ReactGrab or similar), ensuring the test verifies the sandbox wiring for
the React Grab script.

<script>
class NavLink extends HTMLElement {
connectedCallback() {
Expand Down
Loading
Loading