variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

WIP: Upgrade to react 18

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

16
.eslintrc.js
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},
],
},
},
],
}

10
package.json
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"
}

1
packages/dataverse/src/Atom.test.ts
View file

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

1
packages/dataverse/src/Ticker.test.ts
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'

4
packages/dataverse/src/dataverse.test.ts
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`, () => {

1
packages/dataverse/src/pointer.test.ts
View file

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

17
packages/playground/package.json
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"
}

4
packages/playground/src/shared/camera/index.tsx
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 />)

5
packages/playground/src/shared/dom/index.tsx
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'),
)

4
packages/playground/src/shared/r3f-rocket/index.tsx
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 />)

14
packages/r3f/package.json
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"
}
}

1
packages/r3f/src/extension/components/SnapshotEditor.tsx
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'

1
packages/r3f/src/extension/components/useSelected.tsx
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,

6
packages/r3f/src/extension/index.ts
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)
}

1
packages/r3f/src/extension/useExtensionStore.ts
View file

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

7
packages/theatric/package.json
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": "*"
}
}

9
theatre/globals.d.ts vendored
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

20
theatre/package.json
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": {

5
theatre/studio/src/UI/UINonSSRBits.ts
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
View file

File diff suppressed because it is too large Load diff