Update to React 18

babel.config.js

@@ -5,7 +5,7 @@ module.exports = function (api) {
   api.cache.forever()
 
   return {
-    presets: ['@babel/preset-typescript'],
-    plugins: ['@babel/plugin-transform-modules-commonjs', '@babel/plugin-transform-react-jsx'],
+    presets: ['@babel/preset-typescript', '@babel/preset-react'],
+    plugins: ['@babel/plugin-transform-modules-commonjs'],
   }
 }

examples/benchmarking/compare.ts

@@ -5,8 +5,7 @@ import { mkdirpSync } from 'fs-extra'
 
 const ERROR = 10
 const ITERATIONS = 10
-const SAMPLE_SIZE = 500
-const OFFSET_FRAMES = 2
+const MINIMUM_SAMPLE_SIZE = 100
 
 mkdirpSync('./tmp')
 
@@ -36,7 +35,7 @@ const compare = async (optionA: string, optionB: string, targetRelativePerforman
     const filename = path.join(__dirname, './dist', `${example}.html`)
     await page.goto(`file://${filename}`)
 
-    await timeout(100)
+    await timeout(1000)
 
     await page.tracing.start({ path: traceFile })
 
@@ -46,15 +45,11 @@ const compare = async (optionA: string, optionB: string, targetRelativePerforman
 
     const { traceEvents } = require(traceFile)
 
-    const events = traceEvents.filter(
-      (event: TraceEvent) => event.name === 'FireAnimationFrame' || event.name === 'MinorGC',
-    )
-    const sampledEvents = events.slice(OFFSET_FRAMES, SAMPLE_SIZE + OFFSET_FRAMES)
-
-    const totalTime = sampledEvents.reduce((total: number, event: TraceEvent) => total + event.dur, 0)
+    const events = traceEvents.filter((event: TraceEvent) => event.name === 'FunctionCall')
+    const totalTime = events.reduce((total: number, event: TraceEvent) => total + (event.dur ?? 0), 0)
 
-    if (sampledEvents.length !== SAMPLE_SIZE) {
-      console.log(`Not enough samples. Measured "${events.length}" of target "${SAMPLE_SIZE}".`)
+    if (events.length < MINIMUM_SAMPLE_SIZE) {
+      console.log(`Not enough samples. Measured "${events.length}" of target "${MINIMUM_SAMPLE_SIZE}".`)
       process.exit(1)
     }
 

examples/benchmarking/package.json

@@ -14,8 +14,8 @@
     "@react-facet/shared-facet": "0.6.1",
     "@react-facet/spring": "0.6.1",
     "ramda": "^0.27.1",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "react": "18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^9.0.12",

examples/benchmarking/src/listMemoFacet.tsx

@@ -1,5 +1,5 @@
 import { useFacetState, Facet, useFacetMap, useFacetEffect, NO_VALUE, Map } from '@react-facet/core'
-import { render } from '@react-facet/dom-fiber'
+import { createRoot } from '@react-facet/dom-fiber'
 import React, { useEffect } from 'react'
 
 interface Data {
@@ -103,4 +103,8 @@ const dataEqualityCheck = () => {
 }
 
 document.body.innerHTML = '<div id="root"/>'
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element !== null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}

examples/benchmarking/src/listMemoState.tsx

@@ -1,4 +1,4 @@
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import React, { useEffect, useState, memo } from 'react'
 
 interface Data {
@@ -65,4 +65,8 @@ const ListItem = memo(({ health, name }: Data) => {
 const randomWork = (name: string | number) => Math.random()
 
 document.body.innerHTML = '<div id="root"/>'
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element !== null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}

examples/benchmarking/src/markerFacet.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { render } from '@react-facet/dom-fiber'
+import { createRoot } from '@react-facet/dom-fiber'
 import { useFacetState, Facet, useFacetMap, NO_VALUE, Map } from '@react-facet/core'
 import { times } from 'ramda'
 
@@ -63,4 +63,8 @@ function Performance() {
 }
 
 document.body.innerHTML = '<div id="root"/>'
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element !== null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}

examples/benchmarking/src/markerFacetNumber.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { render } from '@react-facet/dom-fiber'
+import { createRoot } from '@react-facet/dom-fiber'
 import { useFacetState, Facet, useFacetMap, NO_VALUE, Map } from '@react-facet/core'
 import { times } from 'ramda'
 
@@ -63,4 +63,8 @@ function Performance() {
 }
 
 document.body.innerHTML = '<div id="root"/>'
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element !== null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}

examples/benchmarking/src/markerState.tsx

@@ -1,4 +1,4 @@
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import React, { useEffect, useState } from 'react'
 import { times } from 'ramda'
 
@@ -61,4 +61,8 @@ function Performance() {
 }
 
 document.body.innerHTML = '<div id="root"/>'
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element !== null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}

examples/benchmarking/src/mountFacetDomFiber.tsx

@@ -1,4 +1,4 @@
-import { render } from '@react-facet/dom-fiber'
+import { createRoot } from '@react-facet/dom-fiber'
 import { times } from 'ramda'
 import React, { useEffect, useState } from 'react'
 
@@ -54,4 +54,8 @@ const ComplexComponent = ({ value }: { value: number }) => {
 }
 
 document.body.innerHTML = '<div id="root"/>'
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element !== null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}

examples/benchmarking/src/mountReactDom.tsx

@@ -1,4 +1,4 @@
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { times } from 'ramda'
 import React, { useEffect, useState } from 'react'
 
@@ -54,4 +54,8 @@ const ComplexComponent = ({ value }: { value: number }) => {
 }
 
 document.body.innerHTML = '<div id="root"/>'
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element !== null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}

