WIP: Upgrade to react 18

At this point, the studio and core work with react 18, but r3f doesn't.
This commit is contained in:
Aria Minaei 2023-08-03 20:42:40 +02:00
parent 46e58ca6d8
commit f562d225c6
20 changed files with 1274 additions and 429 deletions

View file

@ -23,7 +23,8 @@
*/
module.exports = {
root: true,
plugins: ['unused-imports', 'eslint-plugin-tsdoc'],
plugins: ['unused-imports', 'eslint-plugin-tsdoc', 'import'],
settings: {},
extends: [],
rules: {
'unused-imports/no-unused-imports': 'warn',
@ -88,5 +89,18 @@ module.exports = {
},
},
},
{
files: [
`packages/*/**/*.ts`,
`packages/*/**/*.tsx`,
`packages/*/**/*.js`,
],
rules: {
'import/no-extraneous-dependencies': [
'error',
// {optionalDependencies: false, peerDependencies: false},
],
},
},
],
}

View file

@ -35,13 +35,15 @@
"devDependencies": {
"@microsoft/api-documenter": "^7.19.0",
"@microsoft/api-extractor": "^7.28.6",
"@types/eslint": "^8.44.1",
"@typescript-eslint/eslint-plugin": "^5.30.7",
"@typescript-eslint/parser": "^5.30.7",
"esbuild": "^0.18.13",
"eslint": "^8.20.0",
"eslint-plugin-import": "2.28.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-tsdoc": "^0.2.16",
"eslint-plugin-react": "^7.33.1",
"eslint-plugin-tsdoc": "^0.2.17",
"eslint-plugin-unused-imports": "^2.0.0",
"fast-glob": "^3.3.0",
"husky": "^6.0.0",
@ -56,10 +58,6 @@
"zx": "^2.0.0"
},
"packageManager": "yarn@3.2.0",
"resolutions": {
"@types/react": "^17.0.9",
"@types/react-dom": "^17.0.9"
},
"dependencies": {
"@actions/core": "^1.10.0"
}

View file

