Skip to content

Commit 33556b9

Browse files
oleksiilevzhynskyioleksiilevzhynskyi
authored
Merge pull request #84 from opudalo/update-deps
update react, typescript and jest
2 parents 26a1dc8 + 047082b commit 33556b9

20 files changed

+3915
-4515
lines changed

‎README.md

+4-8
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,8 @@ state.subscribe(x => {
6464
})
6565

6666
// render the app
67-
ReactDOM.render(
68-
<App state={state} />,
69-
document.getElementById('app')
70-
)
67+
const root = createRoot(document.getElementById('app'))
68+
root.render(<App state={state} />)
7169
```
7270
7371
You can play with this example online [on CodeSandbox](https://codesandbox.io/s/black-bash-u6l9x).
@@ -193,10 +191,8 @@ const Counter = (props: { count: Atom<number> }) =>
193191
</F.div>
194192

195193
// mount the component onto DOM
196-
ReactDOM.render(
197-
<Counter count={count} />,
198-
document.getElementById('test')
199-
)
194+
const root = createRoot(document.getElementById('test'))
195+
root.render(<Counter count={count} />)
200196

201197
// => <div>Count: 0</div>
202198
```

‎package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,15 @@
2020
"eslint": "^7.18.0",
2121
"eslint-plugin-jsdoc": "^31.0.8",
2222
"eslint-plugin-react": "^7.22.0",
23-
"typescript": "3.6.4"
23+
"typescript": "^4.7.4"
2424
},
2525
"workspaces": [
2626
"packages/focal",
2727
"packages/test",
2828
"packages/examples/*"
2929
],
3030
"resolutions": {
31-
"@types/react": "16.9.11"
31+
"@types/react": "^18.0.14",
32+
"@types/react-dom": "^18.0.0"
3233
}
3334
}

‎packages/examples/all/package.json

