Shadow-cljs really rocks!!!!

I was able to compile a 16k lines of clojurescript code and make it an npm module, easilly consumable by a react web app

A question about publishing the npm package: is it advised to include the generated js.map files?

@viebel you can but most tools do not read them although I do think that webpack supports it somehow

Thanks @thheller. Does somebody know how webpack makes use of the js.map files?

Hi guys. I have a big react app written on TypeScript. I wanna migrate it to clojurescript using shadow cljs. So basically I’m interested in interop between clojurescript and JavaScript (and vice versa). Is there some examples how to do so?

@denis_krivosheev what kind of interop examples do you need? 1. accessing javascript code from clojurescript 2. accessing npm modules from clojurescript

3. both

The main issue here is using cljs from js files

I read the docs and it suggests to use goog: prefix... and compiler is going to understand that

But I don’t understand how

For now the root of my app is going to be in typescript and I want to use clojurescript from there

And also use some ts from cljs

do you want to integrate clojurescript into your code base?

Yes

There is a video demo that @thheller did

Sounds awesome. Where can I find it?

here it is: https://www.youtube.com/watch?v=BLDX5Twt2zk

Great thanks!

It is a bit old so some of the shadow-cljs commands have changed

I think you need to run shadow-cljs compile npm

My turn to ask for support

I am seeing the following error when running npm watch test

Jul 15, 2018 6:13:41 PM org.xnio.nio.NioXnio <clinit>
INFO: XNIO NIO Implementation Version 3.3.8.Final
shadow-cljs - HTTP server for :test available at 
shadow-cljs - server version: 2.4.5
shadow-cljs - server running at 
shadow-cljs - socket REPL running on port 57924
shadow-cljs - nREPL server running on port 57926
shadow-cljs - watching build :test
[:test] Configuring build.
[:test] Compiling ...
[:test] Build failure:
------ ERROR -------------------------------------------------------------------
 File: jar:file:/home/viebel/.m2/repository/thheller/shadow-cljs/2.4.5/shadow-cljs-2.4.5.jar!/shadow/cljs/devtool
s/client/hud.cljs:1:1
--------------------------------------------------------------------------------

   1 | (ns shadow.cljs.devtools.client.hud
-------^------------------------------------------------------------------------
Invalid :refer, var cljs.core.async/go does not exist
--------------------------------------------------------------------------------
   2 |   (:require
   3 |     [shadow.dom :as dom]
   4 |     [shadow.xhr :as xhr]
   5 |     [shadow.animate :as anim]
--------------------------------------------------------------------------------

npm compile test works fine

here is my shadow-cljs.edn

{:lein true
 :builds {:npm 
            {:target :npm-module
             :output-dir "."}
          :test
            {:target :browser-test
             :test-dir "resources/public/js/test"
             :devtools  {:http-port 8021
                         :http-root "resources/public/js/test"}}}}

anybody can help solving this issue?

Figwheel has an option to start a ring server to serve the frontend. Does shadow have something similar? Couldn't find anything in the guide

https://shadow-cljs.github.io/docs/UsersGuide.html#browser-http-server

When I start shadow-cljs server from cmd-line, it says:

shadow-cljs - Using IP "192.168.1.43" from Interface "en0"

Seems it’s just using the first one from this fn-call: https://github.com/thheller/shadow-cljs/blob/eaa84c584905dbcf97e6fa8f78a6d955d4ac00fd/src/main/shadow/cljs/devtools/api.clj#L666 So maybe it’s not configurable?

@oscar Precisely, there seems to be support only for static file serving, not running a full ring api

Hey guys so I'm trying to use this tool https://github.com/sass/node-sass However this

(:require ["node-sass" :as sass])

(sass/render {:file 'path-to-file'})

is that not how to call these js functions?

@viebel thats an outdated core.async version

@grav its always listening on 0.0.0.0 unless otherwise specified. the fixed IP is also gone for a couple of releases now.

@urbanslug 'path-to-file' thats a symbol in CLJS, must use "path-to-file". ie. double quotes

and you probably need to either use clj->js or #js {:file ...} as node-sass expects a JS object not a CLJS map

@thheller Ah I see. I thought that error was weird. Aren't symbols things that resolve to something?

so strings are double quotes and single quotes are symbols like vars are symbols?

I'm clearly missing something

Yeah I thought it being a cljs map would be an issue

' is quote in CLJS

Ah!

Yeah

hahaha

macro

the syntax highlighting also hinted to that

has anyone used node-sass? I get an interesting error that dirname is not defined basically from https://github.com/sass/node-sass/blob/master/lib/extensions.js#L10 defaultBinaryDir = path.join(__dirname, '..', 'vendor')

are you trying to use node-sass in a :browser build?

ya 🙂

thats not going to work. it relies on libsass which is a native c extension

Yeah it pointed to this in the readme https://github.com/sass/libsass

@thheller you know a way to get this done?

it is not possible

wow

😞

I was calling node-sass via the binary but it ddidn't have code-reload

guess I'll go back to css then

what are you trying to do?

you can use node-sass in node builds just fine. just not in the browser.

I am making a reagent app using shadow cljs

and I wanted to use scss for easily managing css

thats fine. just have to compile the scss on the server and load the compile css

Ok so this is how I'm doing it rn. I have a project cljs file along the following lines:

{...
 scripts: {
  sass: "node-sass ...",
  dev: "shadow-cljs watch app;",
  repl: "shadow-cljs cljs-repl app;"
}}

is this kinda what you mean or are you saying there's a way to configure shadow-cljs in the .edn file?

yes something like that. shadow-cljs has nothing built-in for sass (yet)

also this doesn't reload css after node-sass updates the file

so I have to manually reload and lose state

css reloading should work. assuming you have an absolute path

check if you have a <link rel="stylesheet" href="/absolute/path.css">

if thats not using an absolute path it will not be live reloaded

Ah I have "./css/style.css"

but an absolute path makes it brittle like it means I have to change that for prod

relative paths are currently not supported as stated in the docs. no idea how you setup looks like so can't comment on that.

thanks I haven't gone through the docs very well