Clojurians Log v2

Hello. I am using material UI, when use project.clj from luminus template, everything works fine. But I switch to shdow-cljs cli, some component style is not working well. This branch is using lein: https://github.com/kimim/vorstellung and this branch uses shadow-cljs https://github.com/kimim/vorstellung/tree/shadow . When click Date Picker or DataGrid, the menu works wrongly.

Hey guys. I have setup a shadow-cljs project with deps.edn. When I run the

clj -A:shadow-cljs-dev watch app

:shadow-cljs-dev
  {:extra-deps {thheller/shadow-cljs {:mvn/version "RELEASE"}
                re-frame/re-frame {:mvn/version "1.1.2"}
                binaryage/devtools {:mvn/version "1.0.2"}
                re-frisk/re-frisk {:mvn/version "1.3.5" :exclusions [com.google.code.findbugs/jsr305 
                                                                     re-frame/re-frame]}}
   :main-opts ["-m" "shadow.cljs.devtools.cli"]}

@kimi.im what do you mean by "shadow-cljs cli"? you should still start the server parts using lein?

@shakof91 ctrl+z sends the process to the background and keeps it running, ctrl+c stops it.

no matter server is started by Leon or clj, the result is the same. I’ve compared with both.

I guess there is some thing I did wrong with shadow-cljs. The lein integrated way works fine.

do you get a 404 on some css or so?

css is correctly loaded.

Type “fg” will get it back

It has the same behaviour. The page is stuck at "shadow-cljs - reconnecting ..." instead of showing a blank page after I run "ctrl + c". This is what I see in the console. In addition a lot of sourcemap warning spam comes too.

shadow.cljs.devtools.client.websocket.js:sourcemap:4 WebSocket connection to '<ws://localhost:9630/api/remote-relay?server-token=db38e25d-695e-4f5b-ac50-6e8c80783d8a>' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
shadow$cljs$devtools$client$websocket$start @ shadow.cljs.devtools.client.websocket.js:sourcemap:4
eval @ shadow.cljs.devtools.client.shared.js:sourcemap:467
shadow$cljs$devtools$client$shared$init_runtime_BANG_ @ shadow.cljs.devtools.client.shared.js:sourcemap:929
eval @ shadow.cljs.devtools.client.browser.js:sourcemap:952
goog.globalEval @ app.js:577
env.evalLoad @ app.js:1670
(anonymous) @ app.js:1945
shadow.cljs.devtools.client.shared.js:sourcemap:651 shadow-cljs - remote-error Event {isTrusted: true, type: "error", target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}

I don't understand your issue. what do you expect?

the server started by lein is serving the content. shadow-cljs just produces the javascript and it needs to be running for that JS to connect back

don't start 2 shadow-cljs instances for the project or you will get a mess

My expectation is that I can stop the watch and restart it later. So maybe I am not understanding how to start and stop it. I thought it was just to stop it with ctrl + c and run it again with "clj -A:shadow-cljs-dev watch app" again.

I am also expecting that the websocket will stop when I run ctrl + c so that the browser doesnt show my app anymore. I have disabled caching in the browser as well so I would expect that the app wouldn't linger when I go to localhost:8700 after I have stopped it. :x

what commands do you run exactly? I mean to me it sounds like you just have 2 instances running

first check there is actually only one instance running. you can check how many instances via jps or so

{
  "name": "bec-core",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "watch-app": "clj -A:shadow-cljs-dev watch app",
    "release-app": "clj -A:shadow-cljs-prod release app",
    "cljs-repl": "clj -A:shadow-cljs-dev cljs-repl app"
  },
  "dependencies": {
    "react": "16.13.0",
    "react-dom": "16.13.0"
  }
}

npm run watch-app

and what do you get?

there should be a "server shutdown" message

shako$ npm run watch-app

> bec-core@0.0.1 watch-app
> clj -A:shadow-cljs-dev watch app

shadow-cljs - HTTP server available at <http://localhost:8710>
shadow-cljs - server version: 2.11.8 running at <http://localhost:9630>
shadow-cljs - nREPL server started on port 52471
shadow-cljs - watching build :app
[:app] Configuring build.
[:app] Compiling ...
[:app] Build completed. (268 files, 0 compiled, 0 warnings, 5.22s)
Worker shutdown.

