feat: use the bob preset for the library during dev (#599)

Previously the React Native Babel preset was being used t compile the
library code as well. However, this preset differs from the preset used
to publish the library which can introduce inconsistencies.

For example, Metro compiles modules in loose mode which can hide strict
mode errors during dev, but they'll surface when consumer uses the
library. With this change, we make sure that the same preset is used for
dev to avoid the inconsistency.


It also adds a babel plugin to explicitly add `use strict` - as Metro
doesn't use strict mode for ESM code which is not spec-compliant, and
the behavior differs from the CommonJS build where we add `use strict`
during publish.

Author: satya164

packages/create-react-native-library/src/index.ts

@@ -743,6 +743,7 @@ async function create(_argv: yargs.Arguments<any>) {
       dest: folder,
       arch,
       project: options.project,
+      bobVersion,
       reactNativeVersion,
     });
   }

packages/create-react-native-library/src/utils/generateExampleApp.ts

@@ -35,10 +35,6 @@ const PACKAGES_TO_REMOVE = [
   'typescript',
 ];
 
-const PACKAGES_TO_ADD_DEV = {
-  'babel-plugin-module-resolver': '^5.0.0',
-};
-
 const PACKAGES_TO_ADD_WEB = {
   '@expo/metro-runtime': '~3.2.1',
   'react-dom': '18.2.0',
@@ -50,6 +46,7 @@ export default async function generateExampleApp({
   dest,
   arch,
   project,
+  bobVersion,
   reactNativeVersion = 'latest',
 }: {
   type: ExampleType;
@@ -60,6 +57,7 @@ export default async function generateExampleApp({
     name: string;
     package: string;
   };
+  bobVersion: string;
   reactNativeVersion?: string;
 }) {
   const directory = path.join(dest, 'example');
@@ -188,6 +186,11 @@ export default async function generateExampleApp({
     delete devDependencies[name];
   });
 
+  const PACKAGES_TO_ADD_DEV = {
+    'babel-plugin-module-resolver': '^5.0.0',
+    'react-native-builder-bob': `^${bobVersion}`,
+  };
+
   Object.assign(devDependencies, PACKAGES_TO_ADD_DEV);
 
   if (type === 'expo') {

packages/create-react-native-library/templates/common/babel.config.js

@@ -1,3 +1,5 @@
 module.exports = {
-  presets: ['module:@react-native/babel-preset'],
+  presets: [
+    ['module:react-native-builder-bob/babel-preset', { modules: 'commonjs' }],
+  ],
 };

packages/create-react-native-library/templates/expo-library/example/babel.config.js

@@ -1,22 +1,40 @@
 const path = require('path');
 const pak = require('../package.json');
 
+const root = path.resolve(__dirname, '..');
+
 module.exports = function (api) {
   api.cache(true);
 
   return {
-    presets: ['babel-preset-expo'],
-    plugins: [
-      [
-        'module-resolver',
-        {
-          extensions: ['.tsx', '.ts', '.js', '.json'],
-          alias: {
-            // For development, we want to alias the library to the source
-            [pak.name]: path.join(__dirname, '..', pak.source),
-          },
-        },
-      ],
+    overrides: [
+      {
+        exclude: path.join(root, 'src'),
+        presets: ['babel-preset-expo'],
+      },
+      {
+        include: path.join(root, 'src'),
+        presets: [
+          [
+            'module:react-native-builder-bob/babel-preset',
+            { modules: 'commonjs' },
+          ],
+        ],
+      },
+      {
+        exclude: /\/node_modules\//,
+        plugins: [
+          [
+            'module-resolver',
+            {
+              extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
+              alias: {
+                [pak.name]: path.join(root, pak.source),
+              },
+            },
+          ],
+        ],
+      },
     ],
   };
 };

packages/create-react-native-library/templates/native-common-example/example/babel.config.js

@@ -1,17 +1,36 @@
 const path = require('path');
 const pak = require('../package.json');
 
+const root = path.resolve(__dirname, '..');
+
 module.exports = {
-  presets: ['module:@react-native/babel-preset'],
-  plugins: [
-    [
-      'module-resolver',
-      {
-        extensions: ['.tsx', '.ts', '.js', '.json'],
-        alias: {
-          [pak.name]: path.join(__dirname, '..', pak.source),
-        },
-      },
-    ],
+  overrides: [
+    {
+      exclude: path.join(root, 'src'),
+      presets: ['module:@react-native/babel-preset'],
+    },
+    {
+      include: path.join(root, 'src'),
+      presets: [
+        [
+          'module:react-native-builder-bob/babel-preset',
+          { modules: 'commonjs' },
+        ],
+      ],
+    },
+    {
+      exclude: /\/node_modules\//,
+      plugins: [
+        [
+          'module-resolver',
+          {
+            extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
+            alias: {
+              [pak.name]: path.join(root, pak.source),
+            },
+          },
+        ],
+      ],
+    },
   ],
 };

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

@@ -44,6 +44,7 @@ module.exports = function (api, options, cwd) {
       require.resolve('@babel/preset-flow'),
     ],
     plugins: [
+      require.resolve('@babel/plugin-transform-strict-mode'),
       [
         require.resolve('./lib/babel'),
         {

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

@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.18.5",
-    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-transform-strict-mode": "^7.24.7",
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-flow": "^7.17.12",
     "@babel/preset-react": "^7.17.12",

yarn.lock

@@ -197,7 +197,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.22.11, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.22.5":
+"@babel/helper-create-class-features-plugin@npm:^7.22.11, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.22.5":
   version: 7.22.15
   resolution: "@babel/helper-create-class-features-plugin@npm:7.22.15"
   dependencies:
@@ -590,18 +590,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-class-properties@npm:^7.17.12":
-  version: 7.18.6
-  resolution: "@babel/plugin-proposal-class-properties@npm:7.18.6"
-  dependencies:
-    "@babel/helper-create-class-features-plugin": ^7.18.6
-    "@babel/helper-plugin-utils": ^7.18.6
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 49a78a2773ec0db56e915d9797e44fd079ab8a9b2e1716e0df07c92532f2c65d76aeda9543883916b8e0ff13606afeffa67c5b93d05b607bc87653ad18a91422
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-proposal-private-property-in-object@npm:7.21.0-placeholder-for-preset-env.2":
   version: 7.21.0-placeholder-for-preset-env.2
   resolution: "@babel/plugin-proposal-private-property-in-object@npm:7.21.0-placeholder-for-preset-env.2"
@@ -1448,6 +1436,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-strict-mode@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/plugin-transform-strict-mode@npm:7.24.7"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.24.7
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 514e847f6ba4bac825eb0e9ae697c6ae632041d887f6cc1167f9cb989924b2f8735ec040607a02083c3a03e62f1c8973ba59a2b106ca3b55c2e2c416b51e2372
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-template-literals@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-transform-template-literals@npm:7.22.5"
@@ -12827,7 +12826,7 @@ __metadata:
   dependencies:
     "@babel/cli": ^7.17.10
     "@babel/core": ^7.18.5
-    "@babel/plugin-proposal-class-properties": ^7.17.12
+    "@babel/plugin-transform-strict-mode": ^7.24.7
     "@babel/preset-env": ^7.18.2
     "@babel/preset-flow": ^7.17.12
     "@babel/preset-react": ^7.17.12