Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: feature for view console #193

Closed
2 tasks done
kuduzow opened this issue Nov 26, 2021 · 15 comments · Fixed by #546
Closed
2 tasks done

Feature request: feature for view console #193

kuduzow opened this issue Nov 26, 2021 · 15 comments · Fixed by #546

Comments

@kuduzow
Copy link

kuduzow commented Nov 26, 2021

Tell us how you think we can improve Sandpack

It would be useful to have component like <SandpackConsole> that renders... a sandpack's console.

Packages affected

  • sandpack-client (probably)
  • sandpack-react

How would your idea work?

It might be a component that renders console or props like <SandpackPreview console> to include console into preview.

Do you have any examples of how you would like to see us implement it?

It depends on implementation way. The first example right on codesandbox.io ("Console" button on the bottom of preview).

Another way is something like this:

localhost_3000_read_html-and-css_tags

@kuduzow kuduzow changed the title Feature request: Feature request: feature for view console Nov 26, 2021
@danilowoz
Copy link
Member

Hey @kuduzow, that would be great!

I have added your feature request to our internal backlog which we use to prioritize what to build next. We can't make any promises about the timing, but it's on the list!

If you'd like to work on this feature with us, please create a pull request and we'll help you along the way.

For others landing on this issue, feel free to add more context or simply leave a thumbs up 👍 on this comment if you find this feature useful.

@rvlewerissa
Copy link

rvlewerissa commented Jan 13, 2022

Hi @danilowoz, I was wondering how the following code preview is created (link here):
Screen Shot 2022-01-13 at 10 19 59 PM

It looks as if it's using CodeSandbox Embedding, but it doesn't use an iframe. Any idea how to implement something like this? (No iframe + with console feature)

Thank you!

@danilowoz
Copy link
Member

Hey @rvlewerissa. The link you sent uses CodeSandbox Embedding, which supports the console component and is wrapped in an iframe. However, we still don't have this component properly working on Sandpack, but we're trying to priority it, as this would be very valuable for the development experience.

We can't make any promise of when we will ship it, but we've been working hard to release it as soon as possible.

@rvlewerissa
Copy link

@danilowoz Thanks for the really quick response! I just discovered that the example I gave does actually use an iframe, I overlooked 😅

Thanks for the hard work on this feature! Looking forward to it!

@danilowoz danilowoz mentioned this issue Jan 26, 2022
@danilowoz
Copy link
Member

danilowoz commented Feb 2, 2022

Hey all! I'd like to hear your thoughts about this feature and get to understand what is the best approach for this:

  • I'm curious to know what kind of feature the Console component cannot miss?
  • Can you provide a great example of what would you consider an excellent console component?
  • Are you happy with the current CodeSandbox console component?

Feel free to drop any message here, and 👍 which one you like the most

@joshwcomeau
Copy link
Contributor

Hi @danilowoz!

Overall, I'm pretty happy with the CodeSandbox console. I like that it has a clear button, just like the browser console.

For Sandpack, I'm hoping that there will be a standalone component (SandpackConsole) so that I can build my own layouts with it. I'm less interested in a tab for the console. I'll either want to always show the console, or never show it.

My usecase: occasionally, my sandpacks will be demonstrating console output rather than a live preview. Sometimes, I want to show a particular dev warning. In other cases, I have little JS-based exercises, and the goal is for the user to edit the code and then check the console to see the logged output (rather than checking the preview pane to see the UI).

It might also be good to include timestamps? It can be useful to know when an item was logged. Or, alternatively, maybe the console could be automatically cleared when the code re-runs?

@JoeShep
Copy link

JoeShep commented Mar 14, 2022

I am building a code-teaching tool, so starting off with easy examples of JS functions that simply log to the console is important. I plan to write some testing functions that verify the logged output is correct, in order to provide instant feedback to the student. I've already found your example of capturing console.log data with if (msg.type === "console" && msg.codesandbox) @danilowoz, so thanks for that! But, being able to easily display the console for the student would be just what I need.

@nicksrandall
Copy link
Contributor

My use case is that our components log message to show that things are happening. It would be helpful to for our users to open the console and see these messages stream in as they interact in the preview.

@nimeshnayaju
Copy link

It'd be great if the console logs came with the associated line numbers and file names. I've attached a screenshot of Chrome console logs that show the console log along with file name and line numbers.

Screen Shot 2022-07-15 at 5 06 49 PM

@hussamkhatib
Copy link
Contributor

Hey @danilowoz ,
I might be able to work on this.
Can you point me to right direction so that I can explore a bit and decide If I can do it or not.

@danilowoz
Copy link
Member

Hey @hussamkhatib, thanks. But currently, it's working in progress on #546

There are still a few challenging there, but hopefully I'll be able to ship it on the upcoming weeks

@danilowoz
Copy link
Member

danilowoz commented Aug 19, 2022

Hey all! I'm excited to share that we have a beta version of SandpackConsole 🎉

It's meant to be a light version of the browser console, meaning that it will not support all console types or some very specific cases. The idea is to keep Sandpack light and modular, so for any other advanced case, I'd recommend going for console-feed.

Here's a sandbox with the component! - Plus, I would really appreciate it if we could exhaustively test this new component and report any eventual problems in this issue.

localhost_6006_iframe html_id=components-console--preset args= viewMode=story

Documentation is coming next! But, here's a summary:

  • New hook: useSandpackConsole;
  • New component: SandpackConsole;
  • New option: <Sandpack options={{ showConsole: true }} />;

@iampava
Copy link
Contributor

iampava commented Jan 19, 2023

First of all thanks a lot for this feature! It's exactly what I was looking for 🙌

I got a small question: is it currently possible to clear the console between renders?

@danilowoz
Copy link
Member

Hey, thanks!

I don't think it's possible now, but if you wish this feature, please create another issue, and then we can address it. It must be something around here: when it gets a message from a refresh or similar, then clean the logs.

@iampava
Copy link
Contributor

iampava commented Jan 24, 2023

@danilowoz thanks. Added a feature idea: #692

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

9 participants