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.
callstack · Jul 26, 2024 · 3a4e724 · 3a4e724
1 parent 5b45554
commit 3a4e724
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 43 deletions.
diff --git a/packages/create-react-native-library/src/index.ts b/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,
     });
   }

diff --git a/packages/create-react-native-library/src/utils/generateExampleApp.ts b/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') {

diff --git a/packages/create-react-native-library/templates/common/babel.config.js b/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' }],
+  ],
 };
diff --git a/packages/create-react-native-library/templates/expo-library/example/babel.config.js b/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),
+              },
+            },
+          ],
+        ],
+      },
     ],
   };
 };
diff --git a/packages/create-react-native-library/templates/native-common-example/example/babel.config.js b/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),
+            },
+          },
+        ],
+      ],
+    },
   ],
 };
diff --git a/packages/react-native-builder-bob/babel-preset.js b/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'),
         {

diff --git a/packages/react-native-builder-bob/package.json b/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",

diff --git a/yarn.lock b/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