thats just the worker not the server

try jps to see if there is a running java process

shako$ jps
7582 Jps
shako$ jps -l
7600 jdk.jcmd/sun.tools.jps.Jps

I ran the jps command in the windows terminal instead of the WSL2 ubuntu terminal:

C:>jps
12576 RemoteMavenServer36
18528 Jps
17028 RemoteMavenServer36
3204 RemoteMavenServer36
5796 RemoteMavenServer36
6472 RemoteMavenServer36
12908 RemoteMavenServer36
14380 RemoteMavenServer36
12592 RemoteMavenServer36
16336
3408 RemoteMavenServer36
8592 RemoteMavenServer36
11316 RemoteMavenServer36
10552 RemoteMavenServer36
3672 RemoteMavenServer36
13212 RemoteMavenServer36

THis is the culprit huh? 😄

C:>jps -l
12576 org.jetbrains.idea.maven.server.RemoteMavenServer36
17028 org.jetbrains.idea.maven.server.RemoteMavenServer36
3204 org.jetbrains.idea.maven.server.RemoteMavenServer36
5796 org.jetbrains.idea.maven.server.RemoteMavenServer36
6472 org.jetbrains.idea.maven.server.RemoteMavenServer36
12908 org.jetbrains.idea.maven.server.RemoteMavenServer36
14380 org.jetbrains.idea.maven.server.RemoteMavenServer36
12592 org.jetbrains.idea.maven.server.RemoteMavenServer36
16336
3408 org.jetbrains.idea.maven.server.RemoteMavenServer36
8592 org.jetbrains.idea.maven.server.RemoteMavenServer36
11316 org.jetbrains.idea.maven.server.RemoteMavenServer36
22100 jdk.jcmd/sun.tools.jps.Jps
10552 org.jetbrains.idea.maven.server.RemoteMavenServer36
3672 org.jetbrains.idea.maven.server.RemoteMavenServer36
13212 org.jetbrains.idea.maven.server.RemoteMavenServer36

Looks like intellij processes, right?

might be the 16336?

check with regular ps or so

you are using npm and clj and either of those may be causing the server to linger. I can't say. I can only help with actual running shadow-cljs commands

any reason you are not using the shadow-cljs command?

We are trying to use deps.edn for the dependancy management and the recommended way was to use the clj -A:alias watch app command to run shadow-cljs through the shadow-cljs.devtools.cli.

no that isn't recommended anywhere

you can still use deps.edn to manage dependencies. that is totally fine.

https://shadow-cljs.github.io/docs/UsersGuide.html#deps-edn

Running with clj directly.

{:paths [...]
 :deps {...}
 :aliases
 {:shadow-cljs
  {:extra-deps {thheller/shadow-cljs {:mvn/version <latest>}}
   :main-opts ["-m" "shadow.cljs.devtools.cli"]}}}
clj -A:shadow-cljs watch app

that is meant as an example that you CAN run with clj directly. doesn't mean you should.

it is completely fine to do this. I just can't help you with debugging issues then 😛

you should run the regular shadow-cljs watch app and so on

I guess I should clarify that in the docs

How can I setup dev dependancies and prod dependancies when using deps.edn and shadow-cljs installed globally? 😮

you don't have to in CLJS

just keep everything on the classpath all the time

I am sorry I am really noob at this. What exactly do you mean? Just ignore deps.edn and let shadow-cljs handle the deps? This is how I have set it up: deps.edn

{:paths ["src" "resources" "target"]

 :deps
 {org.clojure/clojure {:mvn/version "1.10.1"}}

 :aliases
 {:cljs
  {:extra-deps {thheller/shadow-cljs {:mvn/version "RELEASE"}
                re-frame/re-frame {:mvn/version "1.1.2"}
                binaryage/devtools {:mvn/version "1.0.2"}
                re-frisk/re-frisk {:mvn/version "1.3.5" :exclusions [com.google.code.findbugs/jsr305
                                                                     re-frame/re-frame]}}}}}

