This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-02-15
Channels
- # announcements (2)
- # aws (3)
- # babashka (2)
- # beginners (100)
- # calva (3)
- # chlorine-clover (22)
- # cider (7)
- # clj-kondo (1)
- # clojure (240)
- # clojure-france (6)
- # clojure-hungary (2)
- # clojure-spec (7)
- # clojure-sweden (3)
- # clojure-uk (19)
- # clojurescript (21)
- # core-typed (8)
- # cryogen (2)
- # cursive (8)
- # data-science (7)
- # datomic (7)
- # duct (7)
- # fulcro (13)
- # keechma (1)
- # luminus (3)
- # malli (3)
- # off-topic (258)
- # pathom (5)
- # reagent (4)
- # shadow-cljs (111)
- # sql (4)
- # tools-deps (12)
- # vim (1)
- # vrac (1)
- # vscode (35)
is it possible to change the red colour that shadow prints in a cider emacs buffer to something else?
It seems that source maps are not used by the browser if I create a release build with :compiler-options {:source-map true}
. Meanwhile, they are used with watch
.
Did I not add some flag?
If anybody using shadow-cljs with the Cursive, how do you connect to cljs watcher repl? Currently i'm calling (shadow.cljs.devtools.api/repl :app)
manually, any better way to do it?
@robert-stuttaford color should be disabled if you are connected over nrepl? otherwise you may (alter-var-root! shadow.build.warnings/*color* (constantly false))
.
seems it's not the warnings, but the top-level status
i tried the alter-var-root, it had no effect
i'm using cider-connect-clj&cljs
to connect to shadow's nrepl service
ok, thanks! i'll dig in cider!
If I use shadow-cljs watch
and trigger an exception in the browser, the stacktrace shows correct CLJS files, and I can open them in the browser.
If I use shadow-cljs release
, the stacktrace shows minified files. Of course, I cannot use shadow-cljs built-in debug server for this (I think), so I use python -m http.server
in the directory with index.html
.
all that matters is that the .map
file is created and that the .js
file has a //# sourceMappingUrl ...
at the bottom
Yes, the .map
is there. And the sourceMappingUrl
is there as well. In fact, the Python server shows that the source map is downloaded by the browser. But it's not used for some reason.
maybe you are somewhere in the code it can't map. don't really know what you are doing
Yes, Chrome shows the CLJS sources there. I just throw an error when I click a button. With the release build, it results in this in the JS console:
Uncaught Error: Button clicked
at main.js:593
at Object.da (react-dom.production.min.js:17)
at Oa (react-dom.production.min.js:18)
at ub (react-dom.production.min.js:18)
at wa (react-dom.production.min.js:18)
at vb (react-dom.production.min.js:20)
at O (react-dom.production.min.js:20)
at P (react-dom.production.min.js:20)
at Mi (react-dom.production.min.js:82)
at ig (react-dom.production.min.js:289)
With the debug build, it results in the correct core.cljs
file being mentioned with the correct line.The app itself is the smallest one created from https://github.com/shadow-cljs/lein-template/tree/master/resources/leiningen/new/shadow_cljs that uses the latest version of shadow-cljs and updated React stuff.
And I'm pretty sure that the source map itself is just fine because: 1. There's no warning about it being malformed 2. I can see the original CLJS files in DevTools but I don't see any requests for them Do you have any idea why the source map is still not used for the stacktraces? Do you need anything from me to aid you?
in release the minified react version is used. react doesn't ship source maps so there is no possibility of mapping it back
But how would React affect my source code?
I just removed React from the equation by just throwing an exception straight in the start
function - same deal.
and closure inlines it so init
no longer exists and just directly throws at the top level
and if init just calls start then closure will inline that so there no longer is a start
That script
tag above works. Meaning, the ^:export
works. Meaning, the core/init
function is not inlined anywhere.
you are misunderstanding how this works. look at the bottom of the JS file how exports are created
I have replaced (start)
with just the exception.
This is what I have in CLJS:
(defn ^:export init []
(throw (js/Error. "Hi there")))
And this is what it ends up as in the compiled JS:
function Xf() {
throw Error("Hi there");
}
what exactly are you looking for? that react error from previously isn't anywhere near what you are looking at now
But that's the whole problem, there's nothing I haven't described. I have the above code. In the debug mode, DevTools matches it with the source map. In the release mode, it does not - that is the problem.
do more stuff .. thats all I can say. add an event listener to body that after the fifth click throws or something
That worked. Well, to some extent - it said that I had an error somewhere deep in cljs.core
. But that's definitely not the case.
The code:
(defn do-bad-stuff [stuff]
(throw (js/Error. stuff)))
(defn ^:export init []
(.setTimeout js/window #(do-bad-stuff "From setTimeout 0") 0)
(.setTimeout js/window #(do-bad-stuff "From setTimeout 100") 100))
So now I have this
(defn do-bad-stuff [delay]
(.setTimeout js/window #(do-bad-stuff (+ delay 1000)) delay)
(throw (js/Error. delay)))
(defn ^:export init []
(do-bad-stuff 0))
compiled as this
var ca = function ca(a) {
window.setTimeout(function () {
var c = a + 1E3;
return ca.a ? ca.a(c) : ca.call(null, c)
}, a);
throw Error(a);
};
function ia() {
return ca(0)
}
and outputting this
Uncaught Error: 0
at ca (main.js:4821)
at Object.ia [as init] (main.js:4825)
at (index):14
So it somehow became worse.A new iteration:
(defn do-bad-stuff [delay]
(.setTimeout js/window
(fn []
(do-bad-stuff (+ delay 1000))
(throw (js/Error. delay)))
delay))
(defn ^:export init []
(do-bad-stuff 0))
var ca = function ca(a) {
return window.setTimeout(function () {
var c = a + 1E3;
ca.a ? ca.a(c) : ca.call(null, c);
throw Error(a);
}, a)
};
function ia() {
return ca(0)
}
Uncaught Error: 0
at core.cljs:10374
@nxtk that is currently the only way. you can create a custom REPL command and bind it to a key to make it "easier"
Hi, I’m implementing a reframe app with highcharts.js, one the options the library has is to show a message when there are no data to draw, https://api.highcharts.com/highcharts/noData, but for it to works it need to include a js file, the file is inside the npm module (highcharts/modules/no-data-to-display.js), righ now I’m requiring
["highcharts/highstock" :as Highcharts]
["highcharts-react-official" :default HighchartsReact]
and it works fine, but without the no data label, how should I include this file?when I include the name as
["highcharts/module/no-data-to-display"]
I get
> Compilation failed!
> The required JS dependency “highcharts/module/no-data-to-display” is not available, it was required by “fund_performance/stockchart.cljs”.
>
> Search in:
> /Users/wvelezva/dev/workspace/fund-performance/node_modules
> You probably need to run:
> npm install highcharts/module/no-data-to-display
>
> See: https://shadow-cljs.github.io/docs/UsersGuide.html#npm-install thanks, now I don’t have the message but it doesn’t show the no data message
so, the way I’m including the file is fine?
Since it doesn't complain anymore, it should be fine, yes. > The actual text to display is set in the lang.noData option Did you set the option?
this is all the configuration I’m using
{:credits {:enabled false}
:title ""
:rangeSelector {:buttonPosition {:x -200}} ;;to hide the zoom buttons but letting the input dates visible
:legend {:enabled true}
:lang {:noData "There are no data to display or there are any Fund Selected"}
:noData {:style {:fontWeight "bold"
:fontSize "15px"
:color "#303030"}}
:plotOptions {:series {:showInLegend true
:events {:click #(.log js/console (str "p= " (.. % -point -x) " sn=" (.. % -point -series -name)))}}}
:tooltip {:pointFormat "{series.name}: <b>{point.y:.1f}%</b>"}
:series [{:type "line"
:name "Random data"
:data []}]}
:lang {:noData "There are no data to display or there are any Fund Selected"}
No idea. If you convert this structure to JS recursively (i.e. with something like clj->js
), then it looks fine to me.
Does your data work in a pure JS environment?
Hi @p-himik, sorry for the delay (family calls) 🙂, and thanks for your help, I created this fiddle, locally it also works https://jsfiddle.net/ju5oqme3/
> locally it also works You mean, you got it working after all, so the case is closed?
no, plain js works
Can you create a CLJS project on GitHub that has everything that you need and that looks just like that JS that works? So I could check it out and maybe see what's wrong.
I don’t want to abuse your help, I hope this isn’t too much trouble for you
sorry it take me too long, I’m not used to work with github
An advice about Git - don't push before you check the contents of the commits. If you seen something out of place (like committed compiler cache), just amend the required commit, maybe with interactive rebase. And only then push. This way, it won't end up in the history. Right now, for example, Git had to download almost 10k files because of this. But the actual source code is just a few.
yes, I know, my bad
what was my problem?
I figured it out from the source code of the no-data module, but turns out that there's also documentation for this: https://github.com/highcharts/highcharts#load-highcharts-as-a-commonjs-module
It's not just a require
or import
. The also call the imported function on the Highcharts
object.
You just need the replace the no-data require with this: ["highcharts/modules/no-data-to-display" :as no-data-module]
And call (no-data-module Highcharts)
somewhere at the top level or in init
.
yes, I noticed that but it was complete “chinese” to me
I really know very little about modules, commonjs and the others
I didn’t know it was a function I thought it was some kind of import
Heh, yeah, the proliferation of the ways to require JS stuff in the JS world makes it a swamp I dare not to venture into. That's why most of the time I just look at the compiled output and try to understand what's going on, while also debugging it in the browser.
I don’t know how to thank you!
so this line makes two things
require('highcharts/modules/exporting')(Highcharts)
one is the require
the other is call the “module” function over the Highchart object
module being, exporting or no-display-to-data in my case