Plugin system

packages/react-dev-utils/package.json

@@ -27,6 +27,7 @@
     "ModuleScopePlugin.js",
     "openBrowser.js",
     "openChrome.applescript",
+    "plugins.js",
     "printHostingInstructions.js",
     "WatchMissingNodeModulesPlugin.js",
     "WebpackDevServerUtils.js",
@@ -36,6 +37,11 @@
     "address": "1.0.2",
     "anser": "1.4.1",
     "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": "4.0.2",
     "detect-port-alt": "1.1.3",
@@ -46,6 +52,7 @@
     "inquirer": "3.1.1",
     "is-root": "1.0.0",
     "opn": "5.1.0",
+    "prettier": "^1.5.2",
     "recursive-readdir": "2.2.1",
     "shell-quote": "1.6.1",
     "sockjs-client": "1.1.4",

packages/react-dev-utils/plugins.js

@@ -0,0 +1,236 @@
+/**
+ * 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');
+
+function applyPlugins(config, plugins, { 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, { paths });
+  }
+  return config;
+}
+
+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.');
+        }
+        console.log('holy shit it works');
+        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 }) {
+  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 = [];
+  plugins.forEach(p => {
+    let path;
+    try {
+      path = require.resolve(`react-scripts-plugin-${p}`);
+    } catch (e) {
+      return;
+    }
+    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 outCode;
+}
+
+module.exports = {
+  applyPlugins,
+  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,25 @@
+'use strict';
+
+const {
+  pushExtensions,
+  pushExclusiveLoader,
+} = require('react-dev-utils/plugins');
+
+function apply(config, { 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,
+      // @remove-on-eject-begin
+      configFileName: require.resolve('tsconfig-react-app'),
+      // @remove-on-eject-end
+    },
+  });
+  return config;
+}
+
+module.exports = { apply };

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

@@ -21,6 +21,7 @@ const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
+const { applyPlugins } = require('react-dev-utils/plugins');
 
 // Webpack uses `publicPath` to determine where the app is being served from.
 // In development, we always serve from the root. This makes config easier.
@@ -35,7 +36,7 @@ const env = getClientEnvironment(publicUrl);
 // This is the development configuration.
 // It is focused on developer experience and fast rebuilds.
 // The production configuration is different and lives in a separate file.
-module.exports = {
+const base = {
   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
   // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
   devtool: 'cheap-module-source-map',
@@ -290,3 +291,5 @@ module.exports = {
     hints: false,
   },
 };
+
+module.exports = applyPlugins(base, ['typescript'], { paths });

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

@@ -22,6 +22,7 @@ const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
+const { applyPlugins } = require('react-dev-utils/plugins');
 
 // Webpack uses `publicPath` to determine where the app is being served from.
 // It requires a trailing slash, or the file assets will get an incorrect path.
@@ -57,7 +58,7 @@ const extractTextPluginOptions = shouldUseRelativeAssetPaths
 // This is the production configuration.
 // It compiles slowly and is focused on producing a fast and minimal bundle.
 // The development configuration is different and lives in a separate file.
-module.exports = {
+const base = {
   // Don't attempt to continue if there are any errors.
   bail: true,
   // We generate sourcemaps in production. This is slow but gives good results.
@@ -358,3 +359,5 @@ module.exports = {
     tls: 'empty',
   },
 };
+
+module.exports = applyPlugins(base, ['typescript'], { paths });

packages/react-scripts/scripts/eject.js

@@ -24,6 +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 green = chalk.green;
 const cyan = chalk.cyan;
@@ -121,6 +122,13 @@ inquirer
       if (content.match(/\/\/ @remove-file-on-eject/)) {
         return;
       }
+      // Inline plugins
+      if (
+        file.endsWith('webpack.config.dev.js') ||
+        file.endsWith('webpack.config.prod.js')
+      ) {
+        content = ejectFile({ code: content });
+      }
       content =
         content
           // Remove dead code from .js files on eject