@ashnur Another option: (zipmap (map name (keys testmap)) (vals testmap))

@andrea.crotti for tracing, perhaps look at debux https://github.com/philoskim/debux

Is there some way, something like reader conditionals, to tell the compiler to produce node-specific code? For example, I want to require crypto if it’s nodejs, otherwise I want use js/crypto .

I only found this https://stackoverflow.com/questions/47483193/how-to-define-target-env-in-compile-time-while-building-cljs, but maybe there is something more elegant.

This should work

(if (identical? *target* "nodejs") ... ...)

*target* is replaced with current compile target and Closure will eliminate non reachable code then

I'm playing with hooks and porting over Dan Abramovs "use-interval" example: https://overreacted.io/making-setinterval-declarative-with-react-hooks/

As a hook newb, I'm now stuck figuring out why I'm getting this warning: > Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

Here's my code: https://github.com/pesterhazy/cljs-scrap/blob/6fb1ddde715c293141af3639e1364555cfdd8dda/src/main/scrap/scrap.cljs#L12 (no react wrappers, it's a pure js port of the js example)

The effect sends me in a vicious rerender loop (hence the warning) but I can't seem to figure out why

Found a minimal repro: https://github.com/pesterhazy/cljs-scrap/blob/recoil/src/main/scrap/scrap.cljs#L37 - there must be something wrong with my re-implementation of use-interval :thinking_face:

working implementation here: https://github.com/donavon/use-interval/blob/master/src/index.js#L3

@pesterhazy feel free to join #react for this kind of thing

I have the following JS:

let ismdwn = 0
rpanrResize.addEventListener('mousedown', mD)

function mD(event) {
  ismdwn = 1
  document.body.addEventListener('mousemove', mV)
  document.body.addEventListener('mouseup', end)
}

function mV(event) {
  if (ismdwn === 1) {
    pan1.style.width = event.clientX * 2 + \"px\"
  } else {
    end
  }
}
const end = (e) => {
  ismdwn = 0
  document.body.removeEventListener('mouseup', end)
  rpanrResize.removeEventListener('mousemove', mV)
}

I don't want to rely on the element id.

My only thought right now is that, maybe I can't avoid the global dom references, so I could use gensym to generate unique ids and in a did-mount on the component I could register the events

But I'm curious if there is a better way to reference the rpanrResize node ?

What would be the ClojureScript code for: pan1.style.width = event.clientX * 2 + "px"

do you need to literally do that - modify some mutable global object thing?

I'm not sure, copying some stackjoverflow example 😛

I'm trying to build a rum component for the last snippet in this answer: https://stackoverflow.com/a/55189834/172272

hm, you probably don’t want to use event listeners / modifying the DOM directly with Rum

Interesting, so how would I handle such events?

Its implementing a split pane where you can drag the split separator left and right

I’d probably use something like https://github.com/tomkp/react-split-pane

you could implement something really simple using basic rum as well

generally with React (which rum wraps), you want to track your UI state in the component and re-render based on changes to that state. not directly manipulate the DOM

Fair enough, but I'm trying to learn, which is why I tried to do it myself.

yeah, let me whip up a quick React example that basically maps to the vanilla JS version

I think part of my confusion about re-rendering, is that, the html and css are global

hmm, it’s a little more complex than at first glance

here’s what I have so far: https://codesandbox.io/s/nameless-hooks-9ixbw?file=/src/App.js

this would be ideal but it doesn’t actually work, because you do in fact need to use global event listeners

Hum, ya, I guess because the drag can go beyond into the whole document. Unless it would be possible to like put an invisible thing that covers the whole page as part of the component, and register mouse event on that

yeah, I’ve updated the codesandbox with a working example

But thanks for the example, I will study it. I guess I probably need to read a React tutorial, thought I could get away with only the Rum readme 😛

Oh nice.

yeah, this requires some React knowledge

React/rum prefers to operate on the idea that you return the elements that should be rendered, and how they should be rendered, in a declarative fashion

so in my example, you pass in the current width to the Panel component (which is just a dumb div underneath with some styling)

the tricky bit is how you update the width state

we can easily attach event listeners to elements inside our component like:

<div onMouseDown={() => console.log("down!")} />

similar in rum, e.g. in hiccup:

[:div {:on-mouse-down #(js/console.log "down!")}]

the problem is that you need to attach the mouse move and mouse up to the document, since those events don’t actually happen to the div that’s acting as the resizer. they’re just global events, that we want to react to when the mouse has clicked down on the resizer

so I used some react-y ways to add those global event listeners, and remove them when the component unmounts

Hum, ya I see you're using the hooks, still need to wrap my head around those

I think the latest version of rum provides the ability to use hooks, so it might be a straightforward translation

I haven’t used rum much so not sure how to do this via mixins or whatever

It does, but somehow when I look at them, I'm more confused compared to using the rum mix-ins which just let you define events on the component lifecycle

I'll spend some time going over it. Thanks a lot. Your react version actually works better it seems. The stackoverflow one had a drift issue with the drag, the mouse would get out of sync. Yours doesn't seem to have that

yeah they were doing event.clientX * 2 which didn’t seem to be right

there’s still a little drift but not too bad

if I wanted something higher quality I would use the react-split-pane lib above

I need to learn some CSS as well 😛 I never really understood CSS. I always kind of just google my way through it