You haven't mentioned the UI library that you're using. But I'm pretty sure that none of the existing libraries offer anything like that. You can use React DevTools with React wrappers just fine. And closest we have to CLJS state observation is re-frame-10x and re-frisk if you use re-frame.

At the moment I'm just trying https://github.com/pitch-io/uix

this is using state with the hooks, but i saw other libraries (as the old version of Uix) are using atom to manage state. but how you can see the state of the atom of the single component?

Since it's not even a wrapper, React DevTools should definitely be sufficient. No clue about the older version of Uix, but IIRC Reagent stores its atoms within the state of an instances, so those are also observable by React DevTools. I might be wrong though, it's been some time.

with new Uix version I can see the state but it's quite confusing (but better than nothing )

old Uix works like reagent if i remember well (it's been a while for me with reagent), and i cannot access to the component state (that basically are atom)

Yeah, nah - React DevTools isn't really useful when trying to read Reagent state. It's either not that (in the case of r/with-let) or attempts to study it, assuming I found the correct thing, lead to time outs of React DevTools.

may i ask which library are you using?

i'm looking around the best option but it's quite hard to decide

I use re-frame.

What "the best" means depends on you though, so no idea whether it's even suitable for you.

Back in the day when I was choosing what to use, I spent pretty much a week reading about all available options and trying the most promising things out to see how they felt.

long time ago for new projects i used reagent + reframe and i didn't regret it

now i should convert react code into clojurescript

and i saw that there are more options than 6 years ago 😅

yeah i think i should spend more time studying

thx 🙂

The #C0620C0C8 channel is more suitable for such questions.

You can make :input an incontrolled component and access its internal value when clicking the button.

And you can access that rendered :input from within the :on-click handler by using React refs.

What's the type of a chunk?

It's a js/Blob too.

Weird. clj->js does exactly that to vectors - it creates an array and then calls .push on it for every element. Maybe there's something terrible in your codebase that extends the IEncodeJS protocol to blobs. Apart from that, can't imagine what's going wrong. Would be curious to poke around if you can create an MRE.

But also, it should just work for CLJS vectors since they're JS iterables.

That was my assumption. I'll create a repro. Might find out what I'm doing wrong when I do that. That often happens to me.

I usually see clj->js as an anti-pattern, as it's a bit magical and often not the most performant solution

I only did that because I started to suspect that my cljs vector was a problem.

But, generally I use clj->js all over the places. 😃 Maybe I shouldn't.

I don't like to have to mutate this object in my implementation here... It's not cool.

Gotcha. You can also create an array conventiently via into-array

clj->js "helpfully" does more, like recursively converting elements, which can be risky

You shouldn't. :) Most of the time, you can do just fine without. E.g. creating an array in one go from an iterable (e.g. a vector): (js/Array.from v). You can even map a function over it while converting: (js/Array.from v inc).

For arrays this is the first time I have even tried clj->js, I think. It's usually maps I do it with.

I don't think there's anything that's that easy for objects, but it's like 3 lines of CLJS code - I'd put it into some util NS and use it everywhere.

It didn't work using to-array nor js/Array.from on the vector either.

I'd probably reach for something like

cljs.user=> (apply js-obj (mapcat identity {"a" "b", "c" "d"}))
#js {:a "b", :c "d"}

@U0ETXRFEW I'm now dubious it has worked with a manual .push. :) Maybe a fluke?

If converting a map to a JS object is in any performance-sensitive area, I'd go with reduce-kv and gobj/set to avoid building an extra coll.

Yes, it is crazy. I can repro it perfectly in our app here.

The difference is in ondataavailable on the MediaRecorder instance. If I conj the data on a vector, I am screwed. If I .push it on an array, things are dandy. (In case this wasn't clear.)

That really sounds like something else is going on

You can 100% store js objects in a vector

Is that vector in an atom at least? I hope you don't just (conj v blob) and call it a day. :D

I was thinking the same ^^ 🙂

It's a re-frame db.

So in each data available event, you dispatch a re-frame event that adds a blob to some vector in the app-db? And when the recorder is done, presumably you dispatch another event that gets all those blobs and does something to them? Or do you, instead of using blobs as the medium, actually use JS events?

If it's the latter, this might be of interest: https://github.com/day8/re-frame/blob/master/docs/FAQs/Null-Dispatched-Events.md

Although it shouldn't be the crux of the issue because MediaRecorder has nothing to do with React. But I'm very wary of using raw JS events in general.

It wasn't such a mystery after all. When I was to show @U06F82LES how it didn't work with vectors, it worked. No idea why it didn't when I switched to an array... But anyway, now functional again. Phew!

Maybe there's some issue with code reloading?

Or caching.

Could be, I have two phone clients and three desktop browsers, sometimes I lose track of where my REPL runs.

It started with me using nil for my chunks and assuming conjing on that would append to the end. Then, without realizing that this wasn't the case, I tried with a vector because I felt sure that would work. But at a point I had a two stashes I could switch between and that reproduced the mystery. When showing @U06F82LES the problem I decided to not use the stash, but instead change it to a vector while we were pairing. I think I avoided some funny edit that I had in my vector stash.