Add typescript plugin

Author: Timer

packages/react-dev-utils/plugins.js

@@ -20,7 +20,7 @@ const getPackageJson = require('read-pkg-up').sync;
 const { dirname, isAbsolute } = require('path');
 const semver = require('semver');
 
-function applyPlugins(config, plugins, { paths }) {
+function applyPlugins(config, plugins, { path, paths }) {
   const pluginPaths = plugins
     .map(p => {
       try {
@@ -32,11 +32,20 @@ function applyPlugins(config, plugins, { paths }) {
     .filter(e => e != null);
   for (const pluginPath of pluginPaths) {
     const { apply } = require(pluginPath);
-    config = apply(config, { paths });
+    config = apply(config, { path, paths });
   }
   return config;
 }
 
+function hasPlugin(plugin) {
+  try {
+    require.resolve(`react-scripts-plugin-${plugin}`);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
 function _getArrayValues(arr) {
   const { elements } = arr;
   return elements.map(e => {
@@ -256,6 +265,7 @@ function ejectFile({ filename, code, existingDependencies }) {
 
 module.exports = {
   applyPlugins,
+  hasPlugin,
   pushExtensions,
   pushExclusiveLoader,
   ejectFile,

packages/react-scripts-plugin-typescript/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "react-scripts-plugin-typescript",
+  "version": "0.1.0",
+  "description": "A plugin for react-scripts which enables TypeScript support.",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react-scripts",
+    "typescript",
+    "cra",
+    "create",
+    "react",
+    "app",
+    "plugin"
+  ],
+  "license": "BSD-3-Clause",
+  "dependencies": {
+    "awesome-typescript-loader": "^3.2.1",
+    "tsconfig-react-app": "^1.0.0",
+    "typescript": "^2.4.1"
+  },
+  "devDependencies": {
+    "react-dev-utils": "^3.0.2"
+  },
+  "peerDependencies": {
+    "react-dev-utils": "^3.0.2"
+  }
+}

packages/react-scripts-plugin-typescript/src/index.js

@@ -0,0 +1,35 @@
+'use strict';
+
+const {
+  pushExtensions,
+  pushExclusiveLoader,
+} = require('react-dev-utils/plugins');
+
+function apply(config, { path, paths }) {
+  pushExtensions({ config }, [['.js', '.tsx', '.ts']]);
+  pushExclusiveLoader({ config }, '/\\.(js|jsx)$/', {
+    // Process TypeScript with `at-loader`
+    test: /\.(ts|tsx)$/,
+    include: paths.appSrc,
+    loader: require.resolve('awesome-typescript-loader'),
+    options: {
+      silent: true,
+      forceConsistentCasingInFileNames: true,
+      module: 'esnext',
+      moduleResolution: 'node',
+      downlevelIteration: true,
+      sourceMap: true,
+      target: 'es5',
+      // @remove-on-eject-begin
+      configFileName: path.join(paths.appSrc, 'tsconfig.json'),
+      // @remove-on-eject-end
+    },
+  });
+  return config;
+}
+
+function eject() {
+  // TODO: remove defaults above and inject into their file
+}
+
+module.exports = { apply, eject, tsc: require('typescript') };

packages/react-scripts/config/jest/typescriptTransform.js

@@ -0,0 +1,89 @@
+// @remove-on-eject-begin
+// @remove-file-on-eject typescript
+/**
+ * Copyright (c) 2014-present, Facebook, Inc. All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+// @remove-on-eject-end
+'use strict';
+
+const fs = require('fs');
+const crypto = require('crypto');
+const path = require('path');
+const paths = require('../paths');
+const tsc = (function() {
+  try {
+    return require('react-scripts-plugin-typescript').tsc;
+  } catch (e) {
+    return require('typescript');
+  }
+})();
+const THIS_FILE = fs.readFileSync(__filename);
+
+const strictCompilerConfig = {
+  module: tsc.ModuleKind.CommonJS,
+};
+
+let compilerConfig = Object.assign({}, strictCompilerConfig, {
+  jsx: tsc.JsxEmit.React,
+});
+
+const tsconfigPath = path.join(paths.appSrc, 'tsconfig.json');
+
+if (fs.existsSync(tsconfigPath)) {
+  try {
+    const tsconfig = tsc.readConfigFile(tsconfigPath).config;
+
+    if (tsconfig && tsconfig.compilerOptions) {
+      compilerConfig = Object.assign(
+        {},
+        tsconfig.compilerOptions,
+        strictCompilerConfig
+      );
+    }
+  } catch (e) {
+    /* Do nothing - default is set */
+  }
+}
+
+module.exports = {
+  process(src, path, config, options) {
+    if (path.endsWith('.ts') || path.endsWith('.tsx')) {
+      let compilerOptions = compilerConfig;
+      if (options.instrument) {
+        // inline source with source map for remapping coverage
+        compilerOptions = Object.assign({}, compilerConfig);
+        delete compilerOptions.sourceMap;
+        compilerOptions.inlineSourceMap = true;
+        compilerOptions.inlineSources = true;
+        delete compilerOptions.outDir;
+      }
+
+      const tsTranspiled = tsc.transpileModule(src, {
+        compilerOptions: compilerOptions,
+        fileName: path,
+      });
+      return tsTranspiled.outputText;
+    }
+    return src;
+  },
+  getCacheKey(fileData, filePath, configStr, options) {
+    return crypto
+      .createHash('md5')
+      .update(THIS_FILE)
+      .update('\0', 'utf8')
+      .update(fileData)
+      .update('\0', 'utf8')
+      .update(filePath)
+      .update('\0', 'utf8')
+      .update(configStr)
+      .update('\0', 'utf8')
+      .update(JSON.stringify(compilerConfig))
+      .update('\0', 'utf8')
+      .update(options.instrument ? 'instrument' : '')
+      .digest('hex');
+  },
+};

packages/react-scripts/config/webpack.config.dev.js

@@ -293,4 +293,4 @@ const base = {
   },
 };
 
-module.exports = applyPlugins(base, [], { paths });
+module.exports = applyPlugins(base, ['typescript'], { path, paths });

packages/react-scripts/config/webpack.config.prod.js

@@ -361,4 +361,4 @@ const base = {
   },
 };
 
-module.exports = applyPlugins(base, [], { paths });
+module.exports = applyPlugins(base, ['typescript'], { path, paths });

packages/react-scripts/scripts/eject.js

@@ -24,7 +24,7 @@ const paths = require('../config/paths');
 const createJestConfig = require('./utils/createJestConfig');
 const inquirer = require('react-dev-utils/inquirer');
 const spawnSync = require('react-dev-utils/crossSpawn').sync;
-const { ejectFile } = require('react-dev-utils/plugins');
+const { ejectFile, hasPlugin } = require('react-dev-utils/plugins');
 
 const green = chalk.green;
 const cyan = chalk.cyan;
@@ -152,7 +152,12 @@ inquirer
       let content = fs.readFileSync(file, 'utf8');
 
       // Skip flagged files
-      if (content.match(/\/\/ @remove-file-on-eject/)) {
+      const pluginMatch = content.match(/\/\/ @remove-file-on-eject (\w+-?)+/);
+      if (pluginMatch) {
+        if (!hasPlugin(pluginMatch.pop())) {
+          return;
+        }
+      } else if (content.match(/\/\/ @remove-file-on-eject/)) {
         return;
       }
       // Remove plugins

packages/react-scripts/scripts/utils/createJestConfig.js

@@ -12,8 +12,11 @@
 const fs = require('fs');
 const chalk = require('chalk');
 const paths = require('../../config/paths');
+const { hasPlugin } = require('react-dev-utils/plugins');
 
 module.exports = (resolve, rootDir, isEjecting) => {
+  const hasTypeScript = hasPlugin('typescript');
+
   // Use this instead of `paths.testsSetup` to avoid putting
   // an absolute filename into configuration after ejecting.
   const setupTestsFile = fs.existsSync(paths.testsSetup)
@@ -23,27 +26,54 @@ module.exports = (resolve, rootDir, isEjecting) => {
   // TODO: I don't know if it's safe or not to just use / as path separator
   // in Jest configs. We need help from somebody with Windows to determine this.
   const config = {
-    collectCoverageFrom: ['src/**/*.{js,jsx}'],
+    collectCoverageFrom: [
+      'src/**/*.{js,jsx}',
+      ...(hasTypeScript ? ['src/**/*.{ts,tsx}'] : []),
+    ],
     setupFiles: [resolve('config/polyfills.js')],
     setupTestFrameworkScriptFile: setupTestsFile,
     testMatch: [
       '<rootDir>/src/**/__tests__/**/*.js?(x)',
       '<rootDir>/src/**/?(*.)(spec|test).js?(x)',
+      ...(hasTypeScript
+        ? [
+            '<rootDir>/src/**/__tests__/**/*.ts?(x)',
+            '<rootDir>/src/**/?(*.)(spec|test).ts?(x)',
+          ]
+        : []),
     ],
     testEnvironment: 'node',
     testURL: 'http://localhost',
-    transform: {
-      '^.+\\.(js|jsx)$': isEjecting
-        ? '<rootDir>/node_modules/babel-jest'
-        : resolve('config/jest/babelTransform.js'),
-      '^.+\\.css$': resolve('config/jest/cssTransform.js'),
-      '^(?!.*\\.(js|jsx|css|json)$)': resolve('config/jest/fileTransform.js'),
-    },
-    transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$'],
+    transform: Object.assign(
+      {
+        '^.+\\.(js|jsx)$': isEjecting
+          ? '<rootDir>/node_modules/babel-jest'
+          : resolve('config/jest/babelTransform.js'),
+        '^.+\\.css$': resolve('config/jest/cssTransform.js'),
+      },
+      hasTypeScript
+        ? { '^.+\\.(ts|tsx)$': resolve('config/jest/typescriptTransform.js') }
+        : {},
+      {
+        '^(?!.*\\.(js|jsx|css|json)$)': resolve('config/jest/fileTransform.js'),
+      }
+    ),
+    transformIgnorePatterns: [
+      '[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$',
+      ...(hasTypeScript ? ['[/\\\\]node_modules[/\\\\].+\\.(ts|tsx)$'] : []),
+    ],
     moduleNameMapper: {
       '^react-native$': 'react-native-web',
     },
-    moduleFileExtensions: ['web.js', 'js', 'json', 'web.jsx', 'jsx', 'node'],
+    moduleFileExtensions: [
+      'web.js',
+      'js',
+      ...(hasTypeScript ? ['tsx', 'ts'] : []),
+      'json',
+      'web.jsx',
+      'jsx',
+      'node',
+    ],
   };
   if (rootDir) {
     config.rootDir = rootDir;