update react, typescript and jest

README.md

@@ -64,10 +64,8 @@ state.subscribe(x => {
 })
 
 // render the app
-ReactDOM.render(
-  <App state={state} />,
-  document.getElementById('app')
-)
+const root = createRoot(document.getElementById('app'))
+root.render(<App state={state} />)
 ```
 
 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> }) =>
   </F.div>
 
 // mount the component onto DOM
-ReactDOM.render(
-  <Counter count={count} />,
-  document.getElementById('test')
-)
+const root = createRoot(document.getElementById('test'))
+root.render(<Counter count={count} />)
 
 // => <div>Count: 0</div>
 ```

package.json

@@ -20,14 +20,15 @@
     "eslint": "^7.18.0",
     "eslint-plugin-jsdoc": "^31.0.8",
     "eslint-plugin-react": "^7.22.0",
-    "typescript": "3.6.4"
+    "typescript": "^4.7.4"
   },
   "workspaces": [
     "packages/focal",
     "packages/test",
     "packages/examples/*"
   ],
   "resolutions": {
-    "@types/react": "16.9.11"
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.0"
   }
 }

packages/examples/all/package.json

@@ -22,24 +22,23 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@grammarly/focal": "0.8.5",
-    "@grammarly/tslint-config": "0.5.1",
-    "@types/react": "16.9.11",
-    "@types/react-dom": "16.9.3",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.0",
     "css-loader": "^3.2.0",
     "eslint": "^7.18.0",
     "eslint-webpack-plugin": "^2.5.3",
     "express": "^4.14.0",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.3.0",
     "rxjs": "6.3.3",
     "style-loader": "^1.0.0",
     "todomvc-app-css": "^2.0.6",
-    "ts-loader": "^6.2.1",
+    "ts-loader": "8.2.0",
     "tslint": "5.20.0",
-    "typescript": "3.6.4",
+    "typescript": "^4.7.4",
     "webpack": "^4.41.2",
     "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.3.9",

packages/examples/all/src/app.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react'
 import { Atom, Lens } from '@grammarly/focal'
+import * as React from 'react'
 
 interface ExampleComponent<S> {
-  Component: React.StatelessComponent<{ state: Atom<S> }>
+  Component: React.FunctionComponent<{ state: Atom<S> }>
   defaultState: S
 }
 

packages/examples/all/src/index.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
 import { Atom } from '@grammarly/focal'
+import * as React from 'react'
+import { createRoot } from 'react-dom/client'
 import * as App from './app'
 
 // hot reload support
@@ -23,7 +23,8 @@ function startApp(C: typeof App.AppComponent) {
   if (targetEl == null)
     throw new Error('React app target element not found. Wrong HTML file?')
 
-  ReactDOM.render(<C state={appState} />, targetEl)
+  const root = createRoot(targetEl)
+  root.render(<C state={appState} />)
 }
 
 if (module.hot) {

packages/examples/todomvc/package.json

@@ -22,25 +22,24 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@grammarly/focal": "0.8.5",
-    "@grammarly/tslint-config": "0.5.1",
-    "@types/react": "16.9.11",
-    "@types/react-dom": "16.9.3",
-    "express": "^4.14.0",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.0",
     "eslint": "^7.18.0",
     "eslint-webpack-plugin": "^2.5.3",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
+    "express": "^4.14.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.3.0",
     "rxjs": "6.3.3",
     "todomvc-app-css": "^2.0.6",
-    "ts-loader": "^6.2.1",
-    "typescript": "3.6.4",
+    "ts-loader": "8.2.0",
+    "typescript": "^4.7.4",
     "webpack": "^4.41.2",
+    "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.3.9",
     "webpack-dev-middleware": "^3.7.2",
-    "webpack-hot-middleware": "^2.25.0",
-    "webpack-bundle-analyzer": "^3.6.0"
+    "webpack-hot-middleware": "^2.25.0"
   }
 }

packages/examples/todomvc/src/app.tsx

@@ -1,9 +1,9 @@
+import { Atom, bind, classes, F, Lens, reactiveList } from '@grammarly/focal'
 import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-import { fromEvent, defer } from 'rxjs'
+import { createRoot } from 'react-dom/client'
+import { defer, fromEvent } from 'rxjs'
 import { combineLatest, map, startWith } from 'rxjs/operators'
