Fork me on GitHub
#shadow-cljs
<
2020-07-22
>
steveb8n09:07:53

Q: I’m trying to get a react-vega sample working but I’m failing. Does anyone have a really simple example of this in shadow?

thheller11:07:11

@steveb8n whats the problem?

steveb8n11:07:39

I don't know. I get an empty div. Hence the question. I'm pretty sure I'm doing the reagent interop wrong

steveb8n11:07:08

Sample code coming....

steveb8n11:07:31

(:require ["react-vega" :refer [VegaLite Vega]]
          [reagent.core :as r])
(let [spec (clj->js {:width    400
                     :height   200
                     :mark     "bar"
                     :encoding {:x {:field "a"
                                    :type  "ordinal"}
                                :y {:field "b"
                                    :type  "quantitive"}}
                     :data     {:name "table"}})
      data (clj->js {"table" [{"a" "A" "b" 28}
                              {"a" "B" "b" 20}]})]
  [:> VegaLite {:spec spec
                :data data}])

steveb8n11:07:10

package.json…

steveb8n11:07:10

"react-vega": "7.4.0",
"vega-embed": "6.10.0",
"vega": "5.13.0",
"vega-lite": "4.13.1"

steveb8n11:07:51

maybe this question is better in the reagent/re-frame channel?

thheller11:07:20

looks fine to me

steveb8n11:07:52

but I thought I’d ask here first. don’t waste time on it unless you’ve done it before. I’m hoping I’ll find someone who has done this already

steveb8n11:07:18

or tomorrow (getting late here) I’ll wake up and find the problem. it’s always easier in the morning

thheller11:07:51

has "data": [{ "name": "table" }] but you have :data {:name "table"}

thheller11:07:01

maybe it must be in an array?

thheller11:07:33

nvm .. the vegalite also has the obj only

thheller11:07:48

any errors during load maybe?

steveb8n11:07:44

boom! fixed!

steveb8n11:07:13

it wasn’t the data. it was a typo in the word “quantitative”

steveb8n11:07:30

which was in the console errors when I dialled up the verbosity

steveb8n11:07:41

thank you for the redirection!

steveb8n11:07:26

now I can sleep properly 🙂

👍 3
brunex12:07:18

did an update of shadow-cljs to the latest and started to have this error when compiling:

Cannot import Closure files by path. Use either import goog:namespace or goog.require(namespace)

brunex12:07:59

I am using the experiment feature of requiring js files, and had this import on that files:

import * as THREE from 'three';

brunex12:07:16

any suggestions of how I go about this import now?

thheller12:07:40

@brunex need more context. what build :target is this in? which version did you upgrade to? did you make sure to upgrade all dependencies properly in case you are using project.clj or deps.edn?

brunex13:07:04

-        "shadow-cljs": "^2.8.106"
+        "shadow-cljs": "^2.10.17"

brunex13:07:34

:target :browser
:release {:compiler-options  {:optimizations :advanced
                                 :output-feature-set :es8
                                 :source-map true
                                 :pseudo-names true
                                 :cross-chunk-method-motion false}}

brunex13:07:17

I'm using shadow-cljs.edn for :dependencies

brunex14:07:11

and thanks for the help btw

thheller14:07:59

@brunex looks fine and works fine for me too. you should definitely remove :pseudo-names true though. thats for debugging and will make your build huge.

brunex14:07:19

I'm debugging

brunex14:07:36

that's why

brunex14:07:51

but can't get it to compile

thheller14:07:51

do you use deps.edn or project.clj?

brunex14:07:08

Closure compilation failed with 1 errors
--- client/components/simulation/trackball.js:1
Cannot import Closure files by path. Use either import goog:namespace or goog.require(namespace)

brunex14:07:34

I use shadow-cljs.edn

brunex14:07:44

and I do cider-jack-in

brunex14:07:59

what you mean by deps.edn or project.clj?

thheller14:07:14

:lein or :deps in shadow-cljs.edn as some true-ish value

thheller14:07:37

using those to manage dependencies and not just shadow-cljs.edn

thheller14:07:05

and the JS file you are working only has import and export and no other goog.* stuff?

brunex14:07:45

I'm using shadow-cljs.edn and no :lein or :deps keys

brunex14:07:08

