Fork me on GitHub
#clojurescript
<
2020-05-16
>
krzyz00:05:42

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

Aron06:05:51

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

orestis09:05:15

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

Aron09:05:01

for any lengths?

krzyz18:05:29

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.

4
alekszelark12:05:02

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 .

roman01la13:05:32

This should work

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

roman01la13:05:05

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

pesterhazy13:05:55

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

pesterhazy13:05:21

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.

pesterhazy13:05:10

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

pesterhazy13:05:17

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:

orestis13:05:59

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

👍 4
didibus18:05:48

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)
}
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?

didibus18:05:25

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

didibus18:05:19

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

didibus18:05:53

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

didibus22:05:38

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

lilactown22:05:05

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

didibus22:05:54

I'm not sure, copying some stackjoverflow example 😛

didibus22:05:33

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

lilactown22:05:53

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

didibus22:05:56

Interesting, so how would I handle such events?

didibus22:05:28

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

lilactown22:05:32

you could implement something really simple using basic rum as well

lilactown22:05:11

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

didibus22:05:22

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

lilactown22:05:50

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

👀 4
didibus22:05:54

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

lilactown23:05:05

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

lilactown23:05:46

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

didibus23:05:50

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

lilactown23:05:49

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

didibus23:05:08

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 😛

lilactown23:05:42

yeah, this requires some React knowledge

lilactown23:05:17

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

lilactown23:05:47

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

lilactown23:05:59

the tricky bit is how you update the width state

lilactown23:05:45

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

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

lilactown23:05:09

similar in rum, e.g. in hiccup:

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

lilactown23:05:16

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

lilactown23:05:59

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

didibus23:05:21

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

lilactown23:05:31

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

lilactown23:05:40

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

didibus23:05:16

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

didibus23:05:48

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

lilactown23:05:00

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

lilactown23:05:25

there’s still a little drift but not too bad

lilactown23:05:44

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

didibus23:05:33

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

👍 8