Merge branch 'next' into mono-cra

Author: bradfordlemley

CHANGELOG.md

@@ -1,3 +1,43 @@
+## 1.1.1 (February 2, 2018)
+
+#### :bug: Bug Fix
+* `react-scripts`
+  * [#4000](https://github.com/facebook/create-react-app/pull/4000) Fix escaping `$` in environment variables. ([@iansu](https://github.com/iansu))
+
+#### :nail_care: Enhancement
+* `react-scripts`
+  * [#4006](https://github.com/facebook/create-react-app/pull/4006) Add Node 9 compatibility for `fsevents`. ([@gaearon](https://github.com/gaearon))
+
+#### :memo: Documentation
+* `react-scripts`
+  * [#3971](https://github.com/facebook/create-react-app/pull/3971) Update instructions for continuous delivery with Netlify. ([@hubgit](https://github.com/hubgit))
+  * [#3894](https://github.com/facebook/create-react-app/pull/3894) Include `{json,css}` files in prettier command. ([@reyronald](https://github.com/reyronald))
+
+#### :house: Internal
+* `create-react-app`
+  * [#3853](https://github.com/facebook/create-react-app/pull/3853) pin envinfo version to 3.4.2. ([@bondz](https://github.com/bondz))
+
+#### Committers: 6
+- Alf Eaton ([hubgit](https://github.com/hubgit))
+- Bond ([bondz](https://github.com/bondz))
+- Dan Abramov ([gaearon](https://github.com/gaearon))
+- Ian Sutherland ([iansu](https://github.com/iansu))
+- Ronald Rey ([reyronald](https://github.com/reyronald))
+
+### Migrating from 1.1.0 to 1.1.1
+
+Inside any created project that has not been ejected, run:
+
+```
+npm install --save --save-exact [email protected]
+```
+
+or
+
+```
+yarn add --exact [email protected]
+```
+
 ## 1.1.0 (January 15, 2018)
 
 #### :rocket: New Feature

packages/create-react-app/createReactApp.js

@@ -50,7 +50,7 @@ const hyperquest = require('hyperquest');
 const envinfo = require('envinfo');
 const os = require('os');
 const resolveFrom = require('resolve-from');
-
+const findMonorepo = require('react-dev-utils/workspaceUtils').findMonorepo;
 const packageJson = require('./package.json');
 
 // These files should be allowed to remain on a failed install,
@@ -186,7 +186,7 @@ function createApp(name, verbose, version, useNpm, template) {
     JSON.stringify(packageJson, null, 2) + os.EOL
   );
 
-  const useYarn = useNpm ? false : shouldUseYarn();
+  const useYarn = useNpm ? false : shouldUseYarn(root);
   const originalDirectory = process.cwd();
   process.chdir(root);
   if (!useYarn && !checkThatNpmCanReadCwd()) {
@@ -222,7 +222,7 @@ function createApp(name, verbose, version, useNpm, template) {
   run(root, appName, version, verbose, originalDirectory, template, useYarn);
 }
 
-function shouldUseYarn() {
+function isYarnAvailable() {
   try {
     execSync('yarnpkg --version', { stdio: 'ignore' });
     return true;
@@ -231,6 +231,11 @@ function shouldUseYarn() {
   }
 }
 
+function shouldUseYarn(appDir) {
+  const mono = findMonorepo(appDir);
+  return (mono.isYarnWs && mono.isAppIncluded) || isYarnAvailable();
+}
+
 function install(root, useYarn, dependencies, verbose, isOnline) {
   return new Promise((resolve, reject) => {
     let command;

packages/create-react-app/package.json

@@ -27,6 +27,7 @@
     "envinfo": "3.4.2",
     "fs-extra": "^5.0.0",
     "hyperquest": "^2.1.2",
+    "react-dev-utils": "^5.0.0",
     "resolve-from": "^4.0.0",
     "semver": "^5.0.3",
     "tar-pack": "^3.4.0",

packages/react-dev-utils/launchEditor.js

@@ -57,6 +57,8 @@ const COMMON_EDITORS_OSX = {
   '/Applications/WebStorm.app/Contents/MacOS/webstorm':
     '/Applications/WebStorm.app/Contents/MacOS/webstorm',
   '/Applications/MacVim.app/Contents/MacOS/MacVim': 'mvim',
+  '/Applications/GoLand.app/Contents/MacOS/goland':
+    '/Applications/GoLand.app/Contents/MacOS/goland',
 };
 
 const COMMON_EDITORS_LINUX = {
@@ -72,6 +74,7 @@ const COMMON_EDITORS_LINUX = {
   sublime_text: 'sublime_text',
   vim: 'vim',
   'webstorm.sh': 'webstorm',
+  'goland.sh': 'goland',
 };
 
 const COMMON_EDITORS_WIN = [
@@ -93,6 +96,8 @@ const COMMON_EDITORS_WIN = [
   'rubymine64.exe',
   'webstorm.exe',
   'webstorm64.exe',
+  'goland.exe',
+  'goland64.exe',
 ];
 
 function addWorkspaceToArgumentsIfExists(args, workspace) {
@@ -155,6 +160,8 @@ function getArgumentsForLineNumber(
     case 'rubymine64':
     case 'webstorm':
     case 'webstorm64':
+    case 'goland':
+    case 'goland64':
       return addWorkspaceToArgumentsIfExists(
         ['--line', lineNumber, fileName],
         workspace

packages/react-dev-utils/package.json

@@ -34,7 +34,8 @@
     "printHostingInstructions.js",
     "WatchMissingNodeModulesPlugin.js",
     "WebpackDevServerUtils.js",
-    "webpackHotDevClient.js"
+    "webpackHotDevClient.js",
+    "workspaceUtils.js"
   ],
   "dependencies": {
     "@babel/code-frame": "7.0.0-beta.38",
@@ -45,7 +46,9 @@
     "detect-port-alt": "1.1.5",
     "escape-string-regexp": "1.0.5",
     "filesize": "3.5.11",
+    "find-pkg": "1.0.0",
     "global-modules": "1.0.0",
+    "globby": "7.1.1",
     "gzip-size": "4.1.0",
     "inquirer": "5.0.0",
     "is-root": "1.0.0",

packages/react-dev-utils/workspaceUtils.js

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2018-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+const fs = require('fs');
+const path = require('path');
+const findPkg = require('find-pkg');
+const globby = require('globby');
+
+const findPkgs = (rootPath, globPatterns) => {
+  if (!globPatterns) {
+    return [];
+  }
+  const globOpts = {
+    cwd: rootPath,
+    strict: true,
+    absolute: true,
+  };
+  return globPatterns
+    .reduce(
+      (pkgs, pattern) =>
+        pkgs.concat(globby.sync(path.join(pattern, 'package.json'), globOpts)),
+      []
+    )
+    .map(f => path.dirname(path.normalize(f)));
+};
+
+const findMonorepo = appDir => {
+  const monoPkgPath = findPkg.sync(path.resolve(appDir, '..'));
+  const monoPkg = monoPkgPath && require(monoPkgPath);
+  const patterns = monoPkg && monoPkg.workspaces;
+  const isYarnWs = Boolean(patterns);
+  const allPkgs = patterns && findPkgs(path.dirname(monoPkgPath), patterns);
+  const isIncluded = dir => allPkgs && allPkgs.indexOf(dir) !== -1;
+  const isAppIncluded = isIncluded(appDir);
+  const pkgs = allPkgs
+    ? allPkgs.filter(f => fs.realpathSync(f) !== appDir)
+    : [];
+
+  return {
+    isAppIncluded,
+    isYarnWs,
+    pkgs,
+  };
+};
+
+module.exports = {
+  findMonorepo,
+};

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

@@ -0,0 +1,18 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2018-present, Facebook, Inc.
+ * Copyright (c) 2016 Remind
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+const loader = require('graphql-tag/loader');
+
+module.exports = {
+  process(src) {
+    return loader.call({ cacheable() {} }, src);
+  },
+};

packages/react-scripts/config/paths.js

@@ -11,8 +11,7 @@
 const path = require('path');
 const fs = require('fs');
 const url = require('url');
-const findPkg = require('find-pkg');
-const globby = require('globby');
+const findMonorepo = require('react-dev-utils/workspaceUtils').findMonorepo;
 
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebook/create-react-app/issues/637
@@ -58,7 +57,6 @@ module.exports = {
   appIndexJs: resolveApp('src/index.js'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
-  yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveApp('src/setupTests.js'),
   appNodeModules: resolveApp('node_modules'),
   publicUrl: getPublicUrl(resolveApp('package.json')),
@@ -80,7 +78,6 @@ module.exports = {
   appIndexJs: resolveApp('src/index.js'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
-  yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveApp('src/setupTests.js'),
   appNodeModules: resolveApp('node_modules'),
   publicUrl: getPublicUrl(resolveApp('package.json')),
@@ -106,7 +103,6 @@ if (useTemplate) {
     appIndexJs: resolveOwn('template/src/index.js'),
     appPackageJson: resolveOwn('package.json'),
     appSrc: resolveOwn('template/src'),
-    yarnLockFile: resolveOwn('template/yarn.lock'),
     testsSetup: resolveOwn('template/src/setupTests.js'),
     appNodeModules: resolveOwn('node_modules'),
     publicUrl: getPublicUrl(resolveOwn('package.json')),
@@ -120,37 +116,16 @@ if (useTemplate) {
 
 module.exports.srcPaths = [module.exports.appSrc];
 
-const findPkgs = (rootPath, globPatterns) => {
-  const globOpts = {
-    cwd: rootPath,
-    strict: true,
-    absolute: true,
-  };
-  return globPatterns
-    .reduce(
-      (pkgs, pattern) =>
-        pkgs.concat(globby.sync(path.join(pattern, 'package.json'), globOpts)),
-      []
-    )
-    .map(f => path.dirname(path.normalize(f)));
-};
-
-const getMonorepoPkgPaths = () => {
-  const monoPkgPath = findPkg.sync(path.resolve(appDirectory, '..'));
-  if (monoPkgPath) {
-    // get monorepo config from yarn workspace
-    const pkgPatterns = require(monoPkgPath).workspaces;
-    const pkgPaths = findPkgs(path.dirname(monoPkgPath), pkgPatterns);
-    // only include monorepo pkgs if app itself is included in monorepo
-    if (pkgPaths.indexOf(appDirectory) !== -1) {
-      return pkgPaths.filter(f => fs.realpathSync(f) !== appDirectory);
-    }
-  }
-  return [];
-};
+module.exports.useYarn = fs.existsSync(
+  path.join(module.exports.appPath, 'yarn.lock')
+);
 
 if (checkForMonorepo) {
   // if app is in a monorepo (lerna or yarn workspace), treat other packages in
   // the monorepo as if they are app source
-  Array.prototype.push.apply(module.exports.srcPaths, getMonorepoPkgPaths());
+  const mono = findMonorepo(appDirectory);
+  if (mono.isAppIncluded) {
+    Array.prototype.push.apply(module.exports.srcPaths, mono.pkgs);
+  }
+  module.exports.useYarn = module.exports.useYarn || mono.isYarnWs;
 }

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

@@ -278,6 +278,11 @@ module.exports = {
               },
             ],
           },
+          // The GraphQL loader preprocesses GraphQL queries in .graphql files.
+          {
+            test: /\.(graphql)$/,
+            loader: 'graphql-tag/loader',
+          },
           // "file" loader makes sure those assets get served by WebpackDevServer.
           // When you `import` an asset, you get its (virtual) filename.
           // In production, they would get copied to the `build` folder.

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

@@ -320,6 +320,11 @@ module.exports = {
             ),
             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
           },
+          // The GraphQL loader preprocesses GraphQL queries in .graphql files.
+          {
+            test: /\.(graphql)$/,
+            loader: 'graphql-tag/loader',
+          },
           // "file" loader makes sure assets end up in the `build` folder.
           // When you `import` an asset, you get its filename.
           // This loader doesn't use a "test" so it will catch all modules
@@ -408,6 +413,7 @@ module.exports = {
     // having to parse `index.html`.
     new ManifestPlugin({
       fileName: 'asset-manifest.json',
+      publicPath: publicPath
     }),
     // Generate a service worker script that will precache, and keep up to date,
     // the HTML & assets that are part of the Webpack build.

packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js

@@ -31,6 +31,16 @@ describe('Integration', () => {
       );
     });
 
+    it('graphql files inclusion', async () => {
+      const doc = await initDOM('graphql-inclusion');
+      const children = doc.getElementById('graphql-inclusion').children;
+
+      // .graphql
+      expect(children[0].textContent.replace(/\s/g, '')).to.equal(
+        '{"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","variableDefinitions":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"test"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"test"},"value":{"kind":"StringValue","value":"test","block":false}}],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"test"},"arguments":[],"directives":[]}]}}]}}],"loc":{"start":0,"end":40,"source":{"body":"{\\ntest(test:\\"test\\"){\\ntest\\n}\\n}\\n","name":"GraphQLrequest","locationOffset":{"line":1,"column":1}}}}'
+      );
+    });
+
     it('image inclusion', async () => {
       const doc = await initDOM('image-inclusion');
 

packages/react-scripts/fixtures/kitchensink/src/App.js

@@ -111,6 +111,11 @@ class App extends Component {
           this.setFeature(f.default)
         );
         break;
+      case 'graphql-inclusion':
+        import('./features/webpack/GraphQLInclusion').then(f =>
+          this.setFeature(f.default)
+        );
+        break;
       case 'image-inclusion':
         import('./features/webpack/ImageInclusion').then(f =>
           this.setFeature(f.default)

packages/react-scripts/fixtures/kitchensink/src/features/webpack/GraphQLInclusion.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2018-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import A from './assets/graphql.graphql';
+
+export default () => (
+  <p id="graphql-inclusion">
+    <span>{JSON.stringify(A)}</span>
+  </p>
+);

packages/react-scripts/fixtures/kitchensink/src/features/webpack/GraphQLInclusion.test.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2018-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import GraphQLInclusion from './GraphQLInclusion';
+
+describe('graphql files inclusion', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<GraphQLInclusion />, div);
+  });
+});

packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/graphql.graphql

@@ -0,0 +1,5 @@
+{
+  test(test: "test") {
+    test
+  }
+}