add scripts

Author: smmoosavi

README.md

@@ -1,2 +1,87 @@
 # monkey-react-scripts
-Monkey react script runner
+Monkey react script runner: Customize react-scripts webpack config without ejection or fork
+
+## Usage
+- use create-react-app and create your project, [more-detail][create-react-app]
+```
+npm install -g create-react-app
+
+create-react-app my-app
+cd my-app/
+```
+
+- install monkey-react-scripts
+
+```
+npm install monkey-react-scripts --save-dev --save-exact
+```
+
+- create `webpack.monkey.js` in root of your project. you can modify webpack config here.
+```js
+module.exports = function (webpackConfig, isDevelopment) {
+    // mutate webpackConfig
+};
+```
+
+- edit `package.json` and replace scripts
+```
+  "scripts": {
+    "start": "monkey-react-scripts start",
+    "build": "monkey-react-scripts build",
+    "test": "monkey-react-scripts test --env=jsdom"
+  }
+```
+
+## Example 
+### Webpack Visualizer
+I love visualization so I wan't add [webpack-visualizer-plugin][webpack-visualizer] to my project
+- install plugin:
+```
+npm install webpack-visualizer-plugin --save-dev
+```
+- add plugin to config (only at build)
+```js
+// webpack.monkey.js
+var Visualizer = require('webpack-visualizer-plugin');
+
+module.exports = function (webpackConfig, isDevelopment) {
+    if (!isDevelopment) {
+        webpackConfig.plugins.push(new Visualizer());
+    }
+};
+```
+- build
+```
+$ npm run build
+// some output
+$ tree build
+build
+├── asset-manifest.json
+├── favicon.ico
+├── index.html
+├── static
+│   ├── css
+│   │   ├── main.9a0fe4f1.css
+│   │   └── main.9a0fe4f1.css.map
+│   ├── js
+│   │   ├── main.373f9afc.js
+│   │   └── main.373f9afc.js.map
+│   └── media
+│       └── logo.5d5d9eef.svg
+└── stats.html                      <-- new file
+```
+
+## TODOs
+- [ ] add helpers
+- [ ] customize test runner (jest)
+- [ ] add more example
+  - [ ] scss support
+  - [ ] decorator support
+  - [ ] relay support
+
+## Thanks
+@svrcekmichal for [configurable-react-scripts][configurable-react-scripts]
+
+[create-react-app]: https://github.com/facebookincubator/create-react-app#tldr
+[webpack-visualizer]: https://github.com/chrisbateman/webpack-visualizer
+[configurable-react-scripts]: https://github.com/svrcekmichal/configurable-react-scripts

bin/monkey-react-scripts.js

@@ -1,2 +1,36 @@
 #!/usr/bin/env node
-console.log("monkey react script is coming");
+var spawn = require('cross-spawn');
+var script = process.argv[2];
+var args = process.argv.slice(3);
+
+switch (script) {
+    case 'build':
+    case 'start':
+    case 'test':
+        var result = spawn.sync(
+            'node',
+            [require.resolve('../scripts/' + script)].concat(args),
+            {stdio: 'inherit'}
+        );
+        if (result.signal) {
+            if (result.signal == 'SIGKILL') {
+                console.log(
+                    'The build failed because the process exited too early. ' +
+                    'This probably means the system ran out of memory or someone called ' +
+                    '`kill -9` on the process.'
+                );
+            } else if (result.signal == 'SIGTERM') {
+                console.log(
+                    'The build failed because the process exited too early. ' +
+                    'Someone might have called `kill` or `killall`, or the system could ' +
+                    'be shutting down.'
+                );
+            }
+            process.exit(1);
+        }
+        process.exit(result.status);
+        break;
+    default:
+        console.log('Unknown script "' + script + '".');
+        break;
+}

package.json

@@ -1,11 +1,15 @@
 {
   "name": "monkey-react-scripts",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Monkey react script runner",
   "main": "index.js",
   "repository": "[email protected]:monkey-patches/monkey-react-scripts.git",
   "author": "Seyyed Morteza Moosavi <[email protected]>",
   "license": "MIT",
+  "files": [
+    "bin",
+    "scripts"
+  ],
   "bin": {
     "monkey-react-scripts": "./bin/monkey-react-scripts.js"
   },

scripts/build.js

@@ -0,0 +1,15 @@
+var fs = require('fs');
+var path = require('path');
+var chalk = require('chalk');
+var appPath = require('react-scripts/config/paths').appPath;
+
+process.env.NODE_ENV = 'production';
+
+var webpackMonkeyPath = path.resolve(appPath, 'webpack.monkey.js');
+var webpackConfig = require('react-scripts/config/webpack.config.prod');
+
+if (fs.existsSync(webpackMonkeyPath)) {
+    console.log(chalk.yellow('WARNING! You are using modified webpack config!'));
+    require(webpackMonkeyPath)(webpackConfig, false);
+}
+require('react-scripts/scripts/build');

scripts/start.js

@@ -0,0 +1,15 @@
+var fs = require('fs');
+var path = require('path');
+var chalk = require('chalk');
+var appPath = require('react-scripts/config/paths').appPath;
+
+process.env.NODE_ENV = 'development';
+
+var webpackMonkeyPath = path.resolve(appPath, 'webpack.monkey.js');
+var webpackConfig = require('react-scripts/config/webpack.config.dev');
+
+if (fs.existsSync(webpackMonkeyPath)) {
+    console.log(chalk.yellow('WARNING! You are using modified webpack config!'));
+    require(webpackMonkeyPath)(webpackConfig, true);
+}
+require('react-scripts/scripts/start');

scripts/test.js

@@ -0,0 +1,2 @@
+// TODO need help for customization
+require('react-scripts/scripts/test');