update readme

Author: smmoosavi

README.md

@@ -58,8 +58,7 @@ snippets:
 - `addPlugin`
 - `findRule`
 - `addBabelPlugins`
-- `addLoader`
-- `addExclude`
+- `addRule`
 
 ## Example
 Before use examples you should know what happen inside react-scripts webpack config.
@@ -77,6 +76,8 @@ module.exports = function (webpackConfig, isDevelopment) {
 };
 ```
 
+Also you can find complete examples at [monkey-react-scripts-example] repo
+
 ### Webpack Visualizer
 I love visualization so I add [webpack-visualizer-plugin][webpack-visualizer] to my project
 - install plugin:
@@ -131,18 +132,27 @@ function addBabelPlugins(webpackConfig, plugins) {
 }
 
 module.exports = function (webpackConfig, isDevelopment) {
-    addBabelPlugins(webpackConfig, [
-        require.resolve('babel-plugin-transform-decorators-legacy')
-    ]);
+    addBabelPlugins(webpackConfig, ['transform-decorators-legacy']);
 };
 ```
 related issues: [#107][107], [#167][167], [#214][214], [#309][309], [#411][411], [#1357][1357]
 
 ### Relay support
+- install `babel-plugin-relay`
+```
+yarn add --dev babel-plugin-relay
+```
+
+- edit `webpack.monkey.js`
+```js
 
-TODO
+module.exports = function (webpackConfig, isDevelopment) {
+    addBabelPlugins(webpackConfig, ['relay']);
+};
+```
+and continue [relay documentation][relay-setup] steps.
 
-you can find support for relay classic in [old readme][old-relay-support] and get some ideas
+if you are using relay classic you can see [old readme][old-relay-support] and get some ideas.
 
 related issues: [#462][462], [#662][662], [#900][900]
 
@@ -155,21 +165,27 @@ npm install --save-dev node-sass sass-loader
 
 - edit `webpack.monkey.js` like this:
 ```js
-/* copy addExclude, findRule, addRule from snippets */
+/* copy findRule, addRule from snippets */
 module.exports = function (webpackConfig, isDevelopment) {
-    const cssRule = findRule(webpackConfig, (rule) => {
-        return ('' + rule.test === '' + /\.css$/)
-    });
-    const cssLoaders = isDevelopment ? cssRule.use : cssRule.loader;
-    cssLoaders[cssLoaders.length - 1].options.sourceMap = true; // add source option to postcss
-    const sassLoader = {loader: require.resolve('sass-loader'), options: {sourceMap: true}};
-    const sassLoaders = cssLoaders.concat(sassLoader);
-    const sassRule = {
-        test: /\.scss$/,
-        [isDevelopment ? 'use' : 'loader']: sassLoaders
-    };
-    addExclude(webpackConfig, /\.scss$/);
-    addRule(webpackConfig, sassRule)
+  // find css rule
+  const cssRule = findRule(webpackConfig, (rule) => {
+    return ('' + rule.test === '' + /\.css$/)
+  });
+  const cssLoaders = isDevelopment ? cssRule.use : cssRule.loader;
+
+  const postCssLoader = cssLoaders[cssLoaders.length - 1];
+  postCssLoader.options.sourceMap = true; // add source option to postcss
+
+  // add sass support
+  const sassLoader = {loader: require.resolve('sass-loader'), options: {sourceMap: true}};
+  const sassLoaders = cssLoaders.concat(sassLoader);
+
+  const sassRule = {
+    test: /\.scss$/,
+    [isDevelopment ? 'use' : 'loader']: sassLoaders,
+  };
+
+  addRule(webpackConfig, sassRule)
 };
 ```
 similar code for less or stylus.
@@ -179,27 +195,18 @@ related issues: [#78][78], [#115][115], [#351][351], [#412][412], [#1509][1509],
 ## postcss config
 If you want change postcss config you can use this code. 
 ```js
-module.exports = function (webpackConfig, isDevelopment) {
-    const cssRule = findRule(webpackConfig, (rule) => {
-        return ('' + rule.test === '' + /\.css$/)
-    });
-    const loaders = isDevelopment ? cssRule.use : cssRule.loader;
-    const postcssLoader = loaders[loaders.length - 1];
-    const postcssFunc = postcssLoader.options.plugins;
-    postcssLoader.options.plugins = () => {
-        return [
-            require('postcss-inline-rtl'),  // add new postcss plugin
-            ...postcssFunc()                // keep cra postcss plugins
-        ]
-    };
-};
+  // add rtl css support
+  const postCssFunction = postCssLoader.options.plugins
+  postCssLoader.options.plugins = () => {
+      return [...postCssFunction(), require('postcss-inline-rtl')]
+  }
 ```
 
 ## TODOs
 
 - [ ] customize test runner (jest)
-- [ ] add more example
-  - [ ] relay support
+- [x] add more example
+  - [x] relay support
 
 ## compatibility
 
@@ -216,6 +223,8 @@ module.exports = function (webpackConfig, isDevelopment) {
 [webpack-visualizer]: https://github.com/chrisbateman/webpack-visualizer
 [configurable-react-scripts]: https://github.com/svrcekmichal/configurable-react-scripts
 [custom-react-scripts]: https://github.com/kitze/custom-react-scripts
+[relay-setup]: https://facebook.github.io/relay/docs/en/installation-and-setup.html
+[monkey-react-scripts-example]: https://github.com/monkey-patches/monkey-react-scripts-example
 [old-relay-support]: https://github.com/monkey-patches/monkey-react-scripts/blob/b7380bbb873d637cdd6cf911de9f696b90b608fe/README.md#relay-support
 
 [107]: https://github.com/facebookincubator/create-react-app/issues/107

snippets/cra-1.x.x.md

@@ -7,46 +7,37 @@ In real project I copy some of them in other file and use require function:
 
 Add webpack plugin
 ```js
-function addPlugin(config, plugin) {
-    config.plugins.push(plugin);
+function addPlugin(webpackConfig, plugin) {
+    webpackConfig.plugins.push(plugin);
 }
 ```
 ## Find Rule
 
 ```js
 function findRule(webpackConfig, callback) {
-    const index = webpackConfig.module.rules.findIndex(callback);
+    const rules = webpackConfig.module.rules[1].oneOf;
+    const index = rules.findIndex(callback);
     if (index === -1) throw Error('Loader not found');
-    return webpackConfig.module.rules[index];
+    return rules[index]
 }
 ```
 
 ## Add Babel plugin
 requirement: `findRule`
 ```js
 function addBabelPlugins(webpackConfig, plugins) {
-    const babelRule = findRule(webpackConfig, function (rule) {
-        return rule.loader && rule.loader.endsWith('babel-loader/lib/index.js');
+    // find babel rule
+    const babelRule = findRule(webpackConfig, (rule) => {
+        return ('' + rule.test === '' + /\.(js|jsx|mjs)$/)
     });
     babelRule.options.plugins = (babelRule.options.plugins || []).concat(plugins);
 }
 ```
 
-## addLoader
+## add Rule
 ```js
-function addRule(webpackConfig, rule) {
-    webpackConfig.module.rules.push(rule);
+function addRule (webpackConfig, rule) {
+    const rules = webpackConfig.module.rules[1].oneOf;
+    rules.splice(rules.length - 1, 0, rule); // add before exclude rule
 }
 ```
-
-## addExclude
-cra use file-loader for all unknown files. 
-requirement: `findRule`
-```js
-function addExclude(webpackConfig, regex) {
-    const excludeRule = findRule(webpackConfig, function(rule) {
-        return rule.loader && rule.loader.endsWith('file-loader/index.js')
-    });
-    excludeRule.exclude.push(regex);
-}
-```