Add template support

packages/create-react-app-template-typescript/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "create-react-app-template-typescript",
+  "version": "1.0.0",
+  "description": "Base TypeScript template for Create React App.",
+  "repository": "facebook/create-react-app",
+  "license": "MIT",
+  "engines": {
+    "node": ">=6"
+  },
+  "bugs": {
+    "url": "https://github.com/facebook/create-react-app/issues"
+  },
+  "files": [
+    "public",
+    "src",
+    "gitignore",
+    "README.md",
+    "utils"
+  ],
+  "peerDependencies": {
+    "@types/node": "^10.12.24",
+    "@types/react": "^16.8.6",
+    "@types/react-dom": "^16.8.2",
+    "@types/jest": "^24.0.9",
+    "typescript": "^3.3.3"
+  }
+}

packages/create-react-app-template/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "create-react-app-template",
+  "version": "1.0.0",
+  "description": "Base template for Create React App.",
+  "repository": "facebook/create-react-app",
+  "license": "MIT",
+  "engines": {
+    "node": ">=6"
+  },
+  "bugs": {
+    "url": "https://github.com/facebook/create-react-app/issues"
+  },
+  "files": [
+    "public",
+    "src",
+    "gitignore",
+    "README.md",
+    "utils"
+  ],
+  "peerDependencies": {
+  }
+}

packages/create-react-app-template/template/src/index.css

@@ -0,0 +1,14 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

packages/create-react-app/createReactApp.js

@@ -71,13 +71,17 @@ const program = new commander.Command(packageJson.name)
   })
   .option('--verbose', 'print additional logs')
   .option('--info', 'print environment debug info')
+  .option(
+    '--template <template-name>',
+    'specify the initial template for your project'
+  )
   .option(
     '--scripts-version <alternative-package>',
     'use a non-standard version of react-scripts'
   )
   .option('--use-npm')
   .option('--use-pnp')
-  .option('--typescript')
+  .option('--typescript') // Deprecated in favor of `--template`
   .allowUnknownOption()
   .on('--help', () => {
     console.log(`    Only ${chalk.green('<project-directory>')} is required.`);
@@ -165,22 +169,14 @@ function printValidationResults(results) {
   }
 }
 
-const hiddenProgram = new commander.Command()
-  .option(
-    '--internal-testing-template <path-to-template>',
-    '(internal usage only, DO NOT RELY ON THIS) ' +
-      'use a non-standard application template'
-  )
-  .parse(process.argv);
-
 createApp(
   projectName,
   program.verbose,
   program.scriptsVersion,
   program.useNpm,
   program.usePnp,
-  program.typescript,
-  hiddenProgram.internalTestingTemplate
+  program.template,
+  program.typescript
 );
 
 function createApp(
@@ -189,8 +185,8 @@ function createApp(
   version,
   useNpm,
   usePnp,
-  useTypescript,
-  template
+  templateName,
+  useTypeScript
 ) {
   const root = path.resolve(name);
   const appName = path.basename(root);
@@ -284,16 +280,32 @@ function createApp(
     }
   }
 
+  if (useTypeScript) {
+    console.log(
+      chalk.yellow(
+        'The --typescript option has been deprecated and will be removed in a future release.'
+      )
+    );
+    console.log(
+      chalk.yellow(
+        `In future, please use ${chalk.cyan('--template typescript')}.`
+      )
+    );
+    console.log();
+    if (!templateName) {
+      templateName = 'typescript';
+    }
+  }
+
   run(
     root,
     appName,
     version,
     verbose,
     originalDirectory,
-    template,
+    templateName,
     useYarn,
-    usePnp,
-    useTypescript
+    usePnp
   );
 }
 
@@ -306,7 +318,7 @@ function shouldUseYarn() {
   }
 }
 
