Fork me on GitHub
#clojurescript
<
2018-09-18
>
valtteri09:09:47

Does anyone here have experience with OpenLayers or Leaflet with Reagent? I was just wondering if I should spend some time evaluating react wrappers such as ‘react-leaflet’ or head directly to js/interop path like this https://github.com/Day8/re-frame/blob/master/docs/Using-Stateful-JS-Components.md#example-using-google-maps

valtteri09:09:18

I need to do mapping with several layers and I also need to be able to draw new features.

priornix09:09:58

Quick question, what's the difference between #js and #object types? Also, why does (object?) return true for #js but false for #object?

miikka09:09:36

@valtteri, I'm using react-leaflet with Reagent and I'm pretty happy with it. Not doing anything advanced, though.

valtteri09:09:42

@miikka cool! 1.x or 2.x? Are you using any plugins or just the core library?

miikka09:09:55

2.x, just the core library. Basically I just added cljsjs/react-leaflet as a dependency and then wrapped the components like this:

(def leaflet-map (r/adapt-react-class react-leaflet/Map))
(def leaflet-tile-layer (r/adapt-react-class react-leaflet/TileLayer))
(def leaflet-marker (r/adapt-react-class react-leaflet/Marker))
(def leaflet-popup (r/adapt-react-class react-leaflet/Popup))
;; ....

valtteri09:09:08

I think I’m going to also need this plugin where upgrade to 2.x has been suspiciously hanging for 3 months https://github.com/alex3165/react-leaflet-draw/pull/49

thheller09:09:11

@priornix #object should never be used directly. its a fallback for an "unprintable" object.

miikka09:09:29

Heh, that's an annoying situation. I assume that plugin would work just fine with Reagent, though.

valtteri09:09:52

Yep, I’ll see if the PR gets merged and try the other approach meanwhile. Thanks for the input @miikka!

priornix10:09:35

@thheller I see, but what's the nuanced difference between #object and #js from a Clojurescript or Javascript perspective? The #object is generated by a JS library but it's methods is still callable from Clojurescript.

thheller11:09:48

@priornix anything printed as #object is a JavaScript instance with its own prototype/class. so not {} but something new Thing(...)

jaawerth11:09:21

specifically complex ones - neither arrays nor any of the primitives will display as #object but newer native classes like Promises and Maps/Sets will, as will any with a custom constructor, to tell you what it is.

jaawerth11:09:57

the #js just indicates it's a JS object/array rather than a clojurescript data structure, mirroring the #js reader macro

priornix13:09:46

Thanks @thheller @jesse.wertheim I wonder if (js->clj) should be updated to work with #objects

thheller13:09:27

no it should not. the objects are inherently unprintable. you can extend the IPrintWithWriter protocol for those classes

thheller13:09:10

if you just want to see the object you can use (js/console.log the-thing) but you can't just print arbitrary classes since you can't know what to print

priornix13:09:33

True that, I was thinking more of property/method access rather than printing. For which, there is: https://stackoverflow.com/questions/32467299/clojurescript-convert-arbitrary-javascript-object-to-clojure-script-map/32583549#32583549

priornix13:09:02

Of course, (console.log) would give you the reflection.

priornix13:09:53

And (aget) / oops is the recommended method for method invocation

thheller13:09:56

same thing. sure you can pull out any random properties but that doesn't mean that you can do anything useful with that

thheller13:09:16

there is the IEncodeClojure protocol if you want to get fancy

Ac1dR3d14:09:35

anyone here familiar with figwheel proxy problem?

Ac1dR3d14:09:44

im trying to run dev server separately

Ac1dR3d14:09:05

I have luminus service server on 3000 and figwheel on 3449

Ac1dR3d14:09:21

id like to proxy request from figwheel to luminus, but no luck…

Ac1dR3d14:09:51

tried to use ring-proxy, ring-handler but couldn’t set up them correctly

Ac1dR3d14:09:58

anyone can point to the right direction? thanks.

bhauman14:09:10

@kaki.tk you don’t need to proxy

bhauman14:09:38

