diff --git a/README.md b/README.md
index 64575ca..4938402 100644
--- a/README.md
+++ b/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
\ No newline at end of file
diff --git a/package.json b/package.json
index 218149a..fa90d47 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.js b/src/App.js
index 203067e..c8a3d90 100644
--- a/src/App.js
+++ b/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 {
To get started, edit src/App.js
and save to reload.
+
);
}
diff --git a/src/SampleDecorator.js b/src/SampleDecorator.js
new file mode 100644
index 0000000..be0d1d7
--- /dev/null
+++ b/src/SampleDecorator.js
@@ -0,0 +1,24 @@
+import React , {Component} from 'react'
+
+function withRedBorder(Cmp) {
+ class NewCmp extends Component {
+ render () {
+ return (
+
+
+
+ )
+ }
+ }
+
+ return NewCmp
+}
+
+@withRedBorder
+export class Sample extends Component {
+ render () {
+ return (Sample With Decorator
)
+ }
+}
+
+Sample.propTypes = {}
diff --git a/webpack-helpers/babelPatch.js b/webpack-helpers/babelPatch.js
new file mode 100644
index 0000000..e2f6f99
--- /dev/null
+++ b/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']
+};
diff --git a/webpack-helpers/utils.js b/webpack-helpers/utils.js
new file mode 100644
index 0000000..70261a1
--- /dev/null
+++ b/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]
+};
diff --git a/webpack.monkey.js b/webpack.monkey.js
index 0c50cfc..fc11c2c 100644
--- a/webpack.monkey.js
+++ b/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)
};
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 6f070c4..98f9e0d 100644
--- a/yarn.lock
+++ b/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"
+
babel-plugin-syntax-dynamic-import@6.18.0, 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 @@ babel-plugin-transform-class-properties@6.24.1:
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"
-babel-runtime@6.26.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+babel-runtime@6.26.0, 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: