feat: add support for user-event

[smeijer]

What:

I've done a number of things in the PR.

Sandboxed the preview pane

• The preview is now rendering in an iframe
  Communication with the top frame is handled through the postMessage API.

Highlighting

• The iframe has been made responsible for highlighting elements, which now uses the same Highlighter as the chrome devtool

Parser

• @testing-library/user-events has been added to the evaluator context. User events are available under user and userEvent.

Query Pane

• The query pane now has two menu buttons:

  • run
    The run button enables the user to execute queries manually. It's also possible to trigger this action with cmd + enter or ctrl + enter. While a query is being evaluated, a loader is rendered instead.

  • auto sync
    This button enables/disables automatic synchronization. It also allows the user to toggle between the pre/post query state in the preview pane. Some users might find the automatic evaluation confusing when working with user-events. This button might offer some help.

Result Pane

• now renders the same image as the Preview pane when there is no query

Generic

• icons are now loaded from @primer/octicons-react

Devtools

• The devtools are updated to NOT show the run and sync button.

Why:

Because it's awesome!

How:

Check the code and "What" above. It's a lot!

Checklist:

• Tests
• Ready to be merged
  

---

resolves #10
resolves #69

todo

• toggle between pre and post markup
• add some parsing indicators
• evaluate on paste
• fix the suggestion pane
• move new navigation bar higher up the tree
• cleanup

[smeijer]

[smeijer]

Ok, I don't have much time this week. So I'm going to merge this tomorrow unless there are blocking issues that I've missed.

I still want the menu in a different position in the tree, and I should have cleaned up the parser. But that can be done in a new PR once there is time.

If anyone is reading this before I have pushed the merge button, and feeling to test/review, please take a shot. It would be much appreciated.

[delca85]

I have noticed this problem:
sometime, when I enter a query or when I click an element on preview to insert the query to get it, the new code go above the old one and the result is the one you found in the attached image.

I am using Chrome in a Mac Os environment.

[smeijer]

@delca85 , it looks like there are two CodeMirror instances bound to the same element.

Do you remember which steps you took to trigger that problem? A reproduction would be very helpful.

[delca85]

I am not able to reproduce this behavior right now.
Yesterday, what I have done was:

1. open testing playground with the default content
2. adding and running a query below the comments inserted by default in QueryEditor
3. click on an element in Preview
4. the query obtained by click an element in step 3 appears above the comments in QueryEditor