@dnolen: I’m trying to use analyze-file using the Om project as an example, but it’s having problems resolving deps, specifically:

Connecting to local nREPL server...
Clojure 1.8.0
nREPL server started on port 58699 on host 127.0.0.1 - 
(require '[cljs.analyzer.api :as api])
=> nil
(api/analyze-file "om/dom.cljs")
ExceptionInfo No such namespace: cljsjs.react, could not locate cljsjs/react.cljs, cljsjs/react.cljc, or Closure namespace "cljsjs.react" in file /Users/colin/dev/om/src/main/om/dom.cljs  clojure.core/ex-info (core.clj:4617)

/Users/colin/.m2/repository/cljsjs/react/15.0.1-1/react-15.0.1-1.jar is on the classpath.

Is there anything else I need to do to initialise this?

I can analyze some others successfully, e.g. "om/next/cache.cljs"

Hmm, even when analysis doesn’t produce errors, I get a ton of errors like: WARNING: Use of undeclared Var om.util/seq? at line 6 /Users/colin/dev/om/src/main/om/util.cljc, and at the end of it cljs.env/*compiler* is nil - I must be missing something basic.

so I can use cljsjs to import something like [cljsjs/react] into my project, but what if during runtime the react is going to be provided on the window instead? is there someway I can appease the classpath checking and not actually pull in cljsjs/react (and end up with 2 copies of react)?

By wrapping my call above in compiler/with-core-cljs I managed to fix the warnings, but I still get no result in cljs.env/*compiler*

What I ended up with:

(def result (let [opts (closure/add-implicit-options nil)
                  state (env/default-compiler-env opts)]
              (api/analyze-file state "cljs/core.cljs" opts)
              (api/analyze-file state "om/dom.cljs" opts)
              @state))

does any one know why this would print ("MISS" ... true), ie. the keys is there but it always goes to MISS https://gist.github.com/skrat/d29203738a3e855ff7eab4df7fc9e470

@lwhorton: http://stackoverflow.com/questions/37320212/use-a-different-react-version-with-clojurescript-react-libraries-reagent-om-rum

@skrat: The only case I can imagine is if the stored value is identical to the value of lookup-sentinel...

henriklundahl: it was something else http://stackoverflow.com/a/38069830/104337

Is there a ClojureScript library that can turn a JS date into a string like "7 minutes ago", "one week ago", etc?

@plexus: https://github.com/google/closure-library/blob/8bbc453a8808aa77af91f959fb0dc97be058cd97/closure/goog/date/relative_test.js

ah nice, thanks @rauh (require '[goog.date.relative :refer [format]])

Hey, anyone know if there is more idiomatic way to handle callbacks in js interop than this

(-> (.getDocument js/PDFJS "/onlisp.pdf")
     (.then 
      (fn callback1 [pdfFile] 
        (-> (.getPage pdfFile 1)
            (.then 
             (fn callback2 [page]
               (.getViewport page 1)))))))

I’m trying to figure out how to use this library via cljsjs https://developer.tizen.org/community/tip-tech/displaying-pdf-files-pdf.js-library

.then means you're using promises, right? Maybe you could use a promises library for cljs?

Not sure if it'll help you

usually when I expect to use the same js interop a lot, I just write idiomatic cljs wrappers and use them instead, I tend to turn callbacks into core.async channels

@conaw: You should be able to avoid the nested .then by just returning a promise again. That makes it more linear.

(-> (.getDocument "foo")
  (.then (fn cb1 [file] (.getPage file)))
  (.then (fn cb2 [page] (.getViewport page))))

nice, much appreciated!

While I have your attention — I had just been going back to my pre-react and pre-cljs code to re-learn direct dom manipulation, since this libraries does its writing directly to the canvas.

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var renderContext = {
    canvasContext: context,
    viewport: viewport
};

page.render(renderContext);

https://developer.tizen.org/community/tip-tech/displaying-pdf-files-pdf.js-library

AFAIK you have to wrap it in a react component and implement the canvas rendering via react component's life-cycle methods

Any libs come to mind where the author may have done this?

or example projects?

I assume you don’t need to animate the canvas, just render it once it gets mounted

https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components#form-3-a-class-with-life-cycle-methods

@rauh thanks for that.. one piece i’m a little confused on is react-dom-server; are you familiar with the packaging here?

i.e. do I need react/dom/server.cljs, too? for something like reagent that depends on all 3 r/dom/server?

Well, what I need to do is to figure out how to wrap functions like this

var currPageNumber = 1;

var openNextPage = function() {
    var pageNumber = Math.min(pdfFile.numPages, currPageNumber + 1);
    if (pageNumber !== currPageNumber) {
        currPageNumber = pageNumber;
        openPage(pdfFile, currPageNumber);
    }
};

var openPrevPage = function() {
    var pageNumber = Math.max(1, currPageNumber - 1);
    if (pageNumber !== currPageNumber) {
        currPageNumber = pageNumber;
        openPage(pdfFile, currPageNumber);
    }
};

sorry, that was bad example

pageElement.addEventListener('touchmove', function(e) {
    if (pageElement.scrollLeft === 0 ||
        pageElement.scrollLeft === pageElement.scrollWidth - page.clientWidth) {
        reachedEdge = true;
        if (touchStart === null) {
            touchStart = e.changedTouches[0].clientX;
        }
    } else {
        reachedEdge = false;
        touchStart = null;
    }

    if (reachedEdge && touchStart) {
        var distance = e.changedTouches[0].clientX - touchStart;
        if (distance < -100) {
            touchStart = null;
            reachedEdge = false;
            openNextPage();
        } else if (distance > 100) {
            touchStart = null;
            reachedEdge = false;
            openPrevPage();
        }
    }
});

I think you can do it the “dirty” way and use this code “as is” - attaching event listeners after react mounts your pageElement

just say, on-swipe dispatch a re-frame event to call ‘dirty-fn

more clean option would be to make page number input state of your component wrapping canvas and changing this input when your touch events call prev/next page switch (by re-rendering your reagent component tree)

where dirty-fn is openPrevPage

I mean, the thing I really want access to is the invisible text div that PDFjs creates over the view

so I can attach things to that

in the clean example you describe

how would that work with the re-frame 3 component

that does seem like exactly what I would want

in that reframe example [x y z] are inputs, your canvas wrapper component would take [page-num …] and render given page in :reagent-render

you would also attach touchmove event listener, in :component-did-mount

openPrevPage would not directly touch canvas and re-render it, it would just change state of your app and decrease page-num in your app-db (which should cause re-rendering of your component)

ok, I think I was getting more confused by this examples use of global vars actually, was just thinking how I would connect it to the appropriate element in my dom tree. in their render function they use

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var pageElement = document.getElementById('page');

the question is more, how does one hook those places where they use the getElementById to the right reagent component

or should I just create a div with some unique ID as the component, and render as they do

in :component-did-mount you should have access to the root element of your component

so you should be able to create your dom elements and append them to it

just with like a (.appendChile … …)

.appendChild

yes

so would i use

this-as

this seems relevant http://stackoverflow.com/questions/28662624/reactjs-componentdidmount-render

https://joecritchley.svbtle.com/portals-in-reactjs https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md This is what I've used in the past ^^

thanks @dominicm

@conaw: No problem. I'm pretty sure I used it for a similar problem to you. I was using a d3 wrapper, but it was still d3.

@cfleming: sorry wasn’t around yesterday for that question - seems maybe you got it sorted out?

@savelichalex: could you give an example of your then-> macro? I have tried building similar macros, but I've never quite been happy with the result..

@peterschwarz: oh yeah, of course)

@savelichalex: thanks!

Any suggestions on choice of responsive and material design frameworks? I tried to use cljs-react-material-ui "0.2.17" but found it to be not responsive

I meant using this in re-frame

has anybody used cljsjs/d3 with advanced compilation? Some of my graphics have different behaviors when compared to simple or no optimizations, but there are no errors at compilation or in the console. Not sure where to start with troubleshooting

d3 doesn’t go through advanced compilation

I have seen Closure do weird stuff with more involved math ops written in ClojureScript due to bugs in order of evaluation

interesting — order of eval is different between cljs and js?

nothing to do with ClojureScript

advanced compilation

and ClojureScript goes through it

that is you can replicate the problem by writing JavaScript by hand that exhibits the problem

so you’re saying I should look at google closure math operations? I get your point that d3 doesn’t go through advanced comp, so I imagine it has something to do with some numerical computation

I encountered this when I implemented Murmur3 hashing

yes if your ClojureScript/JavaScript has a lot numerical stuff and it goes through advanced optimization

hola, quick question, can I use cljs 1.9 with clj 1.8 or is necessary the alpha version?

I also saw this when I implemented https://swannodette.github.io/2013/06/10/porting-notchs-minecraft-demo-to-clojurescript

@vinnyataide: you can use clj 1.8 - that’s the expressed dep

clj 1.9 also happens to work

@dnolen thanks

thanks @dnolen

@ethangracer: it’s super annoying

I would look to isolate the actual computation and verify that the results look the same under both compilation modes

you’ll get no argument from me! good thought on that approach, i’ll give that a go. crazy that closure is removing necessary parens

then again, dead code algorithms are a pain

@dnolen: No worries, yes I think it’s sorted.

Just took a little code spelunking.

@ethangracer: there is a small probability that the d3 externs being provided by cljsjs may not be complete.

And that might also explain things being broken under advanced compilation.

@rohit: thanks, it does seem like d3 is working but the translation and scale attributes are being set improperly

if I can pin it down I’ll post here but it remains elusive

@ethangracer: sure. that’d be great. if you suspect that its an extern issue, you could try setting the :pseudo-names compiler option. https://github.com/clojure/clojurescript/wiki/Compiler-Options#pseudo-names

assuming that its not something deeper

@rohit I’m not getting any compilation errors on d3 functions, just some for using this-as

@ethangracer: ah ok.

Hey guys, what do you use for testing cljs app built on top of reagent/re-frame? I'm pretty new to (frontend) testing in general, and my mentor who works in JS suggests to take a look at lint, code coverage, jasmine, he also mentions something like mocking the api response and etc.

Is there a good testing guide/tutorial for clojurescript cover most of those stuffs?

@rohit @dnolen turns out a change from (.-prop obj) to (aget obj “prop”) fixed the discrepancy

@ethangracer: goog.object/get is recommended over aget

that aget works is just a quirk of how we compile it

in anycase that sounds like an extern problem

@dnolen good to know, thanks. if we define our own properties on a plain javascript map, do we have to declare those properties as externs so they aren’t renamed?

no

if you are treating an object as a map don’t use property access

use goog.object

got it, thanks

property access is really only for things which can be optimized or foreign libraries which cannot go through optimization

does anyone know how to include foreign libs with lein-doo?

i'm bashing my head against a dynamism problem

i need to save a function name or symbol in some json, and then read it back out later and call that function

everything i've seen suggests that you can't do that without serious hacks in cljs, which, fine

any ideas about a workaround? is there a way i can refer to the compiler-munged name in my code?

it's just a cache, so i could live with the saved symbols not working after a recompile

i could also, i suppose, export all the functions i plan on calling this way, which at least keeps their names the same, if that would help

if i'm going to end up with a dispatch table, any ideas on some macro design that would make that less gross?

i thought maybe i could do something with (var ...), because it says it gives compile-time metadata, but i guess that's not actually what i'm looking for