WIP feat: allow running dev server from run commands

.gitignore

@@ -45,3 +45,6 @@ Thumbs.db
 
 vite.config.*.timestamp*
 vitest.config.*.timestamp*
+
+# Nx
+.nx

packages/config/src/lib/config.ts

@@ -13,6 +13,33 @@ export type PluginOutput = {
   description: string;
 };
 
+export type DevServerArgs = {
+  interactive: boolean;
+  clientLogs: boolean;
+  port?: string;
+  host?: string;
+  https?: boolean;
+  resetCache?: boolean;
+  platforms?: string[];
+  [key: string]: unknown;
+};
+
+export type StartDevServerArgs = {
+  root: string;
+  args: DevServerArgs;
+  reactNativeVersion: string;
+  reactNativePath: string;
+  platforms: Record<string, object>;
+};
+
+type StartDevServerFunction = (options: StartDevServerArgs) => Promise<void>;
+
+export type BundlerPluginOutput = {
+  name: string;
+  description: string;
+  start: StartDevServerFunction;
+};
+
 export type PlatformOutput = PluginOutput & {
   autolinkingConfig: { project: Record<string, unknown> | undefined };
 };
@@ -27,10 +54,11 @@ export type PluginApi = {
     null | undefined | (() => RemoteBuildCache)
   >;
   getFingerprintOptions: () => FingerprintSources;
+  getBundlerStart: () => ({ args }: { args: DevServerArgs }) => void;
 };
 
 type PluginType = (args: PluginApi) => PluginOutput;
-
+type BundlerPluginType = (args: PluginApi) => BundlerPluginOutput;
 type PlatformType = (args: PluginApi) => PlatformOutput;
 
 type ArgValue = string | string[] | boolean;