well normally you don’t need to proxy

bhauman14:09:54

@kaki.tk why do you want to proxy?

Ac1dR3d14:09:52

coz i don’t run ring server for api calls on figwheel

Ac1dR3d14:09:15

i want to run multipurpose ring server on other port

Ac1dR3d14:09:31

and CORS calls are not allowed

Ac1dR3d14:09:40

so i cant call POST from 3449 to 3000

bhauman15:09:27

@kaki.tk OK I want to understand your situation, but I’m not really clear on it. First I will tell you what most people do.

bhauman15:09:38

Figwheel works with CORS

bhauman15:09:08

if you run your main application server and serve the compiled ClojureScript assets from your main application server

bhauman15:09:16

Figwheel is going to work by default

Ac1dR3d15:09:28

yes but im on developement

Ac1dR3d15:09:41

i do not want to copy paste my compiled js

Ac1dR3d15:09:49

i need it on dev stage

Ac1dR3d15:09:00

b4 i will transfer it on server with nginx on prod

Ac1dR3d15:09:21

on nginx id just proxy any endpoint thats not the problem

Ac1dR3d15:09:24

problem is dev

bhauman15:09:42

but you can still do this

Ac1dR3d15:09:57

so on react you can just add “proxy” key on package.json

Ac1dR3d15:09:04

figwheel does not have that option

bhauman15:09:23

I still don’t know what your situation is

bhauman15:09:37

when you say you are on development what do you mean?

Ac1dR3d15:09:58

wow I talk with you… jesus

Ac1dR3d15:09:01

never thought wed talk

Ac1dR3d15:09:32

I mean… I’m on dev stage and first started figwheel project with lein new figwheel etc…

Ac1dR3d15:09:46

and by default it does not have ring server in it

Ac1dR3d15:09:53

nor configuration for it

Ac1dR3d15:09:00

it have only cljs files…

Ac1dR3d15:09:23

nor folders for them… and does not start from clj.

Ac1dR3d15:09:40

so i have to make my own ring server “in” my fighweel app

Ac1dR3d15:09:46

or serve it outside

Ac1dR3d15:09:49

from luminus

Ac1dR3d15:09:54

I just chose to use luminus

Ac1dR3d15:09:25

so now i want to have my code updated live on figwheel… with figwheel… and on luminus with luminus

Ac1dR3d15:09:31

so thers 2 projects

Ac1dR3d15:09:42

figwheel and luminus on dev stage of my project.

Ac1dR3d15:09:59

in the end ill serve my figwheel with nginx and proxy my calls to luminus server

bhauman15:09:04

you have two different folders and two project.clj files?

Ac1dR3d15:09:29

yes 2 projects, 1 server (api services) 2 frontend (fighweel project)

Ac1dR3d15:09:46

1 is luminus, 2 is figwheel

Ac1dR3d15:09:51

and i want to connect them 🙂

bhauman15:09:21

ok you should be able to configure luminus to serve the ../front-end/resources/public directory

Ac1dR3d15:09:38

hm… ok thanks

Ac1dR3d15:09:42

sounds like a plan

bhauman15:09:49

much easier

Ac1dR3d15:09:50

👍 thanks for figwheel!

bhauman15:09:09

my pleasure, I hope I was able to help

Ac1dR3d15:09:20

tyty have a good day

Ramzi15:09:11

I have been struggling for two weeks on getting Slickgrid to work in my CLJS project. How difficult would it be to reimplement in pure CLJS: 1. Table header resizing 2. Draggable column headers 3. Sortable columns 4. Filterable columns 5. Hideable columns 6. Select all. 7. Pagination. 8. Ajax loading

zosho15:09:27

Apols for the newbie query. I'm wanting to use a cljsjs packaged library in Reagent, have done the relevant requires etc and the docs then say 'in order to call a function do (js/GlobalName.someFunction) '- where should I rummage to find the relevant 'GlobalName'

Ramzi15:09:29

Really only the first six.

pesterhazy15:09:49

@steve613 yeah it's basically rummage-time

