At the very high level, yeah that's pretty much what's happening. We generate IDs that we map to each of the elements statically and that we inject into the DOM so that we can capture metadata about the element. We're currently writing an in-depth explanation of how this all works, which will be uploaded on our blog in the very near future.
I've been working on a WebGL project that had extremely low frame rates to start with and refused to give up until it rendered in real-time because of this talk. It's one thing to make something useful but I think the real measure of success is if it's useful and the value is created in real-time like you've done. Congrats!
Wrt the VS Code plugin, it was an idea we were toying with. Ultimately we decided to go with a standalone editor because we didn't want to limit our market and run the risks involved with coupling our existence to them. That being said, a VS Code plugin is absolutely in our future and something we would want.
You're absolutely right that by targeting React we are mitigating some of those issues you've mentioned, but they are still issues that we still need to address, so we do need to adjust or introduce further tooling. All of these things are on our roadmap, but we're a small team so it's a case of prioritising, which is where comments like this come in to play as they help us add weight to those priorities.
We've got a long way to go, but thoughtful and constructive comments like these help us immensely along the way :)
It's understandable that you started with standalone for the control and independence. I'm happy to hear that you have VSCode plugin planned. I wish you all the best and I see massive potential for your project to become essential part of visual IDE for the web.
That's absolutely true for sure, and I'd go so far as to argue that it's one of (if not the) primary driving forces behind development tooling decisions. Whereas some changes are well suited to e.g. unit testing (and where a passing suite of tests provides that instant feedback), when working on the design or interactions of an interface it's very important to actually "see" and/or play with the result of each minor tweak, so the faster you can make that loop the more pleasurable the development experience will be.
Our goal isn't a no-code tool, but rather an editor that provides the tools for both developers and designers. We're iteratively improving the level of complexity of code that we can fully parse and expose to the rest of the editor, so you can expect these kinds of cases to become fewer and far between over time.
If you do have specific cases that you come across and are interested in following the development or just want to let us know of them, please do file an issue on our GitHub repo.
Are you planning to expose the JSX editing capabilities as a library, so that it could be used for e.g. non-web-UI editing?
I've been working on a React/JSX wrapper for OpenJSCAD (a solid CAD library), where the "viewer" (that shows the rendered model) offers simple interactivity that is decoupeled from the code. It would be amazing if that could be extended to allow for editing the code when you interact with parts of the model in the viewer (as you would do in traditional CAD programs).
Hmmm that's incredibly frustrating. I'm trying to reproduce this but failing. Are you able to do this every time? If so is there any chance you could take a screen recording please to help us debug it?
First I have to apologize. I hadn't upgraded chrome. After updating it did not happen again on chrome. It does happen on firefox[0], and I do realize that you've stated your app works best in chrome.
Lastly, thanks for making this. It looks really cool.
This is ultimately one of our goals, to allow maintainers of those kinds of libraries to publish that kind of integration, or for us or even other users to provide it (thinking along similar lines to TypeScript type definition files)
> How would you hydrate the app with data while you dev?
This is precisely what the scenes are for in the storyboard.js file - it allows you to create multiple scenes that render your components with different data / props.
