feat: check npm and github for template (react-native-community#2334)

Author: blakef

docs/commands.md

@@ -22,7 +22,7 @@ React Native CLI comes with following commands:
 
 > Available since 0.60.0
 
-> **IMPORTANT**: Please note that this command is not available through `react-native-cli`, hence you need to either invoke it directly from `@react-native-community/cli` or `react-native` package which proxies binary to this CLI since 0.60.0, so it's possible to use it with e.g. `npx`.
+> **IMPORTANT**: Please note that this command is not available through `react-native-cli`, hence you need to either invoke it directly from the `@react-native-community/cli`  package which proxies binary to this CLI since 0.60.0, so it's possible to use it with e.g. `npx`.
 
 Usage (with `npx`):
 
@@ -36,7 +36,7 @@ Initialize a new React Native project named <projectName> in a directory of the
 
 #### `--version <string>`
 
-Shortcut for `--template react-native@version`.
+The version of React Native to use with the template.
 
 #### `--directory <string>`
 
@@ -58,10 +58,12 @@ Uses a custom template. Accepts following template sources:
 Example:
 
 ```sh
-npx react-native@latest init MyApp --template react-native-custom-template
-npx react-native@latest init MyApp --template file:///Users/name/template-path
-npx react-native@latest init MyApp --template file:///Users/name/template-name-1.0.0.tgz
-npx react-native@latest init MyApp --template Esemesek/react-native-new-template
+npx react-native-community/cli@latest init MyApp --template react-native-community/cli-custom-template
+npx react-native-community/cli@latest init MyApp --template file:///Users/name/template-path
+npx react-native-community/cli@latest init MyApp --template file:///Users/name/template-name-1.0.0.tgz
+npx react-native-community/cli@latest init MyApp --template Esemesek/react-native-community/cli-new-template
+# Use a specific version of the community template with the nightly release of React Native
+npx react-native-community/cli@latest init MyApp --template @react-native-community/template0.74.0 --version nightly
 ```
 
 A template is any directory or npm package that contains a `template.config.js` file in the root with the following type:

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

@@ -9,7 +9,7 @@ export default {
   options: [
     {
       name: '--version <string>',
-      description: 'Shortcut for `--template react-native@version`',
+      description: 'React Native version to install in the template',
     },
     {
       name: '--template <string>',

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

@@ -1,5 +1,6 @@
 import os from 'os';
 import path from 'path';
+import {execSync} from 'child_process';
 import fs, {readdirSync} from 'fs-extra';
 import {validateProjectName} from './validate';
 import chalk from 'chalk';
@@ -37,6 +38,9 @@ import {executeCommand} from '../../tools/executeCommand';
 import DirectoryAlreadyExistsError from './errors/DirectoryAlreadyExistsError';
 
 const DEFAULT_VERSION = 'latest';
+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;
@@ -389,21 +393,80 @@ function checkPackageManagerAvailability(
   return false;
 }
 
-function createTemplateUri(options: Options, version: string): string {
-  const isTypescriptTemplate =
-    options.template === 'react-native-template-typescript';
+function getNpmRegistryUrl(): string {
+  try {
+    return execSync('npm config get registry').toString().trim();
+  } catch {
+    return 'https://registry.npmjs.org/';
+  }
+}
+
+async function urlExists(url: string): Promise<boolean> {
+  try {
+    // @ts-ignore-line: TS2304
+    const {status} = await fetch(url, {method: 'HEAD'});
+    return (
+      [
+        200, // OK
+        301, // Moved Permanemently
+        302, // Found
+        304, // Not Modified
+        307, // Temporary Redirect
+        308, // Permanent Redirect
+      ].indexOf(status) !== -1
+    );
+  } catch {
+    return false;
+  }
+}
 
-  // This allows to correctly retrieve template uri for out of tree platforms.
-  const platform = options.platformName || 'react-native';
+async function createTemplateUri(options: Options): Promise<string> {
+  if (options.platformName) {
+    logger.debug('User has specified an out-of-tree platform, using it');
+    return `${options.platformName}@${options.version ?? DEFAULT_VERSION}`;
+  }
 
-  if (isTypescriptTemplate) {
+  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 platform;
+    return TEMPLATE_PACKAGE_LEGACY;
+  }
+
+  if (options.template) {
+    logger.debug(`Use the user provided --template=${options.template}`);
+    return options.template;
+  }
+
+  // Figure out whether we should use the @react-native-community/template over react-native/template,
+  // this requires 2 tests.
+  const registryHost = getNpmRegistryUrl();
+
+  // Test #1: Does the @react-native-community/template@latest exist?
+  const templateNpmRegistryUrl = `${registryHost}${TEMPLATE_PACKAGE_COMMUNITY}/latest`;
+  const canUseCommunityTemplate = await urlExists(templateNpmRegistryUrl);
+
+  const reactNativeVersion = options.version ?? DEFAULT_VERSION;
+  let gitTagFromVersion = semver.valid(reactNativeVersion);
+  if (gitTagFromVersion != null) {
+    // The React Native project prefixes tags with a 'v', for example v0.73.5,
+    gitTagFromVersion = `v${gitTagFromVersion}`;
+  } else {
+    gitTagFromVersion = reactNativeVersion;
   }
 
-  return options.template || `${platform}@${version}`;
+  // Test #2: Does the react-native@version package *not* have a template embedded.
+  const reactNativeGithubTemplateUrl = `https://raw.githubusercontent.com/facebook/react-native/${gitTagFromVersion}/packages/react-native/template/package.json`;
+  const useLegacyTemplate = await urlExists(reactNativeGithubTemplateUrl);
+
+  if (!useLegacyTemplate && canUseCommunityTemplate) {
+    return `${TEMPLATE_PACKAGE_COMMUNITY}@latest`;
+  }
+
+  logger.debug(
+    `Using the legacy template because '${TEMPLATE_PACKAGE_LEGACY}' still contains a template folder`,
+  );
+  return `${TEMPLATE_PACKAGE_LEGACY}@${reactNativeVersion}`;
 }
 
 async function createProject(
@@ -413,7 +476,21 @@ async function createProject(
   shouldBumpYarnVersion: boolean,
   options: Options,
 ): Promise<TemplateReturnType> {
-  const templateUri = createTemplateUri(options, version);
+  // Handle these cases (when community template is published and react-native
+  // doesn't have a template in 'react-native/template'):
+  //
+  // +==================================================================+==========+==============+
+  // | Arguments                                                        | Template | React Native |
+  // +==================================================================+==========+==============+
+  // | <None>                                                           | latest   | latest       |
+  // +------------------------------------------------------------------+----------+--------------+
+  // | --version 0.75.0                                                 | latest   | 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       |
+  // +------------------------------------------------------------------+----------+--------------+
+  const templateUri = await createTemplateUri(options);
 
   return createFromTemplate({
     projectName,
@@ -462,7 +539,7 @@ export default (async function initialize(
   }
 
   const root = process.cwd();
-  const version = options.version || DEFAULT_VERSION;
+  const version = options.version ?? DEFAULT_VERSION;
 
   const directoryName = path.relative(root, options.directory || projectName);
   const projectFolder = path.join(root, directoryName);