diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000000..7e3649acc2c --- /dev/null +++ b/.editorconfig @@ -0,0 +1,16 @@ +# http://editorconfig.org +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false + +[Makefile] +indent_style = tab diff --git a/.gitignore b/.gitignore index 79ce88915d7..67d3b2a3a17 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* /.changelog +yarn.lock +.idea diff --git a/CHANGELOG-0.x.md b/CHANGELOG-0.x.md index bcfe6ed8cf2..e7bc47afa1e 100644 --- a/CHANGELOG-0.x.md +++ b/CHANGELOG-0.x.md @@ -67,7 +67,7 @@ npm install --save-dev --save-exact react-scripts@0.9.5 * [#1721](https://github.com/facebook/create-react-app/pull/1721) Fix hot reloading for WebpackDevServer after eject. ([@gaearon](https://github.com/gaearon)) -* `react-dev-utils` +* `react-dev-utils-custom` * [#1690](https://github.com/facebook/create-react-app/pull/1690) Fix `openBrowser()` when `BROWSER=open` on macOS. ([@bpierre](https://github.com/bpierre)) @@ -82,7 +82,7 @@ npm install --save-dev --save-exact react-scripts@0.9.5 * [#1542](https://github.com/facebook/create-react-app/pull/1542) Bump `jsx-a11y` version. ([@bondz](https://github.com/bondz)) -* `react-dev-utils`, `react-scripts` +* `react-dev-utils-custom`, `react-scripts` * [#1726](https://github.com/facebook/create-react-app/pull/1726) Extract generic build functions into `react-dev-utils`. ([@viankakrisna](https://github.com/viankakrisna)) @@ -356,7 +356,7 @@ Thanks to [@Timer](https://github.com/timer) for cutting this release. This makes all environment variables previously available in JS, also available in the HTML file, for example `%REACT_APP_MY_VARIABLE%`. See [Referencing Environment Variables in HTML](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#referencing-environment-variables-in-the-html). -* `react-dev-utils` +* `react-dev-utils-custom` * [#1148](https://github.com/facebook/create-react-app/pull/1148) Configure which browser to open with `npm start`. ([@GAumala](https://github.com/GAumala)) @@ -372,7 +372,7 @@ Thanks to [@Timer](https://github.com/timer) for cutting this release. Jest has been updated to 18 and has introduced some [breaking changes and new features](https://facebook.github.io/jest/blog/2016/12/15/2016-in-jest.html). -* `react-scripts`, `react-dev-utils` +* `react-scripts`, `react-dev-utils-custom` * [#1264](https://github.com/facebook/create-react-app/pull/1264) Remove interactive shell check when opening browser on start. ([@CaryLandholt](https://github.com/CaryLandholt)) @@ -391,7 +391,7 @@ Thanks to [@Timer](https://github.com/timer) for cutting this release. * [#1309](https://github.com/facebook/create-react-app/pull/1309) Bump `babel-loader` version (#1009). ([@frontsideair](https://github.com/frontsideair)) * [#1267](https://github.com/facebook/create-react-app/pull/1267) Only gitignore directories in root, not deep. ([@jayphelps](https://github.com/jayphelps)) -* `react-dev-utils` +* `react-dev-utils-custom` * [#1377](https://github.com/facebook/create-react-app/pull/1377) webpack-dev-server patch for 'still-ok' success status. ([@TheBlackBolt](https://github.com/TheBlackBolt)) * [#1274](https://github.com/facebook/create-react-app/pull/1274) Downgrading to compatible version of SockJS-Client. ([@holloway](https://github.com/holloway)) @@ -538,7 +538,7 @@ npm install -g create-react-app@1.0.3 We added [Subresource Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) checks to the build output in 0.8.2 but it turns out that they may fail in browsers using special compression proxies, such as Chrome on Android, when served over HTTP. We disabled the checks until we can find a safe way to add them. -* `react-dev-utils` +* `react-dev-utils-custom` * [#1226](https://github.com/facebook/create-react-app/pull/1226) Fix weird lint output. ([@n3tr](https://github.com/n3tr)) @@ -585,16 +585,17 @@ npm install -g create-react-app@1.0.3 Adds `create-react-app --help` with a list of options. -* `react-dev-utils` +* `react-dev-utils-custom` * [#1211](https://github.com/facebook/create-react-app/pull/1211) Use a better clear console sequence. ([@gaearon](https://github.com/gaearon)) Ensures the development server clears the terminal when files are changed. #### :memo: Documentation -* `react-dev-utils` +* `react-dev-utils-custom` * [#1232](https://github.com/facebook/create-react-app/pull/1232) [documentation] fix html-dev-plugin link in react-dev-utils doc. ([@shogunsea](https://github.com/shogunsea)) + * [#1232](https://github.com/facebookincubator/create-react-app/pull/1232) [documentation] fix html-dev-plugin link in react-dev-utils-custom doc. ([@shogunsea](https://github.com/shogunsea)) * `react-scripts` diff --git a/README.md b/README.md index ee9deb69693..3113b9b435e 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,41 @@ -# Create React App [![Build Status](https://travis-ci.org/facebook/create-react-app.svg?branch=master)](https://travis-ci.org/facebook/create-react-app) +# ☢ custom-react-scripts ☢ +Latest version of original react-scripts: **1.1.14** -Create React apps with no build configuration. +### ⚠️ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. -* [Creating an App](#creating-an-app) – How to create a new app. -* [User Guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. +The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). -Create React App works on macOS, Windows, and Linux.
-If something doesn’t work, please [file an issue](https://github.com/facebook/create-react-app/issues/new). +### 💡Features: +* Decorators +* babel-preset-stage-0 +* Less +* Sass +* CSS modules +* Sass modules +* Less modules +* Stylus modules -## Quick Overview +**the features are optional and can be turned on/off individually* +### ❔How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` + +Modify the `.env` file in the root of the generated project, and add any of the configuration options below 👇 to enable that feature. + +The generated project comes with every option turned on by default, but you can remove them at any time by removing the options from the ```.env``` file. + +#### Adding to an existing project + +``` +npm uninstall --save react-scripts; +npm install --save custom-react-scripts; +``` + +Add a `.env.` file with the desired features. + +### 📝 Configuration options +========= ```sh npx create-react-app my-app cd my-app @@ -24,14 +50,48 @@ When you’re ready to deploy to production, create a minified bundle with `npm

npm start

+>>>>>>>>> Temporary merge branch 2 + +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_STYLUS=true``` - enable Stylus support +- ```REACT_APP_CSS_MODULES=true``` - enable CSS modules +- ```REACT_APP_SASS_MODULES=true``` - enable Sass modules +- ```REACT_APP_LESS_MODULES=true``` - enable Less modules +- ```REACT_APP_STYLUS_MODULES=true``` - enable Stylus modules +- ```REACT_APP_CSS_MODULE_CLASSNAME_TEMPLATE='module-[sha512:hash:base32]-[name]-[local]'``` - add custom CSS Module hash ident name + +Note: to use modules the file must be named in the following format: ```$name.module.$preprocessorName```. + +For example ```styles.module.css``` or ```header.module.sass``` or ```footer.module.less```, etc. Files that are not prefixed with module will be parsed normally. + +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support + +#### Other +- ```REACT_APP_WEBPACK_DASHBOARD=true``` - Enables connection to the [webpack-dashboard](https://github.com/FormidableLabs/electron-webpack-dashboard) Electron app (the app must be installed on local machine) + +### 🤔 Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: + +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. + +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. -### Get Started Immediately +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. -You **don’t** need to install or configure tools like Webpack or Babel.
-They are preconfigured and hidden so that you can focus on the code. +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. -Just create a project, and you’re good to go. +From the original readme: +> To define permanent environment vairables, create a file called .env in the root of your project: +> ```REACT_APP_SECRET_CODE=abcdef``` +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. +========= ## Creating an App **You’ll need to have Node >= 6 on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects. @@ -45,6 +105,7 @@ npx create-react-app 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))* +>>>>>>>>> Temporary merge branch 2 ### npm @@ -63,6 +124,9 @@ yarn create react-app my-app 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: +<<<<<<<<< Temporary merge branch 1 +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. +========= ``` my-app ├── README.md diff --git a/README.ru.md b/README.ru.md new file mode 100644 index 00000000000..0ffc211b2e9 --- /dev/null +++ b/README.ru.md @@ -0,0 +1,91 @@ +# ☢ custom-react-scripts ☢ +Latest version of original react-scripts: **1.0.11** + +## Установка + +```bash +cd packages/react-dev-utils/ +npm publish +cd ../react-error-overlay/ +npm publish +cd ../react-scripts/ +npm publish +``` + +### 💡Features: +* Decorators +* babel-preset-stage-0 +* Less +* Sass +* CSS modules +* Sass modules +* Less modules +* Stylus modules + +**the features are optional and can be turned on/off individually* + +### Установка + +```bash +npm install -g create-react-app +create-react-app my-app --scripts-version es6-react-scripts + +npm install -g create-react-app@next +create-react-app my-app --scripts-version es6-react-scripts +``` + +### Обновление + +```bash +yarn upgrade es6-react-scripts +``` + + +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below 👇 to enable that feature. + +The generated project comes with every option turned on by default, but you can remove them at any time by removing the options from the ```.env``` file. + +### 📝 Configuration options + +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_STYLUS=true``` - enable Stylus support +- ```REACT_APP_CSS_MODULES=true``` - enable CSS modules +- ```REACT_APP_SASS_MODULES=true``` - enable Sass modules +- ```REACT_APP_LESS_MODULES=true``` - enable Less modules +- ```REACT_APP_STYLUS_MODULES=true``` - enable Stylus modules + +Note: to use modules the file must be named in the following format: ```$name.module.$preprocessorName```. + +For example ```styles.module.css``` or ```header.module.sass``` or ```footer.module.less```, etc. Files that are not prefixed with module will be parsed normally. + +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support + +#### Other +- ```REACT_APP_WEBPACK_DASHBOARD=true``` - Enables connection to the [webpack-dashboard](https://github.com/FormidableLabs/electron-webpack-dashboard) Electron app (the app must be installed on local machine) + +### 🤔 Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: + +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. + +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. + +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. + +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. + +From the original readme: +> To define permanent environment vairables, create a file called .env in the root of your project: +> ```REACT_APP_SECRET_CODE=abcdef``` + +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. + +### Future plans + +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. diff --git a/examples/.env b/examples/.env new file mode 100644 index 00000000000..0fba7f99c0d --- /dev/null +++ b/examples/.env @@ -0,0 +1,31 @@ +# delete the environment strings as appropriate + +# enable SASS support +REACT_APP_SASS=true + +# enable LESS support +REACT_APP_LESS=true + +# enable Stylus support +REACT_APP_STYLUS=true + +# enable CSS modules +REACT_APP_CSS_MODULES=true + +# enable Sass modules +REACT_APP_SASS_MODULES=true + +# enable Less modules +REACT_APP_LESS_MODULES=true + +# enable Stylus modules +REACT_APP_STYLUS_MODULES=true + +# enable stage-0 Babel preset +REACT_APP_BABEL_STAGE_0=true + +# enable decorators support +REACT_APP_DECORATORS=true + +# enable webpack dashboard access +REACT_APP_WEBPACK_DASHBOARD=true \ No newline at end of file diff --git a/package.json b/package.json index e8309674b8b..cd225e02ca4 100644 --- a/package.json +++ b/package.json @@ -23,11 +23,11 @@ "execa": "^0.10.0", "husky": "^0.14.3", "lerna": "2.9.1", - "lerna-changelog": "^0.7.0", - "lint-staged": "^7.0.5", + "lerna-changelog": "^0.8.0", + "lint-staged": "^7.2.2", "meow": "^4.0.0", "multimatch": "^2.1.0", - "prettier": "1.12.1", + "prettier": "1.14.2", "svg-term-cli": "^2.1.1", "tempy": "^0.2.1" }, diff --git a/packages/babel-plugin-named-asset-import/package.json b/packages/babel-plugin-named-asset-import/package.json index eec4516f8ac..5d2fcf503c6 100644 --- a/packages/babel-plugin-named-asset-import/package.json +++ b/packages/babel-plugin-named-asset-import/package.json @@ -12,6 +12,6 @@ "index.js" ], "peerDependencies": { - "@babel/core": "7.0.0-beta.46" + "@babel/core": "7.0.0-rc.3" } } diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index 27b70195299..9a7cef80f1d 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -16,21 +16,21 @@ "test.js" ], "dependencies": { - "@babel/core": "7.0.0-beta.46", - "@babel/plugin-proposal-class-properties": "7.0.0-beta.46", - "@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.46", - "@babel/plugin-syntax-dynamic-import": "7.0.0-beta.46", - "@babel/plugin-transform-classes": "7.0.0-beta.46", - "@babel/plugin-transform-destructuring": "7.0.0-beta.46", - "@babel/plugin-transform-react-constant-elements": "7.0.0-beta.46", - "@babel/plugin-transform-react-display-name": "7.0.0-beta.46", - "@babel/plugin-transform-regenerator": "7.0.0-beta.46", - "@babel/plugin-transform-runtime": "7.0.0-beta.46", - "@babel/preset-env": "7.0.0-beta.46", - "@babel/preset-flow": "7.0.0-beta.46", - "@babel/preset-react": "7.0.0-beta.46", - "babel-plugin-macros": "2.2.1", + "@babel/core": "7.0.0-rc.3", + "@babel/plugin-proposal-class-properties": "7.0.0-rc.3", + "@babel/plugin-proposal-object-rest-spread": "7.0.0-rc.3", + "@babel/plugin-syntax-dynamic-import": "7.0.0-rc.3", + "@babel/plugin-transform-classes": "7.0.0-rc.3", + "@babel/plugin-transform-destructuring": "7.0.0-rc.3", + "@babel/plugin-transform-react-constant-elements": "7.0.0-rc.3", + "@babel/plugin-transform-react-display-name": "7.0.0-rc.3", + "@babel/plugin-transform-regenerator": "7.0.0-rc.3", + "@babel/plugin-transform-runtime": "7.0.0-rc.3", + "@babel/preset-env": "7.0.0-rc.3", + "@babel/preset-flow": "7.0.0-rc.3", + "@babel/preset-react": "7.0.0-rc.3", + "babel-plugin-macros": "2.4.0", "babel-plugin-transform-dynamic-import": "2.0.0", - "babel-plugin-transform-react-remove-prop-types": "0.4.13" + "babel-plugin-transform-react-remove-prop-types": "0.4.15" } } diff --git a/packages/confusing-browser-globals/package.json b/packages/confusing-browser-globals/package.json index 88767c4d0f7..f549c02fc17 100644 --- a/packages/confusing-browser-globals/package.json +++ b/packages/confusing-browser-globals/package.json @@ -16,6 +16,6 @@ "index.js" ], "devDependencies": { - "jest": "22.4.3" + "jest": "23.5.0" } } diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index 35c60230a74..a0e36da49b6 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -12,13 +12,13 @@ ], "peerDependencies": { "babel-eslint": "^8.2.2", - "eslint": "^4.1.1", - "eslint-plugin-flowtype": "^2.34.1", - "eslint-plugin-import": "^2.6.0", + "eslint": "^4.17.0", + "eslint-plugin-flowtype": "^2.42.0", + "eslint-plugin-import": "^2.8.0", "eslint-plugin-jsx-a11y": "^6.0.2", "eslint-plugin-react": "^7.8.2" }, "dependencies": { - "confusing-browser-globals": "^1.0.0" + "confusing-browser-globals": "file:../confusing-browser-globals" } } diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 04b35d78cac..3d2dddc5e4a 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -1,11 +1,11 @@ { "name": "react-dev-utils", - "version": "5.0.0", + "version": "5.0.2", "description": "Webpack utilities used by Create React App", - "repository": "facebook/create-react-app", + "repository": "grengojbo/es6-react-scripts", "license": "MIT", "bugs": { - "url": "https://github.com/facebook/create-react-app/issues" + "url": "https://github.com/grengojbo/es6-react-scripts/issues" }, "engines": { "node": ">=6" @@ -38,7 +38,7 @@ "workspaceUtils.js" ], "dependencies": { - "@babel/code-frame": "7.0.0-beta.46", + "@babel/code-frame": "7.0.0-rc.3", "address": "1.0.3", "browserslist": "3.2.6", "chalk": "2.4.1", @@ -62,7 +62,7 @@ "text-table": "0.2.0" }, "devDependencies": { - "jest": "22.4.3" + "jest": "^23.1.0" }, "scripts": { "test": "jest" diff --git a/packages/react-error-overlay/fixtures/bundle.mjs b/packages/react-error-overlay/fixtures/bundle.mjs index 51f8ccf4ba8..4bdaec43c01 100644 --- a/packages/react-error-overlay/fixtures/bundle.mjs +++ b/packages/react-error-overlay/fixtures/bundle.mjs @@ -3,638 +3,638 @@ /******/ delete installedChunks[chunkId]; /******/ } /******/ var parentHotUpdateCallback = this["webpackHotUpdate"]; -/******/ this["webpackHotUpdate"] = -/******/ function webpackHotUpdateCallback(chunkId, moreModules) { // eslint-disable-line no-unused-vars -/******/ hotAddUpdateChunk(chunkId, moreModules); -/******/ if(parentHotUpdateCallback) parentHotUpdateCallback(chunkId, moreModules); -/******/ } ; -/******/ -/******/ function hotDownloadUpdateChunk(chunkId) { // eslint-disable-line no-unused-vars -/******/ var head = document.getElementsByTagName("head")[0]; -/******/ var script = document.createElement("script"); -/******/ script.type = "text/javascript"; -/******/ script.charset = "utf-8"; -/******/ script.src = __webpack_require__.p + "" + chunkId + "." + hotCurrentHash + ".hot-update.js"; -/******/ head.appendChild(script); -/******/ } -/******/ -/******/ function hotDownloadManifest() { // eslint-disable-line no-unused-vars -/******/ return new Promise(function(resolve, reject) { -/******/ if(typeof XMLHttpRequest === "undefined") -/******/ return reject(new Error("No browser support")); -/******/ try { -/******/ var request = new XMLHttpRequest(); -/******/ var requestPath = __webpack_require__.p + "" + hotCurrentHash + ".hot-update.json"; -/******/ request.open("GET", requestPath, true); -/******/ request.timeout = 10000; -/******/ request.send(null); -/******/ } catch(err) { -/******/ return reject(err); -/******/ } -/******/ request.onreadystatechange = function() { -/******/ if(request.readyState !== 4) return; -/******/ if(request.status === 0) { -/******/ // timeout -/******/ reject(new Error("Manifest request to " + requestPath + " timed out.")); -/******/ } else if(request.status === 404) { -/******/ // no update available -/******/ resolve(); -/******/ } else if(request.status !== 200 && request.status !== 304) { -/******/ // other failure -/******/ reject(new Error("Manifest request to " + requestPath + " failed.")); -/******/ } else { -/******/ // success -/******/ try { -/******/ var update = JSON.parse(request.responseText); -/******/ } catch(e) { -/******/ reject(e); -/******/ return; -/******/ } -/******/ resolve(update); -/******/ } -/******/ }; -/******/ }); -/******/ } +/******/ this["webpackHotUpdate"] = +/******/ function webpackHotUpdateCallback(chunkId, moreModules) { // eslint-disable-line no-unused-vars +/******/ hotAddUpdateChunk(chunkId, moreModules); +/******/ if(parentHotUpdateCallback) parentHotUpdateCallback(chunkId, moreModules); +/******/ } ; +/******/ +/******/ function hotDownloadUpdateChunk(chunkId) { // eslint-disable-line no-unused-vars +/******/ var head = document.getElementsByTagName("head")[0]; +/******/ var script = document.createElement("script"); +/******/ script.type = "text/javascript"; +/******/ script.charset = "utf-8"; +/******/ script.src = __webpack_require__.p + "" + chunkId + "." + hotCurrentHash + ".hot-update.js"; +/******/ head.appendChild(script); +/******/ } +/******/ +/******/ function hotDownloadManifest() { // eslint-disable-line no-unused-vars +/******/ return new Promise(function(resolve, reject) { +/******/ if(typeof XMLHttpRequest === "undefined") +/******/ return reject(new Error("No browser support")); +/******/ try { +/******/ var request = new XMLHttpRequest(); +/******/ var requestPath = __webpack_require__.p + "" + hotCurrentHash + ".hot-update.json"; +/******/ request.open("GET", requestPath, true); +/******/ request.timeout = 10000; +/******/ request.send(null); +/******/ } catch(err) { +/******/ return reject(err); +/******/ } +/******/ request.onreadystatechange = function() { +/******/ if(request.readyState !== 4) return; +/******/ if(request.status === 0) { +/******/ // timeout +/******/ reject(new Error("Manifest request to " + requestPath + " timed out.")); +/******/ } else if(request.status === 404) { +/******/ // no update available +/******/ resolve(); +/******/ } else if(request.status !== 200 && request.status !== 304) { +/******/ // other failure +/******/ reject(new Error("Manifest request to " + requestPath + " failed.")); +/******/ } else { +/******/ // success +/******/ try { +/******/ var update = JSON.parse(request.responseText); +/******/ } catch(e) { +/******/ reject(e); +/******/ return; +/******/ } +/******/ resolve(update); +/******/ } +/******/ }; +/******/ }); +/******/ } /******/ -/******/ -/******/ -/******/ var hotApplyOnUpdate = true; -/******/ var hotCurrentHash = "623dfc2b357036468bb6"; // eslint-disable-line no-unused-vars -/******/ var hotCurrentModuleData = {}; -/******/ var hotMainModule = true; // eslint-disable-line no-unused-vars -/******/ var hotCurrentParents = []; // eslint-disable-line no-unused-vars -/******/ var hotCurrentParentsTemp = []; // eslint-disable-line no-unused-vars -/******/ -/******/ function hotCreateRequire(moduleId) { // eslint-disable-line no-unused-vars -/******/ var me = installedModules[moduleId]; -/******/ if(!me) return __webpack_require__; -/******/ var fn = function(request) { -/******/ if(me.hot.active) { -/******/ if(installedModules[request]) { -/******/ if(installedModules[request].parents.indexOf(moduleId) < 0) -/******/ installedModules[request].parents.push(moduleId); -/******/ } else hotCurrentParents = [moduleId]; -/******/ if(me.children.indexOf(request) < 0) -/******/ me.children.push(request); -/******/ } else { -/******/ console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId); -/******/ hotCurrentParents = []; -/******/ } -/******/ hotMainModule = false; -/******/ return __webpack_require__(request); -/******/ }; -/******/ var ObjectFactory = function ObjectFactory(name) { -/******/ return { -/******/ configurable: true, -/******/ enumerable: true, -/******/ get: function() { -/******/ return __webpack_require__[name]; -/******/ }, -/******/ set: function(value) { -/******/ __webpack_require__[name] = value; -/******/ } -/******/ }; -/******/ }; -/******/ for(var name in __webpack_require__) { -/******/ if(Object.prototype.hasOwnProperty.call(__webpack_require__, name)) { -/******/ Object.defineProperty(fn, name, ObjectFactory(name)); -/******/ } -/******/ } -/******/ Object.defineProperty(fn, "e", { -/******/ enumerable: true, -/******/ value: function(chunkId) { -/******/ if(hotStatus === "ready") -/******/ hotSetStatus("prepare"); -/******/ hotChunksLoading++; -/******/ return __webpack_require__.e(chunkId).then(finishChunkLoading, function(err) { -/******/ finishChunkLoading(); -/******/ throw err; -/******/ }); -/******/ -/******/ function finishChunkLoading() { -/******/ hotChunksLoading--; -/******/ if(hotStatus === "prepare") { -/******/ if(!hotWaitingFilesMap[chunkId]) { -/******/ hotEnsureUpdateChunk(chunkId); -/******/ } -/******/ if(hotChunksLoading === 0 && hotWaitingFiles === 0) { -/******/ hotUpdateDownloaded(); -/******/ } -/******/ } -/******/ } -/******/ } -/******/ }); -/******/ return fn; -/******/ } -/******/ -/******/ function hotCreateModule(moduleId) { // eslint-disable-line no-unused-vars -/******/ var hot = { -/******/ // private stuff -/******/ _acceptedDependencies: {}, -/******/ _declinedDependencies: {}, -/******/ _selfAccepted: false, -/******/ _selfDeclined: false, -/******/ _disposeHandlers: [], -/******/ _main: hotMainModule, -/******/ -/******/ // Module API -/******/ active: true, -/******/ accept: function(dep, callback) { -/******/ if(typeof dep === "undefined") -/******/ hot._selfAccepted = true; -/******/ else if(typeof dep === "function") -/******/ hot._selfAccepted = dep; -/******/ else if(typeof dep === "object") -/******/ for(var i = 0; i < dep.length; i++) -/******/ hot._acceptedDependencies[dep[i]] = callback || function() {}; -/******/ else -/******/ hot._acceptedDependencies[dep] = callback || function() {}; -/******/ }, -/******/ decline: function(dep) { -/******/ if(typeof dep === "undefined") -/******/ hot._selfDeclined = true; -/******/ else if(typeof dep === "object") -/******/ for(var i = 0; i < dep.length; i++) -/******/ hot._declinedDependencies[dep[i]] = true; -/******/ else -/******/ hot._declinedDependencies[dep] = true; -/******/ }, -/******/ dispose: function(callback) { -/******/ hot._disposeHandlers.push(callback); -/******/ }, -/******/ addDisposeHandler: function(callback) { -/******/ hot._disposeHandlers.push(callback); -/******/ }, -/******/ removeDisposeHandler: function(callback) { -/******/ var idx = hot._disposeHandlers.indexOf(callback); -/******/ if(idx >= 0) hot._disposeHandlers.splice(idx, 1); -/******/ }, -/******/ -/******/ // Management API -/******/ check: hotCheck, -/******/ apply: hotApply, -/******/ status: function(l) { -/******/ if(!l) return hotStatus; -/******/ hotStatusHandlers.push(l); -/******/ }, -/******/ addStatusHandler: function(l) { -/******/ hotStatusHandlers.push(l); -/******/ }, -/******/ removeStatusHandler: function(l) { -/******/ var idx = hotStatusHandlers.indexOf(l); -/******/ if(idx >= 0) hotStatusHandlers.splice(idx, 1); -/******/ }, -/******/ -/******/ //inherit from previous dispose call -/******/ data: hotCurrentModuleData[moduleId] -/******/ }; -/******/ hotMainModule = true; -/******/ return hot; -/******/ } -/******/ -/******/ var hotStatusHandlers = []; -/******/ var hotStatus = "idle"; -/******/ -/******/ function hotSetStatus(newStatus) { -/******/ hotStatus = newStatus; -/******/ for(var i = 0; i < hotStatusHandlers.length; i++) -/******/ hotStatusHandlers[i].call(null, newStatus); -/******/ } -/******/ -/******/ // while downloading -/******/ var hotWaitingFiles = 0; -/******/ var hotChunksLoading = 0; -/******/ var hotWaitingFilesMap = {}; -/******/ var hotRequestedFilesMap = {}; -/******/ var hotAvailableFilesMap = {}; -/******/ var hotDeferred; -/******/ -/******/ // The update info -/******/ var hotUpdate, hotUpdateNewHash; -/******/ -/******/ function toModuleId(id) { -/******/ var isNumber = (+id) + "" === id; -/******/ return isNumber ? +id : id; -/******/ } -/******/ -/******/ function hotCheck(apply) { -/******/ if(hotStatus !== "idle") throw new Error("check() is only allowed in idle status"); -/******/ hotApplyOnUpdate = apply; -/******/ hotSetStatus("check"); -/******/ return hotDownloadManifest().then(function(update) { -/******/ if(!update) { -/******/ hotSetStatus("idle"); -/******/ return null; -/******/ } -/******/ -/******/ hotRequestedFilesMap = {}; -/******/ hotWaitingFilesMap = {}; -/******/ hotAvailableFilesMap = update.c; -/******/ hotUpdateNewHash = update.h; -/******/ -/******/ hotSetStatus("prepare"); -/******/ var promise = new Promise(function(resolve, reject) { -/******/ hotDeferred = { -/******/ resolve: resolve, -/******/ reject: reject -/******/ }; -/******/ }); -/******/ hotUpdate = {}; -/******/ var chunkId = 0; -/******/ { // eslint-disable-line no-lone-blocks -/******/ /*globals chunkId */ -/******/ hotEnsureUpdateChunk(chunkId); -/******/ } -/******/ if(hotStatus === "prepare" && hotChunksLoading === 0 && hotWaitingFiles === 0) { -/******/ hotUpdateDownloaded(); -/******/ } -/******/ return promise; -/******/ }); -/******/ } -/******/ -/******/ function hotAddUpdateChunk(chunkId, moreModules) { // eslint-disable-line no-unused-vars -/******/ if(!hotAvailableFilesMap[chunkId] || !hotRequestedFilesMap[chunkId]) -/******/ return; -/******/ hotRequestedFilesMap[chunkId] = false; -/******/ for(var moduleId in moreModules) { -/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { -/******/ hotUpdate[moduleId] = moreModules[moduleId]; -/******/ } -/******/ } -/******/ if(--hotWaitingFiles === 0 && hotChunksLoading === 0) { -/******/ hotUpdateDownloaded(); -/******/ } -/******/ } -/******/ -/******/ function hotEnsureUpdateChunk(chunkId) { -/******/ if(!hotAvailableFilesMap[chunkId]) { -/******/ hotWaitingFilesMap[chunkId] = true; -/******/ } else { -/******/ hotRequestedFilesMap[chunkId] = true; -/******/ hotWaitingFiles++; -/******/ hotDownloadUpdateChunk(chunkId); -/******/ } -/******/ } -/******/ -/******/ function hotUpdateDownloaded() { -/******/ hotSetStatus("ready"); -/******/ var deferred = hotDeferred; -/******/ hotDeferred = null; -/******/ if(!deferred) return; -/******/ if(hotApplyOnUpdate) { -/******/ hotApply(hotApplyOnUpdate).then(function(result) { -/******/ deferred.resolve(result); -/******/ }, function(err) { -/******/ deferred.reject(err); -/******/ }); -/******/ } else { -/******/ var outdatedModules = []; -/******/ for(var id in hotUpdate) { -/******/ if(Object.prototype.hasOwnProperty.call(hotUpdate, id)) { -/******/ outdatedModules.push(toModuleId(id)); -/******/ } -/******/ } -/******/ deferred.resolve(outdatedModules); -/******/ } -/******/ } -/******/ -/******/ function hotApply(options) { -/******/ if(hotStatus !== "ready") throw new Error("apply() is only allowed in ready status"); -/******/ options = options || {}; -/******/ -/******/ var cb; -/******/ var i; -/******/ var j; -/******/ var module; -/******/ var moduleId; -/******/ -/******/ function getAffectedStuff(updateModuleId) { -/******/ var outdatedModules = [updateModuleId]; -/******/ var outdatedDependencies = {}; -/******/ -/******/ var queue = outdatedModules.slice().map(function(id) { -/******/ return { -/******/ chain: [id], -/******/ id: id -/******/ }; -/******/ }); -/******/ while(queue.length > 0) { -/******/ var queueItem = queue.pop(); -/******/ var moduleId = queueItem.id; -/******/ var chain = queueItem.chain; -/******/ module = installedModules[moduleId]; -/******/ if(!module || module.hot._selfAccepted) -/******/ continue; -/******/ if(module.hot._selfDeclined) { -/******/ return { -/******/ type: "self-declined", -/******/ chain: chain, -/******/ moduleId: moduleId -/******/ }; -/******/ } -/******/ if(module.hot._main) { -/******/ return { -/******/ type: "unaccepted", -/******/ chain: chain, -/******/ moduleId: moduleId -/******/ }; -/******/ } -/******/ for(var i = 0; i < module.parents.length; i++) { -/******/ var parentId = module.parents[i]; -/******/ var parent = installedModules[parentId]; -/******/ if(!parent) continue; -/******/ if(parent.hot._declinedDependencies[moduleId]) { -/******/ return { -/******/ type: "declined", -/******/ chain: chain.concat([parentId]), -/******/ moduleId: moduleId, -/******/ parentId: parentId -/******/ }; -/******/ } -/******/ if(outdatedModules.indexOf(parentId) >= 0) continue; -/******/ if(parent.hot._acceptedDependencies[moduleId]) { -/******/ if(!outdatedDependencies[parentId]) -/******/ outdatedDependencies[parentId] = []; -/******/ addAllToSet(outdatedDependencies[parentId], [moduleId]); -/******/ continue; -/******/ } -/******/ delete outdatedDependencies[parentId]; -/******/ outdatedModules.push(parentId); -/******/ queue.push({ -/******/ chain: chain.concat([parentId]), -/******/ id: parentId -/******/ }); -/******/ } -/******/ } -/******/ -/******/ return { -/******/ type: "accepted", -/******/ moduleId: updateModuleId, -/******/ outdatedModules: outdatedModules, -/******/ outdatedDependencies: outdatedDependencies -/******/ }; -/******/ } -/******/ -/******/ function addAllToSet(a, b) { -/******/ for(var i = 0; i < b.length; i++) { -/******/ var item = b[i]; -/******/ if(a.indexOf(item) < 0) -/******/ a.push(item); -/******/ } -/******/ } -/******/ -/******/ // at begin all updates modules are outdated -/******/ // the "outdated" status can propagate to parents if they don't accept the children -/******/ var outdatedDependencies = {}; -/******/ var outdatedModules = []; -/******/ var appliedUpdate = {}; -/******/ -/******/ var warnUnexpectedRequire = function warnUnexpectedRequire() { -/******/ console.warn("[HMR] unexpected require(" + result.moduleId + ") to disposed module"); -/******/ }; -/******/ -/******/ for(var id in hotUpdate) { -/******/ if(Object.prototype.hasOwnProperty.call(hotUpdate, id)) { -/******/ moduleId = toModuleId(id); -/******/ var result; -/******/ if(hotUpdate[id]) { -/******/ result = getAffectedStuff(moduleId); -/******/ } else { -/******/ result = { -/******/ type: "disposed", -/******/ moduleId: id -/******/ }; -/******/ } -/******/ var abortError = false; -/******/ var doApply = false; -/******/ var doDispose = false; -/******/ var chainInfo = ""; -/******/ if(result.chain) { -/******/ chainInfo = "\nUpdate propagation: " + result.chain.join(" -> "); -/******/ } -/******/ switch(result.type) { -/******/ case "self-declined": -/******/ if(options.onDeclined) -/******/ options.onDeclined(result); -/******/ if(!options.ignoreDeclined) -/******/ abortError = new Error("Aborted because of self decline: " + result.moduleId + chainInfo); -/******/ break; -/******/ case "declined": -/******/ if(options.onDeclined) -/******/ options.onDeclined(result); -/******/ if(!options.ignoreDeclined) -/******/ abortError = new Error("Aborted because of declined dependency: " + result.moduleId + " in " + result.parentId + chainInfo); -/******/ break; -/******/ case "unaccepted": -/******/ if(options.onUnaccepted) -/******/ options.onUnaccepted(result); -/******/ if(!options.ignoreUnaccepted) -/******/ abortError = new Error("Aborted because " + moduleId + " is not accepted" + chainInfo); -/******/ break; -/******/ case "accepted": -/******/ if(options.onAccepted) -/******/ options.onAccepted(result); -/******/ doApply = true; -/******/ break; -/******/ case "disposed": -/******/ if(options.onDisposed) -/******/ options.onDisposed(result); -/******/ doDispose = true; -/******/ break; -/******/ default: -/******/ throw new Error("Unexception type " + result.type); -/******/ } -/******/ if(abortError) { -/******/ hotSetStatus("abort"); -/******/ return Promise.reject(abortError); -/******/ } -/******/ if(doApply) { -/******/ appliedUpdate[moduleId] = hotUpdate[moduleId]; -/******/ addAllToSet(outdatedModules, result.outdatedModules); -/******/ for(moduleId in result.outdatedDependencies) { -/******/ if(Object.prototype.hasOwnProperty.call(result.outdatedDependencies, moduleId)) { -/******/ if(!outdatedDependencies[moduleId]) -/******/ outdatedDependencies[moduleId] = []; -/******/ addAllToSet(outdatedDependencies[moduleId], result.outdatedDependencies[moduleId]); -/******/ } -/******/ } -/******/ } -/******/ if(doDispose) { -/******/ addAllToSet(outdatedModules, [result.moduleId]); -/******/ appliedUpdate[moduleId] = warnUnexpectedRequire; -/******/ } -/******/ } -/******/ } -/******/ -/******/ // Store self accepted outdated modules to require them later by the module system -/******/ var outdatedSelfAcceptedModules = []; -/******/ for(i = 0; i < outdatedModules.length; i++) { -/******/ moduleId = outdatedModules[i]; -/******/ if(installedModules[moduleId] && installedModules[moduleId].hot._selfAccepted) -/******/ outdatedSelfAcceptedModules.push({ -/******/ module: moduleId, -/******/ errorHandler: installedModules[moduleId].hot._selfAccepted -/******/ }); -/******/ } -/******/ -/******/ // Now in "dispose" phase -/******/ hotSetStatus("dispose"); -/******/ Object.keys(hotAvailableFilesMap).forEach(function(chunkId) { -/******/ if(hotAvailableFilesMap[chunkId] === false) { -/******/ hotDisposeChunk(chunkId); -/******/ } -/******/ }); -/******/ -/******/ var idx; -/******/ var queue = outdatedModules.slice(); -/******/ while(queue.length > 0) { -/******/ moduleId = queue.pop(); -/******/ module = installedModules[moduleId]; -/******/ if(!module) continue; -/******/ -/******/ var data = {}; -/******/ -/******/ // Call dispose handlers -/******/ var disposeHandlers = module.hot._disposeHandlers; -/******/ for(j = 0; j < disposeHandlers.length; j++) { -/******/ cb = disposeHandlers[j]; -/******/ cb(data); -/******/ } -/******/ hotCurrentModuleData[moduleId] = data; -/******/ -/******/ // disable module (this disables requires from this module) -/******/ module.hot.active = false; -/******/ -/******/ // remove module from cache -/******/ delete installedModules[moduleId]; -/******/ -/******/ // remove "parents" references from all children -/******/ for(j = 0; j < module.children.length; j++) { -/******/ var child = installedModules[module.children[j]]; -/******/ if(!child) continue; -/******/ idx = child.parents.indexOf(moduleId); -/******/ if(idx >= 0) { -/******/ child.parents.splice(idx, 1); -/******/ } -/******/ } -/******/ } -/******/ -/******/ // remove outdated dependency from module children -/******/ var dependency; -/******/ var moduleOutdatedDependencies; -/******/ for(moduleId in outdatedDependencies) { -/******/ if(Object.prototype.hasOwnProperty.call(outdatedDependencies, moduleId)) { -/******/ module = installedModules[moduleId]; -/******/ if(module) { -/******/ moduleOutdatedDependencies = outdatedDependencies[moduleId]; -/******/ for(j = 0; j < moduleOutdatedDependencies.length; j++) { -/******/ dependency = moduleOutdatedDependencies[j]; -/******/ idx = module.children.indexOf(dependency); -/******/ if(idx >= 0) module.children.splice(idx, 1); -/******/ } -/******/ } -/******/ } -/******/ } -/******/ -/******/ // Not in "apply" phase -/******/ hotSetStatus("apply"); -/******/ -/******/ hotCurrentHash = hotUpdateNewHash; -/******/ -/******/ // insert new code -/******/ for(moduleId in appliedUpdate) { -/******/ if(Object.prototype.hasOwnProperty.call(appliedUpdate, moduleId)) { -/******/ modules[moduleId] = appliedUpdate[moduleId]; -/******/ } -/******/ } -/******/ -/******/ // call accept handlers -/******/ var error = null; -/******/ for(moduleId in outdatedDependencies) { -/******/ if(Object.prototype.hasOwnProperty.call(outdatedDependencies, moduleId)) { -/******/ module = installedModules[moduleId]; -/******/ moduleOutdatedDependencies = outdatedDependencies[moduleId]; -/******/ var callbacks = []; -/******/ for(i = 0; i < moduleOutdatedDependencies.length; i++) { -/******/ dependency = moduleOutdatedDependencies[i]; -/******/ cb = module.hot._acceptedDependencies[dependency]; -/******/ if(callbacks.indexOf(cb) >= 0) continue; -/******/ callbacks.push(cb); -/******/ } -/******/ for(i = 0; i < callbacks.length; i++) { -/******/ cb = callbacks[i]; -/******/ try { -/******/ cb(moduleOutdatedDependencies); -/******/ } catch(err) { -/******/ if(options.onErrored) { -/******/ options.onErrored({ -/******/ type: "accept-errored", -/******/ moduleId: moduleId, -/******/ dependencyId: moduleOutdatedDependencies[i], -/******/ error: err -/******/ }); -/******/ } -/******/ if(!options.ignoreErrored) { -/******/ if(!error) -/******/ error = err; -/******/ } -/******/ } -/******/ } -/******/ } -/******/ } -/******/ -/******/ // Load self accepted modules -/******/ for(i = 0; i < outdatedSelfAcceptedModules.length; i++) { -/******/ var item = outdatedSelfAcceptedModules[i]; -/******/ moduleId = item.module; -/******/ hotCurrentParents = [moduleId]; -/******/ try { -/******/ __webpack_require__(moduleId); -/******/ } catch(err) { -/******/ if(typeof item.errorHandler === "function") { -/******/ try { -/******/ item.errorHandler(err); -/******/ } catch(err2) { -/******/ if(options.onErrored) { -/******/ options.onErrored({ -/******/ type: "self-accept-error-handler-errored", -/******/ moduleId: moduleId, -/******/ error: err2, -/******/ orginalError: err -/******/ }); -/******/ } -/******/ if(!options.ignoreErrored) { -/******/ if(!error) -/******/ error = err2; -/******/ } -/******/ if(!error) -/******/ error = err; -/******/ } -/******/ } else { -/******/ if(options.onErrored) { -/******/ options.onErrored({ -/******/ type: "self-accept-errored", -/******/ moduleId: moduleId, -/******/ error: err -/******/ }); -/******/ } -/******/ if(!options.ignoreErrored) { -/******/ if(!error) -/******/ error = err; -/******/ } -/******/ } -/******/ } -/******/ } -/******/ -/******/ // handle errors in accept handlers and self accepted module load -/******/ if(error) { -/******/ hotSetStatus("fail"); -/******/ return Promise.reject(error); -/******/ } -/******/ -/******/ hotSetStatus("idle"); -/******/ return Promise.resolve(outdatedModules); -/******/ } +/******/ +/******/ +/******/ var hotApplyOnUpdate = true; +/******/ var hotCurrentHash = "623dfc2b357036468bb6"; // eslint-disable-line no-unused-vars +/******/ var hotCurrentModuleData = {}; +/******/ var hotMainModule = true; // eslint-disable-line no-unused-vars +/******/ var hotCurrentParents = []; // eslint-disable-line no-unused-vars +/******/ var hotCurrentParentsTemp = []; // eslint-disable-line no-unused-vars +/******/ +/******/ function hotCreateRequire(moduleId) { // eslint-disable-line no-unused-vars +/******/ var me = installedModules[moduleId]; +/******/ if(!me) return __webpack_require__; +/******/ var fn = function(request) { +/******/ if(me.hot.active) { +/******/ if(installedModules[request]) { +/******/ if(installedModules[request].parents.indexOf(moduleId) < 0) +/******/ installedModules[request].parents.push(moduleId); +/******/ } else hotCurrentParents = [moduleId]; +/******/ if(me.children.indexOf(request) < 0) +/******/ me.children.push(request); +/******/ } else { +/******/ console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId); +/******/ hotCurrentParents = []; +/******/ } +/******/ hotMainModule = false; +/******/ return __webpack_require__(request); +/******/ }; +/******/ var ObjectFactory = function ObjectFactory(name) { +/******/ return { +/******/ configurable: true, +/******/ enumerable: true, +/******/ get: function() { +/******/ return __webpack_require__[name]; +/******/ }, +/******/ set: function(value) { +/******/ __webpack_require__[name] = value; +/******/ } +/******/ }; +/******/ }; +/******/ for(var name in __webpack_require__) { +/******/ if(Object.prototype.hasOwnProperty.call(__webpack_require__, name)) { +/******/ Object.defineProperty(fn, name, ObjectFactory(name)); +/******/ } +/******/ } +/******/ Object.defineProperty(fn, "e", { +/******/ enumerable: true, +/******/ value: function(chunkId) { +/******/ if(hotStatus === "ready") +/******/ hotSetStatus("prepare"); +/******/ hotChunksLoading++; +/******/ return __webpack_require__.e(chunkId).then(finishChunkLoading, function(err) { +/******/ finishChunkLoading(); +/******/ throw err; +/******/ }); +/******/ +/******/ function finishChunkLoading() { +/******/ hotChunksLoading--; +/******/ if(hotStatus === "prepare") { +/******/ if(!hotWaitingFilesMap[chunkId]) { +/******/ hotEnsureUpdateChunk(chunkId); +/******/ } +/******/ if(hotChunksLoading === 0 && hotWaitingFiles === 0) { +/******/ hotUpdateDownloaded(); +/******/ } +/******/ } +/******/ } +/******/ } +/******/ }); +/******/ return fn; +/******/ } +/******/ +/******/ function hotCreateModule(moduleId) { // eslint-disable-line no-unused-vars +/******/ var hot = { +/******/ // private stuff +/******/ _acceptedDependencies: {}, +/******/ _declinedDependencies: {}, +/******/ _selfAccepted: false, +/******/ _selfDeclined: false, +/******/ _disposeHandlers: [], +/******/ _main: hotMainModule, +/******/ +/******/ // Module API +/******/ active: true, +/******/ accept: function(dep, callback) { +/******/ if(typeof dep === "undefined") +/******/ hot._selfAccepted = true; +/******/ else if(typeof dep === "function") +/******/ hot._selfAccepted = dep; +/******/ else if(typeof dep === "object") +/******/ for(var i = 0; i < dep.length; i++) +/******/ hot._acceptedDependencies[dep[i]] = callback || function() {}; +/******/ else +/******/ hot._acceptedDependencies[dep] = callback || function() {}; +/******/ }, +/******/ decline: function(dep) { +/******/ if(typeof dep === "undefined") +/******/ hot._selfDeclined = true; +/******/ else if(typeof dep === "object") +/******/ for(var i = 0; i < dep.length; i++) +/******/ hot._declinedDependencies[dep[i]] = true; +/******/ else +/******/ hot._declinedDependencies[dep] = true; +/******/ }, +/******/ dispose: function(callback) { +/******/ hot._disposeHandlers.push(callback); +/******/ }, +/******/ addDisposeHandler: function(callback) { +/******/ hot._disposeHandlers.push(callback); +/******/ }, +/******/ removeDisposeHandler: function(callback) { +/******/ var idx = hot._disposeHandlers.indexOf(callback); +/******/ if(idx >= 0) hot._disposeHandlers.splice(idx, 1); +/******/ }, +/******/ +/******/ // Management API +/******/ check: hotCheck, +/******/ apply: hotApply, +/******/ status: function(l) { +/******/ if(!l) return hotStatus; +/******/ hotStatusHandlers.push(l); +/******/ }, +/******/ addStatusHandler: function(l) { +/******/ hotStatusHandlers.push(l); +/******/ }, +/******/ removeStatusHandler: function(l) { +/******/ var idx = hotStatusHandlers.indexOf(l); +/******/ if(idx >= 0) hotStatusHandlers.splice(idx, 1); +/******/ }, +/******/ +/******/ //inherit from previous dispose call +/******/ data: hotCurrentModuleData[moduleId] +/******/ }; +/******/ hotMainModule = true; +/******/ return hot; +/******/ } +/******/ +/******/ var hotStatusHandlers = []; +/******/ var hotStatus = "idle"; +/******/ +/******/ function hotSetStatus(newStatus) { +/******/ hotStatus = newStatus; +/******/ for(var i = 0; i < hotStatusHandlers.length; i++) +/******/ hotStatusHandlers[i].call(null, newStatus); +/******/ } +/******/ +/******/ // while downloading +/******/ var hotWaitingFiles = 0; +/******/ var hotChunksLoading = 0; +/******/ var hotWaitingFilesMap = {}; +/******/ var hotRequestedFilesMap = {}; +/******/ var hotAvailableFilesMap = {}; +/******/ var hotDeferred; +/******/ +/******/ // The update info +/******/ var hotUpdate, hotUpdateNewHash; +/******/ +/******/ function toModuleId(id) { +/******/ var isNumber = (+id) + "" === id; +/******/ return isNumber ? +id : id; +/******/ } +/******/ +/******/ function hotCheck(apply) { +/******/ if(hotStatus !== "idle") throw new Error("check() is only allowed in idle status"); +/******/ hotApplyOnUpdate = apply; +/******/ hotSetStatus("check"); +/******/ return hotDownloadManifest().then(function(update) { +/******/ if(!update) { +/******/ hotSetStatus("idle"); +/******/ return null; +/******/ } +/******/ +/******/ hotRequestedFilesMap = {}; +/******/ hotWaitingFilesMap = {}; +/******/ hotAvailableFilesMap = update.c; +/******/ hotUpdateNewHash = update.h; +/******/ +/******/ hotSetStatus("prepare"); +/******/ var promise = new Promise(function(resolve, reject) { +/******/ hotDeferred = { +/******/ resolve: resolve, +/******/ reject: reject +/******/ }; +/******/ }); +/******/ hotUpdate = {}; +/******/ var chunkId = 0; +/******/ { // eslint-disable-line no-lone-blocks +/******/ /*globals chunkId */ +/******/ hotEnsureUpdateChunk(chunkId); +/******/ } +/******/ if(hotStatus === "prepare" && hotChunksLoading === 0 && hotWaitingFiles === 0) { +/******/ hotUpdateDownloaded(); +/******/ } +/******/ return promise; +/******/ }); +/******/ } +/******/ +/******/ function hotAddUpdateChunk(chunkId, moreModules) { // eslint-disable-line no-unused-vars +/******/ if(!hotAvailableFilesMap[chunkId] || !hotRequestedFilesMap[chunkId]) +/******/ return; +/******/ hotRequestedFilesMap[chunkId] = false; +/******/ for(var moduleId in moreModules) { +/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { +/******/ hotUpdate[moduleId] = moreModules[moduleId]; +/******/ } +/******/ } +/******/ if(--hotWaitingFiles === 0 && hotChunksLoading === 0) { +/******/ hotUpdateDownloaded(); +/******/ } +/******/ } +/******/ +/******/ function hotEnsureUpdateChunk(chunkId) { +/******/ if(!hotAvailableFilesMap[chunkId]) { +/******/ hotWaitingFilesMap[chunkId] = true; +/******/ } else { +/******/ hotRequestedFilesMap[chunkId] = true; +/******/ hotWaitingFiles++; +/******/ hotDownloadUpdateChunk(chunkId); +/******/ } +/******/ } +/******/ +/******/ function hotUpdateDownloaded() { +/******/ hotSetStatus("ready"); +/******/ var deferred = hotDeferred; +/******/ hotDeferred = null; +/******/ if(!deferred) return; +/******/ if(hotApplyOnUpdate) { +/******/ hotApply(hotApplyOnUpdate).then(function(result) { +/******/ deferred.resolve(result); +/******/ }, function(err) { +/******/ deferred.reject(err); +/******/ }); +/******/ } else { +/******/ var outdatedModules = []; +/******/ for(var id in hotUpdate) { +/******/ if(Object.prototype.hasOwnProperty.call(hotUpdate, id)) { +/******/ outdatedModules.push(toModuleId(id)); +/******/ } +/******/ } +/******/ deferred.resolve(outdatedModules); +/******/ } +/******/ } +/******/ +/******/ function hotApply(options) { +/******/ if(hotStatus !== "ready") throw new Error("apply() is only allowed in ready status"); +/******/ options = options || {}; +/******/ +/******/ var cb; +/******/ var i; +/******/ var j; +/******/ var module; +/******/ var moduleId; +/******/ +/******/ function getAffectedStuff(updateModuleId) { +/******/ var outdatedModules = [updateModuleId]; +/******/ var outdatedDependencies = {}; +/******/ +/******/ var queue = outdatedModules.slice().map(function(id) { +/******/ return { +/******/ chain: [id], +/******/ id: id +/******/ }; +/******/ }); +/******/ while(queue.length > 0) { +/******/ var queueItem = queue.pop(); +/******/ var moduleId = queueItem.id; +/******/ var chain = queueItem.chain; +/******/ module = installedModules[moduleId]; +/******/ if(!module || module.hot._selfAccepted) +/******/ continue; +/******/ if(module.hot._selfDeclined) { +/******/ return { +/******/ type: "self-declined", +/******/ chain: chain, +/******/ moduleId: moduleId +/******/ }; +/******/ } +/******/ if(module.hot._main) { +/******/ return { +/******/ type: "unaccepted", +/******/ chain: chain, +/******/ moduleId: moduleId +/******/ }; +/******/ } +/******/ for(var i = 0; i < module.parents.length; i++) { +/******/ var parentId = module.parents[i]; +/******/ var parent = installedModules[parentId]; +/******/ if(!parent) continue; +/******/ if(parent.hot._declinedDependencies[moduleId]) { +/******/ return { +/******/ type: "declined", +/******/ chain: chain.concat([parentId]), +/******/ moduleId: moduleId, +/******/ parentId: parentId +/******/ }; +/******/ } +/******/ if(outdatedModules.indexOf(parentId) >= 0) continue; +/******/ if(parent.hot._acceptedDependencies[moduleId]) { +/******/ if(!outdatedDependencies[parentId]) +/******/ outdatedDependencies[parentId] = []; +/******/ addAllToSet(outdatedDependencies[parentId], [moduleId]); +/******/ continue; +/******/ } +/******/ delete outdatedDependencies[parentId]; +/******/ outdatedModules.push(parentId); +/******/ queue.push({ +/******/ chain: chain.concat([parentId]), +/******/ id: parentId +/******/ }); +/******/ } +/******/ } +/******/ +/******/ return { +/******/ type: "accepted", +/******/ moduleId: updateModuleId, +/******/ outdatedModules: outdatedModules, +/******/ outdatedDependencies: outdatedDependencies +/******/ }; +/******/ } +/******/ +/******/ function addAllToSet(a, b) { +/******/ for(var i = 0; i < b.length; i++) { +/******/ var item = b[i]; +/******/ if(a.indexOf(item) < 0) +/******/ a.push(item); +/******/ } +/******/ } +/******/ +/******/ // at begin all updates modules are outdated +/******/ // the "outdated" status can propagate to parents if they don't accept the children +/******/ var outdatedDependencies = {}; +/******/ var outdatedModules = []; +/******/ var appliedUpdate = {}; +/******/ +/******/ var warnUnexpectedRequire = function warnUnexpectedRequire() { +/******/ console.warn("[HMR] unexpected require(" + result.moduleId + ") to disposed module"); +/******/ }; +/******/ +/******/ for(var id in hotUpdate) { +/******/ if(Object.prototype.hasOwnProperty.call(hotUpdate, id)) { +/******/ moduleId = toModuleId(id); +/******/ var result; +/******/ if(hotUpdate[id]) { +/******/ result = getAffectedStuff(moduleId); +/******/ } else { +/******/ result = { +/******/ type: "disposed", +/******/ moduleId: id +/******/ }; +/******/ } +/******/ var abortError = false; +/******/ var doApply = false; +/******/ var doDispose = false; +/******/ var chainInfo = ""; +/******/ if(result.chain) { +/******/ chainInfo = "\nUpdate propagation: " + result.chain.join(" -> "); +/******/ } +/******/ switch(result.type) { +/******/ case "self-declined": +/******/ if(options.onDeclined) +/******/ options.onDeclined(result); +/******/ if(!options.ignoreDeclined) +/******/ abortError = new Error("Aborted because of self decline: " + result.moduleId + chainInfo); +/******/ break; +/******/ case "declined": +/******/ if(options.onDeclined) +/******/ options.onDeclined(result); +/******/ if(!options.ignoreDeclined) +/******/ abortError = new Error("Aborted because of declined dependency: " + result.moduleId + " in " + result.parentId + chainInfo); +/******/ break; +/******/ case "unaccepted": +/******/ if(options.onUnaccepted) +/******/ options.onUnaccepted(result); +/******/ if(!options.ignoreUnaccepted) +/******/ abortError = new Error("Aborted because " + moduleId + " is not accepted" + chainInfo); +/******/ break; +/******/ case "accepted": +/******/ if(options.onAccepted) +/******/ options.onAccepted(result); +/******/ doApply = true; +/******/ break; +/******/ case "disposed": +/******/ if(options.onDisposed) +/******/ options.onDisposed(result); +/******/ doDispose = true; +/******/ break; +/******/ default: +/******/ throw new Error("Unexception type " + result.type); +/******/ } +/******/ if(abortError) { +/******/ hotSetStatus("abort"); +/******/ return Promise.reject(abortError); +/******/ } +/******/ if(doApply) { +/******/ appliedUpdate[moduleId] = hotUpdate[moduleId]; +/******/ addAllToSet(outdatedModules, result.outdatedModules); +/******/ for(moduleId in result.outdatedDependencies) { +/******/ if(Object.prototype.hasOwnProperty.call(result.outdatedDependencies, moduleId)) { +/******/ if(!outdatedDependencies[moduleId]) +/******/ outdatedDependencies[moduleId] = []; +/******/ addAllToSet(outdatedDependencies[moduleId], result.outdatedDependencies[moduleId]); +/******/ } +/******/ } +/******/ } +/******/ if(doDispose) { +/******/ addAllToSet(outdatedModules, [result.moduleId]); +/******/ appliedUpdate[moduleId] = warnUnexpectedRequire; +/******/ } +/******/ } +/******/ } +/******/ +/******/ // Store self accepted outdated modules to require them later by the module system +/******/ var outdatedSelfAcceptedModules = []; +/******/ for(i = 0; i < outdatedModules.length; i++) { +/******/ moduleId = outdatedModules[i]; +/******/ if(installedModules[moduleId] && installedModules[moduleId].hot._selfAccepted) +/******/ outdatedSelfAcceptedModules.push({ +/******/ module: moduleId, +/******/ errorHandler: installedModules[moduleId].hot._selfAccepted +/******/ }); +/******/ } +/******/ +/******/ // Now in "dispose" phase +/******/ hotSetStatus("dispose"); +/******/ Object.keys(hotAvailableFilesMap).forEach(function(chunkId) { +/******/ if(hotAvailableFilesMap[chunkId] === false) { +/******/ hotDisposeChunk(chunkId); +/******/ } +/******/ }); +/******/ +/******/ var idx; +/******/ var queue = outdatedModules.slice(); +/******/ while(queue.length > 0) { +/******/ moduleId = queue.pop(); +/******/ module = installedModules[moduleId]; +/******/ if(!module) continue; +/******/ +/******/ var data = {}; +/******/ +/******/ // Call dispose handlers +/******/ var disposeHandlers = module.hot._disposeHandlers; +/******/ for(j = 0; j < disposeHandlers.length; j++) { +/******/ cb = disposeHandlers[j]; +/******/ cb(data); +/******/ } +/******/ hotCurrentModuleData[moduleId] = data; +/******/ +/******/ // disable module (this disables requires from this module) +/******/ module.hot.active = false; +/******/ +/******/ // remove module from cache +/******/ delete installedModules[moduleId]; +/******/ +/******/ // remove "parents" references from all children +/******/ for(j = 0; j < module.children.length; j++) { +/******/ var child = installedModules[module.children[j]]; +/******/ if(!child) continue; +/******/ idx = child.parents.indexOf(moduleId); +/******/ if(idx >= 0) { +/******/ child.parents.splice(idx, 1); +/******/ } +/******/ } +/******/ } +/******/ +/******/ // remove outdated dependency from module children +/******/ var dependency; +/******/ var moduleOutdatedDependencies; +/******/ for(moduleId in outdatedDependencies) { +/******/ if(Object.prototype.hasOwnProperty.call(outdatedDependencies, moduleId)) { +/******/ module = installedModules[moduleId]; +/******/ if(module) { +/******/ moduleOutdatedDependencies = outdatedDependencies[moduleId]; +/******/ for(j = 0; j < moduleOutdatedDependencies.length; j++) { +/******/ dependency = moduleOutdatedDependencies[j]; +/******/ idx = module.children.indexOf(dependency); +/******/ if(idx >= 0) module.children.splice(idx, 1); +/******/ } +/******/ } +/******/ } +/******/ } +/******/ +/******/ // Not in "apply" phase +/******/ hotSetStatus("apply"); +/******/ +/******/ hotCurrentHash = hotUpdateNewHash; +/******/ +/******/ // insert new code +/******/ for(moduleId in appliedUpdate) { +/******/ if(Object.prototype.hasOwnProperty.call(appliedUpdate, moduleId)) { +/******/ modules[moduleId] = appliedUpdate[moduleId]; +/******/ } +/******/ } +/******/ +/******/ // call accept handlers +/******/ var error = null; +/******/ for(moduleId in outdatedDependencies) { +/******/ if(Object.prototype.hasOwnProperty.call(outdatedDependencies, moduleId)) { +/******/ module = installedModules[moduleId]; +/******/ moduleOutdatedDependencies = outdatedDependencies[moduleId]; +/******/ var callbacks = []; +/******/ for(i = 0; i < moduleOutdatedDependencies.length; i++) { +/******/ dependency = moduleOutdatedDependencies[i]; +/******/ cb = module.hot._acceptedDependencies[dependency]; +/******/ if(callbacks.indexOf(cb) >= 0) continue; +/******/ callbacks.push(cb); +/******/ } +/******/ for(i = 0; i < callbacks.length; i++) { +/******/ cb = callbacks[i]; +/******/ try { +/******/ cb(moduleOutdatedDependencies); +/******/ } catch(err) { +/******/ if(options.onErrored) { +/******/ options.onErrored({ +/******/ type: "accept-errored", +/******/ moduleId: moduleId, +/******/ dependencyId: moduleOutdatedDependencies[i], +/******/ error: err +/******/ }); +/******/ } +/******/ if(!options.ignoreErrored) { +/******/ if(!error) +/******/ error = err; +/******/ } +/******/ } +/******/ } +/******/ } +/******/ } +/******/ +/******/ // Load self accepted modules +/******/ for(i = 0; i < outdatedSelfAcceptedModules.length; i++) { +/******/ var item = outdatedSelfAcceptedModules[i]; +/******/ moduleId = item.module; +/******/ hotCurrentParents = [moduleId]; +/******/ try { +/******/ __webpack_require__(moduleId); +/******/ } catch(err) { +/******/ if(typeof item.errorHandler === "function") { +/******/ try { +/******/ item.errorHandler(err); +/******/ } catch(err2) { +/******/ if(options.onErrored) { +/******/ options.onErrored({ +/******/ type: "self-accept-error-handler-errored", +/******/ moduleId: moduleId, +/******/ error: err2, +/******/ orginalError: err +/******/ }); +/******/ } +/******/ if(!options.ignoreErrored) { +/******/ if(!error) +/******/ error = err2; +/******/ } +/******/ if(!error) +/******/ error = err; +/******/ } +/******/ } else { +/******/ if(options.onErrored) { +/******/ options.onErrored({ +/******/ type: "self-accept-errored", +/******/ moduleId: moduleId, +/******/ error: err +/******/ }); +/******/ } +/******/ if(!options.ignoreErrored) { +/******/ if(!error) +/******/ error = err; +/******/ } +/******/ } +/******/ } +/******/ } +/******/ +/******/ // handle errors in accept handlers and self accepted module load +/******/ if(error) { +/******/ hotSetStatus("fail"); +/******/ return Promise.reject(error); +/******/ } +/******/ +/******/ hotSetStatus("idle"); +/******/ return Promise.resolve(outdatedModules); +/******/ } /******/ /******/ // The module cache /******/ var installedModules = {}; @@ -944,27 +944,27 @@ module.exports = reactProdInvariant; \***********************************/ /***/ (function(module, exports) { -var g; - -// This works in non-strict mode -g = (function() { - return this; -})(); - -try { - // This works if eval is allowed (see CSP) - g = g || Function("return this")() || (1,eval)("this"); -} catch(e) { - // This works if the window reference is available - if(typeof window === "object") - g = window; -} - -// g can still be undefined, but nothing to do about it... -// We return undefined, instead of nothing here, so it's -// easier to handle this case. if(!global) { ...} - -module.exports = g; +var g; + +// This works in non-strict mode +g = (function() { + return this; +})(); + +try { + // This works if eval is allowed (see CSP) + g = g || Function("return this")() || (1,eval)("this"); +} catch(e) { + // This works if the window reference is available + if(typeof window === "object") + g = window; +} + +// g can still be undefined, but nothing to do about it... +// We return undefined, instead of nothing here, so it's +// easier to handle this case. if(!global) { ...} + +module.exports = g; /***/ }), @@ -10540,28 +10540,28 @@ module.exports = getIteratorFn; \***********************************/ /***/ (function(module, exports) { -module.exports = function(module) { - if(!module.webpackPolyfill) { - module.deprecate = function() {}; - module.paths = []; - // module.parent = undefined by default - if(!module.children) module.children = []; - Object.defineProperty(module, "loaded", { - enumerable: true, - get: function() { - return module.l; - } - }); - Object.defineProperty(module, "id", { - enumerable: true, - get: function() { - return module.i; - } - }); - module.webpackPolyfill = 1; - } - return module; -}; +module.exports = function(module) { + if(!module.webpackPolyfill) { + module.deprecate = function() {}; + module.paths = []; + // module.parent = undefined by default + if(!module.children) module.children = []; + Object.defineProperty(module, "loaded", { + enumerable: true, + get: function() { + return module.l; + } + }); + Object.defineProperty(module, "id", { + enumerable: true, + get: function() { + return module.i; + } + }); + module.webpackPolyfill = 1; + } + return module; +}; /***/ }), @@ -40730,8 +40730,8 @@ module.exports = { \****************************************/ /***/ (function(module, exports) { -/* WEBPACK VAR INJECTION */(function(__webpack_amd_options__) {/* globals __webpack_amd_options__ */ -module.exports = __webpack_amd_options__; +/* WEBPACK VAR INJECTION */(function(__webpack_amd_options__) {/* globals __webpack_amd_options__ */ +module.exports = __webpack_amd_options__; /* WEBPACK VAR INJECTION */}.call(exports, {})) diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index f2a2994f00c..d5373a17032 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -1,7 +1,65 @@ -# react-scripts +# ☢ custom-react-scripts ☢ +Latest version of original react-scripts: **1.0.17** -This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).
-Please refer to its documentation: +### ⚠️ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. -* [Getting Started](https://github.com/facebook/create-react-app/blob/master/README.md#getting-started) – How to create a new app. -* [User Guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. +The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). + +### 💡Features: +* Decorators +* babel-preset-stage-0 +* Less +* Sass +* CSS modules +* Sass modules +* Less modules +* Stylus modules + +**the features are optional and can be turned on/off individually* + +### ❔How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` + +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below 👇 to enable that feature. + +The generated project comes with every option turned on by default, but you can remove them at any time by removing the options from the ```.env``` file. + +### 📝 Configuration options + +#### Styling +- ```REACT_APP_CSS_MODULE_CLASSNAME_TEMPLATE='module-[sha512:hash:base32]-[name]-[local]'``` - add custom CSS Module hash ident name + +Note: to use modules the file must be named in the following format: ```$name.module.$preprocessorName```. + +For example ```styles.module.css``` or ```header.module.sass``` or ```footer.module.less```, etc. Files that are not prefixed with module will be parsed normally. + +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support + +#### Other +- ```REACT_APP_WEBPACK_DASHBOARD=true``` - Enables connection to the[webpack-dashboard](https://github.com/FormidableLabs/electron-webpack-dashboard) Electron app (the app must be installed on local machine) + +### 🤔 Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: + +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. + +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. + +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. + +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. + +From the original readme: +> To define permanent environment vairables, create a file called .env in the root of your project: +> ```REACT_APP_SECRET_CODE=abcdef``` + +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. + +### Future plans + +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. diff --git a/packages/react-scripts/bin/CUSTOM_README.md b/packages/react-scripts/bin/CUSTOM_README.md new file mode 100644 index 00000000000..1776dce86cf --- /dev/null +++ b/packages/react-scripts/bin/CUSTOM_README.md @@ -0,0 +1,65 @@ +# ☢ custom-react-scripts ☢ +Latest version of original react-scripts: **0.8.4** + +### ⚠️ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. + +The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). + +### 💡Features: +* Decorators +* babel-preset-stage-0 +* LESS +* SASS +* CSS modules + +**the features are optional and can be turned on/off individually* + +### ❔How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` + +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below 👇 to enable that feature. + +The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. + +### 📝 Configuration options + +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_STYLUS=true``` - enable Stylus support +- ```REACT_APP_CSS_MODULES``` - enable CSS modules + +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support + +> ⚠️ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. +> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. + +#### Others +- ```PORT=3015``` - change default port (supported in CRA by default) +- ```OPEN_BROWSER=false``` - don't open browser after running webpack server + +### 🤔 Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: + +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. + +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. + +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. + +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. + +From the original readme: +> To define permanent environment vairables, create a file called .env in the root of your project: +> REACT_APP_SECRET_CODE=abcdef + +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. + +### Future plans + +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. diff --git a/packages/react-scripts/config/custom-react-scripts/config.js b/packages/react-scripts/config/custom-react-scripts/config.js new file mode 100644 index 00000000000..25819dad1bc --- /dev/null +++ b/packages/react-scripts/config/custom-react-scripts/config.js @@ -0,0 +1,24 @@ +const mapObject = require('./utils/map-object'); + +const customizers = { + babelPlugins: require('./customizers/babel-plugins'), + babelPresets: require('./customizers/babel-presets'), + webpackLoaders: require('./customizers/webpack-loaders'), + webpackPlugins: require('./customizers/webpack-plugins'), +}; + +module.exports = getCustomConfig = (isDev = true) => { + var env = env || {}; + const result = mapObject(customizers, group => { + return mapObject( + group, + (customizer, key) => { + const envValue = process.env['REACT_APP_' + key]; + const activeEnvValue = env && envValue && envValue !== 'false'; + return (activeEnvValue || customizer.default) && customizer.get(isDev); + }, + true + ); + }); + return result; +}; diff --git a/packages/react-scripts/config/custom-react-scripts/customizers/babel-plugins.js b/packages/react-scripts/config/custom-react-scripts/customizers/babel-plugins.js new file mode 100644 index 00000000000..bdbec9940f9 --- /dev/null +++ b/packages/react-scripts/config/custom-react-scripts/customizers/babel-plugins.js @@ -0,0 +1,13 @@ +module.exports = { + DECORATORS: { + get: () => require.resolve('babel-plugin-transform-decorators-legacy'), + }, + ANTD: { + get: () => + [require.resolve('babel-plugin-import')].concat({ + libraryName: 'antd', + libraryDirectory: 'es', + style: true, + }), + }, +}; diff --git a/packages/react-scripts/config/custom-react-scripts/customizers/babel-presets.js b/packages/react-scripts/config/custom-react-scripts/customizers/babel-presets.js new file mode 100644 index 00000000000..1060a35c5b6 --- /dev/null +++ b/packages/react-scripts/config/custom-react-scripts/customizers/babel-presets.js @@ -0,0 +1,5 @@ +module.exports = { + BABEL_STAGE_0: { + get: () => require.resolve('babel-preset-stage-0'), + }, +}; diff --git a/packages/react-scripts/config/custom-react-scripts/customizers/webpack-plugins.js b/packages/react-scripts/config/custom-react-scripts/customizers/webpack-plugins.js new file mode 100644 index 00000000000..58f9f6e90e6 --- /dev/null +++ b/packages/react-scripts/config/custom-react-scripts/customizers/webpack-plugins.js @@ -0,0 +1,7 @@ +const DashboardPlugin = require('webpack-dashboard/plugin'); + +module.exports = { + WEBPACK_DASHBOARD: { + get: () => new DashboardPlugin(), + }, +}; diff --git a/packages/react-scripts/config/custom-react-scripts/options/extract-text-plugin-options.js b/packages/react-scripts/config/custom-react-scripts/options/extract-text-plugin-options.js new file mode 100644 index 00000000000..c64d52dc3c9 --- /dev/null +++ b/packages/react-scripts/config/custom-react-scripts/options/extract-text-plugin-options.js @@ -0,0 +1,10 @@ +const paths = require('../../paths'); + +const publicPath = paths.servedPath; +const cssFilename = 'static/css/[name].[contenthash:8].css'; +const shouldUseRelativeAssetPaths = publicPath === './'; + +module.exports = shouldUseRelativeAssetPaths + ? // Making sure that the publicPath goes back to to build folder. + { publicPath: Array(cssFilename.split('/').length).join('../') } + : {}; diff --git a/packages/react-scripts/config/custom-react-scripts/utils/map-object.js b/packages/react-scripts/config/custom-react-scripts/utils/map-object.js new file mode 100644 index 00000000000..c60b072a031 --- /dev/null +++ b/packages/react-scripts/config/custom-react-scripts/utils/map-object.js @@ -0,0 +1,13 @@ +module.exports = function mapObject(obj, fn, toArray) { + return Object.keys(obj).reduce(function(final, key) { + var result = fn(obj[key], key); + if (!result) { + return final; + } + if (toArray) { + final.push(result); + } + final[key] = result; + return final; + }, toArray ? [] : {}); +}; diff --git a/packages/react-scripts/config/jest/babelTransform.js b/packages/react-scripts/config/jest/babelTransform.js index 8792f3f6473..3be310edc26 100644 --- a/packages/react-scripts/config/jest/babelTransform.js +++ b/packages/react-scripts/config/jest/babelTransform.js @@ -9,10 +9,17 @@ 'use strict'; const babelJest = require('babel-jest'); +const getCustomConfig = require('../custom-react-scripts/config'); + +//Get custom configuration for injecting plugins, presets and loaders +const customConfig = getCustomConfig(true); module.exports = babelJest.createTransformer({ - presets: [require.resolve('babel-preset-react-app')], + presets: [require.resolve('babel-preset-react-app')].concat( + customConfig.babelPresets + ), // @remove-on-eject-begin babelrc: false, // @remove-on-eject-end + plugins: customConfig.babelPlugins, }); diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index db371dda6e8..f4548c961a0 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -21,6 +21,7 @@ const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent') const getClientEnvironment = require('./env'); const paths = require('./paths'); const ManifestPlugin = require('webpack-manifest-plugin'); +const getCustomConfig = require('./custom-react-scripts/config'); // Webpack uses `publicPath` to determine where the app is being served from. // In development, we always serve from the root. This makes config easier. @@ -31,10 +32,14 @@ const publicPath = '/'; const publicUrl = ''; // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); +//Get custom configuration for injecting plugins, presets and loaders +const customConfig = getCustomConfig(true); // style files regexes -const cssRegex = /\.css$/; -const cssModuleRegex = /\.module\.css$/; +const cssRegex = /\.(css|pcss)$/; +const cssModuleRegex = /\.module\.(css|pcss)$/; +const lessRegex = /\.less$/; +const lessModuleRegex = /\.module\.less$/; const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/; @@ -107,9 +112,9 @@ module.exports = { // This does not produce a real file. It's just the virtual path that is // served by WebpackDevServer in development. This is the JS bundle // containing code from all our entry points, and the Webpack runtime. - filename: 'static/js/bundle.js', + filename: `${process.env.REACT_APP_STATIC}/js/bundle.js`, // There are also additional JS chunk files if you use code splitting. - chunkFilename: 'static/js/[name].chunk.js', + chunkFilename: `${process.env.REACT_APP_STATIC}/js/[name].chunk.js`, // This is the URL that app is served from. We use "/" in development. publicPath: publicPath, // Point sourcemap entries to original disk location (format as URL on Windows) @@ -210,7 +215,9 @@ module.exports = { loader: require.resolve('url-loader'), options: { limit: 10000, - name: 'static/media/[name].[hash:8].[ext]', + name: `${process.env.REACT_APP_STATIC}/${ + process.env.REACT_APP_MEDIA + }/[name].[hash:8].[ext]`, }, }, // Process application JS with Babel. @@ -225,7 +232,7 @@ module.exports = { { loader: require.resolve('thread-loader'), options: { - poolTimeout: Infinity // keep workers alive for more effective watch mode + poolTimeout: Infinity, // keep workers alive for more effective watch mode }, }, { @@ -234,7 +241,9 @@ module.exports = { // @remove-on-eject-begin babelrc: false, // @remove-on-eject-end - presets: [require.resolve('babel-preset-react-app')], + presets: [require.resolve('babel-preset-react-app')].concat( + customConfig.babelPresets + ), plugins: [ [ require.resolve('babel-plugin-named-asset-import'), @@ -246,7 +255,7 @@ module.exports = { }, }, ], - ], + ].concat(customConfig.babelPlugin), // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/babel-loader/ // directory for faster rebuilds. @@ -266,7 +275,7 @@ module.exports = { { loader: require.resolve('thread-loader'), options: { - poolTimeout: Infinity // keep workers alive for more effective watch mode + poolTimeout: Infinity, // keep workers alive for more effective watch mode }, }, { @@ -329,6 +338,28 @@ module.exports = { 'sass-loader' ), }, + // My add less-loader + { + test: lessRegex, + exclude: lessModuleRegex, + loader: getStyleLoaders( + { + importLoaders: 3, + }, + 'less-loader' + ), + }, + { + test: lessModuleRegex, + loader: getStyleLoaders( + { + importLoaders: 3, + modules: true, + getLocalIdent: getCSSModuleLocalIdent, + }, + 'less-loader' + ), + }, // The GraphQL loader preprocesses GraphQL queries in .graphql files. { test: /\.(graphql)$/, @@ -347,7 +378,9 @@ module.exports = { exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/], loader: require.resolve('file-loader'), options: { - name: 'static/media/[name].[hash:8].[ext]', + name: `${process.env.REACT_APP_STATIC}/${ + process.env.REACT_APP_MEDIA + }/[name].[hash:8].[ext]`, }, }, ], @@ -394,6 +427,7 @@ module.exports = { fileName: 'asset-manifest.json', publicPath: publicPath, }), + ...customConfig.webpackPlugins, ], // Some libraries import Node modules but don't use them in the browser. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 86869748c66..d7fab89e1f8 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -23,6 +23,7 @@ const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent'); const paths = require('./paths'); const getClientEnvironment = require('./env'); +const getCustomConfig = require('./custom-react-scripts/config'); // Webpack uses `publicPath` to determine where the app is being served from. // It requires a trailing slash, or the file assets will get an incorrect path. @@ -35,6 +36,8 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; const publicUrl = publicPath.slice(0, -1); // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); +//Get custom configuration for injecting plugins, presets and loaders +const customConfig = getCustomConfig(false); // Assert this just to be safe. // Development builds of React are slow and not intended for production. @@ -45,9 +48,13 @@ if (env.stringified['process.env'].NODE_ENV !== '"production"') { // style files regexes const cssRegex = /\.css$/; const cssModuleRegex = /\.module\.css$/; +const lessRegex = /\.less$/; +const lessModuleRegex = /\.module\.less$/; const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/; +// const cssFilename = `${process.env.REACT_APP_STATIC}/css/[name].[contenthash:8].css`; + // common function to get style loaders const getStyleLoaders = (cssOptions, preProcessor) => { const loaders = [ @@ -104,8 +111,10 @@ module.exports = { // Generated JS file names (with nested folders). // There will be one main bundle, and one file per asynchronous chunk. // We don't currently advertise code splitting but Webpack supports it. - filename: 'static/js/[name].[chunkhash:8].js', - chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js', + filename: `${process.env.REACT_APP_STATIC}/js/[name].[chunkhash:8].js`, + chunkFilename: `${ + process.env.REACT_APP_STATIC + }/js/[name].[chunkhash:8].chunk.js`, // We inferred the "public path" (such as / or /my-project) from homepage. publicPath: publicPath, // Point sourcemap entries to original disk location (format as URL on Windows) @@ -249,7 +258,9 @@ module.exports = { loader: require.resolve('url-loader'), options: { limit: 10000, - name: 'static/media/[name].[hash:8].[ext]', + name: `${process.env.REACT_APP_STATIC}/${ + process.env.REACT_APP_MEDIA + }/[name].[hash:8].[ext]`, }, }, // Process application JS with Babel. @@ -268,7 +279,9 @@ module.exports = { // @remove-on-eject-begin babelrc: false, // @remove-on-eject-end - presets: [require.resolve('babel-preset-react-app')], + presets: [require.resolve('babel-preset-react-app')].concat( + customConfig.babelPresets + ), plugins: [ [ require.resolve('babel-plugin-named-asset-import'), @@ -280,7 +293,7 @@ module.exports = { }, }, ], - ], + ].concat(customConfig.babelPlugin), compact: true, highlightCode: true, }, @@ -363,11 +376,36 @@ module.exports = { 'sass-loader' ), }, + // My add less-loader + { + test: lessRegex, + exclude: lessModuleRegex, + loader: getStyleLoaders( + { + importLoaders: 3, + sourceMap: shouldUseSourceMap, + }, + 'less-loader' + ), + }, + { + test: lessModuleRegex, + loader: getStyleLoaders( + { + importLoaders: 3, + sourceMap: shouldUseSourceMap, + modules: true, + getLocalIdent: getCSSModuleLocalIdent, + }, + 'less-loader' + ), + }, // The GraphQL loader preprocesses GraphQL queries in .graphql files. { test: /\.(graphql)$/, loader: 'graphql-tag/loader', }, + // ...customConfig.webpackLoaders, // "file" loader makes sure assets end up in the `build` folder. // When you `import` an asset, you get its filename. // This loader doesn't use a "test" so it will catch all modules @@ -380,7 +418,9 @@ module.exports = { // by webpacks internal loaders. exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/], options: { - name: 'static/media/[name].[hash:8].[ext]', + name: `${process.env.REACT_APP_STATIC}/${ + process.env.REACT_APP_MEDIA + }/[name].[hash:8].[ext]`, }, }, // ** STOP ** Are you adding a new loader? @@ -393,7 +433,8 @@ module.exports = { // Generates an `index.html` file with the