mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Add React sync development skill (#95620)
### What? Add a repository skill for building local React stable and experimental bundles, syncing them into Next.js, and verifying the integration. ### Why? Testing upstream React changes in Next.js requires a precise bundle list, both React release channels, and the repository-pinned pnpm version. Capturing the workflow as a skill makes it repeatable and avoids global pnpm versions bypassing workspace linking. ### How? Add `$react-sync` with a reusable build helper and document it in `AGENTS.md`. The sync command puts the Corepack shim first on `PATH` so nested pnpm commands use the version pinned by Next.js. ### Verification - `bash -n .agents/skills/react-sync/scripts/build-for-next.sh` - `python3 ~/.codex/skills/.system/skill-creator/scripts/quick_validate.py .agents/skills/react-sync` - Prettier check for `AGENTS.md` and `SKILL.md` - Full local React build and `pnpm sync-react` workflow completed successfully - `pnpm --filter=next build` <!-- NEXT_JS_LLM_PR -->
This commit is contained in:
@@ -0,0 +1,53 @@
|
||||
---
|
||||
name: react-sync
|
||||
description: >
|
||||
Build local React changes in the bundle variants consumed by Next.js, sync
|
||||
them into a local Next.js checkout, and test the resulting integration. Use
|
||||
when working on React changes that need validation in Next.js, or when asked
|
||||
to run buildForNext, pnpm sync-react, or synchronize a React checkout with
|
||||
Next.js.
|
||||
metadata:
|
||||
internal: true
|
||||
---
|
||||
|
||||
# Sync React to Next.js
|
||||
|
||||
Use this skill when syncing a local React checkout into this Next.js checkout.
|
||||
|
||||
## Build and sync
|
||||
|
||||
1. Build React from its own checkout. Pass this skill's script by its absolute
|
||||
path, because the working directory must be the React repository.
|
||||
|
||||
```bash
|
||||
cd <react-repo>
|
||||
bash <next-repo>/.agents/skills/react-sync/scripts/build-for-next.sh
|
||||
```
|
||||
|
||||
This creates `build/oss-stable` and `build/oss-experimental` with the
|
||||
bundle variants that Next.js consumes.
|
||||
|
||||
2. Sync the build into Next.js:
|
||||
|
||||
```bash
|
||||
cd <next-repo>
|
||||
PATH="$(dirname "$(command -v corepack)"):$PATH" \
|
||||
pnpm sync-react --version <react-repo>
|
||||
```
|
||||
|
||||
Work around a Codex `PATH`-precedence bug by keeping the directory containing
|
||||
the active Corepack shim first on `PATH`. Codex injects a separate bundled
|
||||
`pnpm` executable ahead of the user's Corepack shim, and command lookup
|
||||
happens before Corepack reads the repository's `packageManager` field. The
|
||||
prefix makes both this command and `sync-react`'s nested `pnpm install`
|
||||
resolve through Corepack to the repository-pinned pnpm version. Invoking
|
||||
only the outer command with `corepack pnpm` is insufficient because the
|
||||
nested command still resolves `pnpm` from `PATH`.
|
||||
|
||||
3. Inspect the sync result before testing. Preserve unrelated changes in both
|
||||
checkouts. Rebuild Next.js when required, then run the focused test command
|
||||
matching the changed behavior.
|
||||
|
||||
## Related Skills
|
||||
|
||||
- `$react-vendoring` - vendored React runtime and type boundaries after syncing.
|
||||
@@ -0,0 +1,35 @@
|
||||
#!/usr/bin/env bash
|
||||
set -euo pipefail
|
||||
set -x
|
||||
|
||||
bundles=(
|
||||
"react/index"
|
||||
"react/jsx"
|
||||
"react-jsx-runtime.react-server"
|
||||
"react-jsx-dev-runtime.react-server"
|
||||
"react/compiler-runtime"
|
||||
"react.react-server"
|
||||
"react-dom/index"
|
||||
"react-dom/client"
|
||||
"react-dom/profiling"
|
||||
"react-dom/server"
|
||||
"react-dom.react-server"
|
||||
"react-dom-server.browser"
|
||||
"react-dom-server.bun"
|
||||
"react-dom-server.edge"
|
||||
"react-dom-server.node"
|
||||
"react-dom-server-legacy.browser"
|
||||
"react-dom-server-legacy.node"
|
||||
"react-is"
|
||||
"scheduler"
|
||||
"react-server-dom-webpack/"
|
||||
"react-server-dom-turbopack/"
|
||||
)
|
||||
|
||||
type="BUN_DEV,BUN_PROD,NODE_DEV,NODE_PROD,NODE_PROFILING,ESM_DEV,ESM_PROD,NODE_ES2015"
|
||||
|
||||
RELEASE_CHANNEL=stable node ./scripts/rollup/build.js "${bundles[@]}" --type="$type"
|
||||
mv ./build/node_modules ./build/oss-stable
|
||||
|
||||
RELEASE_CHANNEL=experimental node ./scripts/rollup/build.js "${bundles[@]}" --type="$type" --unsafe-partial
|
||||
mv ./build/node_modules ./build/oss-experimental
|
||||
@@ -388,6 +388,7 @@ Use skills for conditional, deep workflows. Keep baseline iteration/build/test p
|
||||
- `$flags` - feature-flag wiring across config/schema/define-env/runtime env
|
||||
- `$dce-edge` - DCE-safe `require()` patterns and edge/runtime constraints
|
||||
- `$react-vendoring` - `entry-base.ts` boundaries and vendored React type/runtime rules
|
||||
- `$react-sync` - build a local React checkout and sync it into Next.js for testing
|
||||
- `$runtime-debug` - runtime-bundle/module-resolution regression reproduction and verification
|
||||
- `$next-rspack` - @next/rspack-core and @next/rspack-binding maintenance (rspack/ directory)
|
||||
- `$authoring-skills` - how to create and maintain skills in `.agents/skills/`
|
||||
|
||||
Reference in New Issue
Block a user