This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-08-23
Channels
- # announcements (6)
- # beginners (54)
- # calva (9)
- # cider (2)
- # clj-kondo (26)
- # cljsrn (2)
- # clojure (49)
- # clojure-brasil (1)
- # clojure-dev (3)
- # clojure-europe (11)
- # clojure-italy (28)
- # clojure-nl (5)
- # clojure-serbia (1)
- # clojure-spec (4)
- # clojure-uk (182)
- # clojuredesign-podcast (2)
- # clojurescript (59)
- # clojurex (9)
- # cursive (26)
- # data-science (11)
- # datomic (40)
- # duct (1)
- # emacs (3)
- # events (4)
- # figwheel-main (2)
- # fulcro (7)
- # instaparse (1)
- # kaocha (2)
- # leiningen (25)
- # off-topic (3)
- # re-frame (36)
- # reagent (15)
- # shadow-cljs (87)
- # spacemacs (12)
- # sql (20)
- # tools-deps (8)
- # vim (1)
- # yada (40)
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 "riverford.mobile-app-orders.db.catalog" was moved out of module ":default-products".
It was moved to ":index" and used by #{:default-products :default-categories}.
this is my config
{:app
{:target :react-native
:init-fn riverford.mobile-app-orders.core/init
:output-dir "app"
:infer-externs :auto
:devtools {:autoload true}
:chunks {:default-products riverford.mobile-app-orders.db.catalog/default-products
:default-categories riverford.mobile-app-orders.db.catalog/default-categories}}}
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.
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
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?
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.
I usually just have ONE public
dir and generate everything into public/css
or so and everything in there is .gitignore
'd
> 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
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.
performance wise it isn't a super huge deal to serve 3 files but it also doesn't cost much to combine them first
> 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 @import
ing 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)
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
yeah was trying to split out a bunch of json data
I do, they’re big json files was wanting to get them lazily loaded
in the code above you would have done (js/require "./default-products.js")
somewhere. why not just do (js/require "./default-products.json")
?
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
otherwise the code splitting won't do anything since everything is loaded on startup
oh 😄 ,
I think expo doesn’t let you do that yet 😭
no clue. without this https://facebook.github.io/react-native/docs/performance#ram-bundles-inline-requires you don't need code splitting
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:
EMACS:
(setenv "PATH" (concat "/usr/local/bin:/Library/TeX/texbin:" (getenv "PATH")))
(push "/usr/local/bin" exec-path)
(push "/Users/dhruv/bin" exec-path)
OSX:
$ which lein
/Users/dhruv/bin/lein
https://github.com/purcell/exec-path-from-shell is highly recommended to solve these problems
Anyone tried to use extremely big npm package with shadow-cljs?
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.
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 https://clojureverse.org/t/improving-initial-load-time-for-browser-builds-during-development/2518
Thanks I am trying that.
I am trying to load react-chart-editor. I think all the icons are killing it.
IT worked :)
You are hero @thheller