Support shorthand scoped templates (#8298)

facebook · Jan 12, 2020 · fa85f03 · fa85f03
1 parent c03bb36
commit fa85f03
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/docusaurus/docs/custom-templates.md b/docusaurus/docs/custom-templates.md
@@ -9,6 +9,8 @@ Custom Templates enable you to select a template to create your project from, wh
 
 You'll notice that Custom Templates are always named in the format `cra-template-[template-name]`, however you only need to provide the `[template-name]` to the creation command.
 
+Scoped templates are also supported, under the name `@[scope-name]/cra-template` or `@[scope-name]/cra-template-[template-name]`, which can be installed via `@[scope]` and `@[scope]/[template-name]` respectively.
+
 ### npm
 
 ```sh

diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js
@@ -640,10 +640,25 @@ function getTemplateInstallPackage(template, originalDirectory) {
       const scope = packageMatch[1] || '';
       const templateName = packageMatch[2];
 
-      const name = templateName.startsWith(templateToInstall)
-        ? templateName
-        : `${templateToInstall}-${templateName}`;
-      templateToInstall = `${scope}${name}`;
+      if (
+        templateName === templateToInstall ||
+        templateName.startsWith(`${templateToInstall}-`)
+      ) {
+        // Covers:
+        // - cra-template
+        // - @SCOPE/cra-template
+        // - cra-template-NAME
+        // - @SCOPE/cra-template-NAME
+        templateToInstall = `${scope}${templateName}`;
+      } else if (templateName.startsWith('@')) {
+        // Covers using @SCOPE only
+        templateToInstall = `${templateName}/${templateToInstall}`;
+      } else {
+        // Covers templates without the `cra-template` prefix:
+        // - NAME
+        // - @SCOPE/NAME
+        templateToInstall = `${scope}${templateToInstall}-${templateName}`;
+      }
     }
   }