feat(tools-babel): Add tools-babel package for babel configuration and parsing support#4087
Open
feat(tools-babel): Add tools-babel package for babel configuration and parsing support#4087
Conversation
github-actions
bot
added
the
chore
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
incubator/tools-babel/README.md
Outdated
| | Domain | Frequency | What is traced | | ||
| | -------------- | --------- | ---------------------------------------------------- | | ||
| | `transform` | medium | Parse operations (OXC native, AST conversion, Babel) | | ||
| | `babel-plugin` | high | Individual plugin visitor method calls | |
Contributor
There was a problem hiding this comment.
Suggested change
| | `babel-plugin` | high | Individual plugin visitor method calls | | |
| | `babel-plugin` | high | Individual plugin visitor method calls | |
incubator/tools-babel/README.md
Outdated
Comment on lines
+261
to
+312
| trackPerformance({ enable: "babel-plugin", strategy: "timing", frequency: "high" }); | ||
| ``` | ||
|
|
||
| ## TransformerSettings | ||
|
|
||
| Settings that persist across transformation passes: | ||
|
|
||
| | Field | Type | Default | Description | | ||
| | ---------------------- | -------------------------- | ------- | ------------------------------------------------------------ | | ||
| | `configCallerMixins` | `Record<string, string>` | -- | Extra fields added to Babel's `caller` config | | ||
| | `configDisabledPlugins`| `Set<string>` | -- | Plugin keys to remove from the resolved config | | ||
| | `parseDisableOxc` | `boolean` | -- | Disable OXC parser | | ||
| | `parseDisableHermes` | `boolean` | -- | Disable Hermes parser | | ||
| | `parseFlowDefault` | `boolean` | `true` | Assume Flow in `.js`/`.jsx` files under `node_modules` | | ||
| | `parseFlowWorkspace` | `boolean` | `false` | Assume Flow in workspace `.js`/`.jsx` files | | ||
| | `parseExtDefault` | `SrcSyntax` | `"js"` | Syntax for unknown file extensions (unset to skip) | | ||
| | `parseExtAliases` | `Record<string, SrcSyntax>`| -- | Map extensions to syntax types (e.g. `{ ".svg": "jsx" }`) | | ||
|
|
||
| ## API Reference | ||
|
|
||
| ### Config | ||
|
|
||
| | Function | Description | | ||
| | ------------------------------------- | -------------------------------------------------------------------------- | | ||
| | `getBabelConfig(args, settings?)` | Build a per-file Babel config from cached base config + file-specific settings | | ||
| | `filterConfigPlugins(config, disabled?)` | Resolve presets/overrides and filter plugins by key | | ||
|
|
||
| ### Parsing | ||
|
|
||
| | Function | Description | | ||
| | ----------------------------- | -------------------------------------------------------------- | | ||
| | `parseToAst(args)` | Parse with fallback chain: OXC -> Hermes -> Babel | | ||
| | `oxcParseToAst(args, trace?)` | Parse with OXC and convert ESTree to Babel AST | | ||
| | `hermesParseToAst(args)` | Parse with Hermes | | ||
| | `toBabelAST(program, source, isTypeScript?, comments?)` | Convert OXC ESTree to Babel AST | | ||
|
|
||
| ### Transformer | ||
|
|
||
| | Function | Description | | ||
| | ------------------------------------------------- | ------------------------------------------------------- | | ||
| | `makeTransformerArgs(babelArgs, settings?, updateContext?)` | Build `TransformerArgs` with context and Babel config | | ||
| | `initTransformerContext(filename, settings)` | Initialize file context without building Babel config | | ||
|
|
||
| ### Plugins | ||
|
|
||
| | Function | Description | | ||
| | --------------------------------------- | --------------------------------------------------------------- | | ||
| | `isConfigItem(plugin)` | Check if plugin is a Babel `ConfigItem` | | ||
| | `isPluginObj(plugin)` | Check if plugin is a resolved `PluginObj` | | ||
| | `getPluginTarget(plugin)` | Extract the plugin target (function or string) | | ||
| | `getPluginKey(plugin)` | Extract the key from a resolved plugin | | ||
| | `updateTransformOptions(options, visitor)` | Walk and modify plugins/presets/overrides in a config | |
Contributor
There was a problem hiding this comment.
Suggested change
| trackPerformance({ enable: "babel-plugin", strategy: "timing", frequency: "high" }); | |
| ``` | |
| ## TransformerSettings | |
| Settings that persist across transformation passes: | |
| | Field | Type | Default | Description | | |
| | ---------------------- | -------------------------- | ------- | ------------------------------------------------------------ | | |
| | `configCallerMixins` | `Record<string, string>` | -- | Extra fields added to Babel's `caller` config | | |
| | `configDisabledPlugins`| `Set<string>` | -- | Plugin keys to remove from the resolved config | | |
| | `parseDisableOxc` | `boolean` | -- | Disable OXC parser | | |
| | `parseDisableHermes` | `boolean` | -- | Disable Hermes parser | | |
| | `parseFlowDefault` | `boolean` | `true` | Assume Flow in `.js`/`.jsx` files under `node_modules` | | |
| | `parseFlowWorkspace` | `boolean` | `false` | Assume Flow in workspace `.js`/`.jsx` files | | |
| | `parseExtDefault` | `SrcSyntax` | `"js"` | Syntax for unknown file extensions (unset to skip) | | |
| | `parseExtAliases` | `Record<string, SrcSyntax>`| -- | Map extensions to syntax types (e.g. `{ ".svg": "jsx" }`) | | |
| ## API Reference | |
| ### Config | |
| | Function | Description | | |
| | ------------------------------------- | -------------------------------------------------------------------------- | | |
| | `getBabelConfig(args, settings?)` | Build a per-file Babel config from cached base config + file-specific settings | | |
| | `filterConfigPlugins(config, disabled?)` | Resolve presets/overrides and filter plugins by key | | |
| ### Parsing | |
| | Function | Description | | |
| | ----------------------------- | -------------------------------------------------------------- | | |
| | `parseToAst(args)` | Parse with fallback chain: OXC -> Hermes -> Babel | | |
| | `oxcParseToAst(args, trace?)` | Parse with OXC and convert ESTree to Babel AST | | |
| | `hermesParseToAst(args)` | Parse with Hermes | | |
| | `toBabelAST(program, source, isTypeScript?, comments?)` | Convert OXC ESTree to Babel AST | | |
| ### Transformer | |
| | Function | Description | | |
| | ------------------------------------------------- | ------------------------------------------------------- | | |
| | `makeTransformerArgs(babelArgs, settings?, updateContext?)` | Build `TransformerArgs` with context and Babel config | | |
| | `initTransformerContext(filename, settings)` | Initialize file context without building Babel config | | |
| ### Plugins | |
| | Function | Description | | |
| | --------------------------------------- | --------------------------------------------------------------- | | |
| | `isConfigItem(plugin)` | Check if plugin is a Babel `ConfigItem` | | |
| | `isPluginObj(plugin)` | Check if plugin is a resolved `PluginObj` | | |
| | `getPluginTarget(plugin)` | Extract the plugin target (function or string) | | |
| | `getPluginKey(plugin)` | Extract the key from a resolved plugin | | |
| | `updateTransformOptions(options, visitor)` | Walk and modify plugins/presets/overrides in a config | | |
| trackPerformance({ | |
| enable: "babel-plugin", | |
| strategy: "timing", | |
| frequency: "high", | |
| }); |
TransformerSettings
Settings that persist across transformation passes:
| Field | Type | Default | Description |
|---|---|---|---|
configCallerMixins |
Record<string, string> |
-- | Extra fields added to Babel's caller config |
configDisabledPlugins |
Set<string> |
-- | Plugin keys to remove from the resolved config |
parseDisableOxc |
boolean |
-- | Disable OXC parser |
parseDisableHermes |
boolean |
-- | Disable Hermes parser |
parseFlowDefault |
boolean |
true |
Assume Flow in .js/.jsx files under node_modules |
parseFlowWorkspace |
boolean |
false |
Assume Flow in workspace .js/.jsx files |
parseExtDefault |
SrcSyntax |
"js" |
Syntax for unknown file extensions (unset to skip) |
parseExtAliases |
Record<string, SrcSyntax> |
-- | Map extensions to syntax types (e.g. { ".svg": "jsx" }) |
API Reference
Config
| Function | Description |
|---|---|
getBabelConfig(args, settings?) |
Build a per-file Babel config from cached base config + file-specific settings |
filterConfigPlugins(config, disabled?) |
Resolve presets/overrides and filter plugins by key |
Parsing
| Function | Description |
|---|---|
parseToAst(args) |
Parse with fallback chain: OXC -> Hermes -> Babel |
oxcParseToAst(args, trace?) |
Parse with OXC and convert ESTree to Babel AST |
hermesParseToAst(args) |
Parse with Hermes |
toBabelAST(program, source, isTypeScript?, comments?) |
Convert OXC ESTree to Babel AST |
Transformer
| Function | Description |
|---|---|
makeTransformerArgs(babelArgs, settings?, updateContext?) |
Build TransformerArgs with context and Babel config |
initTransformerContext(filename, settings) |
Initialize file context without building Babel config |
Plugins
| Function | Description |
|---|---|
isConfigItem(plugin) |
Check if plugin is a Babel ConfigItem |
isPluginObj(plugin) |
Check if plugin is a resolved PluginObj |
getPluginTarget(plugin) |
Extract the plugin target (function or string) |
getPluginKey(plugin) |
Extract the key from a resolved plugin |
updateTransformOptions(options, visitor) |
Walk and modify plugins/presets/overrides in a config |
JasonVMo
force-pushed
the
user/jasonvmo/tools-babel
branch
from
1ab7c49 to
d67e42a
Compare
…/jasonvmo/tools-babel
…/jasonvmo/tools-babel
tido64
reviewed
Apr 14, 2026
|
|
||
| const { value, raw } = node; | ||
|
|
||
| if (raw !== undefined) { |
Member
There was a problem hiding this comment.
Suggested change
| if (raw !== undefined) { | |
| if (raw != null) { |
| } else { | ||
| n.type = "OptionalCallExpression"; | ||
| } | ||
| if (!n.optional) n.optional = false; |
Member
There was a problem hiding this comment.
Suggested change
| if (!n.optional) n.optional = false; | |
| if (n.optional == null) n.optional = false; |
Comment on lines
+193
to
+194
| if (lowestOptional < 0) return; | ||
|
|
Member
There was a problem hiding this comment.
Nit: Technically, this isn't necessary as the for-loop already performs the same check
Suggested change
| if (lowestOptional < 0) return; |
| const { key, value } = node; | ||
| if (!value) return; | ||
|
|
||
| const keyType = key && key.type; |
Member
There was a problem hiding this comment.
Suggested change
| const keyType = key && key.type; | |
| const keyType = key?.type; |
| node.type = "ClassPrivateMethod"; | ||
| if (keyType === "PrivateIdentifier") convertPrivateIdentifierToName(key); | ||
| if (node.kind === "get" || node.kind === "set") { | ||
| if (node.computed === undefined) node.computed = false; |
Member
There was a problem hiding this comment.
Suggested change
| if (node.computed === undefined) node.computed = false; | |
| if (node.computed == null) node.computed = false; |
| parseExtAliases, | ||
| parseExtDefault = "js", | ||
| } = settings; | ||
| const isNodeModule = filename.includes("node_modules"); |
Member
There was a problem hiding this comment.
We should also include separators to avoid false positives
Suggested change
| const isNodeModule = filename.includes("node_modules"); | |
| const isNodeModule = /[/\\]node_modules[/\\]/.test(filename); |
Comment on lines
+51
to
+52
| const isTypeScript = | ||
| context.srcSyntax === "ts" || context.srcSyntax === "tsx"; |
Member
There was a problem hiding this comment.
We should move this before oxcResult so we don't have to check twice.
| } | ||
| const result: T[] = []; | ||
| for (let i = 0; i < base.length; i++) { | ||
| const entry = i in updates ? updates[i] : base[i]; |
Member
There was a problem hiding this comment.
Should we be using Object.hasOwn here to avoid issues related to inheritance?
Suggested change
| const entry = i in updates ? updates[i] : base[i]; | |
| const entry = Object.hasOwn(updates, i) ? updates[i] : base[i]; |
Comment on lines
+84
to
+88
| /** disable the oxc parser */ | ||
| parseDisableOxc?: boolean; | ||
|
|
||
| /** disable the hermes parser */ | ||
| parseDisableHermes?: boolean; |
Member
There was a problem hiding this comment.
These are awkwardly named, can we change them?
Suggested change
| /** disable the oxc parser */ | |
| parseDisableOxc?: boolean; | |
| /** disable the hermes parser */ | |
| parseDisableHermes?: boolean; | |
| /** disable the oxc parser */ | |
| parseOxcDisabled?: boolean; | |
| /** disable the hermes parser */ | |
| parseHermesDisabled?: boolean; |
Or even invert the names?
| "project": [ | ||
| "src/**/*.{js,ts,tsx}" | ||
| "src/**/*.{js,ts,tsx}", | ||
| "test/**/*.{js,ts,tsx}" |
Member
There was a problem hiding this comment.
Is this one necessary? It seems to create more warnings:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
NOTE: this currently includes the tools-performance change as it depends on that change. Ignore those files here.
Description
This adds a tools project for dealing with babel with regards to react-native transformations. This builds upon some of the work from the metro-transformer-oxc package as well as some of the work I was looking at for using native tools for transformation.
This package has tools that deal with babel configuration and parsing.
Babel Configuration
Several utilities are provided here:
@react-native/metro-babel-transformer, which is the standard upstream babel transformer for react-native.Babel Parsing
Parsing is one of the most time consuming and memory intensive parts of the transformation process. There are faster parsers but they generally produce estree ASTs rather than babel-ASTs. The current metro-transformer-oxc uses a utility estree-to-babel to convert the AST, which mostly works, but when timing the performance it ends up being almost as slow as babel parsing.
The parsing in here:
The tests are fairly wordy for output but this is useful for allowing tools like Claude to gain information about what is happening and what the differences are.