Support for multiple source paths via package.json srcPaths entry.

Author: Brad Lemley

packages/react-scripts/config/paths.js

@@ -46,6 +46,9 @@ function getServedPath(appPackageJson) {
   return ensureSlash(servedUrl, true);
 }
 
+const appPackageJson = require(resolveApp('package.json'));
+const srcPaths = appPackageJson.srcPaths || [];
+
 // config after eject: we're in ./config/
 module.exports = {
   dotenv: resolveApp('.env'),
@@ -55,6 +58,7 @@ module.exports = {
   appIndexJs: resolveApp('src/index.js'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
+  srcPaths: srcPaths.map(resolveApp),
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveApp('src/setupTests.js'),
   appNodeModules: resolveApp('node_modules'),
@@ -75,6 +79,7 @@ module.exports = {
   appIndexJs: resolveApp('src/index.js'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
+  srcPaths: srcPaths.map(resolveApp),
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveApp('src/setupTests.js'),
   appNodeModules: resolveApp('node_modules'),
@@ -96,6 +101,8 @@ if (
   !reactScriptsLinked &&
   __dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1
 ) {
+  const appPackageJson = require(resolveOwn('package.json'));
+  const srcPaths = appPackageJson.srcPaths || [];
   module.exports = {
     dotenv: resolveOwn('template/.env'),
     appPath: resolveApp('.'),
@@ -105,6 +112,7 @@ if (
     appIndexJs: resolveOwn('template/src/index.js'),
     appPackageJson: resolveOwn('package.json'),
     appSrc: resolveOwn('template/src'),
+    srcPaths: srcPaths.map(resolveOwn),
     yarnLockFile: resolveOwn('template/yarn.lock'),
     testsSetup: resolveOwn('template/src/setupTests.js'),
     appNodeModules: resolveOwn('node_modules'),

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

@@ -83,7 +83,7 @@ module.exports = {
     modules: ['node_modules', paths.appNodeModules].concat(
       // It is guaranteed to exist because we tweak it in `env.js`
       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
-    ),
+    ).concat(paths.srcPaths),
     // These are the reasonable defaults supported by the Node ecosystem.
     // We also include JSX as a common component filename extension to support
     // some tools, although we do not recommend using it, see:
@@ -111,7 +111,9 @@ module.exports = {
       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
       // please link the files into your node_modules/ and let module-resolution kick in.
       // Make sure your source files are compiled, as they will not be processed in any way.
-      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
+
+      // TODO: update ModuleScopePlugin to enforce rules with appSrc + srcPaths
+      // new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
     ],
   },
   module: {
@@ -142,7 +144,7 @@ module.exports = {
             loader: require.resolve('eslint-loader'),
           },
         ],
-        include: paths.appSrc,
+        include: [paths.appSrc].concat(paths.srcPaths),
       },
       {
         // "oneOf" will traverse all following loaders until one will
@@ -163,7 +165,7 @@ module.exports = {
           // Process JS with Babel.
           {
             test: /\.(js|jsx|mjs)$/,
-            include: paths.appSrc,
+            include: [paths.appSrc].concat(paths.srcPaths),
             loader: require.resolve('babel-loader'),
             options: {
               // @remove-on-eject-begin

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

@@ -89,7 +89,7 @@ module.exports = {
     modules: ['node_modules', paths.appNodeModules].concat(
       // It is guaranteed to exist because we tweak it in `env.js`
       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
-    ),
+    ).concat(paths.srcPaths),
     // These are the reasonable defaults supported by the Node ecosystem.
     // We also include JSX as a common component filename extension to support
     // some tools, although we do not recommend using it, see:
@@ -117,7 +117,9 @@ module.exports = {
       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
       // please link the files into your node_modules/ and let module-resolution kick in.
       // Make sure your source files are compiled, as they will not be processed in any way.
-      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
+
+      // TODO: update ModuleScopePlugin to enforce rules with appSrc + srcPaths
+      // new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
     ],
   },
   module: {
@@ -150,7 +152,7 @@ module.exports = {
             loader: require.resolve('eslint-loader'),
           },
         ],
-        include: paths.appSrc,
+        include: [paths.appSrc].concat(paths.srcPaths),
       },
       {
         // "oneOf" will traverse all following loaders until one will
@@ -170,7 +172,7 @@ module.exports = {
           // Process JS with Babel.
           {
             test: /\.(js|jsx|mjs)$/,
-            include: paths.appSrc,
+            include: [paths.appSrc].concat(paths.srcPaths),
             loader: require.resolve('babel-loader'),
             options: {
               // @remove-on-eject-begin
@@ -301,7 +303,7 @@ module.exports = {
       },
       mangle: {
         safari10: true,
-      },        
+      },
       output: {
         comments: false,
         // Turned on because emoji and regex is not minified properly using default

packages/react-scripts/scripts/test.js

@@ -42,6 +42,7 @@ argv.push(
     createJestConfig(
       relativePath => path.resolve(__dirname, '..', relativePath),
       path.resolve(paths.appSrc, '..'),
+      paths.srcPaths,
       false
     )
   )

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

@@ -11,7 +11,15 @@ const fs = require('fs');
 const chalk = require('chalk');
 const paths = require('../../config/paths');
 
-module.exports = (resolve, rootDir, isEjecting) => {
+const srcRootTestMatch = srcRoot => ([
+  srcRoot + '/**/__tests__/**/*.{js,jsx,mjs}',
+  srcRoot + '/**/?(*.)(spec|test).{js,jsx,mjs}',
+])
+
+const srcRootTestMatches = srcRoots =>
+  srcRoots.reduce((m, srcRoot) => m.concat(srcRootTestMatch(srcRoot)), [])
+
+module.exports = (resolve, rootDir, srcRoots, isEjecting) => {
   // Use this instead of `paths.testsSetup` to avoid putting
   // an absolute filename into configuration after ejecting.
   const setupTestsFile = fs.existsSync(paths.testsSetup)
@@ -27,7 +35,7 @@ module.exports = (resolve, rootDir, isEjecting) => {
     testMatch: [
       '<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}',
       '<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}',
-    ],
+    ].concat(srcRootTestMatches(srcRoots)),
     testEnvironment: 'node',
     testURL: 'http://localhost',
     transform: {
@@ -56,6 +64,9 @@ module.exports = (resolve, rootDir, isEjecting) => {
   if (rootDir) {
     config.rootDir = rootDir;
   }
+  if (srcRoots) {
+    config.roots = [rootDir].concat(srcRoots);
+  }
   const overrides = Object.assign({}, require(paths.appPackageJson).jest);
   const supportedKeys = [
     'collectCoverageFrom',