feat: use react-native-macos namespace, update to nx 21

Author: Saadnajmi

nx.json

@@ -15,18 +15,17 @@
       "workspaceChangelog": false
     },
     "projects": ["packages/react-native", "packages/virtualized-lists"],
-    "projectsRelationship": "independent",
     "versionPlans": true,
     "version": {
-      "generator": "@react-native-mac/nx-release-version:release-version",
-      "generatorOptions": {
+      "versionActions": "@react-native-macos/nx-release-version",
+      "versionActionsOptions": {
         "currentVersionResolver": "registry",
         "currentVersionResolverMetadata": {
           "tag": "nightly"
         },
         "preid": "nightly"
       },
-      "useLegacyVersioning": true
+      "useLegacyVersioning": false
     }
   }
 }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@react-native-mac/monorepo",
+  "name": "@react-native-macos/monorepo",
   "private": true,
   "version": "1000.0.0",
   "license": "MIT",

packages/nx-release-version/README.md

@@ -0,0 +1,77 @@
+# os/nx-release-version
+
+Modern Nx 21 Version Actions for React Native macOS releases.
+
+## Overview
+
+This package provides custom Version Actions for Nx 21's modern release system (`useLegacyVersioning: false`). It extends the built-in `JsVersionActions` to include React Native platform-specific artifact updates.
+
+## What it does
+
+When versioning the `react-native-macos` project, this package automatically:
+
+1. **Updates standard package.json files** (via the base `JsVersionActions`)
+2. **Updates React Native platform artifacts**:
+   - `ReactAndroid/gradle.properties`
+   - `ReactNativeVersion.java`
+   - `RCTVersion.m`
+   - `ReactNativeVersion.h`
+   - `ReactNativeVersion.js`
+3. **Creates a `.rnm-publish` marker file** to indicate successful versioning
+
+## Migration from Legacy
+
+This package has been migrated from the legacy generator-based approach to the modern Nx 21 Version Actions API:
+
+### Before (Legacy)
+```json
+{
+  "release": {
+    "version": {
+      "generator": "@react-native-mac/nx-release-version:release-version",
+      "generatorOptions": { ... },
+      "useLegacyVersioning": true
+    }
+  }
+}
+```
+
+### After (Modern)
+```json
+{
+  "release": {
+    "version": {
+      "versionActions": "@react-native-mac/nx-release-version",
+      "versionActionsOptions": { ... },
+      "useLegacyVersioning": false
+    }
+  }
+}
+```
+
+## Architecture
+
+- **`index.js`**: Main entry point containing the `ReactNativeMacOSVersionActions` class that extends `JsVersionActions`
+- **Legacy files removed**: `generators.json`, `schema.json`, `src/` directory
+
+## Benefits of Modern Approach
+
+1. **Better Integration**: Seamless integration with Nx 21's release lifecycle
+2. **Type Safety**: Better TypeScript support and IDE integration
+3. **Ecosystem Support**: Works with other Nx 21 ecosystem plugins
+4. **Future Proof**: No longer depends on legacy APIs that will be removed in Nx 22
+
+## Usage
+
+This package is automatically used when running `nx release` commands. No direct invocation needed.
+
+```bash
+# Version and release projects
+npx nx release
+
+# Create version plans
+npx nx release plan patch
+
+# Version with specific increment
+npx nx release version patch
+```

packages/nx-release-version/generators.json

@@ -1,19 +1,19 @@
 // @ts-check
 
-const { releaseVersionGenerator } = require('@nx/js/src/generators/release-version/release-version');
+const {REPO_ROOT} = require('../../scripts/consts');
+const JsVersionActions = require('@nx/js/src/release/version-actions').default;
 const fs = require('node:fs');
 const path = require('node:path');
-const { REPO_ROOT } = require('../../scripts/consts');
 
 /**
  * @returns {Promise<string[]>}
  */
 async function runSetVersion() {
-  const rnmPkgJson = require.resolve('react-native-macos/package.json');
-  const { updateReactNativeArtifacts } = require('../../scripts/releases/set-rn-artifacts-version');
+  const rnmPkgJsonPath = path.join(REPO_ROOT, 'packages', 'react-native', 'package.json');
+  const {updateReactNativeArtifacts} = require('../../scripts/releases/set-rn-artifacts-version');
 
-  const manifest = fs.readFileSync(rnmPkgJson, { encoding: 'utf-8' });
-  const { version } = JSON.parse(manifest);
+  const manifest = fs.readFileSync(rnmPkgJsonPath, {encoding: 'utf-8'});
+  const {version} = JSON.parse(manifest);
 
   await updateReactNativeArtifacts(version);
 
@@ -66,23 +66,59 @@ async function runSetVersion() {
   ];
 }
 