pesterhazy15:09:03

usually the name is easy to guess

pesterhazy15:09:42

what I do is I open the app in chrome with the pseudo-ns required

pesterhazy15:09:04

then check if there is window.CamelCasedVersionOfLibName

pesterhazy15:09:29

e.g. for react-select I would check for window.ReactSelect in the chrome devtools

pesterhazy15:09:57

does that make sense?

zosho15:09:41

@pesterhazy thanks ... so it's a library-defined name rather than Reagent

pesterhazy15:09:48

it's defined in the cljsjs packaging code

zosho15:09:33

great, thanks for help - happy rummaging ahead!

pesterhazy15:09:55

some lib packaging scripts do it manually: https://github.com/cljsjs/packages/blob/bbbc2005d6c6da11e04f97c34d5f7f8eda8a17e6/xlsx/resources/main.js#L2 - others do it implicitly somehow I assume

dnolen15:09:39

@its.ramzi what problems were you encountering?

Ramzi15:09:40

I could only render the Slickgrid when I imported the javascript serverside and passed it to the client.

Ramzi15:09:59

If I had a page loaded on the client, I could load the Slickgrid source into a <script> DOM element, but I couldnt run it.

dnolen16:09:24

there’s just no reason Slickgrid should not work - if you can make it work with regular JavaScript, then it will work with ClojureScript

dnolen16:09:33

I think reimplementing all the functionality will take a long time

Ramzi16:09:42

Can you work with me to get a Slickgrid example working in a fresh Reagent project?

dnolen16:09:46

that said, I don’t know if Slickgrid is the answer - maybe there’s another one

dnolen16:09:56

sorry I cannot help you except at a high level

dnolen16:09:36

but two weeks seems like a long time to not be able to even invoke it from ClojureScript …

dnolen16:09:46

I would put together something minimal that isn’t working and paste it here

Ramzi16:09:55

it has been very frustrating

dnolen16:09:12

I’m assuming this is not first library you’ve tried to integrate?

Ramzi16:09:16

the minimal thing is starting from scratch

Ramzi16:09:29

no, i have experience

dnolen16:09:00

oh k, just double-checking - yeah then maybe it is a Slickgrid issue - one bad sign is that it appears abandoned - though are you using the active fork?

Ramzi16:09:13

i am. the issue is a standard HTML/js one

Ramzi16:09:26

here let me make a new clean project for you to look at

dnolen16:09:27

well can you get it working with just JavaScript

dnolen16:09:39

I would do that first

Ramzi16:09:46

okay, i have it super minimal

Ramzi16:09:44

So, when you run that, you should see a div called myGrid, and an import for my-grid.js

dnolen16:09:00

just paste it somewhere please

Ramzi16:09:13

did you not see the attachment?

dnolen16:09:39

I don’t want to d/l a gz to review something - make a paste

richiardiandrea18:09:27

Can I use alias in ClojureScript?

richiardiandrea18:09:38

does not seem to work

richiardiandrea18:09:53

cljs.core.alias.call(null,new cljs.core.Symbol(null,"ba","ba",679581229,null),burst_events_fn.api)
                ^

TypeError: Cannot read property 'call' of undefined

LazyMonad18:09:31

hello, can someone help me 🙂 i dont know how to deal with promises in clojurescript for e.x. js/fetch

richiardiandrea18:09:28