@@ -63,7 +91,7 @@ export type ConfigType = {
   root?: string;
   reactNativeVersion?: string;
   reactNativePath?: string;
-  bundler?: PluginType;
+  bundler?: BundlerPluginType;
   plugins?: PluginType[];
   platforms?: Record<string, PlatformType>;
   commands?: Array<CommandType>;
@@ -79,6 +107,7 @@ export type ConfigOutput = {
   root: string;
   commands?: Array<CommandType>;
   platforms?: Record<string, PlatformOutput>;
+  bundler?: BundlerPluginOutput;
 } & PluginApi;
 
 const extensions = ['.js', '.ts', '.mjs'];
@@ -160,6 +189,8 @@ export async function getConfig(
     process.exit(1);
   }
 
+  let bundler: BundlerPluginOutput | undefined;
+
   const api = {
     registerCommand: (command: CommandType) => {
       validatedConfig.commands = [...(validatedConfig.commands || []), command];
@@ -184,8 +215,18 @@ Read more: ${colorLink('https://rockjs.dev/docs/configuration#github-actions-pro
       }
       return validatedConfig.remoteCacheProvider;
     },
-    getFingerprintOptions: () =>
-      validatedConfig.fingerprint as FingerprintSources,
+    getFingerprintOptions: () => validatedConfig.fingerprint as FingerprintSources,
+    getBundlerStart:
+      () =>
+      ({ args }: { args: DevServerArgs }) => {
+        return bundler?.start({
+          root: api.getProjectRoot(),
+          args,
+          reactNativeVersion: api.getReactNativeVersion(),
+          reactNativePath: api.getReactNativePath(),
+          platforms: api.getPlatforms(),
+        });
+      },
   };
 
   const platforms: Record<string, PlatformOutput> = {};
@@ -205,7 +246,11 @@ Read more: ${colorLink('https://rockjs.dev/docs/configuration#github-actions-pro
   }
 
   if (validatedConfig.bundler) {
-    assignOriginToCommand(validatedConfig.bundler, api, validatedConfig);
+    bundler = assignOriginToCommand(
+      validatedConfig.bundler,
+      api,
+      validatedConfig
+    ) as BundlerPluginOutput;
   }
 
   for (const internalPlugin of internalPlugins) {
@@ -220,6 +265,7 @@ Read more: ${colorLink('https://rockjs.dev/docs/configuration#github-actions-pro
     root: projectRoot,
     commands: validatedConfig.commands ?? [],
     platforms: platforms ?? {},
+    bundler,
     ...api,
   };
 
@@ -236,16 +282,17 @@ function resolveReactNativePath(root: string) {
  * Assigns __origin property to each command in the config for later use in error handling.
  */
 function assignOriginToCommand(
-  plugin: PluginType,
+  plugin: PluginType | BundlerPluginType,
   api: PluginApi,
   config: ConfigType,
 ) {
   const len = config.commands?.length ?? 0;
-  const { name } = plugin(api);
+  const { name, ...rest } = plugin(api);
   const newlen = config.commands?.length ?? 0;
   for (let i = len; i < newlen; i++) {
     if (config.commands?.[i]) {
       config.commands[i].__origin = name;
     }
   }
+  return { name, ...rest };
 }

packages/platform-android/src/lib/commands/runAndroid/__tests__/runAndroid.test.ts

@@ -312,6 +312,9 @@ test.each([['release'], ['debug'], ['staging']])(
       '/',
       undefined,
       { extraSources: [], ignorePaths: [], env: [] },
+      vi.fn(), // startDevServer mock
+      '0.79.0', // reactNativeVersion
+      '/path/to/react-native', // reactNativePath
     );
 
     expect(tools.outro).toBeCalledWith('Success 🎉.');
@@ -361,6 +364,9 @@ test('runAndroid runs gradle build with custom --appId, --appIdSuffix and --main
     '/',
     undefined,
     { extraSources: [], ignorePaths: [], env: [] },
+    vi.fn(), // startDevServer mock
+    '0.79.0', // reactNativeVersion
+    '/path/to/react-native', // reactNativePath
   );
 
   expect(tools.outro).toBeCalledWith('Success 🎉.');
@@ -388,6 +394,9 @@ test('runAndroid fails to launch an app on not-connected device when specified w
     '/',
     undefined,
     { extraSources: [], ignorePaths: [], env: [] },
+    vi.fn(), // startDevServer mock
+    '0.79.0', // reactNativeVersion
+    '/path/to/react-native', // reactNativePath
   );
   expect(logWarnSpy).toBeCalledWith(
     'No devices or emulators found matching "emulator-5554". Using available one instead.',
@@ -457,6 +466,9 @@ test.each([['release'], ['debug']])(
       '/',
       undefined,
       { extraSources: [], ignorePaths: [], env: [] },
+      vi.fn(), // startDevServer mock
+      '0.79.0', // reactNativeVersion
+      '/path/to/react-native', // reactNativePath
     );
 
     // we don't want to run installDebug when a device is selected, because gradle will install the app on all connected devices
@@ -517,7 +529,7 @@ test('runAndroid launches an app on all connected devices', async () => {
     extraSources: [],
     ignorePaths: [],
     env: [],
-  });
+  }, vi.fn(), '0.79.0', '/path/to/react-native');
 
   // Runs assemble debug task with active architectures arm64-v8a, armeabi-v7a
   expect(spawn).toBeCalledWith(
@@ -584,6 +596,9 @@ test('runAndroid skips building when --binary-path is passed', async () => {
     '/root',
     undefined,
     { extraSources: [], ignorePaths: [], env: [] },
+    vi.fn(), // startDevServer mock
+    '0.79.0', // reactNativeVersion
+    '/path/to/react-native', // reactNativePath
   );
 
   // Skips gradle

packages/platform-android/src/lib/commands/runAndroid/command.ts

@@ -21,6 +21,9 @@ export function registerRunCommand(
         projectRoot,
         await api.getRemoteCacheProvider(),
         api.getFingerprintOptions(),
+        api.getBundlerStart(),
+        api.getReactNativeVersion(),
+        api.getReactNativePath()
       );
     },
     options: runOptions,

packages/platform-android/src/lib/commands/runAndroid/runAndroid.ts

@@ -4,6 +4,7 @@ import type {
   AndroidProjectConfig,
   Config,
 } from '@react-native-community/cli-types';
+import type { StartDevServerArgs } from '@rock-js/config';
 import type { FingerprintSources, RemoteBuildCache } from '@rock-js/tools';
 import {
   color,
@@ -50,6 +51,9 @@ export async function runAndroid(
   projectRoot: string,
   remoteCacheProvider: null | (() => RemoteBuildCache) | undefined,
   fingerprintOptions: FingerprintSources,
+  startDevServer: (options: StartDevServerArgs) => void,
+  reactNativeVersion: string,
+  reactNativePath: string
 ) {
   intro('Running Android app');
 
@@ -77,6 +81,18 @@ export async function runAndroid(
     sourceDir: androidProject.sourceDir,
   });
 
+  logger.info('Starting dev server...');
+  startDevServer({
+    root: projectRoot,
+    reactNativePath,
+    reactNativeVersion,
+    platforms: { ios: {}, android: {} },
+    args: {
+      interactive: isInteractive(),
+      clientLogs: true,
+    },
+  });
+
   if (device) {
     if (!(await getDevices()).find((d) => d === device.deviceId)) {
       // deviceId is undefined until it's launched, hence overwriting it here

packages/platform-apple-helpers/src/lib/commands/run/createRun.ts

@@ -1,5 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
+import type { StartDevServerArgs } from '@rock-js/config';
 import type { FingerprintSources, RemoteBuildCache } from '@rock-js/tools';
 import {
   color,
@@ -34,6 +35,8 @@ export const createRun = async ({
   remoteCacheProvider,
   fingerprintOptions,
   reactNativePath,
+  reactNativeVersion,
+  startDevServer,
 }: {
   platformName: ApplePlatform;
   projectConfig: ProjectConfig;
@@ -42,9 +45,25 @@ export const createRun = async ({
   remoteCacheProvider: null | (() => RemoteBuildCache) | undefined;
   fingerprintOptions: FingerprintSources;
   reactNativePath: string;
+  reactNativeVersion: string;
+  startDevServer?: (options: StartDevServerArgs) => void;
 }) => {
   validateArgs(args, projectRoot);
 
+  if (startDevServer) {
+    logger.info('Starting dev server...');
+    startDevServer({
+      root: projectRoot,
+      reactNativePath,
+      reactNativeVersion,
+      platforms: { ios: {}, android: {} },
+      args: {
+        interactive: isInteractive(),
+        clientLogs: true,
+      },
+    });
+  }
+
   const deviceOrSimulator = args.destination
     ? // there can be multiple destinations, so we'll pick the first one
       args.destination[0].match(/simulator/i)

packages/platform-ios/src/lib/platformIOS.ts

@@ -61,6 +61,8 @@ export const platformIOS =
           remoteCacheProvider: await api.getRemoteCacheProvider(),
           fingerprintOptions: api.getFingerprintOptions(),
           reactNativePath: api.getReactNativePath(),
+          reactNativeVersion: api.getReactNativeVersion(),
+          startDevServer: api.getBundlerStart(),
         });
         outro('Success 🎉.');
       },

packages/plugin-metro/src/index.ts

@@ -1 +1,2 @@
 export * from './lib/pluginMetro.js';
+export { startDevServer } from './lib/start/command.js';

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

@@ -1,16 +1,17 @@
-import type { PluginApi, PluginOutput } from '@rock-js/config';
+import type { BundlerPluginOutput, PluginApi } from '@rock-js/config';
 import { registerBundleCommand } from './bundle/command.js';
-import { registerStartCommand } from './start/command.js';
+import { registerStartCommand, startDevServer } from './start/command.js';
 
 export const pluginMetro =
   () =>
-  (api: PluginApi): PluginOutput => {
+  (api: PluginApi): BundlerPluginOutput => {
     registerStartCommand(api);
     registerBundleCommand(api);
 
     return {
       name: '@rock-js/plugin-metro',
       description: 'Rock plugin for Metro bundler.',
+      start: startDevServer,
     };
   };
 

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

@@ -7,10 +7,33 @@
 
 import path from 'node:path';
 import type { PluginApi } from '@rock-js/config';
+import type { StartDevServerArgs } from '@rock-js/config';
 import { findDevServerPort, intro } from '@rock-js/tools';
 import type { StartCommandArgs } from './runServer.js';
 import runServer from './runServer.js';
 
+export async function startDevServer({
+  root,
+  args,
+  reactNativeVersion,
+  reactNativePath,
+  platforms,
+}: StartDevServerArgs) {
+  const { port, startDevServer } = await findDevServerPort(
+    args.port ? Number(args.port) : 8081,
+    root
+  );
+
+  if (!startDevServer) {
+    return;
+  }
+
+  return runServer(
+    { root, reactNativeVersion, reactNativePath, platforms },
+    { ...args, port, platforms: Object.keys(platforms) }
+  );
+}
+
 export const registerStartCommand = (api: PluginApi) => {
   api.registerCommand({
     name: 'start',