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: