Fix/0.5-compatability-tests (theatre-js#293)

* Working changes

* Fix window undefined bug by updating lib

* Fix TransformControlsImpl import

* Fix compatibility tests>simple debuggable examples

.vscode/settings.json

@@ -1,11 +1,9 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "files.exclude": {
-    "**/node_modules": true,
-    // "**/.yarn": true,
     "**/.cache": true,
-    "**/.temp": true,
-    "**/.history": true
+    "**/.history": true,
+    "**/.temp": true
   },
   "search.exclude": {
     "**/node_modules": true,

compatibility-tests/test-cra-react18/package.json

@@ -14,8 +14,8 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@theatre/core": "^0.0.1-COMPAT.1",
-    "@theatre/studio": "^0.0.1-COMPAT.1",
     "@theatre/r3f": "^0.0.1-COMPAT.1",
+    "@theatre/studio": "^0.0.1-COMPAT.1",
     "react-scripts": "^5.0.1",
     "three": ">0.132.0",
     "web-vitals": "^1.0.1"

compatibility-tests/test-cra-react18/src/index.js

@@ -1,19 +1,92 @@
-// import ReactDOM from 'react-dom'
-
-import studio from '@theatre/studio'
 import {getProject} from '@theatre/core'
-// import React from 'react'
-// import App from './App'
+import ReactDOM from 'react-dom/client'
+import React from 'react'
+import {Canvas} from '@react-three/fiber'
+import studio from '@theatre/studio'
+import {editable as e, SheetProvider} from '@theatre/r3f'
+import extension from '@theatre/r3f/dist/extension'
+
+if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
+  studio.extend(extension)
+  studio.initialize({usePersistentStorage: false})
+}
+
+// credit: https://codesandbox.io/s/camera-pan-nsb7f
+
+function Plane({color, uniqueName, ...props}) {
+  return (
+    <e.mesh {...props} uniqueName={uniqueName}>
+      <boxBufferGeometry />
+      <meshStandardMaterial color={color} />
+    </e.mesh>
+  )
+}
 
-studio.initialize({usePersistentStorage: false})
+function App() {
+  return (
+    <Canvas
+      gl={{preserveDrawingBuffer: true}}
+      linear
+      frameloop="demand"
+      dpr={[1.5, 2]}
+      style={{position: 'absolute', top: 0, left: 0}}
+    >
+      <SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
+        {/* @ts-ignore */}
+        <e.orthographicCamera makeDefault uniqueName="Camera" />
+        <ambientLight intensity={0.4} />
+        <e.pointLight
+          position={[-10, -10, 5]}
+          intensity={2}
+          color="#ff20f0"
+          uniqueName="Light 1"
+        />
+        <e.pointLight
+          position={[0, 0.5, -1]}
+          distance={1}
+          intensity={2}
+          color="#e4be00"
+          uniqueName="Light 2"
+        />
+        <group position={[0, -0.9, -3]}>
+          <Plane
+            color="hotpink"
+            rotation-x={-Math.PI / 2}
+            position-z={2}
+            scale={[4, 20, 0.2]}
+            uniqueName="plane1"
+          />
+          <Plane
+            color="#e4be00"
+            rotation-x={-Math.PI / 2}
+            position-y={1}
+            scale={[4.2, 0.2, 4]}
+            uniqueName="plane2"
+          />
+          <Plane
+            color="#736fbd"
+            rotation-x={-Math.PI / 2}
+            position={[-1.7, 1, 3.5]}
+            scale={[0.5, 4, 4]}
+            uniqueName="plane3"
+          />
+          <Plane
+            color="white"
+            rotation-x={-Math.PI / 2}
+            position={[0, 4.5, 3]}
+            scale={[2, 0.03, 4]}
+            uniqueName="plane4"
+          />
+        </group>
+      </SheetProvider>
+    </Canvas>
+  )
+}
 
 const project = getProject('Project')
 const sheet = project.sheet('Sheet')
 const obj = sheet.object('Obj', {str: 'some string', num: 0})
 
-// ReactDOM.render(
-//   <React.StrictMode>
-//     <App obj={obj} />
-//   </React.StrictMode>,
-//   document.getElementById('root'),
-// )
+const container = document.getElementById('root')
+const root = ReactDOM.createRoot(container)
+root.render(<App obj={obj}>hi</App>)

compatibility-tests/test-next/package.json

@@ -7,9 +7,10 @@
   },
   "dependencies": {
     "@theatre/core": "^0.0.1-COMPAT.1",
+    "@theatre/r3f": "^0.0.1-COMPAT.1",
     "@theatre/studio": "^0.0.1-COMPAT.1",
     "next": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }