+### `npm test`
+
+Runs the test watcher in an interactive mode.
+By default, runs tests related to files changes since the last commit.
+
+[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests)
+
### `npm run build`
Builds the app for production to the `build` folder.@@ -81,10 +95,36 @@ It correctly bundles React in production mode and optimizes the build for the be The build is minified and the filenames include the hashes.
Your app is ready to be deployed! -## How Do I…? - -The generated project will include a guide in its README.
-You can also read its latest version [here](https://github.com/facebookincubator/create-react-app/blob/master/template/README.md). +## User Guide + +The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: + +- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) +- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) +- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) +- [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) +- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) +- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) +- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) +- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) +- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) +- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) +- [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 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) +- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-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) +- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) +- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) + +A copy of the user guide will be created as `README.md` in your project folder. + +## How to Update to New Versions? + +Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. ## Philosophy @@ -105,7 +145,7 @@ You can also read its latest version [here](https://github.com/facebookincubator * Autoprefixed CSS, so you don’t need `-webkit` or other prefixes. * A `build` script to bundle JS, CSS, and images for production, with sourcemaps. -**The feature set is intentionally limited**. It doesn’t support advanced features such as server rendering or CSS modules. Currently, it doesn’t support testing either. 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. +**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. **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. @@ -124,7 +164,6 @@ You don’t have to ever use `eject`. The curated feature set is suitable for sm Some features are currently **not supported**: * Server rendering. -* Testing. * Some experimental syntax extensions (e.g. decorators). * CSS Modules. * LESS or Sass. @@ -141,7 +180,8 @@ Currently it is a thin layer on top of many amazing community projects, such as: * [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/) -* and more. +* [Jest](http://facebook.github.io/jest) +* and others. All of them are transitive dependencies of the provided npm package. @@ -159,21 +199,24 @@ We are grateful to the authors of existing related projects for their ideas and ## Alternatives -If you don’t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs: +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/neo](https://github.com/mozilla/neo) +* [NYTimes/kyt](https://github.com/NYTimes/kyt) + +Notable alternatives also include: * [enclave](https://github.com/eanplatter/enclave) -* [nwb](https://github.com/insin/nwb) * [motion](https://github.com/motion/motion) -* [rackt-cli](https://github.com/mzabriskie/rackt-cli) -* [budō](https://github.com/mattdesl/budo) -* [rwb](https://github.com/petehunt/rwb) * [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) -* [mozilla-neo](https://github.com/mozilla/neo) +* [tarec](https://github.com/geowarin/tarec) You can also use module bundlers like [webpack](http://webpack.github.io) 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/config/babel.dev.js b/config/babel.dev.js deleted file mode 100644 index 89096734713..00000000000 --- a/config/babel.dev.js +++ /dev/null @@ -1,42 +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. - */ - -module.exports = { - // Don't try to find .babelrc because we want to force this configuration. - babelrc: false, - // This is a feature of `babel-loader` for webpack (not Babel itself). - // It enables caching results in OS temporary directory for faster rebuilds. - cacheDirectory: true, - presets: [ - // let, const, destructuring, classes, modules - require.resolve('babel-preset-es2015'), - // exponentiation - require.resolve('babel-preset-es2016'), - // JSX, Flow - require.resolve('babel-preset-react') - ], - plugins: [ - // function x(a, b, c,) { } - require.resolve('babel-plugin-syntax-trailing-function-commas'), - // await fetch() - require.resolve('babel-plugin-syntax-async-functions'), - // class { handleClick = () => { } } - require.resolve('babel-plugin-transform-class-properties'), - // { ...todo, completed: true } - require.resolve('babel-plugin-transform-object-rest-spread'), - // function* () { yield 42; yield 43; } - require.resolve('babel-plugin-transform-regenerator'), - // Polyfills the runtime needed for async/await and generators - [require.resolve('babel-plugin-transform-runtime'), { - helpers: false, - polyfill: false, - regenerator: true - }] - ] -}; diff --git a/config/babel.prod.js b/config/babel.prod.js deleted file mode 100644 index 92491bfcacb..00000000000 --- a/config/babel.prod.js +++ /dev/null @@ -1,41 +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. - */ - -module.exports = { - // Don't try to find .babelrc because we want to force this configuration. - babelrc: false, - presets: [ - // let, const, destructuring, classes, modules - require.resolve('babel-preset-es2015'), - // exponentiation - require.resolve('babel-preset-es2016'), - // JSX, Flow - require.resolve('babel-preset-react') - ], - plugins: [ - // function x(a, b, c,) { } - require.resolve('babel-plugin-syntax-trailing-function-commas'), - // await fetch() - require.resolve('babel-plugin-syntax-async-functions'), - // class { handleClick = () => { } } - require.resolve('babel-plugin-transform-class-properties'), - // { ...todo, completed: true } - require.resolve('babel-plugin-transform-object-rest-spread'), - // function* () { yield 42; yield 43; } - require.resolve('babel-plugin-transform-regenerator'), - // Polyfills the runtime needed for async/await and generators - [require.resolve('babel-plugin-transform-runtime'), { - helpers: false, - polyfill: false, - regenerator: true - }], - // Optimization: hoist JSX that never changes out of render() - require.resolve('babel-plugin-transform-react-constant-elements') - ] -}; diff --git a/config/env.js b/config/env.js deleted file mode 100644 index cfa10c75b44..00000000000 --- a/config/env.js +++ /dev/null @@ -1,24 +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. - */ - -// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be -// injected into the application via DefinePlugin in Webpack configuration. - -var REACT_APP = /^REACT_APP_/i; -var NODE_ENV = JSON.stringify(process.env.NODE_ENV || 'development'); - -module.exports = Object - .keys(process.env) - .filter(key => REACT_APP.test(key)) - .reduce((env, key) => { - env['process.env.' + key] = JSON.stringify(process.env[key]); - return env; - }, { - 'process.env.NODE_ENV': NODE_ENV - }); diff --git a/config/flow/css.js.flow b/config/flow/css.js.flow deleted file mode 100644 index 46e7f7c0456..00000000000 --- a/config/flow/css.js.flow +++ /dev/null @@ -1 +0,0 @@ -// @flow diff --git a/config/flow/file.js.flow b/config/flow/file.js.flow deleted file mode 100644 index 701b6700f23..00000000000 --- a/config/flow/file.js.flow +++ /dev/null @@ -1,2 +0,0 @@ -// @flow -declare export default string; diff --git a/config/jest/environment.js b/config/jest/environment.js deleted file mode 100644 index e7c1df906c6..00000000000 --- a/config/jest/environment.js +++ /dev/null @@ -1,7 +0,0 @@ -// Currently, Jest mocks setTimeout() and similar functions by default: -// https://facebook.github.io/jest/docs/timer-mocks.html -// We think this is confusing, so we disable this feature. -// If you see value in it, run `jest.useFakeTimers()` in individual tests. -beforeEach(() => { - jest.useRealTimers(); -}); diff --git a/config/paths.js b/config/paths.js deleted file mode 100644 index 7645917fbc9..00000000000 --- a/config/paths.js +++ /dev/null @@ -1,68 +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. - */ - -// TODO: we can split this file into several files (pre-eject, post-eject, test) -// and use those instead. This way we don't need to branch here. - -var path = require('path'); - -// True after ejecting, false when used as a dependency -var isEjected = ( - path.resolve(path.join(__dirname, '..')) === - path.resolve(process.cwd()) -); - -// Are we developing create-react-app locally? -var isInCreateReactAppSource = ( - process.argv.some(arg => arg.indexOf('--debug-template') > -1) -); - -function resolveOwn(relativePath) { - return path.resolve(__dirname, relativePath); -} - -function resolveApp(relativePath) { - return path.resolve(relativePath); -} - -if (isInCreateReactAppSource) { - // create-react-app development: we're in ./config/ - module.exports = { - appBuild: resolveOwn('../build'), - appHtml: resolveOwn('../template/index.html'), - appFavicon: resolveOwn('../template/favicon.ico'), - appPackageJson: resolveOwn('../package.json'), - appSrc: resolveOwn('../template/src'), - appNodeModules: resolveOwn('../node_modules'), - ownNodeModules: resolveOwn('../node_modules') - }; -} else if (!isEjected) { - // before eject: we're in ./node_modules/react-scripts/config/ - module.exports = { - appBuild: resolveApp('build'), - appHtml: resolveApp('index.html'), - appFavicon: resolveApp('favicon.ico'), - appPackageJson: resolveApp('package.json'), - appSrc: resolveApp('src'), - appNodeModules: resolveApp('node_modules'), - // this is empty with npm3 but node resolution searches higher anyway: - ownNodeModules: resolveOwn('../node_modules') - }; -} else { - // after eject: we're in ./config/ - module.exports = { - appBuild: resolveApp('build'), - appHtml: resolveApp('index.html'), - appFavicon: resolveApp('favicon.ico'), - appPackageJson: resolveApp('package.json'), - appSrc: resolveApp('src'), - appNodeModules: resolveApp('node_modules'), - ownNodeModules: resolveApp('node_modules') - }; -} diff --git a/config/polyfills.js b/config/polyfills.js deleted file mode 100644 index 1f71e4ac4f2..00000000000 --- a/config/polyfills.js +++ /dev/null @@ -1,10 +0,0 @@ -if (typeof Promise === 'undefined') { - // Rejection tracking prevents a common issue where React gets into an - // inconsistent state due to an error, but it gets swallowed by a Promise, - // and the user has no idea what causes React's erratic future behavior. - require('promise/lib/rejection-tracking').enable(); - window.Promise = require('promise/lib/es6-extensions.js'); -} - -// fetch() polyfill for making API calls. -require('whatwg-fetch'); diff --git a/lerna.json b/lerna.json new file mode 100644 index 00000000000..efe8073fd0c --- /dev/null +++ b/lerna.json @@ -0,0 +1,4 @@ +{ + "lerna": "2.0.0-beta.29", + "version": "independent" +} diff --git a/package.json b/package.json index bf3d853af2a..b72abb75510 100644 --- a/package.json +++ b/package.json @@ -1,89 +1,27 @@ { - "name": "react-scripts", - "version": "0.3.0-alpha", - "description": "Configuration and scripts for Create React App.", - "repository": "facebookincubator/create-react-app", - "license": "BSD-3-Clause", - "engines": { - "node": ">=4" - }, - "bugs": { - "url": "https://github.com/facebookincubator/create-react-app/issues" - }, + "private": true, "scripts": { - "build": "node scripts/build.js --debug-template", - "create-react-app": "node global-cli/index.js --scripts-version \"$PWD/`npm pack`\"", + "build": "node packages/react-scripts/scripts/build.js", + "create-react-app": "tasks/cra.sh", "e2e": "tasks/e2e.sh", - "start": "node scripts/start.js --debug-template", - "test": "node scripts/test.js --debug-template" + "postinstall": "lerna bootstrap", + "publish": "tasks/release.sh", + "start": "node packages/react-scripts/scripts/start.js", + "test": "node packages/react-scripts/scripts/test.js --env=jsdom" }, - "files": [ - "PATENTS", - "bin", - "config", - "scripts", - "template" - ], - "bin": { - "react-scripts": "./bin/react-scripts.js" - }, - "dependencies": { - "autoprefixer": "6.4.0", - "babel-core": "6.11.4", + + "devDependencies": { + "poststylus": "0.2.3", + "rucksack-css": "0.8.6", + "stylus": "0.54.5", + "stylus-loader": "2.1.2", "babel-eslint": "6.1.2", - "babel-jest": "14.1.0", - "babel-loader": "6.2.4", - "babel-plugin-syntax-async-functions": "6.8.0", - "babel-plugin-syntax-trailing-function-commas": "6.8.0", - "babel-plugin-transform-class-properties": "6.11.5", - "babel-plugin-transform-object-rest-spread": "6.8.0", - "babel-plugin-transform-react-constant-elements": "6.9.1", - "babel-plugin-transform-regenerator": "6.11.4", - "babel-plugin-transform-runtime": "6.12.0", - "babel-preset-es2015": "6.9.0", - "babel-preset-es2016": "6.11.3", - "babel-preset-react": "6.11.1", - "babel-runtime": "6.11.6", - "case-sensitive-paths-webpack-plugin": "1.1.2", - "chalk": "1.1.3", - "connect-history-api-fallback": "1.2.0", - "cross-spawn": "4.0.0", - "css-loader": "0.23.1", - "detect-port": "1.0.0", - "eslint": "3.2.2", - "eslint-loader": "1.4.1", - "eslint-plugin-flowtype": "2.4.0", + "eslint": "3.5.0", + "eslint-config-react-app": "file:packages/eslint-config-react-app", + "eslint-plugin-flowtype": "2.18.1", "eslint-plugin-import": "1.12.0", - "eslint-plugin-jsx-a11y": "2.0.1", - "eslint-plugin-react": "5.2.2", - "extract-text-webpack-plugin": "1.0.1", - "file-loader": "0.9.0", - "filesize": "3.3.0", - "fs-extra": "0.30.0", - "gzip-size": "3.0.0", - "html-webpack-plugin": "2.22.0", - "http-proxy-middleware": "0.17.0", - "jest": "14.1.0", - "json-loader": "0.5.4", - "opn": "4.0.2", - "postcss-loader": "0.9.1", - "promise": "7.1.1", - "recursive-readdir": "2.0.0", - "rimraf": "2.5.4", - "strip-ansi": "3.0.1", - "style-loader": "0.13.1", - "url-loader": "0.5.7", - "webpack": "1.13.1", - "webpack-dev-server": "1.14.1", - "whatwg-fetch": "1.0.0" - }, - "devDependencies": { - "bundle-deps": "1.0.0", - "react": "^15.3.0", - "react-dom": "^15.3.0", - "react-test-renderer": "^15.3.0" - }, - "optionalDependencies": { - "fsevents": "1.0.14" + "eslint-plugin-jsx-a11y": "2.2.2", + "eslint-plugin-react": "6.3.0", + "lerna": "2.0.0-beta.29" } } diff --git a/packages/babel-preset-react-app/README.md b/packages/babel-preset-react-app/README.md new file mode 100644 index 00000000000..c7548b84531 --- /dev/null +++ b/packages/babel-preset-react-app/README.md @@ -0,0 +1,25 @@ +# babel-preset-react-app + +This package includes the Babel preset used by [Create React App](https://github.com/facebookincubator/create-react-app). +Please refer to its documentation: + +* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – 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. + +## Usage in Create React App Projects + +The easiest way to use this configuration is with [Create React App](https://github.com/facebookincubator/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.** + +## Usage Outside of Create React App + +If you want to use this Babel preset in a project not built with Create React App, you can install it with following steps. + +First, [install Babel](https://babeljs.io/docs/setup/). + +Then create a file named `.babelrc` with following contents in the root folder of your project: + + ```js + { + "presets": ["react-app"] + } + ``` diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js new file mode 100644 index 00000000000..34e9efabb72 --- /dev/null +++ b/packages/babel-preset-react-app/index.js @@ -0,0 +1,74 @@ +/** + * 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'; + +var path = require('path'); + +module.exports = { + presets: [ + // Latest stable ECMAScript features + require.resolve('babel-preset-latest'), + // JSX, Flow + require.resolve('babel-preset-react') + ], + plugins: [ + // class { handleClick = () => { } } + require.resolve('babel-plugin-transform-class-properties'), + // { ...todo, completed: true } + require.resolve('babel-plugin-transform-object-rest-spread'), + // function* () { yield 42; yield 43; } + [require.resolve('babel-plugin-transform-regenerator'), { + // Async functions are converted to generators by babel-preset-latest + async: false + }], + // Polyfills the runtime needed for async/await and generators + [require.resolve('babel-plugin-transform-runtime'), { + helpers: false, + polyfill: false, + regenerator: true, + // Resolve the Babel runtime relative to the config. + moduleName: path.dirname(require.resolve('babel-runtime/package')) + }] + ] +}; + +// This is similar to how `env` works in Babel: +// https://babeljs.io/docs/usage/babelrc/#env-option +// We are not using `env` because it’s ignored in versions > babel-core@6.10.4: +// https://github.com/babel/babel/issues/4539 +// https://github.com/facebookincubator/create-react-app/issues/720 +// It’s also nice that we can enforce `NODE_ENV` being specified. +var env = process.env.BABEL_ENV || process.env.NODE_ENV; +if (env !== 'development' && env !== 'test' && env !== 'production') { + throw new Error( + 'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or '+ + '`BABEL_ENV` environment variables. Valid values are "development", ' + + '"test", and "production". Instead, received: ' + JSON.stringify(env) + '.' + ); +} +var plugins = module.exports.plugins; +if (env === 'development' || env === 'test') { + plugins.push.apply(plugins, [ + // Adds component stack to warning messages + require.resolve('babel-plugin-transform-react-jsx-source'), + // Adds __self attribute to JSX which React will use for some warnings + require.resolve('babel-plugin-transform-react-jsx-self') + ]); +} +if (env === 'production') { + // Optimization: hoist JSX that never changes out of render() + // Disabled because of issues: + // * https://github.com/facebookincubator/create-react-app/issues/525 + // * https://phabricator.babeljs.io/search/query/pCNlnC2xzwzx/ + // * https://github.com/babel/babel/issues/4516 + // TODO: Enable again when these issues are resolved. + // plugins.push.apply(plugins, [ + // require.resolve('babel-plugin-transform-react-constant-elements') + // ]); +} diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json new file mode 100644 index 00000000000..f0ead1f3b50 --- /dev/null +++ b/packages/babel-preset-react-app/package.json @@ -0,0 +1,25 @@ +{ + "name": "babel-preset-react-app", + "version": "0.2.1", + "description": "Babel preset used by Create React App", + "repository": "facebookincubator/create-react-app", + "license": "BSD-3-Clause", + "bugs": { + "url": "https://github.com/facebookincubator/create-react-app/issues" + }, + "files": [ + "index.js" + ], + "dependencies": { + "babel-plugin-transform-class-properties": "6.11.5", + "babel-plugin-transform-object-rest-spread": "6.8.0", + "babel-plugin-transform-react-constant-elements": "6.9.1", + "babel-plugin-transform-react-jsx-self": "6.11.0", + "babel-plugin-transform-react-jsx-source": "6.9.0", + "babel-plugin-transform-regenerator": "6.14.0", + "babel-plugin-transform-runtime": "6.15.0", + "babel-preset-latest": "6.14.0", + "babel-preset-react": "6.11.1", + "babel-runtime": "6.11.6" + } +} diff --git a/packages/create-react-app/README.md b/packages/create-react-app/README.md new file mode 100644 index 00000000000..062a320250d --- /dev/null +++ b/packages/create-react-app/README.md @@ -0,0 +1,7 @@ +# create-react-app + +This package includes the global command for [Create React App](https://github.com/facebookincubator/create-react-app). +Please refer to its documentation: + +* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – 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. diff --git a/global-cli/index.js b/packages/create-react-app/index.js similarity index 66% rename from global-cli/index.js rename to packages/create-react-app/index.js index d1319aba06f..02f9de254a0 100644 --- a/global-cli/index.js +++ b/packages/create-react-app/index.js @@ -29,6 +29,9 @@ // Do not make breaking changes! We absolutely don't want to have to // tell people to update their global version of create-react-app. // +// Also be careful with new language features. +// This file must work on Node 0.10+. +// // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // /!\ DO NOT MODIFY THIS FILE /!\ // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ @@ -41,6 +44,7 @@ var spawn = require('cross-spawn'); var chalk = require('chalk'); var semver = require('semver'); var argv = require('minimist')(process.argv.slice(2)); +var pathExists = require('path-exists'); /** * Arguments: @@ -50,7 +54,7 @@ var argv = require('minimist')(process.argv.slice(2)); * Example of valid values: * - a specific npm version: "0.22.0-rc1" * - a .tgz archive from any npm repo: "https://registry.npmjs.org/react-scripts/-/react-scripts-0.20.0.tgz" - * - a package prepared with `npm pack`: "/Users/home/vjeux/create-react-app/react-scripts-0.22.0.tgz" + * - a package prepared with `tasks/clean_pack.sh`: "/Users/home/vjeux/create-react-app/react-scripts-0.22.0.tgz" */ var commands = argv._; if (commands.length === 0) { @@ -67,24 +71,26 @@ if (commands.length === 0) { createApp(commands[0], argv.verbose, argv['scripts-version']); function createApp(name, verbose, version) { - if (fs.existsSync(name)) { - console.log('The directory `' + name + '` already exists. Aborting.'); - process.exit(1); - } - var root = path.resolve(name); var appName = path.basename(root); + checkAppName(appName); + + if (!pathExists.sync(name)) { + fs.mkdirSync(root); + } else if (!isSafeToCreateProjectIn(root)) { + console.log('The directory `' + name + '` contains file(s) that could conflict. Aborting.'); + process.exit(1); + } + console.log( 'Creating a new React app in ' + root + '.' ); console.log(); - fs.mkdirSync(root); - var packageJson = { name: appName, - version: '0.0.1', + version: '0.1.0', private: true, }; fs.writeFileSync( @@ -102,12 +108,14 @@ function createApp(name, verbose, version) { } function run(root, appName, version, verbose, originalDirectory) { + var installPackage = getInstallPackage(version); + var packageName = getPackageName(installPackage); var args = [ 'install', verbose && '--verbose', '--save-dev', '--save-exact', - getInstallPackage(version), + installPackage, ].filter(function(e) { return e; }); var proc = spawn('npm', args, {stdio: 'inherit'}); proc.on('close', function (code) { @@ -116,12 +124,12 @@ function run(root, appName, version, verbose, originalDirectory) { return; } - checkNodeVersion(); + checkNodeVersion(packageName); var scriptsPath = path.resolve( process.cwd(), 'node_modules', - 'react-scripts', + packageName, 'scripts', 'init.js' ); @@ -142,11 +150,21 @@ function getInstallPackage(version) { return packageToInstall; } -function checkNodeVersion() { +// Extract package name from tarball url or path. +function getPackageName(installPackage) { + if (~installPackage.indexOf('.tgz')) { + return installPackage.match(/^.+\/(.+)-.+\.tgz$/)[1]; + } else if (~installPackage.indexOf('@')) { + return installPackage.split('@')[0]; + } + return installPackage; +} + +function checkNodeVersion(packageName) { var packageJsonPath = path.resolve( process.cwd(), 'node_modules', - 'react-scripts', + packageName, 'package.json' ); var packageJson = require(packageJsonPath); @@ -166,3 +184,39 @@ function checkNodeVersion() { process.exit(1); } } + +function checkAppName(appName) { + // TODO: there should be a single place that holds the dependencies + var dependencies = ['react', 'react-dom']; + var devDependencies = ['react-scripts']; + var allDependencies = dependencies.concat(devDependencies).sort(); + + if (allDependencies.indexOf(appName) >= 0) { + console.error( + chalk.red( + 'We cannot create a project called `' + appName + '` because a dependency with the same name exists.\n' + + 'Due to the way npm works, the following names are not allowed:\n\n' + ) + + chalk.cyan( + allDependencies.map(function(depName) { + return ' ' + depName; + }).join('\n') + ) + + chalk.red('\n\nPlease choose a different project name.') + ); + process.exit(1); + } +} + +// If project only contains files generated by GH, it’s safe. +// We also special case IJ-based products .idea because it integrates with CRA: +// https://github.com/facebookincubator/create-react-app/pull/368#issuecomment-243446094 +function isSafeToCreateProjectIn(root) { + var validFiles = [ + '.DS_Store', 'Thumbs.db', '.git', '.gitignore', '.idea', 'README.md', 'LICENSE' + ]; + return fs.readdirSync(root) + .every(function(file) { + return validFiles.indexOf(file) >= 0; + }); +} diff --git a/global-cli/package.json b/packages/create-react-app/package.json similarity index 85% rename from global-cli/package.json rename to packages/create-react-app/package.json index 3e98c4c939a..5094b9c78dd 100644 --- a/global-cli/package.json +++ b/packages/create-react-app/package.json @@ -1,12 +1,15 @@ { "name": "create-react-app", - "version": "0.2.0", + "version": "0.5.0", "keywords": [ "react" ], "description": "Create React apps with no build configuration.", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", + "engines": { + "node": ">=4" + }, "bugs": { "url": "https://github.com/facebookincubator/create-react-app/issues" }, @@ -20,6 +23,7 @@ "chalk": "^1.1.1", "cross-spawn": "^4.0.0", "minimist": "^1.2.0", + "path-exists": "^2.1.0", "semver": "^5.0.3" } } diff --git a/packages/eslint-config-react-app/README.md b/packages/eslint-config-react-app/README.md new file mode 100644 index 00000000000..0967e94b989 --- /dev/null +++ b/packages/eslint-config-react-app/README.md @@ -0,0 +1,31 @@ +# eslint-config-react-app + +This package includes the shareable ESLint configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). +Please refer to its documentation: + +* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – 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. + +## Usage in Create React App Projects + +The easiest way to use this configuration is with [Create React App](https://github.com/facebookincubator/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.** + +## Usage Outside of Create React App + +If you want to use this ESLint configuration in a project not built with Create React App, you can install it with following steps. + +First, install this package, ESLint and the necessary plugins. + + ```sh + npm install --save-dev eslint-config-react-app babel-eslint@6.1.2 eslint@3.5.0 eslint-plugin-flowtype@2.18.1 eslint-plugin-import@1.12.0 eslint-plugin-jsx-a11y@2.2.2 eslint-plugin-react@5.2.2 + ``` + +Then create a file named `.eslintrc` with following contents in the root folder of your project: + + ```js + { + "extends": "react-app" + } + ``` + + That's it! You can override the settings from `eslint-config-react-app` by editing the `.eslintrc` file. Learn more about [configuring ESLint](http://eslint.org/docs/user-guide/configuring) on the ESLint website. diff --git a/config/eslint.js b/packages/eslint-config-react-app/index.js similarity index 90% rename from config/eslint.js rename to packages/eslint-config-react-app/index.js index 513ad2de02f..0004d6b2ec0 100644 --- a/config/eslint.js +++ b/packages/eslint-config-react-app/index.js @@ -21,7 +21,7 @@ module.exports = { parser: 'babel-eslint', - // import plugin is termporarily disabled, scroll below to see why + // import plugin is temporarily disabled, scroll below to see why plugins: [/*'import', */'flowtype', 'jsx-a11y', 'react'], env: { @@ -45,7 +45,7 @@ module.exports = { settings: { 'import/ignore': [ 'node_modules', - '\\.(json|css|jpg|png|gif|eot|svg|ttf|woff|woff2|mp4|webm)$', + '\\.(json|css|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$', ], 'import/extensions': ['.js'], 'import/resolver': { @@ -58,11 +58,11 @@ module.exports = { rules: { // http://eslint.org/docs/rules/ 'array-callback-return': 'warn', + 'brace-style': [2, 'stroustrup', { allowSingleLine: true }], 'default-case': ['warn', { commentPattern: '^no default$' }], 'dot-location': ['warn', 'property'], eqeqeq: ['warn', 'allow-null'], 'guard-for-in': 'warn', - 'new-cap': ['warn', { newIsCap: true }], 'new-parens': 'warn', 'no-array-constructor': 'warn', 'no-caller': 'warn', @@ -116,21 +116,28 @@ module.exports = { 'LabeledStatement', 'WithStatement', ], - 'no-return-assign': 'warn', 'no-script-url': 'warn', 'no-self-assign': 'warn', 'no-self-compare': 'warn', 'no-sequences': 'warn', 'no-shadow-restricted-names': 'warn', 'no-sparse-arrays': 'warn', + 'no-template-curly-in-string': 'warn', 'no-this-before-super': 'warn', 'no-throw-literal': 'warn', - 'no-undef': 'warn', + 'no-undef': 'error', 'no-unexpected-multiline': 'warn', 'no-unreachable': 'warn', - 'no-unused-expressions': 'warn', + 'no-unused-expressions': ['warn', { + 'allowShortCircuit': true, + 'allowTernary': true + }], 'no-unused-labels': 'warn', - 'no-unused-vars': ['warn', { vars: 'local', args: 'none' }], + 'no-unused-vars': ['warn', { + vars: 'local', + varsIgnorePattern: '^_', + args: 'none' + }], 'no-use-before-define': ['warn', 'nofunc'], 'no-useless-computed-key': 'warn', 'no-useless-concat': 'warn', @@ -142,6 +149,7 @@ module.exports = { ignoreExport: false, }], 'no-with': 'warn', + 'no-var': 2, 'no-whitespace-before-property': 'warn', 'operator-assignment': ['warn', 'always'], radix: 'warn', @@ -149,6 +157,8 @@ module.exports = { 'rest-spread-spacing': ['warn', 'never'], strict: ['warn', 'never'], 'unicode-bom': ['warn', 'never'], + 'semi': ['warn', 'never'], + 'space-before-blocks': [2, 'always'], 'use-isnan': 'warn', 'valid-typeof': 'warn', @@ -186,11 +196,13 @@ module.exports = { }], 'react/jsx-uses-react': 'warn', 'react/jsx-uses-vars': 'warn', + 'react/no-danger-with-children': 'warn', 'react/no-deprecated': 'warn', 'react/no-direct-mutation-state': 'warn', 'react/no-is-mounted': 'warn', 'react/react-in-jsx-scope': 'warn', 'react/require-render-return': 'warn', + 'react/style-prop-object': 'warn', // https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules 'jsx-a11y/aria-role': 'warn', diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json new file mode 100644 index 00000000000..90c6a21f269 --- /dev/null +++ b/packages/eslint-config-react-app/package.json @@ -0,0 +1,21 @@ +{ + "name": "eslint-config-react-app", + "version": "0.2.1", + "description": "ESLint configuration used by Create React App", + "repository": "facebookincubator/create-react-app", + "license": "BSD-3-Clause", + "bugs": { + "url": "https://github.com/facebookincubator/create-react-app/issues" + }, + "files": [ + "index.js" + ], + "peerDependencies": { + "babel-eslint": "6.1.2", + "eslint": "3.5.0", + "eslint-plugin-flowtype": "2.18.1", + "eslint-plugin-import": "1.12.0", + "eslint-plugin-jsx-a11y": "2.2.2", + "eslint-plugin-react": "6.3.0" + } +} diff --git a/packages/react-dev-utils/InterpolateHtmlPlugin.js b/packages/react-dev-utils/InterpolateHtmlPlugin.js new file mode 100644 index 00000000000..07558f47830 --- /dev/null +++ b/packages/react-dev-utils/InterpolateHtmlPlugin.js @@ -0,0 +1,45 @@ +/** + * 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 Webpack plugin lets us interpolate custom variables into `index.html`. +// Usage: `new InterpolateHtmlPlugin({ 'MY_VARIABLE': 42 })` +// Then, you can use %MY_VARIABLE% in your `index.html`. + +// It works in tandem with HtmlWebpackPlugin. +// Learn more about creating plugins like this: +// https://github.com/ampedandwired/html-webpack-plugin#events + +'use strict'; +const escapeStringRegexp = require('escape-string-regexp'); + +class InterpolateHtmlPlugin { + constructor(replacements) { + this.replacements = replacements; + } + + apply(compiler) { + compiler.plugin('compilation', compilation => { + compilation.plugin('html-webpack-plugin-before-html-processing', + (data, callback) => { + // Run HTML through a series of user-specified string replacements. + Object.keys(this.replacements).forEach(key => { + const value = this.replacements[key]; + data.html = data.html.replace( + new RegExp('%' + escapeStringRegexp(key) + '%', 'g'), + value + ); + }); + callback(null, data); + } + ); + }); + } +} + +module.exports = InterpolateHtmlPlugin; diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md new file mode 100644 index 00000000000..14c69493e5a --- /dev/null +++ b/packages/react-dev-utils/README.md @@ -0,0 +1,203 @@ +# react-dev-utils + +This package includes some utilities used by [Create React App](https://github.com/facebookincubator/create-react-app). +Please refer to its documentation: + +* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – 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. + +## Usage in Create React App Projects + +These utilities come by default with [Create React App](https://github.com/facebookincubator/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.** + +## Usage Outside of Create React App + +If you don’t use Create React App, or if you [ejected](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject), you may keep using these utilities. Their development will be aligned with Create React App, so major versions of these utilities may come out relatively often. Feel free to fork or copy and paste them into your projects if you’d like to have more control over them, or feel free to use the old versions. Not all of them are React-specific, but we might make some of them more React-specific in the future. + +### Entry Points + +There is no single entry point. You can only import individual top-level modules. + +#### `new InterpolateHtmlPlugin(replacements: {[key:string]: string})` + +This Webpack plugin lets us interpolate custom variables into `index.html`. +It works in tandem with [HtmlWebpackPlugin](https://github.com/ampedandwired/html-dev-plugin) 2.x via its [events](https://github.com/ampedandwired/html-dev-plugin#events). + +```js +var path = require('path'); +var HtmlWebpackPlugin = require('html-dev-plugin'); +var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); + +// Webpack config +var publicUrl = '/my-custom-url'; + +module.exports = { + output: { + // ... + publicPath: publicUrl + '/' + }, + // ... + plugins: [ + // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.: + // + new InterpolateHtmlPlugin({ + PUBLIC_URL: publicUrl + // You can pass any key-value pairs, this was just an example. + // WHATEVER: 42 will replace %WHATEVER% with 42 in index.html. + }), + // Generates an `index.html` file with the