{:deps {:aliases [:cljs]}

 :builds
 {:app
  {:target :browser
   :output-dir "resources/public/js"
   :modules {:app {:entries [bec-core.cljs.core]}}

   :js-options {:js-package-dirs ["node_modules"]}

   :compiler-options {:infer-externs :auto}

   :dev {:closure-defines {goog.DEBUG true}}
   :devtools
   {:before-load bec-core.cljs.core/stop
    :after-load bec-core.cljs.core/start
    :http-root    "resources/public"
    :http-port    8711
    :preloads     [devtools.preload
                   re-frisk.preload]}}}}

$ npx shadow-cljs watch app
shadow-cljs - config: /mnt/c/Users/shako/OneDrive/Documents/GitLab/bec/bec-core/shadow-cljs.edn
shadow-cljs - starting via "clojure"
shadow-cljs - HTTP server available at <http://localhost:8711>
shadow-cljs - server version: 2.11.8 running at <http://localhost:9630>
shadow-cljs - nREPL server started on port 60273
shadow-cljs - watching build :app
[:app] Configuring build.
[:app] Compiling ...
[:app] Build completed. (270 files, 59 compiled, 0 warnings, 24.61s)
^C
$ Worker shutdown.
npx shadow-cljs stop app
shadow-cljs - config: /mnt/c/Users/shako/OneDrive/Documents/GitLab/bec/bec-core/shadow-cljs.edn
shadow-cljs - server not running

just type fg in the terminal? THis waht I tried:

:/mnt/c/bec-core$ fg
-bash: fg: current: no such job
:/mnt/c/bec-core$ npx shadow-cljs fg
shadow-cljs - config: /mnt/c/Users/shako/OneDrive/Documents/GitLab/bec/bec-core/shadow-cljs.edn
shadow-cljs - starting via "clojure"

Invalid action "fg"

you don't need to exclude dev stuff from release. shadow-cljs only includes what you actually require in your code in the build

so it absolutely does not matter if devtools and refrisk are on the classpath for release builds

Ah I understand! Wow that is smart! 😄

you also don't need these

:js-options {:js-package-dirs ["node_modules"]}

   :compiler-options {:infer-externs :auto}

   :dev {:closure-defines {goog.DEBUG true}}

those are already the defaults

I don't have a clue why you can't stop the server via ctrl+c. which OS is this?

which clojure version?

fg only works after you ctrl+z a process. it is not a shadow-cljs command, its a linux thing

I am running on windows 10 in WSL2 ubuntu terminal.

$ clj --help
Version: 1.10.1.561

so if you just run shadow-cljs server and ctrl+c that the process still lingers?

$ npx shadow-cljs server
shadow-cljs - config: /mnt/c/Users/shako/OneDrive/Documents/GitLab/bec/bec-core/shadow-cljs.edn
shadow-cljs - starting via "clojure"
shadow-cljs - HTTP server available at <http://localhost:8712>
shadow-cljs - server version: 2.11.8 running at <http://localhost:9630>
shadow-cljs - nREPL server started on port 50490
^C

Windows terminal result:

C:\bec-core>jps -l
10088 jdk.jcmd/sun.tools.jps.Jps
1980

bec-core$ jps -l
9068 jdk.jcmd/sun.tools.jps.Jps

if you start it in wsl2 then only that matters. the windows side doesn't matter at all.

can't mix them

Alright. All commands are run in WSL2. I don't have clojure installed on windows 10, only in WSL2.

get your system into a state where <http://localhost:8712> serves nothing

Yes, I am trying the best I can. I even rebooted the machine and it still is there :s

ok that is definitely not shadow-cljs then

maybe you have some other server running there or some cache stuff I don't know

My app starts a service worker to register the app. Is it perhaps that which is causing it to not let go?

Yep. Now it behaves as expected! I removed this piece of the code:

(try
    (-> (. js/navigator.serviceWorker (register "/service-worker.js"))
      (.then (fn [] (js/console.log "service worker registered"))))

    (catch js/Object err (js/console.error "Failed to register service worker" err)))

ah you used a service worker ... yeah you shouldn't cache the output of a watch build ever. just disable that in the worker.

