This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-08-08
Channels
- # announcements (43)
- # architecture (4)
- # beginners (115)
- # calva (6)
- # cider (4)
- # circleci (4)
- # clara (3)
- # clj-kondo (6)
- # cljs-dev (10)
- # cljsrn (1)
- # clojars (1)
- # clojure (108)
- # clojure-boston (1)
- # clojure-dev (4)
- # clojure-europe (5)
- # clojure-italy (6)
- # clojure-nl (13)
- # clojure-uk (17)
- # clojurescript (47)
- # core-async (2)
- # cursive (13)
- # data-science (1)
- # datavis (15)
- # datomic (12)
- # graphql (5)
- # juxt (10)
- # kaocha (20)
- # lumo (1)
- # off-topic (27)
- # pedestal (4)
- # reitit (2)
- # shadow-cljs (115)
- # spacemacs (4)
- # sql (74)
- # tools-deps (79)
- # vim (15)
- # xtdb (2)
@thheller you told me shadow-cljs now works with powershell (i didn't check that). But i don't have the cli tools for powershell anymore and it still works. Are you first checking the regular cmd path ?
no it isn't checking anything, it just directly executes the powershell cmd (assuming Windows and using deps.edn)
https://github.com/thheller/shadow-cljs/blob/master/src/main/shadow/cljs/npm/cli.cljs#L411-L414
I'm not sure if it's my side or shadow's. It seems that on react-native with shadow version 2.8.41 or later sometimes failes to spit big chunk of the .js files. This happens on mac and on our ci build, but on my local linux, the js files are filled with correct data (not unlikley due to cache-ing). The error is goog is not defined, but I cant imagine what causes half of the file's data to go missing.
here's from mac
cat tests/tests.first_test.js
goog.provide('tests.first_test');
goog.require('cljs.core');
test("Adds 1 + 2 to equal 3",(function (){
return expect(((1) + (2))).toBe((3));
}));
and here is from (likely) cached linux
var $CLJS = require("./cljs_env");
var $jscomp = $CLJS.$jscomp;
require("./cljs.core.js");
var module$shadow_js_shim_module$react=$CLJS.module$shadow_js_shim_module$react || ($CLJS.module$shadow_js_shim_module$react = {});
var clojure=$CLJS.clojure || ($CLJS.clojure = {});
var cljs=$CLJS.cljs || ($CLJS.cljs = {});
var shadow=$CLJS.shadow || ($CLJS.shadow = {});
var goog=$CLJS.goog || ($CLJS.goog = {});
var reagent=$CLJS.reagent || ($CLJS.reagent = {});
var app=$ || ($ = {});
var taoensso=$CLJS.taoensso || ($CLJS.taoensso = {});
var module$shadow_js_shim_module$create_react_class=$CLJS.module$shadow_js_shim_module$create_react_class || ($CLJS.module$shadow_js_shim_module$create_react_class = {});
var tests=$CLJS.tests || ($CLJS.tests = {});
var module$shadow_js_shim_module$react_navigation=$CLJS.module$shadow_js_shim_module$react_navigation || ($CLJS.module$shadow_js_shim_module$react_navigation = {});
$CLJS.SHADOW_ENV.setLoaded("tests.first_test.js");
goog.provide('tests.first_test');
goog.require('cljs.core');
test("Adds 1 + 2 to equal 3",(function (){
return expect(((1) + (2))).toBe((3));
}));
module.exports = tests.first_test;
//# sourceMappingURL=tests.first_test.js.map
@hlolli not sure which truncation you are talking about? the output you showed is "old". that is not the current output format
yes that's right, it's old, after nuke-ing the lockfile and node_modules, I can reproduce it on mac and linux.
index.js
require should be the same but depending on what you were doing it maybe changed?
for example "jest --verbose tests/*" where
"testMatch": [
"**/*+(_test).js"
]
is my matcherwe were doing
import './app/shadow.cljs.devtools.client.react_native';
import { init } from './app/app.core';
init();
so we were using it wrong.yes, I knew about the index file, since it worked, we didn't change it. But I'll change it now 🙂
and the "supporting" files are only there because otherwise metro
throws an exception when an error is thrown in the app
if you want to run tests with jest I'd suggest creating a secondary :npm-module
build
I thought I would poke around on my nrepl issue and ran into an issue following the CONTRIBUTING.md, is it out of date?
lein with-profiles +cljs repl
Error loading shadow.cljs.devtools.server.nrepl: Syntax error compiling at (shadow/cljs/devtools/server/nrepl.clj:1:1).
Error loading shadow.cljs.devtools.server.nrepl: Syntax error compiling at (shadow/cljs/devtools/server/nrepl.clj:1:1).
Error loading shadow.cljs.devtools.server.nrepl: Syntax error compiling at (shadow/cljs/devtools/server/nrepl.clj:1:1).
Syntax error compiling var at (/private/var/folders/9q/s674cplx7qv122xbwcchw3jm0000gn/T/form-init6039849328054616621.clj:1:10151).
Unable to resolve var: shadow.cljs.devtools.server.nrepl/cljs-load-file in this context
Full report at:
/var/folders/9q/s674cplx7qv122xbwcchw3jm0000gn/T/clojure-2400420031541069613.edn
Subprocess failed
REPL server launch timed out.
Error encountered performing task 'repl' with profile(s): 'base,system,user,provided,dev,cljs'
REPL server launch timed out.
I'm trying out react native + shadow-cljs, and I've managed to turn off live reload for the mobile, but do you know how to do it for expo web?
lein -v
Leiningen 2.9.1 on Java 1.8.0_144 Java HotSpot(TM) 64-Bit Server VM
all right, thanks. it seems like shadow-cljs will work great with it -- the cljs-reload is super fast, sadly after expo (or metro?) is done "compiling" it reloads the whole page, resetting all state x)
Is there any way to set optimizations to :none
for {:js-options {:js-provider :shadow}}
? Debugging with source maps is PITA.
Found this in a seemingly relevant context:
;; :whitespace or :simple work but some patterns really require the DCE done by :simple
;; eg some conditional imports done by react&friends
So apparently the answer is no. Oh well.yeah :simple
is a must but you can use {:source-map false :pretty-print true :variable-renaming :off}
Hmm. Do I just put those right in :js-options
?
I'm trying to debug a nice library called react-beautiful-dnd
. Not sure why, but it seems that the source maps are not aligned with the source code itself - breakpoints are set on different lines, and when they hit I get a completely different context from what I'd expect. I'll try cleaning everything and rebuilding.
It seems that apart from the line numbers, the names are also off. There can be a variable x
with some particular content but in the Scope panel its content resides within y
. Whereas y
could not possibly have such a value. But it may be an issue with V8 (I think?) optimizing some variables away. It basically removes some of the variables completely, and you cannot disable it. Drives me nuts.
if you have something reproducible I can take a look. I got some experience debugging weird JS code 😉
Thank you for the offer, I appreciate it. Beware though - I might just follow up on it if I get really stuck. 🙂
Oh... that would explain it. Check out this minified JS:
var _action$payload = action.payload;
state = _action$payload.critical;
action = _action$payload.dimensions;
state
and action
have been used before but now a piece of code const {critical, dimensions} = action.payload;
has been turned into that abomination with variable reuse.When const {critical, dimensions} = action.payload
is represented as is, the Scope panel should correctly display variables named critical
and dimensions
. However, the above code is compiled into that snippet with var _action$payload
which reuses variables. Because of that, the Scope panel now displays the value of action.payload.critical
as belonging to the state
variable. Of course, it is correct from the POV of the compiled code. But in this case, I can just throw away the original source code since it can't help me at all because of all the renaming and reuse.
I wonder - is there a way to have only DCE optimization to avoid all those issues with reuse and code shuffling in general?
Here's the SSCCE: https://github.com/p-himik/shadow-cljs-optimizations-test
After you compile it with npm ci && shadow-cljs compile main
, check the file at public/js/cljs-runtime/module$node_modules$react_beautiful_dnd$dist$react_beautiful_dnd_cjs.js
and look for INITIAL_PUBLISH must come after a IDLE phase
. Compare the following few lines to the code after the same string at node_modules/react-beautiful-dnd/src/state/reducer.js
.
Note that this is not an error per se. It's just the way the CLJS compiler reuses the variables that's annoying and makes the debugging much harder due to source maps not working in this case.
can you describe what the actual problem is though? not sure what I'm supposed to be looking for exactly?
My message with the link is basically the readme in this case. 🙂
If you mean the actual problem that I was trying to debug - that was not my intention to show it in this case. The issue is rather domain-specific and basically results from me trying to hammer a square peg into a round hole simply because there are no rounds pegs available. And I think I got it in the end - it works for now.
The intention of the repo is to show how the optimizations make it much harder to debug anything for no apparent reason, even with those :js-options
. Since between us you're the the only one with the relevant domain knowledge, I thought that maybe this behavior can somehow be changed, if that makes sense.
OK, maybe I described it wrong.
The essence of the problem is that code like const {a} = b;
is compiled into something like variable_used_before = b.a;
instead of just const a = b.a;
. The variable reuse is what makes it hard to debug since the old value is now hidden and the name how has wrong semantics.
But if I understand it correctly, that's probably an issue with the CLJS compiler itself - I have no idea if Shadow-CLJS can even do anything in this case.
node_modules\react-beautiful-dnd\dist\react-beautiful-dnd.cjs.js
this is the file shadow-cljs uses in the first place
Ah, right, thanks - I mixed up Google Closure and CLJS compilers.
I guess in an ideal world the original JS files would not be changed at all for the development build, except maybe for DCE. Because e.g. the code like const {a} = b;
can already be run in the modern browsers, which should probably be used for the main development workflow anyway.
> you are not saying WHY you are looking at that code
Because it's not relevant to the issue with the compiler itself. 🙂 "Give a man a fish" and all that.
> optimized code isn't intended to be readable
I agree. But because we have to run some optimizations even during development, it makes debugging hard - that's my whole point.
> node_modules\react-beautiful-dnd\dist\react-beautiful-dnd.cjs.js
this is the file shadow-cljs uses in the first place
Oh... OK. Well const
itself doesn't change anything thought - that file still got the naming correct. E.g. the relevant section has critical = _action$payload.critical
which in the compiled version looks like state = _action$payload.critical
. Again - there is no error here of any kind. It just makes it much harder to understand what's going on during debugging, regardless of the reason why someone is trying to understand what's going on.
but given that you are only doing this for debugging it probably doesn't matter too much
Awesome! Yes, I don't think loading extra code makes any significant difference for the development process. But it may differ for someone, so maybe making it configurable would make sense.
But what about the "some patterns really require the DCE done by :simple" comment?
Is there no way to somehow combine :whitespace
and DCE or even have just DCE without any other optimizations?
Hmm if I comment out the :nrepl-middleware
in the :cljs
profile it starts up
Ah, also if I change the ..server.nrepl
to ..server.nrepl04
in the :nrepl-middleware
map
@saikyun how do you turn off the expo-process?
failed to use latest expo with latest shadow-cljs
error SHA-1 for file /home/tianshu/sandbox/expo-proj/awesome/app/rn-input.android.is (/home/tianshu/sandbox/expo-proj/awesome/app/rn-input.android.is) is not computed. Run CLI with --verbose flag for more details.
node v10.16.0
shadow-cljs 2.8.45
expo 34.0.1@doglooksgood not sure what that is about. it is not an error from shadow-cljs
Thanks :)