feat: allow to specify JSX Runtime for @babel/preset-react`

Author: tjzel

docs/pages/build.md

@@ -139,7 +139,7 @@ yarn add --dev react-native-builder-bob
 
    > Note: If you enable Codegen generated code shipping, React Native won't build the scaffold code automatically when you build your test app. You need to rebuild the codegen scaffold code manually each time you make changes to your spec. If you want to automate this process, you can create a new project with `create-react-native-library` and inspect the example app.
 
-   ##### Opting out of Codegen shipping __(not recommended)__
+   ##### Opting out of Codegen shipping **(not recommended)**
 
    If you have a reason to not ship Codegen generated scaffold code with your library, you need to remove the [codegen target](#codegen) and add `package.json` to your `exports` field. Otherwise, React Native Codegen will skip spec generation for your library when your library is consumed as an NPM library. You can find the related issue [here](https://github.com/callstack/react-native-builder-bob/issues/637).
 
@@ -238,6 +238,10 @@ Example:
 ["module", { "esm": true, "sourceMaps": false }]
 ```
 
+##### `jsxRuntime`
+
+Explicitly set your [runtime](https://babeljs.io/docs/babel-preset-react#runtime). Defaults to `automatic`.
+
 #### `typescript`
 
 Enable generating type definitions with `tsc` if your source code is written in [TypeScript](http://www.typescriptlang.org/).

packages/react-native-builder-bob/babel-preset.js

@@ -37,7 +37,7 @@ module.exports = function (api, options, cwd) {
       [
         require.resolve('@babel/preset-react'),
         {
-          runtime: 'automatic',
+          runtime: options.jsxRuntime || 'automatic',
         },
       ],
       require.resolve('@babel/preset-typescript'),

packages/react-native-builder-bob/src/utils/compile.ts

@@ -13,6 +13,7 @@ type Options = Input & {
   copyFlow?: boolean;
   modules: 'commonjs' | 'preserve';
   exclude: string;
+  jsxRuntime?: 'automatic' | 'classic';
 };
 
 const sourceExt = /\.([cm])?[jt]sx?$/;
@@ -29,6 +30,7 @@ export default async function compile({
   copyFlow,
   sourceMaps = true,
   report,
+  jsxRuntime = 'automatic',
 }: Options) {
   const files = glob.sync('**/*', {
     cwd: source,
@@ -113,6 +115,7 @@ export default async function compile({
                       // If a file is explicitly marked as ESM, then preserve the syntax
                       /\.m[jt]s$/.test(filepath) ? 'preserve' : modules,
                     esm,
+                    jsxRuntime,
                   },
                 ],
               ],