Open preshonyee opened 4 years ago
@remorses seen this yet?
Yeah, i think the current approach is fine in my opinion
You can open a PR if you want with a new playground
The current playground works this way
code
prop injected at compile time with the jsx code from inside playgroundscope
prop with the current file imports (there should also be exports but is not working currently)Playground
You can even import a playground from another npm package if you want
You can use the current playground as an example https://github.com/remorses/dokz/blob/eb08f69d60398e3746ded4ff3b9ae5f9cefe66e7/dokz/src/components/Playground.tsx#L31
thanks a lot...i'll look into it.
Current situation analysis
Right now, the current way to preview react components doesn't offer a good user experience. It's requires a lot more cognitive effort to always keep in mind the state of the output while navigating the code.
Proposed solution
A better solution would be one that allows the code and the output to be visible side by side, at the same time. In my opinion, this would tremendously improve the user experience for users navigating a site using dokz. This is exactly what code-sandbox and in some way codepen does. Which is really good.
Alternative
I understand a different implementation might be much more complex, in that case, below is an alternative solution to the problem and is good too. This solution shows the code beneath while the output is shown above at the same time. The only issue with this might be instances where the lines of code are quite much and requires the page to be scrolled. down more.