Fork me on GitHub
#clojurescript
<
2016-07-06
>
johanatan00:07:08

@ag: yep. i am curious how CLJS/closure modules will integrate into webpack since it seems these two systems both compete in many of the same ways

ag01:07:01

@johanatan: oh, I think that’s not right though. In my opinion Closure compiler is way more powerful than any compiler/transpiler/bundler available today.

johanatan01:07:20

@ag: I agree but webpack is attempting to do the same sort of things.

ag01:07:46

the only con of Closure compiler that it still needs Java. I wonder if anyone ever attempted to rewrite it completely let’s say in Javascript

johanatan01:07:20

it's a lot of .java files. I doubt it.

jjunior13002:07:01

Hi, First time on slack and clojurians. I'm working on a clojurescript re-frame production-and-consumption_analytics web app; For the purpose of helping to economize resources by analyzing a transaction-history : '(Transaction). Transaction : {(enum :production :consumption) PhysicalQuantity, :timestamp DateTime}. PhysicalQuantity : {:amount Num, :unit Unit}. Unit : [Name {:v Num, :u Dimension}] Name : Str Dimension : [{Fundamental Int} Name] Fundamental : (enum "K" "s" "bit" "dollar" "cd" "kg" "A" "m" "mol")

johanatan03:07:56

@ag: how would you integrate with hapi.js (server-side rendering)?

montanonic04:07:20

JS noob here. Does anyone familiar with Quil know if you can have animations render in the background of a webpage, like this: http://p5js.org/ ?

jonsharratt07:07:01

So literally evaluating the tech stacks to use for a new project and was wondering does anyone know if there is a recommended approach to making om / clojurescript universal / isomorphic?

vikeri08:07:19

Got no answer yesterday, trying again, can I achieve this without having to instantiate a new object? instance? does not work since it makes no difference between goog.date.Date and goog.date.DateTime.

(defn date?
  "Checks if argument is a goog.date.Date"
  [date]
  (= (type (goog.date.Date.)) (type date)))

dominicm09:07:30

@vikeri:

(let [date (goog.date.Date.)
      datet (goog.date.DateTime.)]
  [(= goog.date.Date (type date))
   (= goog.date.Date (type datet))])
returns [true false]

Petrus Theron11:07:09

Is it possible to combine a ClojureScript build with a Clojure uberjar build on CircleCI for deployment to Heroku? When I locally run lein cljsbuild … followed by lein uberjar, it overrides my cljs output.

dnolen11:07:07

@aengelberg: interesting would need more information about that - probably better to discuss in #C07UQ678E re: re-seq perf

denik12:07:53

Trying to call a function in a js/object. This works, but breaks in advanced compilation #(.. iframe -contentWindow -location (reload true))

denik12:07:08

this throws an Illegal invocation error: ((aget iframe "contentWindow" "location" "reload") true)

denik12:07:00

nvmd, got it :) (.reload (aget iframe "contentWindow" "location") true)

aengelberg15:07:45

@dnolen: I investigated it some more, it turned out something was really weird with my planck, the garbage collection seemed messed up and it was eating lots of memory. My use case on the Node REPL worked fine. So I know it's not a cljs issue

dnolen15:07:41

@aengelberg: k that was going to be my first suggestion - test the behavior under different JS VMs

dev-hartmann15:07:48

Hey guys, i'm trying to create a ds3 line Chart from within clojurescript. Does anyone have any pointer. I am failing to .append to an svg Element

exupero15:07:26

Example code?

dev-hartmann17:07:45

@exupero: sure, here it is

(defn create-panel-svg []
  [:svg {:id "line-chart" :width 1000 :height 200}])

(def chart-margins {:top 20 :right 20 :bottom 30 :left 50})

(def days ["Mo" "Di" "Mi" "Do" "Fr" "Sa" "So"])

(defn calc-width [base-width {:keys [left right]}]
  (- base-width left right))

(defn calc-height [base-height {:keys [top bottom]}]
  (- base-height top bottom))