-/** @type {typeof releaseVersionGenerator} */
-module.exports = async function(tree, options) {
-  const { data, callback } = await releaseVersionGenerator(tree, options);
-  return {
-    data,
-    callback: async (tree, options) => {
-      const result = await callback(tree, options);
+/**
+ * Custom Version Actions for React Native macOS
+ * Extends the built-in JsVersionActions to add React Native artifact updates
+ */
+class ReactNativeMacOSVersionActions extends JsVersionActions {
+  /**
+   * @override
+   * Override updateProjectVersion to include React Native artifact updates
+   * @param {import('@nx/devkit').Tree} tree
+   * @param {string} newVersion
+   * @returns {Promise<string[]>}
+   */
+  async updateProjectVersion(tree, newVersion) {
+    // First, run the standard JS version update (package.json, etc.)
+    const standardLogMessages = await super.updateProjectVersion(tree, newVersion);
 
-      // Only update artifacts if there were changes
-      const changedFiles = Array.isArray(result) ? result : result.changedFiles;
-      if (changedFiles.length > 0) {
-        fs.writeFile(path.join(REPO_ROOT, '.rnm-publish'), '', () => null);
+    // Only update React Native artifacts for the react-native-macos project
+    if (this.projectGraphNode.name === 'react-native-macos') {
+      try {
+        // Create the .rnm-publish file to indicate versioning has occurred
+        fs.writeFileSync(path.join(REPO_ROOT, '.rnm-publish'), '');
+
+        // Update React Native artifacts
         const versionedFiles = await runSetVersion();
-        changedFiles.push(...versionedFiles);
+
+        // Add the versioned files to the tree so they are tracked by Nx
+        for (const filePath of versionedFiles) {
+          if (fs.existsSync(filePath)) {
+            const content = fs.readFileSync(filePath, 'utf-8');
+            const relativePath = path.relative(REPO_ROOT, filePath);
+            tree.write(relativePath, content);
+          }
+        }
+
+        return [
+          ...standardLogMessages,
+          `✅ Updated React Native platform artifacts for version ${newVersion}`,
+          `📁 Updated ${versionedFiles.length} platform-specific files`,
+          '🏷️  Created .rnm-publish marker file',
+        ];
+      } catch (error) {
+        console.error('Failed to update React Native artifacts:', error);
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        return [
+          ...standardLogMessages,
+          `❌ Failed to update React Native artifacts: ${errorMessage}`,
+        ];
       }
+    }
+
+    return standardLogMessages;
+  }
+}
 
-      return result;
-    },
-  };
-};
+module.exports = ReactNativeMacOSVersionActions;
+module.exports.default = ReactNativeMacOSVersionActions;

packages/nx-release-version/index.js

@@ -1,14 +1,11 @@
 {
-  "private": true,
-  "name": "@react-native-mac/nx-release-version",
+  "name": "@react-native-macos/nx-release-version",
   "version": "0.0.1-dev",
-  "description": "Nx Release plugin that adds post-versioning logic",
+  "description": "Nx Release Version Actions for React Native macOS",
   "homepage": "https://github.com/microsoft/react-native-macos/tree/HEAD/packages/nx-release-version#readme",
   "license": "MIT",
   "files": [
-    "generators.json",
-    "index.js",
-    "schema.json"
+    "index.js"
   ],
   "main": "index.js",
   "repository": {
@@ -17,14 +14,13 @@
     "directory": "packages/nx-release-version"
   },
   "dependencies": {
-    "@nx/js": "~20.0.0"
+    "@nx/js": "21.2.4"
   },
   "devDependencies": {
     "@rnx-kit/tsconfig": "^2.0.0",
     "typescript": "^5.6.3"
   },
   "engines": {
     "node": ">=18"
-  },
-  "generators": "./generators.json"
+  }
 }

packages/nx-release-version/package.json

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {RenderItemProps} from '@react-native-mac/virtualized-lists'; // [macOS]
+import type {RenderItemProps} from '@react-native-macos/virtualized-lists'; // [macOS]
 
 const ScrollView = require('../Components/ScrollView/ScrollView');
 const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');

packages/nx-release-version/schema.json

@@ -10,10 +10,10 @@
 
 'use strict';
 
-import {typeof FillRateHelper as FillRateHelperType} from '@react-native-mac/virtualized-lists'; // [macOS]
+import {typeof FillRateHelper as FillRateHelperType} from '@react-native-macos/virtualized-lists'; // [macOS]
 
 const FillRateHelper: FillRateHelperType =
-  require('@react-native-mac/virtualized-lists').FillRateHelper; // [macOS]
+  require('@react-native-macos/virtualized-lists').FillRateHelper; // [macOS]
 
-export type {FillRateInfo} from '@react-native-mac/virtualized-lists'; // [macOS]
+export type {FillRateInfo} from '@react-native-macos/virtualized-lists'; // [macOS]
 module.exports = FillRateHelper;

packages/react-native/Libraries/Inspector/NetworkOverlay.js

@@ -13,7 +13,7 @@ import type {
   ViewToken,
   VirtualizedListProps,
   ViewabilityConfig,
-} from '@react-native-mac/virtualized-lists'; // [macOS]
+} from '@react-native-macos/virtualized-lists'; // [macOS]
 import type {ScrollViewComponent} from '../Components/ScrollView/ScrollView';
 import type {StyleProp} from '../StyleSheet/StyleSheet';
 import type {ViewStyle} from '../StyleSheet/StyleSheetTypes';