move dev server startup and add repack support

Author: OlimpiaZurek

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

@@ -83,18 +83,6 @@ export async function runAndroid(
     sourceDir: androidProject.sourceDir,
   });
 
-  logger.info('Starting dev server...');
-  startDevServer({
-    root: projectRoot,
-    reactNativePath,
-    reactNativeVersion,
-    platforms,
-    args: {
-      interactive: isInteractive(),
-      clientLogs: args.clientLogs ?? true,
-    },
-  });
-
   if (device) {
     if (!(await getDevices()).find((d) => d === device.deviceId)) {
       // deviceId is undefined until it's launched, hence overwriting it here
@@ -106,6 +94,18 @@ export async function runAndroid(
       }
       await runOnDevice({ device, androidProject, args, tasks, binaryPath });
     }
+
+    logger.info('Starting dev serverhhhh...');
+    startDevServer({
+      root: projectRoot,
+      reactNativePath,
+      reactNativeVersion,
+      platforms,
+      args: {
+        interactive: isInteractive(),
+        clientLogs: args.clientLogs ?? true,
+      },
+    });
   } else {
     if ((await getDevices()).length === 0) {
       if (isInteractive()) {
@@ -127,6 +127,17 @@ export async function runAndroid(
         await runOnDevice({ device, androidProject, args, tasks, binaryPath });
       }
     }
+    logger.info('Starting dev server...');
+    startDevServer({
+      root: projectRoot,
+      reactNativePath,
+      reactNativeVersion,
+      platforms,
+      args: {
+        interactive: isInteractive(),
+        clientLogs: args.clientLogs ?? true,
+      },
+    });
   }
 
   outro('Success 🎉.');

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

@@ -48,8 +48,22 @@ export const createRun = async ({
   reactNativePath: string;
   reactNativeVersion: string;
   platforms: { [platform: string]: object };
-  startDevServer?: (options: StartDevServerArgs) => void;
+  startDevServer: (options: StartDevServerArgs) => void;
 }) => {
+
+  const startDevServerHelper = () => {
+    logger.info('Starting dev server...');
+    startDevServer({
+      root: projectRoot,
+      reactNativePath,
+      reactNativeVersion,
+      platforms,
+      args: {
+        interactive: isInteractive(),
+        clientLogs: args.clientLogs ?? true,
+      },
+    });
+  };
   validateArgs(args, projectRoot);
 
   const deviceOrSimulator = args.destination
@@ -100,21 +114,10 @@ export const createRun = async ({
       fingerprintOptions,
     });
 
-    if (startDevServer) {
-      logger.info('Starting dev server...');
-      startDevServer({
-        root: projectRoot,
-        reactNativePath,
-        reactNativeVersion,
-        platforms,
-        args: {
-          interactive: isInteractive(),
-          clientLogs: args.clientLogs ?? true,
-        },
-      });
-    }
+
 
     await runOnMac(appPath);
+    startDevServerHelper();
     return;
   } else if (args.catalyst) {
     const { appPath, scheme } = await buildApp({
@@ -131,23 +134,11 @@ export const createRun = async ({
       fingerprintOptions,
     });
 
-    // Start dev server after build completes to avoid log clashing
-    if (startDevServer) {
-      logger.info('Starting dev server...');
-      startDevServer({
-        root: projectRoot,
-        reactNativePath,
-        reactNativeVersion,
-        platforms,
-        args: {
-          interactive: isInteractive(),
-          clientLogs: args.clientLogs ?? true,
-        },
-      });
-    }
-    
+
+
     if (scheme) {
       await runOnMacCatalyst(appPath, scheme);
+      startDevServerHelper();
       return;
     } else {
       throw new RockError('Failed to get project scheme');
@@ -194,22 +185,10 @@ ${devices
         }),
       ]);
 
-      // Start dev server after build completes to avoid log clashing
-      if (startDevServer) {
-        logger.info('Starting dev server...');
-        startDevServer({
-          root: projectRoot,
-          reactNativePath,
-          reactNativeVersion,
-          platforms,
-          args: {
-            interactive: isInteractive(),
-            clientLogs: args.clientLogs ?? true,
-          },
-        });
-      }
-      
+
+
       await runOnSimulator(device, appPath, infoPlistPath);
+      startDevServerHelper();
     } else if (device.type === 'device') {
       const { appPath, bundleIdentifier } = await buildApp({
         args,
@@ -224,27 +203,14 @@ ${devices
         fingerprintOptions,
       });
 
-      // Start dev server after build completes to avoid log clashing
-      if (startDevServer) {
-        logger.info('Starting dev server...');
-        startDevServer({
-          root: projectRoot,
-          reactNativePath,
-          reactNativeVersion,
-          platforms,
-          args: {
-            interactive: isInteractive(),
-            clientLogs: args.clientLogs ?? true,
-          },
-        });
-      }
-      
       await runOnDevice(
         device,
         appPath,
         projectConfig.sourceDir,
         bundleIdentifier,
       );
+      startDevServerHelper();
+
     }
     return;
   } else {
@@ -294,21 +260,6 @@ ${devices
           }),
         ]);
 
