This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-02-29
Channels
- # announcements (1)
- # babashka (5)
- # beginners (64)
- # cider (9)
- # circleci (11)
- # clojure (80)
- # clojure-uk (25)
- # clojured (6)
- # clojurescript (35)
- # css (1)
- # cursive (3)
- # datomic (6)
- # fulcro (10)
- # graphql (3)
- # kaocha (2)
- # leiningen (3)
- # lumo (3)
- # malli (10)
- # meander (24)
- # off-topic (17)
- # re-frame (10)
- # reagent (2)
- # ring (1)
- # shadow-cljs (27)
- # spacemacs (3)
- # tree-sitter (3)
silly question: Is it possible to inject a dependency (like we do with lein profile) for a re-frame project with shadow-cljs?
It's the default namespace after cljs/quit
configurable ? I want to back to shadow.user
instead of user
.
@fe.belineb no, only if you use project.clj/deps.edn to manage your dependencies
@doglooksgood that is a function of your tool most likely. nrepl should be restoring the ns you were previously in.
@colinkahn not sure. in which context?
@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.
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.@ben477 not sure what you mean. telling the compiler which function to call after reloading has always been necessary
@thheller Even better, looks like I didn’t do anything wrong then! (I am a shadow-cljs newbie). Thanks for the answer
@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
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.
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';
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.
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...
@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)?
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.
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?
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?
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.
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
it would in theory be possible to implement but that would be a significant amount of work
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.
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?
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.