-function install(root, useYarn, usePnp, dependencies, verbose, isOnline) {
+function install(root, useYarn, usePnp, packages, verbose, isOnline) {
   return new Promise((resolve, reject) => {
     let command;
     let args;
@@ -319,7 +331,7 @@ function install(root, useYarn, usePnp, dependencies, verbose, isOnline) {
       if (usePnp) {
         args.push('--enable-pnp');
       }
-      [].push.apply(args, dependencies);
+      [].push.apply(args, packages);
 
       // Explicitly set cwd() to work around issues like
       // https://github.com/facebook/create-react-app/issues/3326.
@@ -342,7 +354,7 @@ function install(root, useYarn, usePnp, dependencies, verbose, isOnline) {
         '--save-exact',
         '--loglevel',
         'error',
-      ].concat(dependencies);
+      ].concat(packages);
 
       if (usePnp) {
         console.log(chalk.yellow("NPM doesn't support PnP."));
@@ -376,52 +388,53 @@ function run(
   originalDirectory,
   template,
   useYarn,
-  usePnp,
-  useTypescript
+  usePnp
 ) {
-  const packageToInstall = getInstallPackage(version, originalDirectory);
-  const allDependencies = ['react', 'react-dom', packageToInstall];
-  if (useTypescript) {
-    // TODO: get user's node version instead of installing latest
-    allDependencies.push(
-      '@types/node',
-      '@types/react',
-      '@types/react-dom',
-      '@types/jest',
-      'typescript'
-    );
-  }
+  const scriptsToInstall = getInstallPackage(version, originalDirectory);
+  const templateToInstall = getTemplateInstallPackage(
+    template,
+    originalDirectory
+  );
+  const packagesToInstall = [
+    'react',
+    'react-dom',
+    templateToInstall,
+    scriptsToInstall,
+  ];
 
   console.log('Installing packages. This might take a couple of minutes.');
-  getPackageName(packageToInstall)
-    .then(packageName =>
+  Promise.all(packagesToInstall.map(getPackageName))
+    .then(packageNames =>
       checkIfOnline(useYarn).then(isOnline => ({
         isOnline: isOnline,
-        packageName: packageName,
+        template: packageNames[2],
+        scripts: packageNames[3],
       }))
     )
     .then(info => {
       const isOnline = info.isOnline;
-      const packageName = info.packageName;
+      const template = info.template;
+      const scripts = info.scripts;
       console.log(
-        `Installing ${chalk.cyan('react')}, ${chalk.cyan(
-          'react-dom'
-        )}, and ${chalk.cyan(packageName)}...`
+        `Installing ${chalk.cyan(template)} with ${chalk.cyan(scripts)}...`
       );
       console.log();
 
       return install(
         root,
         useYarn,
         usePnp,
-        allDependencies,
+        packagesToInstall,
         verbose,
         isOnline
-      ).then(() => packageName);
+      ).then(() => ({
+        template,
+        scripts,
+      }));
     })
-    .then(async packageName => {
-      checkNodeVersion(packageName);
-      setCaretRangeForRuntimeDeps(packageName);
+    .then(async packageNames => {
+      checkNodeVersion(packageNames.scripts);
+      setCaretRangeForRuntimeDeps(packageNames.scripts);
 
       const pnpPath = path.resolve(process.cwd(), '.pnp.js');
 
@@ -432,9 +445,9 @@ function run(
           cwd: process.cwd(),
           args: nodeArgs,
         },
-        [root, appName, verbose, originalDirectory, template],
+        [root, appName, verbose, originalDirectory],
         `
-        var init = require('${packageName}/scripts/init.js');
+        var init = require('${packageNames.scripts}/scripts/init.js');
         init.apply(null, JSON.parse(process.argv[1]));
       `
       );
@@ -487,6 +500,29 @@ function run(
     });
 }
 
+function getTemplateInstallPackage(templateName, originalDirectory) {
+  let templateToInstall = 'create-react-app-template';
+  if (templateName) {
+    if (templateName.startsWith('file:')) {
+      // Handle local templates.
+      templateToInstall = `file:${path.resolve(
+        originalDirectory,
+        templateName.match(/^file:(.*)?$/)[1]
+      )}`;
+    } else if (
+      templateName.includes('://') ||
+      templateName.match(/^.+\.(tgz|tar\.gz)$/)
+    ) {
+      // Handle remote and packaged templates.
+      templateToInstall = templateName;
+    } else if (!templateName.startsWith(templateToInstall)) {
+      // Add prefix `create-react-app-template` to non-prefixed templateNames.
+      templateToInstall += `-${templateName}`;
+    }
+  }
+  return templateToInstall;
+}
+
 function getInstallPackage(version, originalDirectory) {
   let packageToInstall = 'react-scripts';
   const validSemver = semver.valid(version);

packages/react-scripts/package.json

@@ -15,8 +15,6 @@
     "config",
     "lib",
     "scripts",
-    "template",
-    "template-typescript",
     "utils"
   ],
   "bin": {