Fork me on GitHub
#clojurescript
<
2016-11-20
>
hwk05:11:24

Are there any bindings for rendering TEXT in WebGL via CLJS that is better than "just use a texture" ? Signed Distance Function: https://www.youtube.com/watch?v=CGZRHJvJYIg , https://www.mapbox.com/blog/text-signed-distance-fields/ Vector Textures: https://news.ycombinator.com/item?id=10824064 Glyphy: https://github.com/behdad/glyphy but there appears to be no cljs bindings anywhere.

thheller09:11:20

@cigitia you don't need class for web components, Reflect seems to be the go-to solution for webkit and chrome

thheller09:11:06

can't comment on the class support for cljs, just saying you don't actually need it most of the time

kaosko10:11:35

Hey, any idea where to start looking when Counterclockwise doesn't find any of your cljs dependencies anymore? clj still works, cljs used to work fine

veggiemonk11:11:29

Hi everybody, I just finished some tutorials for Om (Om Now) and I would like to know if there is a migration tutorial or even a tutorial for Om Next ?

credulous14:11:07

Hi! I’m missing something probably very obvious about Javascript interop… I tried to RTFM, but I couldn’t find anything.

credulous14:11:39

Trying to use the stripe API - the documented method call is

Stripe.piiData.createToken({
  personal_id_number: $('.personal_id_number').val()
}, stripeResponseHandler);

credulous14:11:04

My code looks like this:

(.createToken (.-piiData js/Stripe) {"personal_id_number" ssn }
                      (fn [status response]
                        (prn "STRIPE STATUS" status)
                        (prn "STRIPE RESPONSE" response)))

bbss14:11:34

you're not passing a JS map

bbss14:11:47

#js {"personal_id_number" ssn}

credulous14:11:01

Awesome! Thank you very much

bbss14:11:07

there is also (clj->js {"clj" "map"})

bbss14:11:12

good for debugging

bbss14:11:30

and there is the .. syntax you might want to look at

credulous15:11:17

Will do. This is my first foray into interop, javascript or java, so haven’t needed .. and similar.

bbss15:11:14

it has a learning curve, but works well mostly past that 🙂

darwin17:11:37

@credulous just for inspiration, here is an example how I would write such interop code using core.async and cljs-oops: https://gist.github.com/darwin/64600b52a61f01bd2a6ab21de69aec47

hwk21:11:17

instead of doing (.addEventListener js/window "keypress") is there a way to say: make this the ONLY keypress event handler on js/window ?

hwk21:11:26

I don't want to add an event handler -- I want to make it the ONLY event handler

hwk22:11:00

Is there a nice way to convert a "KeyboardEvent" (the event from pressing a key) do a cljs map ? I'm running (select-keys e [:altKey :ctrlKey :shiftKey :keyCode ...]) and getting {} in return I suspect this is because js / KeyboardEvent is NOT a cljs map.

darwin22:11:40

@hwk you are right, native javascript objects are not cljs maps

darwin22:11:27

you have to use js interop to work with them, e.g. (.-altKey event)

darwin22:11:54

or (aget event “altKey”) or similar

hwk22:11:25

@darwin: thanks for the tip! I like the aget solution. Got it working with: (into {} (map #(vector % (aget e (name %)) [list of keys we want]))

darwin22:11:30

@hwk: more advanced solution would be to “teach” a particular javascript type a set of protocols which would allow it to act as cljs map or vector, you can get the idea from this code: https://github.com/binaryage/dirac/blob/master/src/shared/dirac/dom/shim.cljs

hwk22:11:05

@darwin: so the idea would be: 1. KeyBoardEvent extens js/MapWhatever 2. (:key KeyBoardEvent) gets mapped to some function call in the MapWhatever protocol 3. We implment that function call on KeyboardEvent 4. Now, a KeybaordEvent, as far as CLJS is concerned satisfies the Map interface and we're good. ?

darwin22:11:01

yes, that’s the idea, you can look into clojurescript sources how various associative structures are implemented in core.cljs

darwin22:11:15

multiple protocols are involved

darwin22:11:37

but it sounds like an overkill in this concrete situation

hwk22:11:43

@darwin: this is very cool, and I need to learn it some day, but in all honesty, atm, I need to get this cljs svg editor ot work 🙂

hwk22:11:56

I do greatly apprecaiteyour help though 🙂

thheller22:11:58

@hwk @darwin I would stay away from "immutable-looking" protocols on native objects

thheller22:11:12

they are still mutable under the hood so you may end up in weird situations

thheller22:11:29

better to convert them to a proper cljs type instead of wrapping them

hwk22:11:04

@theller: that is insightful; even worse, aren't js events ephemeral? i.e. I'm not supposed to keep a reference to it after the handler exits ?

hwk22:11:16

so keeping the Keyboard Event around outside the handler is even against js protocol

hwk22:11:36

oh man, that would have been one nasty bug

hwk22:11:00

we should make it into an interview question 🙂

hwk22:11:06

"You know CLJS? "Yes" "Debug this." 🙂

thheller22:11:09

yeah it isn't fun to debug things like that

thheller22:11:41

@darwin there is also array-seq available that does what your shim does

hwk22:11:07

one silly question: for tis function, what names is better? keyboardEvent->map or keyboard-event->map ... or something else ?

thheller22:11:38

but there again js/HTMLCollection is mutable as is NodeList

thheller22:11:01

@hwk that is up to your personal preference 😉

darwin22:11:57

@thheller js/HTMLCollection is not an array, you have to use .item to access its items I think

thheller22:11:33

hmm maybe don't remember exactly ... element.childNodes is one of each and I had fun time debugging why may vector looking thing behaved weirdly 😛

darwin22:11:13

anyways thanks for the tip with array-seq never used it before

credulous23:11:19

Hi! Dunno if this is the right place to ask… but I’m having issues with the Javascript emitted from the Closure optimizer. In particular, I have some functionality that access an external JS library (Stripe.js) like this:

(.. js/Stripe -piiData (createToken #js {"personal_id_number" ssn }

credulous23:11:51

In the compiled javascript, though, the relevant bit looks like this:

var b=$q.h(a);return n(b)?Stripe.Pi.createToken({personal_id_number:b}

credulous23:11:19

Note the Stripe.Pi rather than Stripe.piiData. Stripe.Pi is undefined at runtime, so I get an error.

credulous23:11:29

What might I be doing wrong here?

darwin23:11:59

@credulous advanced optimization needs some help from you, have you see this doc? https://github.com/clojure/clojurescript/wiki/Advanced-Compilation

credulous23:11:21

Nope! But I’ll read it right now

darwin23:11:54

your Stripe library is a “foreign library” in this context, because you included it externally and it is not part of your advanced build

credulous23:11:46

Hm… I am loading it from cljsjs, which apparently defines all the externs?

credulous23:11:09

Maybe incomplete? I’ll see if I can figure that out.

darwin23:11:14

well, then forget my words 🙂

credulous23:11:52

Urk! Thank you @darwin… looks like I had put a direct load into my home template some time ago and forgotten… and added the cljsjs/stripe entry to project.clj