Fork me on GitHub
#clojurescript
<
2018-07-27
>
john00:07:51

There we go. New version up here: https://johnmn3.github.io/tau.alpha/ Has a more convenient floating FPS counter too.

mv00:07:40

This might be a silly question, but I need to use a js library that assumes you have a react/redux application. It provides a react component and a redux reducer. Is there a reasonable way to integrate such a library? Can redux be run with cljs?

justinlee01:07:10

@mv you can do that, but you’d have to write something to bridge from redux to whatever cljs react wrapper you are using

justinlee01:07:24

query whether this library you want to use is worth it

mv01:07:37

Yea, that’s the question

justinlee01:07:39

it may just work to have the redux machinery working alongside the reagent/reframe machinery. the devil is in the details: how are you supposed to interact with it. i’ve never seen a library that assumes a redux store

justinlee01:07:01

from a brief glance, it looks like it just minds its own business in its own key, so that would indicate that you could just run redux alongside whatever you are doing in cljs. i think that would work, because redux will just send new props to the kepler stuff whenever things update and something like reagent will be fine with that

mv01:07:39

Yea, it’s going to depend on how much interaction with that component will be required

aduerrhauer08:07:46

Hey, maybe someone can give me a helping hand with this. I am trying to change the currentTime of a video. The ref to the video is saved in an atom and I have no idea how to change the property in that. Does someone have an idea? The code looks like this: (defn video [] (let [!video (r/atom nil)] [:div.video-container [:video {:ref (fn [el] !video el)} [:source {:src "foobar.mp4" :type "video/mp4"}]] [:button {:on-click (fn [] (when-let [video @!video] (set! (.-currentTime video) 5)))}]]))

thheller08:07:24

@duerrhauer this (fn [el] !video el) does basically nothing. you probably want (fn [el] (reset! !video el))

aduerrhauer08:07:54

sry, missed that in the code block

aduerrhauer08:07:11

@thheller, do you see another error? I still can not change the currentTime

thheller08:07:55

check if the :ref fn actually gets called. I'm not sure how reagent handles refs

aduerrhauer08:07:08

this works without a problem [:button {:on-click (fn [] (when-let [video @!video] (if (.-paused video) (.play video) (.pause video))))} "play"]

aduerrhauer08:07:21

so it should have the right reference

aduerrhauer08:07:17

Do I need to do something with reset! or swap!?

thheller08:07:19

when in doubt add a prn or js/console.log just before the set! to check if its actually getting called

thheller08:07:29

the set! call itself is correct

aduerrhauer08:07:44

thank you. I've put a if clause in it that wasn't correct.

aduerrhauer08:07:47

solved the problem

aduerrhauer09:07:19

I wasn't sure how to use an atom with an element reference, thanks for making that clear!

kwladyka09:07:09

What is you preference and why?

(aget w3 "eth" "accounts")
; vs
(.. w3 -eth -accounts)

thheller09:07:31

(-> w3 .-eth .-accounts (do-something-with-account)) for me personally 😉

👍 4
thheller09:07:56

or ... never aget since you are not working with an array. or rather eth is not an array. accounts might be.

kwladyka09:07:22

why not aget?

thheller10:07:23

aget is for arrays-only and should only be used with numeric indexes. see https://clojurescript.org/news/2017-07-14-checked-array-access

thheller10:07:13

you could also use (goog.object/getValueByKeys w3 "eth" "accounts")

kwladyka10:07:36

and why -> over ..?

kwladyka10:07:57

sorry for hard questions 😛

thheller10:07:49

thats why I added the (do-something-with-account) the .. only allows to access object properties/methods. -> is more flexible.

thheller10:07:21

but .. is totally fine if you just want something short and don't need that flexibility

kwladyka10:07:15

ok thx, it is pros and cons in the same time. .. can make very clear this part is about get data. But I don’t have strong opinion at that moment.

thheller10:07:05

goog.object is the safest option since you don't need to worry about externs

thheller10:07:28

but shadow-cljs should take care of most of the issue with that

Aaron12:07:45

Has anybody ran into this error when trying to run figwheel or figwheel-main:

CompilerException java.lang.ClassNotFoundException: expound.ansi, compiling:(figwheel/main.cljc:174:5)

bhauman12:07:07

@aaronmmartz sounds like a classpath problem

bhauman12:07:20

are you excluding expound?

Aaron12:07:54

I don't think so... Where do I look for that?

bhauman12:07:22

are use using cli tools?

Aaron12:07:40

I'm using lein

bhauman12:07:51

and what's your setup in your project.clj

Aaron12:07:04

Let me post, one second

bhauman12:07:40

actually try lein deps :tree and look for expound

bhauman12:07:06

and then make sure that it's actually in your .m2/repo

bhauman12:07:55

and make sure that the version is 0.7.0

bhauman12:07:25

you are probably pulling an earlier version of expound in somewhere

Aaron12:07:08

lein deps shows expound 0.7.0

bhauman12:07:16

one way to fix this is to add expound 0.7.0 as a dependency wherever you are placing the figwheel-main dep

Aaron12:07:45

Does figwheel-main require clojure 1.9?

Aaron12:07:07

Not sure if that is related but that shows up in lein deps

bhauman12:07:52

yes it does require 1.9

bhauman12:07:02

but actually you found a bug

bhauman12:07:23

no its not a bug

Aaron12:07:49

expound is in my .m2/repo

Aaron12:07:22

Let me update to 1.9

bhauman12:07:43

you need 1.9 in order to use spec

bhauman12:07:05

and thats how validation is done

Aaron12:07:08

Ahh! Is expound part of spec?

bhauman12:07:15

but this is still weird behavior

bhauman12:07:23

no but expound uses spec