:dependencies
 [
  [cljs-drag-n-drop "0.1.0"]
  [cljs-http "0.1.46"]
  [com.stuartsierra/component "0.3.2"]
  [venantius/accountant "0.2.3"]
  [com.cemerick/url "0.1.1"]
  [com.taoensso/timbre "4.8.0"]
  [bidi "2.1.6"]

brunex14:07:27

that is how I do dependecies ...

thheller14:07:29

maybe try deleting the .shadow-cljs/builds dir. could be that the cache is confused about something.

brunex14:07:42

regarding the JS file yes is only a

import * as THREE from 'three';

brunex14:07:47

okay let me try

thheller14:07:58

and there isn't any other goog.* stuff in the file?

brunex14:07:27

same error after deleting .shadow-cljs

brunex14:07:21

it is working perfectly with version 2.8.106

thheller14:07:56

it is working fine for me on 2.10.17 too

brunex14:07:07

hmmm weird

brunex14:07:20

let me stop all REPLs clean everything and try again

thheller14:07:57

I found one cache issue related to classpath-js but thats entirely different from your problem

brunex14:07:49

import * as THREE from 'three';



let TrackballControls = function ( object, domElement ) {
    ....

};

TrackballControls.prototype = Object.create( THREE.EventDispatcher.prototype );
TrackballControls.prototype.constructor = THREE.TrackballControls;

export { TrackballControls };

brunex14:07:59

this is how my JS file looks like

brunex14:07:51

the idea is to use it as something like this on the cljs side (:require ["./trackball.js" :as tb]) (tb/TrackballControls. camera element)

thheller14:07:12

all seems fine to me. is this open source code?

brunex14:07:38

no is a internal project 😕

thheller14:07:13

sorry, not a clue what might be going on there

brunex14:07:35

thanks anyway, will revert to the old version for now

MatD17:07:50

Hi! I'm really trying hard to use an existing macro in my CLJS code, but I get a Error in phase :compilation error. The macro I'm trying to use : https://github.com/escherize/tracks It's written in CLJC so it should work in clojurescript right ? I added the dependency to my shadow-cljs.edn

:dependencies [[tracks "1.0.6"]]
And in the file I'm trying to use it
(ns dummy
  (:require [tracks.core :refer-macros (deftrack)]))
(deftrack calculate-price-for-order
  {:a {:c price}
   :b {:d quantity}}
  (* price quantity))
I also read the post from @thheller (https://code.thheller.com/blog/shadow-cljs/2019/10/12/clojurescript-macros.html) but I'm not sure if this applies to macros from libraries. Following the post, I tried to define a tracks.core namespace in a CLJS file and refer itself, but it doesn't change the error. Any ideas ?

thheller19:07:59

@mathieu.durand it helps if you post the actual error you are getting and not just parts of it. I do not know that library but it looks to me like it might be clojure only

MatD20:07:53

@thheller thats the thing, there is no more to the error. I only get Error in phase :compilation and if I wait 15 sec, I get this

Exception in thread "async-dispatch-7" java.net.SocketException: Socket closed
        at java.base/java.net.SocketOutputStream.socketWrite(SocketOutputStream.java:113)
        at java.base/java.net.SocketOutputStream.write(SocketOutputStream.java:150)
        at java.base/java.io.BufferedOutputStream.flushBuffer(BufferedOutputStream.java:81)
        at java.base/java.io.BufferedOutputStream.flush(BufferedOutputStream.java:142)
        at nrepl.transport$bencode$fn__5881.invoke(transport.clj:109)
        at nrepl.transport.FnTransport.send(transport.clj:28)
        at nrepl.middleware.print$send_nonstreamed.invokeStatic(print.clj:159)
...
and the shadow-cljs process dies...

MatD20:07:28

How can you tell if it's clojure only or clojurescript compatible ?

thheller20:07:42

there is no such thing as ONLY Error in phase :compilation

thheller20:07:46

there must be more info to it?

thheller20:07:52

even if its just a location?

MatD20:07:39

I'm using Calva to start the process... maybe it's hiding the error. Let me try to start it manually

thheller20:07:50

alter-meta! doesn't do anything useful in CLJS

MatD20:07:27

I will PM you the screenshot where I get the error and nothing else