react-native-monorepo-config 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Krister Kari
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,76 @@
+# react-native-monorepo-config
+
+Helper to configure Metro for a React Native app in a monorepo.
+
+## Why
+
+[Metro](https://metrobundler.dev/) ([React Native](https://reactnative.dev)'s bundler) doesn't work well with monorepos out of the box. This package is intended to make the configuration easier.
+
+## Installation
+
+```bash
+yarn add -D react-native-monorepo-config
+```
+
+## Usage
+
+Let's consider the following monorepo structure:
+
+```sh
+my-monorepo
+├── apps
+│   └── my-app
+└── packages
+    ├── a/
+    └── b/
+```
+
+Here, `my-app` is a React Native app, and `a` and `b` are libraries that are used in the app.
+
+To configure Metro for `my-app`, you can create a `metro.config.js` file in the `my-app` directory with the following content:
+
+```js
+const { getDefaultConfig } = require("@react-native/metro-config"); // Import from `@expo/metro-config` if using Expo CLI
+const { withMetroConfig } = require("react-native-monorepo-config");
+
+module.exports = withMetroConfig(
+  getDefaultConfig(__dirname), // Metro config to extend
+  {
+    root: path.resolve(__dirname, "../.."), // Path to the monorepo root
+    dirname: __dirname, // Path to the current directory
+  }
+);
+```
+
+It's also recommended to disable hoisting for the React Native app's dependencies to avoid issues.
+
+For Yarn 4, hoisting can be disabled by setting `nmHoistingLimits: 'workspaces'` in `.yarnrc.yml`. See [Yarn documentation](https://yarnpkg.com/configuration/yarnrc#nmHoistingLimits) for more details.
+
+If you want to customize the returned Metro config, remember to merge the returned config with your custom config. For example:
+
+```js
+const monoRepoConfig = withMetroConfig(getDefaultConfig(__dirname), {
+  root: path.resolve(__dirname, "../.."),
+  dirname: __dirname,
+});
+
+module.exports = {
+  ...monoRepoConfig,
+
+  resolver: {
+    ...monoRepoConfig.resolver,
+
+    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
+    sourceExts: [...resolver.sourceExts, "svg"],
+  },
+};
+```
+
+## How it works
+
+This configuration will setup a few things:
+
+- Configure Metro to watch for changes in other packages in the monorepo instead of just the current package. This may slow down the bundling process, in large monorepos. In that case, you can override `watchFolders` to add specific folders to watch instead.
+- Block packages defined in `peerDependencies` of other packages in the monorepo to avoid duplicate versions from being loaded. Loading duplicate versions of some packages such as `react` can cause issues. Make sure to specify `peerDependencies` for your packages appropriately.
+- If the packages defined in `peerDependencies` have been hoisted to the monorepo root, point Metro to them so they can be found.
+- Configure Metro's resolve to prioritize `package.json#source` or the `source` condition in `package.json#exports` so that the app can import source code directly from other packages in the monorepo. To utilize this, make sure to add `"source": "src/index.ts"` or `"exports": { ".": { "source": "./src/index.ts" } }` to the `package.json` of the packages you want to import from.

package/index.js

@@ -0,0 +1,113 @@
+import escape from 'escape-string-regexp';
+import glob from 'fast-glob';
+import fs from 'node:fs';
+import path from 'node:path';
+
+/**
+ * Configure Metro for a React Native app in a monorepo.
+ *
+ * @param {import('metro-config').MetroConfig} baseConfig Base Metro config to extend.
+ * @param {string} options.root Root directory path of the monorepo.
+ * @param {string} options.dirname Directory path of the current package.
+ *
+ * @returns {import('metro-config').MetroConfig}
+ */
+export function withMetroConfig(baseConfig, { root, dirname }) {
+  const pkg = JSON.parse(
+    fs.readFileSync(path.join(root, 'package.json'), 'utf8')
+  );
+
+  if (pkg.workspaces == null) {
+    throw new Error(
+      `No 'workspaces' field found in the 'package.json' at '${root}'.`
+    );
+  }
+
+  // Get the list of monorepo packages except current package
+  const packages = (pkg.workspaces.packages || pkg.workspaces)
+    .flatMap((pattern) =>
+      glob.sync(pattern, {
+        cwd: root,
+        onlyDirectories: true,
+        ignore: [`**/node_modules`, `**/.git`, `**/.yarn`],
+      })
+    )
+    .filter((p) => {
+      const dir = path.join(root, p);
+
+      // Ignore current package
+      if (path.relative(dir, dirname) === '') {
+        return false;
+      }
+
+      // Ignore packages that don't have a package.json
+      return fs.existsSync(path.join(dir, 'package.json'));
+    });
+
+  // Get the list of peer dependencies for all packages in the monorepo
+  const peers = packages
+    .flatMap((it) => {
+      const pak = JSON.parse(
+        fs.readFileSync(path.join(root, it, 'package.json'), 'utf8')
+      );
+
+      return pak.peerDependencies ? Object.keys(pak.peerDependencies) : [];
+    })
+    .sort()
+    .filter(
+      (m, i, self) => self.lastIndexOf(m) === i // Remove duplicates
+    );
+
+  // We need to exclude the peerDependencies we've collected in packages' node_modules
+  // Otherwise duplicate versions of the same package will be loaded
+  const blockList = new RegExp(
+    '(' +
+      packages
+        .flatMap((it) =>
+          peers.map((m) => `^${escape(path.join(it, 'node_modules', m))}\\/.*$`)
+        )
+        .join('|') +
+      ')$'
+  );
+
+  // When we import a package from the monorepo, metro won't be able to find their deps if they are hoisted
+  // We need to specify them in `extraNodeModules` to tell metro where to find them
+  const extraNodeModules = peers.reduce((acc, name) => {
+    if (fs.existsSync(path.join(root, 'node_modules', name))) {
+      acc[name] = path.join(root, 'node_modules', name);
+    }
+
+    return acc;
+  }, {});
+
+  /** @type {import('metro-config').MetroConfig} */
+  return {
+    ...baseConfig,
+
+    projectRoot: dirname,
+
+    // We need to watch the root of the monorepo
+    // This lets Metro find the monorepo packages automatically using haste
+    // This also lets us import modules from monorepo root
+    watchFolders: [root],
+
+    resolver: {
+      ...baseConfig.resolver,
+
+      blockList,
+      extraNodeModules,
+      resolveRequest: (context, realModuleName, platform) => {
+        // Prefer the source field for monorepo packages to consume source code
+        if (packages.includes(realModuleName)) {
+          context.mainFields = ['source', ...context.mainFields];
+          context.unstable_conditionNames = [
+            'source',
+            ...context.unstable_conditionNames,
+          ];
+        }
+
+        return context.resolveRequest(context, realModuleName, platform);
+      },
+    },
+  };
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "react-native-monorepo-config",
+  "version": "0.1.0",
+  "description": "Configure Metro for a React Native app in a monorepo",
+  "repository": "https://github.com/satya164/react-native-monorepo-config",
+  "author": "Satyajit Sahoo <satyajit.happy@gmail.com> (https://github.com/satya164/)",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "type": "module",
+  "main": "index.js",
+  "files": [
+    "index.js"
+  ],
+  "dependencies": {
+    "escape-string-regexp": "^5.0.0",
+    "fast-glob": "^3.3.3"
+  },
+  "devDependencies": {
+    "@release-it/conventional-changelog": "^10.0.1",
+    "prettier": "^3.5.3",
+    "release-it": "^19.0.1"
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "tabWidth": 2,
+    "useTabs": false,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "conventionalcommits"
+        },
+        "infile": "CHANGELOG.md"
+      }
+    }
+  }
+}