Trying out integrations with Typescript, Monaco Editor, React hooks, and React Box (my own thing)

nksaraf commented 5 years ago

Hi, Firstly thanks for this super awesome tool. I really loved how simple it is and how simply it works.

I just wanted to share a fork, https://github.com/nksaraf/playroom, that I have been working on for my own use cases. You can see examples of some of the cool things that managed to work in playroom at the end of this comment.

So I integrated the Monaco editor and migrated some of the core Playroom react code to Typescript and hooks because I found it easier to work with. The last and probably the collest thing I was able to make work was being able to use React hooks and that means probably all of React's functionality from the playroom editor. The JSX is still formatted and interpreted correctly even if its has multiple parents tags because we wrap it in a fragment. And no return statement is necessary so its kinda svelte-ish in its look and simplicity. It makes a lot of cool stuff possible. You can also import your own hooks with your components, no additional code is required (probably should add config though). I also have tried useEffect and fetched data all correctly.

All of this works on its own just like the old playroom. But another cool integration that I made is with this library I wrote https://github.com/nksaraf/react-box (not yet published). But its essentially some React primitives (mainly the Box) that wrap functionality from styled-components, styled-system, framer-motion to allow styling and animations declaratively through just props. And with hooks, now writing almost anything should be possible treating the playroom as a functional components. I have deployed this integration at https://playroom.now.sh if anyone wants to give it a try.

Also, if the contributors would want to discuss integrating some of this with the playroom library, I would love to make a pull request but I probably broke a lot of the CI/CD stuff because I am not well versed on it. (Sorry, I am not certain of what the process for this is because this is my first time contributing to open source).

Also @markdalgleish loved your talk on design systems, would love to hear what you think about some of this.

PS: There are still a lot of any's in my typescript but I was just trying to make it work. I haven't got intellisense to work correctly with the user types in Monaco, but I see a path where the types generated by react-docgen can be put into a .d.ts file and fed into the monaco editor that I did with the React types which worked.

Here are some examples of things that becomes possible. You can directly use the links and play around with the code thanks to the sandboxing and how the creators made the code part of the url!