Skip to content

Commit 63d9f02

Browse files
BrooooooklynBrooooooklyn
authored
Merge pull request #27 from LeetCode-OpenSource/upgrade-react-18
feat: support react18
2 parents d7672d4 + 4b83c1d commit 63d9f02

File tree

6 files changed

+1260
-1365
lines changed

6 files changed

+1260
-1365
lines changed

‎jest.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ module.exports = {
22
browser: true,
33
verbose: true,
44
rootDir: __dirname,
5-
setupTestFrameworkScriptFile: '<rootDir>/tools/test-setup.js',
5+
setupFilesAfterEnv: ['<rootDir>/tools/test-setup.js'],
66
moduleDirectories: ['<rootDir>/node_modules', '<rootDir>/src'],
77
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
88
transform: {

‎package.json‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -21,39 +21,39 @@
2121
"url": "git@github.com:LeetCode-OpenSource/rxjs-hooks.git"
2222
},
2323
"devDependencies": {
24-
"@types/jest": "^24.0.0",
25-
"@types/lodash": "^4.14.118",
26-
"@types/react-dom": "^16.0.9",
27-
"@types/react-test-renderer": "^16.0.3",
28-
"@types/sinon": "^7.0.0",
29-
"@types/sinon-chai": "^3.2.1",
30-
"@types/webpack": "^4.4.19",
24+
"@types/jest": "^24.0.6",
25+
"@types/lodash": "^4.14.121",
26+
"@types/react-dom": "^16.8.2",
27+
"@types/react-test-renderer": "^16.8.1",
28+
"@types/sinon": "^7.0.6",
29+
"@types/sinon-chai": "^3.2.2",
30+
"@types/webpack": "^4.4.24",
3131
"coveralls": "^3.0.2",
32-
"fork-ts-checker-webpack-plugin": "^0.5.0",
33-
"happypack": "^5.0.0",
32+
"fork-ts-checker-webpack-plugin": "^0.5.2",
33+
"happypack": "^5.0.1",
3434
"html-webpack-plugin": "^3.2.0",
35-
"husky": "^1.1.4",
36-
"jest": "^23.6.0",
37-
"lint-staged": "^8.0.5",
38-
"prettier": "^1.15.2",
39-
"react": "16.8.0-alpha.1",
40-
"react-dom": "16.8.0-alpha.1",
41-
"react-test-renderer": "16.8.0-alpha.1",
42-
"rxjs": "^6.3.3",
43-
"sinon": "^7.1.1",
35+
"husky": "^1.3.1",
36+
"jest": "^24.1.0",
37+
"lint-staged": "^8.1.4",
38+
"prettier": "^1.16.4",
39+
"react": "16.8.2",
40+
"react-dom": "16.8.2",
41+
"react-test-renderer": "16.8.2",
42+
"rxjs": "^6.4.0",
43+
"sinon": "^7.2.3",
4444
"source-map-loader": "^0.2.4",
4545
"standard": "^12.0.1",
46-
"ts-jest": "^23.10.4",
47-
"ts-loader": "^5.3.0",
48-
"tslint": "^5.11.0",
49-
"tslint-config-prettier": "^1.16.0",
46+
"ts-jest": "^23.10.5",
47+
"ts-loader": "^5.3.3",
48+
"tslint": "^5.12.1",
49+
"tslint-config-prettier": "^1.18.0",
5050
"tslint-eslint-rules": "^5.4.0",
5151
"tslint-react": "^3.6.0",
52-
"tslint-sonarts": "^1.8.0",
53-
"typescript": "^3.1.6",
54-
"webpack": "^4.26.0",
55-
"webpack-cli": "^3.1.2",
56-
"webpack-dev-server": "^3.1.10"
52+
"tslint-sonarts": "^1.9.0",
53+
"typescript": "3.1.6",
54+
"webpack": "^4.29.5",
55+
"webpack-cli": "^3.2.3",
56+
"webpack-dev-server": "^3.1.14"
5757
},
5858
"dependencies": {
5959
"tslib": "^1.9.3"

‎src/__test__/use-event-callback.spec.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
import { Observable, of, Observer } from 'rxjs'
33
import { mapTo, delay, withLatestFrom, combineLatest, map } from 'rxjs/operators'
4-
import { create } from 'react-test-renderer'
4+
import { create, act } from 'react-test-renderer'
55
import * as Sinon from 'sinon'
66

77
import { find } from './find'
@@ -27,7 +27,7 @@ describe('useEventCallback specs', () => {
2727
const Fixture = createFixture(() => of(1))
2828
const fixtureNode = <Fixture />
2929
const testRenderer = create(fixtureNode)
30-
testRenderer.update(fixtureNode)
30+
act(() => testRenderer.update(fixtureNode))
3131
const button = find(testRenderer.root, 'button')
3232
expect(button.props.onClick.name).toBe('eventCallback')
3333
})
@@ -38,7 +38,7 @@ describe('useEventCallback specs', () => {
3838
const fixtureNode = <Fixture />
3939
const testRenderer = create(fixtureNode)
4040
expect(find(testRenderer.root, 'h1').children).toEqual([])
41-
testRenderer.update(fixtureNode)
41+
act(() => testRenderer.update(fixtureNode))
4242
expect(find(testRenderer.root, 'h1').children).toEqual([`${value}`])
4343
})
4444

@@ -54,11 +54,11 @@ describe('useEventCallback specs', () => {
5454
)
5555
const fixtureNode = <Fixture />
5656
const testRenderer = create(fixtureNode)
57-
testRenderer.update(fixtureNode)
57+
act(() => testRenderer.update(fixtureNode))
5858
const button = find(testRenderer.root, 'button')
5959
button.props.onClick()
6060
timer.tick(timeToDelay)
61-
testRenderer.update(fixtureNode)
61+
act(() => testRenderer.update(fixtureNode))
6262
expect(find(testRenderer.root, 'h1').children).toEqual([`${value}`])
6363
timer.restore()
6464
})
@@ -79,11 +79,11 @@ describe('useEventCallback specs', () => {
7979
const fixtureNode = <Fixture />
8080
const testRenderer = create(fixtureNode)
8181
expect(find(testRenderer.root, 'h1').children).toEqual([`${initialValue}`])
82-
testRenderer.update(fixtureNode)
82+
act(() => testRenderer.update(fixtureNode))
8383
const button = find(testRenderer.root, 'button')
8484
button.props.onClick()
8585
timer.tick(timeToDelay)
86-
testRenderer.update(fixtureNode)
86+
act(() => testRenderer.update(fixtureNode))
8787
expect(find(testRenderer.root, 'h1').children).toEqual([`${value}`])
8888
timer.restore()
8989
})
@@ -114,15 +114,15 @@ describe('useEventCallback specs', () => {
114114
const fixtureNode = <Fixture />
115115
const testRenderer = create(fixtureNode)
116116
expect(find(testRenderer.root, 'h1').children).toEqual([`${initialValue}`])
117-
testRenderer.update(fixtureNode)
117+
act(() => testRenderer.update(fixtureNode))
118118
const button = find(testRenderer.root, 'button')
119119
button.props.onClick()
120120
timer.tick(timeToDelay)
121-
testRenderer.update(fixtureNode)
121+
act(() => testRenderer.update(fixtureNode))
122122
expect(find(testRenderer.root, 'h1').children).toEqual([`${initialValue + value}`])
123123
button.props.onClick()
124124
timer.tick(timeToDelay)
125-
testRenderer.update(fixtureNode)
125+
act(() => testRenderer.update(fixtureNode))
126126
expect(find(testRenderer.root, 'h1').children).toEqual([`${initialValue + value * 2}`])
127127
timer.restore()
128128
})
@@ -136,7 +136,7 @@ describe('useEventCallback specs', () => {
136136
event$: Observable<React.MouseEvent<HTMLButtonElement>>,
137137
inputs$: Observable<number[]>,
138138
_state$: Observable<number>,
139-
) =>
139+
): Observable<number> =>
140140
event$.pipe(
141141
combineLatest(inputs$),
142142
map(([_, [count]]) => {
@@ -157,16 +157,16 @@ describe('useEventCallback specs', () => {
157157
const fixtureNode = <Fixture count={1} />
158158
const testRenderer = create(fixtureNode)
159159
expect(find(testRenderer.root, 'h1').children).toEqual([`${initialValue}`])
160-
testRenderer.update(fixtureNode)
160+
act(() => testRenderer.update(fixtureNode))
161161
const button = find(testRenderer.root, 'button')
162162
button.props.onClick()
163163
timer.tick(timeToDelay)
164-
testRenderer.update(fixtureNode)
164+
act(() => testRenderer.update(fixtureNode))
165165
expect(find(testRenderer.root, 'h1').children).toEqual([`${value + 1}`])
166-
testRenderer.update(<Fixture count={4} />)
166+
act(() => testRenderer.update(<Fixture count={4} />))
167167
button.props.onClick()
168168
timer.tick(timeToDelay)
169-
testRenderer.update(<Fixture count={4} />)
169+
act(() => testRenderer.update(<Fixture count={4} />))
170170
timer.tick(timeToDelay)
171171
expect(find(testRenderer.root, 'h1').children).toEqual([`${value + 4}`])
172172
timer.restore()

‎src/__test__/use-observable.spec.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { create } from 'react-test-renderer'
2+
import { create, act } from 'react-test-renderer'
33
import * as Sinon from 'sinon'
44
import { of, Observable, Observer, Subject } from 'rxjs'
55

@@ -28,7 +28,7 @@ describe('useObservable specs', () => {
2828

2929
const testRenderer = create(fixtureNode)
3030
expect(find(testRenderer.root, 'h1').children).toEqual([])
31-
testRenderer.update(fixtureNode)
31+
act(() => testRenderer.update(fixtureNode))
3232

3333
expect(find(testRenderer.root, 'h1').children).toEqual([`${value}`])
3434
})
@@ -44,7 +44,7 @@ describe('useObservable specs', () => {
4444

4545
const testRenderer = create(fixtureNode)
4646
expect(find(testRenderer.root, 'h1').children).toEqual([`${initialValue}`])
47-
testRenderer.update(fixtureNode)
47+
act(() => testRenderer.update(fixtureNode))
4848

4949
expect(find(testRenderer.root, 'h1').children).toEqual([`${value}`])
5050
})
@@ -102,13 +102,13 @@ describe('useObservable specs', () => {
102102
const testRenderer = create(<Fixture />)
103103
expect(spy.callCount).toBe(0)
104104
expect(find(testRenderer.root, 'h1').children).toEqual([])
105-
testRenderer.update(<Fixture />)
105+
act(() => testRenderer.update(<Fixture />))
106106
source$.next(initialValue)
107107
expect(spy.callCount).toBe(1)
108108
expect(spy.args[0]).toEqual([initialValue])
109109
expect(find(testRenderer.root, 'h1').children).toEqual([`${initialValue}`])
110110

111-
testRenderer.update(<Fixture />)
111+
act(() => testRenderer.update(<Fixture />))
112112
const secondValue = 2000
113113
source$.next(secondValue)
114114
expect(spy.callCount).toBe(2)
@@ -146,7 +146,7 @@ describe('useObservable specs', () => {
146146
expect(find(testRenderer.root, 'h1').children).toEqual([])
147147
expect(find(testRenderer.root, 'div').children).toEqual([])
148148
const newProps = { ...props, bar: 'new bar' }
149-
testRenderer.update(<Fixture {...newProps} />)
149+
act(() => testRenderer.update(<Fixture {...newProps} />))
150150
// wait useEffect fired
151151
// https://reactjs.org/docs/hooks-reference.html#timing-of-effects
152152
timer.tick(timeToDelay)
@@ -156,7 +156,7 @@ describe('useObservable specs', () => {
156156
expect(find(testRenderer.root, 'div').children).toEqual([`${newProps.baz.foo}`])
157157

158158
const renewProps = { ...props, foo: 1000 }
159-
testRenderer.update(<Fixture {...renewProps} />)
159+
act(() => testRenderer.update(<Fixture {...renewProps} />))
160160
timer.tick(timeToDelay)
161161

162162
expect(spy.callCount).toBe(2)

‎src/use-event-callback.ts‎

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@ export type EventCallback<EventValue, State, Inputs> = Inputs extends void
2020
state$: Observable<State>,
2121
) => Observable<State>
2222

23-
export function useEventCallback<EventValue, State = void>(
24-
callback: EventCallback<EventValue, State, void>,
25-
): ReturnedState<EventValue, State | null, void>
26-
export function useEventCallback<EventValue, State = void>(
23+
export function useEventCallback<EventValue>(
24+
callback: EventCallback<EventValue, void, void>,
25+
): ReturnedState<EventValue, void | null, void>
26+
export function useEventCallback<EventValue, State>(
2727
callback: EventCallback<EventValue, State, void>,
2828
initialState: State,
2929
): ReturnedState<EventValue, State, void>
30-
export function useEventCallback<EventValue, State = void, Inputs = void>(
30+
export function useEventCallback<EventValue, State, Inputs>(
3131
callback: EventCallback<EventValue, State, Inputs>,
3232
initialState: State,
3333
inputs: RestrictArray<Inputs>,
@@ -50,34 +50,31 @@ export function useEventCallback<EventValue, State = void, Inputs = void>(
5050
inputs$.next(inputs!)
5151
}, inputs || [])
5252

53-
useEffect(
54-
() => {
55-
const event$ = new Subject<EventValue>()
56-
function eventCallback(e: EventValue) {
57-
return event$.next(e)
58-
}
59-
setState(initialValue)
60-
setEventCallback(() => eventCallback)
61-
let value$: Observable<State>
53+
useEffect(() => {
54+
const event$ = new Subject<EventValue>()
55+
function eventCallback(e: EventValue) {
56+
return event$.next(e)
57+
}
58+
setState(initialValue)
59+
setEventCallback(() => eventCallback)
60+
let value$: Observable<State>
6261

63-
if (!inputs) {
64-
value$ = (callback as EventCallback<EventValue, State, void>)(event$, state$ as Observable<State>)
65-
} else {
66-
value$ = (callback as any)(event$, inputs$ as Observable<Inputs>, state$ as Observable<State>)
67-
}
68-
const subscription = value$.subscribe((value) => {
69-
state$.next(value)
70-
setState(value as VoidAsNull<State>)
71-
})
72-
return () => {
73-
subscription.unsubscribe()
74-
state$.complete()
75-
inputs$.complete()
76-
event$.complete()
77-
}
78-
},
79-
[], // immutable forever
80-
)
62+
if (!inputs) {
63+
value$ = (callback as EventCallback<EventValue, State, void>)(event$, state$ as Observable<State>)
64+
} else {
65+
value$ = (callback as any)(event$, inputs$ as Observable<Inputs>, state$ as Observable<State>)
66+
}
67+
const subscription = value$.subscribe((value) => {
68+
state$.next(value)
69+
setState(value as VoidAsNull<State>)
70+
})
71+
return () => {
72+
subscription.unsubscribe()
73+
state$.complete()
74+
inputs$.complete()
75+
event$.complete()
76+
}
77+
}, []) // immutable forever
8178

8279
return [returnedCallback, state]
8380
}

0 commit comments

Comments
 (0)