refactor(commands): unify webpack and Rspack commands (#1424)

Author: jbroma

.changeset/reject-webpack-asset-requests.md

@@ -0,0 +1,5 @@
+---
+"@callstack/repack": patch
+---
+
+Reject pending webpack asset requests when compilation fails instead of leaving requests hanging.

.changeset/unify-bundler-commands.md

@@ -0,0 +1,6 @@
+---
+"@callstack/repack": minor
+"@callstack/repack-init": patch
+---
+
+Add the unified `@callstack/repack/commands` entry point with automatic bundler detection and a `--bundler` override. Re.Pack Init now uses it, while bundler-specific entry points remain available with deprecation warnings.

apps/tester-app/__tests__/bundle.test.ts

@@ -1,7 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import rspackCommands from '@callstack/repack/commands/rspack';
-import webpackCommands from '@callstack/repack/commands/webpack';
+import commands from '@callstack/repack/commands';
 import { globby } from 'globby';
 import {
   afterEach,
@@ -17,15 +16,13 @@ describe('bundle command', () => {
   describe.each([
     {
       bundler: 'webpack',
-      commands: webpackCommands,
       configFile: './webpack.config.mjs',
     },
     {
       bundler: 'rspack',
-      commands: rspackCommands,
       configFile: './rspack.config.mjs',
     },
-  ])('using $bundler', ({ bundler, commands, configFile }) => {
+  ])('using $bundler', ({ bundler, configFile }) => {
     const bundleCommand = commands.find((command) => command.name === 'bundle');
     if (!bundleCommand) throw new Error('bundle command not found');
 

apps/tester-app/__tests__/start.test.ts

@@ -1,7 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import rspackCommands from '@callstack/repack/commands/rspack';
-import webpackCommands from '@callstack/repack/commands/webpack';
+import commands from '@callstack/repack/commands';
 import getPort from 'get-port';
 import { afterAll, beforeAll, describe, expect, it } from 'vitest';
 
@@ -12,15 +11,13 @@ describe('start command', () => {
   describe.each([
     {
       bundler: 'webpack',
-      commands: webpackCommands,
       configFile: './webpack.config.mjs',
     },
     {
       bundler: 'rspack',
-      commands: rspackCommands,
       configFile: './rspack.config.mjs',
     },
-  ])('using $bundler', ({ bundler, commands, configFile }) => {
+  ])('using $bundler', ({ bundler, configFile }) => {
     const startCommand = commands.find((command) => command.name === 'start');
     if (!startCommand) throw new Error('start command not found');
 

apps/tester-app/react-native.config.js

@@ -1,7 +1,5 @@
 const { configureProjects } = require('react-native-test-app');
 
-const useWebpack = Boolean(process.env.USE_WEBPACK);
-
 module.exports = {
   project: configureProjects({
     android: {
@@ -11,7 +9,5 @@ module.exports = {
       sourceDir: 'ios',
     },
   }),
-  commands: useWebpack
-    ? require('@callstack/repack/commands/webpack')
-    : require('@callstack/repack/commands/rspack'),
+  commands: require('@callstack/repack/commands'),
 };

apps/tester-federation-v2/react-native.config.js

@@ -1,7 +1,5 @@
 const { configureProjects } = require('react-native-test-app');
 
-const useWebpack = Boolean(process.env.USE_WEBPACK);
-
 module.exports = {
   project: configureProjects({
     android: {
@@ -11,7 +9,5 @@ module.exports = {
       sourceDir: 'ios',
     },
   }),
-  commands: useWebpack
-    ? require('@callstack/repack/commands/webpack')
-    : require('@callstack/repack/commands/rspack'),
+  commands: require('@callstack/repack/commands'),
 };

apps/tester-federation/react-native.config.js

@@ -1,7 +1,5 @@
 const { configureProjects } = require('react-native-test-app');
 
-const useWebpack = Boolean(process.env.USE_WEBPACK);
-
 module.exports = {
   project: configureProjects({
     android: {
@@ -11,7 +9,5 @@ module.exports = {
       sourceDir: 'ios',
     },
   }),
-  commands: useWebpack
-    ? require('@callstack/repack/commands/webpack')
-    : require('@callstack/repack/commands/rspack'),
+  commands: require('@callstack/repack/commands'),
 };

packages/init/src/index.ts

@@ -65,7 +65,7 @@ export default async function run(options: Options) {
       options.entry
     );
 
-    modifyReactNativeConfig(bundler, projectRootDir);
+    modifyReactNativeConfig(projectRootDir);
 
     modifyIOS(projectRootDir);
 

packages/init/src/tasks/modifyReactNativeConfig.ts

@@ -3,24 +3,23 @@ import path from 'node:path';
 import dedent from 'dedent';
 import logger from '../utils/logger.js';
 
-const createDefaultConfig = (bundler: 'rspack' | 'webpack') => dedent`
+const COMMANDS_REQUIRE = `require('@callstack/repack/commands')`;
+
+const createDefaultConfig = () => dedent`
   module.exports = {
-    commands: require('@callstack/repack/commands/${bundler}'),
+    commands: ${COMMANDS_REQUIRE},
   };`;
 
 /**
  * Checks whether react-native.config.js exists and adds the commands to it
  *
  * @param cwd current working directory
  */
-export default function modifyReactNativeConfig(
-  bundler: 'rspack' | 'webpack',
-  cwd: string
-): void {
+export default function modifyReactNativeConfig(cwd: string): void {
   const configPath = path.join(cwd, 'react-native.config.js');
 
   if (!fs.existsSync(configPath)) {
-    fs.writeFileSync(configPath, createDefaultConfig(bundler));
+    fs.writeFileSync(configPath, createDefaultConfig());
     logger.info('Created react-native.config.js');
     return;
   }
@@ -31,14 +30,14 @@ export default function modifyReactNativeConfig(
   if (!configContent.includes('commands:')) {
     updatedConfigContent = configContent.replace(
       'module.exports = {',
-      `module.exports = {\n  commands: require('@callstack/repack/commands/${bundler}'),`
+      `module.exports = {\n  commands: ${COMMANDS_REQUIRE},`
     );
   } else {
     const commandsIndex = configContent.indexOf('commands:');
     const commandsEndIndex = configContent.indexOf(',', commandsIndex);
     const commandsString = configContent.slice(commandsIndex, commandsEndIndex);
 
-    const newCommandsString = `commands: require('@callstack/repack/commands/${bundler}')`;
+    const newCommandsString = `commands: ${COMMANDS_REQUIRE}`;
     if (commandsString === newCommandsString) {
       logger.info('File react-native.config.js is already up to date');
       return;

packages/repack/commands/index.d.ts

@@ -0,0 +1,2 @@
+import commands from '../dist/commands/index.js';
+export = commands;