+6-7
Original file line numberDiff line numberDiff line change
@@ -22,24 +22,23 @@
2222
"license": "Apache-2.0",
2323
"devDependencies": {
2424
"@grammarly/focal": "0.8.5",
25-
"@grammarly/tslint-config": "0.5.1",
26-
"@types/react": "16.9.11",
27-
"@types/react-dom": "16.9.3",
25+
"@types/react": "^18.0.14",
26+
"@types/react-dom": "^18.0.0",
2827
"css-loader": "^3.2.0",
2928
"eslint": "^7.18.0",
3029
"eslint-webpack-plugin": "^2.5.3",
3130
"express": "^4.14.0",
32-
"react": "16.11.0",
33-
"react-dom": "16.11.0",
31+
"react": "^18.0.0",
32+
"react-dom": "^18.0.0",
3433
"react-transform-catch-errors": "^1.0.2",
3534
"react-transform-hmr": "^1.0.4",
3635
"redbox-react": "^1.3.0",
3736
"rxjs": "6.3.3",
3837
"style-loader": "^1.0.0",
3938
"todomvc-app-css": "^2.0.6",
40-
"ts-loader": "^6.2.1",
39+
"ts-loader": "8.2.0",
4140
"tslint": "5.20.0",
42-
"typescript": "3.6.4",
41+
"typescript": "^4.7.4",
4342
"webpack": "^4.41.2",
4443
"webpack-bundle-analyzer": "^3.6.0",
4544
"webpack-cli": "^3.3.9",

‎packages/examples/all/src/app.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import * as React from 'react'
21
import { Atom, Lens } from '@grammarly/focal'
2+
import * as React from 'react'
33

44
interface ExampleComponent<S> {
5-
Component: React.StatelessComponent<{ state: Atom<S> }>
5+
Component: React.FunctionComponent<{ state: Atom<S> }>
66
defaultState: S
77
}
88

‎packages/examples/all/src/index.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import * as React from 'react'
2-
import * as ReactDOM from 'react-dom'
31
import { Atom } from '@grammarly/focal'
2+
import * as React from 'react'
3+
import { createRoot } from 'react-dom/client'
44
import * as App from './app'
55

66
// hot reload support
@@ -23,7 +23,8 @@ function startApp(C: typeof App.AppComponent) {
2323
if (targetEl == null)
2424
throw new Error('React app target element not found. Wrong HTML file?')
2525

26-
ReactDOM.render(<C state={appState} />, targetEl)
26+
const root = createRoot(targetEl)
27+
root.render(<C state={appState} />)
2728
}
2829

2930
if (module.hot) {

‎packages/examples/todomvc/package.json

+9-10
Original file line numberDiff line numberDiff line change
@@ -22,25 +22,24 @@
2222
"license": "Apache-2.0",
2323
"devDependencies": {
2424
"@grammarly/focal": "0.8.5",
25-
"@grammarly/tslint-config": "0.5.1",
26-
"@types/react": "16.9.11",
27-
"@types/react-dom": "16.9.3",
28-
"express": "^4.14.0",
25+
"@types/react": "^18.0.14",
26+
"@types/react-dom": "^18.0.0",
2927
"eslint": "^7.18.0",
3028
"eslint-webpack-plugin": "^2.5.3",
31-
"react": "16.11.0",
32-
"react-dom": "16.11.0",
29+
"express": "^4.14.0",
30+
"react": "^18.0.0",
31+
"react-dom": "^18.0.0",
3332
"react-transform-catch-errors": "^1.0.2",
3433
"react-transform-hmr": "^1.0.4",
3534
"redbox-react": "^1.3.0",
3635
"rxjs": "6.3.3",
3736
"todomvc-app-css": "^2.0.6",
38-
"ts-loader": "^6.2.1",
39-
"typescript": "3.6.4",
37+
"ts-loader": "8.2.0",
38+
"typescript": "^4.7.4",
4039
"webpack": "^4.41.2",
40+
"webpack-bundle-analyzer": "^3.6.0",
4141
"webpack-cli": "^3.3.9",
4242
"webpack-dev-middleware": "^3.7.2",
43-
"webpack-hot-middleware": "^2.25.0",
44-
"webpack-bundle-analyzer": "^3.6.0"
43+
"webpack-hot-middleware": "^2.25.0"
4544
}
4645
}

‎packages/examples/todomvc/src/app.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1+
import { Atom, bind, classes, F, Lens, reactiveList } from '@grammarly/focal'
12
import * as React from 'react'
2-
import * as ReactDOM from 'react-dom'
3-
import { fromEvent, defer } from 'rxjs'
3+
import { createRoot } from 'react-dom/client'
4+
import { defer, fromEvent } from 'rxjs'
45
import { combineLatest, map, startWith } from 'rxjs/operators'
5-
import { F, Atom, Lens, bind, reactiveList, classes } from '@grammarly/focal'
6-
import { TodoItem, AppModel } from './model'
6+
import { AppModel, TodoItem } from './model'
77

88
const locationHash = defer(() =>
99
fromEvent(window, 'hashchange').pipe(
@@ -208,9 +208,9 @@ export class App {
208208
) {}
209209

210210
start() {
211-
ReactDOM.render(
212-
<AppComponent model={this._model}/>,
213-
this._targetElement
211+
const root = createRoot(this._targetElement)
212+
root.render(
213+
<AppComponent model={this._model}/>
214214
)
215215
}
216216
}

‎packages/focal/jest-shim.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
global.TextEncoder = require ('util').TextEncoder
2+
global.TextDecoder = require ('util').TextDecoder

‎packages/focal/jest.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ module.exports = {
55
'ts',
66
'tsx',
77
],
8+
setupFiles: [`<rootDir>/jest-shim.js`],
89
testEnvironment: 'jest-environment-jsdom',
910
testMatch: [
1011
'**/*.test.ts?(x)',

‎packages/focal/package.json

+13-13
Original file line numberDiff line numberDiff line change
@@ -93,24 +93,24 @@
9393
"type": "git",
9494
"url": "https://github.com/grammarly/focal.git"
9595
},
96-
"dependencies": {},
9796
"devDependencies": {
9897
"@types/jest": "24.0.20",
99-
"@types/node": "^6.0.34",
100-
"@types/react": "16.9.11",
101-
"@types/react-dom": "16.9.3",
102-
"jest": "^24.1.0",
103-
"react": "16.11.0",
104-
"react-dom": "16.11.0",
98+
"@types/node": "^18.0.0",
99+
"@types/react": "^18.0.14",
100+
"@types/react-dom": "^18.0.0",
101+
"jest": "^28.1.1",
102+
"jest-environment-jsdom": "^28.1.1",
103+
"react": "^18.0.0",
104+
"react-dom": "^18.0.0",
105105
"rxjs": "6.3.3",
106-
"ts-jest": "^23.10.5",
107-
"typescript": "3.6.4"
106+
"ts-jest": "^28.0.5",
107+
"typescript": "^4.7.4"
108108
},
109109
"peerDependencies": {
110-
"@types/react": ">= 16.9.11 < 17.0.0-0",
111-
"@types/react-dom": ">= 16.9.3 < 17.0.0-0",
112-
"react": ">= 16.11.0 < 17.0.0-0",
113-
"react-dom": ">= 16.11.0 < 17.0.0-0",
110+
"@types/react": ">= 18.0.0 < 19.0.0-0",
111+
"@types/react-dom": ">= 18.0.0 < 19.0.0-0",
112+
"react": ">= 18.0.0 < 19.0.0-0",
113+
"react-dom": ">= 18.0.0 < 19.0.0-0",
114114
"rxjs": ">= 6.3.3 < 7.0.0-0"
115115
}
116116
}

‎packages/focal/src/index.ts

+4-9
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
1-
export { Lens, Prism, Optic } from './lens/index'
21
export { Atom, ReadOnlyAtom } from './atom/index'
3-
export { Option } from './utils'
4-
2+
export { Lens, Optic, Prism } from './lens/index'
53
export {
6-
bind,
7-
lift,
8-
reactiveList,
9-
classes,
10-
bindElementProps,
11-
F
4+
bind, bindElementProps, classes, F, lift,
5+
reactiveList
126
} from './react'
7+
export { Option } from './utils'

‎packages/focal/src/react/intrinsic.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@
44
* @module
55
*/
66
import * as React from 'react'
7-
import { ObservableReactHTMLProps, ObservableReactChildren } from './observablePropTypes'
8-
import { LiftWrapperProps, LiftWrapper } from './react'
7+
import { ObservableReactChildren, ObservableReactHTMLProps } from './observablePropTypes'
8+
import { LiftWrapper, LiftWrapperProps } from './react'
99

10-
export interface LiftedIntrinsicComponentProps<E> extends ObservableReactHTMLProps<E> {
10+
export interface LiftedIntrinsicComponentProps<E>
11+
extends ObservableReactHTMLProps<E> {
1112
mount?: React.Ref<E>
1213
forwardRef?: React.Ref<E>
1314
}

‎packages/focal/src/react/observablePropTypes.ts

+5-4
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,16 @@ export type ObservableReactCSSProperties =
1313
ObservableLike<React.CSSProperties> | ObservableLikeRecord<React.CSSProperties>
1414

1515
export interface ObservableReactChildren {
16-
children?: ObservableLike<React.ReactNode>
16+
children?: ObservableLike<React.ReactNode> | ObservableLike<React.ReactNode>[]
1717
}
1818

1919
export type ObservableReactHTMLAttributes<
2020
E, A extends React.HTMLAttributes<E> = React.AllHTMLAttributes<E>
21-
> = ObservableLikeRecord<Pick<A, Exclude<keyof A, 'style'>>> & {
21+
> = ObservableLikeRecord<Omit<A, 'style' | 'children'>> & {
2222
style?: ObservableReactCSSProperties
23+
children?: ObservableLike<React.ReactNode> | ObservableLike<React.ReactNode>[]
2324
}
2425

2526
export type ObservableReactHTMLProps<
26-
E, A extends React.HTMLAttributes<E> = React.AllHTMLAttributes<E>
27-
> = ObservableReactHTMLAttributes<E, A> & React.ClassAttributes<E>
27+
E, A extends React.HTMLAttributes<E> = React.AllHTMLAttributes<E>,
28+
> = ObservableReactHTMLAttributes<E, A> & React.ClassAttributes<E>

‎packages/focal/src/react/react.ts

+8-12
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
11
import * as React from 'react'
2-
import { structEq } from './../utils'
3-
import { Atom } from './../atom'
4-
import { warning, getReactComponentName, DEV_ENV } from './../utils'
52
import {
6-
Observable,
7-
ObservableInput,
8-
Subscription as RxSubscription,
9-
combineLatest,
10-
of
3+
combineLatest, Observable,
4+
ObservableInput, of, Subscription as RxSubscription
115
} from 'rxjs'
12-
import { scan, map } from 'rxjs/operators'
6+
import { map, scan } from 'rxjs/operators'
7+
import { Atom } from './../atom'
8+
import { DEV_ENV, getReactComponentName, structEq, warning } from './../utils'
139

1410
export interface Subscription {
1511
unsubscribe(): void
@@ -21,7 +17,7 @@ export type Lifted<T> = {
2117

2218
export interface LiftWrapperProps<TProps> {
2319
component: React.Component<TProps, any>
24-
| React.StatelessComponent<TProps>
20+
| React.FunctionComponent<TProps>
2521
| React.ComponentClass<TProps>
2622
| React.ComponentType
2723
| keyof React.ReactHTML
@@ -151,7 +147,7 @@ export type LiftedComponentProps<TProps> = Lifted<TProps> & {
151147
* <LiftedHelloComponent name={observableValue as any} />
152148
*/
153149
export function lift<TProps>(
154-
component: React.ComponentClass<TProps> | React.StatelessComponent<TProps>
150+
component: React.ComponentClass<TProps> | React.FunctionComponent<TProps>
155151
) {
156152
return (props: LiftedComponentProps<TProps>) =>
157153
React.createElement<LiftWrapperProps<TProps>>(
@@ -216,7 +212,7 @@ function walkObservables<T>(
216212
*/
217213
function render<P>(
218214
class_: React.Component<P, any>
219-
| React.StatelessComponent<P>
215+
| React.FunctionComponent<P>
220216
| React.ComponentClass<P>
221217
| React.ComponentType
222218
| keyof React.ReactHTML,

‎packages/focal/src/utils.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -57,14 +57,14 @@ export function warning(message: string) {
5757
export function getReactComponentName(
5858
component: string
5959
| React.ComponentClass<any>
60-
| React.StatelessComponent<any>
60+
| React.FunctionComponent<any>
6161
| React.Component<any, any>
6262
) {
6363
return typeof component === 'string' ? component
6464
: (component as React.ComponentClass<any>).displayName !== undefined
6565
? (component as React.ComponentClass<any>).displayName
66-
: (component as React.StatelessComponent<any>).name !== undefined
67-
? (component as React.StatelessComponent<any>).name
66+
: (component as React.FunctionComponent<any>).name !== undefined
67+
? (component as React.FunctionComponent<any>).name
6868
: component.constructor && component.constructor.name !== undefined
6969
? component.constructor.name
7070
: undefined

‎packages/focal/test/react.test.tsx

+4-10
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
1-
import { of, EMPTY, NEVER } from 'rxjs'
2-
import { map, throttleTime } from 'rxjs/operators'
31
import * as React from 'react'
42
import * as ReactDOM from 'react-dom/server'
5-
3+
import { EMPTY, NEVER, of } from 'rxjs'
4+
import { map, throttleTime } from 'rxjs/operators'
65
import {
7-
F,
8-
lift,
9-
bind,
10-
Atom,
11-
reactiveList,
12-
classes,
13-
bindElementProps
6+
Atom, bind, bindElementProps, classes, F,
7+
lift, reactiveList
148
} from '../src'
159

1610
class Comp extends React.Component<{ test: string }, {}> {

‎packages/test/package.json

+7-7
Original file line numberDiff line numberDiff line change
@@ -18,20 +18,20 @@
1818
"license": "Apache-2.0",
1919
"devDependencies": {
2020
"@grammarly/focal": "0.8.5",
21-
"@types/node": "^9.6.0",
22-
"@types/react": "16.9.11",
23-
"@types/react-dom": "16.9.3",
21+
"@types/react": "^18.0.14",
22+
"@types/react-dom": "^18.0.0",
2423
"eslint": "^7.18.0",
25-
"eslint-webpack-plugin": "2.5.3",
24+
"eslint-webpack-plugin": "^2.5.3",
2625
"express": "^4.14.0",
27-
"react": "16.11.0",
28-
"react-dom": "16.11.0",
26+
"react": "^18.0.0",
27+
"react-dom": "^18.0.0",
2928
"react-transform-catch-errors": "^1.0.2",
3029
"react-transform-hmr": "^1.0.4",
3130
"redbox-react": "^1.3.0",
3231
"rxjs": "6.3.3",
3332
"todomvc-app-css": "^2.0.6",
34-
"typescript": "3.6.4",
33+
"ts-loader": "8.2.0",
34+
"typescript": "^4.7.4",
3535
"webpack": "^4.41.2",
3636
"webpack-bundle-analyzer": "^3.6.0",
3737
"webpack-cli": "^3.3.9",

0 commit comments

Comments
 (0)