bhauman12:07:16

I'll try 1.8 and see what happens

bhauman12:07:31

but 1.9 is definitely a requirement

Aaron12:07:05

Ok upgrading took the expound issue away... now running figwheel I get this error:

Aaron12:07:09

Unhandled java.lang.Exception
   Failed to launch Figwheel CLJS REPL: nREPL connection found but unable to
   load piggieback. Please install  

Aaron12:07:11

Which is interesting, because I am able to run figwheel through the terminal

bhauman12:07:29

running figwheel from where?

bhauman12:07:01

how are you startin gfigwheel

Aaron12:07:09

Through terminal, running lein figwheel dev works fine

Aaron12:07:43

Starting figwheel with cider-jack-in-clojurescript brings up that error

bhauman12:07:53

lein figwheel is your alias to figwheel-main?

Aaron12:07:16

Oh sorry, I'm trying both figwheel and figwheel-main

Aaron12:07:18

Sorry about that

bhauman12:07:55

and what script is cider-jack-in-clojurescript running?

bhauman12:07:21

because that looks like a figwheel-sidecar error

Aaron12:07:02

I've tried figwheel and figwheel-main

Aaron12:07:23

Running fighweel brings up the piggieback error

Aaron12:07:41

Running figwheel-main brings up:

File dev.cljs.edn does not exist
   #:cljs.main{:error :invalid-arg} 

Aaron12:07:11

Which I thought was only required when using the Tools CLI?

bhauman12:07:17

do you have a dev.cljs.edn file?

Aaron12:07:35

No not yet. I thought it wasn't required with lein

Aaron12:07:43

I'll create one

bhauman12:07:15

OK Aaron figwheel-main isn't at all like lein figwheel

bhauman12:07:34

it does not pull its config from the project.clj

bhauman12:07:07

you may want to take a step back and start over by looking at the docs more

Aaron13:07:03

I apologize for that

bhauman13:07:17

no worries

Aaron13:07:49

Would you suggest using figwheel-main over figwheel? I know it is newer

Aaron13:07:16

And would you suggest using it through the Tools CLI?

bhauman13:07:30

I would suggest using it for sure

bhauman13:07:42

and I think it works fine with either tool

Aaron13:07:21

Ok thanks for the help. I'll put aside the piggieback error for figwheel and go through the full set-up process for figwheel-main

bhauman13:07:26

you got it, also I take some responsibility as the readme is still not that clear

bhauman13:07:22

cider has setup instructions on its documentation site

Aaron13:07:24

I'm fairly new to all of this, so take that as a grain of salt with what I'm about to post

Aaron13:07:47

With most of the clojure tools and libraries, I've run into the problem of not enough documentation

Aaron13:07:35

With figwheel, figwheel-main and cider, it is almost too much documentation, especially since there have been some big changes in dependencies (or so it seems to me)

Aaron13:07:05

But that might be just for me

kenny17:07:31

Is there a way to import a class but name it something else? i.e. I want to add (goog.ui Tooltip) to my :imports but I'd also like a function named Tooltip in my namespace.

mfikes19:07:20

@kenny As far as I know, :rename only works for :require (for var names)

bhauman19:07:36

@kenny you could just import the full thing [goog.ui.Tooltip] and then (def GTooltip goog.ui.Tooltip)

kenny19:07:02

I'm pretty sure I tried that and it still caused issues.

bhauman19:07:36

that would surprise me

bhauman19:07:22

I'm gonna try it

kenny19:07:27

Yeah, just changed my :import from (goog.ui Tooltip) to (goog.ui.Tooltip) and it did not work.

kenny19:07:01

Got a Uncaught TypeError: Cannot read property 'Tooltip' of undefined.

kenny19:07:21

... on the line that does this (goog.ui.Tooltip. element-id text).

bhauman19:07:53

yes I'm getting this as well

bhauman19:07:08

which is strange

kenny19:07:34

I also would've expected that to work.

mfikes19:07:00

It works for me (in Planck). Evaluate goog.ui to see what you get

cljs.user=> goog.ui
#js {:PopupBase #object[Function],
     :Popup #object[Function],
     :Tooltip #object[Function]}

bhauman19:07:59

@mfikes you did import in the REPL

thheller19:07:16

@kenny (:import (goog.ui.Tooltip)) is not valid. either (:import goog.ui.Tooltip) or (:import (goog.ui Tooltip))

thheller19:07:46

:import list implies (<ns> <class1> <class2> ...)

thheller19:07:18

so (goog.ui.Toolip) is just (<ns>) and effectively discarded

kenny19:07:26

I’m fairly confident I tried that too and it still caused issues. Will be offline for a bit so won’t be able to try that out.

thheller19:07:07

I don't think that renaming is possible though

thheller19:07:53

(:require [goog.ui.Tooltip]) should to it though since that doesn't create the Tooltip local

bhauman19:07:30

or just require goog.ui

bhauman19:07:02

and then (goog.ui/Tooltip.)

bhauman19:07:52

@kenny I've confirmed that (:import goog.ui.Tooltip) works as expected

JH20:07:30

Does anyone know of a good library for doing syntax highlighting of clojure code with hiccup? I am trying to view clojure formatted code in my webpage

bhauman20:07:45

@jacob.haag I normally use more standard solutions

bhauman20:07:13

like markdown with kramdown for highlighting blog posts

bhauman20:07:29

@jacob.haag you can use highlight

bhauman20:07:14

you can find highlight on http://cljsjs.github.io

JH20:07:26

Much appreciated

Daw-Ran Liou20:07:32

@jacob.haag @bhauman I made an online markdown editor. https://coolmarkdowneditor.org/ I'm pretty new to clojurescript and frontend development so any feedback is welcome 🙂

👍 4