refactor: init now expects templates to have react-native version set

For 0.75's previous RCs, we didn't have the infrastructure in place to
tag @react-native-community/templates 0.75-stable branch correctly, as
well as publishing the corresponding version to npm.

For example:

If @react-native-community/[email protected] is the latest version
published, and I specified --version next: I'd expect 0.75.1 of the
template to be used with 0.75.0-rc.1 of react-native.

The downside of this approach is, if you init an older version then
things might not work.  You'd have to specify the matching template
using --template @react-native-community/template@<some version>. Given
that init is intended for new projects this isn't a concern for most
users.

We could look at abusing the `scripts` field to expose the corresponding
version of react native in the npm registry:

  https://registry.npmjs.org/@react-native-community/template

Something like: "scripts": { "version": "0.75.1-rc.2" }

Author: blakef

packages/cli/src/commands/init/__tests__/editTemplate.test.ts

@@ -10,8 +10,6 @@ import {
   replacePlaceholderWithPackageName,
   validatePackageName,
   replaceNameInUTF8File,
-  updateDependencies,
-  normalizeReactNativeDeps,
 } from '../editTemplate';
 import semver from 'semver';
 
@@ -202,67 +200,6 @@ describe('changePlaceholderInTemplate', () => {
   );
 });
 
-const samplePackageJson: string = `{
-  "name": "HelloWorld",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "android": "react-native run-android",
-    "ios": "react-native run-ios",
-    "lint": "eslint .",
-    "start": "react-native start",
-    "test": "jest"
-  },
-  "dependencies": {
-    "react": "19.0.0-rc-fb9a90fa48-20240614",
-    "react-native": "1000.0.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@babel/preset-env": "^7.20.0",
-    "@babel/runtime": "^7.20.0",
-    "@react-native/babel-preset": "0.75.0-main",
-    "@react-native/eslint-config": "0.75.0-main",
-    "@react-native/metro-config": "0.75.0-main",
-    "@react-native/typescript-config": "0.75.0-main",
-    "@types/react": "^18.2.6",
-    "@types/react-test-renderer": "^18.0.0",
-    "babel-jest": "^29.6.3",
-    "eslint": "^8.19.0",
-    "jest": "^29.6.3",
-    "prettier": "2.8.8",
-    "react-test-renderer": "19.0.0-rc-fb9a90fa48-20240614",
-    "typescript": "5.0.4"
-  },
-  "engines": {
-    "node": ">=18"
-  }
-}`;
-
-describe('updateDependencies', () => {
-  beforeEach(() => {
-    jest.spyOn(process, 'cwd').mockImplementation(() => testPath);
-    jest.spyOn(fs, 'writeFileSync');
-    jest.spyOn(fs, 'readFileSync').mockImplementation(() => samplePackageJson);
-  });
-
-  afterEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  it('updates react-native', () => {
-    updateDependencies({
-      dependencies: {
-        'react-native': '0.75.0',
-      },
-    });
-    expect(fs.writeFileSync as jest.Mock).toHaveBeenCalledWith(
-      expect.anything(),
-      samplePackageJson.replace('1000.0.0', '0.75.0'),
-    );
-  });
-});
-
 describe('replacePlaceholderWithPackageName', () => {
   beforeEach(() => {
     jest.spyOn(process, 'cwd').mockImplementation(() => testPath);
@@ -432,25 +369,3 @@ describe('replaceNameInUTF8File', () => {
     expect(fsWriteFileSpy).toHaveBeenCalledTimes(0);
   });
 });
-
-describe('normalizeReactNativeDeps', () => {
-  it('returns only @react-native/* dependencies updated to a specific version', () => {
-    const devDependencies = {
-      '@babel/core': '^7.20.0',
-      '@react-native/babel-preset': '0.75.0-main',
-      '@react-native/eslint-config': '0.75.0-main',
-      '@react-native/metro-config': '0.75.0-main',
-      '@react-native/typescript-config': '0.75.0-main',
-      '@types/react': '^18.2.6',
-      '@types/react-test-renderer': '^18.0.0',
-      eslint: '^8.19.0',
-      'react-test-renderer': '19.0.0-rc-fb9a90fa48-20240614',
-    };
-    expect(normalizeReactNativeDeps(devDependencies, '0.75.0')).toMatchObject({
-      '@react-native/babel-preset': '0.75.0',
-      '@react-native/eslint-config': '0.75.0',
-      '@react-native/metro-config': '0.75.0',
-      '@react-native/typescript-config': '0.75.0',
-    });
-  });
-});

packages/cli/src/commands/init/editTemplate.ts

@@ -15,15 +15,6 @@ interface PlaceholderConfig {
   packageName?: string;
 }
 
-interface NpmPackageDependencies {
-  dependencies?: {
-    [name: string]: string;
-  };
-  devDependencies?: {
-    [name: string]: string;
-  };
-}
-
 /**
   TODO: This is a default placeholder for title in react-native template.
   We should get rid of this once custom templates adapt `placeholderTitle` in their configurations.
@@ -235,35 +226,6 @@ export async function replacePlaceholderWithPackageName({
   }
 }
 
-export function updateDependencies(update: NpmPackageDependencies) {
-  logger.debug('Updating package.json dependencies:');
-  const pkgJsonPath = path.join(process.cwd(), 'package.json');
-
-  const pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, 'utf8'));
-
-  for (const [pkg, value] of Object.entries(update.dependencies ?? {})) {
-    const old = pkgJson.dependencies[pkg];
-    if (old) {
-      logger.debug(`${pkg}: ${old} → ${value}`);
-    } else {
-      logger.debug(`${pkg}: ${value}`);
-    }
-    pkgJson.dependencies[pkg] = value;
-  }
-
-  for (const [pkg, value] of Object.entries(update.devDependencies ?? {})) {
-    const old = pkgJson.devDependencies[pkg];
-    if (old) {
-      logger.debug(`${pkg}: ${old} → ${value}`);
-    } else {
-      logger.debug(`${pkg}: ${value}`);
-    }
-    pkgJson.devDependencies[pkg] = value;
-  }
-
-  fs.writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 2));
-}
-
 export async function changePlaceholderInTemplate({
   projectName,
   placeholderName,
@@ -307,25 +269,3 @@ export async function changePlaceholderInTemplate({
     }
   }
 }
-
-type Packages = {
-  [pkgs: string]: string;
-};
-
-const REACT_NATIVE_SCOPE = '@react-native/';
-
-/**
- * Packages that are scoped under @react-native need a consistent version
- */
-export function normalizeReactNativeDeps(
-  deps: Packages | undefined,
-  version: string,
-): Packages {
-  const updated: Packages = {};
-  for (const key of Object.keys(deps ?? {}).filter((pkg) =>
-    pkg.startsWith(REACT_NATIVE_SCOPE),
-  )) {
-    updated[key] = version;
-  }
-  return updated;
-}

packages/cli/src/commands/init/init.ts

@@ -19,11 +19,7 @@ import {
   copyTemplate,
   executePostInitScript,
 } from './template';
-import {
-  changePlaceholderInTemplate,
-  updateDependencies,
-  normalizeReactNativeDeps,
-} from './editTemplate';
+import {changePlaceholderInTemplate} from './editTemplate';
 import * as PackageManager from '../../tools/packageManager';
 import banner from './banner';
 import TemplateAndVersionError from './errors/TemplateAndVersionError';
@@ -220,7 +216,6 @@ async function createFromTemplate({
   installCocoaPods,
   replaceDirectory,
   yarnConfigOptions,
-  version,
 }: TemplateOptions): Promise<TemplateReturnType> {
   logger.debug('Initializing new project');
   // Only print out the banner if we're not in a CI
@@ -291,35 +286,6 @@ async function createFromTemplate({
       packageName,
     });
 
-    // Update the react-native dependency if using the new @react-native-community/template.
-    // We can figure this out as it ships with [email protected] set to a dummy version.
-    const templatePackageJson = JSON.parse(
-      fs.readFileSync(path.join(process.cwd(), 'package.json'), 'utf8'),
-    );
-    if (templatePackageJson.dependencies?.['react-native'] === '1000.0.0') {
-      // Since 0.75, the version of all @react-native/ packages are pinned to the version of
-      // react native.  Enforce this when updating versions.
-      const concreteVersion = await npmResolveConcreteVersion(
-        'react-native',
-        version,
-      );
-      updateDependencies({
-        dependencies: {
-          'react-native': concreteVersion,
-          ...normalizeReactNativeDeps(
-            templatePackageJson.dependencies,
-            concreteVersion,
-          ),
-        },
-        devDependencies: {
-          ...normalizeReactNativeDeps(
-            templatePackageJson.devDependencies,
-            concreteVersion,
-          ),
-        },
-      });
-    }
-
     if (packageManager === 'yarn' && shouldBumpYarnVersion) {
       await bumpYarnVersion(false, projectDirectory);
     }
@@ -462,11 +428,20 @@ async function createTemplateUri(
     version,
   );
 
+  const validSemverVersion = semver.coerce(version)?.version;
+
+  if (validSemverVersion == null) {
+    logger.warn(
+      `Version: '${version}' is in-valid semver, could not determine which template to used.`,
+    );
+    process.exit(1);
+  }
+
   // Test #2: Does the react-native@version package *not* have a template embedded. We know that
   //          this applies to all version before 0.75. The 1st release candidate is the minimal
   //          version that has no template.
   const useLegacyTemplate = semver.lt(
-    version,
+    validSemverVersion,
     TEMPLATE_COMMUNITY_REACT_NATIVE_VERSION,
   );
 
@@ -501,25 +476,32 @@ async function createProject(
 ): Promise<TemplateReturnType> {
   // Handle these cases (when community template is published and react-native >= 0.75
   //
-  // +==================================================================+==========+==============+
-  // | Arguments                                                        | Template | React Native |
-  // +==================================================================+==========+==============+
-  // | <None>                                                           | latest   | latest       |
-  // +------------------------------------------------------------------+----------+--------------+
-  // | --version 0.75.0                                                 | 0.75.0   | 0.75.0       |
-  // +------------------------------------------------------------------+----------+--------------+
-  // | --template @react-native-community/[email protected]               | 0.75.1   | latest       |
-  // +------------------------------------------------------------------+----------+--------------+
-  // | --template @react-native-community/[email protected] --version 0.75| 0.75.1   | 0.75.x       |
-  // +------------------------------------------------------------------+----------+--------------+
+  // +==================================================================+==========+===================+
+  // | Arguments                                                        | Template |   React Native    |
+  // +==================================================================+==========+===================+
+  // | <None>                                                           | 0.74.x   | 0.74.5 (latest)   |
+  // +------------------------------------------------------------------+----------+-------------------+
+  // | --version next                                                   | 0.75.x   | 0.75.0-rc.1 (next)|
+  // +------------------------------------------------------------------+----------+-------------------+
+  // | --version 0.75.0                                                 | 0.75.x   | 0.75.0            |
+  // +------------------------------------------------------------------+----------+-------------------+
+  // | --template @react-native-community/[email protected]               | 0.75.1   | latest            |
+  // +------------------------------------------------------------------+----------+-------------------+
+  // | --template @react-native-community/[email protected] --version 0.75| 0.75.1   | 0.75.x            |
+  // +------------------------------------------------------------------+----------+-------------------+
   //
   // 1. If you specify `--version 0.75.0` and `@react-native-community/[email protected]` is *NOT*
   // published, then `init` will exit and suggest explicitly using the `--template` argument.
   //
   // 2. `--template` will always win over `--version` for the template.
   //
   // 3. For version < 0.75, the template ships with react-native.
-  const templateUri = await createTemplateUri(options, version);
+  const v = semver.parse(version);
+  if (v == null) {
+    throw new Error(`--version=${version} isn't valid SEMVER`);
+  }
+  const templateVersion = `${v.major}.${v.minor}`;
+  const templateUri = await createTemplateUri(options, templateVersion);
 
   return createFromTemplate({
     projectName,