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!