Revert "fix: skip compiling fabric view as react native freaks out (#720)"

This reverts commit 2ec645b.

Author: satya164

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

@@ -61,17 +61,7 @@ const getConfig = (defaultConfig, { root, pkg }) => {
       },
       {
         include: path.join(root, src),
-        presets: [
-          [
-            require.resolve('./babel-preset'),
-            {
-              // Let the app's preset handle the commonjs transform
-              // Otherwise this causes issues with `@react-native/babel-plugin-codegen`
-              // Codegen generates `export` statements in wrong places causing syntax error
-              supportsStaticESM: true,
-            },
-          ],
-        ],
+        presets: [require.resolve('./babel-preset')],
       },
     ],
   };

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

@@ -4,16 +4,10 @@ const browserslist = require('browserslist');
 
 /**
  * Babel preset for React Native Builder Bob
- *
- * @param {Boolean} options.supportsStaticESM - Whether to preserve ESM imports/exports, defaults to `false`
- * @param {Boolean} options.rewriteImportExtensions - Whether to rewrite import extensions to '.js', defaults to `false`
- * @param {'automatic' | 'classic'} options.jsxRuntime - Which JSX runtime to use, defaults to 'automatic'
  */
 module.exports = function (api, options, cwd) {
   const opt = (name) =>
-    options[name] !== undefined
-      ? options[name]
-      : api.caller((caller) => (caller != null ? caller[name] : undefined));
+    api.caller((caller) => (caller != null ? caller[name] : undefined));
 
   const supportsStaticESM = opt('supportsStaticESM');
   const rewriteImportExtensions = opt('rewriteImportExtensions');
@@ -53,6 +47,7 @@ module.exports = function (api, options, cwd) {
       require.resolve('@babel/preset-flow'),
     ],
     plugins: [
+      require.resolve('@react-native/babel-plugin-codegen'),
       require.resolve('@babel/plugin-transform-strict-mode'),
       [
         require.resolve('./lib/babel'),

packages/react-native-builder-bob/package.json

@@ -51,6 +51,7 @@
     "@babel/preset-flow": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
+    "@react-native/babel-plugin-codegen": "^0.76.3",
     "babel-plugin-module-resolver": "^5.0.2",
     "browserslist": "^4.20.4",
     "cosmiconfig": "^9.0.0",

packages/react-native-builder-bob/src/babel.ts

@@ -6,7 +6,6 @@ import type {
   ExportAllDeclaration,
   ExportNamedDeclaration,
 } from '@babel/types';
-import isFabricComponentFile from './utils/isFabricComponentFile';
 
 type Options = {
   /**
@@ -39,18 +38,17 @@ const isDirectory = (filename: string): boolean => {
   return exists;
 };
 
-const checkExts = (
+const isModule = (
   filename: string,
   extension: string,
-  platforms: string[],
-  callback: (ext: string) => boolean
+  platforms: string[]
 ): boolean => {
   const exts = ['js', 'ts', 'jsx', 'tsx', extension];
 
   return exts.some(
     (ext) =>
-      callback(`${filename}.${ext}`) &&
-      platforms.every((platform) => !callback(`${filename}.${platform}.${ext}`))
+      isFile(`${filename}.${ext}`) &&
+      platforms.every((platform) => !isFile(`${filename}.${platform}.${ext}`))
   );
 };
 
@@ -114,29 +112,22 @@ export default function (
       node.source.value
     );
 
-    // Skip if file is a fabric view
-    if (
-      checkExts(filename, extension, platforms, (f) => isFabricComponentFile(f))
-    ) {
-      return;
-    }
-
     // Replace .ts extension with .js if file with extension is explicitly imported
     if (isFile(filename)) {
       node.source.value = node.source.value.replace(/\.tsx?$/, `.${extension}`);
       return;
     }
 
     // Add extension if .ts file or file with extension exists
-    if (checkExts(filename, extension, platforms, isFile)) {
+    if (isModule(filename, extension, platforms)) {
       node.source.value += `.${extension}`;
       return;
     }
 
     // Expand folder imports to index and add extension
     if (
       isDirectory(filename) &&
-      checkExts(path.join(filename, 'index'), extension, platforms, isFile)
+      isModule(path.join(filename, 'index'), extension, platforms)
     ) {
       node.source.value = node.source.value.replace(
         /\/?$/,

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

@@ -4,7 +4,6 @@ import kleur from 'kleur';
 import * as babel from '@babel/core';
 import glob from 'glob';
 import type { Input } from '../types';
-import isFabricComponentFile from './isFabricComponentFile';
 
 type Options = Input & {
   esm?: boolean;
@@ -96,13 +95,6 @@ export default async function compile({
         return;
       }
 
-      if (isFabricComponentFile(filepath)) {
-        // React Native wants to handle compiling the file for fabric components
-        // So we just copy it over as is
-        fs.copy(filepath, path.join(output, path.relative(source, filepath)));
-        return;
-      }
-
       const content = await fs.readFile(filepath, 'utf-8');
       const result = await babel.transformAsync(content, {
         caller: {