Fork me on GitHub
#clojurescript
<
2017-02-11
>
darwin00:02:14

as a side note, you should consider using https://github.com/binaryage/cljs-devtools

victorvoid00:02:18

uoww! nice! It's awesome! thanks brother 😄 I'll try it

stbgz03:02:13

hey all in a cljc file, if there are not reader conditionals, what’s the default behaviour?

mfikes03:02:30

@stbgz Fragments of code not wrapped in reader conditionals is unconditionally compiled for all dialects. There need not be any reader conditionals if the entire file is inherently portable.

gklijs10:02:38

I was just wandering, not even searched the internet, if there is a way to clean a project of dead code/function. I especially have some imports I’m not sure whether they are still used after putting some code in multiple files.

borkdude12:02:17

@gklijs You can use Cursive for this, or cljr-clean-ns in CIDER/clj-refactor

borkdude12:02:07

I cannot refer to foo in bar

pesterhazy12:02:27

you need to do (.bar o)

borkdude12:02:42

well, bar is called, but the part where bar calls foo doesn't

borkdude12:02:27

tried it, same

borkdude12:02:35

this refers to the window

pesterhazy12:02:42

cljs.user=> (def x #js {:bar (fn [] (println "Great success")) :foo (fn [] (this-as this (.bar this)))})
#'cljs.user/x
cljs.user=> (.foo x)
Great success

pesterhazy12:02:56

Works for Me [tm]

gklijs12:02:14

@borkdude thanks, I will look into that, I have cursive in intellij, but not really using it atm.

pesterhazy12:02:08

pro tip: try it in lumo, it's easier to experiment that way

borkdude12:02:57

Yeah, I’m trying it in http://app.klipse.tech/. It works when I move the this-as close to the call, like your example. I have no clue how this works (pun intended).

pesterhazy12:02:28

share the failing example?

pesterhazy12:02:32

also

cljs.user=> (def y (reify Object (bar [this] (println "Great success")) (foo [this] (.bar this))))
#'cljs.user/y
cljs.user=> (.foo y)
Great success

borkdude12:02:04

Hmm, now this works:

(def o #js
  {:foo (fn [] (println "foo"))
   :bar (fn [] (this-as this
                       	(println "bar")
                        ((.-foo this))))})
What’s the difference with before....

pesterhazy12:02:30

why do you keep using ((.-foo this)) ?

thheller12:02:43

@borkdude don't mess with this unless you really have to

pesterhazy12:02:03

you'll need to use js/bind in that case (that's just how javascript works)

thheller12:02:05

what are you trying to achieve?

borkdude12:02:21

@pesterhazy Just trying to debug my previous example. @thheller I’m trying to achieve enlightenment 🙂

borkdude12:02:43

@pesterhazy I like the reify example anyway, so I’ll be using that from now on

pesterhazy12:02:55

remember, ((.-foo x)) is not equivalent to (.foo x)

thheller12:02:35

@borkdude CLJS tries very hard to never expose you to this ... why are you trying to work around that 😛

pesterhazy12:02:02

@thheller it's useful to know how things work under the covers

borkdude12:02:07

@thheller Because I’m trying to write a vanilla React component

pesterhazy12:02:35

klipse allows you to look at the generated code so that's useful

thheller12:02:52

@pesterhazy things are different in CLJS though, so this works somewhat different as well

thheller12:02:27

@borkdude vanilla react component as in React.createClass or via class MyComponent extends React.Component?

borkdude12:02:03

@thheller don’t care, I was looking for some example and go from there

pesterhazy12:02:18

IIRC, if you use this-as, you should immediately bind the value in a let

pesterhazy12:02:05

I'd be grateful to a pointer to notes on how this-as works in unexected ways

borkdude12:02:22

if you have any good code to look at to write some vanilla React, that goes further than only a render method, please share 🙂

pesterhazy12:02:40

@borkdude I'd just use createClass

pesterhazy12:02:18

don't know about "good code" though

thheller12:02:58

@pesterhazy well this-as exposes you to this so it inherits all the issues of this, those should be well documented in the JS world

borkdude12:02:44

Thanks @pesterhazy, I think that’ll be useful for me

thheller12:02:53

@borkdude if you are building a JS obj via #js with functions you intend to call via (.foo obj) you are basically building a prototype

pesterhazy12:02:52

one reason I can imagine this-as may fail is if you're using let bindings, which may be implemented as anon fns

