Fork me on GitHub
#reagent
<
2016-06-21
>
dm311:06:59

@pvinis: reagent.core/create-element

dm311:06:36

and r/adapt-react-class

pvinis11:06:42

dm3: and how do i download it without a package.json?

dm311:06:57

get the distributed sources

dm311:06:03

and put them in your sources

pvinis11:06:38

so i git clone the google login react component

pvinis11:06:42

in my sources?

dm311:06:05

you can clone a submodule if you like

pvinis11:06:56

aha. so no way to put it somewhere with the version etc

dm311:06:24

you can create a Cljsjs jar

dm311:06:35

and capture version in the Maven artifact

dm311:06:59

https://github.com/cljsjs/packages - Wiki explains how to work with that

pvinis11:06:51

i will check it

pvinis13:06:55

ok so apparently this cljsjs generator is not working

pvinis13:06:15

im trying to figure out how to recreate https://developers.google.com/identity/sign-in/web/ in reagent

pvinis13:06:29

is there a :script in reagent?

juhoteperi13:06:39

There are alternatives to Cljsjs if you need to quickly use a JS lib and the extern generator doesn't work. If should be easy to include a JS file in the build with deps.cljs and you can use Fence to write the interop code: https://github.com/myguidingstar/fence so you don't need the externs

juhoteperi13:06:21

This should help with including foreign JS lib in the Cljs build: https://github.com/clojure/clojurescript/wiki/Packaging-Foreign-Dependencies

pvinis13:06:49

how about hover in a div?

pvinis13:06:15

i tried adding a on-click in a div, and it works. but hover and on-hover doesnt

pvinis14:06:53

deraen: thanks..

pvinis14:06:28

there should be a guide for that stuff.. reagent and hiccup and all that stuff are hard just because its a guessing game

pvinis14:06:33

like rails used to be

juhoteperi14:06:34

@pvinis: Reagent builds on top of React and React build on top of normal DOM: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmouseover

pvinis14:06:57

deraen: ok, and then reagent makes them from camelCase to whatever-this-is-called

pvinis14:06:02

makes sense

henriklundahl14:06:29

@pvinis: kebab-case 🙂

pvinis15:06:59

but now i get this WARNING: Wrong number of args (0) passed to test.reagent/handle-google-signin at line 21 src/cljs/test/reagent.cljs

pvinis15:06:37

how should i handle that? i guess the button sends an arg?

pesterhazy15:06:01

I want to build a component that takes another one as a child and wraps that. Here's what I have now:

(defn wrapper [component]
  (r/create-class
   {:component-did-mount #(do-something)
    :reagent-render (fn [] component)}))

pesterhazy15:06:14

However, that doesn't seem to have quite the same behavior as the original

pesterhazy15:06:11

I'd like to use it as

