[BACKUP] TypeScript support using Babel 7, with monorepo support

README.md

@@ -146,6 +146,7 @@ The [User Guide](https://github.com/facebook/create-react-app/blob/master/packag
 - [Using Global Variables](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#using-global-variables)
 - [Adding Bootstrap](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap)
 - [Adding Flow](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow)
+- [Adding TypeScript](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-typescript)
 - [Adding a Router](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-router)
 - [Adding Custom Environment Variables](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables)
 - [Can I Use Decorators?](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators)
@@ -216,7 +217,7 @@ Here’s a few common cases where you might want to try something else:
 
 * If your website is **mostly static** (for example, a portfolio or a blog), consider using [Gatsby](https://www.gatsbyjs.org/) instead. Unlike Create React App, it pre-renders the website into HTML at the build time.
 
-* If you want to use **TypeScript**, consider using [create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript).
+* If you want an alternative way to use **TypeScript**, consider using [create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript).
 
 * If you want to use **Parcel** instead of **Webpack** as your bundler, consider using [create-react-app-parcel](https://github.com/sw-yx/create-react-app-parcel).
 

packages/babel-plugin-named-asset-import/package.json

@@ -12,6 +12,6 @@
  "index.js"
  ],
  "peerDependencies": {
- "@babel/core": "7.0.0-beta.46"
+ "@babel/core": "7.1.0"
  }
 }

packages/babel-preset-react-app/README.md

@@ -32,19 +32,25 @@ Then create a file named `.babelrc` with following contents in the root folder o
 
 This preset uses the `useBuiltIns` option with [transform-object-rest-spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/) and [transform-react-jsx](http://babeljs.io/docs/plugins/transform-react-jsx/), which assumes that `Object.assign` is available or polyfilled.
 
-## Usage with TypeScript
+## Usage with Flow
+
+To use this package with [`@babel/preset-flow`]https://www.npmjs.com/package/@babel/preset-flow), you only need to have a `.flowconfig` file at the root directory and it will be detected automatically. Alternatively, you can edit `.babelrc` with the following:
+
+```
+{
+ "presets": [["react-app", { "flow": true }]]
+}
+```
 
-To use this package with [`@babel/preset-typescript`](https://www.npmjs.com/package/@babel/preset-typescript), you need to disable `@babel/preset-flow` first.
 
-You can achieve this by doing:
+## Usage with TypeScript
+
+To use this package with [`@babel/preset-typescript`]https://www.npmjs.com/package/@babel/preset-typescript), you only need to have a `tsconfig.json` file at the root directory and it will be detected automatically. Alternatively, you can edit `.babelrc` with the following:
 
 ```
 {
- "presets": [
- ["react-app", {
- "flow": false
- }],
- "@babel/typescript"
- ]
+ "presets": [["react-app", { "typescript": true }]]
 }
 ```
+
+TSLint is also automatically supported, you only need to create a `tslint.json` (and optionally a `tslint.prod.json`) file at the root directory.

packages/babel-preset-react-app/create.js

@@ -6,6 +6,15 @@
  */
 'use strict';
 
+const path = require('path');
+const fs = require('fs');
+
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+
+const hasFlowConfig = fs.existsSync(resolveApp('.flowconfig'));
+const hasTSConfig = fs.existsSync(resolveApp('tsconfig.json'));
+
 const validateBoolOption = (name, value, defaultValue) => {
  if (typeof value === 'undefined') {
  value = defaultValue;
@@ -26,7 +35,12 @@ module.exports = function(api, opts, env) {
  var isEnvDevelopment = env === 'development';
  var isEnvProduction = env === 'production';
  var isEnvTest = env === 'test';
- var isFlowEnabled = validateBoolOption('flow', opts.flow, true);
+ var isFlowEnabled = validateBoolOption('flow', opts.flow, hasFlowConfig);
+ var isTypeScriptEnabled = validateBoolOption(
+ 'typescript',
+ opts.typescript,
+ hasTSConfig
+ );
 
  if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) {
  throw new Error(
@@ -38,6 +52,14 @@ module.exports = function(api, opts, env) {
  );
  }
 
+ if (isFlowEnabled && isTypeScriptEnabled) {
+ throw new Error(
+ 'Cannot enable both flow and typescript support in the same project. ' +
+ "Please make sure you don't have both .flowconfig and tsconfig.json files. '" +
+ 'If using .babelrc, set one option to false and the other one to true.'
+ );
+ }
+
  return {
  presets: [
  isEnvTest && [
@@ -75,6 +97,7 @@ module.exports = function(api, opts, env) {
  },
  ],
  isFlowEnabled && [require('@babel/preset-flow').default],
+ isTypeScriptEnabled && [require('@babel/preset-typescript').default],
  ].filter(Boolean),
  plugins: [
  // Experimental macros support. Will be documented after it's had some time
@@ -107,7 +130,6 @@ module.exports = function(api, opts, env) {
  require('@babel/plugin-transform-runtime').default,
  {
  helpers: false,
- polyfill: false,
  regenerator: true,
  },
  ],

packages/babel-preset-react-app/package.json

@@ -16,21 +16,22 @@
  "test.js"
  ],
  "dependencies": {
- "@babel/core": "7.0.0-beta.46",
- "@babel/plugin-proposal-class-properties": "7.0.0-beta.46",
- "@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.46",
- "@babel/plugin-syntax-dynamic-import": "7.0.0-beta.46",
- "@babel/plugin-transform-classes": "7.0.0-beta.46",
- "@babel/plugin-transform-destructuring": "7.0.0-beta.46",
- "@babel/plugin-transform-react-constant-elements": "7.0.0-beta.46",
- "@babel/plugin-transform-react-display-name": "7.0.0-beta.46",
- "@babel/plugin-transform-regenerator": "7.0.0-beta.46",
- "@babel/plugin-transform-runtime": "7.0.0-beta.46",
- "@babel/preset-env": "7.0.0-beta.46",
- "@babel/preset-flow": "7.0.0-beta.46",
- "@babel/preset-react": "7.0.0-beta.46",
- "babel-plugin-macros": "2.2.1",
+ "@babel/core": "7.1.0",
+ "@babel/plugin-proposal-class-properties": "7.1.0",
+ "@babel/plugin-proposal-object-rest-spread": "7.0.0",
+ "@babel/plugin-syntax-dynamic-import": "7.0.0",
+ "@babel/plugin-transform-classes": "7.1.0",
+ "@babel/plugin-transform-destructuring": "7.0.0",
+ "@babel/plugin-transform-react-constant-elements": "7.0.0",
+ "@babel/plugin-transform-react-display-name": "7.0.0",
+ "@babel/plugin-transform-regenerator": "7.0.0",
+ "@babel/plugin-transform-runtime": "7.1.0",
+ "@babel/preset-env": "7.1.0",
+ "@babel/preset-flow": "7.0.0",
+ "@babel/preset-react": "7.0.0",
+ "@babel/preset-typescript": "7.1.0",
+ "babel-plugin-macros": "2.4.1",
  "babel-plugin-transform-dynamic-import": "2.0.0",
- "babel-plugin-transform-react-remove-prop-types": "0.4.13"
+ "babel-plugin-transform-react-remove-prop-types": "0.4.15"
  }
 }

packages/react-dev-utils/WebpackDevServerUtils.js

@@ -177,7 +177,7 @@ function createCompiler(webpack, config, appName, urls, useYarn) {
  console.log(chalk.yellow('Compiled with warnings.\n'));
  console.log(messages.warnings.join('\n\n'));
 
- // Teach some ESLint tricks.
+ // Teach some ESLint / TSLint tricks.
  console.log(
  '\nSearch for the ' +
  chalk.underline(chalk.yellow('keywords')) +
@@ -186,6 +186,9 @@ function createCompiler(webpack, config, appName, urls, useYarn) {
  console.log(
  'To ignore, add ' +
  chalk.cyan('// eslint-disable-next-line') +
+ ' (or ' +
+ chalk.cyan('// tslint:disable-next-line') +
+ ' if TypeScript)' +
  ' to the line before.\n'
  );
  }

packages/react-dev-utils/package.json

@@ -38,7 +38,7 @@
  "workspaceUtils.js"
  ],
  "dependencies": {
- "@babel/code-frame": "7.0.0-beta.46",
+ "@babel/code-frame": "7.0.0",
  "address": "1.0.3",
  "browserslist": "3.2.6",
  "chalk": "2.4.1",

packages/react-error-overlay/.babelrc

@@ -1,3 +1,3 @@
 {
- "presets": ["react-app"]
+ "presets": [["react-app", { "flow": true }]]
 }

packages/react-error-overlay/package.json

@@ -30,14 +30,14 @@
  "lib/index.js"
  ],
  "devDependencies": {
- "@babel/code-frame": "7.0.0-beta.46",
- "@babel/core": "7.0.0-beta.46",
- "@babel/runtime": "7.0.0-beta.46",
+ "@babel/code-frame": "7.0.0",
+ "@babel/core": "7.1.0",
+ "@babel/runtime": "7.0.0",
  "anser": "1.4.6",
- "babel-core": "^7.0.0-bridge.0",
+ "babel-core": "7.0.0-bridge.0",
  "babel-eslint": "^8.2.2",
- "babel-jest": "^22.4.3",
- "babel-loader": "^8.0.0-beta.0",
+ "babel-jest": "23.6.0",
+ "babel-loader": "8.0.2",
  "babel-preset-react-app": "^3.1.1",
  "chalk": "^2.3.2",
  "chokidar": "^2.0.2",

packages/react-error-overlay/webpack.config.iframe.js

@@ -23,15 +23,15 @@ module.exports = {
  oneOf: [
  // Source
  {
- test: /\.js$/,
+ test: /\.(js)|(tsx?)$/,
  include: [path.resolve(__dirname, './src')],
  use: {
  loader: 'babel-loader',
  },
  },
  // Dependencies
  {
- test: /\.js$/,
+ test: /\.(js)|(tsx?)$/,
  use: {
  loader: 'babel-loader',
  options: {

packages/react-error-overlay/webpack.config.js

@@ -24,7 +24,7 @@ module.exports = {
  use: 'raw-loader',
  },
  {
- test: /\.js$/,
+ test: /\.(js)|(tsx?)$/,
  include: path.resolve(__dirname, './src'),
  use: 'babel-loader',
  },

packages/react-scripts/config/paths.js

@@ -47,18 +47,34 @@ function getServedPath(appPackageJson) {
  return ensureSlash(servedUrl, true);
 }
 
+const hasTSConfig = fs.existsSync(resolveApp('tsconfig.json'));
+const hasTSConfigProd = fs.existsSync(resolveApp('tsconfig.prod.json'));
+
+const hasTSLint = fs.existsSync(resolveApp('tslint.json'));
+const hasTSLintProd = fs.existsSync(resolveApp('tslint.prod.json'));
+
+const isTypeScript = hasTSConfig;
+
 // config after eject: we're in ./config/
 module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
- appIndexJs: resolveApp('src/index.js'),
+ appIndexJs: isTypeScript
+ ? resolveApp('src/index.tsx')
+ : resolveApp('src/index.js'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
- testsSetup: resolveApp('src/setupTests.js'),
+ testsSetup: isTypeScript
+ ? resolveApp('src/setupTests.ts')
+ : resolveApp('src/setupTests.js'),
  appNodeModules: resolveApp('node_modules'),
+ appTSConfig: resolveApp('tsconfig.json'),
+ appTSConfigProd: resolveApp('tsconfig.prod.json'),
+ appTSLint: resolveApp('tslint.json'),
+ appTSLintProd: resolveApp('tslint.prod.json'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
 };
@@ -75,11 +91,19 @@ module.exports = {
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
- appIndexJs: resolveApp('src/index.js'),
+ appIndexJs: isTypeScript
+ ? resolveApp('src/index.tsx')
+ : resolveApp('src/index.js'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
- testsSetup: resolveApp('src/setupTests.js'),
+ testsSetup: isTypeScript
+ ? resolveApp('src/setupTests.ts')
+ : resolveApp('src/setupTests.js'),
  appNodeModules: resolveApp('node_modules'),
+ appTSConfig: resolveApp('tsconfig.json'),
+ appTSConfigProd: resolveApp('tsconfig.prod.json'),
+ appTSLint: resolveApp('tslint.json'),
+ appTSLintProd: resolveApp('tslint.prod.json'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
  // These properties only exist before ejecting:
@@ -100,11 +124,19 @@ if (useTemplate) {
  appBuild: resolveOwn('../../build'),
  appPublic: resolveOwn('template/public'),
  appHtml: resolveOwn('template/public/index.html'),
- appIndexJs: resolveOwn('template/src/index.js'),
+ appIndexJs: isTypeScript
+ ? resolveOwn('template/src/index.tsx')
+ : resolveOwn('template/src/index.js'),
  appPackageJson: resolveOwn('package.json'),
  appSrc: resolveOwn('template/src'),
- testsSetup: resolveOwn('template/src/setupTests.js'),
+ testsSetup: isTypeScript
+ ? resolveOwn('template/src/setupTests.ts')
+ : resolveOwn('template/src/setupTests.js'),
  appNodeModules: resolveOwn('node_modules'),
+ appTSConfig: resolveOwn('template/tsconfig.json'),
+ appTSConfigProd: resolveOwn('template/tsconfig.prod.json'),
+ appTSLint: resolveOwn('template/tslint.json'),
+ appTSLintProd: resolveOwn('template/tslint.prod.json'),
  publicUrl: getPublicUrl(resolveOwn('package.json')),
  servedPath: getServedPath(resolveOwn('package.json')),
  // These properties only exist before ejecting:
@@ -116,6 +148,12 @@ if (useTemplate) {
 
 module.exports.srcPaths = [module.exports.appSrc];
 
+module.exports.isTypeScript = isTypeScript;
+module.exports.useTSConfigProd = isTypeScript && hasTSConfigProd;
+
+module.exports.useTSLint = isTypeScript && hasTSLint;
+module.exports.useTSLintProd = isTypeScript && hasTSLintProd;
+
 module.exports.useYarn = fs.existsSync(
  path.join(module.exports.appPath, 'yarn.lock')
 );