-      // Start dev server after build completes to avoid log clashing
-      if (startDevServer) {
-        logger.info('Starting dev server...');
-        startDevServer({
-          root: projectRoot,
-          reactNativePath,
-          reactNativeVersion,
-          platforms,
-          args: {
-            interactive: isInteractive(),
-            clientLogs: args.clientLogs ?? true,
-          },
-        });
-      }
-      
       if (bootedDevice.type === 'simulator') {
         await runOnSimulator(bootedDevice, appPath, infoPlistPath);
       } else {
@@ -320,6 +271,7 @@ ${devices
         );
       }
     }
+    startDevServerHelper();
   }
 };
 

packages/plugin-repack/src/index.ts

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

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

@@ -1,5 +1,5 @@
 import commands from '@callstack/repack/commands/rspack';
-import type { PluginApi, PluginOutput } from '@rock-js/config';
+import type { BundlerPluginOutput, PluginApi, StartDevServerArgs } from '@rock-js/config';
 import {
   colorLink,
   findDevServerPort,
@@ -25,9 +25,39 @@ type BundleArgs = Parameters<NonNullable<typeof bundleCommand>['func']>[2] & {
 const startCommand = commands.find((command) => command.name === 'start');
 const bundleCommand = commands.find((command) => command.name === 'bundle');
 
+export async function startDevServer({
+  root,
+  args,
+  reactNativeVersion: _reactNativeVersion,
+  reactNativePath,
+  platforms,
+}: StartDevServerArgs, pluginConfig: PluginConfig = {}) {
+  const { port, startDevServer } = await findDevServerPort(
+    args.port ? Number(args.port) : 8081,
+    root
+  );
+
+  if (!startDevServer) {
+    return;
+  }
+
+  if (!startCommand) {
+    throw new RockError('Re.Pack "start" command not found.');
+  }
+
+  logger.info('Starting Re.Pack dev server...');
+
+  startCommand.func(
+    [],
+    // @ts-expect-error TODO fix getPlatforms type
+    { reactNativePath, root, platforms, ...pluginConfig },
+    { ...args, port },
+  );
+}
+
 export const pluginRepack =
   (pluginConfig: PluginConfig = {}) =>
-  (api: PluginApi): PluginOutput => {
+  (api: PluginApi): BundlerPluginOutput => {
     if (!startCommand) {
       throw new RockError('Re.Pack "start" command not found.');
     }
@@ -117,6 +147,7 @@ export const pluginRepack =
     return {
       name: '@rock-js/plugin-repack',
       description: 'Rock plugin for Re.Pack toolkit with Rspack.',
+      start: startDevServer,
     };
   };