search

nosco / hx

A simple, easy to use library for React development in ClojureScript.
MIT License
247 stars 16 forks source link

Improved react dev-tools support for hooks #37

Closed orestis closed 4 years ago

orestis commented 5 years ago

Opening this to start a discussion going, but it seems it's not going to be an easy one.

React dev-tools supports introspecting the props and hooks of a component. Props work relatively well, but unfortunately, hx hooks look a little bit opaque:

2019-03-14 at 7 46 AM

Observations:

  1. All the names are the same.
  2. The first State hook is a CLJS map, but it renders as "...". This could be fixed by using useDebugValue inside <-state, to do custom formatting (pr-str would be an easy first step).

There's more to research here, as even using React/useState with a JS object doesn't show any value.

orestis commented 5 years ago

This is relevant: https://github.com/facebook/react-devtools/issues/1282

lilactown commented 5 years ago

https://github.com/facebook/react/issues/15259

I created an issue for this in the React repo. I might create one in devtools as well. I hope they give us some way of customizing the display name of the hooks in devtools, otherwise this might always be gross for anything that compiles to JS.

lilactown commented 4 years ago

It isn't possible for hx to fix this completely, since the React dev tools output relies on the names of closures within the React component rendered. Unfortunately, ClojureScript's let introduces a new closure most of the time in order to avoid variables leaking. That's what those eval names are.

If/when ClojureScript moves to outputting let/const, we might be able to remove those closures from the JS output and thus flatten this a lot more.