chore(testers): add Rozenite DevTools plugins to tester apps

CONTRIBUTING.md

@@ -21,6 +21,8 @@ All development is done directly on GitHub, and all work is public.
 2. Run `pnpm install` to install & set up the development environment.
 3. Do the changes you want and test them out in the TesterApp (`apps/tester-app`) before sending a pull request.
 
+To get extra [Rozenite](https://www.rozenite.dev) panels (network activity, plus navigation and storage in the Module Federation hosts) in React Native DevTools while testing, start a tester app's dev server with `WITH_ROZENITE=true`, e.g. `WITH_ROZENITE=true pnpm start`.
+
 ### Commit message convention
 
 We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages:

apps/tester-app/index.js

@@ -1,8 +1,11 @@
+import { withOnBootNetworkActivityRecording } from '@rozenite/network-activity-plugin';
 import { AppRegistry } from 'react-native';
 import { name as appName } from './app.json';
 import App from './src/App';
 
 // ScriptManager setup
 import './src/setup';
 
+withOnBootNetworkActivityRecording();
+
 AppRegistry.registerComponent(appName, () => App);

apps/tester-app/package.json

@@ -44,6 +44,8 @@
     "@react-native/babel-preset": "catalog:testers",
     "@react-native/metro-config": "catalog:testers",
     "@react-native/typescript-config": "catalog:testers",
+    "@rozenite/network-activity-plugin": "catalog:testers",
+    "@rozenite/repack": "catalog:testers",
     "@rsdoctor/rspack-plugin": "1.6.4",
     "@rspack/core": "catalog:",
     "@svgr/webpack": "^8.1.0",

apps/tester-app/rspack.config.mjs

@@ -2,6 +2,7 @@ import path from 'node:path';
 import * as Repack from '@callstack/repack';
 import { NativeWindPlugin } from '@callstack/repack-plugin-nativewind';
 import { ReanimatedPlugin } from '@callstack/repack-plugin-reanimated';
+import { withRozenite } from '@rozenite/repack';
 
 // Rsdoctor (through rslog) throws on import under Node < 20, so only load it
 // when it's actually enabled to keep the Node 18 test matrix working.
@@ -11,7 +12,7 @@ const { RsdoctorRspackPlugin } = process.env.RSDOCTOR
 
 const dirname = Repack.getDirname(import.meta.url);
 
-export default Repack.defineRspackConfig((env) => {
+const config = Repack.defineRspackConfig((env) => {
   const {
     mode = 'development',
     context = dirname,
@@ -134,3 +135,7 @@ export default Repack.defineRspackConfig((env) => {
     ].filter(Boolean),
   };
 });
+
+export default withRozenite(config, {
+  enabled: process.env.WITH_ROZENITE === 'true',
+});

apps/tester-app/src/App.tsx

@@ -1,3 +1,4 @@
+import { useNetworkActivityDevTools } from '@rozenite/network-activity-plugin';
 import { Appearance } from 'react-native';
 
 // nativewind styles
@@ -16,6 +17,8 @@ import { SectionContainer } from './ui/SectionContainer';
 Appearance.setColorScheme('light');
 
 const App = () => {
+  useNetworkActivityDevTools();
+
   return (
     <AppContainer>
       <SectionContainer>

apps/tester-app/webpack.config.mjs

@@ -2,11 +2,12 @@ import path from 'node:path';
 import * as Repack from '@callstack/repack';
 import { NativeWindPlugin } from '@callstack/repack-plugin-nativewind';
 import { ReanimatedPlugin } from '@callstack/repack-plugin-reanimated';
+import { withRozenite } from '@rozenite/repack';
 import TerserPlugin from 'terser-webpack-plugin';
 
 const dirname = Repack.getDirname(import.meta.url);
 
-export default Repack.defineWebpackConfig((env) => {
+const config = Repack.defineWebpackConfig((env) => {
   const {
     mode = 'development',
     context = dirname,
@@ -133,3 +134,7 @@ export default Repack.defineWebpackConfig((env) => {
     ],
   };
 });
+
+export default withRozenite(config, {
+  enabled: process.env.WITH_ROZENITE === 'true',
+});

apps/tester-expo/app/_layout.tsx

@@ -1,5 +1,8 @@
+import { useNetworkActivityDevTools } from '@rozenite/network-activity-plugin';
 import { Stack } from 'expo-router';
 
 export default function RootLayout() {
+  useNetworkActivityDevTools();
+
   return <Stack />;
 }

apps/tester-expo/package.json

@@ -39,6 +39,8 @@
     "@react-native-community/cli-platform-ios": "catalog:testers",
     "@react-native/babel-preset": "catalog:testers",
     "@react-native/community-cli-plugin": "catalog:testers",
+    "@rozenite/network-activity-plugin": "catalog:testers",
+    "@rozenite/repack": "catalog:testers",
     "@rspack/core": "catalog:",
     "@types/react": "catalog:testers",
     "babel-preset-expo": "catalog:expo58",

apps/tester-expo/rspack.config.mjs

@@ -4,6 +4,7 @@ import { fileURLToPath } from 'node:url';
 import * as Repack from '@callstack/repack';
 import { ExpoPlugin } from '@callstack/repack-expo/rspack';
 import { ReanimatedPlugin } from '@callstack/repack-plugin-reanimated';
+import { withRozenite } from '@rozenite/repack';
 
 const require = createRequire(import.meta.url);
 const projectRoot = path.dirname(fileURLToPath(import.meta.url));
@@ -18,7 +19,7 @@ const SHARED_SINGLETONS = [
   'expo-font',
 ];
 
-export default (env) => {
+const config = (env) => {
   const {
     mode = 'development',
     platform = process.env.PLATFORM,
@@ -64,3 +65,10 @@ export default (env) => {
     ],
   };
 };
+
+export default withRozenite(config, {
+  enabled: process.env.WITH_ROZENITE === 'true',
+  // Re.Pack serves DevTools through React Native's dev-middleware, not the copy
+  // bundled with Expo's CLI, so Rozenite has to patch that one.
+  projectType: 'react-native-cli',
+});

apps/tester-federation-v2/config.host-app.mts

@@ -1,6 +1,7 @@
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import type * as Repack from '@callstack/repack';
+import { withRozenite } from '@rozenite/repack';
 
 import rspackConfig from './configs/rspack.host-app.mts';
 import webpackConfig from './configs/webpack.host-app.mts';
@@ -10,8 +11,12 @@ const __dirname = path.dirname(__filename);
 
 const useWebpack = Boolean(process.env.USE_WEBPACK);
 
-export default (env: Repack.EnvOptions) => {
+const config = (env: Repack.EnvOptions) => {
   env.context = __dirname;
 
   return useWebpack ? webpackConfig(env) : rspackConfig(env);
 };
+
+export default withRozenite(config, {
+  enabled: process.env.WITH_ROZENITE === 'true',
+});

apps/tester-federation-v2/package.json

@@ -32,6 +32,10 @@
     "@react-native/community-cli-plugin": "catalog:testers",
     "@react-native/metro-config": "catalog:testers",
     "@react-native/typescript-config": "catalog:testers",
+    "@rozenite/network-activity-plugin": "catalog:testers",
+    "@rozenite/react-navigation-plugin": "catalog:testers",
+    "@rozenite/repack": "catalog:testers",
+    "@rozenite/storage-plugin": "catalog:testers",
     "@rsdoctor/rspack-plugin": "1.6.4",
     "@rspack/core": "catalog:",
     "@swc/helpers": "catalog:",

apps/tester-federation-v2/src/host/App.tsx

@@ -1,9 +1,30 @@
-import { NavigationContainer } from '@react-navigation/native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {
+  NavigationContainer,
+  useNavigationContainerRef,
+} from '@react-navigation/native';
+import { useNetworkActivityDevTools } from '@rozenite/network-activity-plugin';
+import { useReactNavigationDevTools } from '@rozenite/react-navigation-plugin';
+import {
+  createAsyncStorageAdapter,
+  useRozeniteStoragePlugin,
+} from '@rozenite/storage-plugin';
 import MainNavigator from './navigation/MainNavigator';
 
+// ScriptManager caches remote scripts in AsyncStorage (see index.js).
+const storages = [
+  createAsyncStorageAdapter({ storages: { ScriptManager: AsyncStorage } }),
+];
+
 const App = () => {
+  const navigationRef = useNavigationContainerRef();
+
+  useNetworkActivityDevTools();
+  useReactNavigationDevTools({ ref: navigationRef });
+  useRozeniteStoragePlugin({ storages });
+
   return (
-    <NavigationContainer>
+    <NavigationContainer ref={navigationRef}>
       <MainNavigator />
     </NavigationContainer>
   );

apps/tester-federation-v2/src/host/index.js

@@ -1,11 +1,14 @@
 import { ScriptManager } from '@callstack/repack/client';
 import { preloadRemote } from '@module-federation/runtime';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { withOnBootNetworkActivityRecording } from '@rozenite/network-activity-plugin';
 import { AppRegistry } from 'react-native';
 
 import { components } from '../../app.json';
 import App from './App';
 
+withOnBootNetworkActivityRecording();
+
 if (__WITH_PRELOAD__) {
   // enable caching of scripts in the AsyncStorage
   ScriptManager.shared.setStorage(AsyncStorage);

apps/tester-federation/config.host-app.mts

@@ -1,6 +1,7 @@
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import type * as Repack from '@callstack/repack';
+import { withRozenite } from '@rozenite/repack';
 
 import rspackConfig from './configs/rspack.host-app.mts';
 import webpackConfig from './configs/webpack.host-app.mts';
@@ -10,8 +11,12 @@ const __dirname = path.dirname(__filename);
 
 const useWebpack = Boolean(process.env.USE_WEBPACK);
 
-export default (env: Repack.EnvOptions) => {
+const config = (env: Repack.EnvOptions) => {
   env.context = __dirname;
 
   return useWebpack ? webpackConfig(env) : rspackConfig(env);
 };
+
+export default withRozenite(config, {
+  enabled: process.env.WITH_ROZENITE === 'true',
+});

apps/tester-federation/package.json

@@ -35,6 +35,10 @@
     "@react-native/babel-preset": "catalog:testers",
     "@react-native/metro-config": "catalog:testers",
     "@react-native/typescript-config": "catalog:testers",
+    "@rozenite/network-activity-plugin": "catalog:testers",
+    "@rozenite/react-navigation-plugin": "catalog:testers",
+    "@rozenite/repack": "catalog:testers",
+    "@rozenite/storage-plugin": "catalog:testers",
     "@rsdoctor/rspack-plugin": "1.6.4",
     "@rspack/core": "catalog:",
     "@swc/helpers": "catalog:",

apps/tester-federation/src/host/App.tsx

@@ -1,9 +1,30 @@
-import { NavigationContainer } from '@react-navigation/native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {
+  NavigationContainer,
+  useNavigationContainerRef,
+} from '@react-navigation/native';
+import { useNetworkActivityDevTools } from '@rozenite/network-activity-plugin';
+import { useReactNavigationDevTools } from '@rozenite/react-navigation-plugin';
+import {
+  createAsyncStorageAdapter,
+  useRozeniteStoragePlugin,
+} from '@rozenite/storage-plugin';
 import MainNavigator from './navigation/MainNavigator';
 
+// ScriptManager caches remote scripts in AsyncStorage (see index.js).
+const storages = [
+  createAsyncStorageAdapter({ storages: { ScriptManager: AsyncStorage } }),
+];
+
 const App = () => {
+  const navigationRef = useNavigationContainerRef();
+
+  useNetworkActivityDevTools();
+  useReactNavigationDevTools({ ref: navigationRef });
+  useRozeniteStoragePlugin({ storages });
+
   return (
-    <NavigationContainer>
+    <NavigationContainer ref={navigationRef}>
       <MainNavigator />
     </NavigationContainer>
   );

apps/tester-federation/src/host/index.js

@@ -1,10 +1,13 @@
 import { Federated, ScriptManager } from '@callstack/repack/client';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { withOnBootNetworkActivityRecording } from '@rozenite/network-activity-plugin';
 import { AppRegistry, Platform } from 'react-native';
 
 import { components } from '../../app.json';
 import App from './App';
 
+withOnBootNetworkActivityRecording();
+
 ScriptManager.shared.setStorage(AsyncStorage);
 
 const resolveURL = Federated.createURLResolver({