TypeScript support

packages/react-dev-utils/package.json

@@ -29,6 +29,7 @@
     "noopServiceWorkerMiddleware.js",
     "openBrowser.js",
     "openChrome.applescript",
+    "plugins.js",
     "printHostingInstructions.js",
     "WatchMissingNodeModulesPlugin.js",
     "WebpackDevServerUtils.js",
@@ -37,6 +38,11 @@
   "dependencies": {
     "address": "1.0.2",
     "babel-code-frame": "6.22.0",
+    "babel-generator": "^6.25.0",
+    "babel-template": "^6.25.0",
+    "babel-traverse": "^6.25.0",
+    "babel-types": "^6.25.0",
+    "babylon": "^6.17.4",
     "chalk": "1.1.3",
     "cross-spawn": "5.1.0",
     "detect-port-alt": "1.1.3",
@@ -47,8 +53,11 @@
     "inquirer": "3.2.1",
     "is-root": "1.0.0",
     "opn": "5.1.0",
+    "prettier": "^1.5.2",
     "react-error-overlay": "^2.0.2",
+    "read-pkg-up": "^2.0.0",
     "recursive-readdir": "2.2.1",
+    "semver": "^5.3.0",
     "shell-quote": "1.6.1",
     "sockjs-client": "1.1.4",
     "strip-ansi": "3.0.1",

packages/react-dev-utils/plugins.js

@@ -0,0 +1,272 @@
+/**
+ * Copyright (c) 2015-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.
+ */
+
+'use strict';
+
+const babylon = require('babylon');
+const traverse = require('babel-traverse').default;
+const template = require('babel-template');
+const generator = require('babel-generator').default;
+const t = require('babel-types');
+const { readFileSync } = require('fs');
+const prettier = require('prettier');
+const getPackageJson = require('read-pkg-up').sync;
+const { dirname, isAbsolute } = require('path');
+const semver = require('semver');
+
+function applyPlugins(config, plugins, { path, paths }) {
+  const pluginPaths = plugins
+    .map(p => {
+      try {
+        return require.resolve(`react-scripts-plugin-${p}`);
+      } catch (e) {
+        return null;
+      }
+    })
+    .filter(e => e != null);
+  for (const pluginPath of pluginPaths) {
+    const { apply } = require(pluginPath);
+    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 => {
+    if (e.type === 'StringLiteral') {
+      return e.value;
+    }
+    return e;
+  });
+}
+
+// arr: [[afterExt, strExt1, strExt2, ...], ...]
+function pushExtensions({ config, ast }, arr) {
+  if (ast != null) {
+    traverse(ast, {
+      enter(path) {
+        const { type } = path;
+        if (type !== 'ArrayExpression') {
+          return;
+        }
+        const { key } = path.parent;
+        if (key == null || key.name !== 'extensions') {
+          return;
+        }
+        const { elements } = path.node;
+        const extensions = _getArrayValues(path.node);
+        for (const [after, ...exts] of arr) {
+          // Find the extension we want to add after
+          const index = extensions.findIndex(s => s === after);
+          if (index === -1) {
+            throw new Error(
+              `Unable to find extension ${after} in configuration.`
+            );
+          }
+          // Push the extensions into array in the order we specify
+          elements.splice(
+            index + 1,
+            0,
+            ...exts.map(ext => t.stringLiteral(ext))
+          );
+          // Simulate into our local copy of the array to keep proper indices
+          extensions.splice(index + 1, 0, ...exts);
+        }
+      },
+    });
+  } else if (config != null) {
+    const { resolve: { extensions } } = config;
+
+    for (const [after, ...exts] of arr) {
+      // Find the extension we want to add after
+      const index = extensions.findIndex(s => s === after);
+      if (index === -1) {
+        throw new Error(`Unable to find extension ${after} in configuration.`);
+      }
+      // Push the extensions into array in the order we specify
+      extensions.splice(index + 1, 0, ...exts);
+    }
+  }
+}
+
+function pushExclusiveLoader({ config, ast }, testStr, loader) {
+  if (ast != null) {
+    traverse(ast, {
+      enter(path) {
+        const { type } = path;
+        if (type !== 'ArrayExpression') {
+          return;
+        }
+        const { key } = path.parent;
+        if (key == null || key.name !== 'oneOf') {
+          return;
+        }
+        const entries = _getArrayValues(path.node);
+        const afterIndex = entries.findIndex(entry => {
+          const { properties } = entry;
+          return (
+            properties.find(property => {
+              if (property.value.type !== 'RegExpLiteral') {
+                return false;
+              }
+              return property.value.pattern === testStr.slice(1, -1);
+            }) != null
+          );
+        });
+        if (afterIndex === -1) {
+          throw new Error('Unable to match pre-loader.');
+        }
+        path.node.elements.splice(afterIndex + 1, 0, loader);
+      },
+    });
+  } else if (config != null) {
+    const { module: { rules: [, { oneOf: rules }] } } = config;
+    const loaderIndex = rules.findIndex(
+      rule => rule.test.toString() === testStr
+    );
+    if (loaderIndex === -1) {
+      throw new Error('Unable to match pre-loader.');
+    }
+    rules.splice(loaderIndex + 1, 0, loader);
+  }
+}
+
+function ejectFile({ filename, code, existingDependencies }) {
+  if (filename != null) {
+    code = readFileSync(filename, 'utf8');
+  }
+  let ast = babylon.parse(code);
+
+  let plugins = [];
+  traverse(ast, {
+    enter(path) {
+      const { type } = path;
+      if (type === 'VariableDeclaration') {
+        const { node: { declarations: [{ id: { name }, init }] } } = path;
+        if (name !== 'base') {
+          return;
+        }
+        path.replaceWith(template('module.exports = RIGHT;')({ RIGHT: init }));
+      } else if (type === 'AssignmentExpression') {
+        const { node: { left, right } } = path;
+        if (left.type !== 'MemberExpression') {
+          return;
+        }
+        if (right.type !== 'CallExpression') {
+          return;
+        }
+        const { callee: { name }, arguments: args } = right;
+        if (name !== 'applyPlugins') {
+          return;
+        }
+        plugins = _getArrayValues(args[1]);
+        path.parentPath.remove();
+      }
+    },
+  });
+  let deferredTransforms = [];
+  const dependencies = new Map([...existingDependencies]);
+  const paths = new Set();
+  plugins.forEach(p => {
+    let path;
+    try {
+      path = require.resolve(`react-scripts-plugin-${p}`);
+    } catch (e) {
+      return;
+    }
+    paths.add(path);
+
+    const { pkg: pluginPackage } = getPackageJson({ cwd: dirname(path) });
+    for (const pkg of Object.keys(pluginPackage.dependencies)) {
+      const version = pluginPackage.dependencies[pkg];
+      if (dependencies.has(pkg)) {
+        const prev = dependencies.get(pkg);
+        if (
+          isAbsolute(version) ||
+          semver.satisfies(version.replace(/[\^~]/g, ''), prev)
+        ) {
+          continue;
+        } else if (!semver.satisfies(prev.replace(/[\^~]/g, ''), version)) {
+          throw new Error(
+            `Dependency ${pkg}@${version} cannot be satisfied by colliding range ${pkg}@${prev}.`
+          );
+        }
+      }
+      dependencies.set(pkg, pluginPackage.dependencies[pkg]);
+    }
+
+    const pluginCode = readFileSync(path, 'utf8');
+    const pluginAst = babylon.parse(pluginCode);
+    traverse(pluginAst, {
+      enter(path) {
+        const { type } = path;
+        if (type !== 'CallExpression') {
+          return;
+        }
+        const { node: { callee: { name }, arguments: pluginArgs } } = path;
+        switch (name) {
+          case 'pushExtensions': {
+            const [, _exts] = pluginArgs;
+            const exts = _getArrayValues(_exts).map(entry =>
+              _getArrayValues(entry)
+            );
+            deferredTransforms.push(
+              pushExtensions.bind(undefined, { ast }, exts)
+            );
+            break;
+          }
+          case 'pushExclusiveLoader': {
+            const [, { value: testStr }, _loader] = pluginArgs;
+            deferredTransforms.push(
+              pushExclusiveLoader.bind(undefined, { ast }, testStr, _loader)
+            );
+            break;
+          }
+          default: {
+            // Not a call we care about
+            break;
+          }
+        }
+      },
+    });
+  });
+  // Execute 'em!
+  for (const transform of deferredTransforms) {
+    transform();
+  }
+  let { code: outCode } = generator(
+    ast,
+    { sourceMaps: false, comments: true, retainLines: false },
+    code
+  );
+  outCode = prettier.format(outCode, {
+    singleQuote: true,
+    trailingComma: 'es5',
+  });
+
+  return { code: outCode, dependencies, paths };
+}
+
+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') };