fix rapier plugin

Author: nksaraf

examples/create-a-game-with-r3f/package.json

@@ -10,6 +10,7 @@
     "@react-spring/core": "^9.4.4",
     "@react-spring/three": "^9.4.4",
     "@react-three/drei": "^9.46.4",
+    "@editable-jsx/rapier": "workspace:*",
     "@react-three/editor": "workspace:*",
     "@react-three/fiber": "^8.8.9",
     "@types/react-reconciler": "^0.28.0",

examples/create-a-game-with-r3f/src/Experience.tsx

@@ -1,7 +1,14 @@
 import { OrbitControls } from "@react-three/drei"
 import { EditorRoot, extendControls } from "@react-three/editor"
 import { Physics, RigidBody } from "@react-three/rapier"
+import { BlockAxe } from "./components/BlockAxe.js"
+import { BlockEnd } from "./components/BlockEnd.js"
+import { BlockLimbo } from "./components/BlockLimbo.js"
+import { BlockSpinner } from "./components/BlockSpinner.js"
+import { BlockStart } from "./components/BlockStart.js"
+import { Bounds } from "./components/Bounds.js"
 import Lights from "./Lights.js"
+import { Player } from "./Player.js"
 
 extendControls(RigidBody, {
   mass: { value: 1, min: 0, max: 100, step: 0.1, type: "number" },
@@ -14,14 +21,13 @@ extendControls(RigidBody, {
 function Level() {
   return (
     <>
-      {/* <group></group>
       <BlockStart position={[0, 0.426, 0]} />
       <BlockLimbo position={[0, -0.003, -4]} />
       <BlockSpinner position={[0, 0, -8]} />
       <BlockSpinner position={[0, 0, -12]} />
       <BlockAxe position={[0, 0, -16]} />
       <BlockEnd position={[0.0, 0, -20]} />
-      <Bounds length={6} name={"yo!"} /> */}
+      <Bounds length={6} name={"yo!"} />
     </>
   )
 }
@@ -35,7 +41,7 @@ export default function Experience() {
           <Level />
           <Lights />
         </EditorRoot>
-        {/* <Player /> */}
+        <Player />
         {/* <gridHelper /> */}
       </Physics>
     </>

examples/create-a-game-with-r3f/src/Lights.tsx

@@ -1,6 +1,6 @@
 export default function Lights() {
     return <>
-        <directionalLight castShadow position={[-1.389, 2.637, 0.886]} intensity={1.5} shadow-mapSize={[1024, 1024]} shadow-camera-near={1} shadow-camera-far={10} shadow-camera-top={10} shadow-camera-right={10} shadow-camera-bottom={-10} shadow-camera-left={-10} />
+        <directionalLight castShadow position={[3.451, 4.277, -2.997]} intensity={1.5} shadow-mapSize={[1024, 1024]} shadow-camera-near={1} shadow-camera-far={10} shadow-camera-top={10} shadow-camera-right={10} shadow-camera-bottom={-10} shadow-camera-left={-10} />
         <ambientLight intensity={0.7} position={[-1.984, 3.006, 0.5]} color={"rgb(209, 179, 140)"} />
     </>;
 }

examples/create-a-game-with-r3f/src/Player.tsx

@@ -1,6 +1,6 @@
 import { useKeyboardControls } from "@react-three/drei"
 import { useEditor } from "@react-three/editor"
-import { addPlugin } from "@react-three/editor/src/fiber/plugins"
+import { addPlugin } from "@react-three/editor/src/plugins"
 import { useFrame } from "@react-three/fiber"
 import { RigidBody, RigidBodyApi, useRapier } from "@react-three/rapier"
 import { useEffect, useRef } from "react"

examples/create-a-game-with-r3f/src/index.tsx

@@ -1,9 +1,8 @@
+import "@editable-jsx/rapier"
 import { KeyboardControls } from "@react-three/drei"
-import "@react-three/editor/rapier"
 import { Canvas } from "@react-three/fiber"
 import ReactDOM from "react-dom/client"
-import { Game, store } from "./Game.js"
-import { ImageList } from "./Imagelist.js"
+import Experience from "./Experience"
 import "./style.css"
 const root = ReactDOM.createRoot(document.querySelector("#root"))
 
@@ -36,7 +35,21 @@ root.render(
       }
     ]}
   >
-    <Window>
+    <Canvas
+      ref={(node) => {
+        console.log("hereee")
+        // store.canvas = node
+      }}
+      camera={{
+        fov: 45,
+        near: 0.1,
+        far: 200,
+        position: [2.5, 4, 6]
+      }}
+    >
+      <Experience />
+    </Canvas>
+    {/* <Window>
       <div className="App">
         <Canvas
           ref={(node) => {
@@ -54,6 +67,6 @@ root.render(
         </Canvas>
       </div>
     </Window>
-    <ImageList />
+    <ImageList /> */}
   </KeyboardControls>
 )

packages/rapier/package.json

@@ -11,7 +11,7 @@
   "module": "dist/editable-jsx-rapier.esm.js",
   "preconstruct": {
     "entrypoints": [
-      "index.ts"
+      "index.tsx"
     ]
   },
   "files": [
@@ -47,6 +47,7 @@
     "@babel/generator": "^7.20.4",
     "@babel/helper-plugin-utils": "^7.20.2",
     "@babel/template": "^7.18.10",
+    "@editable-jsx/editable": "workspace:^0.0.1",
     "@editable-jsx/state": "workspace:^0.0.1",
     "@editable-jsx/ui": "workspace:^0.0.1",
     "@iconify/react": "^4.0.1",

packages/rapier/src/PanelManager.tsx

@@ -1,7 +1,6 @@
-import { setEditable } from "@editable-jsx/editable"
+import { setEditable, useEditor } from "@editable-jsx/editable"
 import { Debug, Physics, useRapier } from "@react-three/rapier"
 import { useMemo } from "react"
-import { useEditor } from "./fiber"
 
 setEditable(Physics, ({ children, ...props }) => {
   const editor = useEditor()