Add support for legacy

Author: sunny891

config-overrides.js

@@ -0,0 +1,13 @@
+const {
+  override,
+  addDecoratorsLegacy,
+  disableEsLint,
+} = require('customize-cra')
+
+module.exports = override(
+  // enable legacy decorators babel plugin
+  addDecoratorsLegacy(),
+
+  // disable eslint in webpack
+  disableEsLint()
+)

package-lock.json

@@ -9,9 +9,8 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "autoprefixer": "^9.7.5",
-    "babel-plugin-macros": "^2.8.0",
-    "mobx": "5.15.4",
-    "mobx-react": "6.1.8",
+    "mobx": "5.15.0",
+    "mobx-react": "6.1.4",
     "postcss-cli": "^7.1.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
@@ -22,10 +21,10 @@
   "scripts": {
     "build:css": "postcss src/index.css -o src/styles/tailwind.css",
     "watch:css": "postcss src/index.css -o src/styles/tailwind.css",
-    "start": "npm run watch:css & react-scripts start",
-    "build": "npm run build:css react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "npm run watch:css & react-app-rewired start",
+    "build": "npm run build:css react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-app-rewired eject",
     "deploy": "export PUBLIC_URL=/2019/$C9_USER/react && npm run build && ./deploy.sh"
   },
   "eslintConfig": {
@@ -48,6 +47,9 @@
     "@babel/plugin-proposal-decorators": "7.7.0",
     "@babel/plugin-syntax-jsx": "7.2.0",
     "@babel/preset-env": "7.7.1",
+    "babel-eslint": "10.0.3",
+    "customize-cra": "0.9.1",
+    "react-app-rewired": "2.1.5",
     "tailwindcss": "^1.2.0"
   }
 }

package.json

@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+import { observer, inject } from 'mobx-react'
+
+import stores from '../../stores'
+const counterStore = stores.counterStore
+
+@observer
+class CounterPage extends Component {
+  handleIncrement = () => {
+    counterStore.incrementCounter()
+  }
+
+  handleDecrement = () => {
+    if (counterStore.count !== 0) {
+      counterStore.decrementCounter()
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>{counterStore.count}</h1>
+        <button onClick={this.handleIncrement}>+</button>
+        <button onClick={this.handleDecrement}>-</button>
+      </div>
+    )
+  }
+}
+
+export default CounterPage

src/components/Counter/Counter.test.jsx

@@ -1,13 +1,13 @@
-import React from "react";
-import ReactDOM from "react-dom";
+import React from 'react'
+import ReactDOM from 'react-dom'
 
-import * as serviceWorker from "./serviceWorker";
-import App from "./routes/App";
-import "./styles/tailwind.css";
+import * as serviceWorker from './serviceWorker'
+import App from './App'
+import './styles/tailwind.css'
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render(<App />, document.getElementById('root'))
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister()