
compiler-port
โ Officialโ 246,273by react ยท part of react/react
Port a compiler pass from TypeScript to Rust. Gathers context, plans the port, implements in a subagent with test-fix loop, then reviews.
This is the playbook your agent receives when the skill activates โ you don't need to read it to use the skill, but it's here to audit before installing.
Port Compiler Pass
Port a compiler pass from TypeScript to Rust end-to-end.
Arguments:
- $ARGUMENTS: Pass name exactly as it appears in Pipeline.ts log entries (e.g.,
PruneMaybeThrows,SSA,ConstantPropagation)
Step 0: Validate pass name
- Read
compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts - Search for
name: '$ARGUMENTS'in log entries - If not found, list all available pass names from the
log({...name: '...'})calls and stop - Check the
kindfield of the matching log entry:- If
kind: 'ast', report that test-rust-port only supportshirandreactivekind passes currently and stop - If
kind: 'hir'orkind: 'reactive', proceed
- If
Step 1: Determine TS source files and Rust crate
- Follow the import in Pipeline.ts to find the actual TypeScript file(s) for the pass
- Map the TS folder to a Rust crate using this mapping:
| TypeScript Path | Rust Crate |
|---|---|
src/HIR/ (excluding BuildHIR.ts, HIRBuilder.ts) | react_compiler_hir |
src/HIR/BuildHIR.ts, src/HIR/HIRBuilder.ts | react_compiler_lowering |
src/Babel/, src/Entrypoint/ | react_compiler |
src/CompilerError.ts | react_compiler_diagnostics |
src/ReactiveScopes/ | react_compiler_reactive_scopes |
src/<Name>/ | react_compiler_<name> (1:1, e.g., src/Optimization/ -> react_compiler_optimization) |
- Check if the pass is already ported:
- Check if the corresponding Rust file exists in the target crate
- Check if
compiler/crates/react_compiler/src/entrypoint/pipeline.rsalready calls it - If both are true, report the pass is already ported and stop
Step 2: Gather context
Read the following files (all reads happen in main context):
- Architecture guide:
compiler/docs/rust-port/rust-port-architecture.md - Pass documentation: Check
compiler/packages/babel-plugin-react-compiler/docs/passes/for docs about this pass - TypeScript source: All TypeScript source files for the pass + any helpers imported from the same folder
- Rust pipeline:
compiler/crates/react_compiler/src/entrypoint/pipeline.rs - Rust HIR types: Key type files in
compiler/crates/react_compiler_hir/src/(especiallyhir.rs,environment.rs) - Rust reactive types: For reactive passes, also read
compiler/crates/react_compiler_hir/src/reactive_function.rs - Target crate: If the target crate already exists, read its
Cargo.toml,src/lib.rs, and existing files to understand the current structure
Step 3: Create implementation plan
Based on the gathered context, create and present a plan covering:
- New types needed: Any Rust types that need to be added or modified
- Files to create: List of new Rust files with their TS counterparts
- Crate setup: Whether a new crate is needed or adding to an existing one
- Pipeline wiring: How the pass will be called from
pipeline.rs - Key translation decisions: Any non-obvious TS-to-Rust translations
Present the plan to the user, then proceed to implementation.
Step 4: Implementation
Launch the port-pass agent with all gathered context:
- Pass name:
$ARGUMENTS - TypeScript source file content(s)
- Target Rust crate name and path
- Pipeline wiring details
- Implementation plan from Step 3
- Architecture guide content
- Current pipeline.rs content
- Existing crate structure (if any)
The agent will:
- Port the TypeScript code to Rust
- Create or update the crate as needed
- Wire the pass into pipeline.rs
- Run the test-fix loop until 0 failures (see agent prompt for details)
Step 5: Review loop
- Run
/compiler-reviewon the changes - If issues are found:
- Launch the
port-passagent again with:- The review findings
- Instruction to fix the issues
- Instruction to re-run
bash compiler/scripts/test-rust-port.sh(no args, auto-detects last ported pass) to confirm 0 failures still hold
- After the agent completes, run
/compiler-reviewagain
- Launch the
- Repeat until review is clean
Step 6: Final report
Report to the user:
- Files created and modified
- Test results (pass count)
- Review status
- Do NOT auto-commit (user should review and commit manually, or use
/compiler-commit)
npx skills add react/react --skill "compiler-port" --full-depthRun this in your project โ your agent picks the skill up automatically.
No common issues documented yet. If you hit a problem, the repository's GitHub Issues page is the best place to look.
Licensed under MITโ you can use, modify, and redistribute it under that license's terms.
View the full license file on GitHub โ