Fork me on GitHub
#clojurescript
<
2020-04-05
>
Dulce Zavaleta07:04:31

Hello. I think this question can fit in here. Does anyone use calva for a shadow cljs project with reagent? I've been trying to run the repl for it for days with no success. It can start the app and Jack in but when I run even a (+ 1 1) it complains saying "are you sure you loaded your compiled files" or something like that. Does anyone know the fix for this?

erwin07:04:38

What commands did you use to run it?

Dulce Zavaleta07:04:26

I don't use commands to run the app, I just press F1 and look for the option Jack in, then I select shadow cljs and the project/app name

4
erwin07:04:49

You will have to start shadow-cljs watch … first

thheller07:04:23

@UQQA22QFL well did you load your compiled files?

Dulce Zavaleta08:04:14

Looking at the link, this is exactly what I get as output when trying to eval something. " No application has connected to the REPL server. Make sure your JS environment has loaded your compiled ClojureScript code "

Dulce Zavaleta08:04:53

I saw in some places that running a node repl fixes that, tried that but same output. According to that link, I have to run browser repl? I'm still a newbie with clojure, like 3 months using it maybe haha, so I am not entirely sure what has to be done to accomplish that. If it means opening the main page in browser I do that

thheller08:04:55

what is your build :target?

thheller08:04:40

or your entire config to make it easier?

Dulce Zavaleta08:04:08

builds {:app {:output-dir "/home/candy/landing/js" :asset-path "/js" :compiler-options {:optimizations :none :main landing.core :closure-warnings {:global-this :off} :closure-defines {re-frame.trace/trace-enabled? true day8.re-frame-10x.debug? true day8.re-frame.tracing.trace-enabled? true} :external-config {:devtools/config {:features-to-install [:formatters :hints] :fn-symbol "Fn" :print-config-overrides true}}} :target :browser :modules {:landing {:entries [landing.core]}} :devtools {:after-load landing.core/reload! :loader-mode :eval :http-root "/home/candy/assets/landing" :http-port 3333 :http-handler shadow.http.push-state/handle :preloads [devtools.preload day8.re-frame-10x.preload]}}

thheller08:04:10

ok :http-root "/home/candy/assets/landing" looks incorrect to me

thheller08:04:37

I think you want :http-root "/home/candy/landing"?

thheller08:04:04

what do you get when you open ?

thheller08:04:00

the page you load there must properly load the generated /home/candy/landing/js/landing.js which it can't with that :http-root unless you are routing that differently somehow

thheller08:04:32

note that you must load that by using <script src="/js/landing.js"></script>

thheller08:04:41

getting the paths correct is important

Dulce Zavaleta09:04:07

I get my normal page. It's just that I sync the generated js with a website (by using a separated git repo) and I don't want to upload the source code so I have a different folder for the compiled J's and source code.

thheller09:04:22

well then that is probably your issue?

thheller09:04:05

what do you get in the browser console when you open the page in the browser?

Dulce Zavaleta09:04:05

My index is also in the new repo. Hmm. Does it have to be in same folder as source code? There's no way to keep it separated and make this compiled thing working?

thheller09:04:42

of course its possible but the default assumption is that things are served by the local server

thheller09:04:03

if it is not than all the host settings will be wrong and your client code won't be able to properly connect

thheller09:04:09

until you tell it where it should connect to

thheller09:04:17

that is not the browser console

Dulce Zavaleta21:04:40

do you mean this?

thheller21:04:08

yes. looks like it connected fine?

Spaceman13:04:32

(let [c (js/document.getElementById "img-editing")
               ctx (.getContext c "2d")
               img (js/document.getElementById "segmented")]

           (set! (.-onload img)
                 (do
                   (prn "drawing image")
                   (.beginPath ctx)
                   (.moveTo ctx 20 20)
                   (.lineTo ctx 20 100)
                   (.lineTo ctx 70 100)
                   (set! (.-strokeStyle ctx) "red")
                   (.stroke ctx)

                   (.drawImage ctx img 10 10)
                   )

                 )
   

           )

Spaceman13:04:45

The strokes show up but the image doesn't?

kwrooijen14:04:43

@pshar10 Try changing (do into (fn []

jimmy15:04:57

@pshar10 Are you sure you changed the do to fn? Here is a js fiddle showing the problem it looks like you are running into. https://jsfiddle.net/k736teLn/

Spaceman15:04:01

Yes I in fact did change it. This is what I'm running:

(let [c (js/document.getElementById "img-editing")
               ctx (.getContext c "2d")
               img (js/document.getElementById "segmented")]
           
           (set! (.-onload img)
                 (fn []
                   (prn "drawing image")
                   (.beginPath ctx)
                   (.moveTo ctx 20 20)
                   (.lineTo ctx 20 100)
                   (.lineTo ctx 70 100)
                   (set! (.-strokeStyle ctx) "red")
                   (.stroke ctx)

                   (.drawImage ctx img 50 50)
                   )
                 
                 )
             ;; (prn "image is " img)
             ;; (js/console.log "image is " img)
           )

eccentric J18:04:30

Is there a reference that has a full example of what a cljs try catch form looks like?

Spaceman18:04:59

But the image still doesn’t show

eccentric J18:04:28

If the segmented img tag is already in the dom, maybe it already loaded before the onload listener is being set?

Spaceman19:04:32

But the strokes wouldn’t show then

eccentric J19:04:28

Ok so you're seeing the "drawing image" prn statement then? In this example https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage the image is within the canvas element. Is that the same for yours?

Spaceman21:04:57

Doing this doesn't work either. Even when I plop the img tag within canvas without display:none, it doesn't show up. One would think that it should, right?

eccentric J21:04:57

That's odd, does this codepen work for you? https://codepen.io/jayzawrotny/pen/poJXZwb

Spaceman21:04:03

yes of course

eccentric J21:04:14

Ok, making sure it's not a browser issue. I updated it to include the stroke code which seems to be working. What is the size of the canvas and size of the image?

eccentric J16:04:35

Did you figure out that issue?

James Vickers19:04:04

How do you use a Javascript dependency (as a Node module) from Clojurescript? Trying to use https://github.com/jgraph/mxgraph but I'm confused how. Tried adding [mxgraph 4.1.1] in my project.clj but it says it can't find it, tried adding it to package.json but it doesn't seem to have any effect (I can put a nonexistent version in there and it doesn't complain). How would you normally bring in this module and require it into a namespace? Tried to follow https://clojurescript.org/news/2017-07-12-clojurescript-is-not-an-island-integrating-node-modules but it looks like it's not for lein, or?

eccentric J19:04:23

What cljs build tool are you using?

eccentric J19:04:56

Can you also paste a code sample of your code trying to import those node modules?

James Vickers20:04:04

Using shadow-cljs. I have a namespace with a require like this: (:require [mxgraph :as mx]) and then I try to use it like:

(defn make-graph []
  (mx/mxGraph. [:div]))
the error for that at runtime is: "TypeError: module$node_modules$mxgraph$javascript$dist$build.mxGraph is not a constructor"

James Vickers20:04:54

so maybe I do have the dependency and I'm using it wrong? I was trying to emulate this line from their tutorial: var graph = new mxGraph(container);

eccentric J20:04:08

Try (new (.-mxGraph mx) [:div])

eccentric J20:04:21

Though I'm not sure if the mxGraph constructor will be compatible with a cljs vector. Might need to be #js [:div]

dnolen20:04:24

if you're targeting the browser - if you target Node.js it just works