Fork me on GitHub
#helix
<
2020-06-03
>
Aron06:06:39

how do people inspect state?

Eliraz13:06:01

people? what do you mean inspect?

Aron13:06:05

people, as in human beings : D inspect means the word inspect

Lucy Wang13:06:18

@ashnur Personally I simply use the repl to inspect any data. I tried shadow-cljs inspect and tbh, it doesn't feel that easy to use (or maybe I didn't get how to use it correctly).

Aron13:06:08

so not easily?

Aron13:06:04

how do you use the repl exactly to see the live data in helix hooks?

Aron13:06:14

I can evaluate stuff from my editor and print into browser console, very neat trick, but it doesn't help me get access to the state

orestis15:06:48

React dev tools , log the component to the console

orestis15:06:17

Then you get the custom formatters in play

orestis15:06:42

In theory you could also inspect the values directly in dev tools but they don’t speak CLJS

dominicm15:06:43

We've been discussing the devtools internally. If we get some breathing room, I'd love to have one of our devs add JSONML support to the react devtools.

dominicm15:06:06

Although - we're pretty small, so it might be better for us to sponsor someone to look at that.

orestis15:06:53

There was some discussion about this with the react team, the rationale being that they need to also support immutable.js and immer so some kind of custom formatting is needed. I don’t think that went anywhere though.

dominicm15:06:13

I read the issues, yeah :)

lilactown15:06:49

I’m currently trying to gett some time to work on some code for inspecting/manipulating components at a REPL

lilactown15:06:41

example, imagine:

(-> (query-component MyComponent)
    (inspect))
;; => {:type MyComponent
;;     :props {:foo "bar" :baz {:asdf "jkl"}}
;;     :state [{:count 3}]}

dominicm15:06:23

I saw the PR, I think that's great too

dominicm15:06:29

I think different tools for different times though.

dominicm15:06:40

Sometimes, clicky clicky is pretty handy

lilactown15:06:38

v true. I just think that we’ve (or at least, I have) trained ourselves to eschew the REPL for UI programming due to lack of capability

lilactown16:06:48

lots of people I’ve worked with just use console.log. and say how much they miss effectively using chrome’s debugger w/ their code

dominicm16:06:23

I think what I'd want from the repl tool is a clicky for the element somehow. So I don't need to filter a list. But maybe that's a separate tool.

Aron18:06:16

@lilactown may I ask which editor/repl setup are you using?

Aron18:06:43

conjure looking really good, but I have literally no idea how to make use of it

lilactown19:06:47

I use Emacs w/ CIDER

lilactown19:06:55

specifically spacemacs

Aron19:06:58

used to use spacemacs too, when I was writing lots of php

Aron19:06:09

but because of javascript, I stopped using it

lilactown19:06:43

yeah the javascript support is so-so

lilactown19:06:55

I think if I was doing JS for a living I would probably switch back to VS Code

lilactown19:06:10

but now that I only dabble in JS/TS it works pretty well for that too

Aron19:06:15

vscode is for TS, not js

Aron19:06:11

with new tools, the more I think about the more sure I am that spacemacs could work better. To be honest, the last straw was really something I lost on the long run, I wrote comma first at the time (this was before code formatters)

lilactown19:06:03

yeah the hooks state is stored on each fiber similar to class component state

Aron20:06:00

thanks, good to know

Aron20:06:25

I read those fiber docs long time ago, but I forgot the details 😐

lilactown21:06:06

there isn’t a public API for this so a lot of the stuff I’ve tried so far is just looking at what’s in the object after injecting some code similar to the way react devtools does it

lilactown21:06:17

it’s all hacky and using private APIs that might break later

Aron21:06:36

yeah, not very easy, but I read some of the fiber source code and it's quite readable

Aron21:06:43

i just don't remember it 😄