examples/benchmarking/src/overheadFacet.tsx

@@ -1,4 +1,4 @@
-import { render } from '@react-facet/dom-fiber'
+import { createRoot } from '@react-facet/dom-fiber'
 import { useFacetState, useFacetEffect } from '@react-facet/core'
 import React, { useEffect } from 'react'
 
@@ -31,5 +31,9 @@ function Performance() {
   return null
 }
 
-document.body.innerHTML = `<div id="root"></div>`
-render(<Performance />, document.getElementById('root'))
+document.body.innerHTML = '<div id="root"/>'
+const element = document.getElementById('root')
+if (element !== null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}

examples/benchmarking/src/overheadState.tsx

@@ -1,4 +1,4 @@
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import React, { useEffect, useState } from 'react'
 
 function Performance() {
@@ -26,5 +26,9 @@ function Performance() {
   return null
 }
 
-document.body.innerHTML = `<div id="root"></div>`
-render(<Performance />, document.getElementById('root'))
+document.body.innerHTML = '<div id="root"/>'
+const element = document.getElementById('root')
+if (element !== null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}

examples/benchmarking/src/progressBarFacet.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { useFacetMap, Facet, useFacetState } from '@react-facet/core'
-import { render } from '@react-facet/dom-fiber'
+import { createRoot } from '@react-facet/dom-fiber'
 
 const ProgressBar = ({ progress }: { progress: Facet<number> }) => {
   const width = useFacetMap((progress) => `${progress * 20}px`, [], [progress])
@@ -18,7 +18,7 @@ const ProgressBar = ({ progress }: { progress: Facet<number> }) => {
   )
 }
 
-const App = () => {
+const Performance = () => {
   const [progress, setProgress] = useFacetState(0)
 
   useEffect(() => {
@@ -39,5 +39,9 @@ const App = () => {
   return <ProgressBar progress={progress} />
 }
 
-document.body.innerHTML = `<div id="root"></div>`
-render(<App />, document.getElementById('root'))
+document.body.innerHTML = '<div id="root"/>'
+const element = document.getElementById('root')
+if (element !== null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}

examples/benchmarking/src/progressBarState.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 const ProgressBar = ({ progress }: { progress: number }) => {
   const width = `${progress * 20}px`
@@ -17,7 +17,7 @@ const ProgressBar = ({ progress }: { progress: number }) => {
   )
 }
 
-const App = () => {
+const Performance = () => {
   const [progress, setProgress] = useState(0)
 
   useEffect(() => {
@@ -38,5 +38,9 @@ const App = () => {
   return <ProgressBar progress={progress} />
 }
 
-document.body.innerHTML = `<div id="root"></div>`
-render(<App />, document.getElementById('root'))
+document.body.innerHTML = '<div id="root"/>'
+const element = document.getElementById('root')
+if (element !== null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}

examples/benchmarking/src/toggleRealisticClassFacet.tsx

@@ -1,4 +1,4 @@
-import { render } from '@react-facet/dom-fiber'
+import { createRoot } from '@react-facet/dom-fiber'
 import { useFacetState } from '@react-facet/core'
 import React, { useEffect } from 'react'
 
@@ -59,4 +59,8 @@ document.body.innerHTML = `
 </style>
 `
 
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element !== null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}

examples/benchmarking/src/toggleRealisticClassState.tsx

@@ -1,4 +1,4 @@
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import React, { useEffect, useState } from 'react'
 
 function Performance() {
@@ -58,4 +58,8 @@ document.body.innerHTML = `
 </style>
 `
 
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element !== null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}

examples/benchmarking/src/toggleSimpleClassFacet.tsx

@@ -1,4 +1,4 @@
-import { render } from '@react-facet/dom-fiber'
+import { createRoot } from '@react-facet/dom-fiber'
 import { useFacetState } from '@react-facet/core'
 import React, { useEffect } from 'react'
 
@@ -37,4 +37,8 @@ document.body.innerHTML = `
 </style>
 `
 
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element !== null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}

examples/benchmarking/src/toggleSimpleClassState.tsx

@@ -1,4 +1,4 @@
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import React, { useEffect, useState } from 'react'
 
 function Performance() {
@@ -36,4 +36,8 @@ document.body.innerHTML = `
 </style>
 `
 
-render(<Performance />, document.getElementById('root'))
+const element = document.getElementById('root')
+if (element !== null) {
+  const root = createRoot(element)
+  root.render(<Performance />)
+}

jest.base.config.js

@@ -2,14 +2,14 @@
 
 // Base Jest configuration for individual projects. Use this as a starting point for your package config
 module.exports = {
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: { url: 'http://localhost' },
   watchPathIgnorePatterns: ['<rootDir>/dist/'],
-  testResultsProcessor: '<rootDir>/../../../jest.testResultsProcessor.js',
   moduleFileExtensions: ['tsx', 'js', 'ts'],
   testMatch: ['**/?(*.)+(spec|test).js?(x)', '**/?(*.)+(spec|test).ts?(x)'],
   setupFilesAfterEnv: ['<rootDir>/../../../jest.setupTestFrameworkScriptFile.js'],
   transform: {
-    '^.+\\.jsx?$': 'babel-jest',
-    '^.+\\.tsx?$': 'babel-jest',
+    '^.+\\.[jt]sx?$': ['babel-jest', { rootMode: 'upward' }],
   },
   testPathIgnorePatterns: ['/node_modules/', '/dist/'],
 }

jest.setupTestFrameworkScriptFile.js

@@ -1,7 +1,10 @@
 /* eslint-disable import/no-named-as-default-member */
 // eslint-disable-next-line require-in-package/require-in-package
-import React from 'react'
-import '@testing-library/jest-dom/extend-expect'
+const React = require('react')
+
+const matchers = require('@testing-library/jest-dom/extend-expect')
+
+expect.extend(matchers)
 
 // Make useEffect run synchronously to make it easier to test
 // TODO: update this to an official solution once available