feat: Official support for React18 incl StrictMode (#1875)

* chore: update some deps

react & testing

* fix: cleanup observers in layout cleanup

* chore: update peerdeps

* chore: add changesets

* fix: useTransition on initial mount

should run usedTransitions when the component is mounted

* chore: bump @types packages and fix TS errors

* fix: generic In and Out are reserved words in ts 4.7

resolves #1883

* refactor: use better(?) plugin for snapshots

* fix: docs site

* chore: tidy ups

Author: joshuaellis

.changeset/orange-rivers-applaud.md

@@ -0,0 +1,21 @@
+{
+  "mode": "pre",
+  "tag": "beta",
+  "initialVersions": {
+    "@react-spring/demo": "1.0.0",
+    "@react-spring/docs": "1.0.6",
+    "@react-spring/animated": "9.4.4",
+    "@react-spring/core": "9.4.4",
+    "@react-spring/parallax": "9.4.4",
+    "@react-spring/rafz": "9.4.4",
+    "react-spring": "9.4.4",
+    "@react-spring/shared": "9.4.4",
+    "@react-spring/types": "9.4.4",
+    "@react-spring/konva": "9.4.4",
+    "@react-spring/native": "9.4.4",
+    "@react-spring/three": "9.4.4",
+    "@react-spring/web": "9.4.4",
+    "@react-spring/zdog": "9.4.4"
+  },
+  "changesets": []
+}

.changeset/pre.json

@@ -2,14 +2,19 @@ const ANIMATION_WAIT = 4000
 
 describe('Parallax - vertical', () => {
   const HEIGHT = Cypress.config('viewportHeight')
+  const WIDTH = Cypress.config('viewportWidth')
 
   beforeEach(() => {
     cy.visit('/vertical')
   })
 
   it('should translate layers as expected', () => {
     // intial snapshot
-    cy.findByTestId('container').toMatchSnapshot()
+    console.log(HEIGHT, WIDTH)
+
+    cy.findByTestId('container').matchImageSnapshot('vertical #1', {
+      clip: { x: 0, y: 0, width: WIDTH, height: HEIGHT },
+    })
 
     // initial layer positions
     cy.findByTestId('default-layer')
@@ -37,7 +42,9 @@ describe('Parallax - vertical', () => {
     cy.wait(ANIMATION_WAIT)
 
     // halfway snapshot
-    cy.findByTestId('container').toMatchSnapshot()
+    cy.findByTestId('container').matchImageSnapshot('vertical #2', {
+      clip: { x: 0, y: 0, width: WIDTH, height: HEIGHT },
+    })
 
     // halfway layer positions
     cy.findByTestId('default-layer')
@@ -65,7 +72,9 @@ describe('Parallax - vertical', () => {
     cy.wait(ANIMATION_WAIT)
 
     // final snapshot
-    cy.findByTestId('container').toMatchSnapshot()
+    cy.findByTestId('container').matchImageSnapshot('vertical #3', {
+      clip: { x: 0, y: 0, width: WIDTH, height: HEIGHT },
+    })
 
     // final layer positions
     cy.findAllByTestId(/-layer/).each(layer =>
@@ -83,6 +92,7 @@ describe('Parallax - vertical', () => {
 })
 
 describe('Parallax - horizontal', () => {
+  const HEIGHT = Cypress.config('viewportHeight')
   const WIDTH = Cypress.config('viewportWidth')
 
   beforeEach(() => {
@@ -91,7 +101,9 @@ describe('Parallax - horizontal', () => {
 
   it('should translate layers as expected', () => {
     // intial snapshot
-    cy.findByTestId('container').toMatchSnapshot()
+    cy.findByTestId('container').matchImageSnapshot('horizontal #1', {
+      clip: { x: 0, y: 0, width: WIDTH, height: HEIGHT },
+    })
 
     // initial layer positions
     cy.findByTestId('default-layer')
@@ -119,7 +131,9 @@ describe('Parallax - horizontal', () => {
     cy.wait(ANIMATION_WAIT)
 
     // halfway snapshot
-    cy.findByTestId('container').toMatchSnapshot()
+    cy.findByTestId('container').matchImageSnapshot('horizontal #2', {
+      clip: { x: 0, y: 0, width: WIDTH, height: HEIGHT },
+    })
 
     // halfway layer positions
     cy.findByTestId('default-layer')
@@ -148,7 +162,9 @@ describe('Parallax - horizontal', () => {
     cy.wait(ANIMATION_WAIT)
 
     // final snapshot
-    cy.findByTestId('container').toMatchSnapshot()
+    cy.findByTestId('container').matchImageSnapshot('horizontal #3', {
+      clip: { x: 0, y: 0, width: WIDTH, height: HEIGHT },
+    })
 
     // final layer positions
     cy.findAllByTestId(/-layer/).each(layer =>

.yarn/cache/@ampproject-remapping-npm-2.2.0-114878fa50-d74d170d06.zip

@@ -1,6 +1,6 @@
-const { initPlugin } = require('cypress-plugin-snapshots/plugin')
+const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin')
 
 module.exports = (on, config) => {
-  initPlugin(on, config)
+  addMatchImageSnapshotPlugin(on, config)
   return config
 }

.yarn/cache/@babel-compat-data-npm-7.17.10-78bb00a360-e85051087c.zip

@@ -1 +1,4 @@
 import '@testing-library/cypress/add-commands'
+import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command'
+
+addMatchImageSnapshotCommand()

.yarn/cache/@babel-core-npm-7.17.10-1a94847d37-2545fb24b4.zip

@@ -15,7 +15,6 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
-import 'cypress-plugin-snapshots/commands'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

.yarn/cache/@babel-generator-npm-7.17.10-6e6a510ddb-9ec596a6ff.zip

@@ -16,8 +16,8 @@
     "lodash.clamp": "^4.0.3",
     "lodash.shuffle": "^4.2.0",
     "lorem-ipsum": "^2.0.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-feather": "^2.0.9",
     "react-use-gesture": "^9.1.3",
     "react-use-measure": "^2.1.1",

.yarn/cache/@babel-helper-compilation-targets-npm-7.17.10-4648377de1-5f547c7ebd.zip

@@ -1,11 +1,12 @@
 import * as React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import './index.css'
 import App from './App'
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 )
+
+// ReactDOM.createRoot(document.getElementById('root')).render(<App />)

.yarn/cache/@babel-helper-function-name-npm-7.17.9-baf558fead-a59b2e5af5.zip

@@ -4,8 +4,8 @@
   "main": "src/index.tsx",
   "dependencies": {
     "@react-spring/web": "*",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-scripts": "4.0.3",
     "react-use-measure": "2.0.4"
   },
@@ -22,8 +22,8 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.3",
     "typescript": "^4.2.3"
   }
 }

.yarn/cache/@babel-helper-module-transforms-npm-7.17.7-d26786bf84-0b8f023aa7.zip

@@ -1,12 +1,11 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
 
-const rootElement = document.getElementById('root')
-ReactDOM.render(
+const rootElement = document.getElementById('root')!
+ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  rootElement
+  </React.StrictMode>
 )

.yarn/cache/@babel-helper-simple-access-npm-7.17.7-3274d165af-58a9bfd054.zip

@@ -4,8 +4,8 @@
   "main": "src/index.tsx",
   "dependencies": {
     "@react-spring/web": "*",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-scripts": "4.0.3",
     "react-use-gesture": "^9.1.3"
   },
@@ -22,8 +22,8 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.3",
     "typescript": "^4.2.3"
   }
 }