Codesandbox-client: Integrated console

[CompuIves]

A console you can expand from the editor pane, should work both in embed view and editor view.

[CompuIves]

This will be integrated using a custom renderer, issue is here: https://github.com/CompuIves/codesandbox-client/issues/31

[CompuIves]

Decided that this will not be done by the custom renderer, this functionality is global. Also I think that it should be on the right side (under the preview), since this console is used for preview.

[renanpvaz]

I'd like to help if possible. Do you already have an idea of how this should this be done? In which context should this console execute?

[lbogdan]

@renanpvaz Do you want to take this? I already started playing with it, only got some layout going so far, no functionality. Let me know, so we don't both work on the same feature. :smile:

[renanpvaz]

@lbogdan oh don't mind me, if you've started it then keep it up.

[Hum4n01d]

+1 Yes please!

[varenya]

is someone still working on this? If any help needed would love to contribute :)

[lbogdan]

@varenya You can find the work so far here https://github.com/lbogdan/codesandbox-client/tree/feature/preview-console, if you want to take a look.

[varenya]

sure thanks, should I fork this branch repo to contribute? is any help needed :)?

[lbogdan]

@CompuIves did you manage to do anything about this? I, for one, was a bit busy with life these last couple of weeks. :disappointed:

[CompuIves]

Ooh, I hope nothing bad! @lbogdan built an implementation, I need to check
it out. I've been a bit busy as well, but I'm going to check and work on it
tomorrow 😃

On Thu, Oct 26, 2017, 10:53 lbogdan [e-mail] wrote:

@CompuIves https://github.com/compuives did you manage to do anything
about this? I, for one, was a bit busy with life these last couple of
weeks. 😞

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/CompuIves/codesandbox-client/issues/18#issuecomment-339597940,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAj1CBrQylxA8yUx-3a-1DGK8FNKh74nks5swEiIgaJpZM4Nyk1t
.

[varenya]

@lbogdan you have used react-console here and it looks to be working what else is pending here?
@CompuIves any inputs let me know I can help.

[CompuIves]

Great to hear that it works! There are 2 things pending (I think):

1. Bit of styling, I want to play with this a bit
2. Right now the console executes code in the editor environment. I think
   we should execute it in the sandbox environment so you can inspect eg.
   window vars. So we should send a postMessage to the sandbox, execute it
   there and postMessage back to the console what to show. Are you interesting
   in working on this?

On Thu, Oct 26, 2017, 11:45 Varenya Thyagaraj [e-mail]
wrote:

@lbogdan https://github.com/lbogdan you have used react-console here
and it looks to be working what else is pending here?
@CompuIves https://github.com/compuives any inputs let me know I can
help.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/CompuIves/codesandbox-client/issues/18#issuecomment-339612223,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAj1CEZB9RUwAsCv8zQOPC-VsjRYOQbGks5swFTIgaJpZM4Nyk1t
.

[varenya]

No, I just checked he's doing it in Preview/index.js, basically what you just said postMessage and then switching based on the type and logging it on the react-console.

[CompuIves]

Oh that's great!! Didn't know @lbogdan already finished that. Then the only
thing left is styling really, I'll can finish that tomorrow then.

On Thu, Oct 26, 2017, 12:28 Varenya Thyagaraj [e-mail]
wrote:

No, I just checked he's doing it in Preview/index.js, basically what you
just said postMessage and then switching based on the type and logging it
on the react-console.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/CompuIves/codesandbox-client/issues/18#issuecomment-339622872,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAj1CHuQRkCZm1EZZ4u0RnpVb5-NLC73ks5swF7lgaJpZM4Nyk1t
.

[lbogdan]

@CompuIves Unfortunately I didn't, the eval part is not done yet. For this we should also change react-console, which is currently doing the eval internally. So 2. is still pending.

[varenya]

@lbogdan what do you mean by eval? but the flow is as @CompuIves mentioned right i.e. postMessage etc..

[lbogdan]

I mean when you write something in the console and it evals and displays it:

In this example, it should evaluate it in the sandbox preview context and show href: "http://localhost:3001/".

[varenya]

hmm understood but any ideas how to go abt it?

[Hum4n01d]

You could look at the applicable JSBin code; they do it quite nicely

[varenya]

yeah, but they don't need to maintain preview context like in this case. And they are not using iframes either. let me see thanks for your inputs.

[varenya]

Can somebody help me with high-level overview of the project as in how parts are connected so that I can hack on it faster?

[CompuIves]

I just deployed the new console with this https://github.com/CompuIves/codesandbox-client/pull/266.

I'm sorry for the silence @varenya, I already started working on the styling and thought that it would be quicker to quickly move the eval to the sandbox with it. I hope I'm not discouraging you from any further contributions to CodeSandbox. You can join our Discord (https://discord.gg/KE3TbEZ) if you want a quicker answer or to chat about ideas 😄 .

[Hum4n01d]

I just noticed this! Great job on the console @CompuIves

[Hum4n01d]

It's really nice to have the errors printed out there since the computer I'm currently using doesn't have access to the dev tools :(

[IAMtheIAM]

It would be great if we could have this console open by default on our codesandboxes, right now it's "click to open"