feat: determine react-native → template from npm registry data

When we trigger a release of the template, we capture the version of react-native it's built with in the scripts.version field. This is accessible for all version of the template. We use this store from the CLI to figure out which template to install from when running `init`. Why? This means that we can effectively decouple our package version from the react-native package version. The 1:1 version mapping was done as a stop-gap in the 0.74 release, because of problems with release candiates and semver ordering. E.g. 0.75.0, 0.75.0-rc1, 0.75.0-rc2, etc... don't order sanely. What does this do? For example, if we discover a bug in the template for 0.75.0, previously we'd have to: - get react-native to run another release (very expensive), or - change the init logic (see 0.75.0-rc1.1 as an example). Now we just release another version of the template with the fix. As long as [email protected] is still set as the version, the cli will pick the latest published version of the template with a matching version. See the commit for more details about exactly how version are picked. [0] https://github.com/react-native-community/template/blob/main/scripts/updateReactNativeVersion.js#L66-L93
blakef · Aug 16, 2024 · df0647c · df0647c
1 parent 6a61d5d
commit df0647c
Show file tree

Hide file tree

Showing 7 changed files with 311 additions and 79 deletions.
diff --git a/packages/cli/src/commands/init/__tests__/version.test.ts b/packages/cli/src/commands/init/__tests__/version.test.ts
@@ -0,0 +1,41 @@
+import {createTemplateUri} from '../version';
+import type {Options} from '../types';
+
+const mockGetTemplateVersion = jest.fn();
+
+jest.mock('../../../tools/npm', () => ({
+  __esModule: true,
+  getTemplateVersion: (...args) => mockGetTemplateVersion(...args),
+}));
+
+const nullOptions = {} as Options;
+
+describe('createTemplateUri', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('for < 0.75', () => {
+    it('use react-native for the template', async () => {
+      expect(await createTemplateUri(nullOptions, '0.74.1')).toEqual(
+        '[email protected]',
+      );
+    });
+    it('looks DOES NOT use npm registry data to find the template', () => {
+      expect(mockGetTemplateVersion).not.toHaveBeenCalled();
+    });
+  });
+  describe('for >= 0.75', () => {
+    it('use @react-native-community/template for the template', async () => {
+      // Imagine for React Native 0.75.1, template 1.2.3 was prepared for this version
+      mockGetTemplateVersion.mockReturnValue('1.2.3');
+      expect(await createTemplateUri(nullOptions, '0.75.1')).toEqual(
+        '@react-native-community/[email protected]',
+      );
+    });
+
+    it('looks at uses npm registry data to find the matching @react-native-community/template', async () => {
+      await createTemplateUri(nullOptions, '0.75.0');
+      expect(mockGetTemplateVersion).toHaveBeenCalledWith('0.75.0');
+    });
+  });
+});
diff --git a/packages/cli/src/commands/init/constants.ts b/packages/cli/src/commands/init/constants.ts
@@ -0,0 +1,7 @@
+export const TEMPLATE_PACKAGE_COMMUNITY = '@react-native-community/template';
+export const TEMPLATE_PACKAGE_LEGACY = 'react-native';
+export const TEMPLATE_PACKAGE_LEGACY_TYPESCRIPT =
+  'react-native-template-typescript';
+
+// This version moved from inlining the template to using @react-native-community/template
+export const TEMPLATE_COMMUNITY_REACT_NATIVE_VERSION = '0.75.0';
diff --git a/packages/cli/src/commands/init/init.ts b/packages/cli/src/commands/init/init.ts
@@ -38,30 +38,11 @@ import {
 import semver from 'semver';
 import {executeCommand} from '../../tools/executeCommand';
 import DirectoryAlreadyExistsError from './errors/DirectoryAlreadyExistsError';
+import {createTemplateUri} from './version';
+import {TEMPLATE_COMMUNITY_REACT_NATIVE_VERSION} from './constants';
+import type {Options} from './types';
 
 const DEFAULT_VERSION = 'latest';
-// This version moved from inlining the template to using @react-native-community/template
-const TEMPLATE_COMMUNITY_REACT_NATIVE_VERSION = '0.75.0';
-const TEMPLATE_PACKAGE_COMMUNITY = '@react-native-community/template';
-const TEMPLATE_PACKAGE_LEGACY = 'react-native';
-const TEMPLATE_PACKAGE_LEGACY_TYPESCRIPT = 'react-native-template-typescript';
-
-type Options = {
-  template?: string;
-  npm?: boolean;
-  pm?: PackageManager.PackageManager;
-  directory?: string;
-  displayName?: string;
-  title?: string;
-  skipInstall?: boolean;
-  version: string;
-  packageName?: string;
-  installPods?: string | boolean;
-  platformName?: string;
-  skipGitInit?: boolean;
-  replaceDirectory?: string | boolean;
-  yarnConfigOptions?: Record<string, string>;
-};
 
 interface TemplateOptions {
   projectName: string;
@@ -397,63 +378,6 @@ function checkPackageManagerAvailability(
   return false;
 }
 
-async function createTemplateUri(
-  options: Options,
-  version: string,
-): Promise<string> {
-  if (options.platformName && options.platformName !== 'react-native') {
-    logger.debug('User has specified an out-of-tree platform, using it');
-    return `${options.platformName}@${version}`;
-  }
-
-  if (options.template === TEMPLATE_PACKAGE_LEGACY_TYPESCRIPT) {
-    logger.warn(
-      "Ignoring custom template: 'react-native-template-typescript'. Starting from React Native v0.71 TypeScript is used by default.",
-    );
-    return TEMPLATE_PACKAGE_LEGACY;
-  }
-
-  if (options.template) {
-    logger.debug(`Use the user provided --template=${options.template}`);
-    return options.template;
-  }
-
-  // 0.75.0-nightly-20240618-5df5ed1a8' -> 0.75.0
-  // 0.75.0-rc.1 -> 0.75.0
-  const simpleVersion = semver.coerce(version) ?? version;
-
-  // 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(
-    simpleVersion,
-    TEMPLATE_COMMUNITY_REACT_NATIVE_VERSION,
-  );
-
-  logger.debug(
-    `[template]: is '${version} (${simpleVersion})' < '${TEMPLATE_COMMUNITY_REACT_NATIVE_VERSION}' = ` +
-      (useLegacyTemplate
-        ? 'yes, look for template in react-native'
-        : 'no, look for template in @react-native-community/template'),
-  );
-
-  if (!useLegacyTemplate) {
-    if (/nightly/.test(version)) {
-      logger.debug(
-        "[template]: you're using a nightly version of react-native",
-      );
-      // Template nightly versions and react-native@nightly versions don't match (template releases at a much
-      // lower cadence). We have to assume the user is running against the latest nightly by pointing to the tag.
-      return `${TEMPLATE_PACKAGE_COMMUNITY}@nightly`;
-    }
-    return `${TEMPLATE_PACKAGE_COMMUNITY}@${version}`;
-  }
-
-  logger.debug(
-    `Using the legacy template because '${TEMPLATE_PACKAGE_LEGACY}' still contains a template folder`,
-  );
-  return `${TEMPLATE_PACKAGE_LEGACY}@${version}`;
-}
-
 async function createProject(
   projectName: string,
   directory: string,

diff --git a/packages/cli/src/commands/init/types.ts b/packages/cli/src/commands/init/types.ts
@@ -0,0 +1,18 @@
+import type {PackageManager} from '../../tools/packageManager';
+
+export type Options = {
+  template?: string;
+  npm?: boolean;
+  pm?: PackageManager;
+  directory?: string;
+  displayName?: string;
+  title?: string;
+  skipInstall?: boolean;
+  version: string;
+  packageName?: string;
+  installPods?: string | boolean;
+  platformName?: string;
+  skipGitInit?: boolean;
+  replaceDirectory?: string | boolean;
+  yarnConfigOptions?: Record<string, string>;
+};
diff --git a/packages/cli/src/commands/init/version.ts b/packages/cli/src/commands/init/version.ts
@@ -0,0 +1,69 @@
+import {logger} from '@react-native-community/cli-tools';
+import {getTemplateVersion} from '../../tools/npm';
+import semver from 'semver';
+
+import type {Options} from './types';
+import {
+  TEMPLATE_COMMUNITY_REACT_NATIVE_VERSION,
+  TEMPLATE_PACKAGE_COMMUNITY,
+  TEMPLATE_PACKAGE_LEGACY,
+  TEMPLATE_PACKAGE_LEGACY_TYPESCRIPT,
+} from './constants';
+
+export async function createTemplateUri(
+  options: Options,
+  version: string,
+): Promise<string> {
+  if (options.platformName && options.platformName !== 'react-native') {
+    logger.debug('User has specified an out-of-tree platform, using it');
+    return `${options.platformName}@${version}`;
+  }
+
+  if (options.template === TEMPLATE_PACKAGE_LEGACY_TYPESCRIPT) {
+    logger.warn(
+      "Ignoring custom template: 'react-native-template-typescript'. Starting from React Native v0.71 TypeScript is used by default.",
+    );
+    return TEMPLATE_PACKAGE_LEGACY;
+  }
+
+  if (options.template) {
+    logger.debug(`Use the user provided --template=${options.template}`);
+    return options.template;
+  }
+
+  // 0.75.0-nightly-20240618-5df5ed1a8' -> 0.75.0
+  // 0.75.0-rc.1 -> 0.75.0
+  const simpleVersion = semver.coerce(version) ?? version;
+
+  // 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(
+    simpleVersion,
+    TEMPLATE_COMMUNITY_REACT_NATIVE_VERSION,
+  );
+
+  logger.debug(
+    `[template]: is '${version} (${simpleVersion})' < '${TEMPLATE_COMMUNITY_REACT_NATIVE_VERSION}' = ` +
+      (useLegacyTemplate
+        ? 'yes, look for template in react-native'
+        : 'no, look for template in @react-native-community/template'),
+  );
+
+  if (!useLegacyTemplate) {
+    if (/nightly/.test(version)) {
+      logger.debug(
+        "[template]: you're using a nightly version of react-native",
+      );
+      // Template nightly versions and react-native@nightly versions don't match (template releases at a much
+      // lower cadence). We have to assume the user is running against the latest nightly by pointing to the tag.
+      return `${TEMPLATE_PACKAGE_COMMUNITY}@nightly`;
+    }
+    const templateVersion = await getTemplateVersion(version);
+    return `${TEMPLATE_PACKAGE_COMMUNITY}@${templateVersion}`;
+  }
+
+  logger.debug(
+    `Using the legacy template because '${TEMPLATE_PACKAGE_LEGACY}' still contains a template folder`,
+  );
+  return `${TEMPLATE_PACKAGE_LEGACY}@${version}`;
+}
diff --git a/packages/cli/src/tools/__tests__/npm-test.ts b/packages/cli/src/tools/__tests__/npm-test.ts
@@ -0,0 +1,71 @@
+import {getTemplateVersion} from '../npm';
+import assert from 'assert';
+
+let ref: any;
+
+global.fetch = jest.fn();
+
+function fetchReturn(json: any): void {
+  assert(global.fetch != null, 'You forgot to backup global.fetch!');
+  // @ts-ignore
+  global.fetch = jest.fn(() =>
+    Promise.resolve({json: () => Promise.resolve(json)}),
+  );
+}
+
+describe('getTemplateVersion', () => {
+  beforeEach(() => {
+    ref = global.fetch;
+  });
+  afterEach(() => {
+    global.fetch = ref;
+  });
+
+  it('should order matching versions with the most recent first', async () => {
+    const VERSION = '0.75.1';
+    fetchReturn({
+      versions: {
+        '3.2.1': {scripts: {version: VERSION}},
+        '1.0.0': {scripts: {version: '0.75.0'}},
+        '1.2.3': {scripts: {version: VERSION}},
+      },
+      time: {
+        '3.2.1': '2024-08-15T00:00:00.000Z',
+        '1.0.0': '2024-08-15T10:10:10.000Z',
+        '1.2.3': '2024-08-16T00:00:00.000Z', // Last published version
+      },
+    });
+
+    expect(await getTemplateVersion(VERSION)).toEqual('1.2.3');
+  });
+
+  it('should matching latest MAJOR.MINOR if MAJOR.MINOR.PATCH has no match', async () => {
+    fetchReturn({
+      versions: {
+        '3.2.1': {scripts: {version: '0.75.1'}},
+        '3.2.2': {scripts: {version: '0.75.2'}},
+      },
+      time: {
+        '3.2.1': '2024-08-15T00:00:00.000Z',
+        '3.2.2': '2024-08-16T00:00:00.000Z', // Last published version
+      },
+    });
+
+    expect(await getTemplateVersion('0.75.3')).toEqual('3.2.2');
+  });
+
+  it('should NOT matching when MAJOR.MINOR is not found', async () => {
+    fetchReturn({
+      versions: {
+        '3.2.1': {scripts: {version: '0.75.1'}},
+        '3.2.2': {scripts: {version: '0.75.2'}},
+      },
+      time: {
+        '3.2.1': '2024-08-15T00:00:00.000Z',
+        '3.2.2': '2024-08-16T00:00:00.000Z', // Last published version
+      },
+    });
+
+    expect(await getTemplateVersion('0.76.0')).toEqual(undefined);
+  });
+});