This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2022-07-19
Channels
- # announcements (4)
- # aws (9)
- # babashka (1)
- # beginners (41)
- # cider (13)
- # clojure (45)
- # clojure-europe (16)
- # clojure-hungary (3)
- # clojure-norway (6)
- # clojure-uk (6)
- # clojurescript (14)
- # clr (3)
- # css (1)
- # datalevin (2)
- # datomic (2)
- # fulcro (8)
- # introduce-yourself (6)
- # jobs (3)
- # malli (2)
- # nbb (49)
- # off-topic (3)
- # reitit (23)
- # shadow-cljs (36)
- # tools-deps (2)
Hello there! Just started my first clojurescript project!
I see that for js npm dependencies the usage is pretty straightforward (just a require in the ns), but what about asset related dependencies like normalize.css? How do I link it in my index.html? Is there any kind of preprocessor?
shadow-cljs does not (yet) support any CSS processing so you need to use external tools (eg. postcss) for that
Hi. I have some issues with hot reloading. Tested it with custom var e.g. js/Date.now. When I change some text in my reagent component, shadow recompiles but I do not see my changed text within the component, but the component is re-rendered and the timestamp changes. Please look at the screenshot
can't see how you are using this so can't help much. maybe this helps https://code.thheller.com/blog/shadow-cljs/2019/08/25/hot-reload-in-clojurescript.html, lists a few common gotchas
I have read "list with few common gotchas" and tried them. But I still can't figure it out. I have attached my app lifecycle. It's simple but I can't make hot reloading work fully. reagent triggers rerender. timestamp is changing but other component text changes only after full page reload
so since you are deref'ing the current route there I assume that the function is in there
and that is the problem. you put the function in the atom in some place, which remains the function it was when it was put in
that would be the Holding Code references in State described in the blog post
Does anyone use phosphor-react with shadow-cljs? We use it, but since there’s no tree-shaking in shadow, the package gets fully imported
i’ve tried phosphor-react/icons/IconName :default IconName but no luck
get error that file couldnt be found
i scanned through similar questions in the slack and the packages have alias (@) imports, wonder if that makes a difference
either in your node_modules/phosphor-react folder or online via https://unpkg.com/browse/[email protected]/ for example
The required JS dependency "phosphor-react/dist/icons/Info" is not available,just put in the entire filename including the extension(s). thats all it is, looking for a file in the package
wooo, phosphor-react/dist/icons/Info.esm.js works
thank you
Hi Shadow channel! We’re building a re-frame app with Shadow and wanted to add an image to a React component. In JS-land, I believe you can directly import the image, using, for example:
import logo from '../logo.svg';(js/require "./../../resources/img.png")
https://clojurians.slack.com/archives/C6N245JGG/p1571922982374700I generally just put images and stuff into my public folder and reference them by name, so just [:img {:src "/path/to/file.png"}] or whatever. no require or anything else to find the image.
Cool! Will that include the images at build time, or do they need to be served from a Backend to be accessible?
Gotcha. I’m definitely not an expert in JS/React land.
When someone does this statement in JS from a create-react-app project, import logo from '../logo.svg';, does that not bundle the image into the build?
I don’t have a strong enough mental model of how the image asset gets included, and I’m not sure where to look to build that model. I’m reading https://create-react-app.dev/docs/adding-images-fonts-and-files/ for trying to build my mental model. What I understood was that Images do get directly included into the build. But is that just unique to how create-react-app works (and shadow works differently)?
in case of svc it might get inlined but most of the time this just gives you a path where to find that logo
Gotcha
for your own code it works just as well to just keep the file in that place from the start 😉
Gotcha. So what I’m taking away is that being able to import non-SVG image assets directly is a feature of how Webpack bundles Javascript modules, and it relocates them after bundling. In contrast, importing svgs may just directly inline the image, and that’s also a Webpack feature.
