diff --git a/CHANGELOG.md b/CHANGELOG.md index a2dfec8fec6a77af56c13cbdbe1d5a650d6e3421..d5431b5bd3e4e71849d58aba888176f49a1d9771 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,153 @@ +## 1.1.5 (August 24, 2018) + +* `react-scripts` + + * Update the `webpack-dev-server` dependency + +* `react-dev-utils` + + * [#4866](https://github.com/facebook/create-react-app/pull/4866) Fix a Windows-only vulnerability (`CVE-2018-6342`) in the development server ([@acdlite](https://github.com/acdlite)) + * Update the `sockjs-client` dependency + +#### Committers: 1 +- Andrew Clark ([acdlite](https://github.com/acdlite)) + +### Migrating from 1.1.4 to 1.1.5 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.1.5 +``` + +or + +``` +yarn add --exact react-scripts@1.1.5 +``` + +## 1.1.4 (April 3, 2018) + +#### :bug: Bug Fix + +* `react-dev-utils` + + * [#4250](https://github.com/facebook/create-react-app/pull/4250) Upgrade `detect-port-alt` to fix [#4189](https://github.com/facebook/create-react-app/issues/4189). ([@Timer](https://github.com/Timer)) + +#### Committers: 1 +- Joe Haddad ([Timer](https://github.com/Timer)) + +### Migrating from 1.1.3 to 1.1.4 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.1.4 +``` + +or + +``` +yarn add --exact react-scripts@1.1.4 +``` + +## 1.1.3 (April 3, 2018) + +#### :bug: Bug Fix + +* `react-scripts` + + * [#4247](https://github.com/facebook/create-react-app/pull/4247) Fix `environment.dispose is not a function` error caused by a Jest bug. ([@gaearon](https://github.com/gaearon)) + +#### Committers: 1 +- Dan Abramov ([gaearon](https://github.com/gaearon)) + +### Migrating from 1.1.2 to 1.1.3 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.1.3 +``` + +or + +``` +yarn add --exact react-scripts@1.1.3 +``` + +## 1.1.2 (April 3, 2018) + +#### :bug: Bug Fix + +* `react-scripts` + + * [#4085](https://github.com/facebook/create-react-app/pull/4085) Resolve `.js` before `.mjs` files to unbreak dependencies with native ESM support. ([@leebyron](https://github.com/leebyron)) + +#### :memo: Documentation + +* `react-scripts` + + * [#4197](https://github.com/facebook/create-react-app/pull/4197) Add troubleshooting for Github Pages. ([@xnt](https://github.com/xnt)) + +#### Committers: 2 +- Lee Byron ([leebyron](https://github.com/leebyron)) +- Vicente Plata ([xnt](https://github.com/xnt)) + +### Migrating from 1.1.1 to 1.1.2 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.1.2 +``` + +or + +``` +yarn add --exact react-scripts@1.1.2 +``` + +## 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 react-scripts@1.1.1 +``` + +or + +``` +yarn add --exact react-scripts@1.1.1 +``` + ## 1.1.0 (January 15, 2018) #### :rocket: New Feature @@ -9,7 +159,7 @@ * `react-error-overlay` * [#3474](https://github.com/facebookincubator/create-react-app/pull/3474) Allow the error overlay to be unregistered. ([@Timer](https://github.com/Timer)) - + * `create-react-app` * [#3408](https://github.com/facebookincubator/create-react-app/pull/3408) Add `--info` flag to help gather bug reports. ([@tabrindle](https://github.com/tabrindle)) @@ -35,7 +185,7 @@ * `create-react-app` * [#3320](https://github.com/facebookincubator/create-react-app/pull/3320) Fix offline installation to respect proxy from `.npmrc`. ([@mdogadailo](https://github.com/mdogadailo)) - + * `react-scripts` * [#3537](https://github.com/facebookincubator/create-react-app/pull/3537) Add `mjs` and `jsx` filename extensions to `file-loader` exclude pattern. ([@iansu](https://github.com/iansu)) diff --git a/README.md b/README.md index b09630e90baf6cf01ebbac9aba3500a2333e75b9..9bd10ab90090fc54e16cb3e662398fc4fc4e7de8 100644 --- a/README.md +++ b/README.md @@ -1,37 +1,20 @@ -# Create React App [](https://travis-ci.org/facebookincubator/create-react-app) +# Blue Abla - Create React App -Create React apps with no build configuration. +This is a fork of [Create React App](https://github.com/facebookincubator/create-react-app/). Please refer to their docs for more in-depth details. -* [Creating an App](#creating-an-app) – How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. - -Create React App works on macOS, Windows, and Linux.<br> -If something doesn’t work, please [file an issue](https://github.com/facebookincubator/create-react-app/issues/new). +This fork supports Sass and Prettier out of the box, and includes Blue Alba's linting rules. ## Quick Overview ```sh -npx create-react-app my-app +npx create-react-app my-app --scripts-verion @bluealba/react-scripts cd my-app npm start ``` - -*([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))* - Then open [http://localhost:3000/](http://localhost:3000/) to see your app.<br> +You can also check out [http://localhost:8888/](http://localhost:8888/) to see the Bundle Analyzer.<br> When you’re ready to deploy to production, create a minified bundle with `npm run build`. -<p align='center'> -<img src='https://cdn.rawgit.com/facebookincubator/create-react-app/6ab67e6b96457720d843aa3c557ff951a41bafc2/screencast.svg' width='600' alt=''> -</p> - -### Get Started Immediately - -You **don’t** need to install or configure tools like Webpack or Babel.<br> -They are preconfigured and hidden so that you can focus on the code. - -Just create a project, and you’re good to go. - ## Creating an App **You’ll need to have Node >= 6 on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects. @@ -39,7 +22,7 @@ Just create a project, and you’re good to go. To create a new app, run a single command: ```sh -npx create-react-app my-app +npx create-react-app my-app --scripts-verion @bluealba/react-scripts ``` *([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))* @@ -53,21 +36,26 @@ my-app ├── node_modules ├── package.json ├── .gitignore +├── .env ├── public -│ └── favicon.ico -│ └── index.html +│ ├── favicon.ico +│ ├── index.html │ └── manifest.json └── src - └── App.css - └── App.js - └── App.test.js - └── index.css + ├── components + ├── constants + ├── containers + │ ├── __test__ + │ │ └── App.test.js + │ ├── App.scss + │ └── App.js + ├── svg + │ └── logo.svg + ├── utils + │ └── registerServiceWorker.svg └── index.js - └── logo.svg - └── registerServiceWorker.js ``` -No configuration or complicated folder structures, just the files you need to build your app.<br> Once the installation is done, you can open your project folder: ```sh @@ -103,122 +91,6 @@ By default, it also [includes a service worker](https://github.com/facebookincub Your app is ready to be deployed. -## User Guide - -The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: - -- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) -- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) -- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) -- [Supported Browsers](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#supported-browsers) -- [Supported Language Features and Polyfills](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#supported-language-features-and-polyfills) -- [Syntax Highlighting in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#syntax-highlighting-in-the-editor) -- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) -- [Formatting Code Automatically](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#formatting-code-automatically) -- [Debugging in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging-in-the-editor) -- [Changing the Page `<title>`](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#changing-the-page-title) -- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) -- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) -- [Code Splitting](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) -- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) -- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) -- [Adding a CSS Preprocessor (Sass, Less etc.)](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc) -- [Adding Images, Fonts, and Files](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-fonts-and-files) -- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) -- [Using Global Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-global-variables) -- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) -- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) -- [Adding a Router](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-router) -- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) -- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) -- [Fetching Data with AJAX Requests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#fetching-data-with-ajax-requests) -- [Integrating with an API Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-an-api-backend) -- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) -- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) -- [Generating Dynamic `<meta>` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) -- [Pre-Rendering into Static HTML Files](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#pre-rendering-into-static-html-files) -- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) -- [Debugging Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging-tests) -- [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) -- [Publishing Components to npm](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#publishing-components-to-npm) -- [Making a Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) -- [Analyzing the Bundle Size](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#analyzing-the-bundle-size) -- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) -- [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration) -- [Troubleshooting](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#troubleshooting) - -A copy of the user guide will be created as `README.md` in your project folder. - -## How to Update to New Versions? - -Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. - -## Philosophy - -* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. - -* **No Configuration Required:** You don't need to configure anything. Reasonably good configuration of both development and production builds is handled for you so you can focus on writing code. - -* **No Lock-In:** You can “eject†to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. - -## What’s Included? - -Your environment will have everything you need to build a modern single-page React app: - -* React, JSX, ES6, and Flow syntax support. -* Language extras beyond ES6 like the object spread operator. -* Autoprefixed CSS, so you don’t need `-webkit` or other prefixes. -* A fast interactive unit test runner with built-in support for coverage reporting. -* A live development server that warns about common mistakes. -* A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps. -* An offline-first [service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) and a [web app manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/), meeting all the [Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) criteria. -* Hassle-free updates for the above tools with a single dependency. - -Check out [this guide](https://github.com/nitishdayal/cra_closer_look) for an overview of how these tools fit together. - -The tradeoff is that **these tools are preconfigured to work in a specific way**. If your project needs more customization, you can ["eject"](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject) and customize it, but then you will need to maintain this configuration. - -## Popular Alternatives - -Create React App is a great fit for: - -* **Learning React** in a comfortable and feature-rich development environment. -* **Starting new single-page React applications.** -* **Creating examples** with React for your libraries and components. - -Here’s a few common cases where you might want to try something else: - -* If you want to **try React** without hundreds of transitive build tool dependencies, consider [using a single HTML file or an online sandbox instead](https://reactjs.org/docs/try-react.html). - -* If you need to **integrate React code with a server-side template framework** like Rails or Django, or if you’re **not building a single-page app**, consider using [nwb](https://github.com/insin/nwb) or [Neutrino](https://neutrino.js.org/) which are more flexible. - -* If you need to **publish a React component**, [nwb](https://github.com/insin/nwb) can [also do this](https://github.com/insin/nwb#react-components-and-libraries), as well as [Neutrino's react-components preset](https://neutrino.js.org/packages/react-components/). - -* If you want to do **server rendering** with React and Node.js, check out [Next.js](https://github.com/zeit/next.js/) or [Razzle](https://github.com/jaredpalmer/razzle). Create React App is agnostic of the backend, and just produces static HTML/JS/CSS bundles. - -* 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). - -* Finally, if you need **more customization**, check out [Neutrino](https://neutrino.js.org/) and its [React preset](https://neutrino.js.org/packages/react/). - -All of the above tools can work with little to no configuration. - -If you prefer configuring the build yourself, [follow this guide](https://reactjs.org/docs/add-react-to-an-existing-app.html). - -## Contributing - -We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. - -## React Native - -Looking for something similar, but for React Native?<br> -Check out [Create React Native App](https://github.com/react-community/create-react-native-app/). - -## Acknowledgements - -We are grateful to the authors of existing related projects for their ideas and collaboration: +### `npm run format` or `yarn format` -* [@eanplatter](https://github.com/eanplatter) -* [@insin](https://github.com/insin) -* [@mxstbr](https://github.com/mxstbr) +Formats your code using prettier rules. diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js new file mode 100644 index 0000000000000000000000000000000000000000..5b02e6545aae77b01282e499e61706ed2161485d --- /dev/null +++ b/packages/babel-preset-react-app/create.js @@ -0,0 +1,137 @@ +/** + * Copyright (c) 2015-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'; + +module.exports = function create(env) { + if (env !== 'development' && env !== 'test' && env !== 'production') { + throw new Error( + 'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' + + '`BABEL_ENV` environment variables. Valid values are "development", ' + + '"test", and "production". Instead, received: ' + + JSON.stringify(env) + + '.' + ); + } + + const plugins = [ + // Necessary to include regardless of the environment because + // in practice some other transforms (such as object-rest-spread) + // don't work without it: https://github.com/babel/babel/issues/7215 + require.resolve('babel-plugin-transform-es2015-destructuring'), + // styled-components + require.resolve('babel-plugin-styled-components'), + // class { handleClick = () => { } } + require.resolve('babel-plugin-transform-class-properties'), + // The following two plugins use Object.assign directly, instead of Babel's + // extends helper. Note that this assumes `Object.assign` is available. + // { ...todo, completed: true } + [ + require.resolve('babel-plugin-transform-object-rest-spread'), + { + useBuiltIns: true, + }, + ], + // Transforms JSX + [ + require.resolve('babel-plugin-transform-react-jsx'), + { + useBuiltIns: true, + }, + ], + // Polyfills the runtime needed for async/await and generators + [ + require.resolve('babel-plugin-transform-runtime'), + { + helpers: false, + polyfill: false, + regenerator: true, + }, + ], + ]; + + if (env === 'development' || env === 'test') { + // The following two plugins are currently necessary to make React warnings + // include more valuable information. They are included here because they are + // currently not enabled in babel-preset-react. See the below threads for more info: + // https://github.com/babel/babel/issues/4702 + // https://github.com/babel/babel/pull/3540#issuecomment-228673661 + // https://github.com/facebookincubator/create-react-app/issues/989 + plugins.push.apply(plugins, [ + // Adds component stack to warning messages + require.resolve('babel-plugin-transform-react-jsx-source'), + // Adds __self attribute to JSX which React will use for some warnings + require.resolve('babel-plugin-transform-react-jsx-self'), + ]); + } + + if (env === 'test') { + return { + presets: [ + // ES features necessary for user's Node version + [ + require('babel-preset-env').default, + { + targets: { + node: 'current', + }, + }, + ], + // JSX, Flow + require.resolve('babel-preset-react'), + ], + plugins: plugins.concat([ + // Compiles import() to a deferred require() + require.resolve('babel-plugin-dynamic-import-node'), + ]), + }; + } else { + return { + presets: [ + // Latest stable ECMAScript features + [ + require.resolve('babel-preset-env'), + { + targets: { + // React parses on ie 9, so we should too + ie: 9, + // We currently minify with uglify + // Remove after https://github.com/mishoo/UglifyJS2/issues/448 + uglify: true, + }, + // Disable polyfill transforms + useBuiltIns: false, + // Do not transform modules to CJS + modules: false, + }, + ], + // JSX, Flow + require.resolve('babel-preset-react'), + ], + plugins: plugins.concat([ + // function* () { yield 42; yield 43; } + [ + require.resolve('babel-plugin-transform-regenerator'), + { + // Async functions are converted to generators by babel-preset-env + async: false, + }, + ], + // Adds syntax support for import() + require.resolve('babel-plugin-syntax-dynamic-import'), + ]), + }; + + if (env === 'production') { + // Optimization: hoist JSX that never changes out of render() + // Disabled because of issues: https://github.com/facebookincubator/create-react-app/issues/553 + // TODO: Enable again when these issues are resolved. + // plugins.push.apply(plugins, [ + // require.resolve('babel-plugin-transform-react-constant-elements') + // ]); + } + } +}; diff --git a/packages/babel-preset-react-app/dev.js b/packages/babel-preset-react-app/dev.js new file mode 100644 index 0000000000000000000000000000000000000000..399cfb708c3b64876f0e7054d5bcd5b3229261bd --- /dev/null +++ b/packages/babel-preset-react-app/dev.js @@ -0,0 +1,11 @@ +/** + * Copyright (c) 2015-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 create = require('./create'); + +module.exports = create('development'); diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js index d90fb6af50ba996bbc80f71c30b55c77495e3f4e..47b1c8949c1233659ac67a434b222e7a6004de86 100644 --- a/packages/babel-preset-react-app/index.js +++ b/packages/babel-preset-react-app/index.js @@ -6,39 +6,7 @@ */ 'use strict'; -const plugins = [ - // Necessary to include regardless of the environment because - // in practice some other transforms (such as object-rest-spread) - // don't work without it: https://github.com/babel/babel/issues/7215 - require.resolve('babel-plugin-transform-es2015-destructuring'), - // class { handleClick = () => { } } - require.resolve('babel-plugin-transform-class-properties'), - // The following two plugins use Object.assign directly, instead of Babel's - // extends helper. Note that this assumes `Object.assign` is available. - // { ...todo, completed: true } - [ - require.resolve('babel-plugin-transform-object-rest-spread'), - { - useBuiltIns: true, - }, - ], - // Transforms JSX - [ - require.resolve('babel-plugin-transform-react-jsx'), - { - useBuiltIns: true, - }, - ], - // Polyfills the runtime needed for async/await and generators - [ - require.resolve('babel-plugin-transform-runtime'), - { - helpers: false, - polyfill: false, - regenerator: true, - }, - ], -]; +const create = require('./create'); // This is similar to how `env` works in Babel: // https://babeljs.io/docs/usage/babelrc/#env-option @@ -47,94 +15,5 @@ const plugins = [ // https://github.com/facebookincubator/create-react-app/issues/720 // It’s also nice that we can enforce `NODE_ENV` being specified. var env = process.env.BABEL_ENV || process.env.NODE_ENV; -if (env !== 'development' && env !== 'test' && env !== 'production') { - throw new Error( - 'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' + - '`BABEL_ENV` environment variables. Valid values are "development", ' + - '"test", and "production". Instead, received: ' + - JSON.stringify(env) + - '.' - ); -} -if (env === 'development' || env === 'test') { - // The following two plugins are currently necessary to make React warnings - // include more valuable information. They are included here because they are - // currently not enabled in babel-preset-react. See the below threads for more info: - // https://github.com/babel/babel/issues/4702 - // https://github.com/babel/babel/pull/3540#issuecomment-228673661 - // https://github.com/facebookincubator/create-react-app/issues/989 - plugins.push.apply(plugins, [ - // Adds component stack to warning messages - require.resolve('babel-plugin-transform-react-jsx-source'), - // Adds __self attribute to JSX which React will use for some warnings - require.resolve('babel-plugin-transform-react-jsx-self'), - ]); -} - -if (env === 'test') { - module.exports = { - presets: [ - // ES features necessary for user's Node version - [ - require('babel-preset-env').default, - { - targets: { - node: 'current', - }, - }, - ], - // JSX, Flow - require.resolve('babel-preset-react'), - ], - plugins: plugins.concat([ - // Compiles import() to a deferred require() - require.resolve('babel-plugin-dynamic-import-node'), - ]), - }; -} else { - module.exports = { - presets: [ - // Latest stable ECMAScript features - [ - require.resolve('babel-preset-env'), - { - targets: { - // React parses on ie 9, so we should too - ie: 9, - // We currently minify with uglify - // Remove after https://github.com/mishoo/UglifyJS2/issues/448 - uglify: true, - }, - // Disable polyfill transforms - useBuiltIns: false, - // Do not transform modules to CJS - modules: false, - }, - ], - // JSX, Flow - require.resolve('babel-preset-react'), - ], - plugins: plugins.concat([ - // function* () { yield 42; yield 43; } - [ - require.resolve('babel-plugin-transform-regenerator'), - { - // Async functions are converted to generators by babel-preset-env - async: false, - }, - ], - // Adds syntax support for import() - require.resolve('babel-plugin-syntax-dynamic-import'), - ]), - }; - - if (env === 'production') { - // Optimization: hoist JSX that never changes out of render() - // Disabled because of issues: https://github.com/facebookincubator/create-react-app/issues/553 - // TODO: Enable again when these issues are resolved. - // plugins.push.apply(plugins, [ - // require.resolve('babel-plugin-transform-react-constant-elements') - // ]); - } -} +module.exports = create(env); diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index c6a7e29441df4b93c0eb0b1a0f79907461a4ed88..fc90c6766abd45e2170d0d7783ef4a4cbc12db8a 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -1,6 +1,6 @@ { - "name": "babel-preset-react-app", - "version": "3.1.1", + "name": "@bluealba/babel-preset-react-app", + "version": "3.2.0", "description": "Babel preset used by Create React App", "repository": "facebookincubator/create-react-app", "license": "MIT", @@ -8,10 +8,15 @@ "url": "https://github.com/facebookincubator/create-react-app/issues" }, "files": [ - "index.js" + "index.js", + "create.js", + "dev.js", + "prod.js", + "test.js" ], "dependencies": { "babel-plugin-dynamic-import-node": "1.1.0", + "babel-plugin-styled-components": "1.5.1", "babel-plugin-syntax-dynamic-import": "6.18.0", "babel-plugin-transform-class-properties": "6.24.1", "babel-plugin-transform-es2015-destructuring": "6.23.0", diff --git a/packages/babel-preset-react-app/prod.js b/packages/babel-preset-react-app/prod.js new file mode 100644 index 0000000000000000000000000000000000000000..bf7520c45b58bba6042db4c26fc42ae23eb98f30 --- /dev/null +++ b/packages/babel-preset-react-app/prod.js @@ -0,0 +1,11 @@ +/** + * Copyright (c) 2015-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 create = require('./create'); + +module.exports = create('production'); diff --git a/packages/babel-preset-react-app/test.js b/packages/babel-preset-react-app/test.js new file mode 100644 index 0000000000000000000000000000000000000000..3202d2888102a1fe72e52cdd918f8df9ed86f23f --- /dev/null +++ b/packages/babel-preset-react-app/test.js @@ -0,0 +1,11 @@ +/** + * Copyright (c) 2015-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 create = require('./create'); + +module.exports = create('test'); diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index a2d9fdbd86b7118a4435fd7f8b2a7f665c9a5b6f..db0d5a035e8f3acee462364a001fb4b1c4b792e5 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -481,7 +481,10 @@ function getPackageName(installPackage) { ); } else if (installPackage.match(/^file:/)) { const installPackagePath = installPackage.match(/^file:(.*)?$/)[1]; - const installPackageJson = require(path.join(installPackagePath, 'package.json')); + const installPackageJson = require(path.join( + installPackagePath, + 'package.json' + )); return Promise.resolve(installPackageJson.name); } return Promise.resolve(installPackage); @@ -612,6 +615,7 @@ function isSafeToCreateProjectIn(root, name) { 'Thumbs.db', '.git', '.gitignore', + '.env', '.idea', 'README.md', 'LICENSE', diff --git a/packages/create-react-app/package.json b/packages/create-react-app/package.json index 65ab56a16989879e39a52ac697392c5027ceef57..4d8f4112eada9c579cb34a7dc20f4bd167d860f2 100644 --- a/packages/create-react-app/package.json +++ b/packages/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "create-react-app", - "version": "1.5.0", + "version": "1.5.2", "keywords": [ "react" ], @@ -24,7 +24,7 @@ "chalk": "^1.1.1", "commander": "^2.9.0", "cross-spawn": "^4.0.0", - "envinfo": "^3.8.0", + "envinfo": "3.4.2", "fs-extra": "^1.0.0", "hyperquest": "^2.1.2", "semver": "^5.0.3", diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js index c7a619abd62bc08bcbc6430f8856389b42489014..560b7c704884c3f3f337ae42a8f7b6399327b7f6 100644 --- a/packages/eslint-config-react-app/index.js +++ b/packages/eslint-config-react-app/index.js @@ -87,7 +87,7 @@ module.exports = { parser: 'babel-eslint', - plugins: ['import', 'flowtype', 'jsx-a11y', 'react'], + plugins: ['import', 'flowtype', 'jsx-a11y', 'react', 'prettier'], env: { browser: true, @@ -95,10 +95,11 @@ module.exports = { es6: true, jest: true, node: true, + mocha: true, }, parserOptions: { - ecmaVersion: 6, + ecmaVersion: 2017, sourceType: 'module', ecmaFeatures: { jsx: true, @@ -113,10 +114,10 @@ module.exports = { 'default-case': ['warn', { commentPattern: '^no default$' }], 'dot-location': ['warn', 'property'], eqeqeq: ['warn', 'allow-null'], - 'new-parens': 'warn', 'no-array-constructor': 'warn', 'no-caller': 'warn', 'no-cond-assign': ['warn', 'except-parens'], + 'no-console': 'warn', 'no-const-assign': 'warn', 'no-control-regex': 'warn', 'no-delete-var': 'warn', @@ -176,7 +177,6 @@ module.exports = { 'no-throw-literal': 'warn', 'no-undef': 'error', 'no-restricted-globals': ['error'].concat(restrictedGlobals), - 'no-unexpected-multiline': 'warn', 'no-unreachable': 'warn', 'no-unused-expressions': [ 'warn', @@ -215,12 +215,11 @@ module.exports = { }, ], 'no-with': 'warn', - 'no-whitespace-before-property': 'warn', + 'prefer-const': 'warn', + quotes: ['error', 'double', 'avoid-escape'], radix: 'warn', 'require-yield': 'warn', - 'rest-spread-spacing': ['warn', 'never'], - strict: ['warn', 'never'], - 'unicode-bom': ['warn', 'never'], + strict: ['error', 'global'], 'use-isnan': 'warn', 'valid-typeof': 'warn', 'no-restricted-properties': [ @@ -243,7 +242,7 @@ module.exports = { // https://github.com/benmosher/eslint-plugin-import/tree/master/docs/rules 'import/first': 'error', 'import/no-amd': 'error', - 'import/no-webpack-loader-syntax': 'error', + 'import/no-webpack-loader-syntax': 'warn', // https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules 'react/jsx-no-comment-textnodes': 'warn', @@ -257,12 +256,18 @@ module.exports = { ignore: [], }, ], + 'react/forbid-prop-types': ['warn', { forbid: ['any', 'array', 'object'] }], 'react/jsx-uses-react': 'warn', 'react/jsx-uses-vars': 'warn', + 'react/no-children-prop': 'warn', 'react/no-danger-with-children': 'warn', 'react/no-deprecated': 'warn', 'react/no-direct-mutation-state': 'warn', 'react/no-is-mounted': 'warn', + 'react/no-string-refs': 'warn', + 'react/no-unescaped-entities': 'warn', + 'react/no-unknown-property': 'warn', + 'react/prop-types': 'warn', 'react/react-in-jsx-scope': 'error', 'react/require-render-return': 'error', 'react/style-prop-object': 'warn', @@ -291,5 +296,10 @@ module.exports = { 'flowtype/define-flow-type': 'warn', 'flowtype/require-valid-file-annotation': 'warn', 'flowtype/use-flow-type': 'warn', + + // https://prettier.io/docs/en/eslint.html + 'prettier/prettier': 'warn', }, + + extends: ['prettier', 'prettier/react'], }; diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index c13b0417c4633fe42e8e1b3937008a9b62a3e9c7..e5abb5d1838112faa068b9b466b1c7bb7d611aed 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -1,6 +1,6 @@ { - "name": "eslint-config-react-app", - "version": "2.1.0", + "name": "@bluealba/eslint-config-react-app", + "version": "2.2.3", "description": "ESLint configuration used by Create React App", "repository": "facebookincubator/create-react-app", "license": "MIT", @@ -10,12 +10,14 @@ "files": [ "index.js" ], - "peerDependencies": { + "dependencies": { "babel-eslint": "^7.2.3", "eslint": "^4.1.1", + "eslint-config-prettier": "^2.9.0", "eslint-plugin-flowtype": "^2.34.1", "eslint-plugin-import": "^2.6.0", "eslint-plugin-jsx-a11y": "^5.1.1", - "eslint-plugin-react": "^7.1.0" + "eslint-plugin-react": "^7.1.0", + "eslint-plugin-prettier": "^2.6.0" } } diff --git a/packages/react-dev-utils/launchEditor.js b/packages/react-dev-utils/launchEditor.js index cf190b08619850cec943a8ce11886d0d16f1c4c2..20626d272597c5fc9f2aac4281f62c2d61db148e 100644 --- a/packages/react-dev-utils/launchEditor.js +++ b/packages/react-dev-utils/launchEditor.js @@ -56,8 +56,7 @@ const COMMON_EDITORS_OSX = { '/Applications/RubyMine.app/Contents/MacOS/rubymine', '/Applications/WebStorm.app/Contents/MacOS/webstorm': '/Applications/WebStorm.app/Contents/MacOS/webstorm', - '/Applications/MacVim.app/Contents/MacOS/MacVim': - 'mvim', + '/Applications/MacVim.app/Contents/MacOS/MacVim': 'mvim', }; const COMMON_EDITORS_LINUX = { @@ -96,6 +95,11 @@ const COMMON_EDITORS_WIN = [ 'webstorm64.exe', ]; +// Transpiled version of: /^[\p{L}0-9/.\-_\\]+$/u +// Non-transpiled version requires support for Unicode property regex. Allows +// alphanumeric characters, periods, dashes, slashes, and underscores. +const WINDOWS_FILE_NAME_WHITELIST = /^(?:[\x2D-9A-Z\\_a-z\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0560-\u0588\u05D0-\u05EA\u05EF-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u0860-\u086A\u08A0-\u08B4\u08B6-\u08BD\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u09FC\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0AF9\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58-\u0C5A\u0C60\u0C61\u0C80\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D54-\u0D56\u0D5F-\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16F1-\u16F8\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1878\u1880-\u1884\u1887-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1C80-\u1C88\u1C90-\u1CBA\u1CBD-\u1CBF\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2183\u2184\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005\u3006\u3031-\u3035\u303B\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312F\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FEF\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6E5\uA717-\uA71F\uA722-\uA788\uA78B-\uA7B9\uA7F7-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA8FD\uA8FE\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uA9E0-\uA9E4\uA9E6-\uA9EF\uA9FA-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB65\uAB70-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDE80-\uDE9C\uDEA0-\uDED0\uDF00-\uDF1F\uDF2D-\uDF40\uDF42-\uDF49\uDF50-\uDF75\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF]|\uD801[\uDC00-\uDC9D\uDCB0-\uDCD3\uDCD8-\uDCFB\uDD00-\uDD27\uDD30-\uDD63\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC60-\uDC76\uDC80-\uDC9E\uDCE0-\uDCF2\uDCF4\uDCF5\uDD00-\uDD15\uDD20-\uDD39\uDD80-\uDDB7\uDDBE\uDDBF\uDE00\uDE10-\uDE13\uDE15-\uDE17\uDE19-\uDE35\uDE60-\uDE7C\uDE80-\uDE9C\uDEC0-\uDEC7\uDEC9-\uDEE4\uDF00-\uDF35\uDF40-\uDF55\uDF60-\uDF72\uDF80-\uDF91]|\uD803[\uDC00-\uDC48\uDC80-\uDCB2\uDCC0-\uDCF2\uDD00-\uDD23\uDF00-\uDF1C\uDF27\uDF30-\uDF45]|\uD804[\uDC03-\uDC37\uDC83-\uDCAF\uDCD0-\uDCE8\uDD03-\uDD26\uDD44\uDD50-\uDD72\uDD76\uDD83-\uDDB2\uDDC1-\uDDC4\uDDDA\uDDDC\uDE00-\uDE11\uDE13-\uDE2B\uDE80-\uDE86\uDE88\uDE8A-\uDE8D\uDE8F-\uDE9D\uDE9F-\uDEA8\uDEB0-\uDEDE\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3D\uDF50\uDF5D-\uDF61]|\uD805[\uDC00-\uDC34\uDC47-\uDC4A\uDC80-\uDCAF\uDCC4\uDCC5\uDCC7\uDD80-\uDDAE\uDDD8-\uDDDB\uDE00-\uDE2F\uDE44\uDE80-\uDEAA\uDF00-\uDF1A]|\uD806[\uDC00-\uDC2B\uDCA0-\uDCDF\uDCFF\uDE00\uDE0B-\uDE32\uDE3A\uDE50\uDE5C-\uDE83\uDE86-\uDE89\uDE9D\uDEC0-\uDEF8]|\uD807[\uDC00-\uDC08\uDC0A-\uDC2E\uDC40\uDC72-\uDC8F\uDD00-\uDD06\uDD08\uDD09\uDD0B-\uDD30\uDD46\uDD60-\uDD65\uDD67\uDD68\uDD6A-\uDD89\uDD98\uDEE0-\uDEF2]|\uD808[\uDC00-\uDF99]|\uD809[\uDC80-\uDD43]|[\uD80C\uD81C-\uD820\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD811[\uDC00-\uDE46]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDED0-\uDEED\uDF00-\uDF2F\uDF40-\uDF43\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDE40-\uDE7F\uDF00-\uDF44\uDF50\uDF93-\uDF9F\uDFE0\uDFE1]|\uD821[\uDC00-\uDFF1]|\uD822[\uDC00-\uDEF2]|\uD82C[\uDC00-\uDD1E\uDD70-\uDEFB]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB]|\uD83A[\uDC00-\uDCC4\uDD00-\uDD43]|\uD83B[\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|\uD87E[\uDC00-\uDE1D])+$/; + function addWorkspaceToArgumentsIfExists(args, workspace) { if (workspace) { args.unshift(workspace); @@ -306,6 +310,29 @@ function launchEditor(fileName, lineNumber, colNumber) { fileName = path.relative('', fileName); } + // cmd.exe on Windows is vulnerable to RCE attacks given a file name of the + // form "C:\Users\myusername\Downloads\& curl 172.21.93.52". Use a whitelist + // to validate user-provided file names. This doesn't cover the entire range + // of valid file names but should cover almost all of them in practice. + if ( + process.platform === 'win32' && + !WINDOWS_FILE_NAME_WHITELIST.test(fileName.trim()) + ) { + console.log(); + console.log( + chalk.red('Could not open ' + path.basename(fileName) + ' in the editor.') + ); + console.log(); + console.log( + 'When running on Windows, file names are checked against a whitelist ' + + 'to protect against remote code execution attacks. File names may ' + + 'consist only of alphanumeric characters (all languages), periods, ' + + 'dashes, slashes, and underscores.' + ); + console.log(); + return; + } + let workspace = null; if (lineNumber) { args = args.concat( diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 18f37c971e4b866a72333b45d990587f8861b260..690c275f4d68b06f7c6f0e5fa650b57e184f9431 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -1,6 +1,6 @@ { "name": "react-dev-utils", - "version": "5.0.0", + "version": "5.0.2", "description": "Webpack utilities used by Create React App", "repository": "facebookincubator/create-react-app", "license": "MIT", @@ -40,7 +40,7 @@ "babel-code-frame": "6.26.0", "chalk": "1.1.3", "cross-spawn": "5.1.0", - "detect-port-alt": "1.1.5", + "detect-port-alt": "1.1.6", "escape-string-regexp": "1.0.5", "filesize": "3.5.11", "global-modules": "1.0.0", @@ -48,10 +48,10 @@ "inquirer": "3.3.0", "is-root": "1.0.0", "opn": "5.2.0", - "react-error-overlay": "^4.0.0", + "react-error-overlay": "^4.0.1", "recursive-readdir": "2.2.1", "shell-quote": "1.6.1", - "sockjs-client": "1.1.4", + "sockjs-client": "1.1.5", "strip-ansi": "3.0.1", "text-table": "0.2.0" }, diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index 87099dd5e82a534a92a664c40c0f7b70b7431b5c..06354daf1b66a8358b0dd78e6e000932565ed2d6 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -1,6 +1,6 @@ { "name": "react-error-overlay", - "version": "4.0.0", + "version": "4.0.1", "description": "An overlay for displaying stack frames.", "main": "lib/index.js", "scripts": { diff --git a/packages/react-scripts/bin/react-scripts.js b/packages/react-scripts/bin/react-scripts.js index 9de034ff0d95e765183d97a309240f4f8ed5467d..2cb2a76d15aff4fdd5b742ab1b3aef4dc0dc8d2d 100755 --- a/packages/react-scripts/bin/react-scripts.js +++ b/packages/react-scripts/bin/react-scripts.js @@ -21,7 +21,8 @@ switch (script) { case 'build': case 'eject': case 'start': - case 'test': { + case 'test': + case 'format': { const result = spawn.sync( 'node', nodeArgs diff --git a/packages/react-scripts/config/jest/babelTransform.js b/packages/react-scripts/config/jest/babelTransform.js index 02742e90c6c1d2a62a43223d7cf26c3b00c915fa..d5ae0141590a27cae99f9db95ed90b9cac8b6fa3 100644 --- a/packages/react-scripts/config/jest/babelTransform.js +++ b/packages/react-scripts/config/jest/babelTransform.js @@ -10,6 +10,6 @@ const babelJest = require('babel-jest'); module.exports = babelJest.createTransformer({ - presets: [require.resolve('babel-preset-react-app')], + presets: [require.resolve('@bluealba/babel-preset-react-app')], babelrc: false, }); diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 9f3131b06605d4be224e2cb25aac806559cf8ba6..5654774e852831a4cbc0dfe20692b5b181a0f71c 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -15,6 +15,8 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); +const BundleAnalyzerPlugin = require('webpack-bundle-analyzer') + .BundleAnalyzerPlugin; const eslintFormatter = require('react-dev-utils/eslintFormatter'); const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); const getClientEnvironment = require('./env'); @@ -133,7 +135,7 @@ module.exports = { eslintPath: require.resolve('eslint'), // @remove-on-eject-begin baseConfig: { - extends: [require.resolve('eslint-config-react-app')], + extends: [require.resolve('@bluealba/eslint-config-react-app')], }, ignore: false, useEslintrc: false, @@ -168,7 +170,7 @@ module.exports = { options: { // @remove-on-eject-begin babelrc: false, - presets: [require.resolve('babel-preset-react-app')], + presets: [require.resolve('@bluealba/babel-preset-react-app')], // @remove-on-eject-end // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/babel-loader/ @@ -176,13 +178,14 @@ module.exports = { cacheDirectory: true, }, }, + // "sass" loader compiles Sass code to CSS. // "postcss" loader applies autoprefixer to our CSS. // "css" loader resolves paths in CSS and adds assets as dependencies. // "style" loader turns CSS into JS modules that inject <style> tags. // In production, we use a plugin to extract that CSS to a file, but // in development "style" loader enables hot editing of CSS. { - test: /\.css$/, + test: /\.(css|sass|scss)$/, use: [ require.resolve('style-loader'), { @@ -211,6 +214,9 @@ module.exports = { ], }, }, + { + loader: require.resolve('sass-loader'), + }, ], }, // "file" loader makes sure those assets get served by WebpackDevServer. @@ -262,6 +268,10 @@ module.exports = { // makes the discovery automatic so you don't have to restart. // See https://github.com/facebookincubator/create-react-app/issues/186 new WatchMissingNodeModulesPlugin(paths.appNodeModules), + new BundleAnalyzerPlugin({ + openAnalyzer: false, + watch: true, + }), // Moment.js is an extremely popular library that bundles large locale files // by default due to how Webpack interprets its code. This is a practical // solution that requires the user to opt into importing specific locales. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 3b2a2068db28e9f2e83ac1df76652366e9407000..61083509cdbd68047d56917155562535a0b090a0 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -141,7 +141,7 @@ module.exports = { // TODO: consider separate config for production, // e.g. to enable no-console and no-debugger only in production. baseConfig: { - extends: [require.resolve('eslint-config-react-app')], + extends: [require.resolve('@bluealba/eslint-config-react-app')], }, ignore: false, useEslintrc: false, @@ -175,12 +175,13 @@ module.exports = { options: { // @remove-on-eject-begin babelrc: false, - presets: [require.resolve('babel-preset-react-app')], + presets: [require.resolve('@bluealba/babel-preset-react-app')], // @remove-on-eject-end compact: true, }, }, // The notation here is somewhat confusing. + // "sass" loader compiles Sass code to CSS. // "postcss" loader applies autoprefixer to our CSS. // "css" loader resolves paths in CSS and adds assets as dependencies. // "style" loader normally turns CSS into JS modules injecting <style>, @@ -193,7 +194,7 @@ module.exports = { // use the "style" loader inside the async code so CSS from them won't be // in the main CSS file. { - test: /\.css$/, + test: /\.(css|sass|scss)$/, loader: ExtractTextPlugin.extract( Object.assign( { @@ -232,6 +233,9 @@ module.exports = { ], }, }, + { + loader: require.resolve('sass-loader'), + }, ], }, extractTextPluginOptions diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 91d4a584cf47e8441f939ce54889662af9aff802..8bef990dc4ba2cc462e1ee4fe93d3583da2b403a 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { - "name": "react-scripts", - "version": "1.1.0", + "name": "@bluealba/react-scripts", + "version": "1.2.3", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "MIT", @@ -21,41 +21,42 @@ "react-scripts": "./bin/react-scripts.js" }, "dependencies": { + "@bluealba/eslint-config-react-app": "^2.2.0", "autoprefixer": "7.1.6", "babel-core": "6.26.0", "babel-eslint": "7.2.3", "babel-jest": "20.0.3", "babel-loader": "7.1.2", - "babel-preset-react-app": "^3.1.1", + "@bluealba/babel-preset-react-app": "^3.2.0", "babel-runtime": "6.26.0", "case-sensitive-paths-webpack-plugin": "2.1.1", "chalk": "1.1.3", "css-loader": "0.28.7", "dotenv": "4.0.0", - "dotenv-expand": "4.0.1", + "dotenv-expand": "4.2.0", "eslint": "4.10.0", - "eslint-config-react-app": "^2.1.0", "eslint-loader": "1.9.0", - "eslint-plugin-flowtype": "2.39.1", - "eslint-plugin-import": "2.8.0", - "eslint-plugin-jsx-a11y": "5.1.1", - "eslint-plugin-react": "7.4.0", "extract-text-webpack-plugin": "3.0.2", "file-loader": "1.1.5", - "fs-extra": "3.0.1", + "fs-extra": "5.0.0", "html-webpack-plugin": "2.29.0", "jest": "20.0.4", + "node-sass": "^4.9.0", "object-assign": "4.1.1", "postcss-flexbugs-fixes": "3.2.0", "postcss-loader": "2.0.8", + "prettier-eslint-cli": "^4.7.0", "promise": "8.0.1", "raf": "3.4.0", - "react-dev-utils": "^5.0.0", + "react-dev-utils": "^5.0.2", + "resolve": "1.6.0", + "sass-loader": "^7.0.3", "style-loader": "0.19.0", "sw-precache-webpack-plugin": "0.11.4", "url-loader": "0.6.2", "webpack": "3.8.1", - "webpack-dev-server": "2.9.4", + "webpack-bundle-analyzer": "^2.13.1", + "webpack-dev-server": "2.11.3", "webpack-manifest-plugin": "1.3.2", "whatwg-fetch": "2.0.3" }, @@ -64,6 +65,6 @@ "react-dom": "^16.0.0" }, "optionalDependencies": { - "fsevents": "1.1.2" + "fsevents": "^1.1.3" } } diff --git a/packages/react-scripts/scripts/format.js b/packages/react-scripts/scripts/format.js new file mode 100644 index 0000000000000000000000000000000000000000..59c400acb92409f652a9bd832e799ed43429afdf --- /dev/null +++ b/packages/react-scripts/scripts/format.js @@ -0,0 +1,19 @@ +'use strict'; + +const paths = require('../config/paths'); +const spawn = require('react-dev-utils/crossSpawn'); +const chalk = require('chalk'); + +console.log( + `Formatting your code with ${chalk.magenta('prettier-eslint')} 💅💅💅` +); +// Calls the prettier-eslint-cli command with --write +// this will format every .js file in the src/ folder +const prettierEslint = spawn.sync( + 'prettier-eslint', + ['--write', `"${paths.appSrc}/**/*.js"`], + { shell: true, stdio: 'inherit' } +); +if (prettierEslint.status !== 0) { + console.log('There was an error while formatting.'); +} diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js index b283bad6ee6b11689a011c955a23fdf6a6f5f569..283ba5f027dbdccd727e198cf16dbc2428b3e1fe 100644 --- a/packages/react-scripts/scripts/init.js +++ b/packages/react-scripts/scripts/init.js @@ -34,6 +34,10 @@ module.exports = function( // Copy over some of the devDependencies appPackage.dependencies = appPackage.dependencies || {}; + // Fix for vscode autoimports + appPackage.devDependencies = { + typescript: '^3.0.0-dev.20180706', + }; // Setup the script rules appPackage.scripts = { @@ -41,6 +45,22 @@ module.exports = function( build: 'react-scripts build', test: 'react-scripts test --env=jsdom', eject: 'react-scripts eject', + format: 'react-scripts format', + }; + + appPackage.eslintConfig = { + extends: '@bluealba/eslint-config-react-app', + }; + + appPackage.prettier = { + arrowParens: 'avoid', + bracketSpacing: true, + jsxBracketSameLine: false, + printWidth: 80, + semi: true, + singleQuote: false, + trailingComma: 'es5', + useTabs: true, }; fs.writeFileSync( @@ -69,25 +89,28 @@ module.exports = function( return; } - // Rename gitignore after the fact to prevent npm from renaming it to .npmignore + // Rename gitignore and env after the fact to prevent npm from renaming it to .npmignore // See: https://github.com/npm/npm/issues/1862 - fs.move( - path.join(appPath, 'gitignore'), - path.join(appPath, '.gitignore'), - [], - err => { - if (err) { - // Append if there's already a `.gitignore` file there - if (err.code === 'EEXIST') { - const data = fs.readFileSync(path.join(appPath, 'gitignore')); - fs.appendFileSync(path.join(appPath, '.gitignore'), data); - fs.unlinkSync(path.join(appPath, 'gitignore')); - } else { - throw err; + ['gitignore', 'env'].forEach(constants => { + const dotConstants = '.' + constants; + fs.move( + path.join(appPath, constants), + path.join(appPath, dotConstants), + [], + err => { + if (err) { + // Append if there's already a `.${constantsFile}` there + if (err.code === 'EEXIST') { + const data = fs.readFileSync(path.join(appPath, constants)); + fs.appendFileSync(path.join(appPath, dotConstants), data); + fs.unlinkSync(path.join(appPath, constants)); + } else { + throw err; + } } } - } - ); + ); + }); let command; let args; @@ -168,6 +191,9 @@ module.exports = function( ' and scripts into the app directory. If you do this, you can’t go back!' ); console.log(); + console.log(chalk.cyan(` ${displayedCommand} format`)); + console.log(' Format all files in your code using prettier'); + console.log(); console.log('We suggest that you begin by typing:'); console.log(); console.log(chalk.cyan(' cd'), cdpath); diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index 3ff1b91f43591e66e0960e821b63d5a429185d63..a10c5d4ee52cb80a6ec6251b34b7cc8826783458 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -22,6 +22,7 @@ process.on('unhandledRejection', err => { // Ensure environment variables are read. require('../config/env'); +const detect = require('detect-port-alt'); const fs = require('fs'); const chalk = require('chalk'); const webpack = require('webpack'); @@ -34,7 +35,6 @@ const { prepareProxy, prepareUrls, } = require('react-dev-utils/WebpackDevServerUtils'); -const openBrowser = require('react-dev-utils/openBrowser'); const paths = require('../config/paths'); const config = require('../config/webpack.config.dev'); const createDevServerConfig = require('../config/webpackDevServer.config'); @@ -50,6 +50,7 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { // Tools like Cloud9 rely on this. const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; const HOST = process.env.HOST || '0.0.0.0'; +const ANALYZER_PORT = parseInt(process.env.ANALYZER_PORT, 10) || 8888; if (process.env.HOST) { console.log( @@ -68,7 +69,27 @@ if (process.env.HOST) { // We attempt to use the default port but if it is busy, we offer the user to // run on a different port. `choosePort()` Promise resolves to the next free port. +let analyzerWorking; choosePort(HOST, DEFAULT_PORT) + .then( + port => + new Promise(resolve => { + detect(ANALYZER_PORT, HOST).then(analyzerPort => { + analyzerWorking = ANALYZER_PORT === analyzerPort; + if (analyzerWorking) { + const analyzerIndex = config.plugins.findIndex( + plugin => plugin.constructor.name === 'BundleAnalyzerPlugin' + ); + config.plugins[analyzerIndex].analyzerPort = ANALYZER_PORT; + } else { + config.plugins = config.plugins.filter( + plugin => plugin.constructor.name !== 'BundleAnalyzerPlugin' + ); + } + return resolve(port); + }); + }) + ) .then(port => { if (port == null) { // We have not found a port. @@ -93,11 +114,21 @@ choosePort(HOST, DEFAULT_PORT) if (err) { return console.log(err); } + if (!analyzerWorking) { + console.log( + chalk.red(`Analyzer Plugin port (${ANALYZER_PORT}) already in use.`) + ); + console.log( + 'If you still want to use the plugin set the ANALYZER_PORT env variable to a free port.\n' + ); + } if (isInteractive) { clearConsole(); } console.log(chalk.cyan('Starting the development server...\n')); - openBrowser(urls.localUrlForBrowser); + + // We don't need to open the browser + // openBrowser(urls.localUrlForBrowser); }); ['SIGINT', 'SIGTERM'].forEach(function(sig) { diff --git a/packages/react-scripts/scripts/test.js b/packages/react-scripts/scripts/test.js index b30113fe662a4188db628cf7ae275e95a7a0022c..e057ab7058907854f91d1d3e03c3c754ec19c65f 100644 --- a/packages/react-scripts/scripts/test.js +++ b/packages/react-scripts/scripts/test.js @@ -24,7 +24,7 @@ process.on('unhandledRejection', err => { require('../config/env'); const jest = require('jest'); -const argv = process.argv.slice(2); +let argv = process.argv.slice(2); // Watch unless on CI or in coverage mode if (!process.env.CI && argv.indexOf('--coverage') < 0) { @@ -46,5 +46,59 @@ argv.push( ) ) ); + +// This is a very dirty workaround for https://github.com/facebook/jest/issues/5913. +// We're trying to resolve the environment ourselves because Jest does it incorrectly. +// TODO: remove this (and the `resolve` dependency) as soon as it's fixed in Jest. +const resolve = require('resolve'); +function resolveJestDefaultEnvironment(name) { + const jestDir = path.dirname( + resolve.sync('jest', { + basedir: __dirname, + }) + ); + const jestCLIDir = path.dirname( + resolve.sync('jest-cli', { + basedir: jestDir, + }) + ); + const jestConfigDir = path.dirname( + resolve.sync('jest-config', { + basedir: jestCLIDir, + }) + ); + return resolve.sync(name, { + basedir: jestConfigDir, + }); +} +let cleanArgv = []; +let env = 'node'; +let next; +do { + next = argv.shift(); + if (next === '--env') { + env = argv.shift(); + } else if (next.indexOf('--env=') === 0) { + env = next.substring('--env='.length); + } else { + cleanArgv.push(next); + } +} while (argv.length > 0); +argv = cleanArgv; +let resolvedEnv; +try { + resolvedEnv = resolveJestDefaultEnvironment(`jest-environment-${env}`); +} catch (e) { + // ignore +} +if (!resolvedEnv) { + try { + resolvedEnv = resolveJestDefaultEnvironment(env); + } catch (e) { + // ignore + } +} +const testEnvironment = resolvedEnv || env; +argv.push('--env', testEnvironment); // @remove-on-eject-end jest.run(argv); diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js index b4c2cfa5ea969c162ce1800b15ab0e510310259b..4c428004a84f62f81554960e4960debfaa865912 100644 --- a/packages/react-scripts/scripts/utils/createJestConfig.js +++ b/packages/react-scripts/scripts/utils/createJestConfig.js @@ -45,12 +45,12 @@ module.exports = (resolve, rootDir, isEjecting) => { }, moduleFileExtensions: [ 'web.js', - 'mjs', 'js', 'json', 'web.jsx', 'jsx', 'node', + 'mjs', ], }; if (rootDir) { diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 7c6414560564e6a8bd4462bc88e4159173fc9fb0..9e77fc578b6e200440bf40d7cad3c22dd91d800b 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1,4 +1,4 @@ -This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app). +This project was bootstrapped with [BA Create React App](https://github.com/bluealba/ba-create-react-app). Below you will find some information on how to perform common tasks.<br> You can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md). @@ -13,6 +13,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [npm test](#npm-test) - [npm run build](#npm-run-build) - [npm run eject](#npm-run-eject) + - [npm run format](#npm-run-format) - [Supported Browsers](#supported-browsers) - [Supported Language Features and Polyfills](#supported-language-features-and-polyfills) - [Syntax Highlighting in the Editor](#syntax-highlighting-in-the-editor) @@ -198,6 +199,10 @@ Instead, it will copy all the configuration files and the transitive dependencie You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. +### `npm run format` + +This will format all of your files using your prettier rules. + ## Supported Browsers By default, the generated project uses the latest version of React. @@ -348,7 +353,7 @@ Next we add a 'lint-staged' field to the `package.json`, for example: "scripts": { ``` -Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run `./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx}"` to format your entire project for the first time. +Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run `./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,json,css}"` to format your entire project for the first time. Next you might want to integrate Prettier in your favorite editor. Read the section on [Editor Integration](https://prettier.io/docs/en/editors.html) on the Prettier GitHub page. @@ -506,7 +511,7 @@ class Button extends Component { } ``` -**This is not required for React** but many people find this feature convenient. You can read about the benefits of this approach [here](https://medium.com/seek-ui-engineering/block-element-modifying-your-javascript-components-d7f99fcab52b). However you should be aware that this makes your code less portable to other build tools and environments than Webpack. +**This is not required for React** but many people find this feature convenient. You can read about the benefits of this approach [here](https://medium.com/seek-blog/block-element-modifying-your-javascript-components-d7f99fcab52b). However you should be aware that this makes your code less portable to other build tools and environments than Webpack. In development, expressing dependencies this way allows your styles to be reloaded on the fly as you edit them. In production, all CSS files will be concatenated into a single minified `.css` file in the build output. @@ -1428,6 +1433,48 @@ Import it in [`src/setupTests.js`](#initializing-test-environment) to make its m import 'jest-enzyme'; ``` +#### Use `react-testing-library` + +As an alternative or companion to `enzyme`, you may consider using `react-testing-library`. [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) is a library for testing React components in a way that resembles the way the components are used by end users. It is well suited for unit, integration, and end-to-end testing of React components and applications. It works more directly with DOM nodes, and therefore it's recommended to use with [`jest-dom`](https://github.com/gnapse/jest-dom) for improved assertions. + +To install `react-testing-library` and `jest-dom`, you can run: + +```sh +npm install --save react-testing-library jest-dom +``` + +Alternatively you may use `yarn`: + +```sh +yarn add react-testing-library jest-dom +``` + +Similar to `enzyme` you can create a `src/setupTests.js` file to avoid boilerplate in your test files: + +```js +// react-testing-library renders your components to document.body, +// this will ensure they're removed after each test. +import 'react-testing-library/cleanup-after-each'; + +// this adds jest-dom's custom assertions +import 'jest-dom/extend-expect'; +``` + +Here's an example of using `react-testing-library` and `jest-dom` for testing that the `<App />` component renders "Welcome to React". + +```js +import React from 'react'; +import { render } from 'react-testing-library'; +import App from './App'; + +it('renders welcome message', () => { + const { getByText } = render(<App />); + expect(getByText('Welcome to React')).toBeInTheDOM(); +}); +``` + +Learn more about the utilities provided by `react-testing-library` to facilitate testing asynchronous interactions as well as selecting form elements from [the `react-testing-library` documentation](https://github.com/kentcdodds/react-testing-library) and [examples](https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples). + ### Using Third Party Assertion Libraries We recommend that you use `expect()` for assertions and `jest.fn()` for spies. If you are having issues with them please [file those against Jest](https://github.com/facebook/jest/issues/new), and we’ll fix them. We intend to keep making them better for React, supporting, for example, [pretty-printing React elements as JSX](https://github.com/facebook/jest/pull/1566). @@ -2209,6 +2256,16 @@ GitHub Pages doesn’t support routers that use the HTML5 `pushState` history AP * You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router. * Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages). +#### Troubleshooting + +##### "/dev/tty: No such a device or address" + +If, when deploying, you get `/dev/tty: No such a device or address` or a similar error, try the follwing: + +1. Create a new [Personal Access Token](https://github.com/settings/tokens) +2. `git remote set-url origin https://<user>:<token>@github.com/<user>/<repo>` . +3. Try `npm run deploy again` + ### [Heroku](https://www.heroku.com/) Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).<br> @@ -2264,7 +2321,8 @@ With this setup Netlify will build and deploy when you push to git or open a pul 1. [Start a new netlify project](https://app.netlify.com/signup) 2. Pick your Git hosting service and select your repository -3. Click `Build your site` +3. Set `yarn build` as the build command and `build` as the publish directory +4. Click `Deploy site` **Support for client-side routing:** diff --git a/packages/react-scripts/template/env b/packages/react-scripts/template/env new file mode 100644 index 0000000000000000000000000000000000000000..30b58f029b15f2220beee10c6938e894dd3caa33 --- /dev/null +++ b/packages/react-scripts/template/env @@ -0,0 +1 @@ +NODE_PATH="src/" \ No newline at end of file diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/template/src/containers/App.js similarity index 89% rename from packages/react-scripts/template/src/App.js rename to packages/react-scripts/template/src/containers/App.js index 203067e4d7553b342bf6507a30ced6f5c806e1c5..e99463e7d6f468ed170ef1835c3fce88b243a0bc 100644 --- a/packages/react-scripts/template/src/App.js +++ b/packages/react-scripts/template/src/containers/App.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; -import './App.css'; +import logo from 'svg/logo.svg'; +import './App.scss'; class App extends Component { render() { diff --git a/packages/react-scripts/template/src/App.css b/packages/react-scripts/template/src/containers/App.scss similarity index 85% rename from packages/react-scripts/template/src/App.css rename to packages/react-scripts/template/src/containers/App.scss index c5c6e8a68adcb5249ebdf283ffb34b8531d8b1f0..0b26a863c40057be3fbe481d067f529a3cc416a7 100644 --- a/packages/react-scripts/template/src/App.css +++ b/packages/react-scripts/template/src/containers/App.scss @@ -1,3 +1,9 @@ +body { + margin: 0; + padding: 0; + font-family: sans-serif; +} + .App { text-align: center; } diff --git a/packages/react-scripts/template/src/App.test.js b/packages/react-scripts/template/src/containers/__test__/App.test.js similarity index 86% rename from packages/react-scripts/template/src/App.test.js rename to packages/react-scripts/template/src/containers/__test__/App.test.js index a754b201bf9c6caf5271293588189fb4210f99d1..52907ac23cfd2b5ee2284fff5d5eeec35595da60 100644 --- a/packages/react-scripts/template/src/App.test.js +++ b/packages/react-scripts/template/src/containers/__test__/App.test.js @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from './App'; +import App from 'containers/App'; it('renders without crashing', () => { const div = document.createElement('div'); diff --git a/packages/react-scripts/template/src/index.css b/packages/react-scripts/template/src/index.css deleted file mode 100644 index b4cc7250b98cb3f1a2dd5bec134296c6942344d9..0000000000000000000000000000000000000000 --- a/packages/react-scripts/template/src/index.css +++ /dev/null @@ -1,5 +0,0 @@ -body { - margin: 0; - padding: 0; - font-family: sans-serif; -} diff --git a/packages/react-scripts/template/src/index.js b/packages/react-scripts/template/src/index.js index fae3e3500cf003c76f0065ffd12df759c9ccb6aa..5657d901f31fd20b4e3d47343a9f0c1488d606ac 100644 --- a/packages/react-scripts/template/src/index.js +++ b/packages/react-scripts/template/src/index.js @@ -1,8 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import registerServiceWorker from './registerServiceWorker'; +import App from 'containers/App'; +import registerServiceWorker from 'utils/registerServiceWorker'; ReactDOM.render(<App />, document.getElementById('root')); registerServiceWorker(); diff --git a/packages/react-scripts/template/src/logo.svg b/packages/react-scripts/template/src/logo.svg deleted file mode 100644 index 6b60c1042f58d9fabb75485aa3624dddcf633b5c..0000000000000000000000000000000000000000 --- a/packages/react-scripts/template/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"> - <g fill="#61DAFB"> - <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/> - <circle cx="420.9" cy="296.5" r="45.7"/> - <path d="M520.5 78.1z"/> - </g> -</svg> diff --git a/packages/react-scripts/template/src/svg/logo.svg b/packages/react-scripts/template/src/svg/logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..f67b714a27afc4b52f16437a32a2764587a6ce52 --- /dev/null +++ b/packages/react-scripts/template/src/svg/logo.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"> + <g fill="#61DAFB"> + <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/> + <circle cx="420.9" cy="296.5" r="45.7"/> + <path d="M520.5 78.1z"/> + </g> +</svg> diff --git a/packages/react-scripts/template/src/registerServiceWorker.js b/packages/react-scripts/template/src/utils/registerServiceWorker.js similarity index 99% rename from packages/react-scripts/template/src/registerServiceWorker.js rename to packages/react-scripts/template/src/utils/registerServiceWorker.js index a3e6c0cfc10de36d6bcb38c52e00c012e985d68e..2eaae893102de86d18555ecf82c17f9e5b1df24e 100644 --- a/packages/react-scripts/template/src/registerServiceWorker.js +++ b/packages/react-scripts/template/src/utils/registerServiceWorker.js @@ -8,6 +8,8 @@ // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. // This link also includes instructions on opting out of this behavior. +/* eslint-disable no-console */ + const isLocalhost = Boolean( window.location.hostname === 'localhost' || // [::1] is the IPv6 localhost address.