Support versioned/tagged shorthand templates

[emin93]

Environment

System:
    OS: macOS 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
    Memory: 3.42 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.3.1 - /usr/local/bin/node
    npm: 6.10.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    Android SDK:
      API Levels: 23, 25, 27, 28
      Build Tools: 23.0.1, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.2, 27.0.3, 28.0.3
      System Images: android-28 | Google APIs Intel x86 Atom
      Android NDK: 20.0.5594570
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5522156
    Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild

Description

When creating a project with a template that has an npm dist tag on it, the CLI fails with the following error:

✔ Downloading template
✖ Copying template
error Error: Cannot find module '/var/folders/kw/jlf9d4c53cx2rk1d_v43p1zm0000gn/T/rncli-init-template-HFTPnQ/node_modules/typescript/template.config'
Require stack:
- /Users/emin93/.npm/_npx/6297/lib/node_modules/react-native/node_modules/@react-native-community/cli/build/commands/init/template.js
- /Users/emin93/.npm/_npx/6297/lib/node_modules/react-native/node_modules/@react-native-community/cli/build/commands/init/init.js
- /Users/emin93/.npm/_npx/6297/lib/node_modules/react-native/node_modules/@react-native-community/cli/build/commands/init/index.js
- /Users/emin93/.npm/_npx/6297/lib/node_modules/react-native/node_modules/@react-native-community/cli/build/commands/index.js
- /Users/emin93/.npm/_npx/6297/lib/node_modules/react-native/node_modules/@react-native-community/cli/build/cliEntry.js
- /Users/emin93/.npm/_npx/6297/lib/node_modules/react-native/node_modules/@react-native-community/cli/build/index.js
- /Users/emin93/.npm/_npx/6297/lib/node_modules/react-native/cli.js

The issue doesn't happen when I initialize the project with the local version of the template. I checked the npm tarball (npm pack react-native-template-typescript@next) and the template.config.js is there. I quickly had a look at the packageManager.js but I couldn't find the issue there either. Starting to run out of ideas 😢.

Reproducible Demo

npx react-native init MyApp --template=typescript@next

[thymikee]

Typescript template is in the process of adding support for new init. Please give them some time.

[emin93]

Ummm, I am the maintainer of the TypeScript template and having the issue while trying to add support for the new init 😅.

/extension
Locally it works just fine: npx react-native init MyApp --template=file:///Users/emin93/Documents/Projects/react-native-template-typescript but after releasing with next tag, I got the described issue. Maybe the next tag gets ignored when using init?

[thymikee]

Ah, I see. It's because we don't yet support versions/tags of shorthand templates. Would you like to add it? :)

[thymikee]

The code is here:

cli/packages/cli/src/commands/init/templateName.js

Lines 74 to 91 in 7220d3e

	async function tryTemplateShorthand(templateName: string) {
	if (templateName.match(FILE_PROTOCOL) || templateName.match(HTTP_PROTOCOL)) {
	return templateName;
	}
	try {
	const reactNativeTemplatePackage = `react-native-template-${templateName}`;
	const response = await fetch(
	`https://registry.yarnpkg.com/${reactNativeTemplatePackage}/latest`,
	);
	if (JSON.parse(response).name) {
	return reactNativeTemplatePackage;
	}
	} catch (e) {
	// we expect this to fail when `file://` protocol or regular module is passed
	}
	return templateName;
	}

We take latest currently, but need to take whatever user passed after @ and fall back to latest.

[emin93]

Oh okay, I thought so 😄. Yes, let me take a deep dive into how the template setup works. Unfortunately I think I can't find the time anymore this week, so please be a little patient with me 🙈.

[emin93]

Ah I see, seems to be easier than I thought.

[thymikee]

Sure, take your time 👍. Or maybe @Esemesek or @maciejsimka would like to take a stab :)

[Taym95]

I am new to react-native-cliworld I would like to give this issue a try!

[thymikee]

@Taym95 go for it! Looks like @emin93 is busy and I'm sure you can make it :)