Skip to content
This repository was archived by the owner on Dec 31, 2020. It is now read-only.
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: mobxjs/mobx-react
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 5.4.2
Choose a base ref
...
head repository: mobxjs/mobx-react
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: 5.4.3
Choose a head ref
  • 5 commits
  • 6 files changed
  • 1 contributor

Commits on Nov 21, 2018

  1. Cleaner implementation of forwardRef

    @mweststrate
    mweststrate committed Nov 21, 2018

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    GPG key ID: 4AEE18F83AFDEB23
    Expired
    Verified
    Learn about vigilant mode
    Copy the full SHA
    3623340 View commit details

  2. Added open question

    @mweststrate
    mweststrate committed Nov 21, 2018
    Copy the full SHA
    73120d8 View commit details

Commits on Dec 12, 2018

  1. Reproduced and fixed #612: context type was incorrectly hoisted

    @mweststrate
    mweststrate committed Dec 12, 2018
    Copy the full SHA
    3d04096 View commit details

  2. Disabled strict mode test

    @mweststrate
    mweststrate committed Dec 12, 2018
    Copy the full SHA
    fed5149 View commit details

  3. Published version 5.4.3

    @mweststrate
    mweststrate committed Dec 12, 2018
    Copy the full SHA
    605f89f View commit details
Showing with 188 additions and 47 deletions.
  1. +5 −1 CHANGELOG.md
  2. +4 −4 package.json
  3. +4 −7 src/observer.js
  4. +44 −8 test/context.test.js
  5. +93 −12 test/inject.test.js
  6. +38 −15 yarn.lock
6 changes: 5 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
# MobX-React Changelog

### 5.4.1
### 5.4.3

