added code for sandpack console

[harish-sethuraman]

Adds console to sandpack component

UI :

• Remove the "no action" cursor over the console bar, it's confusing IMO.
• Change "console" to "Console". Align text to the left.
• Add a bit more padding. Use the same horizontal padding as in the top bar. Basically, on mobile, try to make "Console" label align with "Show more" label, and make arrows the same size/position.
• When the console is empty, expanding it should still work. It should just expand some area with a min height of one line. So that you know this is where console messages will appear.

Behaviour:

• Let's limit this to console.log only. No errors or warnings.
• JSON.stringify call needs to be in try/catch. If it fails, try Object.prototype.toString.call(value). If that throws too, just print "[" + typeof(value) + "]".
• When you print objects like console.log("hi", {}, {}) the vertical space between objects is too large. Put them closer. The excessive indentation is also strange, let's remove it.
• The sandbox loading indicator should not overlap the console. Position it so that it is above it (when the console is present)? (ignoring this one)
• When there's an error, console logs should not disappear or change their count. (using message.firstLoad from sandpack)
• Sometimes putting a console.log into component body and then edit it causes to console to always clear before next render. I don't know why. Seems like a bug.
• we should probably remove the 2px border and just do a bottom border on all items except for :last.
• use the monospace font

[github-actions]

Size Changes

Details

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
global	84.68 KB (🟡 +86 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

[harish-sethuraman]

@danilowoz Seems like the new bundler doesn't emit console type messages. But the old one does emit so I've reverted that in this PR.

[gaearon]

We need to keep the normal font for the "Console" header itself. Monospace is just for the content.

[gaearon]

And let's make the console hidden until the first console.log statement runs.