[WIP] added support for prettier

[reflog]

Hi. I've started adding support for Prettier to WebpackBin. What do you think? Right now, I've bound it to a 'hidden' shortcut - alt+t. According to the logs the state doesn't seem to update, even though I am passing the updated source code correctly to the codeChanged signal... Any thoughts?

[reflog]

That silly line is actually to avoid static checks on an unused require inside 'prettier' module :)

[christianalfoni]

This looks super interesting. I actually did start working on this, but my mind halted thinking about when prettier should run and how. But you know, I think I know how now :)

What you need to do here @reflog is not to run prettier on the codemirror content. You rather trigger a signal when firing off prettier. This signal will run prettier on the code inside the state tree, on the current file. Then you will do a "force code update" (you can see examples of it in code). That way all content of file is replaced in codemirror

The reason you need to do it this way is because during "LIVE" session, it should just pass over indication that prettier was run and the other clients will have their prettier run related to their own client.... that is PRETTY awesome (pun intended) :)

Does this make sense? I can have a run at it later, but got my head deep into grahpql so might take a couple of days. But feel free to ask any questions if something was unclear here :)

[christianalfoni]

Hm, actually... the signal that tells LIVE clients to update the code with prettier actually needs to adjust to the owner screen size. The reason is that the code has to look exactly the same to handle change events to it.

[reflog]

Hm. So my approach was wrong? This doesn't contain the file content that I need to format?

 state.get(`app.currentBin.files.${fileIndex}.content`); 

And also, when you say "force code update", do you mean the "codeChanged" signal? If so - I do fire it, but it doesn't seem to update the state properly...