⚡ 36x faster Metro transforms for React Native
Rust-powered. Drop-in Babel replacement.
| Benchmark | Babel | Facetpack | Speedup |
|---|---|---|---|
| Transform (small) | 244 µs | 7.8 µs | 31x |
| Transform (large) | 2.47 ms | 64 µs | 38x |
| Resolve (cold) | 31.6 ms | 10.8 ms | 3x |
Tested on Apple M3 Max
npm install @ecrindigital/facetpack// metro.config.js
const { getDefaultConfig } = require('expo/metro-config')
const { withFacetpack } = require('@ecrindigital/facetpack')
module.exports = withFacetpack(getDefaultConfig(__dirname))That's it. ⚡
Facetpack is the foundation of Facet, the modern toolchain for React Native.
| Coming Soon | Description |
|---|---|
| 🌳 Tree-shaking | 30% smaller bundles |
| 🩺 Facet Doctor | Diagnose & auto-fix issues |
| ⚡ Facet CLI | Faster dev server |
| 🤖 f0 | AI component generation |
| more tools | coming soon |
⭐ Star this repo to follow along!
┌─────────────────────────────────────────────────────────────┐
│ Metro Build │
├─────────────────────────────────────────────────────────────┤
│ │
│ User Code (.ts, .tsx) │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Parse │ -> │ Transform │ -> │ Codegen │ │
│ │ (OXC) │ │ (OXC) │ │ (OXC) │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │
│ Node Modules (Flow packages) │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Parse │ -> │ Transform │ -> │ Codegen │ │
│ │ (Babel) │ │ (Babel) │ │ (Babel) │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │
│ Resolution │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Batch Resolve (OXC Resolver via NAPI) │ │
│ │ Single FFI call for all imports in a file │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
packages/
├── facetpack/ # Metro integration (TypeScript)
│ ├── withFacetpack # Config wrapper
│ ├── transformer # OXC transformer + Babel fallback
│ └── resolver # Cached batch resolver
│
└── facetpack-native/ # Native bindings (Rust + NAPI)
├── oxc_parser # Parsing
├── oxc_transformer # TS/JSX transformation
├── oxc_codegen # Code generation
└── oxc_resolver # Module resolution
module.exports = withFacetpack(config, {
// JSX runtime: 'automatic' (default) or 'classic'
jsxRuntime: 'automatic',
// JSX import source for automatic runtime
jsxImportSource: 'react',
// JSX pragma for classic runtime
jsxPragma: 'React.createElement',
jsxPragmaFrag: 'React.Fragment',
// File extensions to transform
sourceExts: ['ts', 'tsx', 'js', 'jsx', 'mjs', 'cjs'],
})Enable debug logging:
FACETPACK_DEBUG=1 npx expo start- Flow packages (react-native core, reanimated, gesture-handler, etc.) use Babel fallback
- OXC doesn't support ES5 class transformation yet (not needed for Hermes)
cd examples/benchmark
bun run.ts # Full benchmark with Metro build
bun run.ts --transformer-only # Skip Metro build benchmark# Install dependencies
bun install
# Build native bindings
cd packages/facetpack-native
bun run build
# Build TypeScript package
cd packages/facetpack
bun run build
# Run tests
bun testMIT - Ecrin Digital