pesterhazy12:02:09

so they'd see a different this context

pesterhazy12:02:30

(resulting in js/window as this)

borkdude12:02:32

@pesterhazy I came across that SO question, but I didn’t understand the answer

thheller12:02:33

this-as must be the first thing you call yes

pesterhazy12:02:54

right that's the conclusion

thheller12:02:56

otherwise all bets are off what this will be

borkdude12:02:31

that is very confusing

pesterhazy12:02:39

what do you mean by"building a prototype", @thheller ?

pesterhazy12:02:05

people use map literals to build Objects in js all the time, no?

pesterhazy12:02:19

without using prototype inheritance explicitly

thheller12:02:01

well if you probably wouldn't use this in that case

thheller12:02:21

(let [MyType
        (fn []
          (this-as this
            (set! (.-hello this) "world")))

        proto
        #js {:foo
             (fn []
               (this-as this
                 (js/console.log "this" this (.-hello this))))}]
    (js/goog.object.extend (.-prototype MyType) proto)

    (-> (MyType.)
        (.foo)))

thheller12:02:31

CLJS has a lot of sugar to hide the details

thheller12:02:41

but you can build vanilla React.Components using those building blocks

pesterhazy12:02:05

can you use goog.object.extend to make a class that extends React.Component?

pesterhazy12:02:35

that's useful to know

pesterhazy12:02:02

although I'm not sure how es6 classes are any better than React's createClass from the cljs perspective

thheller12:02:11

(defn MyReact [props context updater]
  (this-as this
    (js/React.Component.call this props context updater)))

(js/goog.object.extend (.-prototype MyReact)
  js/React.Component.prototype
  #js {:render
       (fn []
         (this-as this
           (js/React.createElement "h1" nil "hello world")))})

(js/ReactDOM.render (js/React.createElement MyReact nil))

pesterhazy12:02:56

let me try that in Klipse

pesterhazy12:02:07

seeing is believing

thheller12:02:00

uhm the ReactDOM call is missing the target element

thheller12:02:05

but otherwise that should work

borkdude13:02:00

@pesterhazy how do you add React to Klipse?

pesterhazy13:02:14

give me a second

thheller13:02:27

pretty sure it available by default

borkdude13:02:34

oh of course 🙂

pesterhazy13:02:34

#error {:message "ERROR", :data {:tag :cljs/analysis-error}, :cause #object[Error Invariant Violation: Minified React error #37; visit  for the full message or use the non-minified dev environment for full errors and additional helpful warnings.]}

thheller13:02:09

(js/ReactDOM.render (js/React.createElement MyReact nil) (js/document.getElementById "klipse-container"))

pesterhazy13:02:20

minified React errors are not very helpful 🙂

thheller13:02:44

well the url has all the details 😉

borkdude13:02:49

does it work?

pesterhazy13:02:38

hm it does but the gist doesn't update in Klipse

pesterhazy13:02:06

now it works

pesterhazy13:02:10

I think you can just use goog.object/extend instead of js/goog.object.extend

thheller13:02:30

yeah you should probably :require + alias that

thheller13:02:46

just wanted the example to be as short as possible 😉

pesterhazy13:02:30

afaik goog.object is guaranteed to be loaded

pesterhazy13:02:39

as it's used in cljs core

thheller13:02:11

it is, but still looks better to write (gobj/extend ...) than the (js/goog...)

borkdude13:02:10

@pesterhazy where can I find that gist feature of Klipse?

thheller13:02:16

IIRC if you want this to work in :advanced the MyReact fn needs the @constructor jsdoc for the closure compiler

thheller13:02:10

but not sure if that is still required

thheller13:02:54

@borkdude first line of the klipse source has the link ... nvm

pesterhazy13:02:47

the gist needs to be specified in the url

borkdude13:02:59

I mean, is that documented or not?

pesterhazy13:02:32

but that doesn't list container=1 which is essential here

pesterhazy13:02:24

I'll ask yehonathan if we can add it there

victorvoid13:02:32

Hey brothers how can I create a action in form to go router ? I'm using secretary, I'm using e.preventDefault but I didn't find how to use to "go url" I puted in my button with type "submit", if I use with :href "/route" it's working ;/

victorvoid13:02:10

What is the best way to forms ?

fossifoo14:02:43

i just tried updating clojurescript in one of my re-frame apps, but both 456 & 473 wont work. i think even just the compiling is broken somehow

