chore(examples): use mobx v6 in using-mobx example (#34351)

examples/using-mobx/package.json

@@ -7,8 +7,7 @@
  "scripts": {
  "build": "gatsby build",
  "develop": "gatsby develop",
- "format": "prettier --write \"src/**/*.js\"",
- "lint": "eslint **/*.{js,jsx} --quiet -o linterrors.txt --ignore-path .gitignore"
+ "format": "prettier --write \"src/**/*.js\""
  },
  "keywords": [
  "gatsby",
@@ -17,21 +16,13 @@
  "license": "MIT",
  "dependencies": {
  "gatsby": "next",
- "mobx": "^5.15.7",
- "mobx-react": "^6.3.0",
- "prop-types": "^15.7.2",
- "react": "^16.9.0",
- "react-dom": "^16.9.0"
+ "mobx": "^6.3.10",
+ "mobx-react": "^7.2.1",
+ "prop-types": "^15.8.0",
+ "react": "^17.0.1",
+ "react-dom": "^17.0.1"
  },
  "devDependencies": {
- "babel-eslint": "^10.1.0",
- "eslint": "^6.8.0",
- "eslint-config-airbnb": "^18.2.0",
- "eslint-config-prettier": "^6.11.0",
- "eslint-plugin-import": "^2.22.0",
- "eslint-plugin-jsx-a11y": "^6.3.1",
- "eslint-plugin-prettier": "^3.1.4",
- "eslint-plugin-react": "^7.20.6",
  "prettier": "2.1.1"
  }
 }

examples/using-mobx/src/components/Counter.js

@@ -1,16 +1,17 @@
-import React, { Fragment } from "react"
-import { observer, inject } from "mobx-react"
+import React, { useContext } from "react"
+import { MobXProviderContext, observer } from "mobx-react"
 
-const Counter = inject(`store`)(
- observer(({ store }) => (
- <Fragment>
+const Counter = observer(() => {
+ const store = useContext(MobXProviderContext)
+ return (
+ <>
  <div>Counted to: {store.Count}</div>
  <div>
  <button onClick={() => store.Increment()}>Add</button>
  <button onClick={() => store.Decrement()}>Subtract</button>
  </div>
- </Fragment>
- ))
-)
+ </>
+ )
+})
 
 export default Counter

examples/using-mobx/src/models/CounterModel.js

@@ -1,8 +1,16 @@
-import { observable, action, decorate } from "mobx"
+import { observable, action, makeObservable } from "mobx"
 
 class CounterModel {
  Count = 0
 
+ constructor() {
+ makeObservable(this, {
+ Count: observable,
+ Increment: action.bound,
+ Decrement: action.bound,
+ })
+ }
+
  Increment() {
  this.Count += 1
  }
@@ -11,10 +19,6 @@ class CounterModel {
  this.Count -= 1
  }
 }
-decorate(CounterModel, {
- Count: observable,
- Increment: action,
- Decrement: action,
-})
+
 const CounterStore = new CounterModel()
 export default CounterStore

examples/using-mobx/wrap-with-provider.js

@@ -1,8 +1,12 @@
 import React from "react"
-import { Provider } from "mobx-react"
+import { enableStaticRendering, MobXProviderContext } from "mobx-react"
 import CounterStore from "./src/models/CounterModel"
 
-// eslint-disable-next-line react/display-name,react/prop-types
-export default ({ element }) => (
- <Provider store={CounterStore}>{element}</Provider>
+// https://mobx.js.org/react-integration.html#static-rendering
+enableStaticRendering(true)
+
+const App =({ element }) => (
+ <MobXProviderContext.Provider value={CounterStore}>{element}</MobXProviderContext.Provider>
 )
+
+export default App;