Output of the code run in the Playground

,
1

Hi everyone!

We’ve recently added the ability to run the code that you wrote in the Playground and to display the logs generated by your code inside a “Console” tab.

Displaying the console logs in the playground require them to be stringified which sometimes leads to weird results (eg for undefined, functions, errors, etc), so another solution would be to still run the code but display the logs inside the console tab of the developer tool of your browser as usual.

We’d also like to introduce the possibility to render your React components inside the playground. In order to limit the number of tabs, one solution could be to either display the React components when there are some (but no rendering of the logs in this case) and to display the logs otherwise.

So, what would be your personal preference?

  • Console + React tabs
  • Output tab that switches between logs and React if there’s any
  • React tab only and logs always in the console tab of the browser

0 voters

Don’t hesitate to comment and explain your choice!

1 Like
2

Keep in mind that in the future we will have another (half?) tab for genType output as well.

One other thought I just had was that if we have that many tabs they should all have their dedicated icon and the text should be ellipsized or not displayed at all on smaller screen widths.

1 Like
3
4

For the stringified output we can perhaps serialize the output in a smarter way than just converting to json directly?

5

Another possibility is to group three subtabs under output: console logs, React and JS (and maybe the genType would be the 4th subtab). The current feature of hiding whatever output when there are errors to show would probably still be useful.

2 Likes
7

well that’s what we do today, we special-case undefined, functions, etc, but not if they’re nested and it will never be as good as the dev console built in the browser!

2 Likes