FormidableLabs / runpkg

the online javascript package explorer
https://runpkg.com/
MIT License
308 stars 11 forks source link

Prettier enhancements: feedback/state & options #176

Open VirtualDOMinic opened 4 years ago

VirtualDOMinic commented 4 years ago

I think it would be useful to have some discussion about the prettier functionality on runpkg. Some points to start with:

  1. Button press feedback
  2. Undo option
  3. Basic config options

1: button press feedback and state

Currently it can be hard to tell that any formatting has taken place. Although this function (prettier.format) isn't async, I think some state handling (including start & finish state) in the UI would be helpful. In my mind, possible states to alert the user to are:

These states could be signified with text, icons and/or toast messages. Preferences? I would lean towards (accessibly) icons possibly enhanced with toast messages.

2: undo format

I think it would be useful to be able to revert the code formatting without having to refresh the page. I'm happy to implement it in a PR. Any objections? Any opinions on how to represent this has successfully run in the context of point number 1 (above)?

3: basic config

This is a trickier and more subjective feature IMO: one one hand, prettier is supposed to be opinionated, but - on the other - it does provide certain config options (quotes, semi...) for a reason. Do we want to allow users to select basic config options? E.g. currently we use the default options which include singleQuote: false which means that something like lodash-es/add only changes on format due to single -> double quotes rather than any major formatting issues.

lukejacksonn commented 4 years ago

It would be nice to indicate that it is prettifying perhaps by disabling the button after initial click and replacing the prettier logo in the button with a spinner of sorts, until the process has finished when it would return back to the default state. Other than that I am happy for this feature to be a "best effort attempt" and refreshing the page to undo is OK for now, although admittedly not ideal.

Perhaps a bigger win would be to only load prettier when the button is clicked for the first time. As it is quite chonky.