@ -1,3 +1,4 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import {Atom} from '@theatre/dataverse'
describe(`Atom`, () => {

View file

@ -1,3 +1,4 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import {Ticker} from '@theatre/dataverse'
import {EMPTY_TICKS_BEFORE_GOING_DORMANT} from './Ticker'

View file

@ -1,4 +1,5 @@
import type {Pointer, Prism} from '@theatre/dataverse'
// eslint-disable-next-line import/no-extraneous-dependencies
import {
isPointer,
isPrism,
@ -10,8 +11,7 @@ import {
Ticker,
val,
} from '@theatre/dataverse'
// eslint-disable-next-line no-restricted-imports
import {set as lodashSet} from 'lodash'
import {set as lodashSet} from 'lodash-es'
import {isPointerToPrismProvider} from './pointerToPrism'
describe(`The exhaustive guide to dataverse`, () => {

View file

@ -1,3 +1,4 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import {pointer, getPointerParts, Atom} from '@theatre/dataverse'
describe(`pointer`, () => {

View file

@ -20,19 +20,26 @@
"@percy/cli": "^1.16.0",
"@percy/playwright": "^1.0.4",
"@playwright/test": "^1.36.2",
"@react-three/drei": "^7.2.2",
"@react-three/fiber": "^7.0.6",
"@rollup/plugin-virtual": "^3.0.1",
"@react-three/drei": "^9.80.1",
"@react-three/fiber": "^8.13.6",
"@theatre/core": "workspace:*",
"@theatre/dataverse": "workspace:*",
"@theatre/r3f": "workspace:*",
"@theatre/studio": "workspace:*",
"@types/jest": "^26.0.23",
"@types/lodash-es": "^4.17.4",
"@types/node": "^15.6.2",
"@types/react": "^17.0.9",
"@types/react": "^18.2.18",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.0",
"@vitejs/plugin-react-swc": "^3.3.2",
"three": "^0.130.1",
"fast-glob": "^3.3.0",
"lodash-es": "^4.17.21",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"styled-components": "^5.3.5",
"theatric": "workspace:*",
"three": "^0.155.0",
"typescript": "^4.4.2",
"vite": "^4.3.9"
}

View file

@ -1,5 +1,5 @@
import React from 'react'
import ReactDOM from 'react-dom'
import ReactDOM from 'react-dom/client'
import App from './App'
import studio from '@theatre/studio'
import extension from '@theatre/r3f/dist/extension'
@ -7,4 +7,4 @@ import extension from '@theatre/r3f/dist/extension'
studio.extend(extension)
studio.initialize()
ReactDOM.render(<App />, document.getElementById('root'))
ReactDOM.createRoot(document.getElementById('root')).render(<App />)

View file

@ -1,5 +1,5 @@
import React from 'react'
import ReactDOM from 'react-dom'
import ReactDOM from 'react-dom/client'
import studio from '@theatre/studio'
import {getProject} from '@theatre/core'
import {Scene} from './Scene'
@ -12,7 +12,7 @@ import {Scene} from './Scene'
studio.initialize()
ReactDOM.render(
ReactDOM.createRoot(document.getElementById('root')).render(
<Scene
project={getProject('Sample project', {
// experiments: {
@ -24,5 +24,4 @@ ReactDOM.render(
// },
})}
/>,
document.getElementById('root'),
)

View file

@ -1,5 +1,5 @@
import React from 'react'
import ReactDOM from 'react-dom'
import ReactDOM from 'react-dom/client'
import App from './App'
import studio from '@theatre/studio'
import extension from '@theatre/r3f/dist/extension'
@ -7,4 +7,4 @@ import extension from '@theatre/r3f/dist/extension'
studio.extend(extension)
studio.initialize()
ReactDOM.render(<App />, document.getElementById('root'))
ReactDOM.createRoot(document.getElementById('root')).render(<App />)

View file

@ -47,12 +47,15 @@
"clean": "rm -rf ./dist && rm -f tsconfig.tsbuildinfo"
},
"devDependencies": {
"@react-three/drei": "^7.3.1",
"@react-three/drei": "^9.80.1",
"@react-three/fiber": "^8.13.6",
"@theatre/dataverse": "workspace:*",
"@theatre/react": "workspace:*",
"@types/jest": "^26.0.23",
"@types/lodash-es": "^4.17.4",
"@types/node": "^15.6.2",
"@types/react": "^17.0.9",
"@types/react": "^18.2.18",
"@types/react-dom": "^18.2.7",
"@types/styled-components": "^5.1.9",
"@types/three": "0.131.0",
"esbuild": "^0.18.17",
@ -60,13 +63,16 @@
"lodash-es": "^4.17.21",
"npm-run-all": "^4.1.5",
"polished": "^4.1.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.2.0",
"react-merge-refs": "^1.1.0",
"react-shadow": "^19.0.3",
"react-use-measure": "^2.0.4",
"reakit": "^1.3.8",
"styled-components": "^5.3.5",
"three": "0.131.3",
"three": "0.155.0",
"three-stdlib": "^2.24.1",
"typescript": "^4.4.2",
"zustand": "^3.5.1"
},
@ -76,6 +82,6 @@
"@theatre/studio": "*",
"react": ">=17.0.2",
"react-dom": ">=17.0.2",
"three": ">=0.131.3"
"three": ">=0.155.0"
}
}

View file

@ -2,6 +2,7 @@ import {useCallback, useEffect, useLayoutEffect, useMemo, useState} from 'react'
import React from 'react'
import {Canvas, useThree} from '@react-three/fiber'
import type {BaseSheetObjectType} from '../../main/store'
// eslint-disable-next-line import/no-extraneous-dependencies
import {__private_allRegisteredObjects as allRegisteredObjects} from '@theatre/r3f'
import shallow from 'zustand/shallow'
import root from 'react-shadow/styled-components'

View file

@ -1,4 +1,5 @@
import {useLayoutEffect, useRef, useState} from 'react'
// eslint-disable-next-line import/no-extraneous-dependencies
import {
__private_allRegisteredObjects as allRegisteredObjects,
__private_makeStoreKey as makeStoreKey,

View file

@ -2,7 +2,7 @@ import SnapshotEditor from './components/SnapshotEditor'
import type {IExtension} from '@theatre/studio'
import {prism, val} from '@theatre/dataverse'
import {getEditorSheetObject} from './editorStuff'
import ReactDOM from 'react-dom'
import ReactDOM from 'react-dom/client'
import React from 'react'
import type {ToolsetConfig} from '@theatre/studio'
import useExtensionStore from './useExtensionStore'
@ -146,7 +146,9 @@ const r3fExtension: IExtension = {
{
class: 'snapshot',
mount: ({paneId, node}) => {
ReactDOM.render(React.createElement(SnapshotEditor, {paneId}), node)
ReactDOM.createRoot(node).render(
React.createElement(SnapshotEditor, {paneId}),
)
function unmount() {
ReactDOM.unmountComponentAtNode(node)
}

View file

@ -1,3 +1,4 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import {____private_editorStore} from '@theatre/r3f'
import create from 'zustand'

View file

@ -29,10 +29,10 @@
},
"devDependencies": {
"@microsoft/api-extractor": "^7.18.11",
"@theatre/dataverse": "workspace:*",
"@types/jest": "^26.0.23",
"@types/node": "^15.6.2",
"@types/react": "^17.0.9",
"@types/react-dom": "^17.0.6",
"@types/react": "^18.2.18",
"esbuild": "^0.12.15",
"esbuild-register": "^2.5.0",
"lodash-es": "^4.17.21",
@ -45,7 +45,6 @@
"@theatre/studio": "workspace:*"
},
"peerDependencies": {
"react": "*",
"react-dom": "*"
"react": "*"
}
}

View file

@ -57,17 +57,8 @@ declare module 'timing-function/lib/UnitBezier' {
solveSimple(progression: number)
}
}
declare module 'clean-webpack-plugin'
declare module 'webpack-notifier'
declare module 'case-sensitive-paths-webpack-plugin'
declare module 'tsconfig-paths-webpack-plugin'
declare module 'webpack-deep-scope-plugin'
declare module 'error-overlay-webpack-plugin'
declare module 'circular-dependency-plugin'
declare module 'lodash-webpack-plugin'
declare module 'webpack-bundle-analyzer'
declare module 'merge-deep'
declare module 'exec-loader!./commitHash'
declare module 'blob-compare' {
const compare: (left: File | Blob, right: File | Blob) => Promise<boolean>
export default compare

View file

@ -34,23 +34,20 @@
"@types/lodash-es": "^4.17.4",
"@types/marked": "^4.0.7",
"@types/node": "^15.12.3",
"@types/react": "^17.0.9",
"@types/react-dom": "^17.0.6",
"@types/prop-types": "^15.7.5",
"@types/react": "^18.2.18",
"@types/react-dom": "^18.2.7",
"@types/react-icons": "^3.0.0",
"@types/redux-actions": "^2.6.1",
"@types/rollup": "0.54.0",
"@types/shallowequal": "^1.1.1",
"@types/styled-components": "^5.1.9",
"@types/uuid": "^8.3.0",
"blob-compare": "1.1.0",
"circular-dependency-plugin": "^5.2.2",
"cross-env": "^7.0.3",
"esbuild": "^0.18.17",
"esbuild-loader": "^2.13.1",
"esbuild-register": "^2.5.0",
"exec-loader": "^4.0.0",
"file-loader": "^6.2.0",
"fs-extra": "^10.0.0",
"html-loader": "^2.1.2",
"idb-keyval": "^6.2.0",
"identity-obj-proxy": "^3.0.0",
"immer": "^9.0.6",
@ -62,13 +59,12 @@
"marked": "^4.1.1",
"nanoid": "^3.3.1",
"npm-run-all": "^4.1.5",
"null-loader": "^4.0.1",
"polished": "^4.1.3",
"prop-types": "^15.7.2",
"propose": "^0.0.5",
"react": "^17.0.2",
"react": "^18.2.0",
"react-colorful": "^5.5.1",
"react-dom": "^17.0.2",
"react-dom": "^18.2.0",
"react-error-boundary": "^3.1.3",
"react-hot-toast": "^2.4.0",
"react-icons": "^4.2.0",
@ -85,12 +81,8 @@
"rollup-plugin-dts": "^4.0.0",
"shallowequal": "^1.1.0",
"styled-components": "^5.3.5",
"svg-inline-loader": "^0.8.2",
"timing-function": "^0.2.3",
"ts-node": "^10.0.0",
"tslib": "^2.2.0",
"typescript": "^4.4.2",
"url-loader": "^4.1.1",
"uuid": "^8.3.2"
},
"dependencies": {

View file

@ -1,7 +1,7 @@
import UIRoot from '@theatre/studio/UIRoot/UIRoot'
import type {$IntentionalAny} from '@theatre/shared/utils/types'
import React from 'react'
import ReactDOM from 'react-dom'
import ReactDOM from 'react-dom/client'
import {getMounter} from '@theatre/studio/utils/renderInPortalInContext'
import {withStyledShadow} from '@theatre/studio/css'
import ExtensionToolbar from '@theatre/studio/toolbars/ExtensionToolbar/ExtensionToolbar'
@ -54,9 +54,8 @@ export default class UINonSSRBits {
this._renderTimeout = undefined
this._documentBodyUIIsRenderedIn = document.body
this._documentBodyUIIsRenderedIn.appendChild(this.containerEl)
ReactDOM.render(
ReactDOM.createRoot(this.containerShadow).render(
React.createElement(UIRoot, {containerShadow: this.containerShadow}),
this.containerShadow,
)
}
this._renderTimeout = setTimeout(renderCallback, 10)

1576
yarn.lock

File diff suppressed because it is too large Load diff