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

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": "*"
}
}