diff --git a/.travis.yml b/.travis.yml index b08d2bf6b25..860000b5c9b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,8 +1,9 @@ --- +dist: trusty language: node_js node_js: - - 6 - 8 + - 9 cache: directories: - node_modules @@ -13,9 +14,8 @@ script: - 'if [ $TEST_SUITE = "simple" ]; then tasks/e2e-simple.sh; fi' - 'if [ $TEST_SUITE = "installs" ]; then tasks/e2e-installs.sh; fi' - 'if [ $TEST_SUITE = "kitchensink" ]; then tasks/e2e-kitchensink.sh; fi' + - 'if [ $TEST_SUITE = "old-node" ]; then tasks/e2e-old-node.sh; fi' env: - global: - - USE_YARN=no matrix: - TEST_SUITE=simple - TEST_SUITE=installs @@ -23,8 +23,6 @@ env: matrix: include: - node_js: 0.10 - env: TEST_SUITE=simple -# There's a weird Yarn/Lerna bug related to prerelease versions. -# TODO: reenable after we ship 1.0. -# - node_js: 6 -# env: USE_YARN=yes TEST_SUITE=simple + env: TEST_SUITE=old-node + - node_js: 6 + env: TEST_SUITE=kitchensink diff --git a/.yarnrc b/.yarnrc new file mode 100644 index 00000000000..07e44a9a5b2 --- /dev/null +++ b/.yarnrc @@ -0,0 +1,3 @@ +--install.no-lockfile true +--install.check-files true +--add.no-lockfile true diff --git a/CHANGELOG.md b/CHANGELOG.md index b8230403216..fed2c53f957 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,695 @@ -## 1.0.11 (2017-08-09) +## 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 + +* `react-scripts` + + * [#3387](https://github.com/facebookincubator/create-react-app/pull/3387) Add support for variable expansion in `.env` files. ([@moos](https://github.com/moos)) + +* `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)) + * [#3409](https://github.com/facebookincubator/create-react-app/pull/3409) Add `--use-npm` flag to bypass Yarn even on systems that have it. ([@tabrindle](https://github.com/tabrindle)) + * [#3725](https://github.com/facebookincubator/create-react-app/pull/3725) Extend `--scripts-version` to include `.tar.gz` format. ([@SaschaDens](https://github.com/SaschaDens)) + * [#3629](https://github.com/facebookincubator/create-react-app/pull/3629) Allowing `"file:"` `--scripts-version` values. ([@GreenGremlin](https://github.com/GreenGremlin)) + + +#### :bug: Bug Fix + +* `babel-preset-react-app`, `react-scripts` + + * [#3788](https://github.com/facebookincubator/create-react-app/pull/3788) Fix object destructuring inside an array on Node 6. ([@gaearon](https://github.com/gaearon)) + +* `react-dev-utils` + + * [#3784](https://github.com/facebookincubator/create-react-app/pull/3784) Detach browser process from the shell on Linux. ([@gaearon](https://github.com/gaearon)) + * [#3726](https://github.com/facebookincubator/create-react-app/pull/3726) Use proxy for all request methods other than `GET`. ([@doshisid](https://github.com/doshisid)) + * [#3440](https://github.com/facebookincubator/create-react-app/pull/3440) Print full directory name from `lsof`. ([@rmccue](https://github.com/rmccue)) + * [#2071](https://github.com/facebookincubator/create-react-app/pull/2071) Fix broken console clearing on Windows. ([@danielverejan](https://github.com/danielverejan)) + * [#3686](https://github.com/facebookincubator/create-react-app/pull/3686) Fix starting a project in directory with `++` in the name. ([@Norris1z](https://github.com/Norris1z)) + +* `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)) + * [#3511](https://github.com/facebookincubator/create-react-app/pull/3511) Unmount the component in the default generated test. ([@gaearon](https://github.com/gaearon)) + +#### :nail_care: Enhancement + +* `react-scripts` + + * [#3730](https://github.com/facebookincubator/create-react-app/pull/3730) Print when `HOST` environment variable is set. ([@iansu](https://github.com/iansu)) + * [#3455](https://github.com/facebookincubator/create-react-app/pull/3455) Add a localhost-only log message pointing folks to the PWA docs. ([@jeffposnick](https://github.com/jeffposnick)) + * [#3416](https://github.com/facebookincubator/create-react-app/pull/3416) Improve eject message. ([@xjlim](https://github.com/xjlim)) + +* `create-react-app` + + * [#3740](https://github.com/facebookincubator/create-react-app/pull/3740) Allow more non-conflicting files in initial project directory. ([@GreenGremlin](https://github.com/GreenGremlin)) + +* `react-dev-utils` + + * [#3104](https://github.com/facebookincubator/create-react-app/pull/3104) Add link to deployment docs after build. ([@viankakrisna](https://github.com/viankakrisna)) + * [#3652](https://github.com/facebookincubator/create-react-app/pull/3652) Add `code-insiders` to the editor list. ([@shrynx](https://github.com/shrynx)) + * [#3700](https://github.com/facebookincubator/create-react-app/pull/3700) Add editor support for Sublime Dev & VSCode Insiders. ([@yyx990803](https://github.com/yyx990803)) + * [#3545](https://github.com/facebookincubator/create-react-app/pull/3545) Autodetect MacVim editor. ([@gnapse](https://github.com/gnapse)) + +* `react-dev-utils`, `react-error-overlay` + + * [#3465](https://github.com/facebookincubator/create-react-app/pull/3465) Open editor to exact column from build error overlay. ([@tharakawj](https://github.com/tharakawj)) + +* `react-dev-utils`, `react-scripts` + + * [#3721](https://github.com/facebookincubator/create-react-app/pull/3721) Support setting `none` in `REACT_EDITOR` environment variable. ([@raerpo](https://github.com/raerpo)) + +* `eslint-config-react-app` + + * [#3716](https://github.com/facebookincubator/create-react-app/pull/3716) Relax `no-cond-assign` rule. ([@gaearon](https://github.com/gaearon)) + +#### :memo: Documentation + +* User Guide + + * [#3659](https://github.com/facebookincubator/create-react-app/pull/3659) Add info about service-worker and HTTP caching headers into Firebase section. ([@bobrosoft](https://github.com/bobrosoft)) + * [#3515](https://github.com/facebookincubator/create-react-app/pull/3515) Add Powershell commands to README.md. ([@Gua-naiko-che](https://github.com/Gua-naiko-che)) + * [#3656](https://github.com/facebookincubator/create-react-app/pull/3656) Better documentation for setupTests.js when ejecting. ([@dannycalleri](https://github.com/dannycalleri)) + * [#1791](https://github.com/facebookincubator/create-react-app/pull/1791) Add link for automatic deployment to azure. ([@ulrikstrid](https://github.com/ulrikstrid)) + * [#3717](https://github.com/facebookincubator/create-react-app/pull/3717) Update README.md. ([@maecapozzi](https://github.com/maecapozzi)) + * [#3710](https://github.com/facebookincubator/create-react-app/pull/3710) Link to an explanation for forking react-scripts. ([@gaearon](https://github.com/gaearon)) + * [#3709](https://github.com/facebookincubator/create-react-app/pull/3709) Document adding a router. ([@gaearon](https://github.com/gaearon)) + * [#3670](https://github.com/facebookincubator/create-react-app/pull/3670) Fix typo in the User Guide. ([@qbahers](https://github.com/qbahers)) + * [#3645](https://github.com/facebookincubator/create-react-app/pull/3645) Update README.md. ([@elie222](https://github.com/elie222)) + * [#3533](https://github.com/facebookincubator/create-react-app/pull/3533) Use safer/more aesthetic syntax for setting environment variables on Windows. ([@cdanielsen](https://github.com/cdanielsen)) + * [#3605](https://github.com/facebookincubator/create-react-app/pull/3605) Updated Debugging Tests for VSCode. ([@amadeogallardo](https://github.com/amadeogallardo)) + * [#3601](https://github.com/facebookincubator/create-react-app/pull/3601) Fixed typo in webpack.config.dev.js. ([@nmenglund](https://github.com/nmenglund)) + * [#3576](https://github.com/facebookincubator/create-react-app/pull/3576) Updates comment to reflect codebase. ([@rahulcs](https://github.com/rahulcs)) + * [#3510](https://github.com/facebookincubator/create-react-app/pull/3510) Update User Guide with deploying to GitHub User pages. ([@aaronlna](https://github.com/aaronlna)) + * [#3503](https://github.com/facebookincubator/create-react-app/pull/3503) Update Prettier editor integration link. ([@gaving](https://github.com/gaving)) + * [#3453](https://github.com/facebookincubator/create-react-app/pull/3453) Fix dead links. ([@vannio](https://github.com/vannio)) + * [#2992](https://github.com/facebookincubator/create-react-app/pull/2992) Docs: How to Debug Unit Tests. ([@MattMorgis](https://github.com/MattMorgis)) + +* Other + + * [#3729](https://github.com/facebookincubator/create-react-app/pull/3729) Update README.md to note Neutrino's support of react components. ([@eliperelman](https://github.com/eliperelman)) + * [#2841](https://github.com/facebookincubator/create-react-app/pull/2841) Documentation to help windows contributors. ([@Dubes](https://github.com/Dubes)) + * [#3489](https://github.com/facebookincubator/create-react-app/pull/3489) Add link to nvm-windows. ([@davidgilbertson](https://github.com/davidgilbertson)) + +* `eslint-config-react-app` + + * [#3460](https://github.com/facebookincubator/create-react-app/pull/3460) Fix broken link to `href-no-hash` eslint rule. ([@hazolsky](https://github.com/hazolsky)) + +#### :house: Internal + +* Other + + * [#3769](https://github.com/facebookincubator/create-react-app/pull/3769) Enable Yarn check files. ([@Timer](https://github.com/Timer)) + * [#3756](https://github.com/facebookincubator/create-react-app/pull/3756) Clean up changes to npm and yarn registry in E2E tests. ([@viankakrisna](https://github.com/viankakrisna)) + * [#3744](https://github.com/facebookincubator/create-react-app/pull/3744) Use private registry in E2E tests. ([@Timer](https://github.com/Timer)) + * [#3738](https://github.com/facebookincubator/create-react-app/pull/3738) Always use Yarn on CI. ([@gaearon](https://github.com/gaearon)) + * [#2309](https://github.com/facebookincubator/create-react-app/pull/2309) Port `cra.sh` development task to javascript. ([@ianschmitz](https://github.com/ianschmitz)) + * [#3411](https://github.com/facebookincubator/create-react-app/pull/3411) Simplify waiting for app start in E2E tests. ([@xjlim](https://github.com/xjlim)) + * [#3755](https://github.com/facebookincubator/create-react-app/pull/3755) Switch to Yarn Workspaces. ([@gaearon](https://github.com/gaearon)) + * [#3757](https://github.com/facebookincubator/create-react-app/pull/3757) Try updating Flow. ([@gaearon](https://github.com/gaearon)) + * [#3414](https://github.com/facebookincubator/create-react-app/pull/3414) Export `dismissRuntimeErrors` function. ([@skidding](https://github.com/skidding)) + * [#3036](https://github.com/facebookincubator/create-react-app/pull/3036) Cleaning up `printHostingInstructions` a bit. ([@GreenGremlin](https://github.com/GreenGremlin)) + * [#3514](https://github.com/facebookincubator/create-react-app/pull/3514) Fix `FileSizeReporter` for multi build Webpack setups. ([@iiska](https://github.com/iiska)) + * [#3362](https://github.com/facebookincubator/create-react-app/pull/3362) Refactor extra watch options regex to `react-dev-utils`. ([@xjlim](https://github.com/xjlim)) + +#### Committers: 47 + +- Aaron Lamb ([aaronlna](https://github.com/aaronlna)) +- Ade Viankakrisna Fadlil ([viankakrisna](https://github.com/viankakrisna)) +- Amadeo Gallardo ([amadeogallardo](https://github.com/amadeogallardo)) +- Andy Kenward ([andykenward](https://github.com/andykenward)) +- Christian Danielsen ([cdanielsen](https://github.com/cdanielsen)) +- Clayton Ray ([iamclaytonray](https://github.com/iamclaytonray)) +- Dan Abramov ([gaearon](https://github.com/gaearon)) +- Daniel Verejan ([danielverejan](https://github.com/danielverejan)) +- Danny Calleri ([dannycalleri](https://github.com/dannycalleri)) +- David Boyne ([boyney123](https://github.com/boyney123)) +- David Gilbertson ([davidgilbertson](https://github.com/davidgilbertson)) +- Eli Perelman ([eliperelman](https://github.com/eliperelman)) +- Elie ([elie222](https://github.com/elie222)) +- Ernesto García ([gnapse](https://github.com/gnapse)) +- Evan You ([yyx990803](https://github.com/yyx990803)) +- Gavin Gilmour ([gaving](https://github.com/gaving)) +- Ian Schmitz ([ianschmitz](https://github.com/ianschmitz)) +- Ian Sutherland ([iansu](https://github.com/iansu)) +- JANG SUN HYUK ([wkdtjsgur100](https://github.com/wkdtjsgur100)) +- Jeffrey Posnick ([jeffposnick](https://github.com/jeffposnick)) +- Joe Haddad ([Timer](https://github.com/Timer)) +- Joe Lim ([xjlim](https://github.com/xjlim)) +- Jonathan ([GreenGremlin](https://github.com/GreenGremlin)) +- Juhamatti Niemelä ([iiska](https://github.com/iiska)) +- Mae Capozzi ([maecapozzi](https://github.com/maecapozzi)) +- Maksym Dogadailo ([mdogadailo](https://github.com/mdogadailo)) +- Mario Nebl ([marionebl](https://github.com/marionebl)) +- Matt Morgis ([MattMorgis](https://github.com/MattMorgis)) +- Misha Khokhlov ([hazolsky](https://github.com/hazolsky)) +- Moos ([moos](https://github.com/moos)) +- Nils Magnus Englund ([nmenglund](https://github.com/nmenglund)) +- Norris Oduro ([Norris1z](https://github.com/Norris1z)) +- Ovidiu Cherecheș ([skidding](https://github.com/skidding)) +- Quentin Bahers ([qbahers](https://github.com/qbahers)) +- Rafael E. Poveda ([raerpo](https://github.com/raerpo)) +- Rahul Chanila ([rahulcs](https://github.com/rahulcs)) +- Ryan McCue ([rmccue](https://github.com/rmccue)) +- Sascha Dens ([SaschaDens](https://github.com/SaschaDens)) +- Siddharth Doshi ([doshisid](https://github.com/doshisid)) +- Tao Gómez Gil ([Gua-naiko-che](https://github.com/Gua-naiko-che)) +- Tharaka Wijebandara ([tharakawj](https://github.com/tharakawj)) +- Trevor Brindle ([tabrindle](https://github.com/tabrindle)) +- Ulrik Strid ([ulrikstrid](https://github.com/ulrikstrid)) +- Vladimir Tolstikov ([bobrosoft](https://github.com/bobrosoft)) +- [Dubes](https://github.com/Dubes) +- [vannio](https://github.com/vannio) +- shrynx ([shrynx](https://github.com/shrynx)) + +### Migrating from 1.0.17 to 1.1.0 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.1.0 +``` + +or + +``` +yarn add --exact react-scripts@1.1.0 +``` + +## 1.0.17 (November 3, 2017) + +#### :nail_care: Enhancement + +* `react-scripts` + + * [#3401](https://github.com/facebookincubator/create-react-app/pull/3401) Stop using a deprecated option. ([@gaearon](https://github.com/gaearon)) + +#### :memo: Documentation + +* `react-scripts` + + * [#3399](https://github.com/facebookincubator/create-react-app/pull/3399) Add link to VS Code troubleshooting guide. ([@auchenberg](https://github.com/auchenberg)) + * [#3400](https://github.com/facebookincubator/create-react-app/pull/3400) Update VS Code debug configuration. ([@auchenberg](https://github.com/auchenberg)) + +#### Committers: 3 + +- Dan Abramov ([gaearon](https://github.com/gaearon)) +- Kenneth Auchenberg ([auchenberg](https://github.com/auchenberg)) +- Loren Sands-Ramshaw ([lorensr](https://github.com/lorensr)) + +### Migrating from 1.0.16 to 1.0.17 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.0.17 +``` + +or + +``` +yarn add --exact react-scripts@1.0.17 +``` + +## 1.0.16 (October 31, 2017) 🎃 + +#### :bug: Bug Fix + +* `react-scripts` + + * [#3374](https://github.com/facebookincubator/create-react-app/pull/3374) Set correct image type and sizes in `manifest.json`. ([@piotr-cz](https://github.com/piotr-cz)) + +* `react-dev-utils` + + * [#3368](https://github.com/facebookincubator/create-react-app/pull/3368) Fix a crash in development mode in older browsers. ([@felthy](https://github.com/felthy)) + +#### Committers: 2 + +- Dan Abramov ([gaearon](https://github.com/gaearon)) +- Piotr ([piotr-cz](https://github.com/piotr-cz)) + +### Migrating from 1.0.15 to 1.0.16 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.0.16 +``` + +or + +``` +yarn add --exact react-scripts@1.0.16 +``` + +## 1.0.15 (October 30, 2017) + +#### :bug: Bug Fix + +* `react-scripts` + + * [#3287](https://github.com/facebookincubator/create-react-app/pull/3287) Fix favicon sizes value in the project manifest. ([@ryansully](https://github.com/ryansully)) + +* `react-dev-utils`, `react-scripts` + + * [#3230](https://github.com/facebookincubator/create-react-app/pull/3230) Fix watching for changes in `src/node_modules`. ([@xjlim](https://github.com/xjlim)) + +#### :nail_care: Enhancement + +* `react-scripts` + + * [#3239](https://github.com/facebookincubator/create-react-app/pull/3239) Allow importing `.mjs` files. ([@Timer](https://github.com/Timer)) + * [#3340](https://github.com/facebookincubator/create-react-app/pull/3340) Polyfill `requestAnimationFrame` in test environment. ([@gaearon](https://github.com/gaearon)) + +* `babel-preset-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + + * [#3342](https://github.com/facebookincubator/create-react-app/pull/3342) Bump dependencies. ([@gaearon](https://github.com/gaearon)) + +* `react-dev-utils`, `react-error-overlay` + + * [#3100](https://github.com/facebookincubator/create-react-app/pull/3100) Add click-to-open support for build errors. ([@tharakawj](https://github.com/tharakawj)) + +* `create-react-app` + + * [#3355](https://github.com/facebookincubator/create-react-app/pull/3355) Add preflight CWD check for npm to detect bad Windows setups. ([@gaearon](https://github.com/gaearon)) + +#### :memo: Documentation + +* User Guide + + * [#2957](https://github.com/facebookincubator/create-react-app/pull/2957) Use `npm-run-all` to build Sass and JS. ([@shime](https://github.com/shime)) + * [#3108](https://github.com/facebookincubator/create-react-app/pull/3108) Update the Service Worker opt-out documentation. ([@captDaylight](https://github.com/captDaylight)) + * [#3286](https://github.com/facebookincubator/create-react-app/pull/3286) Add documentation for Enzyme 3 integration. ([@ryansully](https://github.com/ryansully)) + * [#3328](https://github.com/facebookincubator/create-react-app/pull/3328) Recommend react-snap as an alternative to react-snapshot. ([@aaronshaf](https://github.com/aaronshaf)) + * [#3279](https://github.com/facebookincubator/create-react-app/pull/3279) Add jest coverage configuration docs. ([@mattphillips](https://github.com/mattphillips)) + * [#3303](https://github.com/facebookincubator/create-react-app/pull/3303) Update link to Jest Expect docs. ([@jbranchaud](https://github.com/jbranchaud)) + * [#3289](https://github.com/facebookincubator/create-react-app/pull/3289) Fix dead link to Jest "expect" docs. ([@alexkrolick](https://github.com/alexkrolick)) + * [#3265](https://github.com/facebookincubator/create-react-app/pull/3265) Add external links to deployment services. ([@aericson](https://github.com/aericson)) + * [#3075](https://github.com/facebookincubator/create-react-app/pull/3075) Minor docs change to highlight dev proxy behaviour. ([@davidjb](https://github.com/davidjb)) + * [#3185](https://github.com/facebookincubator/create-react-app/pull/3185) Correct manual proxy documentation. ([@robertpanzer](https://github.com/robertpanzer)) + +* README + + * [#3227](https://github.com/facebookincubator/create-react-app/pull/3227) Fix package management link in README for issue #3218. ([@nishina555](https://github.com/nishina555)) + * [#3211](https://github.com/facebookincubator/create-react-app/pull/3211) Improve grammar in README. ([@Mohamed3on](https://github.com/Mohamed3on)) + +#### :house: Internal + +* Other + + * [#3345](https://github.com/facebookincubator/create-react-app/pull/3345) Stop using `npm link` in tests. ([@Timer](https://github.com/Timer)) + +* `react-error-overlay` + + * [#3122](https://github.com/facebookincubator/create-react-app/pull/3122) Fix for add .gitattributes file #3080. ([@ijajmulani](https://github.com/ijajmulani)) + * [#3267](https://github.com/facebookincubator/create-react-app/pull/3267) Use production React version for bundled overlay. ([@Timer](https://github.com/Timer)) + * [#3264](https://github.com/facebookincubator/create-react-app/pull/3264) Add warning when using `react-error-overlay` in production. ([@Timer](https://github.com/Timer)) + * [#3263](https://github.com/facebookincubator/create-react-app/pull/3263) `react-error-overlay` has no dependencies now (it's bundled). ([@Timer](https://github.com/Timer)) + * [#3142](https://github.com/facebookincubator/create-react-app/pull/3142) Make error overlay run in the context of the iframe. ([@tharakawj](https://github.com/tharakawj)) + +* `react-scripts` + + * [#3150](https://github.com/facebookincubator/create-react-app/pull/3150) Remove an useless negation in `registerServiceWorker.js`. ([@dunglas](https://github.com/dunglas)) + * [#3158](https://github.com/facebookincubator/create-react-app/pull/3158) Remove `output.path` from dev webpack config. ([@nikolas](https://github.com/nikolas)) + * [#3281](https://github.com/facebookincubator/create-react-app/pull/3281) Add a workaround for Uglify incompatiblity with Safari 10.0 in the future. ([@satyavh](https://github.com/satyavh)) + * [#3146](https://github.com/facebookincubator/create-react-app/pull/3146) Fix `reason-react` support. ([@lpalmes](https://github.com/lpalmes)) + * [#3236](https://github.com/facebookincubator/create-react-app/pull/3236) Update `style-loader` and disable inclusion of its HMR code in builds. ([@insin](https://github.com/insin)) + * [#3246](https://github.com/facebookincubator/create-react-app/pull/3246) Update `url-loader` to 0.6.2 for mime ReDoS vulnerability. ([@d3viant0ne](https://github.com/d3viant0ne)) + * [#2914](https://github.com/facebookincubator/create-react-app/pull/2914) `` -> ``. ([@Hurtak](https://github.com/Hurtak)) + +#### Committers: 24 + +- Aaron Shafovaloff ([aaronshaf](https://github.com/aaronshaf)) +- Alex ([alexkrolick](https://github.com/alexkrolick)) +- André Ericson ([aericson](https://github.com/aericson)) +- Dan Abramov ([gaearon](https://github.com/gaearon)) +- David Beitey ([davidjb](https://github.com/davidjb)) +- Hrvoje Šimić ([shime](https://github.com/shime)) +- IJAJ MULANI ([ijajmulani](https://github.com/ijajmulani)) +- Joe Haddad ([Timer](https://github.com/Timer)) +- Joe Lim ([xjlim](https://github.com/xjlim)) +- Jonny Buchanan ([insin](https://github.com/insin)) +- Josh Branchaud ([jbranchaud](https://github.com/jbranchaud)) +- Joshua Wiens ([d3viant0ne](https://github.com/d3viant0ne)) +- Kévin Dunglas ([dunglas](https://github.com/dunglas)) +- Lorenzo Palmes ([lpalmes](https://github.com/lpalmes)) +- Matt Phillips ([mattphillips](https://github.com/mattphillips)) +- Mohamed Oun ([Mohamed3on](https://github.com/Mohamed3on)) +- Nik Nyby ([nikolas](https://github.com/nikolas)) +- Petr Huřťák ([Hurtak](https://github.com/Hurtak)) +- Robert Panzer ([robertpanzer](https://github.com/robertpanzer)) +- Ryan Sullivan ([ryansully](https://github.com/ryansully)) +- Satya van Heummen ([satyavh](https://github.com/satyavh)) +- Tharaka Wijebandara ([tharakawj](https://github.com/tharakawj)) +- Toshiharu Nishina ([nishina555](https://github.com/nishina555)) +- [captDaylight](https://github.com/captDaylight) + +### Migrating from 1.0.14 to 1.0.15 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.0.15 +``` + +or + +``` +yarn add --exact react-scripts@1.0.15 +``` + +## 1.0.14 (September 26, 2017) + +#### :bug: Bug Fix + +* `react-dev-utils` + + * [#3098](https://github.com/facebookincubator/create-react-app/pull/3098) Always reload the page on next compile after a runtime error. ([@Timer](https://github.com/Timer)) + +* `react-error-overlay` + + * [#3079](https://github.com/facebookincubator/create-react-app/pull/3079) Fix code context on Windows. ([@Timer](https://github.com/Timer)) + +#### :nail_care: Enhancement + +* `react-dev-utils` + + * [#3077](https://github.com/facebookincubator/create-react-app/pull/3077) Auto-detect running editor on Linux for error overlay. ([@gulderov](https://github.com/gulderov)) + + * [#3131](https://github.com/facebookincubator/create-react-app/pull/3131) Display process pid in already running message. ([@Pajn](https://github.com/Pajn)) + +#### :memo: Documentation + +* Other + + * [#3163](https://github.com/facebookincubator/create-react-app/pull/3163) Add link to active CSS modules discussion. ([@NeekSandhu](https://github.com/NeekSandhu)) + +* `react-scripts` + + * [#2908](https://github.com/facebookincubator/create-react-app/pull/2908) Note that class fields have progressed to stage 3. ([@rickbeerendonk](https://github.com/rickbeerendonk)) + + * [#3160](https://github.com/facebookincubator/create-react-app/pull/3160) Update unclear wording in webpack configuration (file loader section). ([@kristiehoward](https://github.com/kristiehoward)) + +* `eslint-config-react-app` + + * [#3072](https://github.com/facebookincubator/create-react-app/pull/3072) Update eslint versions for install instructions. ([@jdcrensh](https://github.com/jdcrensh)) + +#### :house: Internal + +* `react-scripts` + + * [#3157](https://github.com/facebookincubator/create-react-app/pull/3157) Update `webpack-dev-server` to `2.8.2`. ([@nikolas](https://github.com/nikolas)) + + * [#2989](https://github.com/facebookincubator/create-react-app/pull/2989) Update install template to match accessibility guidelines. ([@davidleger95](https://github.com/davidleger95)) + +* `react-error-overlay` + + * [#3065](https://github.com/facebookincubator/create-react-app/pull/3065) Updated `react-error-overlay` to latest Flow (`0.54.0`). ([@duvet86](https://github.com/duvet86)) + + * [#3102](https://github.com/facebookincubator/create-react-app/pull/3102) Clean target directory before compiling overlay. ([@Timer](https://github.com/Timer)) + +* `create-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + + * [#3058](https://github.com/facebookincubator/create-react-app/pull/3058) Re-run prettier for all files and pin the version. ([@viankakrisna](https://github.com/viankakrisna)) + + * [#3107](https://github.com/facebookincubator/create-react-app/pull/3107) Run CI on `npm@^4`. ([@viankakrisna](https://github.com/viankakrisna)) + +#### Committers: 12 + +- Ade Viankakrisna Fadlil ([viankakrisna](https://github.com/viankakrisna)) +- David Leger ([davidleger95](https://github.com/davidleger95)) +- Joe Haddad ([Timer](https://github.com/Timer)) +- Jon Crenshaw ([jdcrensh](https://github.com/jdcrensh)) +- Kristie Howard ([kristiehoward](https://github.com/kristiehoward)) +- Luca ([duvet86](https://github.com/duvet86)) +- Neek Sandhu ([NeekSandhu](https://github.com/NeekSandhu)) +- Nik Nyby ([nikolas](https://github.com/nikolas)) +- Rasmus Eneman ([Pajn](https://github.com/Pajn)) +- Rick Beerendonk ([rickbeerendonk](https://github.com/rickbeerendonk)) +- Sophie Alpert ([sophiebits](https://github.com/sophiebits)) +- [gulderov](https://github.com/gulderov) + +### Migrating from 1.0.13 to 1.0.14 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.0.14 +``` + +or + +``` +yarn add --exact react-scripts@1.0.14 +``` + +## 1.0.13 (September 2, 2017) + +#### :bug: Bug Fix + +* `react-error-overlay` + + * [#3051](https://github.com/facebookincubator/create-react-app/pull/3051) Fix case-sensitivity issue with upgrading the package version. ([@tharakawj](https://github.com/tharakawj)) + +* `react-dev-utils` + + * [#3049](https://github.com/facebookincubator/create-react-app/pull/3049) Print filesize difference for chunks. ([@esturcke](https://github.com/esturcke)) + +* `react-scripts` + + * [#3046](https://github.com/facebookincubator/create-react-app/pull/3046) Fix crash in development mode on IE11. ([@tharakawj](https://github.com/tharakawj)) + +#### :nail_care: Enhancement + +* `react-scripts` + + * [#3033](https://github.com/facebookincubator/create-react-app/pull/3033) Add an empty mock for `child_process` to let some libraries compile. ([@McFlurriez](https://github.com/McFlurriez)) + +#### :house: Internal + +* `react-dev-utils`, `react-error-overlay` + + * [#3028](https://github.com/facebookincubator/create-react-app/pull/3028) Make error overlay filename configurable. ([@jaredpalmer](https://github.com/jaredpalmer)) + +#### Committers: 4 + +- Anthony ([McFlurriez](https://github.com/McFlurriez)) +- Erik J. Sturcke ([esturcke](https://github.com/esturcke)) +- Jared Palmer ([jaredpalmer](https://github.com/jaredpalmer)) +- Tharaka Wijebandara ([tharakawj](https://github.com/tharakawj)) + +### Migrating from 1.0.12 to 1.0.13 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.0.13 +``` + +or + +``` +yarn add --exact react-scripts@1.0.13 +``` + +## 1.0.12 (August 28, 2017) + +#### :bug: Bug Fix + +* `react-error-overlay` + * [#3012](https://github.com/facebookincubator/create-react-app/pull/3012) Fix module function name in error overlay. ([@gaearon](https://github.com/gaearon)) + +* `react-dev-utils` + * [#2938](https://github.com/facebookincubator/create-react-app/pull/2938) Remove superfluous lodash usage. ([@Timer](https://github.com/Timer)) + +#### :nail_care: Enhancement + +* `react-scripts` + + * [#2917](https://github.com/facebookincubator/create-react-app/pull/2917) Optimize the size of default favicon. ([@sylvainbaronnet](https://github.com/sylvainbaronnet)) + +#### :memo: Documentation + +* `react-scripts` + + * [#2986](https://github.com/facebookincubator/create-react-app/pull/2986) Docs: debugging in WebStorm. ([@prigara](https://github.com/prigara)) + * [#2948](https://github.com/facebookincubator/create-react-app/pull/2948) Remove Modulus from user guide. ([@Zertz](https://github.com/Zertz)) + * [#2927](https://github.com/facebookincubator/create-react-app/pull/2927) Update README.md. ([@tbassetto](https://github.com/tbassetto)) + +* `react-dev-utils` + + * [#2942](https://github.com/facebookincubator/create-react-app/pull/2942) Fix docs for `printFileSizesAfterBuild`. ([@Kerumen](https://github.com/Kerumen)) + +#### :house: Internal + +* `react-error-overlay`, `react-scripts` + + * [#2991](https://github.com/facebookincubator/create-react-app/pull/2991) Update `babel-runtime` dependency ([@christophehurpeau](https://github.com/christophehurpeau)) + +* `react-dev-utils`, `react-error-overlay`, `react-scripts` + + * [#2515](https://github.com/facebookincubator/create-react-app/pull/2515) Convert `react-error-overlay` to React ([@tharakawj](https://github.com/tharakawj)) + +#### Committers: 9 + +- Christophe Hurpeau ([christophehurpeau](https://github.com/christophehurpeau)) +- Dan Abramov ([gaearon](https://github.com/gaearon)) +- Ekaterina Prigara ([prigara](https://github.com/prigara)) +- Joe Haddad ([Timer](https://github.com/Timer)) +- Pier-Luc Gendreau ([Zertz](https://github.com/Zertz)) +- Sylvain Baronnet ([sylvainbaronnet](https://github.com/sylvainbaronnet)) +- Tharaka Wijebandara ([tharakawj](https://github.com/tharakawj)) +- Thomas Bassetto ([tbassetto](https://github.com/tbassetto)) +- Yann Pringault ([Kerumen](https://github.com/Kerumen)) + +### Migrating from 1.0.11 to 1.0.12 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.0.12 +``` + +or + +``` +yarn add --exact react-scripts@1.0.12 +``` + +**Note:** there’s a [known issue](https://github.com/facebookincubator/create-react-app/issues/3041) that might cause the project to not compile after upgrading. In this case, migrate straight to `1.0.13` which doesn’t have this issue. + +## 1.0.11 (August 9, 2017) #### :bug: Bug Fix * `create-react-app` diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 00000000000..55203be746a --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,3 @@ +# Code of Conduct + +Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please [read the full text](https://code.facebook.com/pages/876921332402685/open-source-code-of-conduct) so that you can understand what actions will and will not be tolerated. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 68a9c4e09cc..72994ebbf68 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -75,20 +75,18 @@ All functionality must be retained (and configuration given to the user) if they 1. Clone the repo with `git clone https://github.com/facebookincubator/create-react-app` -2. Run `npm install` in the root `create-react-app` folder. +2. Run `yarn` in the root `create-react-app` folder. -Once it is done, you can modify any file locally and run `npm start`, `npm test` or `npm run build` just like in a generated project. +Once it is done, you can modify any file locally and run `yarn start`, `yarn test` or `yarn build` just like in a generated project. If you want to try out the end-to-end flow with the global CLI, you can do this too: ``` -npm run create-react-app my-app +yarn create-react-app my-app cd my-app ``` -and then run `npm start` or `npm run build`. - -*Note: if you are using yarn, we suggest that you use `yarn install --no-lockfile` instead of the bare `yarn` or `yarn install` because we [intentionally](https://github.com/facebookincubator/create-react-app/pull/2014#issuecomment-300811661) do not ignore or add yarn.lock to our repo.* +and then run `yarn start` or `yarn build`. ## Contributing to E2E (end to end) tests @@ -96,6 +94,21 @@ and then run `npm start` or `npm run build`. More detailed information are in the dedicated [README](/packages/react-scripts/fixtures/kitchensink/README.md). +## Tips for contributors using Windows + +The scripts in tasks folder and other scripts in `package.json` will not work in Windows out of the box. However, using [Bash on windows](https://msdn.microsoft.com/en-us/commandline/wsl/about) makes it easier to use those scripts without any workarounds. The steps to do so are detailed below: + +### Install Bash on Ubuntu on Windows + +A good step by step guide can be found [here](https://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10/) + +### Install Node.js and yarn +Even if you have node and yarn installed on your windows, it would not be accessible from the bash shell. You would have to install it again. Installing via [`nvm`](https://github.com/creationix/nvm#install-script) is recommended. + +### Line endings + +By default git would use `CRLF` line endings which would cause the scripts to fail. You can change it for this repo only by setting `autocrlf` to false by running `git config core.autocrlf false`. You can also enable it for all your repos by using the `--global` flag if you wish to do so. + ## Cutting a Release 1. Tag all merged pull requests that go into the release with the relevant milestone. Each merged PR should also be labeled with one of the [labels](https://github.com/facebookincubator/create-react-app/labels) named `tag: ...` to indicate what kind of change it is. @@ -104,13 +117,13 @@ More detailed information are in the dedicated [README](/packages/react-scripts/ 4. Note that files in `packages/create-react-app` should be modified with extreme caution. Since it’s a global CLI, any version of `create-react-app` (global CLI) including very old ones should work with the latest version of `react-scripts`. 5. Create a change log entry for the release: * You'll need an [access token for the GitHub API](https://help.github.com/articles/creating-an-access-token-for-command-line-use/). Save it to this environment variable: `export GITHUB_AUTH="..."` - * Run `npm run changelog`. The command will find all the labeled pull requests merged since the last release and group them by the label and affected packages, and create a change log entry with all the changes and links to PRs and their authors. Copy and paste it to `CHANGELOG.md`. + * Run `yarn changelog`. The command will find all the labeled pull requests merged since the last release and group them by the label and affected packages, and create a change log entry with all the changes and links to PRs and their authors. Copy and paste it to `CHANGELOG.md`. * Add a four-space indented paragraph after each non-trivial list item, explaining what changed and why. For each breaking change also write who it affects and instructions for migrating existing code. * Maybe add some newlines here and there. Preview the result on GitHub to get a feel for it. Changelog generator output is a bit too terse for my taste, so try to make it visually pleasing and well grouped. 6. Make sure to include “Migrating from ...” instructions for the previous release. Often you can copy and paste them. -7. After merging the changelog update, create a GitHub Release with the same text. See previous Releases for inspiration. -8. **Do not run `npm publish`. Instead, run `npm run publish`.** -9. Wait for a long time, and it will get published. Don’t worry that it’s stuck. In the end the publish script will prompt for versions before publishing the packages. +7. Run `npm run publish`. (It has to be `npm run publish` exactly, not just `npm publish` or `yarn publish`.) +8. Wait for a long time, and it will get published. Don’t worry that it’s stuck. In the end the publish script will prompt for versions before publishing the packages. +9. After publishing, create a GitHub Release with the same text as the changelog entry. See previous Releases for inspiration. Make sure to test the released version! If you want to be extra careful, you can publish a prerelease by running `npm run publish -- --tag next` instead of `npm run publish`. diff --git a/LICENSE b/LICENSE index a6b45121620..188fb2b0bd8 100644 --- a/LICENSE +++ b/LICENSE @@ -1,30 +1,21 @@ -BSD License +MIT License -For create-react-app software +Copyright (c) 2013-present, Facebook, Inc. -Copyright (c) 2016-present, Facebook, Inc. All rights reserved. +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: -Redistribution and use in source and binary forms, with or without modification, -are permitted provided that the following conditions are met: +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. - * Redistributions of source code must retain the above copyright notice, this - list of conditions and the following disclaimer. - - * Redistributions in binary form must reproduce the above copyright notice, - this list of conditions and the following disclaimer in the documentation - and/or other materials provided with the distribution. - - * Neither the name Facebook nor the names of its contributors may be used to - endorse or promote products derived from this software without specific - prior written permission. - -THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND -ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED -WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE -DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR -ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES -(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; -LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON -ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT -(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS -SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/PATENTS b/PATENTS deleted file mode 100644 index ca1e727b7f4..00000000000 --- a/PATENTS +++ /dev/null @@ -1,33 +0,0 @@ -Additional Grant of Patent Rights Version 2 - -"Software" means the create-react-app software distributed by Facebook, Inc. - -Facebook, Inc. ("Facebook") hereby grants to each recipient of the Software -("you") a perpetual, worldwide, royalty-free, non-exclusive, irrevocable -(subject to the termination provision below) license under any Necessary -Claims, to make, have made, use, sell, offer to sell, import, and otherwise -transfer the Software. For avoidance of doubt, no license is granted under -Facebook’s rights in any patent claims that are infringed by (i) modifications -to the Software made by you or any third party or (ii) the Software in -combination with any software or other technology. - -The license granted hereunder will terminate, automatically and without notice, -if you (or any of your subsidiaries, corporate affiliates or agents) initiate -directly or indirectly, or take a direct financial interest in, any Patent -Assertion: (i) against Facebook or any of its subsidiaries or corporate -affiliates, (ii) against any party if such Patent Assertion arises in whole or -in part from any software, technology, product or service of Facebook or any of -its subsidiaries or corporate affiliates, or (iii) against any party relating -to the Software. Notwithstanding the foregoing, if Facebook or any of its -subsidiaries or corporate affiliates files a lawsuit alleging patent -infringement against you in the first instance, and you respond by filing a -patent infringement counterclaim in that lawsuit against that party that is -unrelated to the Software, the license granted hereunder will not terminate -under section (i) of this paragraph due to such counterclaim. - -A "Necessary Claim" is a claim of a patent owned by Facebook that is -necessarily infringed by the Software standing alone. - -A "Patent Assertion" is any lawsuit or other action alleging direct, indirect, -or contributory infringement or inducement to infringe any patent, including a -cross-claim or counterclaim. diff --git a/README.md b/README.md index 4709738ff50..c9c78ca0d00 100644 --- a/README.md +++ b/README.md @@ -4,26 +4,28 @@ Create React apps with no build configuration. -* [Getting Started](#getting-started) – How to create a new app. +* [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.
-If something doesn’t work please [file an issue](https://github.com/facebookincubator/create-react-app/issues/new). +If something doesn’t work, please [file an issue](https://github.com/facebookincubator/create-react-app/issues/new). ## Quick Overview ```sh -npm install -g create-react-app - -create-react-app my-app -cd my-app/ +npx create-react-app my-app +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.
When you’re ready to deploy to production, create a minified bundle with `npm run build`. -npm start +

+ +

### Get Started Immediately @@ -32,28 +34,17 @@ They are preconfigured and hidden so that you can focus on the code. Just create a project, and you’re good to go. -## Getting Started +## Creating an App -### Installation +**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. -Install it once globally: +To create a new app, run a single command: ```sh -npm install -g create-react-app +npx create-react-app my-app ``` -**You’ll need to have Node >= 6 on your machine**. You can use [nvm](https://github.com/creationix/nvm#installation) to easily switch Node versions between different projects. - -**This tool doesn’t assume a Node backend**. The Node installation is only required for Create React App itself. - -### Creating an App - -To create a new app, run: - -```sh -create-react-app my-app -cd my-app -``` +*([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))* It will create a directory called `my-app` inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies: @@ -79,14 +70,20 @@ my-app ``` No configuration or complicated folder structures, just the files you need to build your app.
-Once the installation is done, you can run some commands inside the project folder: +Once the installation is done, you can open your project folder: + +```sh +cd my-app +``` + +Inside the newly created project, you can run some built-in commands: ### `npm start` or `yarn start` Runs the app in development mode.
Open [http://localhost:3000](http://localhost:3000) to view it in the browser. -The page will reload if you make edits.
+The page will automatically reload if you make changes to the code.
You will see the build errors and lint warnings in the console. Build errors @@ -115,6 +112,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast - [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) @@ -132,15 +130,19 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast - [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 `` 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) @@ -161,57 +163,50 @@ Please refer to the [User Guide](https://github.com/facebookincubator/create-rea * **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. -## Why Use This? +## What’s Included? -**If you’re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: +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. -* A dev server that lints for common errors. -* Import CSS and image files directly from JavaScript. * Autoprefixed CSS, so you don’t need `-webkit` or other prefixes. -* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. +* 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. -**The feature set is intentionally limited**. It doesn’t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. +Check out [this guide](https://github.com/nitishdayal/cra_closer_look) for an overview of how these tools fit together. -**You don’t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. We’ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. +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. -### Converting to a Custom Setup +## Popular Alternatives -**If you’re a power user** and you aren’t happy with the default configuration, you can “eject” from the tool and use it as a boilerplate generator. +Create React App is a great fit for: -Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, you’re on your own. +* **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. -**Note: this is a one-way operation. Once you `eject`, you can’t go back!** +Here’s a few common cases where you might want to try something else: -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. +* 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). -## Limitations +* 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. -Some features are currently **not supported**: +* 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/). -* Server rendering. -* Some experimental syntax extensions (e.g. decorators). -* CSS Modules. -* Importing LESS or Sass directly ([but you still can use them](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc)). -* Hot reloading of 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. -Some of them might get added in the future if they are stable, are useful to majority of React apps, don’t conflict with existing tools, and don’t introduce additional configuration. +* 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. -## What’s Inside? +* If you want to use **TypeScript**, consider using [create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript). -The tools used by Create React App are subject to change. -Currently it is a thin layer on top of many amazing community projects, such as: +* Finally, if you need **more customization**, check out [Neutrino](https://neutrino.js.org/) and its [React preset](https://neutrino.js.org/packages/react/). -* [webpack](https://webpack.js.org/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) -* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) -* [Autoprefixer](https://github.com/postcss/autoprefixer) -* [ESLint](http://eslint.org/) -* [Jest](http://facebook.github.io/jest) -* and others. +All of the above tools can work with little to no configuration. -All of them are transitive dependencies of the provided npm package. +If you prefer configuring the build yourself, [follow this guide](https://reactjs.org/docs/add-react-to-an-existing-app.html). ## Contributing @@ -229,32 +224,3 @@ We are grateful to the authors of existing related projects for their ideas and * [@eanplatter](https://github.com/eanplatter) * [@insin](https://github.com/insin) * [@mxstbr](https://github.com/mxstbr) - -## Alternatives - -If you don’t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs.
-Some of the more popular and actively maintained ones are: - -* [insin/nwb](https://github.com/insin/nwb) -* [mozilla-neutrino/neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) -* [jaredpalmer/razzle](https://github.com/jaredpalmer/razzle) -* [NYTimes/kyt](https://github.com/NYTimes/kyt) -* [zeit/next.js](https://github.com/zeit/next.js) -* [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby) -* [electrode-io/electrode](https://github.com/electrode-io/electrode) - -Notable alternatives also include: - -* [enclave](https://github.com/eanplatter/enclave) -* [motion](https://github.com/steelbrain/pundle/tree/master/packages/motion) -* [quik](https://github.com/satya164/quik) -* [sagui](https://github.com/saguijs/sagui) -* [roc](https://github.com/rocjs/roc) -* [aik](https://github.com/d4rkr00t/aik) -* [react-app](https://github.com/kriasoft/react-app) -* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) -* [sku](https://github.com/seek-oss/sku) -* [gluestick](https://github.com/TrueCar/gluestick) - -You can also use module bundlers like [webpack](http://webpack.js.org) and [Browserify](http://browserify.org/) directly.
-React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. diff --git a/appveyor.cleanup-cache.txt b/appveyor.cleanup-cache.txt index 19d0b989b62..ea6d1b9c010 100644 --- a/appveyor.cleanup-cache.txt +++ b/appveyor.cleanup-cache.txt @@ -3,3 +3,4 @@ http://help.appveyor.com/discussions/questions/1310-delete-cache ---- Just testing if this works. +lalala. diff --git a/appveyor.yml b/appveyor.yml index e00da39436c..5d957aa7eea 100644 --- a/appveyor.yml +++ b/appveyor.yml @@ -2,11 +2,11 @@ image: Visual Studio 2017 environment: matrix: - - nodejs_version: 7 + - nodejs_version: 8 test_suite: "simple" - - nodejs_version: 7 + - nodejs_version: 8 test_suite: "installs" - - nodejs_version: 7 + - nodejs_version: 8 test_suite: "kitchensink" - nodejs_version: 6 test_suite: "simple" @@ -28,8 +28,6 @@ platform: - x64 install: - # TODO: Remove after https://github.com/appveyor/ci/issues/1426 is fixed - - set PATH=C:\Program Files\Git\mingw64\bin;%PATH% - ps: Install-Product node $env:nodejs_version $env:platform build: off @@ -41,4 +39,4 @@ skip_commits: test_script: - node --version - npm --version - - sh tasks/e2e-%test_suite%.sh + - bash tasks/e2e-%test_suite%.sh diff --git a/bootstrap.js b/bootstrap.js deleted file mode 100644 index b54a1ed9f36..00000000000 --- a/bootstrap.js +++ /dev/null @@ -1,67 +0,0 @@ -'use strict'; - -const { execSync, spawn } = require('child_process'); -const { resolve } = require('path'); -const { existsSync } = require('fs'); -const { platform } = require('os'); - -function shouldUseYarn() { - try { - execSync('yarnpkg --version', { stdio: 'ignore' }); - return true; - } catch (e) { - return false; - } -} - -function shouldUseNpmConcurrently() { - try { - const versionString = execSync('npm --version'); - const m = /^(\d+)[.]/.exec(versionString); - // NPM >= 5 support concurrent installs - return Number(m[1]) >= 5; - } catch (e) { - return false; - } -} - -const yarn = shouldUseYarn(); -const windows = platform() === 'win32'; -const lerna = resolve( - __dirname, - 'node_modules', - '.bin', - windows ? 'lerna.cmd' : 'lerna' -); - -if (!existsSync(lerna)) { - if (yarn) { - console.log('Cannot find lerna. Please run `yarn --check-files`.'); - } else { - console.log( - 'Cannot find lerna. Please remove `node_modules` and run `npm install`.' - ); - } - process.exit(1); -} - -let child; -if (yarn) { - // Yarn does not support concurrency - child = spawn(lerna, ['bootstrap', '--npm-client=yarn', '--concurrency=1'], { - stdio: 'inherit', - }); -} else { - let args = ['bootstrap']; - if ( - // The Windows filesystem does not handle concurrency well - windows || - // Only newer npm versions support concurrency - !shouldUseNpmConcurrently() - ) { - args.push('--concurrency=1'); - } - child = spawn(lerna, args, { stdio: 'inherit' }); -} - -child.on('close', code => process.exit(code)); diff --git a/lerna.json b/lerna.json index 1673f8a3187..f1d78d84bae 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,7 @@ { - "lerna": "2.0.0", + "lerna": "2.6.0", + "npmClient": "yarn", + "useWorkspaces": true, "version": "independent", "changelog": { "repo": "facebookincubator/create-react-app", @@ -12,8 +14,5 @@ "tag: internal": ":house: Internal" }, "cacheDir": ".changelog" - }, - "packages": [ - "packages/*" - ] + } } diff --git a/package.json b/package.json index c3dd6404b5e..9a32bc1350f 100644 --- a/package.json +++ b/package.json @@ -1,25 +1,30 @@ { "private": true, + "workspaces": [ + "packages/*" + ], "scripts": { - "build": "node packages/react-scripts/scripts/build.js", + "build": "cd packages/react-scripts && node scripts/build.js", "changelog": "lerna-changelog", - "create-react-app": "tasks/cra.sh", + "create-react-app": "node tasks/cra.js", "e2e": "tasks/e2e-simple.sh", "e2e:docker": "tasks/local-test.sh", - "postinstall": "node bootstrap.js && cd packages/react-error-overlay/ && npm run build:prod", - "publish": "tasks/release.sh", - "start": "node packages/react-scripts/scripts/start.js", - "test": "node packages/react-scripts/scripts/test.js --env=jsdom", + "postinstall": "cd packages/react-error-overlay/ && yarn build:prod", + "publish": "tasks/publish.sh", + "start": "cd packages/react-scripts && node scripts/start.js", + "screencast": "svg-term --cast hItN7sl5yfCPTHxvFg5glhhfp --out screencast.svg --window", + "test": "cd packages/react-scripts && node scripts/test.js --env=jsdom", "format": "prettier --trailing-comma es5 --single-quote --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'", "precommit": "lint-staged" }, "devDependencies": { "eslint": "^4.4.1", "husky": "^0.13.2", - "lerna": "^2.0.0", + "lerna": "2.6.0", "lerna-changelog": "^0.6.0", "lint-staged": "^3.3.1", - "prettier": "^1.5.2" + "prettier": "1.6.1", + "svg-term-cli": "^2.0.3" }, "lint-staged": { "*.js": [ diff --git a/packages/babel-preset-react-app/README.md b/packages/babel-preset-react-app/README.md index 4dc9fb9b168..5653831ac7e 100644 --- a/packages/babel-preset-react-app/README.md +++ b/packages/babel-preset-react-app/README.md @@ -16,6 +16,12 @@ If you want to use this Babel preset in a project not built with Create React Ap First, [install Babel](https://babeljs.io/docs/setup/). +Then install babel-preset-react-app. + +```sh +npm install babel-preset-react-app --save-dev +``` + Then create a file named `.babelrc` with following contents in the root folder of your project: ```js diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js index f6102dc0529..d90fb6af50b 100644 --- a/packages/babel-preset-react-app/index.js +++ b/packages/babel-preset-react-app/index.js @@ -1,14 +1,16 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * 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 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 diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index dce6742985f..c6a7e29441d 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -1,9 +1,9 @@ { "name": "babel-preset-react-app", - "version": "3.0.2", + "version": "3.1.1", "description": "Babel preset used by Create React App", "repository": "facebookincubator/create-react-app", - "license": "BSD-3-Clause", + "license": "MIT", "bugs": { "url": "https://github.com/facebookincubator/create-react-app/issues" }, @@ -11,17 +11,18 @@ "index.js" ], "dependencies": { - "babel-plugin-dynamic-import-node": "1.0.2", + "babel-plugin-dynamic-import-node": "1.1.0", "babel-plugin-syntax-dynamic-import": "6.18.0", "babel-plugin-transform-class-properties": "6.24.1", - "babel-plugin-transform-object-rest-spread": "6.23.0", + "babel-plugin-transform-es2015-destructuring": "6.23.0", + "babel-plugin-transform-object-rest-spread": "6.26.0", "babel-plugin-transform-react-constant-elements": "6.23.0", "babel-plugin-transform-react-jsx": "6.24.1", "babel-plugin-transform-react-jsx-self": "6.22.0", "babel-plugin-transform-react-jsx-source": "6.22.0", - "babel-plugin-transform-regenerator": "6.24.1", + "babel-plugin-transform-regenerator": "6.26.0", "babel-plugin-transform-runtime": "6.23.0", - "babel-preset-env": "1.5.2", + "babel-preset-env": "1.6.1", "babel-preset-react": "6.24.1" }, "peerDependencies": { diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index 4a1b7901dc4..a2d9fdbd86b 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ @@ -49,6 +47,7 @@ const tmp = require('tmp'); const unpack = require('tar-pack').unpack; const url = require('url'); const hyperquest = require('hyperquest'); +const envinfo = require('envinfo'); const packageJson = require('./package.json'); @@ -62,10 +61,12 @@ const program = new commander.Command(packageJson.name) projectName = name; }) .option('--verbose', 'print additional logs') + .option('--info', 'print environment debug info') .option( '--scripts-version ', 'use a non-standard version of react-scripts' ) + .option('--use-npm') .allowUnknownOption() .on('--help', () => { console.log(` Only ${chalk.green('')} is required.`); @@ -84,6 +85,11 @@ const program = new commander.Command(packageJson.name) 'https://mysite.com/my-react-scripts-0.8.2.tgz' )}` ); + console.log( + ` - a .tar.gz archive: ${chalk.green( + 'https://mysite.com/my-react-scripts-0.8.2.tar.gz' + )}` + ); console.log( ` It is not needed unless you specifically want to use a fork.` ); @@ -101,6 +107,14 @@ const program = new commander.Command(packageJson.name) .parse(process.argv); if (typeof projectName === 'undefined') { + if (program.info) { + envinfo.print({ + packages: ['react', 'react-dom', 'react-scripts'], + noNativeIDE: true, + duplicates: true, + }); + process.exit(0); + } console.error('Please specify the project directory:'); console.log( ` ${chalk.cyan(program.name())} ${chalk.green('')}` @@ -135,10 +149,11 @@ createApp( projectName, program.verbose, program.scriptsVersion, + program.useNpm, hiddenProgram.internalTestingTemplate ); -function createApp(name, verbose, version, template) { +function createApp(name, verbose, version, useNpm, template) { const root = path.resolve(name); const appName = path.basename(root); @@ -160,8 +175,13 @@ function createApp(name, verbose, version, template) { path.join(root, 'package.json'), JSON.stringify(packageJson, null, 2) ); + + const useYarn = useNpm ? false : shouldUseYarn(); const originalDirectory = process.cwd(); process.chdir(root); + if (!useYarn && !checkThatNpmCanReadCwd()) { + process.exit(1); + } if (!semver.satisfies(process.version, '>=6.0.0')) { console.log( @@ -174,7 +194,6 @@ function createApp(name, verbose, version, template) { version = 'react-scripts@0.9.x'; } - const useYarn = shouldUseYarn(); if (!useYarn) { const npmInfo = checkNpmVersion(); if (!npmInfo.hasMinNpm) { @@ -202,7 +221,7 @@ function shouldUseYarn() { } } -function install(useYarn, dependencies, verbose, isOnline) { +function install(root, useYarn, dependencies, verbose, isOnline) { return new Promise((resolve, reject) => { let command; let args; @@ -214,6 +233,14 @@ function install(useYarn, dependencies, verbose, isOnline) { } [].push.apply(args, dependencies); + // Explicitly set cwd() to work around issues like + // https://github.com/facebookincubator/create-react-app/issues/3326. + // Unfortunately we can only do this for Yarn because npm support for + // equivalent --prefix flag doesn't help with this issue. + // This is why for npm, we run checkThatNpmCanReadCwd() early instead. + args.push('--cwd'); + args.push(root); + if (!isOnline) { console.log(chalk.yellow('You appear to be offline.')); console.log(chalk.yellow('Falling back to the local Yarn cache.')); @@ -256,7 +283,7 @@ function run( template, useYarn ) { - const packageToInstall = getInstallPackage(version); + const packageToInstall = getInstallPackage(version, originalDirectory); const allDependencies = ['react', 'react-dom', packageToInstall]; console.log('Installing packages. This might take a couple of minutes.'); @@ -277,7 +304,7 @@ function run( ); console.log(); - return install(useYarn, allDependencies, verbose, isOnline).then( + return install(root, useYarn, allDependencies, verbose, isOnline).then( () => packageName ); }) @@ -353,11 +380,16 @@ function run( }); } -function getInstallPackage(version) { +function getInstallPackage(version, originalDirectory) { let packageToInstall = 'react-scripts'; const validSemver = semver.valid(version); if (validSemver) { packageToInstall += `@${validSemver}`; + } else if (version && version.match(/^file:/)) { + packageToInstall = `file:${path.resolve( + originalDirectory, + version.match(/^file:(.*)?$/)[1] + )}`; } else if (version) { // for tar.gz or alternative paths packageToInstall = version; @@ -405,7 +437,7 @@ function extractStream(stream, dest) { // Extract package name from tarball url or path. function getPackageName(installPackage) { - if (installPackage.indexOf('.tgz') > -1) { + if (installPackage.match(/^.+\.(tgz|tar\.gz)$/)) { return getTemporaryDirectory() .then(obj => { let stream; @@ -428,7 +460,7 @@ function getPackageName(installPackage) { `Could not extract the package name from the archive: ${err.message}` ); const assumedProjectName = installPackage.match( - /^.+\/(.+?)(?:-\d+.+)?\.tgz$/ + /^.+\/(.+?)(?:-\d+.+)?\.(tgz|tar\.gz)$/ )[1]; console.log( `Based on the filename, assuming it is "${chalk.cyan( @@ -447,6 +479,10 @@ function getPackageName(installPackage) { return Promise.resolve( installPackage.charAt(0) + installPackage.substr(1).split('@')[0] ); + } else if (installPackage.match(/^file:/)) { + const installPackagePath = installPackage.match(/^file:(.*)?$/)[1]; + const installPackageJson = require(path.join(installPackagePath, 'package.json')); + return Promise.resolve(installPackageJson.name); } return Promise.resolve(installPackage); } @@ -455,7 +491,9 @@ function checkNpmVersion() { let hasMinNpm = false; let npmVersion = null; try { - npmVersion = execSync('npm --version').toString().trim(); + npmVersion = execSync('npm --version') + .toString() + .trim(); hasMinNpm = semver.gte(npmVersion, '3.0.0'); } catch (err) { // ignore @@ -581,6 +619,12 @@ function isSafeToCreateProjectIn(root, name) { '.hg', '.hgignore', '.hgcheck', + '.npmignore', + 'mkdocs.yml', + 'docs', + '.travis.yml', + '.gitlab-ci.yml', + '.gitattributes', ]; console.log(); @@ -606,6 +650,82 @@ function isSafeToCreateProjectIn(root, name) { return false; } +function getProxy() { + if (process.env.https_proxy) { + return process.env.https_proxy; + } else { + try { + // Trying to read https-proxy from .npmrc + let httpsProxy = execSync('npm config get https-proxy') + .toString() + .trim(); + return httpsProxy !== 'null' ? httpsProxy : undefined; + } catch (e) { + return; + } + } +} +function checkThatNpmCanReadCwd() { + const cwd = process.cwd(); + let childOutput = null; + try { + // Note: intentionally using spawn over exec since + // the problem doesn't reproduce otherwise. + // `npm config list` is the only reliable way I could find + // to reproduce the wrong path. Just printing process.cwd() + // in a Node process was not enough. + childOutput = spawn.sync('npm', ['config', 'list']).output.join(''); + } catch (err) { + // Something went wrong spawning node. + // Not great, but it means we can't do this check. + // We might fail later on, but let's continue. + return true; + } + if (typeof childOutput !== 'string') { + return true; + } + const lines = childOutput.split('\n'); + // `npm config list` output includes the following line: + // "; cwd = C:\path\to\current\dir" (unquoted) + // I couldn't find an easier way to get it. + const prefix = '; cwd = '; + const line = lines.find(line => line.indexOf(prefix) === 0); + if (typeof line !== 'string') { + // Fail gracefully. They could remove it. + return true; + } + const npmCWD = line.substring(prefix.length); + if (npmCWD === cwd) { + return true; + } + console.error( + chalk.red( + `Could not start an npm process in the right directory.\n\n` + + `The current directory is: ${chalk.bold(cwd)}\n` + + `However, a newly started npm process runs in: ${chalk.bold( + npmCWD + )}\n\n` + + `This is probably caused by a misconfigured system terminal shell.` + ) + ); + if (process.platform === 'win32') { + console.error( + chalk.red(`On Windows, this can usually be fixed by running:\n\n`) + + ` ${chalk.cyan( + 'reg' + )} delete "HKCU\\Software\\Microsoft\\Command Processor" /v AutoRun /f\n` + + ` ${chalk.cyan( + 'reg' + )} delete "HKLM\\Software\\Microsoft\\Command Processor" /v AutoRun /f\n\n` + + chalk.red(`Try to run the above two lines in the terminal.\n`) + + chalk.red( + `To learn more about this problem, read: https://blogs.msdn.microsoft.com/oldnewthing/20071121-00/?p=24433/` + ) + ); + } + return false; +} + function checkIfOnline(useYarn) { if (!useYarn) { // Don't ping the Yarn registry. @@ -615,10 +735,11 @@ function checkIfOnline(useYarn) { return new Promise(resolve => { dns.lookup('registry.yarnpkg.com', err => { - if (err != null && process.env.https_proxy) { + let proxy; + if (err != null && (proxy = getProxy())) { // If a proxy is defined, we likely can't resolve external hostnames. // Try to resolve the proxy name as an indication of a connection. - dns.lookup(url.parse(process.env.https_proxy).hostname, proxyErr => { + dns.lookup(url.parse(proxy).hostname, proxyErr => { resolve(proxyErr == null); }); } else { diff --git a/packages/create-react-app/index.js b/packages/create-react-app/index.js index 4df90f53fd4..a093636609e 100755 --- a/packages/create-react-app/index.js +++ b/packages/create-react-app/index.js @@ -2,11 +2,9 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ diff --git a/packages/create-react-app/package.json b/packages/create-react-app/package.json index 42ee3497ea5..4d8f4112ead 100644 --- a/packages/create-react-app/package.json +++ b/packages/create-react-app/package.json @@ -1,12 +1,12 @@ { "name": "create-react-app", - "version": "1.4.0", + "version": "1.5.2", "keywords": [ "react" ], "description": "Create React apps with no build configuration.", "repository": "facebookincubator/create-react-app", - "license": "BSD-3-Clause", + "license": "MIT", "engines": { "node": ">=4" }, @@ -24,6 +24,7 @@ "chalk": "^1.1.1", "commander": "^2.9.0", "cross-spawn": "^4.0.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/README.md b/packages/eslint-config-react-app/README.md index 0679552a29a..777b8f46e79 100644 --- a/packages/eslint-config-react-app/README.md +++ b/packages/eslint-config-react-app/README.md @@ -19,7 +19,7 @@ If you want to use this ESLint configuration in a project not built with Create First, install this package, ESLint and the necessary plugins. ```sh - npm install --save-dev eslint-config-react-app babel-eslint@7.2.3 eslint@3.19.0 eslint-plugin-flowtype@2.33.0 eslint-plugin-import@2.2.0 eslint-plugin-jsx-a11y@5.0.1 eslint-plugin-react@7.0.1 + npm install --save-dev eslint-config-react-app babel-eslint@^7.2.3 eslint@^4.1.1 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 ``` Then create a file named `.eslintrc` with following contents in the root folder of your project: @@ -45,7 +45,7 @@ The following rules from the [eslint-plugin-jsx-a11y](https://github.com/evcohen - [aria-role](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md) - [aria-unsupported-elements](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-unsupported-elements.md) - [heading-has-content](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/heading-has-content.md) -- [href-no-hash](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/href-no-hash.md) +- [href-no-hash](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/v5.1.1/docs/rules/href-no-hash.md) - [iframe-has-title](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/iframe-has-title.md) - [img-redundant-alt](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md) - [no-access-key](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md) diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js index 4e94e650c38..c7a619abd62 100644 --- a/packages/eslint-config-react-app/index.js +++ b/packages/eslint-config-react-app/index.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; @@ -118,7 +116,7 @@ module.exports = { 'new-parens': 'warn', 'no-array-constructor': 'warn', 'no-caller': 'warn', - 'no-cond-assign': ['warn', 'always'], + 'no-cond-assign': ['warn', 'except-parens'], 'no-const-assign': 'warn', 'no-control-regex': 'warn', 'no-delete-var': 'warn', diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index 375c9f54b87..c13b0417c46 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -1,9 +1,9 @@ { "name": "eslint-config-react-app", - "version": "2.0.0", + "version": "2.1.0", "description": "ESLint configuration used by Create React App", "repository": "facebookincubator/create-react-app", - "license": "BSD-3-Clause", + "license": "MIT", "bugs": { "url": "https://github.com/facebookincubator/create-react-app/issues" }, diff --git a/packages/react-dev-utils/FileSizeReporter.js b/packages/react-dev-utils/FileSizeReporter.js index ab9a2728752..68aae411f12 100644 --- a/packages/react-dev-utils/FileSizeReporter.js +++ b/packages/react-dev-utils/FileSizeReporter.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; @@ -27,21 +25,29 @@ function printFileSizesAfterBuild( ) { var root = previousSizeMap.root; var sizes = previousSizeMap.sizes; - var assets = webpackStats - .toJson() - .assets.filter(asset => /\.(js|css)$/.test(asset.name)) - .map(asset => { - var fileContents = fs.readFileSync(path.join(root, asset.name)); - var size = gzipSize(fileContents); - var previousSize = sizes[removeFileNameHash(root, asset.name)]; - var difference = getDifferenceLabel(size, previousSize); - return { - folder: path.join(path.basename(buildFolder), path.dirname(asset.name)), - name: path.basename(asset.name), - size: size, - sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : ''), - }; - }); + var assets = (webpackStats.stats || [webpackStats]) + .map(stats => + stats + .toJson() + .assets.filter(asset => /\.(js|css)$/.test(asset.name)) + .map(asset => { + var fileContents = fs.readFileSync(path.join(root, asset.name)); + var size = gzipSize(fileContents); + var previousSize = sizes[removeFileNameHash(root, asset.name)]; + var difference = getDifferenceLabel(size, previousSize); + return { + folder: path.join( + path.basename(buildFolder), + path.dirname(asset.name) + ), + name: path.basename(asset.name), + size: size, + sizeLabel: + filesize(size) + (difference ? ' (' + difference + ')' : '') + }; + }) + ) + .reduce((single, all) => all.concat(single), []); assets.sort((a, b) => b.size - a.size); var longestSizeLabelLength = Math.max.apply( null, @@ -92,7 +98,10 @@ function printFileSizesAfterBuild( function removeFileNameHash(buildFolder, fileName) { return fileName .replace(buildFolder, '') - .replace(/\/?(.*)(\.\w+)(\.js|\.css)/, (match, p1, p2, p3) => p1 + p3); + .replace( + /\/?(.*)(\.[0-9a-f]+)(\.chunk)?(\.js|\.css)/, + (match, p1, p2, p3, p4) => p1 + p4 + ); } // Input: 1024, 2048 diff --git a/packages/react-dev-utils/InterpolateHtmlPlugin.js b/packages/react-dev-utils/InterpolateHtmlPlugin.js index ac1d3e9967d..9233bdefa3c 100644 --- a/packages/react-dev-utils/InterpolateHtmlPlugin.js +++ b/packages/react-dev-utils/InterpolateHtmlPlugin.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ // This Webpack plugin lets us interpolate custom variables into `index.html`. diff --git a/packages/react-dev-utils/ModuleScopePlugin.js b/packages/react-dev-utils/ModuleScopePlugin.js index 3a10904d36b..101a30a1fb9 100644 --- a/packages/react-dev-utils/ModuleScopePlugin.js +++ b/packages/react-dev-utils/ModuleScopePlugin.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; diff --git a/packages/react-dev-utils/WatchMissingNodeModulesPlugin.js b/packages/react-dev-utils/WatchMissingNodeModulesPlugin.js index 91b089c05ef..ae11cdc902a 100644 --- a/packages/react-dev-utils/WatchMissingNodeModulesPlugin.js +++ b/packages/react-dev-utils/WatchMissingNodeModulesPlugin.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ // This Webpack plugin ensures `npm install ` forces a project rebuild. diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js index 1cd060592f9..4add9f9c1bc 100644 --- a/packages/react-dev-utils/WebpackDevServerUtils.js +++ b/packages/react-dev-utils/WebpackDevServerUtils.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; @@ -319,15 +317,19 @@ function prepareProxy(proxy, appPublicFolder) { // For single page apps, we generally want to fallback to /index.html. // However we also want to respect `proxy` for API calls. // So if `proxy` is specified as a string, we need to decide which fallback to use. - // We use a heuristic: if request `accept`s text/html, we pick /index.html. + // We use a heuristic: We want to proxy all the requests that are not meant + // for static assets and as all the requests for static assets will be using + // `GET` method, we can proxy all non-`GET` requests. + // For `GET` requests, if request `accept`s text/html, we pick /index.html. // Modern browsers include text/html into `accept` header when navigating. // However API calls like `fetch()` won’t generally accept text/html. // If this heuristic doesn’t work well for you, use a custom `proxy` object. context: function(pathname, req) { return ( - mayProxy(pathname) && - req.headers.accept && - req.headers.accept.indexOf('text/html') === -1 + req.method !== 'GET' || + (mayProxy(pathname) && + req.headers.accept && + req.headers.accept.indexOf('text/html') === -1) ); }, onProxyReq: proxyReq => { diff --git a/packages/react-dev-utils/__tests__/.eslintrc b/packages/react-dev-utils/__tests__/.eslintrc new file mode 100644 index 00000000000..55f121d152d --- /dev/null +++ b/packages/react-dev-utils/__tests__/.eslintrc @@ -0,0 +1,5 @@ +{ + "env": { + "jest": true + } +} diff --git a/packages/react-dev-utils/__tests__/ignoredFiles.test.js b/packages/react-dev-utils/__tests__/ignoredFiles.test.js new file mode 100644 index 00000000000..6feed979797 --- /dev/null +++ b/packages/react-dev-utils/__tests__/ignoredFiles.test.js @@ -0,0 +1,55 @@ +/** + * 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 ignoredFiles = require('../ignoredFiles'); + +describe('ignore watch files regex', () => { + it('normal file', () => { + const appSrc = '/root/src/'; + const isIgnored = ignoredFiles(appSrc).test('/foo'); + const isIgnoredInSrc = ignoredFiles(appSrc).test('/root/src/foo'); + + expect(isIgnored).toBe(false); + expect(isIgnoredInSrc).toBe(false); + }); + + it('node modules', () => { + const appSrc = '/root/src/'; + const isIgnored = ignoredFiles(appSrc).test('/root/node_modules/foo'); + + expect(isIgnored).toBe(true); + }); + + it('node modules inside source directory', () => { + const appSrc = '/root/src/'; + const isIgnored = ignoredFiles(appSrc).test('/root/src/node_modules/foo'); + const isIgnoredMoreThanOneLevel = ignoredFiles(appSrc).test( + '/root/src/bar/node_modules/foo' + ); + + expect(isIgnored).toBe(false); + expect(isIgnoredMoreThanOneLevel).toBe(false); + }); + + it('path contains source directory', () => { + const appSrc = '/root/src/'; + const isIgnored = ignoredFiles(appSrc).test( + '/bar/root/src/node_modules/foo' + ); + + expect(isIgnored).toBe(true); + }); + + it('path starts with source directory', () => { + const appSrc = '/root/src/'; + const isIgnored = ignoredFiles(appSrc).test('/root/src2/node_modules/foo'); + + expect(isIgnored).toBe(true); + }); +}); diff --git a/packages/react-dev-utils/checkRequiredFiles.js b/packages/react-dev-utils/checkRequiredFiles.js index 55139b0b870..9799cf6b590 100644 --- a/packages/react-dev-utils/checkRequiredFiles.js +++ b/packages/react-dev-utils/checkRequiredFiles.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; diff --git a/packages/react-dev-utils/clearConsole.js b/packages/react-dev-utils/clearConsole.js index 05ab28c44d2..cb02af89237 100644 --- a/packages/react-dev-utils/clearConsole.js +++ b/packages/react-dev-utils/clearConsole.js @@ -1,18 +1,14 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; function clearConsole() { - process.stdout.write( - process.platform === 'win32' ? '\x1Bc' : '\x1B[2J\x1B[3J\x1B[H' - ); + process.stdout.write(process.platform === 'win32' ? '\x1B[2J\x1B[0f' : '\x1B[2J\x1B[3J\x1B[H'); } module.exports = clearConsole; diff --git a/packages/react-dev-utils/crossSpawn.js b/packages/react-dev-utils/crossSpawn.js index 8424dcf090e..b772086f21a 100644 --- a/packages/react-dev-utils/crossSpawn.js +++ b/packages/react-dev-utils/crossSpawn.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; diff --git a/packages/react-dev-utils/errorOverlayMiddleware.js b/packages/react-dev-utils/errorOverlayMiddleware.js new file mode 100644 index 00000000000..873b1994732 --- /dev/null +++ b/packages/react-dev-utils/errorOverlayMiddleware.js @@ -0,0 +1,23 @@ +/** + * 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 launchEditor = require('./launchEditor'); +const launchEditorEndpoint = require('./launchEditorEndpoint'); + +module.exports = function createLaunchEditorMiddleware() { + return function launchEditorMiddleware(req, res, next) { + if (req.url.startsWith(launchEditorEndpoint)) { + const lineNumber = parseInt(req.query.lineNumber, 10) || 1; + const colNumber = parseInt(req.query.colNumber, 10) || 1; + launchEditor(req.query.fileName, lineNumber, colNumber); + res.end(); + } else { + next(); + } + }; +}; diff --git a/packages/react-dev-utils/eslintFormatter.js b/packages/react-dev-utils/eslintFormatter.js index b7756b7a266..a269ccc8260 100644 --- a/packages/react-dev-utils/eslintFormatter.js +++ b/packages/react-dev-utils/eslintFormatter.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; diff --git a/packages/react-dev-utils/formatWebpackMessages.js b/packages/react-dev-utils/formatWebpackMessages.js index 1f22a0059a5..7aea5582c0a 100644 --- a/packages/react-dev-utils/formatWebpackMessages.js +++ b/packages/react-dev-utils/formatWebpackMessages.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; diff --git a/packages/react-dev-utils/getProcessForPort.js b/packages/react-dev-utils/getProcessForPort.js index 428dc62cfda..f9eda7752b4 100644 --- a/packages/react-dev-utils/getProcessForPort.js +++ b/packages/react-dev-utils/getProcessForPort.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; @@ -48,9 +46,11 @@ function getProcessCommand(processId, processDirectory) { execOptions ); + command = command.replace(/\n$/, ''); + if (isProcessAReactApp(command)) { const packageName = getPackageNameInDirectory(processDirectory); - return packageName ? packageName + '\n' : command; + return packageName ? packageName : command; } else { return command; } @@ -58,7 +58,7 @@ function getProcessCommand(processId, processDirectory) { function getDirectoryOfProcessById(processId) { return execSync( - 'lsof -p ' + processId + ' | awk \'$4=="cwd" {print $9}\'', + 'lsof -p ' + processId + ' | awk \'$4=="cwd" {for (i=9; i<=NF; i++) printf "%s ", $i}\'', execOptions ).trim(); } @@ -68,7 +68,12 @@ function getProcessForPort(port) { var processId = getProcessIdOnPort(port); var directory = getDirectoryOfProcessById(processId); var command = getProcessCommand(processId, directory); - return chalk.cyan(command) + chalk.blue(' in ') + chalk.cyan(directory); + return ( + chalk.cyan(command) + + chalk.grey(' (pid ' + processId + ')\n') + + chalk.blue(' in ') + + chalk.cyan(directory) + ); } catch (e) { return null; } diff --git a/packages/react-dev-utils/ignoredFiles.js b/packages/react-dev-utils/ignoredFiles.js new file mode 100644 index 00000000000..73a6e8bc5cf --- /dev/null +++ b/packages/react-dev-utils/ignoredFiles.js @@ -0,0 +1,20 @@ +/** + * 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 path = require('path'); +const escape = require('escape-string-regexp'); + +module.exports = function ignoredFiles(appSrc) { + return new RegExp( + `^(?!${escape( + path.normalize(appSrc + '/').replace(/[\\]+/g, '/') + )}).+/node_modules/`, + 'g' + ); +}; diff --git a/packages/react-dev-utils/inquirer.js b/packages/react-dev-utils/inquirer.js index 9dbc080262c..6b8eca9ea8f 100644 --- a/packages/react-dev-utils/inquirer.js +++ b/packages/react-dev-utils/inquirer.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; diff --git a/packages/react-dev-utils/launchEditor.js b/packages/react-dev-utils/launchEditor.js index e1ea29c8869..cf190b08619 100644 --- a/packages/react-dev-utils/launchEditor.js +++ b/packages/react-dev-utils/launchEditor.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; @@ -35,15 +33,19 @@ const COMMON_EDITORS_OSX = { '/Applications/Brackets.app/Contents/MacOS/Brackets': 'brackets', '/Applications/Sublime Text.app/Contents/MacOS/Sublime Text': '/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl', + '/Applications/Sublime Text Dev.app/Contents/MacOS/Sublime Text': + '/Applications/Sublime Text Dev.app/Contents/SharedSupport/bin/subl', '/Applications/Sublime Text 2.app/Contents/MacOS/Sublime Text 2': '/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl', '/Applications/Visual Studio Code.app/Contents/MacOS/Electron': 'code', + '/Applications/Visual Studio Code - Insiders.app/Contents/MacOS/Electron': + 'code-insiders', '/Applications/AppCode.app/Contents/MacOS/appcode': '/Applications/AppCode.app/Contents/MacOS/appcode', '/Applications/CLion.app/Contents/MacOS/clion': '/Applications/CLion.app/Contents/MacOS/clion', '/Applications/IntelliJ IDEA.app/Contents/MacOS/idea': - '/Applications/IntelliJ IDEA.app/Contents/MacOS/idea', + '/Applications/IntelliJ IDEA.app/Contents/MacOS/idea', '/Applications/PhpStorm.app/Contents/MacOS/phpstorm': '/Applications/PhpStorm.app/Contents/MacOS/phpstorm', '/Applications/PyCharm.app/Contents/MacOS/pycharm': @@ -53,12 +55,30 @@ const COMMON_EDITORS_OSX = { '/Applications/RubyMine.app/Contents/MacOS/rubymine': '/Applications/RubyMine.app/Contents/MacOS/rubymine', '/Applications/WebStorm.app/Contents/MacOS/webstorm': - '/Applications/WebStorm.app/Contents/MacOS/webstorm', + '/Applications/WebStorm.app/Contents/MacOS/webstorm', + '/Applications/MacVim.app/Contents/MacOS/MacVim': + 'mvim', +}; + +const COMMON_EDITORS_LINUX = { + atom: 'atom', + Brackets: 'brackets', + code: 'code', + 'code-insiders': 'code-insiders', + emacs: 'emacs', + 'idea.sh': 'idea', + 'phpstorm.sh': 'phpstorm', + 'pycharm.sh': 'pycharm', + 'rubymine.sh': 'rubymine', + sublime_text: 'sublime_text', + vim: 'vim', + 'webstorm.sh': 'webstorm', }; const COMMON_EDITORS_WIN = [ 'Brackets.exe', 'Code.exe', + 'Code - Insiders.exe', 'atom.exe', 'sublime_text.exe', 'notepad++.exe', @@ -83,7 +103,13 @@ function addWorkspaceToArgumentsIfExists(args, workspace) { return args; } -function getArgumentsForLineNumber(editor, fileName, lineNumber, workspace) { +function getArgumentsForLineNumber( + editor, + fileName, + lineNumber, + colNumber, + workspace +) { const editorBasename = path.basename(editor).replace(/\.(exe|cmd|bat)$/i, ''); switch (editorBasename) { case 'atom': @@ -92,25 +118,29 @@ function getArgumentsForLineNumber(editor, fileName, lineNumber, workspace) { case 'subl': case 'sublime': case 'sublime_text': + return [fileName + ':' + lineNumber + ':' + colNumber]; case 'wstorm': case 'charm': return [fileName + ':' + lineNumber]; case 'notepad++': - return ['-n' + lineNumber, fileName]; + return ['-n' + lineNumber, '-c' + colNumber, fileName]; case 'vim': case 'mvim': case 'joe': + return ['+' + lineNumber, fileName]; case 'emacs': case 'emacsclient': - return ['+' + lineNumber, fileName]; + return ['+' + lineNumber + ':' + colNumber, fileName]; case 'rmate': case 'mate': case 'mine': return ['--line', lineNumber, fileName]; case 'code': case 'Code': + case 'code-insiders': + case 'Code - Insiders': return addWorkspaceToArgumentsIfExists( - ['-g', fileName + ':' + lineNumber], + ['-g', fileName + ':' + lineNumber + ':' + colNumber], workspace ); case 'appcode': @@ -144,8 +174,9 @@ function guessEditor() { return shellQuote.parse(process.env.REACT_EDITOR); } - // Using `ps x` on OSX or `Get-Process` on Windows we can find out which editor is currently running. - // Potentially we could use similar technique for Linux + // We can find out which editor is currently running by: + // `ps x` on macOS and Linux + // `Get-Process` on Windows try { if (process.platform === 'darwin') { const output = child_process.execSync('ps x').toString(); @@ -176,6 +207,20 @@ function guessEditor() { return [fullProcessPath]; } } + } else if (process.platform === 'linux') { + // --no-heading No header line + // x List all processes owned by you + // -o comm Need only names column + const output = child_process + .execSync('ps x --no-heading -o comm --sort=comm') + .toString(); + const processNames = Object.keys(COMMON_EDITORS_LINUX); + for (let i = 0; i < processNames.length; i++) { + const processName = processNames[i]; + if (output.indexOf(processName) !== -1) { + return [COMMON_EDITORS_LINUX[processName]]; + } + } } } catch (error) { // Ignore... @@ -218,23 +263,35 @@ function printInstructions(fileName, errorMessage) { } let _childProcess = null; -function launchEditor(fileName, lineNumber) { +function launchEditor(fileName, lineNumber, colNumber) { if (!fs.existsSync(fileName)) { return; } // Sanitize lineNumber to prevent malicious use on win32 // via: https://github.com/nodejs/node/blob/c3bb4b1aa5e907d489619fb43d233c3336bfc03d/lib/child_process.js#L333 - if (lineNumber && isNaN(lineNumber)) { + // and it should be a positive integer + if (!(Number.isInteger(lineNumber) && lineNumber > 0)) { return; } + // colNumber is optional, but should be a positive integer too + // default is 1 + if (!(Number.isInteger(colNumber) && colNumber > 0)) { + colNumber = 1; + } + let [editor, ...args] = guessEditor(); + if (!editor) { printInstructions(fileName, null); return; } + if (editor.toLowerCase() === 'none') { + return; + } + if ( process.platform === 'linux' && fileName.startsWith('/mnt/') && @@ -252,7 +309,13 @@ function launchEditor(fileName, lineNumber) { let workspace = null; if (lineNumber) { args = args.concat( - getArgumentsForLineNumber(editor, fileName, lineNumber, workspace) + getArgumentsForLineNumber( + editor, + fileName, + lineNumber, + colNumber, + workspace + ) ); } else { args.push(fileName); diff --git a/packages/react-dev-utils/launchEditorEndpoint.js b/packages/react-dev-utils/launchEditorEndpoint.js new file mode 100644 index 00000000000..99b5935d9aa --- /dev/null +++ b/packages/react-dev-utils/launchEditorEndpoint.js @@ -0,0 +1,10 @@ +/** + * 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'; + +// TODO: we might want to make this injectable to support DEV-time non-root URLs. +module.exports = '/__open-stack-frame-in-editor'; diff --git a/packages/react-dev-utils/noopServiceWorkerMiddleware.js b/packages/react-dev-utils/noopServiceWorkerMiddleware.js index b6cee735065..41566dd7fa8 100644 --- a/packages/react-dev-utils/noopServiceWorkerMiddleware.js +++ b/packages/react-dev-utils/noopServiceWorkerMiddleware.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; diff --git a/packages/react-dev-utils/openBrowser.js b/packages/react-dev-utils/openBrowser.js index 4f5700125b4..cb9f32c6a85 100644 --- a/packages/react-dev-utils/openBrowser.js +++ b/packages/react-dev-utils/openBrowser.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; diff --git a/packages/react-dev-utils/openChrome.applescript b/packages/react-dev-utils/openChrome.applescript index 0f56027213b..3b1b5a29d3f 100644 --- a/packages/react-dev-utils/openChrome.applescript +++ b/packages/react-dev-utils/openChrome.applescript @@ -1,10 +1,8 @@ (* Copyright (c) 2015-present, Facebook, Inc. -All rights reserved. -This source code is licensed under the BSD-style license found in the --- LICENSE file in the root directory of this source tree. An additional grant -of patent rights can be found in the PATENTS file in the same directory. +This source code is licensed under the MIT license found in the +LICENSE file in the root directory of this source tree. *) property targetTab: null diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 0e4e135f89f..8adff62faa9 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -1,9 +1,9 @@ { "name": "react-dev-utils", - "version": "3.1.0", + "version": "5.0.1", "description": "Webpack utilities used by Create React App", "repository": "facebookincubator/create-react-app", - "license": "BSD-3-Clause", + "license": "MIT", "bugs": { "url": "https://github.com/facebookincubator/create-react-app/issues" }, @@ -11,19 +11,21 @@ "node": ">=6" }, "files": [ - "ansiHTML.js", "checkRequiredFiles.js", "clearConsole.js", "crashOverlay.js", "crossSpawn.js", "eslintFormatter.js", + "errorOverlayMiddleware.js", "FileSizeReporter.js", "printBuildError.js", "formatWebpackMessages.js", "getProcessForPort.js", + "ignoredFiles.js", "inquirer.js", "InterpolateHtmlPlugin.js", "launchEditor.js", + "launchEditorEndpoint.js", "ModuleScopePlugin.js", "noopServiceWorkerMiddleware.js", "openBrowser.js", @@ -34,24 +36,29 @@ "webpackHotDevClient.js" ], "dependencies": { - "address": "1.0.2", - "anser": "1.4.1", - "babel-code-frame": "6.22.0", + "address": "1.0.3", + "babel-code-frame": "6.26.0", "chalk": "1.1.3", "cross-spawn": "5.1.0", - "detect-port-alt": "1.1.3", + "detect-port-alt": "1.1.6", "escape-string-regexp": "1.0.5", - "filesize": "3.5.10", + "filesize": "3.5.11", "global-modules": "1.0.0", "gzip-size": "3.0.0", - "html-entities": "1.2.1", - "inquirer": "3.2.1", + "inquirer": "3.3.0", "is-root": "1.0.0", - "opn": "5.1.0", + "opn": "5.2.0", + "react-error-overlay": "^4.0.0", "recursive-readdir": "2.2.1", "shell-quote": "1.6.1", "sockjs-client": "1.1.4", "strip-ansi": "3.0.1", "text-table": "0.2.0" + }, + "devDependencies": { + "jest": "20.0.4" + }, + "scripts": { + "test": "jest" } } diff --git a/packages/react-dev-utils/printBuildError.js b/packages/react-dev-utils/printBuildError.js index eadfff471b9..26e29135646 100644 --- a/packages/react-dev-utils/printBuildError.js +++ b/packages/react-dev-utils/printBuildError.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; diff --git a/packages/react-dev-utils/printHostingInstructions.js b/packages/react-dev-utils/printHostingInstructions.js index 2ef25767aa2..4f761dfb0d0 100644 --- a/packages/react-dev-utils/printHostingInstructions.js +++ b/packages/react-dev-utils/printHostingInstructions.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; @@ -21,118 +19,108 @@ function printHostingInstructions( buildFolder, useYarn ) { - const publicPathname = url.parse(publicPath).pathname; - if (publicUrl && publicUrl.indexOf('.github.io/') !== -1) { + if (publicUrl && publicUrl.includes('.github.io/')) { // "homepage": "http://user.github.io/project" + const publicPathname = url.parse(publicPath).pathname; + const hasDeployScript = typeof appPackage.scripts.deploy !== 'undefined'; + printBaseMessage(buildFolder, publicPathname); + + printDeployInstructions(publicUrl, hasDeployScript, useYarn); + } else if (publicPath !== '/') { + // "homepage": "http://mywebsite.com/project" + printBaseMessage(buildFolder, publicPath); + } else { + // "homepage": "http://mywebsite.com" + // or no homepage + printBaseMessage(buildFolder, publicUrl); + + printStaticServerInstructions(buildFolder, useYarn); + } + console.log(); + console.log('Find out more about deployment here:'); + console.log(); + console.log(` ${chalk.yellow('http://bit.ly/2vY88Kr')}`); + console.log(); +} + +function printBaseMessage(buildFolder, hostingLocation) { + console.log( + `The project was built assuming it is hosted at ${chalk.green( + hostingLocation || 'the server root' + )}.` + ); + console.log( + `You can control this with the ${chalk.green( + 'homepage' + )} field in your ${chalk.cyan('package.json')}.` + ); + + if (!hostingLocation) { + console.log('For example, add this to build it for GitHub Pages:'); + console.log(); + console.log( - `The project was built assuming it is hosted at ${chalk.green( - publicPathname - )}.` - ); - console.log( - `You can control this with the ${chalk.green( - 'homepage' - )} field in your ${chalk.cyan('package.json')}.` + ` ${chalk.green('"homepage"')} ${chalk.cyan(':')} ${chalk.green( + '"http://myname.github.io/myapp"' + )}${chalk.cyan(',')}` ); - console.log(); - console.log(`The ${chalk.cyan('build')} folder is ready to be deployed.`); - console.log(`To publish it at ${chalk.green(publicUrl)}, run:`); - // If script deploy has been added to package.json, skip the instructions - if (typeof appPackage.scripts.deploy === 'undefined') { - console.log(); - if (useYarn) { - console.log(` ${chalk.cyan('yarn')} add --dev gh-pages`); - } else { - console.log(` ${chalk.cyan('npm')} install --save-dev gh-pages`); - } - console.log(); - console.log( - `Add the following script in your ${chalk.cyan('package.json')}.` - ); - console.log(); - console.log(` ${chalk.dim('// ...')}`); - console.log(` ${chalk.yellow('"scripts"')}: {`); - console.log(` ${chalk.dim('// ...')}`); - console.log( - ` ${chalk.yellow('"predeploy"')}: ${chalk.yellow( - '"npm run build",' - )}` - ); - console.log( - ` ${chalk.yellow('"deploy"')}: ${chalk.yellow( - '"gh-pages -d build"' - )}` - ); - console.log(' }'); - console.log(); - console.log('Then run:'); + } + console.log(); + console.log(`The ${chalk.cyan(buildFolder)} folder is ready to be deployed.`); +} + +function printDeployInstructions(publicUrl, hasDeployScript, useYarn) { + console.log(`To publish it at ${chalk.green(publicUrl)}, run:`); + console.log(); + + // If script deploy has been added to package.json, skip the instructions + if (!hasDeployScript) { + if (useYarn) { + console.log(` ${chalk.cyan('yarn')} add --dev gh-pages`); + } else { + console.log(` ${chalk.cyan('npm')} install --save-dev gh-pages`); } console.log(); - console.log(` ${chalk.cyan(useYarn ? 'yarn' : 'npm')} run deploy`); + + console.log( + `Add the following script in your ${chalk.cyan('package.json')}.` + ); console.log(); - } else if (publicPath !== '/') { - // "homepage": "http://mywebsite.com/project" + + console.log(` ${chalk.dim('// ...')}`); + console.log(` ${chalk.yellow('"scripts"')}: {`); + console.log(` ${chalk.dim('// ...')}`); console.log( - `The project was built assuming it is hosted at ${chalk.green( - publicPath - )}.` + ` ${chalk.yellow('"predeploy"')}: ${chalk.yellow( + '"npm run build",' + )}` ); console.log( - `You can control this with the ${chalk.green( - 'homepage' - )} field in your ${chalk.cyan('package.json')}.` + ` ${chalk.yellow('"deploy"')}: ${chalk.yellow( + '"gh-pages -d build"' + )}` ); + console.log(' }'); console.log(); - console.log(`The ${chalk.cyan('build')} folder is ready to be deployed.`); + + console.log('Then run:'); console.log(); - } else { - if (publicUrl) { - // "homepage": "http://mywebsite.com" - console.log( - `The project was built assuming it is hosted at ${chalk.green( - publicUrl - )}.` - ); - console.log( - `You can control this with the ${chalk.green( - 'homepage' - )} field in your ${chalk.cyan('package.json')}.` - ); - console.log(); + } + console.log(` ${chalk.cyan(useYarn ? 'yarn' : 'npm')} run deploy`); +} + +function printStaticServerInstructions(buildFolder, useYarn) { + console.log('You may serve it with a static server:'); + console.log(); + + if (!fs.existsSync(`${globalModules}/serve`)) { + if (useYarn) { + console.log(` ${chalk.cyan('yarn')} global add serve`); } else { - // no homepage - console.log( - 'The project was built assuming it is hosted at the server root.' - ); - console.log( - `To override this, specify the ${chalk.green( - 'homepage' - )} in your ${chalk.cyan('package.json')}.` - ); - console.log('For example, add this to build it for GitHub Pages:'); - console.log(); - console.log( - ` ${chalk.green('"homepage"')} ${chalk.cyan(':')} ${chalk.green( - '"http://myname.github.io/myapp"' - )}${chalk.cyan(',')}` - ); - console.log(); + console.log(` ${chalk.cyan('npm')} install -g serve`); } - console.log( - `The ${chalk.cyan(buildFolder)} folder is ready to be deployed.` - ); - console.log('You may serve it with a static server:'); - console.log(); - if (!fs.existsSync(`${globalModules}/serve`)) { - if (useYarn) { - console.log(` ${chalk.cyan('yarn')} global add serve`); - } else { - console.log(` ${chalk.cyan('npm')} install -g serve`); - } - } - console.log(` ${chalk.cyan('serve')} -s ${buildFolder}`); - console.log(); } + console.log(` ${chalk.cyan('serve')} -s ${buildFolder}`); } module.exports = printHostingInstructions; diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js index f2f206a5cd2..cbbc80029ae 100644 --- a/packages/react-dev-utils/webpackHotDevClient.js +++ b/packages/react-dev-utils/webpackHotDevClient.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; @@ -21,143 +19,44 @@ var SockJS = require('sockjs-client'); var stripAnsi = require('strip-ansi'); var url = require('url'); +var launchEditorEndpoint = require('./launchEditorEndpoint'); var formatWebpackMessages = require('./formatWebpackMessages'); -var ansiHTML = require('./ansiHTML'); - -function createOverlayIframe(onIframeLoad) { - var iframe = document.createElement('iframe'); - iframe.id = 'react-dev-utils-webpack-hot-dev-client-overlay'; - iframe.src = 'about:blank'; - iframe.style.position = 'fixed'; - iframe.style.left = 0; - iframe.style.top = 0; - iframe.style.right = 0; - iframe.style.bottom = 0; - iframe.style.width = '100vw'; - iframe.style.height = '100vh'; - iframe.style.border = 'none'; - iframe.style.zIndex = 2147483647; - iframe.onload = onIframeLoad; - return iframe; -} - -function addOverlayDivTo(iframe) { - // TODO: unify these styles with react-error-overlay - iframe.contentDocument.body.style.margin = 0; - iframe.contentDocument.body.style.maxWidth = '100vw'; - - var outerDiv = iframe.contentDocument.createElement('div'); - outerDiv.id = 'react-dev-utils-webpack-hot-dev-client-overlay-div'; - outerDiv.style.width = '100%'; - outerDiv.style.height = '100%'; - outerDiv.style.boxSizing = 'border-box'; - outerDiv.style.textAlign = 'center'; - outerDiv.style.backgroundColor = 'rgb(255, 255, 255)'; - - var div = iframe.contentDocument.createElement('div'); - div.style.position = 'relative'; - div.style.display = 'inline-flex'; - div.style.flexDirection = 'column'; - div.style.height = '100%'; - div.style.width = '1024px'; - div.style.maxWidth = '100%'; - div.style.overflowX = 'hidden'; - div.style.overflowY = 'auto'; - div.style.padding = '0.5rem'; - div.style.boxSizing = 'border-box'; - div.style.textAlign = 'left'; - div.style.fontFamily = 'Consolas, Menlo, monospace'; - div.style.fontSize = '11px'; - div.style.whiteSpace = 'pre-wrap'; - div.style.wordBreak = 'break-word'; - div.style.lineHeight = '1.5'; - div.style.color = 'rgb(41, 50, 56)'; - - outerDiv.appendChild(div); - iframe.contentDocument.body.appendChild(outerDiv); - return div; -} - -function overlayHeaderStyle() { - return ( - 'font-size: 2em;' + - 'font-family: sans-serif;' + - 'color: rgb(206, 17, 38);' + - 'white-space: pre-wrap;' + - 'margin: 0 2rem 0.75rem 0px;' + - 'flex: 0 0 auto;' + - 'max-height: 35%;' + - 'overflow: auto;' +var ErrorOverlay = require('react-error-overlay'); + +ErrorOverlay.setEditorHandler(function editorHandler(errorLocation) { + // Keep this sync with errorOverlayMiddleware.js + fetch( + launchEditorEndpoint + + '?fileName=' + + window.encodeURIComponent(errorLocation.fileName) + + '&lineNumber=' + + window.encodeURIComponent(errorLocation.lineNumber || 1) + + '&colNumber=' + + window.encodeURIComponent(errorLocation.colNumber || 1) ); -} - -var overlayIframe = null; -var overlayDiv = null; -var lastOnOverlayDivReady = null; - -function ensureOverlayDivExists(onOverlayDivReady) { - if (overlayDiv) { - // Everything is ready, call the callback right away. - onOverlayDivReady(overlayDiv); - return; - } - - // Creating an iframe may be asynchronous so we'll schedule the callback. - // In case of multiple calls, last callback wins. - lastOnOverlayDivReady = onOverlayDivReady; - - if (overlayIframe) { - // We're already creating it. - return; - } - - // Create iframe and, when it is ready, a div inside it. - overlayIframe = createOverlayIframe(function onIframeLoad() { - overlayDiv = addOverlayDivTo(overlayIframe); - // Now we can talk! - lastOnOverlayDivReady(overlayDiv); - }); - - // Zalgo alert: onIframeLoad() will be called either synchronously - // or asynchronously depending on the browser. - // We delay adding it so `overlayIframe` is set when `onIframeLoad` fires. - document.body.appendChild(overlayIframe); -} - -function showErrorOverlay(message) { - ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) { - // TODO: unify this with our runtime overlay - overlayDiv.innerHTML = - '
Failed to compile
' + - '
' +
-      '' +
-      ansiHTML(message) +
-      '
' + - '
' + - 'This error occurred during the build time and cannot be dismissed.
'; +}); + +// We need to keep track of if there has been a runtime error. +// Essentially, we cannot guarantee application state was not corrupted by the +// runtime error. To prevent confusing behavior, we forcibly reload the entire +// application. This is handled below when we are notified of a compile (code +// change). +// See https://github.com/facebookincubator/create-react-app/issues/3096 +var hadRuntimeError = false; +ErrorOverlay.startReportingRuntimeErrors({ + onError: function() { + hadRuntimeError = true; + }, + filename: '/static/js/bundle.js', +}); + +if (module.hot && typeof module.hot.dispose === 'function') { + module.hot.dispose(function() { + // TODO: why do we need this? + ErrorOverlay.stopReportingRuntimeErrors(); }); } -function destroyErrorOverlay() { - if (!overlayDiv) { - // It is not there in the first place. - return; - } - - // Clean up and reset internal state. - document.body.removeChild(overlayIframe); - overlayDiv = null; - overlayIframe = null; - lastOnOverlayDivReady = null; -} - // Connect to WebpackDevServer via a socket. var connection = new SockJS( url.format({ @@ -205,9 +104,9 @@ function handleSuccess() { // Attempt to apply hot updates or reload. if (isHotUpdate) { tryApplyUpdates(function onHotUpdateSuccess() { - // Only destroy it when we're sure it's a hot update. + // Only dismiss it when we're sure it's a hot update. // Otherwise it would flicker right before the reload. - destroyErrorOverlay(); + ErrorOverlay.dismissBuildError(); }); } } @@ -247,9 +146,9 @@ function handleWarnings(warnings) { // Only print warnings if we aren't refreshing the page. // Otherwise they'll disappear right away anyway. printWarnings(); - // Only destroy it when we're sure it's a hot update. + // Only dismiss it when we're sure it's a hot update. // Otherwise it would flicker right before the reload. - destroyErrorOverlay(); + ErrorOverlay.dismissBuildError(); }); } else { // Print initial warnings immediately. @@ -271,7 +170,7 @@ function handleErrors(errors) { }); // Only show the first error. - showErrorOverlay(formatted.errors[0]); + ErrorOverlay.reportBuildError(formatted.errors[0]); // Also log them to the console. if (typeof console !== 'undefined' && typeof console.error === 'function') { @@ -342,7 +241,7 @@ function tryApplyUpdates(onHotUpdateSuccess) { } function handleApplyUpdates(err, updatedModules) { - if (err || !updatedModules) { + if (err || !updatedModules || hadRuntimeError) { window.location.reload(); return; } diff --git a/packages/react-error-overlay/.flowconfig b/packages/react-error-overlay/.flowconfig index 261b8646fc3..c976167c2a9 100644 --- a/packages/react-error-overlay/.flowconfig +++ b/packages/react-error-overlay/.flowconfig @@ -1,8 +1,15 @@ -[ignore] - [include] -src/**/*.js +/src/**/*.js + +[ignore] +.*/node_modules/.* +.*/.git/.* +.*/__test__/.* +.*/fixtures/.* [libs] +flow/ [options] +module.file_ext=.js +sharedmemory.hash_table_pow=19 diff --git a/packages/react-error-overlay/.gitattributes b/packages/react-error-overlay/.gitattributes new file mode 100644 index 00000000000..cbdcbbc258e --- /dev/null +++ b/packages/react-error-overlay/.gitattributes @@ -0,0 +1 @@ +*.js text eol=lf diff --git a/packages/react-error-overlay/build.js b/packages/react-error-overlay/build.js new file mode 100644 index 00000000000..592da141ffe --- /dev/null +++ b/packages/react-error-overlay/build.js @@ -0,0 +1,95 @@ +/** + * 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. + */ +const webpack = require('webpack'); +const chalk = require('chalk'); +const webpackConfig = require('./webpack.config.js'); +const iframeWebpackConfig = require('./webpack.config.iframe.js'); +const rimraf = require('rimraf'); +const chokidar = require('chokidar'); + +const args = process.argv.slice(2); +const watchMode = args[0] === '--watch' || args[0] === '-w'; + +const isCI = + process.env.CI && + (typeof process.env.CI !== 'string' || + process.env.CI.toLowerCase() !== 'false'); + +function build(config, name, callback) { + console.log(chalk.cyan('Compiling ' + name)); + webpack(config).run((error, stats) => { + if (error) { + console.log(chalk.red('Failed to compile.')); + console.log(error.message || error); + console.log(); + } + + if (stats.compilation.errors.length) { + console.log(chalk.red('Failed to compile.')); + console.log(stats.toString({ all: false, errors: true })); + } + + if (stats.compilation.warnings.length) { + console.log(chalk.yellow('Compiled with warnings.')); + console.log(stats.toString({ all: false, warnings: true })); + } + + // Fail the build if running in a CI server + if ( + error || + stats.compilation.errors.length || + stats.compilation.warnings.length + ) { + isCI && process.exit(1); + return; + } + + console.log( + stats.toString({ colors: true, modules: false, version: false }) + ); + console.log(); + + callback(stats); + }); +} + +function runBuildSteps() { + build(iframeWebpackConfig, 'iframeScript.js', () => { + build(webpackConfig, 'index.js', () => { + console.log(chalk.bold.green('Compiled successfully!\n\n')); + }); + }); +} + +function setupWatch() { + const watcher = chokidar.watch('./src', { + ignoreInitial: true, + }); + + watcher.on('change', runBuildSteps); + watcher.on('add', runBuildSteps); + + watcher.on('ready', () => { + runBuildSteps(); + }); + + process.on('SIGINT', function() { + watcher.close(); + process.exit(0); + }); + + watcher.on('error', error => { + console.error('Watcher failure', error); + process.exit(1); + }); +} + +// Clean up lib folder +rimraf('lib/', () => { + console.log('Cleaned up the lib folder.\n'); + watchMode ? setupWatch() : runBuildSteps(); +}); diff --git a/packages/react-error-overlay/fixtures/bundle.json b/packages/react-error-overlay/fixtures/bundle.json index 7dfd31f5863..16670f6231f 100644 --- a/packages/react-error-overlay/fixtures/bundle.json +++ b/packages/react-error-overlay/fixtures/bundle.json @@ -240,11 +240,11 @@ ] }, { - "functionName": "Object.batchedUpdates", + "functionName": "batchedUpdates", "fileName": "http://localhost:3000/static/js/bundle.js", "lineNumber": 33900, "columnNumber": 26, - "_originalFunctionName": "Object.batchedUpdates", + "_originalFunctionName": "batchedUpdates", "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactDefaultBatchingStrategy.js", "_originalLineNumber": 62, "_originalColumnNumber": 0, @@ -264,11 +264,11 @@ ] }, { - "functionName": "Object.batchedUpdates", + "functionName": "batchedUpdates", "fileName": "http://localhost:3000/static/js/bundle.js", "lineNumber": 2181, "columnNumber": 27, - "_originalFunctionName": "Object.batchedUpdates", + "_originalFunctionName": "batchedUpdates", "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactUpdates.js", "_originalLineNumber": 97, "_originalColumnNumber": 0, @@ -288,11 +288,11 @@ ] }, { - "functionName": "Object._renderNewRootComponent", + "functionName": "_renderNewRootComponent", "fileName": "http://localhost:3000/static/js/bundle.js", "lineNumber": 14398, "columnNumber": 18, - "_originalFunctionName": "Object._renderNewRootComponent", + "_originalFunctionName": "_renderNewRootComponent", "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactMount.js", "_originalLineNumber": 320, "_originalColumnNumber": 0, @@ -312,11 +312,11 @@ ] }, { - "functionName": "Object._renderSubtreeIntoContainer", + "functionName": "_renderSubtreeIntoContainer", "fileName": "http://localhost:3000/static/js/bundle.js", "lineNumber": 14479, "columnNumber": 32, - "_originalFunctionName": "Object._renderSubtreeIntoContainer", + "_originalFunctionName": "_renderSubtreeIntoContainer", "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactMount.js", "_originalLineNumber": 401, "_originalColumnNumber": 0, @@ -336,11 +336,11 @@ ] }, { - "functionName": "Object.render", + "functionName": "render", "fileName": "http://localhost:3000/static/js/bundle.js", "lineNumber": 14500, "columnNumber": 23, - "_originalFunctionName": "Object.render", + "_originalFunctionName": "render", "_originalFileName": "webpack:///packages/react-scripts/~/react-dom/lib/ReactMount.js", "_originalLineNumber": 422, "_originalColumnNumber": 0, @@ -360,11 +360,11 @@ ] }, { - "functionName": "Object.friendlySyntaxErrorLabel", + "functionName": null, "fileName": "http://localhost:3000/static/js/bundle.js", "lineNumber": 17287, "columnNumber": 20, - "_originalFunctionName": "Object.friendlySyntaxErrorLabel", + "_originalFunctionName": null, "_originalFileName": "webpack:///packages/react-scripts/template/src/index.js", "_originalLineNumber": 6, "_originalColumnNumber": 0, @@ -432,11 +432,11 @@ ] }, { - "functionName": "Object.", + "functionName": null, "fileName": "http://localhost:3000/static/js/bundle.js", "lineNumber": 41219, "columnNumber": 18, - "_originalFunctionName": "Object.", + "_originalFunctionName": null, "_originalFileName": null, "_originalLineNumber": null, "_originalColumnNumber": null, diff --git a/packages/react-error-overlay/flow/env.js b/packages/react-error-overlay/flow/env.js new file mode 100644 index 00000000000..12b151f5e4b --- /dev/null +++ b/packages/react-error-overlay/flow/env.js @@ -0,0 +1,19 @@ +declare module 'anser' { + declare module.exports: any; +} + +declare module 'babel-code-frame' { + declare module.exports: any; +} + +declare module 'html-entities' { + declare module.exports: any; +} + +declare module 'settle-promise' { + declare module.exports: any; +} + +declare module 'source-map' { + declare module.exports: any; +} diff --git a/packages/react-error-overlay/middleware.js b/packages/react-error-overlay/middleware.js deleted file mode 100644 index d4fd0d399f1..00000000000 --- a/packages/react-error-overlay/middleware.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ -'use strict'; - -const launchEditor = require('react-dev-utils/launchEditor'); - -module.exports = function createLaunchEditorMiddleware() { - return function launchEditorMiddleware(req, res, next) { - // Keep this in sync with react-error-overlay - if (req.url.startsWith('/__open-stack-frame-in-editor')) { - launchEditor(req.query.fileName, req.query.lineNumber); - res.end(); - } else { - next(); - } - }; -}; diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index 5a9e864c50f..87099dd5e82 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -1,17 +1,17 @@ { "name": "react-error-overlay", - "version": "1.0.10", + "version": "4.0.0", "description": "An overlay for displaying stack frames.", "main": "lib/index.js", "scripts": { "prepublishOnly": "npm run build:prod && npm test", - "start": "cross-env NODE_ENV=development npm run build -- --watch", - "test": "flow && jest", - "build": "babel src/ -d lib/", - "build:prod": "cross-env NODE_ENV=production babel src/ -d lib/" + "start": "cross-env NODE_ENV=development node build.js --watch", + "test": "cross-env NODE_ENV=test jest", + "build": "cross-env NODE_ENV=development node build.js", + "build:prod": "cross-env NODE_ENV=production node build.js" }, "repository": "facebookincubator/create-react-app", - "license": "BSD-3-Clause", + "license": "MIT", "bugs": { "url": "https://github.com/facebookincubator/create-react-app/issues" }, @@ -27,31 +27,38 @@ ], "author": "Joe Haddad ", "files": [ - "lib/", - "middleware.js" + "lib/index.js" ], - "dependencies": { - "anser": "1.4.1", - "babel-code-frame": "6.22.0", - "babel-runtime": "6.23.0", - "react-dev-utils": "^3.1.0", - "settle-promise": "1.0.0", - "source-map": "0.5.6" - }, "devDependencies": { - "babel-cli": "6.24.1", + "anser": "1.4.4", + "babel-code-frame": "6.26.0", + "babel-core": "^6.26.0", "babel-eslint": "7.2.3", - "babel-preset-react-app": "^3.0.2", + "babel-loader": "^7.1.2", + "babel-preset-react-app": "^3.1.1", + "babel-runtime": "6.26.0", + "chalk": "^2.1.0", + "chokidar": "^1.7.0", "cross-env": "5.0.5", "eslint": "4.4.1", - "eslint-config-react-app": "^2.0.0", + "eslint-config-react-app": "^2.1.0", "eslint-plugin-flowtype": "2.35.0", "eslint-plugin-import": "2.7.0", "eslint-plugin-jsx-a11y": "5.1.1", "eslint-plugin-react": "7.1.0", - "flow-bin": "0.52.0", + "flow-bin": "^0.63.1", + "html-entities": "1.2.1", "jest": "20.0.4", - "jest-fetch-mock": "1.2.1" + "jest-fetch-mock": "1.2.1", + "object-assign": "4.1.1", + "promise": "8.0.1", + "raw-loader": "^0.5.1", + "react": "^16.0.0", + "react-dom": "^16.0.0", + "rimraf": "^2.6.1", + "settle-promise": "1.0.0", + "source-map": "0.5.6", + "webpack": "^3.6.0" }, "jest": { "setupFiles": [ diff --git a/packages/react-error-overlay/src/__tests__/extract-source-map.js b/packages/react-error-overlay/src/__tests__/extract-source-map.js index 85c30accdee..b47f5ab5f6d 100644 --- a/packages/react-error-overlay/src/__tests__/extract-source-map.js +++ b/packages/react-error-overlay/src/__tests__/extract-source-map.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ import { extractSourceMapUrl } from '../utils/getSourceMap'; diff --git a/packages/react-error-overlay/src/__tests__/get-source-map.js b/packages/react-error-overlay/src/__tests__/get-source-map.js index 29906926667..27c6d5f7893 100644 --- a/packages/react-error-overlay/src/__tests__/get-source-map.js +++ b/packages/react-error-overlay/src/__tests__/get-source-map.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ import { getSourceMap } from '../utils/getSourceMap'; diff --git a/packages/react-error-overlay/src/__tests__/lines-around.js b/packages/react-error-overlay/src/__tests__/lines-around.js index 0317bd47b5e..64595df302a 100644 --- a/packages/react-error-overlay/src/__tests__/lines-around.js +++ b/packages/react-error-overlay/src/__tests__/lines-around.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ import { getLinesAround } from '../utils/getLinesAround'; diff --git a/packages/react-error-overlay/src/__tests__/mapper.js b/packages/react-error-overlay/src/__tests__/mapper.js index 169bf6c592c..bd733487f8d 100644 --- a/packages/react-error-overlay/src/__tests__/mapper.js +++ b/packages/react-error-overlay/src/__tests__/mapper.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ import { map } from '../utils/mapper'; diff --git a/packages/react-error-overlay/src/__tests__/parser/chrome.js b/packages/react-error-overlay/src/__tests__/parser/chrome.js index caf95a6fcff..651f584ccda 100644 --- a/packages/react-error-overlay/src/__tests__/parser/chrome.js +++ b/packages/react-error-overlay/src/__tests__/parser/chrome.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ import { parse } from '../../utils/parser'; diff --git a/packages/react-error-overlay/src/__tests__/parser/firefox.js b/packages/react-error-overlay/src/__tests__/parser/firefox.js index 4f1d19ac2a1..8aa0f4d6cc6 100644 --- a/packages/react-error-overlay/src/__tests__/parser/firefox.js +++ b/packages/react-error-overlay/src/__tests__/parser/firefox.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ import { parse } from '../../utils/parser'; diff --git a/packages/react-error-overlay/src/__tests__/parser/generic.js b/packages/react-error-overlay/src/__tests__/parser/generic.js index b58c537d365..32bade9311f 100644 --- a/packages/react-error-overlay/src/__tests__/parser/generic.js +++ b/packages/react-error-overlay/src/__tests__/parser/generic.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ import { parse } from '../../utils/parser'; diff --git a/packages/react-error-overlay/src/__tests__/parser/react.js b/packages/react-error-overlay/src/__tests__/parser/react.js index 907fae23994..e7dcc07cbc5 100644 --- a/packages/react-error-overlay/src/__tests__/parser/react.js +++ b/packages/react-error-overlay/src/__tests__/parser/react.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ import { parse } from '../../utils/parser'; diff --git a/packages/react-error-overlay/src/__tests__/parser/safari.js b/packages/react-error-overlay/src/__tests__/parser/safari.js index 69ecf6c78ee..74d169d99de 100644 --- a/packages/react-error-overlay/src/__tests__/parser/safari.js +++ b/packages/react-error-overlay/src/__tests__/parser/safari.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ import { parse } from '../../utils/parser'; diff --git a/packages/react-error-overlay/src/__tests__/script-lines.js b/packages/react-error-overlay/src/__tests__/script-lines.js index e26e8d4f893..ec5ff0b0fc3 100644 --- a/packages/react-error-overlay/src/__tests__/script-lines.js +++ b/packages/react-error-overlay/src/__tests__/script-lines.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ import { ScriptLine } from '../utils/stack-frame'; diff --git a/packages/react-error-overlay/src/__tests__/setupJest.js b/packages/react-error-overlay/src/__tests__/setupJest.js index 496826f2c80..91757b4556c 100644 --- a/packages/react-error-overlay/src/__tests__/setupJest.js +++ b/packages/react-error-overlay/src/__tests__/setupJest.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ global.fetch = require('jest-fetch-mock'); diff --git a/packages/react-error-overlay/src/__tests__/stack-frame.js b/packages/react-error-overlay/src/__tests__/stack-frame.js index dc6a01b4a06..af1f05e0ab2 100644 --- a/packages/react-error-overlay/src/__tests__/stack-frame.js +++ b/packages/react-error-overlay/src/__tests__/stack-frame.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ import { StackFrame } from '../utils/stack-frame'; @@ -13,9 +11,9 @@ test('proper empty shape', () => { const empty = new StackFrame(); expect(empty).toMatchSnapshot(); - expect(empty.getFunctionName()).toBe(null); + expect(empty.getFunctionName()).toBe('(anonymous function)'); expect(empty.getSource()).toBe(''); - expect(empty.toString()).toBe(''); + expect(empty.toString()).toBe('(anonymous function)'); }); test('proper full shape', () => { diff --git a/packages/react-error-overlay/src/__tests__/unmapper.js b/packages/react-error-overlay/src/__tests__/unmapper.js index fd162ccac5f..c9dc32a5367 100644 --- a/packages/react-error-overlay/src/__tests__/unmapper.js +++ b/packages/react-error-overlay/src/__tests__/unmapper.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ import { unmap } from '../utils/unmapper'; diff --git a/packages/react-error-overlay/src/components/CloseButton.js b/packages/react-error-overlay/src/components/CloseButton.js new file mode 100644 index 00000000000..ed7006ea36d --- /dev/null +++ b/packages/react-error-overlay/src/components/CloseButton.js @@ -0,0 +1,36 @@ +/** + * 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. + */ + +/* @flow */ +import React from 'react'; +import { black } from '../styles'; + +const closeButtonStyle = { + color: black, + lineHeight: '1rem', + fontSize: '1.5rem', + padding: '1rem', + cursor: 'pointer', + position: 'absolute', + right: 0, + top: 0, +}; + +type CloseCallback = () => void; +function CloseButton({ close }: {| close: CloseCallback |}) { + return ( + + × + + ); +} + +export default CloseButton; diff --git a/packages/react-error-overlay/src/components/CodeBlock.js b/packages/react-error-overlay/src/components/CodeBlock.js new file mode 100644 index 00000000000..3165bb3b028 --- /dev/null +++ b/packages/react-error-overlay/src/components/CodeBlock.js @@ -0,0 +1,52 @@ +/** + * 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. + */ + +/* @flow */ +import React from 'react'; +import { redTransparent, yellowTransparent } from '../styles'; + +const _preStyle = { + display: 'block', + padding: '0.5em', + marginTop: '0.5em', + marginBottom: '0.5em', + overflowX: 'auto', + whiteSpace: 'pre-wrap', + borderRadius: '0.25rem', +}; + +const primaryPreStyle = { + ..._preStyle, + backgroundColor: redTransparent, +}; + +const secondaryPreStyle = { + ..._preStyle, + backgroundColor: yellowTransparent, +}; + +const codeStyle = { + fontFamily: 'Consolas, Menlo, monospace', +}; + +type CodeBlockPropsType = {| + main: boolean, + codeHTML: string, +|}; + +function CodeBlock(props: CodeBlockPropsType) { + const preStyle = props.main ? primaryPreStyle : secondaryPreStyle; + const codeBlock = { __html: props.codeHTML }; + + return ( + 
+      
+
+ ); +} + +export default CodeBlock; diff --git a/packages/react-error-overlay/src/components/Collapsible.js b/packages/react-error-overlay/src/components/Collapsible.js new file mode 100644 index 00000000000..016f3c7a708 --- /dev/null +++ b/packages/react-error-overlay/src/components/Collapsible.js @@ -0,0 +1,86 @@ +/** + * 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. + */ + +/* @flow */ +import React, { Component } from 'react'; +import { black } from '../styles'; + +import type { Element as ReactElement } from 'react'; + +const _collapsibleStyle = { + color: black, + cursor: 'pointer', + border: 'none', + display: 'block', + width: '100%', + textAlign: 'left', + background: '#fff', + fontFamily: 'Consolas, Menlo, monospace', + fontSize: '1em', + padding: '0px', + lineHeight: '1.5', +}; + +const collapsibleCollapsedStyle = { + ..._collapsibleStyle, + marginBottom: '1.5em', +}; + +const collapsibleExpandedStyle = { + ..._collapsibleStyle, + marginBottom: '0.6em', +}; + +type Props = {| + children: ReactElement[], +|}; + +type State = {| + collapsed: boolean, +|}; + +class Collapsible extends Component { + state = { + collapsed: true, + }; + + toggleCollaped = () => { + this.setState(state => ({ + collapsed: !state.collapsed, + })); + }; + + render() { + const count = this.props.children.length; + const collapsed = this.state.collapsed; + return ( +
+ +
+ {this.props.children} + +
+
+ ); + } +} + +export default Collapsible; diff --git a/packages/react-error-overlay/src/components/ErrorOverlay.js b/packages/react-error-overlay/src/components/ErrorOverlay.js new file mode 100644 index 00000000000..da4154002f7 --- /dev/null +++ b/packages/react-error-overlay/src/components/ErrorOverlay.js @@ -0,0 +1,83 @@ +/** + * 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. + */ + +/* @flow */ +import React, { Component } from 'react'; +import { black } from '../styles'; + +import type { Node as ReactNode } from 'react'; + +const overlayStyle = { + position: 'relative', + display: 'inline-flex', + flexDirection: 'column', + height: '100%', + width: '1024px', + maxWidth: '100%', + overflowX: 'hidden', + overflowY: 'auto', + padding: '0.5rem', + boxSizing: 'border-box', + textAlign: 'left', + fontFamily: 'Consolas, Menlo, monospace', + fontSize: '11px', + whiteSpace: 'pre-wrap', + wordBreak: 'break-word', + lineHeight: 1.5, + color: black, +}; + +type Props = {| + children: ReactNode, + shortcutHandler?: (eventKey: string) => void, +|}; + +type State = {| + collapsed: boolean, +|}; + +class ErrorOverlay extends Component { + iframeWindow: window = null; + + getIframeWindow = (element: ?HTMLDivElement) => { + if (element) { + const document = element.ownerDocument; + this.iframeWindow = document.defaultView; + } + }; + + onKeyDown = (e: KeyboardEvent) => { + const { shortcutHandler } = this.props; + if (shortcutHandler) { + shortcutHandler(e.key); + } + }; + + componentDidMount() { + window.addEventListener('keydown', this.onKeyDown); + if (this.iframeWindow) { + this.iframeWindow.addEventListener('keydown', this.onKeyDown); + } + } + + componentWillUnmount() { + window.removeEventListener('keydown', this.onKeyDown); + if (this.iframeWindow) { + this.iframeWindow.removeEventListener('keydown', this.onKeyDown); + } + } + + render() { + return ( +
+ {this.props.children} +
+ ); + } +} + +export default ErrorOverlay; diff --git a/packages/react-error-overlay/src/components/Footer.js b/packages/react-error-overlay/src/components/Footer.js new file mode 100644 index 00000000000..bef53f6c15e --- /dev/null +++ b/packages/react-error-overlay/src/components/Footer.js @@ -0,0 +1,34 @@ +/** + * 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. + */ + +/* @flow */ +import React from 'react'; +import { darkGray } from '../styles'; + +const footerStyle = { + fontFamily: 'sans-serif', + color: darkGray, + marginTop: '0.5rem', + flex: '0 0 auto', +}; + +type FooterPropsType = {| + line1: string, + line2?: string, +|}; + +function Footer(props: FooterPropsType) { + return ( +
+ {props.line1} +
+ {props.line2} +
+ ); +} + +export default Footer; diff --git a/packages/react-error-overlay/src/components/Header.js b/packages/react-error-overlay/src/components/Header.js new file mode 100644 index 00000000000..7b45ceef538 --- /dev/null +++ b/packages/react-error-overlay/src/components/Header.js @@ -0,0 +1,33 @@ +/** + * 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. + */ + +/* @flow */ +import React from 'react'; +import { red } from '../styles'; + +const headerStyle = { + fontSize: '2em', + fontFamily: 'sans-serif', + color: red, + whiteSpace: 'pre-wrap', + // Top bottom margin spaces header + // Right margin revents overlap with close button + margin: '0 2rem 0.75rem 0', + flex: '0 0 auto', + maxHeight: '50%', + overflow: 'auto', +}; + +type HeaderPropType = {| + headerText: string, +|}; + +function Header(props: HeaderPropType) { + return
{props.headerText}
; +} + +export default Header; diff --git a/packages/react-error-overlay/src/components/NavigationBar.js b/packages/react-error-overlay/src/components/NavigationBar.js new file mode 100644 index 00000000000..6fb7b14abb7 --- /dev/null +++ b/packages/react-error-overlay/src/components/NavigationBar.js @@ -0,0 +1,68 @@ +/** + * 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. + */ + +/* @flow */ +import React from 'react'; +import { red, redTransparent } from '../styles'; + +const navigationBarStyle = { + marginBottom: '0.5rem', +}; + +const buttonContainerStyle = { + marginRight: '1em', +}; + +const _navButtonStyle = { + backgroundColor: redTransparent, + color: red, + border: 'none', + borderRadius: '4px', + padding: '3px 6px', + cursor: 'pointer', +}; + +const leftButtonStyle = { + ..._navButtonStyle, + borderTopRightRadius: '0px', + borderBottomRightRadius: '0px', + marginRight: '1px', +}; + +const rightButtonStyle = { + ..._navButtonStyle, + borderTopLeftRadius: '0px', + borderBottomLeftRadius: '0px', +}; + +type Callback = () => void; + +type NavigationBarPropsType = {| + currentError: number, + totalErrors: number, + previous: Callback, + next: Callback, +|}; + +function NavigationBar(props: NavigationBarPropsType) { + const { currentError, totalErrors, previous, next } = props; + return ( +
+ + + + + {`${currentError} of ${totalErrors} errors on the page`} +
+ ); +} + +export default NavigationBar; diff --git a/packages/react-error-overlay/src/components/additional.js b/packages/react-error-overlay/src/components/additional.js deleted file mode 100644 index b573c740634..00000000000 --- a/packages/react-error-overlay/src/components/additional.js +++ /dev/null @@ -1,72 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ - -/* @flow */ -import { applyStyles } from '../utils/dom/css'; -import { - additionalChildStyle, - groupStyle, - groupElemLeft, - groupElemRight, -} from '../styles'; -import { consumeEvent } from '../utils/dom/consumeEvent'; -import { enableTabClick } from '../utils/dom/enableTabClick'; - -type SwitchCallback = (offset: number) => void; -function updateAdditional( - document: Document, - additionalReference: HTMLDivElement, - currentError: number, - totalErrors: number, - switchCallback: SwitchCallback -) { - if (additionalReference.lastChild) { - additionalReference.removeChild(additionalReference.lastChild); - } - - if (totalErrors <= 1) { - return; - } - - const div = document.createElement('div'); - applyStyles(div, additionalChildStyle); - - const group = document.createElement('span'); - applyStyles(group, groupStyle); - - const left = document.createElement('button'); - applyStyles(left, groupElemLeft); - left.addEventListener('click', function(e: MouseEvent) { - consumeEvent(e); - switchCallback(-1); - }); - left.appendChild(document.createTextNode('←')); - enableTabClick(left); - - const right = document.createElement('button'); - applyStyles(right, groupElemRight); - right.addEventListener('click', function(e: MouseEvent) { - consumeEvent(e); - switchCallback(1); - }); - right.appendChild(document.createTextNode('→')); - enableTabClick(right); - - group.appendChild(left); - group.appendChild(right); - div.appendChild(group); - - const text = `${currentError} of ${totalErrors} errors on the page`; - div.appendChild(document.createTextNode(text)); - - additionalReference.appendChild(div); -} - -export type { SwitchCallback }; -export { updateAdditional }; diff --git a/packages/react-error-overlay/src/components/close.js b/packages/react-error-overlay/src/components/close.js deleted file mode 100644 index 2ced8d0ce92..00000000000 --- a/packages/react-error-overlay/src/components/close.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ - -/* @flow */ -import { applyStyles } from '../utils/dom/css'; -import { hintsStyle, hintStyle, closeButtonStyle } from '../styles'; - -function createHint(document: Document, hint: string, title: string) { - const span = document.createElement('span'); - span.appendChild(document.createTextNode(hint)); - span.setAttribute('title', title); - applyStyles(span, hintStyle); - return span; -} - -type CloseCallback = () => void; -function createClose(document: Document, callback: CloseCallback) { - const hints = document.createElement('div'); - applyStyles(hints, hintsStyle); - - const close = createHint(document, '×', 'Click or press Escape to dismiss.'); - close.addEventListener('click', () => callback()); - applyStyles(close, closeButtonStyle); - hints.appendChild(close); - return hints; -} - -export type { CloseCallback }; -export { createClose }; diff --git a/packages/react-error-overlay/src/components/footer.js b/packages/react-error-overlay/src/components/footer.js deleted file mode 100644 index 4586a04ff2b..00000000000 --- a/packages/react-error-overlay/src/components/footer.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ - -/* @flow */ -import { applyStyles } from '../utils/dom/css'; -import { footerStyle } from '../styles'; - -function createFooter(document: Document) { - const div = document.createElement('div'); - applyStyles(div, footerStyle); - div.appendChild( - document.createTextNode( - 'This screen is visible only in development. It will not appear if the app crashes in production.' - ) - ); - div.appendChild(document.createElement('br')); - div.appendChild( - document.createTextNode( - 'Open your browser’s developer console to further inspect this error.' - ) - ); - return div; -} - -export { createFooter }; diff --git a/packages/react-error-overlay/src/components/frame.js b/packages/react-error-overlay/src/components/frame.js deleted file mode 100644 index 43d0d4043a3..00000000000 --- a/packages/react-error-overlay/src/components/frame.js +++ /dev/null @@ -1,355 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ - -/* @flow */ -import { enableTabClick } from '../utils/dom/enableTabClick'; -import { createCode } from './code'; -import { isInternalFile } from '../utils/isInternalFile'; -import type { StackFrame } from '../utils/stack-frame'; -import type { FrameSetting, OmitsObject } from './frames'; -import { applyStyles } from '../utils/dom/css'; -import { - omittedFramesExpandedStyle, - omittedFramesCollapsedStyle, - functionNameStyle, - depStyle, - linkStyle, - anchorStyle, - hiddenStyle, -} from '../styles'; - -function getGroupToggle( - document: Document, - omitsCount: number, - omitBundle: number -) { - const omittedFrames = document.createElement('div'); - enableTabClick(omittedFrames); - const text1 = document.createTextNode( - '\u25B6 ' + omitsCount + ' stack frames were collapsed.' - ); - omittedFrames.appendChild(text1); - omittedFrames.addEventListener('click', function() { - const hide = text1.textContent.match(/▲/); - const list = document.getElementsByName('bundle-' + omitBundle); - for (let index = 0; index < list.length; ++index) { - const n = list[index]; - if (hide) { - n.style.display = 'none'; - } else { - n.style.display = ''; - } - } - if (hide) { - text1.textContent = text1.textContent.replace(/▲/, '▶'); - text1.textContent = text1.textContent.replace(/expanded/, 'collapsed'); - applyStyles(omittedFrames, omittedFramesCollapsedStyle); - } else { - text1.textContent = text1.textContent.replace(/▶/, '▲'); - text1.textContent = text1.textContent.replace(/collapsed/, 'expanded'); - applyStyles(omittedFrames, omittedFramesExpandedStyle); - } - }); - applyStyles(omittedFrames, omittedFramesCollapsedStyle); - return omittedFrames; -} - -function insertBeforeBundle( - document: Document, - parent: Node, - omitsCount: number, - omitBundle: number, - actionElement -) { - const children = document.getElementsByName('bundle-' + omitBundle); - if (children.length < 1) { - return; - } - let first: ?Node = children[0]; - while (first != null && first.parentNode !== parent) { - first = first.parentNode; - } - const div = document.createElement('div'); - enableTabClick(div); - div.setAttribute('name', 'bundle-' + omitBundle); - const text = document.createTextNode( - '\u25BC ' + omitsCount + ' stack frames were expanded.' - ); - div.appendChild(text); - div.addEventListener('click', function() { - return actionElement.click(); - }); - applyStyles(div, omittedFramesExpandedStyle); - div.style.display = 'none'; - - parent.insertBefore(div, first); -} - -function frameDiv( - document: Document, - functionName, - url, - internalUrl, - onSourceClick: ?Function -) { - const frame = document.createElement('div'); - const frameFunctionName = document.createElement('div'); - - let cleanedFunctionName; - if (!functionName || functionName === 'Object.') { - cleanedFunctionName = '(anonymous function)'; - } else { - cleanedFunctionName = functionName; - } - - const cleanedUrl = url.replace('webpack://', '.'); - - if (internalUrl) { - applyStyles( - frameFunctionName, - Object.assign({}, functionNameStyle, depStyle) - ); - } else { - applyStyles(frameFunctionName, functionNameStyle); - } - - frameFunctionName.appendChild(document.createTextNode(cleanedFunctionName)); - frame.appendChild(frameFunctionName); - - const frameLink = document.createElement('div'); - applyStyles(frameLink, linkStyle); - const frameAnchor = document.createElement('a'); - applyStyles(frameAnchor, anchorStyle); - frameAnchor.appendChild(document.createTextNode(cleanedUrl)); - frameLink.appendChild(frameAnchor); - frame.appendChild(frameLink); - - if (typeof onSourceClick === 'function') { - let handler = onSourceClick; - enableTabClick(frameAnchor); - frameAnchor.style.cursor = 'pointer'; - frameAnchor.addEventListener('click', function() { - handler(); - }); - } - - return frame; -} - -function isBultinErrorName(errorName: ?string) { - switch (errorName) { - case 'EvalError': - case 'InternalError': - case 'RangeError': - case 'ReferenceError': - case 'SyntaxError': - case 'TypeError': - case 'URIError': - return true; - default: - return false; - } -} - -function getPrettyURL( - sourceFileName: ?string, - sourceLineNumber: ?number, - sourceColumnNumber: ?number, - fileName: ?string, - lineNumber: ?number, - columnNumber: ?number, - compiled: boolean -): string { - let prettyURL; - if (!compiled && sourceFileName && typeof sourceLineNumber === 'number') { - // Remove everything up to the first /src/ or /node_modules/ - const trimMatch = /^[/|\\].*?[/|\\]((src|node_modules)[/|\\].*)/.exec( - sourceFileName - ); - if (trimMatch && trimMatch[1]) { - prettyURL = trimMatch[1]; - } else { - prettyURL = sourceFileName; - } - prettyURL += ':' + sourceLineNumber; - // Note: we intentionally skip 0's because they're produced by cheap Webpack maps - if (sourceColumnNumber) { - prettyURL += ':' + sourceColumnNumber; - } - } else if (fileName && typeof lineNumber === 'number') { - prettyURL = fileName + ':' + lineNumber; - // Note: we intentionally skip 0's because they're produced by cheap Webpack maps - if (columnNumber) { - prettyURL += ':' + columnNumber; - } - } else { - prettyURL = 'unknown'; - } - return prettyURL; -} - -function createFrame( - document: Document, - frameSetting: FrameSetting, - frame: StackFrame, - contextSize: number, - critical: boolean, - omits: OmitsObject, - omitBundle: number, - parentContainer: HTMLDivElement, - lastElement: boolean, - errorName: ?string -) { - const { compiled } = frameSetting; - let { functionName, _originalFileName: sourceFileName } = frame; - const { - fileName, - lineNumber, - columnNumber, - _scriptCode: scriptLines, - _originalLineNumber: sourceLineNumber, - _originalColumnNumber: sourceColumnNumber, - _originalScriptCode: sourceLines, - } = frame; - - // TODO: find a better place for this. - // Chrome has a bug with inferring function.name: - // https://github.com/facebookincubator/create-react-app/issues/2097 - // Let's ignore a meaningless name we get for top-level modules. - if ( - functionName === 'Object.friendlySyntaxErrorLabel' || - functionName === 'Object.exports.__esModule' - ) { - functionName = '(anonymous function)'; - } - - const prettyURL = getPrettyURL( - sourceFileName, - sourceLineNumber, - sourceColumnNumber, - fileName, - lineNumber, - columnNumber, - compiled - ); - - let needsHidden = false; - const isInternalUrl = isInternalFile(sourceFileName, fileName); - const isThrownIntentionally = !isBultinErrorName(errorName); - const shouldCollapse = - isInternalUrl && (isThrownIntentionally || omits.hasReachedAppCode); - - if (!isInternalUrl) { - omits.hasReachedAppCode = true; - } - - if (shouldCollapse) { - ++omits.value; - needsHidden = true; - } - - let collapseElement = null; - if (!shouldCollapse || lastElement) { - if (omits.value > 0) { - const capV = omits.value; - const omittedFrames = getGroupToggle(document, capV, omitBundle); - window.requestAnimationFrame(() => { - insertBeforeBundle( - document, - parentContainer, - capV, - omitBundle, - omittedFrames - ); - }); - if (lastElement && shouldCollapse) { - collapseElement = omittedFrames; - } else { - parentContainer.appendChild(omittedFrames); - } - ++omits.bundle; - } - omits.value = 0; - } - - let onSourceClick = null; - if (sourceFileName) { - // e.g. "/path-to-my-app/webpack/bootstrap eaddeb46b67d75e4dfc1" - const isInternalWebpackBootstrapCode = - sourceFileName.trim().indexOf(' ') !== -1; - if (!isInternalWebpackBootstrapCode) { - onSourceClick = () => { - // Keep this in sync with react-error-overlay/middleware.js - fetch( - '/__open-stack-frame-in-editor?fileName=' + - window.encodeURIComponent(sourceFileName) + - '&lineNumber=' + - window.encodeURIComponent(sourceLineNumber || 1) - ).then(() => {}, () => {}); - }; - } - } - - const elem = frameDiv( - document, - functionName, - prettyURL, - shouldCollapse, - onSourceClick - ); - if (needsHidden) { - applyStyles(elem, hiddenStyle); - elem.setAttribute('name', 'bundle-' + omitBundle); - } - - let hasSource = false; - if (!shouldCollapse) { - if ( - compiled && - scriptLines && - scriptLines.length !== 0 && - lineNumber != null - ) { - elem.appendChild( - createCode( - document, - scriptLines, - lineNumber, - columnNumber, - contextSize, - critical, - onSourceClick - ) - ); - hasSource = true; - } else if ( - !compiled && - sourceLines && - sourceLines.length !== 0 && - sourceLineNumber != null - ) { - elem.appendChild( - createCode( - document, - sourceLines, - sourceLineNumber, - sourceColumnNumber, - contextSize, - critical, - onSourceClick - ) - ); - hasSource = true; - } - } - - return { elem: elem, hasSource: hasSource, collapseElement: collapseElement }; -} - -export { createFrame }; diff --git a/packages/react-error-overlay/src/components/frames.js b/packages/react-error-overlay/src/components/frames.js deleted file mode 100644 index 8bd50509295..00000000000 --- a/packages/react-error-overlay/src/components/frames.js +++ /dev/null @@ -1,132 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ - -/* @flow */ -import type { StackFrame } from '../utils/stack-frame'; -import { applyStyles } from '../utils/dom/css'; -import { traceStyle, toggleStyle } from '../styles'; -import { enableTabClick } from '../utils/dom/enableTabClick'; -import { createFrame } from './frame'; - -type OmitsObject = { - value: number, - bundle: number, - hasReachedAppCode: boolean, -}; -type FrameSetting = { compiled: boolean }; -export type { OmitsObject, FrameSetting }; - -function createFrameWrapper( - document: Document, - parent: HTMLDivElement, - factory, - lIndex: number, - frameSettings: FrameSetting[], - contextSize: number -) { - const fac = factory(); - if (fac == null) { - return; - } - const { hasSource, elem, collapseElement } = fac; - - const elemWrapper = document.createElement('div'); - elemWrapper.appendChild(elem); - - if (hasSource) { - const compiledDiv = document.createElement('div'); - enableTabClick(compiledDiv); - applyStyles(compiledDiv, toggleStyle); - - const o = frameSettings[lIndex]; - const compiledText = document.createTextNode( - 'View ' + (o && o.compiled ? 'source' : 'compiled') - ); - compiledDiv.addEventListener('click', function() { - if (o) { - o.compiled = !o.compiled; - } - - const next = createFrameWrapper( - document, - parent, - factory, - lIndex, - frameSettings, - contextSize - ); - if (next != null) { - parent.insertBefore(next, elemWrapper); - parent.removeChild(elemWrapper); - } - }); - compiledDiv.appendChild(compiledText); - elemWrapper.appendChild(compiledDiv); - } - - if (collapseElement != null) { - elemWrapper.appendChild(collapseElement); - } - - return elemWrapper; -} - -function createFrames( - document: Document, - resolvedFrames: StackFrame[], - frameSettings: FrameSetting[], - contextSize: number, - errorName: ?string -) { - if (resolvedFrames.length !== frameSettings.length) { - throw new Error( - 'You must give a frame settings array of identical length to resolved frames.' - ); - } - const trace = document.createElement('div'); - applyStyles(trace, traceStyle); - - let index = 0; - let critical = true; - const omits: OmitsObject = { value: 0, bundle: 1, hasReachedAppCode: false }; - resolvedFrames.forEach(function(frame) { - const lIndex = index++; - const elem = createFrameWrapper( - document, - trace, - createFrame.bind( - undefined, - document, - frameSettings[lIndex], - frame, - contextSize, - critical, - omits, - omits.bundle, - trace, - index === resolvedFrames.length, - errorName - ), - lIndex, - frameSettings, - contextSize - ); - if (elem == null) { - return; - } - critical = false; - trace.appendChild(elem); - }); - //TODO: fix this - omits.value = 0; - - return trace; -} - -export { createFrames }; diff --git a/packages/react-error-overlay/src/components/overlay.js b/packages/react-error-overlay/src/components/overlay.js deleted file mode 100644 index 69acf9ad43f..00000000000 --- a/packages/react-error-overlay/src/components/overlay.js +++ /dev/null @@ -1,95 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ - -/* @flow */ -import { applyStyles } from '../utils/dom/css'; -import { containerStyle, overlayStyle, headerStyle } from '../styles'; -import { createClose } from './close'; -import { createFrames } from './frames'; -import { createFooter } from './footer'; -import type { CloseCallback } from './close'; -import type { StackFrame } from '../utils/stack-frame'; -import { updateAdditional } from './additional'; -import type { FrameSetting } from './frames'; -import type { SwitchCallback } from './additional'; - -function createOverlay( - document: Document, - name: ?string, - message: string, - frames: StackFrame[], - contextSize: number, - currentError: number, - totalErrors: number, - switchCallback: SwitchCallback, - closeCallback: CloseCallback -): { - overlay: HTMLDivElement, - additional: HTMLDivElement, -} { - const frameSettings: FrameSetting[] = frames.map(() => ({ compiled: false })); - // Create overlay - const overlay = document.createElement('div'); - applyStyles(overlay, overlayStyle); - - // Create container - const container = document.createElement('div'); - applyStyles(container, containerStyle); - overlay.appendChild(container); - container.appendChild(createClose(document, closeCallback)); - - // Create "Errors X of Y" in case of multiple errors - const additional = document.createElement('div'); - updateAdditional( - document, - additional, - currentError, - totalErrors, - switchCallback - ); - container.appendChild(additional); - - // Create header - const header = document.createElement('div'); - applyStyles(header, headerStyle); - - // Make message prettier - let finalMessage = - message.match(/^\w*:/) || !name ? message : name + ': ' + message; - - finalMessage = finalMessage - // TODO: maybe remove this prefix from fbjs? - // It's just scaring people - .replace(/^Invariant Violation:\s*/, '') - // This is not helpful either: - .replace(/^Warning:\s*/, '') - // Break the actionable part to the next line. - // AFAIK React 16+ should already do this. - .replace(' Check the render method', '\n\nCheck the render method') - .replace(' Check your code at', '\n\nCheck your code at'); - - // Put it in the DOM - header.appendChild(document.createTextNode(finalMessage)); - container.appendChild(header); - - // Create trace - container.appendChild( - createFrames(document, frames, frameSettings, contextSize, name) - ); - - // Show message - container.appendChild(createFooter(document)); - - return { - overlay, - additional, - }; -} - -export { createOverlay }; diff --git a/packages/react-error-overlay/src/containers/CompileErrorContainer.js b/packages/react-error-overlay/src/containers/CompileErrorContainer.js new file mode 100644 index 00000000000..9d1e399fd10 --- /dev/null +++ b/packages/react-error-overlay/src/containers/CompileErrorContainer.js @@ -0,0 +1,49 @@ +/** + * 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. + */ + +/* @flow */ +import React, { PureComponent } from 'react'; +import ErrorOverlay from '../components/ErrorOverlay'; +import Footer from '../components/Footer'; +import Header from '../components/Header'; +import CodeBlock from '../components/CodeBlock'; +import generateAnsiHTML from '../utils/generateAnsiHTML'; +import parseCompileError from '../utils/parseCompileError'; +import type { ErrorLocation } from '../utils/parseCompileError'; + +const codeAnchorStyle = { + cursor: 'pointer', +}; + +type Props = {| + error: string, + editorHandler: (errorLoc: ErrorLocation) => void, +|}; + +class CompileErrorContainer extends PureComponent { + render() { + const { error, editorHandler } = this.props; + const errLoc: ?ErrorLocation = parseCompileError(error); + const canOpenInEditor = errLoc !== null && editorHandler !== null; + return ( + +
+ editorHandler(errLoc) : null + } + style={canOpenInEditor ? codeAnchorStyle : null} + > + + +