Fork me on GitHub
#re-frame
<
2024-03-15
>
p-himik09:03:39

Shadow-cljs can now embed its web page in the DevTools: https://www.reddit.com/r/Clojure/comments/1bfa1ym/shadowcljs_ui_browser_extension/ Curious whether something like this would make sense for re-frame-10x.

1
👍 1
Ben Lieberman09:03:52

Fulcro Inspect is also a browser extension, and I like having everything in one place. I love 10x but I find it a little weird to use ergonomically, and it clutters up the component tree in React DevTools. But idk the implications of packaging it as an extension.

1
Kimo11:03:57

We assessed this a few years back. The takeaway was that we'd have to serialize a lot of data (for instance, the whole re-frame db) to pass it to & from a separate process. So that would be a big performance bottleneck. It would be great if this assumption turned out wrong, somehow. I agree that devtools or extensions would be a nicer home for 10x than the current shadow-root window.

p-himik11:03:42

@U05224H0W Did you have to serialize stuff for it to work with shadow-cljs?

thheller11:03:10

hmm? don't quite understand the question? the extension itself is basically no code at all, it literally just opens the regular UI webpage in an iframe

thheller11:03:19

data sent via tap> and stuff is serialized yes

thheller11:03:24

FWIW I'm working on devtools for shadow-grove, which are somewhat somewhat similar to 10x. you can do partial transfers of stuff and don't always have to transfer everything. so far I haven't run into any bottlenecks

p-himik11:03:20

It's not only about bottlenecks, I'd think. E.g. suppose there's a function on re-frame's app-db and you want to store it as a global object in the JS console in DevTools. When re-frame-10x is a part of the app's web page, it's trivial. Can it be done when it's an iframe? @U02J388JDEG But the re-frame-10x panel can also be popped out. How does that work?

thheller11:03:27

still working on the UI bits, but I'd second that having these in a separate "window" outside the actual webpage is useful

👍 1
thheller11:03:31

the extension is just a bonus. I'd advise making it regular webpage first

thheller11:03:26

I'm also probably writing up how I did it for shadow-grove devtools, since that basis would also work for 10x I think

❤️ 1
thheller11:03:02

would save users having to compile 10x and all its dependencies as part of the build too

p-himik11:03:15

Apart from that point that's still unclear to me above, a downside to a DevTools panel is that it would be harder to rely on a particular version.

thheller11:03:00

not really. the way this is going to work for shadow-grove is that I ship them as part of the shadow-grove library itself. precompiled. so the user always gets the exact version required for the library version they are using.

thheller11:03:52

the files are then served directly from the classpath. so there is never any mismatch between version of whatever

thheller11:03:07

the extension literally only opens an iframe, nothing else

p-himik11:03:30

Ah, cool! Now I see.

thheller11:03:42

the only point being that you can have it next to your app directly, instead of a separate window/tab

thheller11:03:57

but you can just as well open it wherever

thheller11:03:51

being able to open if wherever is important, since I also sometimes open things on my phone or something. good to have a view for that too. don't want to be limited to just devtools.