Fork me on GitHub
Slack Archive

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

2020-02-29

Channels

#shadow-cljs
<
2020-02-29
>
fbeline04:02:05

silly question: Is it possible to inject a dependency (like we do with lein profile) for a re-frame project with shadow-cljs?

tianshu07:02:35

It's the default namespace after cljs/quit configurable ? I want to back to shadow.user instead of user.

thheller09:02:06

@fe.belineb no, only if you use project.clj/deps.edn to manage your dependencies

thheller09:02:30

@doglooksgood that is a function of your tool most likely. nrepl should be restoring the ns you were previously in.

thheller09:02:10

@colinkahn not sure. in which context?

colinkahn19:02:57

@thheller If I'm watching multiple builds and I connect to one via nrepl/piggieback, when I save a file I'll get that compilation error for the connected build.

colinkahn19:02:30

I can see if I can make a minimum repo later

Ben12:02:48

I have been setting up a shadow-cljs project, and hot reloading only worked after I added the last line below in shadow-cljs.edn: 

:builds
  {:app
   {:target :browser
    :modules {:main {:init-fn app/init}}
    :devtools {:after-load app/init}}}}
Is this expected? I can’t help but feel I did something wrong in order for that line to become necessary.

thheller14:02:20

@ben477 not sure what you mean. telling the compiler which function to call after reloading has always been necessary

👍 4
Ben14:02:07

@thheller Even better, looks like I didn’t do anything wrong then! (I am a shadow-cljs newbie). Thanks for the answer

thheller15:02:20

@ben477 FWIW the more "modern" version uses metadata directly on the functions but using the build config is fine too https://shadow-cljs.github.io/docs/UsersGuide.html#_lifecycle_hooks

tekacs23:02:19

I'm using the library [email protected] and finding that pulling in their Timeline component is pulling in their entire @ant-design/icons and @ant-design/icons-svg libraries. They've explicitly refactored in 4.0.0 to ensure that the icons can be tree shaken.

tekacs23:02:16

My import looks like: 

(:require ["antd/es/timeline" :default ATimeline])

(def AItem (.-Item ATimeline))
I'm following their instructions for pulling it in modularly: https://ant.design/docs/react/introduce#Use-modularized-antd And the upstream library's import of icons (inside the distributed version of Timeline.js) looks like this: 
import { LoadingOutlined } from '@ant-design/icons';

thheller09:03:32

it is modularized if you use the babel plugin to do it for you. since shadow-cljs doesn't use babel that doesn't work.

tekacs17:03:37

I don't believe that's correct @thheller -- the manual option is an /alternative/ to the babel plugin (as per those docs), and all of the upstream files are in separate files. Again, note that ant-design 4.0.0 (which just came out) is designed this way -- versions prior to this definitely pulled in all of the icons as a monolithic chunk, but this time around they've split into many independent JS files for this exact reason...

tekacs17:03:51

@ant-design/icons/LoadingOutlined.js is a file, which imports ../lib/icons/LoadingOutlined.js which imports @ant-design/icons-svg/lib/asn/LoadingOutlined.js Is the entire NPM library simply pulled in, even if only a subset of it is used (explicitly, through JS imports)?

thheller17:03:37

shadow-cljs imports whatever it is told to import

thheller17:03:45

it does NOT perform webpack like tree shaking for npm deps

tekacs17:03:24

That makes perfect sense -- in manually following the imports around however (starting from the /inner/ JS file that the above imports), I don't see anything that should pull in the entire library. I'll try using JS tools to follow requires and figure out why this might be pulling in so much.

tekacs17:03:24

I don't suppose there's any way to have shadow expose how or why it decided to pull in certain imports? Or a recommended way of checking that?

tekacs17:03:53

So it looks like, at a guess, this is happening because import { LoadingOutlined } from @ant-design/icons is only able to find the inner icon through @ant-design/icons/index.js and shadow keeps all of the files that are re-exported through there, rather than just the component that was required?

thheller17:03:23

only @ant-design/icons this is relevant yes

👍 4
tekacs19:03:41

I approached this for now by overriding resolution for @ant-design/icons with an override file which re-exports only the used icons. I also filed an issue upstream to ask them to change their imports: https://github.com/ant-design/ant-design/issues/21744 I'll also spend some more time trying to understand: • Whether it's possible to use tsickle to generate externs for TypeScript NPM modules. • Whether there's an easier way to pre-process upstream modules for only the required imports and their dependencies.

thheller21:03:29

FWIW the main issue is that there is no real standard for any of this and that the closure compiler as such doesn't support it

thheller21:03:53

it would in theory be possible to implement but that would be a significant amount of work

tekacs23:02:12

but despite this, the build seems to pull in the entire library for both

tekacs23:02:24

And I've validated (by replacing ATimeline and AItem with stubs) that if I remove the require above, that the build report loses all of the ant-design files, so it's definitely those requires that are pulling in the entire library.

tekacs17:03:53

So it looks like, at a guess, this is happening because import { LoadingOutlined } from @ant-design/icons is only able to find the inner icon through @ant-design/icons/index.js and shadow keeps all of the files that are re-exported through there, rather than just the component that was required?

tekacs19:03:41

I approached this for now by overriding resolution for @ant-design/icons with an override file which re-exports only the used icons. I also filed an issue upstream to ask them to change their imports: https://github.com/ant-design/ant-design/issues/21744 I'll also spend some more time trying to understand: • Whether it's possible to use tsickle to generate externs for TypeScript NPM modules. • Whether there's an easier way to pre-process upstream modules for only the required imports and their dependencies.