add decorator example

Author: smmoosavi

README.md

@@ -13,5 +13,10 @@
   - add `./webpack-helpers/pluginsPatch.js` and use it in `webpack.monkey.js` 
   - build project: `yarn build`
   - check `build/stats.html` file
+- add decorator support
+  - add package `yarn add babel-plugin-transform-decorators-legacy`
+  - and `webpack-helpers/utils.js` (add `findRule` function)
+  - add `webpack-helpers/babelPatch.js` and use it in `webpack.monkey.js`
+  - add and use sample decorator
 
 [monkey-react-scripts]: https://github.com/monkey-patches/monkey-react-scripts

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "monkey-react-scripts": "^0.1.0",
     "react": "^16.1.1",
     "react-dom": "^16.1.1",

src/App.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import {Sample} from "./SampleDecorator";
 
 class App extends Component {
   render() {
@@ -13,6 +14,7 @@ class App extends Component {
         <p className="App-intro">
           To get started, edit <code>src/App.js</code> and save to reload.
         </p>
+          <Sample/>
       </div>
     );
   }

src/SampleDecorator.js

@@ -0,0 +1,24 @@
+import React , {Component} from 'react'
+
+function withRedBorder(Cmp) {
+    class NewCmp extends Component {
+      render () {
+        return (
+            <div style={{border: '1px solid red', padding: 8}}>
+                <Cmp {...this.props}/>
+            </div>
+        )
+      }
+    }
+
+    return NewCmp
+}
+
+@withRedBorder
+export class Sample extends Component {
+  render () {
+    return (<div>Sample With Decorator</div>)
+  }
+}
+
+Sample.propTypes = {}

webpack-helpers/babelPatch.js

@@ -0,0 +1,10 @@
+const {findRule} = require('./utils');
+
+module.exports.babelPatch = function babelPatch(webpackConfig, isDevelopment) {
+    // find babel rule
+    const babelRule = findRule(webpackConfig, (rule) => {
+        return ('' + rule.test === '' + /\.(js|jsx|mjs)$/)
+    });
+    const plugins = babelRule.options.plugins || [];
+    babelRule.options.plugins = [...plugins, 'transform-decorators-legacy']
+};

webpack-helpers/utils.js

@@ -0,0 +1,6 @@
+module.exports.findRule = function findRule(webpackConfig, callback) {
+    const rules = webpackConfig.module.rules[1].oneOf;
+    const index = rules.findIndex(callback);
+    if (index === -1) throw Error('Loader not found');
+    return rules[index]
+};

webpack.monkey.js

@@ -1,5 +1,7 @@
 const {pluginsPatch} = require('./webpack-helpers/pluginsPatch');
+const {babelPatch} = require('./webpack-helpers/babelPatch');
 
 module.exports = function (webpackConfig, isDevelopment) {
     pluginsPatch(webpackConfig, isDevelopment)
+    babelPatch(webpackConfig, isDevelopment)
 };

yarn.lock

@@ -557,6 +557,10 @@ babel-plugin-syntax-class-properties@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
 
+babel-plugin-syntax-decorators@^6.1.18:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz#312563b4dbde3cc806cee3e416cceeaddd11ac0b"
+
 [email protected], babel-plugin-syntax-dynamic-import@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
@@ -598,6 +602,14 @@ [email protected]:
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
 
+babel-plugin-transform-decorators-legacy@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-decorators-legacy/-/babel-plugin-transform-decorators-legacy-1.3.4.tgz#741b58f6c5bce9e6027e0882d9c994f04f366925"
+  dependencies:
+    babel-plugin-syntax-decorators "^6.1.18"
+    babel-runtime "^6.2.0"
+    babel-template "^6.3.0"
+
 babel-plugin-transform-es2015-arrow-functions@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
@@ -928,14 +940,14 @@ babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-[email protected], babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+[email protected], babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
 
-babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0:
+babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0, babel-template@^6.3.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
   dependencies: