Fork me on GitHub

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


that's nice and I actually thought about going this direction but I am not sure how it keeps everything paired up, since (vals testmap) and (keys testmap) might return them in different order


No, the order of keys and vals is guaranteed to be the same.


for any lengths?


You are right to be concerned, but you are not relying on there being any particular order for the keys and vals. To be clear, if you made a map with :key1-20 and "val1-20", you don't need to know if :key5 comes first or :key8 comes first, all you need is for the iterator/seq to be consistent between two function calls. The return order can change tomorrow, but as long as the iterator returns values in some consistent way, I don't see a reason to worry about keys/vals being different.


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 .

Roman Liutikov13:05:32

This should work

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

Roman Liutikov13:05:05

*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:


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.


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: - there must be something wrong with my re-implementation of use-interval :thinking_face:


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

👍 4

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) { = event.clientX * 2 + \"px\"
  } else {
const end = (e) => {
  ismdwn = 0
  document.body.removeEventListener('mouseup', end)
  rpanrResize.removeEventListener('mousemove', mV)
And I'm trying to make a react component out of it (using rum). But I'm wondering how does someone normally encapsulates all these event handlers?


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: = 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:


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


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

👀 4

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


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 😛


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

👍 8