refactor: move to react-native-monorepo-config

Author: satya164

docs/pages/faq.md

@@ -73,9 +73,7 @@ There are 2 parts to this process.
 
    The JavaScript (or TypeScript) source code is aliased to be used by the example app. This makes it so that when you import from `'your-library-name'`, it imports the source code directly and avoids having to rebuild the library for JavaScript only changes. We configure several tools to make this work:
 
-   - [Babel](https://babeljs.io) is configured to use the alias in `example/babel.config.js` using [babel-plugin-module-resolver](https://github.com/tleunen/babel-plugin-module-resolver). This transforms the imports to point to the source code instead.
-   - [Metro](https://facebook.github.io/metro/) is configured to allow importing from outside of the `example` directory by configuring `watchFolders`, and to use the appropriate peer dependencies. This configuration exists in the `example/metro.config.js` file.
-   - [Webpack](https://webpack.js.org/) is configured to compile the library source code when running on the Web. This configuration exists in the `example/webpack.config.js` file.
+   - [Metro](https://facebook.github.io/metro/) is configured to allow importing from outside of the `example` directory by configuring `watchFolders`, to use the appropriate peer dependencies, and to import source code of the library in the example. This configuration exists in the `example/metro.config.js` file.
    - [TypeScript](https://www.typescriptlang.org/) is configured to use the source code for type checking by using the `paths` property under `compilerOptions`. This configuration exists in the `tsconfig.json` file at the root.
 
 2. **Linking the native code**

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

@@ -1,7 +1,6 @@
 const path = require('path');
 const { getDefaultConfig } = require('@react-native/metro-config');
 const { getConfig } = require('react-native-builder-bob/metro-config');
-const pkg = require('../package.json');
 
 const root = path.resolve(__dirname, '..');
 
@@ -13,6 +12,5 @@ const root = path.resolve(__dirname, '..');
  */
 module.exports = getConfig(getDefaultConfig(__dirname), {
   root,
-  pkg,
   project: __dirname,
 });

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

@@ -1,7 +1,6 @@
 const path = require('path');
 const { getDefaultConfig } = require('@expo/metro-config');
 const { getConfig } = require('react-native-builder-bob/metro-config');
-const pkg = require('../package.json');
 
 const root = path.resolve(__dirname, '..');
 
@@ -13,6 +12,5 @@ const root = path.resolve(__dirname, '..');
  */
 module.exports = getConfig(getDefaultConfig(__dirname), {
   root,
-  pkg,
   project: __dirname,
 });

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

@@ -14,7 +14,7 @@ const { loadConfig } = require('./lib/utils/loadConfig');
  * @param {object} options.pkg Content of package.json of the library
  * @returns {import('@babel/core').TransformOptions} Babel configuration
  */
-const getConfig = (defaultConfig, { root, pkg }) => {
+const getConfig = (defaultConfig, { root }) => {
   const result = loadConfig(root);
 
   if (result == null) {
@@ -33,20 +33,6 @@ const getConfig = (defaultConfig, { root, pkg }) => {
     ...defaultConfig,
     overrides: [
       ...(defaultConfig.overrides == null ? [] : defaultConfig.overrides),
-      {
-        exclude: /\/node_modules\//,
-        plugins: [
-          [
-            require.resolve('babel-plugin-module-resolver'),
-            {
-              extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
-              alias: {
-                [pkg.name]: path.join(root, pkg.source),
-              },
-            },
-          ],
-        ],
-      },
       {
         include: path.join(root, source),
         presets: [

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

@@ -1,59 +1,17 @@
 /* eslint-disable @typescript-eslint/no-require-imports, import-x/no-commonjs, no-undef */
 
-const path = require('path');
-const escape = require('escape-string-regexp');
-const exclusionList = require('metro-config/src/defaults/exclusionList');
+const { withMetroConfig } = require('react-native-monorepo-config');
 
 /**
  * Get Metro configuration for the example project.
  * This sets up appropriate root and watch folders for the library.
  * It also excludes conflicting modules and aliases them to the correct place.
  *
- * @param {import('metro-config').MetroConfig} defaultConfig Default Metro configuration
+ * @param {import('metro-config').MetroConfig} baseConfig Base Metro configuration
  * @param {object} options Options to customize the configuration
  * @param {string} options.root Root directory of the monorepo
- * @param {object} options.pkg Content of package.json of the library
  * @param {string} options.project Directory containing the example project
  * @returns {import('metro-config').MetroConfig} Metro configuration
  */
-const getConfig = (defaultConfig, { root, pkg, project }) => {
-  const modules = [
-    // AssetsRegistry is used internally by React Native to handle asset imports
-    // This needs to be a singleton so all assets are registered to a single registry
-    '@react-native/assets-registry',
-    ...Object.keys({ ...pkg.peerDependencies }),
-  ];
-
-  /**
-   * Metro configuration
-   * https://facebook.github.io/metro/docs/configuration
-   *
-   * @type {import('metro-config').MetroConfig}
-   */
-  return {
-    ...defaultConfig,
-
-    projectRoot: project,
-    watchFolders: [root],
-
-    // We need to make sure that only one version is loaded for peerDependencies
-    // So we block them at the root, and alias them to the versions in example project's node_modules
-    resolver: {
-      ...defaultConfig.resolver,
-
-      blacklistRE: exclusionList(
-        modules.map(
-          (m) =>
-            new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
-        )
-      ),
-
-      extraNodeModules: modules.reduce((acc, name) => {
-        acc[name] = path.join(project, 'node_modules', name);
-        return acc;
-      }, {}),
-    },
-  };
-};
-
-exports.getConfig = getConfig;
+exports.getConfig = (baseConfig, { root, project }) =>
+  withMetroConfig(baseConfig, { root, dirname: project });

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

@@ -47,7 +47,6 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "arktype": "^2.1.15",
-    "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-syntax-hermes-parser": "^0.28.0",
     "browserslist": "^4.20.4",
     "cross-spawn": "^7.0.3",

yarn.lock

@@ -4674,19 +4674,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-module-resolver@npm:^5.0.2":
-  version: 5.0.2
-  resolution: "babel-plugin-module-resolver@npm:5.0.2"
-  dependencies:
-    find-babel-config: ^2.1.1
-    glob: ^9.3.3
-    pkg-up: ^3.1.0
-    reselect: ^4.1.7
-    resolve: ^1.22.8
-  checksum: f1d198acbbbd0b76c9c0c4aacbf9f1ef90f8d36b3d5209d9e7a75cadee2113a73711550ebddeb9464d143b71df19adc75e165dff99ada2614d7ea333affe3b5a
-  languageName: node
-  linkType: hard
-
 "babel-plugin-polyfill-corejs2@npm:^0.4.10":
   version: 0.4.11
   resolution: "babel-plugin-polyfill-corejs2@npm:0.4.11"
@@ -7465,16 +7452,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-babel-config@npm:^2.1.1":
-  version: 2.1.1
-  resolution: "find-babel-config@npm:2.1.1"
-  dependencies:
-    json5: ^2.2.3
-    path-exists: ^4.0.0
-  checksum: 4be54397339520e0cd49870acb10366684ffc001fd0b7bffedd0fe9d3e1d82234692d3cb4e5ba95280a35887238ba6f82dc79569a13a3749ae3931c23e0b3a99
-  languageName: node
-  linkType: hard
-
 "find-up@npm:^2.0.0":
   version: 2.1.0
   resolution: "find-up@npm:2.1.0"
@@ -7484,15 +7461,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-up@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "find-up@npm:3.0.0"
-  dependencies:
-    locate-path: ^3.0.0
-  checksum: 38eba3fe7a66e4bc7f0f5a1366dc25508b7cfc349f852640e3678d26ad9a6d7e2c43eff0a472287de4a9753ef58f066a0ea892a256fa3636ad51b3fe1e17fae9
-  languageName: node
-  linkType: hard
-
 "find-up@npm:^4.0.0, find-up@npm:^4.1.0":
   version: 4.1.0
   resolution: "find-up@npm:4.1.0"
@@ -7874,18 +7842,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^9.3.3":
-  version: 9.3.5
-  resolution: "glob@npm:9.3.5"
-  dependencies:
-    fs.realpath: ^1.0.0
-    minimatch: ^8.0.2
-    minipass: ^4.2.4
-    path-scurry: ^1.6.1
-  checksum: 94b093adbc591bc36b582f77927d1fb0dbf3ccc231828512b017601408be98d1fe798fc8c0b19c6f2d1a7660339c3502ce698de475e9d938ccbb69b47b647c84
-  languageName: node
-  linkType: hard
-
 "global-dirs@npm:^0.1.1":
   version: 0.1.1
   resolution: "global-dirs@npm:0.1.1"
@@ -9296,16 +9252,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"locate-path@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "locate-path@npm:3.0.0"
-  dependencies:
-    p-locate: ^3.0.0
-    path-exists: ^3.0.0
-  checksum: 53db3996672f21f8b0bf2a2c645ae2c13ffdae1eeecfcd399a583bce8516c0b88dcb4222ca6efbbbeb6949df7e46860895be2c02e8d3219abd373ace3bfb4e11
-  languageName: node
-  linkType: hard
-
 "locate-path@npm:^5.0.0":
   version: 5.0.0
   resolution: "locate-path@npm:5.0.0"
@@ -10980,15 +10926,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^8.0.2":
-  version: 8.0.4
-  resolution: "minimatch@npm:8.0.4"
-  dependencies:
-    brace-expansion: ^2.0.1
-  checksum: 2e46cffb86bacbc524ad45a6426f338920c529dd13f3a732cc2cf7618988ee1aae88df4ca28983285aca9e0f45222019ac2d14ebd17c1edadd2ee12221ab801a
-  languageName: node
-  linkType: hard
-
 "minimatch@npm:^9.0.0, minimatch@npm:^9.0.1":
   version: 9.0.3
   resolution: "minimatch@npm:9.0.3"
@@ -11095,13 +11032,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minipass@npm:^4.2.4":
-  version: 4.2.8
-  resolution: "minipass@npm:4.2.8"
-  checksum: 7f4914d5295a9a30807cae5227a37a926e6d910c03f315930fde52332cf0575dfbc20295318f91f0baf0e6bb11a6f668e30cde8027dea7a11b9d159867a3c830
-  languageName: node
-  linkType: hard
-
 "minipass@npm:^5.0.0":
   version: 5.0.0
   resolution: "minipass@npm:5.0.0"
@@ -11754,7 +11684,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-limit@npm:^2.0.0, p-limit@npm:^2.2.0":
+"p-limit@npm:^2.2.0":
   version: 2.3.0
   resolution: "p-limit@npm:2.3.0"
   dependencies:
@@ -11781,15 +11711,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-locate@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "p-locate@npm:3.0.0"
-  dependencies:
-    p-limit: ^2.0.0
-  checksum: 83991734a9854a05fe9dbb29f707ea8a0599391f52daac32b86f08e21415e857ffa60f0e120bfe7ce0cc4faf9274a50239c7895fc0d0579d08411e513b83a4ae
-  languageName: node
-  linkType: hard
-
 "p-locate@npm:^4.1.0":
   version: 4.1.0
   resolution: "p-locate@npm:4.1.0"
@@ -12042,7 +11963,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-scurry@npm:^1.10.1, path-scurry@npm:^1.6.1":
+"path-scurry@npm:^1.10.1":
   version: 1.11.1
   resolution: "path-scurry@npm:1.11.1"
   dependencies:
@@ -12168,15 +12089,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pkg-up@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "pkg-up@npm:3.1.0"
-  dependencies:
-    find-up: ^3.0.0
-  checksum: 5bac346b7c7c903613c057ae3ab722f320716199d753f4a7d053d38f2b5955460f3e6ab73b4762c62fd3e947f58e04f1343e92089e7bb6091c90877406fcd8c8
-  languageName: node
-  linkType: hard
-
 "postcss-selector-parser@npm:^6.0.10":
   version: 6.0.13
   resolution: "postcss-selector-parser@npm:6.0.13"
@@ -12425,7 +12337,6 @@ __metadata:
     "@types/which": ^2.0.1
     "@types/yargs": ^17.0.10
     arktype: ^2.1.15
-    babel-plugin-module-resolver: ^5.0.2
     babel-plugin-syntax-hermes-parser: ^0.28.0
     browserslist: ^4.20.4
     concurrently: ^7.2.2
@@ -12783,13 +12694,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"reselect@npm:^4.1.7":
-  version: 4.1.8
-  resolution: "reselect@npm:4.1.8"
-  checksum: a4ac87cedab198769a29be92bc221c32da76cfdad6911eda67b4d3e7136dca86208c3b210e31632eae31ebd2cded18596f0dd230d3ccc9e978df22f233b5583e
-  languageName: node
-  linkType: hard
-
 "resolve-cwd@npm:^3.0.0":
   version: 3.0.0
   resolution: "resolve-cwd@npm:3.0.0"
@@ -12836,7 +12740,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.10.0, resolve@npm:^1.14.2, resolve@npm:^1.22.4, resolve@npm:^1.22.8":
+"resolve@npm:^1.10.0, resolve@npm:^1.14.2, resolve@npm:^1.22.4":
   version: 1.22.8
   resolution: "resolve@npm:1.22.8"
   dependencies:
@@ -12849,7 +12753,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.4#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.8#~builtin<compat/resolve>":
+"resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.4#~builtin<compat/resolve>":
   version: 1.22.8
   resolution: "resolve@patch:resolve@npm%3A1.22.8#~builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
   dependencies: