Fork me on GitHub
#shadow-cljs
<
2019-08-23
>
teawaterwire01:08:40

anyone else getting this error with the latest shadow?

teawaterwire01:08:07

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

danielneal09:08:57

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}.

danielneal09:08:02

this is my config

danielneal09:08:04

{: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}}}

p-himik09:08:45

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.

p-himik09:08:09

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

p-himik09:08:34

With corresponding entries in :watch-path.

p-himik09:08:59

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.

thheller10:08:50

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

thheller10:08:17

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

thheller10:08:23

that is the default assumption

thheller10:08:33

no clue what "vendored dir" means to you

p-himik10:08:57

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?

thheller10:08:07

not exactly. what is your webserver serving?

thheller10:08:24

resources or target?

thheller10:08:50

need to know the actual web server root

thheller10:08:27

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

p-himik10:08:35

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.

thheller10:08:33

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

thheller10:08:58

/static checks resources AND target/dev?

thheller10:08:07

it is not a good idea to directly server resources btw

thheller10:08:22

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

thheller10:08:47

loading 3 different css files is not great performance wise

p-himik10:08:44

> 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.

thheller10:08:28

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

thheller10:08:52

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

thheller10:08:11

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

p-himik10:08:33

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.

thheller10:08:41

but even then /b.scss is accessible?

thheller10:08:21

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

thheller10:08:01

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

thheller10:08:08

better gzip, less requests

p-himik11:08:21

> 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.

p-himik12:08:51

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.

p-himik12:08:42

> 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.

thheller14:08:10

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

thheller14:08:23

and my webserver serves the public directory

p-himik14:08:04

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

thheller14:08:39

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

thheller14:08:24

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

p-himik14:08:38

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.

p-himik14:08:10

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.

p-himik14:08:55

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.

thheller10:08:27

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

thheller10:08:45

and you have to split on the namespace level

thheller10:08:29

can't use the same namespace to define chunks

thheller10:08:58

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

danielneal10:08:21

yeah was trying to split out a bunch of json data

thheller10:08:43

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

danielneal10:08:08

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

thheller10:08:29

yes. do that with actual .json files?

thheller10:08:17

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

thheller10:08:25

no need to involve the CLJS build into that?

danielneal10:08:56

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

thheller10:08:51

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

thheller10:08:05

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

danielneal10:08:29

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

thheller10:08:17

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

jpmonettas13:08:51

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?

jpmonettas13:08:44

nvm, just figured out, weird error message

mccraigmccraig14:08:50

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

mccraigmccraig14:08:59

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

jpmonettas15:08:18

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

dhd15:08:35

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.

dhd15:08:20

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

dpsutton15:08:08

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

dhd15:08:33

ohh. it’s empty string

dpsutton15:08:59

https://github.com/purcell/exec-path-from-shell is highly recommended to solve these problems

dhd15:08:56

thank you so much!

👍 1
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

p-himik18:08:52

@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.

p-himik18:08:16

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

David Pham18:08:35

Thanks I will try that!

thheller19:08:23

@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

👍 1
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 :)