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