[wrapper [some-other-component {:some :props})

pesterhazy16:06:07

damn you rookie mistake!!!

gowder16:06:32

So am I right to think that the main reasons people use secretary in reagent SPAs are 1. to give users descriptive URLs, and 2. to make history work? I don't need either of those and am thinking of letting it go and having a render function that derefs a layout atom, and then let all the "routing" happen by state changes to that atom... but I feel like that has to be a mistake, and will lead to disaster in some way I can't now discern! It can't be that simple.. can it?

henriklundahl18:06:27

@gowder: If you don't care at all about URLs, I think it can be that simple.

tomerweller21:06:24

When trying to render an externally imported pure JS react component (not with cljsjs) I get

Uncaught Error: Assert failed: Invalid tag: ‘’
I’ve read previous discussions here but still can’t figure out the problem. Anyone? (sorry for the noob question)

juhoteperi21:06:45

@tomerweller: Some example code of what your currently doing would be helpful

tomerweller21:06:12

This:

;For the sake of explaining this issue I'm using react-bootstrap (not the cljsjs port)
;I've placed the react-bootstrap package in window["deps"]["react-bootstrap"] with an external <script> tag
(def bootstrap-button (aget js/window "deps" "react-bootstrap" "Button"))
(defn my-app
  []
  (let []
    (fn []
      [:div
       [:h1 "my app"]
       [:> bootstrap-button {:bpStyle "primary"} "A BUTTON"]])))

(defn ^:export main []
  (reagent/render [my-app]
                  (.getElementById js/document "app")))
results in
Uncaught Error: Assert failed: Invalid tag: ‘’

tomerweller21:06:02

@juhoteperi: I think that’s the gist of it (had to extract from a larger project). Hope it conveys my issue

sbmitchell21:06:44

are you using reagent 6.x?

tomerweller21:06:37

Yes. that’s with reagent 0.6.0-rc

sbmitchell21:06:06

Do you have more error trace?

tomerweller21:06:03

Just a sec. it might have been an old version. I did a lein clean now and getting different errors

sbmitchell21:06:44

I mean invalid tag signifies that the hiccup parsing is not occurring correctly

sbmitchell21:06:53

can you have a hypen in a reagent component name

juhoteperi21:06:28

component name is :>, bootstrap-button is just a symbol referring to JS var, should be okay

sbmitchell21:06:14

also just verified you can have a hypen

sbmitchell21:06:19

base don the regex in the source

sbmitchell21:06:51

why is my-app wrapped as a fn?

tomerweller21:06:59

Shit. awkward. I was on an old reagent version.

sbmitchell21:06:01

the let binding is empty..that could be throwing errors

juhoteperi21:06:15

Nah, empty let is fine

sbmitchell21:06:23

well an empty let is fine but [my-app]

sbmitchell21:06:25

would return a fn?

sbmitchell21:06:33

does it handle that fine

tomerweller21:06:07

my project.clj had the newer version declared and I thought it just updates automatically with build. it didn’t.

juhoteperi21:06:10

render call? should be correct, it takes in hiccup form which in this case refers to a component

sbmitchell21:06:27

ok well apparently it was build error 😛

sbmitchell21:06:37

just eliminating all possible scenarios

tomerweller21:06:11

Thanks for the help guys. Sorry for the no-op.

tomerweller21:06:35

@sbmitchell: your first question about the version nailed it 🙂

juhoteperi21:06:56

@tomerweller: What cljs version are you on? There was some change related to cache invalidation some time ago (few months)

tomerweller21:06:28

[org.clojure/clojurescript "1.7.170"]

sbmitchell21:06:32

cool @tomerweller good luck into your foray of CLJS I was helping you on reddit as well 😛

juhoteperi21:06:14

I think this might help with cache invalidation after changing deps: 1.7.228: CLJS-1487: Fix handling of timestamp comparison for dependencies in JARs

tomerweller21:06:43

Good idea. I’ve been using what came with reframe without thinking about it.

sbmitchell22:06:51

Im surprised the re-frame template hasnt upgraded to 1.8

tomerweller22:06:59

Seems like most of the dependencies are a bit outdated.

gadfly36122:06:34

@sbmitchell If referring to re-frame-template it uses 1.8 as of this week. @tomerweller aside from reagent, any other deps out of date? Been holding off on upgrading reagent until it is an official release as opposed to alpha or rc ... release has just taken quite a while.

sbmitchell22:06:57

Oh cool @gadfly361 I didn't actually look was basing it off tomers deps. Good to know though

gadfly36122:06:54

Yeah, i tend to use whatever clojure / clojurescript deps are recommended by bruce in the figwheel readme. Makes it easier to keep figwheel turning lol :)

tomerweller23:06:39

@gadfly361: I actually started this as a sandbox from the todomovc example, not from the template.

tomerweller23:06:55

Can I point reagent to a global react instance (pure JS) instead of the react cljsjs package it depends on? (and react-dom, of course)

sbmitchell23:06:34

you can if you exclude those libs in your project.clj

sbmitchell23:06:11

I think you'd have to add a react ns though to make sure it get included first or something along those lines

sbmitchell23:06:36

We had to do something along those lines when MaterialUI was using its own reactJS and we didnt have a workaround at the time

tomerweller23:06:24

I found the part about excluding but not sure about fixing the namespace with my own

sbmitchell23:06:58

so in project.clj youll want to do something like [reagent "xxxxx" :exclusions [cljsjs/react cljsjs/react-dom]]

sbmitchell23:06:43

then add a cljsjs folder under src with a single file react.cljs with (ns cljsjs.react)

sbmitchell23:06:14

so other stuff will work with the react version you want

sbmitchell23:06:02

then just include react in your index.html as you would

sbmitchell23:06:13

I think that will work

tomerweller23:06:38

Works! 🙂

tomerweller23:06:33

Simpler than I thought. I forgot that in the end it just picks React from the global context

sbmitchell23:06:12

coolio 🙂