feat: add helpers for getting RN path, version and platforms to simplify bundler plugin config

Author: thymikee

packages/config/src/lib/config.ts

@@ -10,6 +10,9 @@ export type PluginOutput = {
 export type PluginApi = {
   registerCommand: (command: CommandType) => void;
   getProjectRoot: () => string;
+  getReactNativeVersion: () => string;
+  getReactNativePath: () => string;
+  getPlatforms: () => { [platform: string]: object };
 };
 
 type PluginType = (args: PluginApi) => PluginOutput;
@@ -30,6 +33,8 @@ type CommandType = {
 
 type ConfigType = {
   root?: string;
+  reactNativeVersion?: string;
+  reactNativePath?: string;
   plugins?: Record<string, PluginType>;
   platforms?: Record<string, PluginType>;
   commands?: Array<CommandType>;
@@ -41,13 +46,13 @@ type ConfigOutput = {
 
 const extensions = ['.js', '.ts', '.mjs'];
 
-const importUp = async <T>(dir: string, name: string): Promise<T> => {
+const importUp = async (dir: string, name: string): Promise<ConfigType> => {
   const filePath = path.join(dir, name);
 
   for (const ext of extensions) {
     const filePathWithExt = `${filePath}${ext}`;
     if (fs.existsSync(filePathWithExt)) {
-      let config: T;
+      let config: ConfigType;
 
       if (ext === '.mjs') {
         config = await import(filePathWithExt).then((module) => module.default);
@@ -58,6 +63,12 @@ const importUp = async <T>(dir: string, name: string): Promise<T> => {
 
       return {
         root: dir,
+        get reactNativePath() {
+          return resolveReactNativePath(config.root || dir);
+        },
+        get reactNativeVersion() {
+          return getReactNativeVersion(config.root || dir);
+        },
         ...config,
       };
     }
@@ -74,7 +85,7 @@ const importUp = async <T>(dir: string, name: string): Promise<T> => {
 export async function getConfig(
   dir: string = process.cwd()
 ): Promise<ConfigOutput> {
-  const config = await importUp<ConfigType>(dir, 'rnef.config');
+  const config = await importUp(dir, 'rnef.config');
 
   if (!config.root) {
     config.root = process.cwd();
@@ -85,6 +96,9 @@ export async function getConfig(
       config.commands = [...(config.commands || []), command];
     },
     getProjectRoot: () => config.root as string,
+    getReactNativeVersion: () => config.reactNativeVersion as string,
+    getReactNativePath: () => config.reactNativePath as string,
+    getPlatforms: () => config.platforms as { [platform: string]: object },
   };
 
   if (config.plugins) {
@@ -107,3 +121,26 @@ export async function getConfig(
 
   return outputConfig;
 }
+
+function getReactNativeVersion(root: string) {
+  try {
+    const require = createRequire(import.meta.url);
+    return JSON.parse(
+      fs.readFileSync(
+        path.join(
+          require.resolve('react-native', { paths: [root] }),
+          '..',
+          'package.json'
+        ),
+        'utf-8'
+      )
+    ).version;
+  } catch {
+    return 'unknown';
+  }
+}
+
+function resolveReactNativePath(root: string) {
+  const require = createRequire(import.meta.url);
+  return path.join(require.resolve('react-native', { paths: [root] }), '..');
+}

packages/plugin-metro/src/__tests__/pluginMetro.test.ts

@@ -1,17 +1,16 @@
 import { pluginMetro } from '../lib/pluginMetro.js';
 import { expect, test } from 'vitest';
 
-const pluginApi = { registerCommand: vi.fn() };
+const pluginApi = {
+  registerCommand: vi.fn(),
+  getProjectRoot: vi.fn(),
+  getReactNativePath: vi.fn(),
+  getReactNativeVersion: vi.fn(),
+  getPlatforms: vi.fn(),
+};
 
 test('plugin is called with correct arguments and returns its name and description', () => {
-  const plugin = pluginMetro({
-    root: '/',
-    reactNativeVersion: '0.77.0-rc.2',
-    reactNativePath: '/path/to/react-native',
-    platforms: {
-      android: {},
-    },
-  })(pluginApi);
+  const plugin = pluginMetro()(pluginApi);
 
   expect(plugin).toMatchObject({
     name: 'plugin-metro',

packages/plugin-metro/src/lib/pluginMetro.ts

@@ -7,13 +7,10 @@ import {
 import { logger } from '@callstack/rnef-tools';
 
 type PluginConfig = {
-  root?: string;
-  reactNativeVersion: string;
-  reactNativePath: string;
-  platforms: {
-    [platformName: string]: {
-      npmPackageName?: string;
-    };
+  reactNativeVersion?: string;
+  reactNativePath?: string;
+  platforms?: {
+    [platformName: string]: object;
   };
 };
 
@@ -60,15 +57,28 @@ type BundleCommandArgs = {
 };
 
 export const pluginMetro =
-  (pluginConfig: PluginConfig) =>
+  (pluginConfig: PluginConfig = {}) =>
   (api: PluginApi): PluginOutput => {
     api.registerCommand({
       name: 'start',
       description: 'Starts Metro dev server.',
       // @ts-expect-error todo fix this
       action: (args: StartCommandArgs) => {
         const root = api.getProjectRoot();
-        startCommand.func(undefined, { root, ...pluginConfig }, args);
+        const reactNativeVersion = api.getReactNativeVersion();
+        const reactNativePath = api.getReactNativePath();
+        const platforms = api.getPlatforms();
+        startCommand.func(
+          undefined,
+          {
+            root,
+            reactNativeVersion,
+            reactNativePath,
+            platforms,
+            ...pluginConfig,
+          },
+          args
+        );
       },
       options: startCommand.options,
     });
@@ -86,7 +96,20 @@ export const pluginMetro =
           process.exit(1);
         }
         const root = api.getProjectRoot();
-        bundleCommand.func(undefined, { root, ...pluginConfig }, args);
+        const reactNativeVersion = api.getReactNativeVersion();
+        const reactNativePath = api.getReactNativePath();
+        const platforms = api.getPlatforms();
+        bundleCommand.func(
+          undefined,
+          {
+            root,
+            reactNativeVersion,
+            reactNativePath,
+            platforms,
+            ...pluginConfig,
+          },
+          args
+        );
       },
       options: bundleCommand.options,
     });

packages/plugin-repack/src/lib/pluginRepack.ts

@@ -3,12 +3,8 @@ import commands from '@callstack/repack/commands/rspack';
 import { logger } from '@callstack/rnef-tools';
 
 type PluginConfig = {
-  root?: string;
-  reactNativePath?: string;
-  platforms: {
-    [key: string]: {
-      npmPackageName?: string;
-    };
+  platforms?: {
+    [key: string]: object;
   };
 };
 
@@ -24,14 +20,19 @@ const bundleCommand = commands.find(
 );
 
 export const pluginRepack =
-  (pluginConfig: PluginConfig) =>
+  (pluginConfig: PluginConfig = {}) =>
   (api: PluginApi): PluginOutput => {
     api.registerCommand({
       name: 'start',
       description: 'Starts Re.Pack dev server.',
       action: (args) => {
         const root = api.getProjectRoot();
-        startCommand.func(undefined, { root, ...pluginConfig }, args);
+        const platforms = api.getPlatforms();
+        startCommand.func(
+          undefined,
+          { root, platforms, ...pluginConfig },
+          args
+        );
       },
       options: startCommand.options,
     });
@@ -48,7 +49,12 @@ export const pluginRepack =
           process.exit(1);
         }
         const root = api.getProjectRoot();
-        bundleCommand.func(undefined, { root, ...pluginConfig }, args);
+        const platforms = api.getPlatforms();
+        bundleCommand.func(
+          undefined,
+          { root, platforms, ...pluginConfig },
+          args
+        );
       },
       options: bundleCommand.options,
     });