Proof of concept for a #r3f #threejs editor, watch this video with sound on 🔊! Current mood: It works but it'll be a big effort to make it usable. 🧵 for how it works 👇

The scene-to-source wiring is done by transforming the scenes AST wrapping scene objects in a group with contextual user data. Clicking on a scene object we traverse up the Three.js scene and if this data exists we can do something with it. Only the opened scene is transformed.

Surprise! The transformation isn't a bundler plugin but a Deno service that copies source, transforms it using ts-morph and saves it to a temp file. This temp file is then the file imported to the editor! Using ts-morph and the Deno service is important, let's talk about them.

ts-morph is great for AST manipulation you can batch 'em up and save when ready. Putting this behind a stateful Deno service and you start seeing something very powerful! In the video on mouse up after moving an entity it calls the update api when saving it calls the save api.

You're also able to get types using ts-morph as it's just a wrapper over the TS compiler. Useful for finding props on JSX elements that aren't already defined on the element in source!

I see the Deno service as an integral part of scaling an editor as it allows us to remove a lot from the critical path by loading things on demand. It also also IMO raises the ceiling for interesting features such as undo/redo, multiplayer, and more.

It's not all roses though. 🔡 There's a lot of edge cases to cover with ts-morph extracting types. 🔨 The temp file flow is a bit whack and hardcoded atm 🌏 It will be a huge amount of effort to get something I'd consider production ready

I imagine the editor being a standalone app which would solve the temp file flow being whack atm. At the end of the day I'd scope this to just a scene editor wrapped in a beautiful UI with features tailored to making us more productive with R3F/JSX.