(defn calc-x [width ordinal-domain]
  (-> (js/d3.scale.ordinal)
      (.domain (clj->js ["Mo" "Di" "Mi" "Do" "Fr" "Sa" "So"] ))
      (.rangePoints (clj->js [0 width]))))

(defn calc-y [height]
  (-> (js/d3.scale.linear)
      (.range (clj->js [height 0]))
      (.domain (clj->js [0 500]))))

(defn calculate-axis [axis-def orientation]
  (-> (js/d3.svg.axis)
      (.scale (clj->js axis-def))
      (.orient (clj->js orientation))))

(defn append-to-svg-g [id width height axis margins axis-def]
  (let [translate-val (if (= axis-def :y)
                        (:left margins)
                        (- height (:bottom margins)))]
  (-> (js/d3.select (clj->js [(str "#" id)  width height margins]) )
      (.append (clj->js ["svg:g" ]))
      (.attr (clj->js ["transform" (str "translate(" translate-val "),0")])
      (.call (clj->js axis))))))

(defn create-line-chart [base-width base-height id]
  (let [height (calc-height base-height chart-margins)
        width (calc-width base-width chart-margins)
        y-scale (calc-y height)
        x-scale (calc-x width days)
        y-axis (calculate-axis y-scale "left")
        x-axis (calculate-axis x-scale "bottom")]
    (append-to-svg-g id width height x-axis chart-margins :x)
    (append-to-svg-g id width height y-axis chart-margins :y)))

dev-hartmann17:07:17

@exupero: that's the relevant d3.inc.js part where it throws the error

function d3_selection_creator(name) {
    function create() {
      var document = this.ownerDocument, namespace = this.namespaceURI;
      return namespace === d3_nsXhtml && document.documentElement.namespaceURI === d3_nsXhtml ? document.createElement(name) : document.createElementNS(namespace, name);
    }
    function createNS() {
      return this.ownerDocument.createElementNS(name.space, name.local);

exupero17:07:34

It looks like you’re passing arrays to D3 methods in places I wouldn’t expect. I think you just need (.append “svg:g”). Also seems odd to pass arrays to d3.select and .attr.

dev-hartmann17:07:41

Ok, to be honest that was desperate experimenting. I'll try without 😁

dev-hartmann18:07:38

ok, now it's working, but i don't see anything.. nothing get's rendered and append doesn't seem to append anything

dev-hartmann18:07:12

<svg id="line-chart" width="1000" height="200" data-reactid=".0.0.2.0.1.2.0"></svg> 

dev-hartmann18:07:43

there is no svg g

exupero18:07:58

You need an .enter with some data to render. Take a look at a simple D3 example in plain JS. It translates fairly easily to ClojureScript once you know how to use D3.

dev-hartmann18:07:18

I just wanted to See if it renders the x and y axis

dev-hartmann18:07:57

Didn't know there was a need for Data just yet

exupero18:07:29

.select needs data.

jasonjckn18:07:29

i setup bidi and accountant so that I get URL routing with automatic preventDefault. I'm using react bootstrap pagination widget that uses A tags with onClick events when the pagination 'buttons' are clicked. I'm seeing a navigation event everytime these pagination buttons are clicked, but the href is undefined, so the nagivation event is to the exact same page that we're already on. Which makes it a totally useless navigation event. How can I prevent these events?

dev-hartmann18:07:09

@exupero thanks, will try with test Data

exupero18:07:03

@dev-hartmann: It’s been a while since I’ve used D3, so you’ll have to look at the docs to be sure. I would sort out what you’re doing in plain JS first.

jjfine20:07:47

is there a guide on how to use the http://cljsfiddle.com editor? I've never used paredit or its variants and I'm finding it a bit difficult to figure out.

jjfine20:07:02

ahhh, looks like tabs are important. that helps a lot.

richiardiandrea20:07:38

@jjfine it is actually Parinfer, plenty of examples here: https://shaunlebron.github.io/parinfer/

blance22:07:45

Does anyone know how to bundle css with clojurescript? Like in JS world, one can use webpack to bundle css and js to generate one single js file, which would insert css as string to html page. All they need to do is require the css file.