fossifoo14:02:20

unit tests via boot-cljs-test just say "Test script not found: cljs_test/generated_test_suite.js"

fossifoo14:02:35

and the page renders empty without showing errors

baptiste-from-paris14:02:53

hey guys, I habe something strange happening in cljs when setting object; am I doing something wrong ?

(def o (js-obj "first-name" “Baptiste”))
=> #‘cljs.user/o
o
=> #js{:first-name “Baptiste”}
(.-first-name o)
=> nil
But if I do this =>
(def o (js-obj "name" "Baptiste"))
=> #'cljs.user/o
o
=> #js{:name "Baptiste"}
(.-name o)
=> "Baptiste"

darwin14:02:00

(.-first_name o)

darwin14:02:24

you should be aware of munging clojurescript names in javascript land

pesterhazy14:02:43

underscores are more convenient in javascript

darwin14:02:58

dashes are NOT possible in javascript, that’s why

pesterhazy14:02:02

as you can use . syntax rather than ["..."] for property access

pesterhazy14:02:09

they're possible, but inconvenient

baptiste-from-paris14:02:16

thery are possible !

pesterhazy14:02:50

it's actually baptiste_from_paris 🙂

baptiste-from-paris14:02:08

right I’ll remember

fossifoo16:02:55

okay, i tracked the issue to a package io.replikativ/geheimnis:0.1.0

fossifoo16:02:31

if i build including that (at least with boot), the js doesn't get written: boot -d adzerk/boot-cljs:1.7.228-2 -d org.clojure/clojurescript:1.9.473 -d io.replikativ/geheimnis:0.1.0 -BP -s foo cljs target

fossifoo16:02:53

with "foo" being a simple core.cljs not even requiring that package

sova-soars-the-sora20:02:41

Anybody have any good examples of how to do ajax calls with callbacks via Sente?

Oliver George20:02:33

I had the impression that Sente was for bi-directional connections. Websockets etc.

Oliver George20:02:07

Something like cljs-Ajax might be what you are looking for

danielgrosse20:02:53

When I want to use a closure notated javascript library, how would do this?

sova-soars-the-sora21:02:20

@olivergeorge yes Sente is amazing at bi-directional work, but there is some initial data that must be loaded with my app, namely: initial posts, user login session variable, user logout session clearing. those three, i've come to conclude, need a simple ajax call to fetch the init data and set the session. then the socket love can happen unhindered

pesterhazy21:02:11

you can also serve the data in the initial html file

pesterhazy21:02:11

[:script#data-transit {:type "text/plain"}
      (transit/write data)]

pesterhazy21:02:34

something like that, then just grab that in your cljs code

sova-soars-the-sora21:02:51

Yeah, that may actually be the swiftest way... load the necessary noodling with the initial HTML request, I'm trying to balance which will be easier to maintain [long] into the future

Oliver George21:02:43

Including some data in the html is a good way to avoid an extra round-trip before your single-page webapp can do something useful. I do that for auth and config.

sova-soars-the-sora21:02:37

for auth and config? now you're talking my language. how do you do auth?

Oliver George21:02:23

Oh, to be clear I often do auth using simple HTML endpoints. The auth I was referring to was telling the client what groups/permissions this user has.

Oliver George21:02:31

That lets me enable/disable features as necessary

Oliver George21:02:41

e.g. user can add X, user can update Y...

Oliver George21:02:12

(so my pattern has been: html login page, redirect to the single page app on success)

Oliver George21:02:32

Not saying that's the best approach but it's convenient.

sova-soars-the-sora21:02:30

Yeah that's a good way.

sova-soars-the-sora21:02:53

I keep thinking I have to defeat loading times, since there is a couple seconds before the javascript can play, but I should content myself with a working application first, then optimize...

sova-soars-the-sora21:02:12

I just don't know how to make a callback do something on the Sente Serverside, but I'm looking x)

danielgrosse21:02:20

is there a support for goog.module? I have a library which provides goog.modules, but don't know how to use them in cljs

Oliver George21:02:44

@sova: one trick I like is to load the app js on the login screen so it's already cached when the redirect happens

sova-soars-the-sora22:02:58

Interesting. Currently I'm actually doing logins from within the javascript app, but I suppose I could just as easily do it outside in a simple form. There is stuff you can do in the app without logging in, so I fink my specific use-case makes it a good design path