@puremonad you can access to then and catch like this: (-> (js/fetch ....) (.then #(println %)))

richiardiandrea18:09:03

sorry let me get rid of the -> macro

richiardiandrea18:09:15

(.then (js/fetch ....) #(println %))

richiardiandrea18:09:39

the .fn-name syntax means "call whatever method" on the instance of the first parameter

richiardiandrea18:09:49

which for you is a js/Promise

LazyMonad18:09:54

thank that was easy 😉

richiardiandrea18:09:27

don't forget the #, which is very often confusing...

thheller18:09:28

@richiardiandrea no alias is not supported in cljs

richiardiandrea18:09:02

hashtag sad panda 😢

richiardiandrea18:09:48

is it contributable or already discarded for reasons @thheller

thheller18:09:00

not a clue. its not really useful in a CLJS setting given the more static nature of ns

richiardiandrea18:09:02

Ok I was curious because there is a trick that some folks employ for specs which is:

# clj only
(create-ns 'my-test.namespace)
(alias 'mn 'my-test.namespace)
(s/def ::mn/test-spec string?)
It decouples spec aliasing from files.

thheller18:09:28

yeah that wouldn't work anyways since you definitely can't do create-ns in cLJS

richiardiandrea18:09:46

it seems that works?

richiardiandrea18:09:41

https://dev.clojure.org/jira/browse/CLJ-2123 <- yep saw that and voted, I hope one day it will get implemented

LazyMonad18:09:57

im new here and just started to studing clojure its really fun 🙂

richiardiandrea18:09:02

Ok I was curious because there is a trick that some folks employ for specs which is:

# clj only
(create-ns 'my-test.namespace)
(alias 'mn 'my-test.namespace)
(s/def ::mn/test-spec string?)
It decouples spec aliasing from files.

richiardiandrea18:09:41

https://dev.clojure.org/jira/browse/CLJ-2123 <- yep saw that and voted, I hope one day it will get implemented

LazyMonad18:09:22

I have one more question, whats different between #(println %) VS (fn [x] (println x)) 🙂

thheller18:09:46

less characters. nothing else.

misha19:09:22

@puremonad you can stick a name into fn, so when things blowup inside it, you'll find it faster.

misha19:09:07

(map #(/ % 0) [1 2])
java.lang.ArithmeticException: Divide by zero
	at user$eval22300$fn__22301.invoke(form-init7112164857516660938.clj:1)
                      ^^^
(map (fn foo [x] (/ x 0)) [1 2])
java.lang.ArithmeticException: Divide by zero
	at user$eval22315$foo__22316.invoke(form-init7112164857516660938.clj:1)
                      ^^^

mfikes19:09:44

@puremonad If you evaluate

'#(println %)
you can force the wizard out from behind the curtain
(fn* [p1__624#] (println p1__624#))

Ramzi20:09:35

if someone passes a {:table to a function, how can I get the rows from it?

mfikes20:09:28

@its.ramzi what is the shape of that data?

Ramzi20:09:45

It would be an html table

Ramzi20:09:48

done in hiccup

mfikes20:09:53

@its.ramzi Do you have an example of a Hiccup table value?

Ramzi20:09:30

[:table [:tr [:td 1

spieden20:09:12

@its.ramzi i’ve used specter to successfully path into hiccup before

spieden20:09:28

let me see if i can find a snippet…

spieden20:09:44

this is probably pretty obscure, but i can give an example: https://gist.github.com/spieden/92a41ac80361c2cdaa68306efbb1cfba

spieden20:09:08

@its.ramzi is this what you want?

(spr/select [(child-tag :table)
             (child-tag :tr)
             (spr/subselect (child-tag :td)
                            BODY)]
            [[:table
              [:tr [:td "foo"] [:td "bar"]]
              [:tr [:td "bam"] [:td "boom"]]]])
=> [["foo" "bar"] ["bam" "boom"]]

spieden20:09:32

had to def this path too:

(def BODY
  (spr/if-path [1 map?] 2 1))

john20:09:17

@its.ramzi You're probably not wanting to be doing what you're doing though. To render your table, you should be pulling the data for the table out of some state management thing (like an atom) somewhere. Like, you could be using a vector in there somewhere, which you then use to populate your hiccup table with. In the event that you want to also put that data somewhere else, you don't want to pull that data out of the hiccup form. You want to pull it directly from the state management system (like, from an atom) instead.

spieden20:09:53

oh, yeah true — might be an X/Y problem =)

john20:09:58

But, if you really want to be digging into and passing around hiccup forms... what @spieden said 😉

spieden20:09:16

my use case was transforming some hiccup as part of generating a static website

👍 4
spieden20:09:39

hiccup was generated from user markdown

Ramzi21:09:39

That looks pretty good.