fix: @react-native/* packages misalignment (#501)

* fix: @react-native/* packages misalignemnt

* changeset

* rename

* add types

Author: thymikee

.changeset/free-coats-obey.md

@@ -0,0 +1,5 @@
+---
+'@rnef/plugin-metro': patch
+---
+
+fix: @react-native/\* packages misalignemnt

packages/plugin-metro/package.json

@@ -19,7 +19,6 @@
   },
   "dependencies": {
     "@react-native-community/cli-server-api": "^19.1.0",
-    "@react-native/dev-middleware": "^0.80.1",
     "@rnef/tools": "^0.8.12",
     "metro": "^0.82.2",
     "metro-config": "^0.82.2",
@@ -28,12 +27,9 @@
     "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@react-native/community-cli-plugin": "0.80.1",
+    "@react-native/dev-middleware": "^0.80.1",
     "@rnef/config": "^0.8.12"
   },
-  "peerDependencies": {
-    "@react-native/community-cli-plugin": "*"
-  },
   "publishConfig": {
     "access": "public"
   }

packages/plugin-metro/src/lib/bundle/command.ts

@@ -1,9 +1,5 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import {
-  bundleCommand,
-  // @ts-expect-error missing typings - TODO drop dependency on community plugin
-} from '@react-native/community-cli-plugin';
 import type { PluginApi } from '@rnef/config';
 import {
   colorLink,
@@ -14,6 +10,7 @@ import {
   runHermes,
   spinner,
 } from '@rnef/tools';
+import { getReactNativeCommunityCliPlugin } from '../getReactNativeDeps.js';
 
 type BundleCommandArgs = {
   assetsDest?: string;
@@ -61,6 +58,9 @@ export function registerBundleCommand(api: PluginApi) {
       const bundleOutputDir = path.dirname(args.bundleOutput);
       fs.mkdirSync(bundleOutputDir, { recursive: true });
 
+      const { bundleCommand } =
+        await getReactNativeCommunityCliPlugin(reactNativePath);
+
       await bundleCommand.func(
         undefined,
         { root, reactNativeVersion, reactNativePath, platforms },
@@ -85,7 +85,104 @@ export function registerBundleCommand(api: PluginApi) {
       outro('Success 🎉.');
     },
     options: [
-      ...bundleCommand.options,
+      {
+        name: '--entry-file <path>',
+        description:
+          'Path to the root JS file, either absolute or relative to JS root',
+      },
+      {
+        name: '--platform <string>',
+        description: 'Either "ios" or "android"',
+        default: 'ios',
+      },
+      {
+        name: '--transformer <string>',
+        description: 'Specify a custom transformer to be used',
+      },
+      {
+        name: '--dev [boolean]',
+        description:
+          'If false, warnings are disabled and the bundle is minified',
+        parse: (val) => val !== 'false',
+        default: true,
+      },
+      {
+        name: '--minify [boolean]',
+        description:
+          'Allows overriding whether bundle is minified. This defaults to ' +
+          'false if dev is true, and true if dev is false. Disabling minification ' +
+          'can be useful for speeding up production builds for testing purposes.',
+        parse: (val) => val !== 'false',
+      },
+      {
+        name: '--bundle-output <string>',
+        description:
+          'File name where to store the resulting bundle, ex. /tmp/groups.bundle',
+      },
+      {
+        name: '--bundle-encoding <string>',
+        description:
+          'Encoding the bundle should be written in (https://nodejs.org/api/buffer.html#buffer_buffer).',
+        default: 'utf8',
+      },
+      {
+        name: '--max-workers <number>',
+        description:
+          'Specifies the maximum number of workers the worker-pool ' +
+          'will spawn for transforming files. This defaults to the number of the ' +
+          'cores available on your machine.',
+      },
+      {
+        name: '--sourcemap-output <string>',
+        description:
+          'File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map',
+      },
+      {
+        name: '--sourcemap-sources-root <string>',
+        description:
+          "Path to make sourcemap's sources entries relative to, ex. /root/dir",
+      },
+      {
+        name: '--sourcemap-use-absolute-path',
+        description: 'Report SourceMapURL using its full path',
+        default: false,
+      },
+      {
+        name: '--assets-dest <string>',
+        description:
+          'Directory name where to store assets referenced in the bundle',
+      },
+      {
+        name: '--unstable-transform-profile <string>',
+        description:
+          'Experimental, transform JS for a specific JS engine. Currently supported: hermes, hermes-canary, default',
+        default: 'default',
+      },
+      {
+        name: '--asset-catalog-dest [string]',
+        description: 'Path where to create an iOS Asset Catalog for images',
+      },
+      {
+        name: '--reset-cache',
+        description: 'Removes cached files',
+        default: false,
+      },
+      {
+        name: '--read-global-cache',
+        description:
+          'Try to fetch transformed JS code from the global cache, if configured.',
+        default: false,
+      },
+      {
+        name: '--config <string>',
+        description: 'Path to the CLI configuration file',
+        parse: (val) => path.resolve(val),
+      },
+      {
+        name: '--resolver-option <string...>',
+        description:
+          'Custom resolver options of the form key=value. URL-encoded. May be specified multiple times.',
+      },
       {
         name: '--config-cmd [string]',
         description:

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

@@ -0,0 +1,30 @@
+import { createRequire } from 'node:module';
+import type devMiddleware from '@react-native/dev-middleware';
+
+export async function getDevMiddleware(
+  reactNativePath: string,
+): Promise<typeof devMiddleware> {
+  const require = createRequire(import.meta.url);
+  const reactNativeCommunityCliPluginPath = require.resolve(
+    '@react-native/community-cli-plugin',
+    { paths: [reactNativePath] },
+  );
+
+  const devMiddlewarePath = require.resolve('@react-native/dev-middleware', {
+    paths: [reactNativeCommunityCliPluginPath],
+  });
+
+  return import(devMiddlewarePath);
+}
+
+export async function getReactNativeCommunityCliPlugin(
+  reactNativePath: string,
+) {
+  const require = createRequire(import.meta.url);
+  const reactNativeCommunityCliPluginPath = require.resolve(
+    '@react-native/community-cli-plugin',
+    { paths: [reactNativePath] },
+  );
+
+  return import(reactNativeCommunityCliPluginPath);
+}

packages/plugin-metro/src/lib/start/runServer.ts

@@ -8,14 +8,14 @@
 import { createRequire } from 'node:module';
 import path from 'node:path';
 import url from 'node:url';
-import { createDevMiddleware } from '@react-native/dev-middleware';
 import { createDevServerMiddleware } from '@react-native-community/cli-server-api';
 import { color } from '@rnef/tools';
 import Metro from 'metro';
 import type { Reporter } from 'metro/src/lib/reporting';
 import type { TerminalReportableEvent } from 'metro/src/lib/TerminalReporter';
 import type { TerminalReporter } from 'metro/src/lib/TerminalReporter';
 import { Terminal } from 'metro-core';
+import { getDevMiddleware } from '../getReactNativeDeps.js';
 import attachKeyHandlers from './attachKeyHandlers.js';
 import createDevMiddlewareLogger from './createDevMiddlewareLogger.js';
 import loadMetroConfig from './loadMetroConfig.js';
@@ -108,6 +108,9 @@ async function runServer(
     port,
     watchFolders,
   });
+  const { createDevMiddleware } = await getDevMiddleware(
+    options.reactNativePath,
+  );
   const { middleware, websocketEndpoints } = createDevMiddleware({
     projectRoot,
     serverBaseUrl: devServerUrl,