Fork me on GitHub

anyone else getting this error with the latest shadow?


ignore me, upgrading to [cider/cider-nrepl "0.21.1"] fixed it


Hey, is there anyone use reagnet? Why we can't do this to update Component:

(def content (r/atom 0))
(js/setInterval (fn []
                  (swap! content inc)
                  (println @content)) 1000)

(defn home []
  [:> rn/View {:style (styles :container)}
       [:> rn/Text @content]])
If I try to define atom in global, and there is no update for rn/Text.


If you mean reagent then many people use it. Not sure what you mean by "any update will invalid", the code seems fine to me. Try asking in #reagent


@U2FRKM4TW I have edit my problem. Thanks for your help. I have teseted the case, it really doesn't work correctly to update. I think that because global update or state change will not result in rerender.


I’ve been trying out the react native code-splitting… getting an error

[:app] Build failure:
Module Entry "" was moved out of module ":default-products".
It was moved to ":index" and used by #{:default-products :default-categories}.


this is my config


  {:target :react-native
   :output-dir "app"
   :infer-externs :auto
   :devtools {:autoload true}
   :chunks {:default-products


When I use any third-party tool to compile some resource into something that browser understands, I have to make sure that its output resides within :watch-dir, right? Otherwise it seems that Shadow-CLJS won't know that something has changed and won't notify the browser.


If that's the case, would it make sense to support multiple :watch-dir?


With corresponding entries in :watch-path.


My particular use-case: - Vendored CSS from a third-party library that I sometimes change within my main project's repo - Main SCSS file that gets compiled into CSS inside target - Some CSS from node_modules that I copy with build hooks into target. If I watch just the vendored dir, I won't get any notifications on the changes within target, and vice versa. If I set :watch-dir "." then I get notified but there's no reload since I get specify the correct :watch-path.


can you provide an actual example of paths. I can only guess what you are actually doing since there are so many possible variants


ie. you generate a file into public/css/main.css and that is loaded via /css/main.css served by a webserver with root public


that is the default assumption


no clue what "vendored dir" means to you


This should be close enough to what I have: resources/vendored/a.css -(web server)-> /static/vendored/a.css resources/b.scss -(scss compiler)-> target/dev/b.css -(web server)-> /static/b.css node_modules/lib/c.css -(build hook)-> target/dev/lib/c.css -(web server)-> /static/lib/c.css Does this make sense?


not exactly. what is your webserver serving?


resources or target?


need to know the actual web server root


also define build hook? actual shadow-cljs build hook?


It serves anything that goes to the left of "-(web server)->" above, so both resources and target. There are multiple roots. Yes, an actual shadow-cljs build hook that just copies a bunch of specified files from one location into another.


can you share your actual http config? your paths confuse me


/static checks resources AND target/dev?


it is not a good idea to directly server resources btw


I usually just have ONE public dir and generate everything into public/css or so and everything in there is .gitignore'd


loading 3 different css files is not great performance wise


> can you share your actual http config That's a bunch of CLJ code in terms of yada and integrant - not really usefult, I think. > /static checks resources AND target/dev? Yes! There is a priority and the server just tries to find the first matching path. > it is not a good idea to directly server resources btw In my case, it only contains the stuff the needs to be served, with the exception of SCSS files, so I don't think it's a big deal. > loading 3 different css files is not great performance wise Is there really a noticeable performance difference though? Especially when the files themselves are relatively small, and the browser downloads them in parallel anyway. But you gave me the idea. I started using SCSS just a few days ago. Before that, there was no way to combine multiple CSS files into one. But with SCSS, I think I should be able to do that.


well resources might be but I'm assuming that is packaged as an uberjar at some point?


so if you serve the root directly anyone can load /b.scss if I understand your setup correctly


but yeah I would suggest compiling all css files into one before serving it


Nope. My experience with all kinds of uberjars has been far less than pleasant so I still serve the whole project on Heroku as a Git source tree.


but even then /b.scss is accessible?


I keep my web resources out of uberjars too and just serve regular files


performance wise it isn't a super huge deal to serve 3 files but it also doesn't cost much to combine them first


better gzip, less requests


> but even then /b.scss is accessible? Sure, it should be if I deploy it (haven't deployed yet since I started using SCSS). Yeah, I can see how it can potentially be an issue. > I keep my web resources out of uberjars too and just serve regular files Oh, I don't use uberjars at all. Couldn't make it work on Heroku as it just crashes with OOM during the startup process. Tried uberjar, onejar, capsure. I may mix some names up - has been a minute since I tried that.


Heheh. Tried @importing vendored CSS - worked just fine. But it's not as easy with files from node_modules. E.g. TinyMCE has a whole load of all kinds of files that are loaded dynamically depending on the settings you provided it during runtime. I just thought that maybe I could also get rid of the build hook but apparently that's not the case.


> I usually just have ONE public dir and generate everything into public/css or so and everything in there is .gitignore'd @thheller How do you deal with multiple assets of different kinds? E.g. I have a bunch of JS files (some code that's not available in NPM) - I can probably move that to src and ship it within main.js. But there are also all sorts of images and manifests:

<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
Plus the /favicon.ico and /browserconfig.xml and other stuff like that.


usually just keep everything in the public directory (added to git, except generated files)


and my webserver serves the public directory


Or, so it contains both generated and manually created content. I see, thanks.


yes my public/css and public/js dirs are gitignored and files are just generated into those dirs


everything else is just normal files. I have added image processing with hashing in the past but not every project needs that


To be honest, the more I think about it, the less I like the idea of having generated files outside of target. Extra entry in .gitignore, extra step to prevent IDEA from indexing it. And juxt/kick.alpha supports setting only a single target directory at the moment, so CSS generated from SCSS and JS generated from CLJS all go into one place. Which makes sense IMO.


If you don't have anything against making :watch-dir and :watch-path support vectors (without losing the support for plain strings of course), I'd be happy to create a PR.


Hmm, on the other hand - do I need to watch files that I don't change? I probably don't. So watching just target should be sufficient in my case.


@danielenealwhen using code splitting you have to make sure that chunks don't directly depend on each other


and you have to split on the namespace level


can't use the same namespace to define chunks


also kinda looks like you are trying to split out data? not actual code?


yeah was trying to split out a bunch of json data


why not use actual .json files for that then? 😛


I do, they’re big json files was wanting to get them lazily loaded


yes. do that with actual .json files?


in the code above you would have done (js/require "./default-products.js") somewhere. why not just do (js/require "./default-products.json")?


no need to involve the CLJS build into that?


ah I see. I’d been trying to speed up some loading by avoiding loading the json file until it was needed. I thought that perhaps just having (js/require "./default-products.json") where I used it wasn’t enough to stop the app trying to parse the json at startup. Perhaps it was working to do that, but it wasn’t making much of a difference


well did you do the react-native RAM bundle side of things?


otherwise the code splitting won't do anything since everything is loaded on startup


I think expo doesn’t let you do that yet 😭


as far as I understand everything using the RAM bundle makes loading "lazy". otherwise everything is loaded eagerly


hi! I'm trying to use macros in a shadow-cljs project and I'm getting Can't take value of macro clograms.diagrams/xx, it is a very simple macro defined in the same namespace but in a .clj file, any ideas?


nvm, just figured out, weird error message


usually happens when you attempt to refer to a macro anywhere other than in the first position of a form @jpmonettas


(defmacro foo [] :foo) (identity foo)


yeah but in this case was because I had a (:require-macros [clograms.diagrams]) but wasn't adding a :refer to the macro, somehow was seeing the macro and complaining with the wrong warning


hello i need a bit of help here. i am running into an error getting started with clojurescript and shadow-clj What i did and that works: Command I ran to create a new app lein new re-frame example +cider +10x +garden +re-com +routes +less Running the repl using npx: npx shadow-cljs browser-repl --> this works where it creates a REPL and launches a browser window What I am trying now: run clojurescript repl using EMACS, CIDER, SHADOW-CLJS (cider-jack-in-cljs) The error i am getting is:

error in process sentinel: Could not start nREPL server: npx: installed 91 in 3.274s
shadow-cljs - config: /Users/davesh/sandbox/prototypes/example/shadow-cljs.edn  cli version: 2.8.51  node: v12.9.0
shadow-cljs - running: lein update-in :dependencies conj [nrepl "0.6.0"] -- update-in :dependencies conj [cider/piggieback "0.4.1"] -- update-in :dependencies conj [refactor-nrepl "2.5.0-SNAPSHOT"] -- update-in :dependencies conj [cider/cider-nrepl "0.22.0-beta11"] -- run -m shadow.cljs.devtools.cli --npm -d nrepl:0.6.0 -d cider/piggieback:0.4.1 -d refactor-nrepl:2.5.0-SNAPSHOT -d cider/cider-nrepl:0.22.0-beta11 server
Executable 'lein' not found on system path.


it’s odd because i have lein on my classpath:

(setenv "PATH" (concat "/usr/local/bin:/Library/TeX/texbin:" (getenv "PATH")))
(push "/usr/local/bin" exec-path)
(push "/Users/dhruv/bin" exec-path)

$ which lein


(shell-command-to-string "which lein") what does that return?


ohh. it’s empty string

dpsutton15:08:59 is highly recommended to solve these problems


thank you so much!

👍 4
David Pham16:08:39

Anyone tried to use extremely big npm package with shadow-cljs?

David Pham16:08:59

I try to use react-chart-editor from plotly but I can never reach the homepage because the dependencies are toooo big. (Similar to what happens if you load @material-UI/icons


@neo2551 With icons the issue is that there's no tree shaking so even unused code ends up in the bundle. Maybe it's the case with react-chart-editor. If so, try requiring only the stuff that you need.


Not as x :refer [a b c] but as x/a :as a.

David Pham18:08:35

Thanks I will try that!


@neo2551 not sure what "toooo big" means for you. I've seen upwards of 20mb load without issue? if you have too many files to load you can try

👍 4
David Pham19:08:01

Thanks I am trying that.

David Pham19:08:29

I am trying to load react-chart-editor. I think all the icons are killing it.

David Pham19:08:51

IT worked :)