-import { F, Atom, Lens, bind, reactiveList, classes } from '@grammarly/focal'
-import { TodoItem, AppModel } from './model'
+import { AppModel, TodoItem } from './model'
 
 const locationHash = defer(() =>
   fromEvent(window, 'hashchange').pipe(
@@ -208,9 +208,9 @@ export class App {
   ) {}
 
   start() {
-    ReactDOM.render(
-      <AppComponent model={this._model}/>,
-      this._targetElement
+    const root = createRoot(this._targetElement)
+    root.render(
+      <AppComponent model={this._model}/>
     )
   }
 }

packages/focal/jest-shim.js

@@ -0,0 +1,2 @@
+global.TextEncoder = require ('util').TextEncoder
+global.TextDecoder = require ('util').TextDecoder

packages/focal/jest.config.js

@@ -5,6 +5,7 @@ module.exports = {
     'ts',
     'tsx',
   ],
+  setupFiles: [`<rootDir>/jest-shim.js`],
   testEnvironment: 'jest-environment-jsdom',
   testMatch: [
     '**/*.test.ts?(x)',

packages/focal/package.json

@@ -93,24 +93,24 @@
     "type": "git",
     "url": "https://github.com/grammarly/focal.git"
   },
-  "dependencies": {},
   "devDependencies": {
     "@types/jest": "24.0.20",
-    "@types/node": "^6.0.34",
-    "@types/react": "16.9.11",
-    "@types/react-dom": "16.9.3",
-    "jest": "^24.1.0",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
+    "@types/node": "^18.0.0",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.0",
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^28.1.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "rxjs": "6.3.3",
-    "ts-jest": "^23.10.5",
-    "typescript": "3.6.4"
+    "ts-jest": "^28.0.5",
+    "typescript": "^4.7.4"
   },
   "peerDependencies": {
-    "@types/react": ">= 16.9.11 < 17.0.0-0",
-    "@types/react-dom": ">= 16.9.3 < 17.0.0-0",
-    "react": ">= 16.11.0 < 17.0.0-0",
-    "react-dom": ">= 16.11.0 < 17.0.0-0",
+    "@types/react": ">= 18.0.0 < 19.0.0-0",
+    "@types/react-dom": ">= 18.0.0 < 19.0.0-0",
+    "react": ">= 18.0.0 < 19.0.0-0",
+    "react-dom": ">= 18.0.0 < 19.0.0-0",
     "rxjs": ">= 6.3.3 < 7.0.0-0"
   }
 }

packages/focal/src/index.ts

@@ -1,12 +1,7 @@
-export { Lens, Prism, Optic } from './lens/index'
 export { Atom, ReadOnlyAtom } from './atom/index'
-export { Option } from './utils'
-
+export { Lens, Optic, Prism } from './lens/index'
 export {
-  bind,
-  lift,
-  reactiveList,
-  classes,
-  bindElementProps,
-  F
+  bind, bindElementProps, classes, F, lift,
+  reactiveList
 } from './react'
+export { Option } from './utils'

packages/focal/src/react/intrinsic.ts

@@ -4,10 +4,11 @@
  * @module
  */
 import * as React from 'react'
-import { ObservableReactHTMLProps, ObservableReactChildren } from './observablePropTypes'
-import { LiftWrapperProps, LiftWrapper } from './react'
+import { ObservableReactChildren, ObservableReactHTMLProps } from './observablePropTypes'
+import { LiftWrapper, LiftWrapperProps } from './react'
 
-export interface LiftedIntrinsicComponentProps<E> extends ObservableReactHTMLProps<E> {
+export interface LiftedIntrinsicComponentProps<E>
+  extends ObservableReactHTMLProps<E> {
   mount?: React.Ref<E>
   forwardRef?: React.Ref<E>
 }

packages/focal/src/react/observablePropTypes.ts

@@ -13,15 +13,16 @@ export type ObservableReactCSSProperties =
   ObservableLike<React.CSSProperties> | ObservableLikeRecord<React.CSSProperties>
 
 export interface ObservableReactChildren {
-  children?: ObservableLike<React.ReactNode>
+  children?: ObservableLike<React.ReactNode> | ObservableLike<React.ReactNode>[]
 }
 
 export type ObservableReactHTMLAttributes<
   E, A extends React.HTMLAttributes<E> = React.AllHTMLAttributes<E>
-> = ObservableLikeRecord<Pick<A, Exclude<keyof A, 'style'>>> & {
+> = ObservableLikeRecord<Omit<A, 'style' | 'children'>> & {
   style?: ObservableReactCSSProperties
+  children?: ObservableLike<React.ReactNode> | ObservableLike<React.ReactNode>[]
 }
 
 export type ObservableReactHTMLProps<
-  E, A extends React.HTMLAttributes<E> = React.AllHTMLAttributes<E>
-> = ObservableReactHTMLAttributes<E, A> & React.ClassAttributes<E>
+  E, A extends React.HTMLAttributes<E> = React.AllHTMLAttributes<E>,
+  > = ObservableReactHTMLAttributes<E, A> & React.ClassAttributes<E>

packages/focal/src/react/react.ts

@@ -1,15 +1,11 @@
 import * as React from 'react'
-import { structEq } from './../utils'
-import { Atom } from './../atom'
-import { warning, getReactComponentName, DEV_ENV } from './../utils'
 import {
-  Observable,
-  ObservableInput,
-  Subscription as RxSubscription,
-  combineLatest,
-  of
+  combineLatest, Observable,
+  ObservableInput, of, Subscription as RxSubscription
 } from 'rxjs'
-import { scan, map } from 'rxjs/operators'
+import { map, scan } from 'rxjs/operators'
+import { Atom } from './../atom'
+import { DEV_ENV, getReactComponentName, structEq, warning } from './../utils'
 
 export interface Subscription {
   unsubscribe(): void
@@ -21,7 +17,7 @@ export type Lifted<T> = {
 
 export interface LiftWrapperProps<TProps> {
   component: React.Component<TProps, any>
-    | React.StatelessComponent<TProps>
+    | React.FunctionComponent<TProps>
     | React.ComponentClass<TProps>
     | React.ComponentType
     | keyof React.ReactHTML
@@ -151,7 +147,7 @@ export type LiftedComponentProps<TProps> = Lifted<TProps> & {
  * <LiftedHelloComponent name={observableValue as any} />
  */
 export function lift<TProps>(
-  component: React.ComponentClass<TProps> | React.StatelessComponent<TProps>
+  component: React.ComponentClass<TProps> | React.FunctionComponent<TProps>
 ) {
   return (props: LiftedComponentProps<TProps>) =>
     React.createElement<LiftWrapperProps<TProps>>(
@@ -216,7 +212,7 @@ function walkObservables<T>(
  */
 function render<P>(
   class_: React.Component<P, any>
-    | React.StatelessComponent<P>
+    | React.FunctionComponent<P>
     | React.ComponentClass<P>
     | React.ComponentType
     | keyof React.ReactHTML,

packages/focal/src/utils.ts

@@ -57,14 +57,14 @@ export function warning(message: string) {
 export function getReactComponentName(
   component: string
     | React.ComponentClass<any>
-    | React.StatelessComponent<any>
+    | React.FunctionComponent<any>
     | React.Component<any, any>
 ) {
   return typeof component === 'string' ? component
     : (component as React.ComponentClass<any>).displayName !== undefined
       ? (component as React.ComponentClass<any>).displayName
-    : (component as React.StatelessComponent<any>).name !== undefined
-      ? (component as React.StatelessComponent<any>).name
+    : (component as React.FunctionComponent<any>).name !== undefined
+      ? (component as React.FunctionComponent<any>).name
     : component.constructor && component.constructor.name !== undefined
       ? component.constructor.name
     : undefined

packages/focal/test/react.test.tsx

@@ -1,16 +1,10 @@
-import { of, EMPTY, NEVER } from 'rxjs'
-import { map, throttleTime } from 'rxjs/operators'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom/server'
-
+import { EMPTY, NEVER, of } from 'rxjs'
+import { map, throttleTime } from 'rxjs/operators'
 import {
-  F,
-  lift,
-  bind,
-  Atom,
-  reactiveList,
-  classes,
-  bindElementProps
+  Atom, bind, bindElementProps, classes, F,
+  lift, reactiveList
 } from '../src'
 
 class Comp extends React.Component<{ test: string }, {}> {

packages/test/package.json

@@ -18,20 +18,20 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@grammarly/focal": "0.8.5",
-    "@types/node": "^9.6.0",
-    "@types/react": "16.9.11",
-    "@types/react-dom": "16.9.3",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.0",
     "eslint": "^7.18.0",
-    "eslint-webpack-plugin": "2.5.3",
+    "eslint-webpack-plugin": "^2.5.3",
     "express": "^4.14.0",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.3.0",
     "rxjs": "6.3.3",
     "todomvc-app-css": "^2.0.6",
-    "typescript": "3.6.4",
+    "ts-loader": "8.2.0",
+    "typescript": "^4.7.4",
     "webpack": "^4.41.2",
     "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.3.9",