Skip to content

Commit d3a5805

Browse files
christianalfonichristianalfoni
committed
feat(overmind-react): remove deprecated ability to pass instance to hook and connect creator
BREAKING CHANGE: can not longer pass instance to hook or connect factory
1 parent dbd3275 commit d3a5805

File tree

2 files changed

+81
-75
lines changed

2 files changed

+81
-75
lines changed

‎packages/node_modules/overmind-react/src/index.test.tsx‎

Lines changed: 36 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { Overmind, IAction, createOvermindMock } from 'overmind'
1+
import { IAction, Overmind, createOvermindMock } from 'overmind'
22
import * as React from 'react'
33
import * as renderer from 'react-test-renderer'
4-
import { IConnect, createConnect, createHook, Provider } from './'
4+
5+
import { IConnect, Provider, createConnect, createHook } from './'
56

67
describe('React', () => {
78
test('should connect state and actions to stateless components', () => {
@@ -34,14 +35,20 @@ describe('React', () => {
3435
interface Action<Input = void, Output = void | Promise<void>>
3536
extends IAction<IConfig, Input, Output> {}
3637

37-
const connect = createConnect(app)
38+
const connect = createConnect()
3839

3940
const Component: React.SFC<IConnect<IConfig>> = ({ overmind }) => {
4041
overmind.actions.doThis()
4142
return <h1>{overmind.state.foo}</h1>
4243
}
4344
const ConnectedComponent = connect(Component)
44-
const tree = renderer.create(<ConnectedComponent />).toJSON()
45+
const tree = renderer
46+
.create(
47+
<Provider value={app}>
48+
<ConnectedComponent />
49+
</Provider>
50+
)
51+
.toJSON()
4552

4653
expect(didCallAction).toBe(true)
4754
expect(tree).toMatchSnapshot()
@@ -76,7 +83,7 @@ describe('React', () => {
7683
interface Action<Input = void, Output = void | Promise<void>>
7784
extends IAction<IConfig, Input, Output> {}
7885

79-
const connect = createConnect(app)
86+
const connect = createConnect()
8087

8188
class Component extends React.Component<IConnect<IConfig>> {
8289
componentDidMount() {
@@ -89,7 +96,13 @@ describe('React', () => {
8996
}
9097
}
9198
const ConnectedComponent = connect(Component)
92-
const tree = renderer.create(<ConnectedComponent />).toJSON()
99+
const tree = renderer
100+
.create(
101+
<Provider value={app}>
102+
<ConnectedComponent />
103+
</Provider>
104+
)
105+
.toJSON()
93106

94107
expect(didCallAction).toBe(true)
95108
expect(tree).toMatchSnapshot()
@@ -105,7 +118,7 @@ describe('React', () => {
105118

106119
const app = new Overmind(config)
107120

108-
const connect = createConnect(app)
121+
const connect = createConnect()
109122

110123
class Component extends React.Component<IConnect<typeof config>> {
111124
render() {
@@ -115,7 +128,13 @@ describe('React', () => {
115128
}
116129
}
117130
const ConnectedComponent = connect(Component)
118-
const tree = renderer.create(<ConnectedComponent />).toJSON()
131+
const tree = renderer
132+
.create(
133+
<Provider value={app}>
134+
<ConnectedComponent />
135+
</Provider>
136+
)
137+
.toJSON()
119138
const tree2 = renderer.create(<Component overmind={null as any} />).toJSON()
120139

121140
expect(tree).toMatchSnapshot()
@@ -124,7 +143,7 @@ describe('React', () => {
124143

125144
test('should preserve component name', () => {
126145
const app = new Overmind({})
127-
const connect = createConnect(app)
146+
const connect = createConnect<{}>()
128147

129148
class FooComponent extends React.Component<IConnect<{}>> {
130149
render() {
@@ -169,7 +188,7 @@ describe('React', () => {
169188

170189
interface Action<Input = void> extends IAction<IConfig, Input> {}
171190

172-
const connect = createConnect(app)
191+
const connect = createConnect()
173192

174193
class FooComponent extends React.Component<IConnect<typeof config>> {
175194
shouldComponentUpdate(nextProps) {
@@ -183,7 +202,13 @@ describe('React', () => {
183202

184203
const ConnectedFoo = connect(FooComponent)
185204

186-
const tree = renderer.create(<ConnectedFoo />).toJSON()
205+
const tree = renderer
206+
.create(
207+
<Provider value={app}>
208+
<ConnectedFoo />
209+
</Provider>
210+
)
211+
.toJSON()
187212

188213
expect(renderCount).toBe(1)
189214

‎packages/node_modules/overmind-react/src/index.ts‎

Lines changed: 45 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,24 @@
1+
import 'proxy-state-tree'
2+
13
import {
4+
EventType,
25
IConfiguration,
36
MODE_SSR,
4-
EventType,
57
Overmind,
68
OvermindMock,
79
} from 'overmind'
8-
import 'proxy-state-tree'
9-
import {
10-
// @ts-ignore
11-
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
12-
ClassicComponentClass,
13-
Component,
14-
ComponentClass,
15-
createElement,
16-
StatelessComponent,
17-
// @ts-ignore
18-
useEffect,
19-
// @ts-ignore
20-
useState,
21-
useRef,
22-
useLayoutEffect,
23-
createContext,
24-
useContext,
25-
} from 'react'
2610
import { IMutationCallback } from 'proxy-state-tree'
11+
import * as react from 'react'
2712

2813
const IS_PRODUCTION = process.env.NODE_ENV === 'production'
2914
const IS_TEST = process.env.NODE_ENV === 'test'
3015
const isNode =
3116
!IS_TEST && process && process.title && process.title.includes('node')
3217

3318
export type IReactComponent<P = any> =
34-
| StatelessComponent<P>
35-
| ComponentClass<P>
36-
| ClassicComponentClass<P>
19+
| react.StatelessComponent<P>
20+
| react.ComponentClass<P>
21+
| react.ClassicComponentClass<P>
3722

3823
// Diff / Omit taken from https://github.com/Microsoft/TypeScript/issues/12215#issuecomment-311923766
3924
type Omit<T, K extends keyof T> = Pick<
@@ -52,7 +37,13 @@ export interface IConnect<Config extends IConfiguration> {
5237
}
5338
}
5439

55-
const context = createContext<Overmind<IConfiguration>>({} as Overmind<
40+
function throwMissingContextError() {
41+
throw new Error(
42+
'The Overmind hook could not find an Overmind instance on the context of React. Please make sure you use the Provider component at the top of your application and expose the Overmind instance there. Please read more in the React guide on the website'
43+
)
44+
}
45+
46+
const context = react.createContext<Overmind<IConfiguration>>({} as Overmind<
5647
IConfiguration
5748
>)
5849
let nextComponentId = 0
@@ -61,24 +52,17 @@ export const Provider: React.ProviderExoticComponent<
6152
React.ProviderProps<Overmind<IConfiguration> | OvermindMock<IConfiguration>>
6253
> = context.Provider
6354

64-
export const createHook = <Config extends IConfiguration>(
65-
overmindInstance?: Overmind<Config>
66-
): (() => {
55+
export const createHook = <Config extends IConfiguration>(): (() => {
6756
state: Overmind<Config>['state']
6857
actions: Overmind<Config>['actions']
6958
effects: Overmind<Config>['effects']
7059
addMutationListener: (cb: IMutationCallback) => () => void
7160
reaction: Overmind<Config>['reaction']
7261
}) => {
73-
if (overmindInstance) {
74-
console.warn(
75-
'DEPRECATION - Do not pass the overmind instance to "createHook", but use the provider. Please read docs for more information'
76-
)
77-
}
7862
let currentComponentInstanceId = 0
7963
const {
8064
ReactCurrentOwner,
81-
} = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
65+
} = (react as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
8266
const useCurrentComponent = () => {
8367
return ReactCurrentOwner &&
8468
ReactCurrentOwner.current &&
@@ -87,10 +71,10 @@ export const createHook = <Config extends IConfiguration>(
8771
: {}
8872
}
8973
const useForceRerender = () => {
90-
const [flushId, setState] = useState(() => -1)
91-
const mountedRef = useRef(true)
74+
const [flushId, setState] = react.useState(() => -1)
75+
const mountedRef = react.useRef(true)
9276

93-
useEffect(
77+
react.useEffect(
9478
() => () => {
9579
mountedRef.current = false
9680
},
@@ -109,14 +93,10 @@ export const createHook = <Config extends IConfiguration>(
10993
}
11094

11195
return () => {
112-
const overmind = (overmindInstance || useContext(context)) as Overmind<
113-
Config
114-
>
96+
const overmind = react.useContext(context) as Overmind<Config>
11597

11698
if (!overmind) {
117-
throw new Error(
118-
'You are not exposing Overmind on the React context. Please make sure you use the Provider, as shown in the React guide'
119-
)
99+
throwMissingContextError()
120100
}
121101

122102
if (isNode || (overmind as any).mode.mode === MODE_SSR) {
@@ -128,21 +108,21 @@ export const createHook = <Config extends IConfiguration>(
128108
reaction: overmind.reaction,
129109
}
130110
}
131-
const { current: tree } = useRef<any>(
111+
const { current: tree } = react.useRef<any>(
132112
(overmind as any).proxyStateTree.getTrackStateTree()
133113
)
134114

135115
if (IS_PRODUCTION) {
136116
const { forceRerender } = useForceRerender()
137117

138-
useEffect(
118+
react.useEffect(
139119
() => () => {
140120
;(overmind as any).proxyStateTree.disposeTree(tree)
141121
},
142122
[]
143123
)
144124

145-
useLayoutEffect(() => tree.stopTracking())
125+
react.useLayoutEffect(() => tree.stopTracking())
146126

147127
tree.track(forceRerender)
148128
} else {
@@ -153,13 +133,13 @@ export const createHook = <Config extends IConfiguration>(
153133
? nextComponentId++
154134
: component.__componentId
155135

156-
const { current: componentInstanceId } = useRef<any>(
136+
const { current: componentInstanceId } = react.useRef<any>(
157137
currentComponentInstanceId++
158138
)
159139

160140
const { flushId, forceRerender } = useForceRerender()
161141

162-
useLayoutEffect(() => {
142+
react.useLayoutEffect(() => {
163143
overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
164144
componentId: component.__componentId,
165145
componentInstanceId,
@@ -177,7 +157,7 @@ export const createHook = <Config extends IConfiguration>(
177157
}
178158
}, [])
179159

180-
useLayoutEffect(() => {
160+
react.useLayoutEffect(() => {
181161
tree.stopTracking()
182162
overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
183163
componentId: component.__componentId,
@@ -200,9 +180,7 @@ export const createHook = <Config extends IConfiguration>(
200180
}
201181
}
202182

203-
export const createConnect = <ThisConfig extends IConfiguration>(
204-
overmindInstance?: Overmind<ThisConfig>
205-
) => {
183+
export const createConnect = <ThisConfig extends IConfiguration>() => {
206184
return <Props>(
207185
component: IReactComponent<
208186
Props & {
@@ -219,12 +197,6 @@ export const createConnect = <ThisConfig extends IConfiguration>(
219197
keyof IConnect<Overmind<ThisConfig>>
220198
>
221199
> => {
222-
if (overmindInstance) {
223-
console.warn(
224-
'DEPRECATION - Do not pass the overmind instance to "createConnect", but use the provider. Please read docs for more information'
225-
)
226-
}
227-
228200
let componentInstanceId = 0
229201
const name = component.name
230202
const populatedComponent = component as any
@@ -250,7 +222,7 @@ export const createConnect = <ThisConfig extends IConfiguration>(
250222
}
251223

252224
if (IS_PRODUCTION) {
253-
class HOC extends Component {
225+
class HOC extends react.Component {
254226
tree: any
255227
overmind: any
256228
state: {
@@ -260,7 +232,11 @@ export const createConnect = <ThisConfig extends IConfiguration>(
260232
static contextType = context
261233
constructor(props, context) {
262234
super(props)
263-
this.overmind = overmindInstance || context
235+
236+
if (!context) {
237+
throwMissingContextError()
238+
}
239+
this.overmind = context
264240
this.tree = this.overmind.proxyStateTree.getTrackStateTree()
265241
this.state = {
266242
overmind: {
@@ -297,13 +273,13 @@ export const createConnect = <ThisConfig extends IConfiguration>(
297273
}
298274
render() {
299275
if (isClassComponent) {
300-
return createElement(component, {
276+
return react.createElement(component, {
301277
...this.props,
302278
overmind: this.state.overmind,
303279
} as any)
304280
}
305281

306-
return createElement(this.wrappedComponent, {
282+
return react.createElement(this.wrappedComponent, {
307283
...this.props,
308284
overmind: this.state.overmind,
309285
} as any)
@@ -312,7 +288,7 @@ export const createConnect = <ThisConfig extends IConfiguration>(
312288

313289
return HOC as any
314290
} else {
315-
class HOC extends Component {
291+
class HOC extends react.Component {
316292
tree: any
317293
overmind: any
318294
componentInstanceId = componentInstanceId++
@@ -325,7 +301,12 @@ export const createConnect = <ThisConfig extends IConfiguration>(
325301
static contextType = context
326302
constructor(props, context) {
327303
super(props)
328-
this.overmind = overmindInstance || context
304+
305+
if (!context) {
306+
throwMissingContextError()
307+
}
308+
309+
this.overmind = context
329310
this.tree = this.overmind.proxyStateTree.getTrackStateTree()
330311
this.state = {
331312
overmind: {
@@ -389,12 +370,12 @@ export const createConnect = <ThisConfig extends IConfiguration>(
389370
}
390371
render() {
391372
if (isClassComponent) {
392-
return createElement(component, {
373+
return react.createElement(component, {
393374
...this.props,
394375
overmind: this.state.overmind,
395376
} as any)
396377
}
397-
return createElement(this.wrappedComponent, {
378+
return react.createElement(this.wrappedComponent, {
398379
...this.props,
399380
overmind: this.state.overmind,
400381
} as any)

0 commit comments

Comments
 (0)