* Fixed [#612](https://github.com/mobxjs/mobx-react/issues/612), `contextType` was hoisted by `inject`, which shouldn't the case.

### 5.4.1 / 5.4.2

* Fixed issue where `react-is` wasn't properly rolled-up into the package. Fixes [#608](https://github.com/mobxjs/mobx-react/issues/608)

8 changes: 4 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mobx-react",
"version": "5.4.2",
"version": "5.4.3",
"description": "React bindings for MobX. Create fully reactive components.",
"main": "index.js",
"jsnext:main": "index.module.js",
@@ -54,9 +54,9 @@
"opn-cli": "^3.1.0",
"prettier": "^1.7.2",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-test-renderer": "^16.0.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-test-renderer": "^16.6.3",
"regenerator-runtime": "^0.12.1",
"request": "^2.83.0",
"rollup": "^0.66.2",
11 changes: 4 additions & 7 deletions src/observer.js
View file
Original file line number Diff line number Diff line change
@@ -330,13 +330,10 @@ export function observer(arg1, arg2) {
const baseRender = componentClass.render
if (typeof baseRender !== "function")
throw new Error("render property of ForwardRef was not a function")
return {
...componentClass,
render() {
const args = arguments
return <Observer>{() => baseRender.apply(undefined, arguments)}</Observer>
}
}
// TODO: do we need to hoist statics from baseRender to the forward ref?
return forwardRef(function ObserverForwardRef() {
return <Observer>{() => baseRender.apply(undefined, arguments)}</Observer>
})
}

// Stateless function component:
52 changes: 44 additions & 8 deletions test/context.test.js
View file
Original file line number Diff line number Diff line change
@@ -35,7 +35,12 @@ describe("observer based context", () => {
["foo"],
createClass({
render() {
return <div>context:{this.props.foo}</div>
return (
<div>
context:
{this.props.foo}
</div>
)
}
})
)
@@ -55,7 +60,12 @@ describe("observer based context", () => {
["foo"],
createClass({
render() {
return <div>context:{this.props.foo}</div>
return (
<div>
context:
{this.props.foo}
</div>
)
}
})
)
@@ -77,7 +87,8 @@ describe("observer based context", () => {
render() {
return (
<div>
context:{this.props.foo}
context:
{this.props.foo}
{this.props.bar}
</div>
)
@@ -130,7 +141,12 @@ describe("observer based context", () => {
["foo"],
createClass({
render() {
return <div>context:{this.props.foo}</div>
return (
<div>
context:
{this.props.foo}
</div>
)
}
})
)
@@ -160,7 +176,12 @@ describe("observer based context", () => {
["foo"],
createClass({
render() {
return <div>context:{this.props.foo}</div>
return (
<div>
context:
{this.props.foo}
</div>
)
}
})
)
@@ -179,7 +200,12 @@ describe("observer based context", () => {
["foo"],
createClass({
render() {
return <div>context:{this.props.foo}</div>
return (
<div>
context:
{this.props.foo}
</div>
)
}
})
)
@@ -222,7 +248,12 @@ describe("observer based context", () => {
["foo"],
createClass({
render() {
return <div>context:{this.props.foo}</div>
return (
<div>
context:
{this.props.foo}
</div>
)
}
})
)
@@ -255,7 +286,12 @@ describe("observer based context", () => {
})
})

test("no warnings in modern react", () => {
test.skip("no warnings in modern react", () => {
// MWE: 12-12-2018, disabled this test, the premise doesn't really make sense,
// To use Provider / inject in strict-mode: Instead, just leverage React's own
// Context mechanism, and don't use Provider / inject from mobx-react, if you want idiomatic React.
// Provider / inject is just a stop-gap when Context wasn't standardized
// (despite having a really convenient api :))
const box = mobx.observable.box(3)
const Child = inject("store")(
observer(
105 changes: 93 additions & 12 deletions test/inject.test.js
View file
Original file line number Diff line number Diff line change
@@ -16,7 +16,12 @@ describe("inject based context", () => {
observer(
createClass({
render() {
return <div>context:{this.props.foo}</div>
return (
<div>
context:
{this.props.foo}
</div>
)
}
})
)
@@ -35,7 +40,12 @@ describe("inject based context", () => {
const C = inject("foo")(
createClass({
render() {
return <div>context:{this.props.foo}</div>
return (
<div>
context:
{this.props.foo}
</div>
)
}
})
)
@@ -58,7 +68,8 @@ describe("inject based context", () => {
render() {
return (
<div>
context:{this.props.foo}
context:
{this.props.foo}
{this.props.bar}
</div>
)
@@ -95,7 +106,12 @@ describe("inject based context", () => {
observer(
createClass({
render() {
return <div>context:{this.props.foo}</div>
return (
<div>
context:
{this.props.foo}
</div>
)
}
})
)
@@ -120,7 +136,12 @@ describe("inject based context", () => {
observer(
createClass({
render() {
return <div>context:{this.props.foo}</div>
return (
<div>
context:
{this.props.foo}
</div>
)
}
})
)
@@ -154,7 +175,12 @@ describe("inject based context", () => {
["foo"],
createClass({
render() {
return <div>context:{this.props.foo}</div>
return (
<div>
context:
{this.props.foo}
</div>
)
}
})
)
@@ -206,7 +232,8 @@ describe("inject based context", () => {
render() {
return (
<div>
context:{this.props.zoom}
context:
{this.props.zoom}
{this.props.baz}
</div>
)
@@ -258,7 +285,12 @@ describe("inject based context", () => {
createClass({
displayName: "C",
render() {
return <div>context:{this.props.foo}</div>
return (
<div>
context:
{this.props.foo}
</div>
)
}
})
)
@@ -331,7 +363,12 @@ describe("inject based context", () => {
const C = inject(["foo"])(
createClass({
displayName: "C",
render: () => <div>context:{this.props.foo}</div>
render: () => (
<div>
context:
{this.props.foo}
</div>
)
})
)
C.propTypes = {}
@@ -347,7 +384,12 @@ describe("inject based context", () => {
const C = inject(["foo"])(
createClass({
displayName: "C",
render: () => <div>context:{this.props.foo}</div>
render: () => (
<div>
context:
{this.props.foo}
</div>
)
})
)
C.wrappedComponent.propTypes = {}
@@ -382,7 +424,8 @@ describe("inject based context", () => {
}

class State {
@observable highlighted = null
@observable
highlighted = null
isHighlighted(item) {
return this.highlighted == item
}
@@ -409,7 +452,13 @@ describe("inject based context", () => {
listRender++
const { items } = this.props

return <ul>{items.map(item => <ItemComponent key={item.title} item={item} />)}</ul>
return (
<ul>
{items.map(item => (
<ItemComponent key={item.title} item={item} />
))}
</ul>
)
}
}

@@ -470,3 +519,35 @@ describe("inject based context", () => {
)
})
})

test("#612 - mixed context types", () => {
const SomeContext = React.createContext(true)

class MainCompClass extends React.Component {
static contextType = SomeContext
render() {
let active = this.context
return active ? this.props.value : "Inactive"
}
}

const MainComp = inject(stores => ({
value: stores.appState.value
}))(MainCompClass)

const appState = observable({
value: "Something"
})

function App() {
return (
<Provider appState={appState}>
<SomeContext.Provider value={true}>
<MainComp />
</SomeContext.Provider>
</Provider>
)
}

ReactDOM.render(<App />, testRoot)
})
Loading