Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2019-10-16

Channels

#shadow-cljs
<
2019-10-16
>
Jon03:10:52

noticed I have so many jar files on my disk... each shadow-cljs is >10M size.

Jon04:10:10

they are installed in node_modules/.

Jon04:10:40

16M x 120 ~= 1.8G

sogaiu04:10:43

the good part is that i know how to get extra disk space when i'm getting lower 🙂

superstructor04:10:54

@thheller We have observed significant performance regressions with console.log in shadow-cljs vs upstream ClojureScript (e.g. figwheel) with large and complex nested data structures. Are you aware of any issues regarding that ? I think it has to include vectors to trigger the issue i.e. heavily nested {:key [ { ... } ...]} and not just {:key {... { ... }}. We are working on a reproducible test case but just wanted to get feedback from you before we work more on that.

superstructor04:10:39

When I say 'performance regressions' it is on the order of milliseconds (upstream cljs) vs 30 seconds (shadow-cljs) for some data structures.

thheller09:10:47

the only difference I can think of is the built-in minimal console formatters support vs using cljs-devtools?

thheller09:10:50

try either using cljs-devtools (just add the dependency) or :devtools {:console-support false}

superstructor16:10:10

Still slow with both, working on trying to pull a reproducible test case out of the app with the issue.

thheller16:10:37

did your figwheel setup have either of those though?

thheller16:10:54

shadow-cljs has one by default, figwheel only if you configure it

thheller16:10:39

that is pretty much the only thing that even has the potential to make console.log slow

Macroz06:10:22

Should :after-load fire for :node-script apps? I get :before-load-async but not :after-load?

thheller09:10:46

@macroz well did you call the callback argument passed to :before-load-async? otherwise it won't proceed.

thheller09:10:24

@jiyinyiyong that is the maven library handling the download of :dependencies. last time I tried changing how that was handled (and downloaded less) you complained about it not working with the chinese firewall and stuff

Jon10:10:59

I still have problem downloading the jar sometimes when I use latest versions which has not been mirrored.

Jon10:10:19

so I use this script to download.

Jon10:10:11

most times it's downloaded from the mirror.

Jon10:10:41

forgot about details of last conversion on that...

Jon10:10:04

but it's true npm packages takes really large disk space. normally 35M for https://github.com/TopixIM/woodenlist

thheller10:10:38

maybe I'll revisit the different download strategy. makes sense given how many people use deps.edn/project.clj anyways

thheller10:10:48

just backed off last time due to china not working

Jon10:10:44

much better now since I use mirror and the script.

thheller09:10:50

compared to how many other node_modules you have installed I guess it is probably fine 🙂

doesntmeananything09:10:40

Does anyone know how to turn on profiling in production with React developer tools using shadow-cljs? Dev environment seems to support that just fine by default, although I don't see an explicit option anywhere. The official doc refers to CRA and Webpack configs in order to enable this option: https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977

Macroz09:10:13

@thheller thanks that did the trick, the callback where the done-call was wasn't called

Macroz09:10:57

I only saw the stop being called

Macroz09:10:18

the NPM library I have doesn't seem to have a suitable teardown for live reload

thheller09:10:34

then it probably doesn't do anything async and you just call (done) directly?

Macroz09:10:02

it starts a server on a port and I had to add a manual wait for it to close to be able to bind again

Macroz09:10:15

so now I wait for the port to be free then call done

thheller09:10:12

@andrey.krasnov.pm seems like :js-options {:resolve {"react-dom" {:target :npm :require "react-dom/profiling"}}} https://shadow-cljs.github.io/docs/UsersGuide.html#js-resolve

doesntmeananything09:10:45

Whoa, thank you very much! Testing now...

johndonne09:10:58

Hi! I'm trying to use basscss in my project. Basically I need to load the css contained in the basscss node module, which I installed with npm. How to do this?

thheller10:10:07

shadow-cljs has no support for CSS so you need a different tool for this

thheller10:10:13

it likely just contains a single .css file

thheller10:10:27

so you could just copy that to wherever your web files live and access it directly

thheller10:10:44

cp node_modules/basscss/whatever.css public/css/bass.css

johndonne10:10:18

OK thanks I will try 🙂

Daniel Leong15:10:45

Is it intended that :repl {:middleware} doesn’t get applied from the global config.edn to every project?

Johan18:10:08

why would shadow-cljs tell me I have a stale client when it compiles without issues?

p-himik18:10:57

You probably have a cache issue. 8 days ago someone asked the same question, you can still find the thread via the search box.

Johan19:10:05

Thanks but I have cleared cache in chrome, disabled caching in the network tab, and I'm using the built in server. Still see this message.

Johan19:10:22

I tried restarting and also deleteing .cpcache and .shadow-cljs folders.

lilactown19:10:23

might be some sort of directory/file mismatch

lilactown19:10:42

make sure your index.html is pulling in the right js file, that you’re building the right build in the right dir, etc.

Johan19:10:01

Yepp, thank you, I was trying to use /workspaces/js/main.js instead of /js/workspaces/main.js. Editing index.html solved it.

jamescroft19:10:02

I've tried all of the different ways of importing npm packages (listed here: https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages) but I keep running into the SHADOW import error .shadow-cljs/builds/renderer/dev/out/cljs-runtime/shadow.js.shim.module$react_dnd_html5_backend.js. I'm trying to import the npm package react-dnd-html5-backend version 9.4.0. I'm importing other packages without problem

thheller19:10:04

whats the actual error? this is just telling you WHAT failed. the WHY is either further up or down depends on the error

jamescroft19:10:49

@thheller This is what I'm seeing. I think it may be because I'm developing an electron app and the target is set to node-library.

jamescroft19:10:08

If I just try and require the package using the electron node then I see this error:

jamescroft19:10:41

So, is it because the package i'm requiring is using an import HTML5Backend and that syntax isn't supported for node-library?

thheller19:10:56

the syntax isn't supported by node

thheller19:10:00

has nothing to do with shadow-cljs

thheller19:10:19

but if you do a browser build that file will be transpiled

thheller19:10:48

:node-library just uses require and lets node resolve it. which seems to fail because of the import

jamescroft19:10:25

ok, understood. I'm not doing a browser build because some of the other packages required are node specific and aren't supported in the browser. I'll add another build and see if I can find a way to separate out the code into a browser package and a node package.

thheller19:10:24

I think node has some experimental support for import and stuff

thheller19:10:32

but I think it is behind some flag

thheller19:10:38

and not sure if you can enable it for electron

lilactown19:10:09

how would you even use react-dnd in node

jamescroft19:10:30

@U4YGF4NGM it's an electron app so it's a weird mix of node and the browser. You have a browser window but you can also use node packages

lilactown19:10:19

I’m not sure how the build process is working but I would ensure that you are only including that library in the build that gets loaded in the electron window, not the backend script

lilactown19:10:23

unless I’m mistaken

thheller20:10:16

@U4YGF4NGM you can use require directly in the "renderer". so in the browser.

jamescroft20:10:56

I'm using a node library (https://github.com/automerge/hypermerge) for the state management. I can require this in the browser

jamescroft20:10:27

Even though it wouldn't work in a regular browser

thheller20:10:42

you can use sort of a hybrid build I guess

lilactown20:10:07

$ npm i react-dnd-html5-backend
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
added 7 packages from 5 contributors and audited 112 packages in 1.068s
found 0 vulnerabilities

$ ls node_modules/react-dnd-html5-backend/dist/cjs
BrowserDetector.js      HTML5Backend.js         NativeDragSources       OffsetUtils.js          getEmptyImage.js        utils
EnterLeaveCounter.js    MonotonicInterpolant.js NativeTypes.js          OptionsReader.js        index.js

thheller20:10:42

so you could use :keep-native-requires true and :keep-as-require #{"the-libs" "that-work"}

thheller20:10:52

but probably best to just have 2 separate builds

lilactown20:10:58

you could also try and import it via the react-dnd-html5-backend/dist/cjs instead

thheller20:10:11

yeah that might also work

jamescroft20:10:43

Thanks for the suggestions. Will explore the two builds and cjs approaches :thumbsup:

jamescroft20:10:24

["react-dnd-html5-backend/dist/cjs" :default HTML5Backend] seems to be working 🎉

👍 4
jimberlage21:10:30

Is there any obvious reason why (js/require "./assets/images/my-image.png") wouldn’t work in a react native project? I’ve checked that the file exists. Getting an error that it “doesn’t exist in the Haste module map”

ghaskins02:10:55

@U4QC052UQ one thing to note/check is that the path is relative to the shadow-cljs :output-dir, not the top-level of your project. Since I typically do something like 

:output-dir "target"
, for me I would typically need “../assets/images…

jimberlage13:10:42

Ah, I didn’t consider doing ... Good call!

jimberlage21:10:59

I’m suspecting that something about the way I’m requiring the image is off

lilactown21:10:17

bizarre broken compiled output in dev mode (haven’t tested release): 

amperity.admin.ui.srv.authn.logout_BANG_ = (function amperity$admin$ui$srv$authn$logout_BANG_(){
if(cljs.core.truth_(amperity.admin.ui.srv.authn.web_auth)){
return .logout(({"clientID": amperity.admin.ui.srv.env.auth0_client_id, "returnTo": amperity.admin.ui.srv.authn.current_root_uri()}));
} else {
return null;
}
});
offending CLJS code: 
(defn logout!
  "Log the user out of Auth0."
  []
  (when web-auth
    (.logout ^js web-auth
             #js {:clientID env/auth0-client-id
                  :returnTo (current-root-uri)})))

lilactown21:10:32

note the .logout(...)

lilactown21:10:18

removing the when fixes it 😵

heefoo06:10:46

what happens if you substitute when with if ?