Is it possible to output the release version to a different directory than the watch build output? I could then set the service worker to cache the release version only? Or perhaps the right way to do this is to register the service worker in release mode only, using the goog.DEBUG to toggle the registering of the service worker... Not sure what is best to do 😮

One solution for now is to just clear the service-worker cache: inspect -> application -> clear storage

https://shadow-cljs.github.io/docs/UsersGuide.html#_release_specific_vs_development_configuration

:release {:output-dir "somewhere/else"}

Ah! THat is wonderful! Thank you! I understand now. I am sorry for taking so much of your time. I appreciate your help!

Hello @thheller Since your proposition was not seleted, I wonder to know how to do without the convenient Shadow-CLJS's :default on vanilla CLJS. https://clojure.atlassian.net/browse/CLJS-2376

Hasn't that changed since the issue?

(:require ["foo$default" :as x]) will be the default solution but I don't think it is released yet

vs (:require ["foo" :default x]). you can also always do (:require ["foo" :as x]) and then x/default

Oh OK, I thought this issue was merged https://github.com/clojure/clojurescript/commit/f5f9b79f6f446cef768e190971cf67fc78bf5b93 Thanks for your help!

I just test with Krell and this don't works with this RN lib https://github.com/kmorales13/react-native-alarm-clock I'll try with RN Shadow-CJLS and see if it comes from the lib which may be specific.

@thheller So I just tried with Shadow-CLJS and your "reagent-react-native" repo.

(ns <http://test.app|test.app>
  (:require
    [shadow.react-native :refer (render-root)]
    ["react-native" :as rn]
    ["react" :as react]
    [reagent.core :as r]
    ["react-native-alarm-clock" :default AlarmClock]))

(defn create []
  (let [date (.toISOString (js/Date.))]
    (.createAlarm AlarmClock date "Alarm test")))

And I have this error

This lib seems specific right? https://github.com/kmorales13/react-native-alarm-clock/blob/master/src/index.tsx

A little idea @thheller please?

yes it is in master. just not in any official release I think.

I don't have a clue. it might be ["react-native-alarm-clock" :as AlarmClock]?

default exports are tricky sometimes because it also depends on how the library is bundled. looking at the code does not always match what the actual published package uses.

OK, I can see the published package provides 3 versions

How does CLJS do in this case?

CommonJS take predecence?

@thheller I think I have a lead. The CommonJS and module version export this var _default

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _reactNative = require("react-native");

const {
  AlarmClock
} = _reactNative.NativeModules;
var _default = AlarmClock;
exports.default = _default;
//# sourceMappingURL=index.js.map

Hey @thheller could you please explain how shadow-cljs compiles dependencies? Users declare dependencies, you fetch them using aether... and then? How do the .cljc bits make it into the JS source code?

I've been trying to read the source of shadow-cljs but couldn't find where this magic happens

not sure I understand the question

.cljc files are just source code somewhere on the classpath

so if you require the foo.bar somewhere in your code

it'll look for foo/bar.cljs or foo/bar.cljc

then it compiles those. code is in shadow.build.compiler

But how do you acquire the cljc out of the jars? Do the jars contain the raw cljc files?

yes

the files are loaded via (<http://clojure.java.io/resource|clojure.java.io/resource> "foo/bar.cljc")

doesn't matter if its a regular file or in a jar. jvm classloader handles that.

So basically you have maven (aether) fetch the jars (and unpack them?) then collect all the cljc/cljs files and give them to the compiler?

The CLJS compiler can walk into jars?

it doesn't have to. the jvm classloader does.

jars are never unpacked (on disk, happens all in memory only)

Ohh I see, jvm magic! Does the CLJS compiler look for cljs/cljc files on its own or do you have to feed it the files "manually"?

shadow-cljs will load and read them

Awesome, I understand! Thanks a lot!

@thheller looks like http://shadow-cljs.org/ might be down? Not loading for me.

is there a way to get browser tests to pretty-print failures, so that they're not all on one line like this? I'm guessing I would need a custom :ns-runner but beyond that it's hazy...

i think that's the output from @bhauman’s excellent cljs-test-display

Checking that out, thanks for the tip!