This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-09-18
Channels
- # 100-days-of-code (10)
- # announcements (2)
- # aws (3)
- # beginners (120)
- # boot (6)
- # calva (6)
- # cider (22)
- # cljsrn (3)
- # clojure (145)
- # clojure-greece (1)
- # clojure-italy (7)
- # clojure-nl (24)
- # clojure-russia (90)
- # clojure-spec (21)
- # clojure-uk (80)
- # clojurescript (175)
- # core-async (1)
- # datomic (17)
- # emacs (8)
- # ethereum (5)
- # figwheel (1)
- # figwheel-main (140)
- # fulcro (137)
- # jobs (6)
- # jobs-discuss (3)
- # luminus (3)
- # mount (1)
- # nyc (3)
- # off-topic (39)
- # onyx (1)
- # pedestal (1)
- # re-frame (21)
- # reagent (13)
- # shadow-cljs (60)
- # spacemacs (25)
- # test-check (4)
- # tools-deps (14)
- # uncomplicate (3)
- # vim (18)
hello, I wrote some JS code that uses ES6 destructuring (like const {a, b} = someObject
)
it works fine on dev, but when I do a production build this doens't work, when I log a
or b
they come undefined
how can I make so the compilation works right for this case?
actually, it seems to understand the destructuring, but the JS is mangling the variable names
you need to have a read through https://www.spacjer.com/blog/2014/09/12/clojurescript-javascript-interop/
this code:
const {svg, svgWidth, svgHeight, data} = settings
is getting this JS output:
a = c.svg;
var d = ;
b = c.uk;
var e = c.data;
c.svg
and c.data
are correct, but
was supposed to be c.svgWidth
and c.uk
would be c.svgHeight
the compiler mangles every single variable name unless told otherwise. when interfacing between the two environments you must be careful to either annotate the name or use a non-mangled accessor. my favorite is https://github.com/binaryage/cljs-oops
thanks @lwhorton, but I think I'm on a different space here, this is not cljs code, this is js code
yeah, my data gets on JS fine, in my case this is a d3 viz that I wrote on JS, and I require that in a cljs file
when I call the JS code, my JS object contains the right keys
but after destructuring the names get bad (see code above)
kind weird that the names svg
and data
are correct, but svgWidth
and svgHeight
are not (got mangled to Am
and uk
respectively)
im not sure i understand how you are invoking the code, but if you are in a compiled cljs file attempting to use javascript source, the cljs (in the optimized js form) will mangle the names, so it’s in effect going from obj.someVar
to likely obj.a
… but if the js exposes obj.someVar
, you will obviously get undefined
or null
trying to access obj.a
.
you can avoid this with externs files, or string property accessors (the compiler doesnt mangle strings in any case, so obj["someVar"]
will never change), or use the newer ^js typehint
my invocation is correct, I tried logging the data, as here:
export function renderPathomTrace(element, settingsSource) {
const settings = initTrace(element, settingsSource)
const {svg, svgWidth, svgHeight, data} = settings
console.log("set svg", svgWidth, svgHeight);
I know I cna go around using obj["Something"] but then I lose the destructuring properties and have to write a whole lot more
this is kind looking like a bug somewhere, because I should be able to destructure that
this is common ES6 code
nothing special about it
i also have no idea how shadow-cljs handles js->js transpilation (es6/7/8 babel?), if at all, so i don’t think i can help further
yeah, my guess is that there is some compiler-option that I might change to get this to work properly
I know :language-in
and :language-out
, but I tried some combinations without success
ok, I got working with :language-in
and :language-out
as :ecmascript-next
but if someone can clarify if that's the correct way to go, please let me know, I think it's fine in my case because it's a chrome extension, so I can count on a updated JS engine
thanks for hanging with me on this one @lwhorton
@wilkerlucio the JS code will go through :advanced
but there are likely no externs for those names since no externs inference is done for JS code
probably easiest to create a externs/your-build.txt
and add svgWidth
, svgHeight
, svg
one line each
I'm sorry if this is a newbie question, but is it possible to eval some ClojureScript code on the browser console (once I've connected to the server etc.). I find myself jumping back and forth between the REPL (running in IntelliJ) and the Chrome JS console (with CLJS formatting enabled). Would be neat to have it all in one place. How are you working with shadow-cljs and Intellij?
@beders not sure if this is what you mean. For cursive, shadow-cljs, I connect to remote repl localhost 9000. Then evaluate (shadow/nrepl-select :client_build)
this send everything to the browser.
however, any js/console.log ends up in the browser console and I got those nicely formatted clj objects in there as well. Would be nice if wouldn't have to go back and forth to see all the output and explore objects interactively.
I often then tell Chrome to store an object to a global variable (like temp1) which I then access in the REPL via js/temp1
It's ok, but sometimes it would be quicker if in the browser console, I could just type:
shadow.eval('(some clojure-script)');
@thheller cool, in what folder should externs
go? root of the project, source root?
ok, figured at root
yes at the root https://shadow-cljs.github.io/docs/UsersGuide.html#_simplified_externs
Any examples of integrating scss into a shadow-cljs project?
not that I'm aware of. I just run https://github.com/sass/node-sass#command-line-interface
does defspec
work in shadow
? for some reason I don't see my tests reported...
yep, I think I saw it working with cljs-test-runner
but yeah I can have a :main
is there a way to turn off parallel-build
? it’s listed in the user guide as unsupported
the short version is the roman01/cljss library has a race condition on atoms, and i think it can be avoided by turning off parallelism
if you peek here there’s a ton of context to build up in your head, but you can see there’s a suspicious reset-env! cls
followed by a future reference to cls (that’s not a deref):
https://github.com/roman01la/cljss/blob/master/src/cljss/builder.clj#L10-L19