Fork me on GitHub
#shadow-cljs
<
2024-06-07
>
Coby Tamayo00:06:57

If I have a Button/index.js file on my classpath, is requiring it via (:require ["/Button" :refer [Button]]) expected to work? I am getting:

FileNotFoundException: /home/tamayo/projects/bread-cms/marx/out/Button (Is a directory)
I also tried (:require ["/Button/index.js" :refer [Button]]) but that gives me the same error gives a similar error:
The required JS dependency "Button/index.js" is not available, it was required by "systems/bread/alpha/marx/field/bar.cljs".
Edit: I can get this to work (via the first :require form) if I move Button.js up a level instead of having the folder there. I'd prefer it if components could live in the same directory as their styled-components files, Storybook stories, etc., and not have to co-mingle all those things or relegate the styles etc. to a different directory. But I can live with it if this is not supported.

thheller08:06:11

there is no npm-guess-what-file-it-is nonsense for the classpath, so you refer to the exact filename by default. I even regret allowing the .js to be optional

👍 1
thheller08:06:24

/Button/index.js would work

thheller08:06:42

but note that you can get all the npm style behaviour if you do NOT use the classpath, which I do not recommend anyway

thheller08:06:41

so instead you use the :js-package-dirs ["node_modules" "packages"] option and have all your components in say packages/your-components/Button/index.js

thheller08:06:58

then your require will be (:require ["your-components/Button" ...])

thheller08:06:22

this has the added benefit of not running your JS components through :advanced which will likely save you some externs trouble

Coby Tamayo15:06:47

That makes sense, thank you Thomas. I am writing components in JSX, so it goes through Babel. So in that case do you recommend just putting the output dir in :js-package-dirs?

thheller18:06:30

and yes, you put the output into packages/your-components or whichever name you prefer. important bit is that it must be a sub directory and that directory should contain a package.json. usually npm init -y in that dir is enough

thheller18:06:00

so packages/your-components/package.json and NOT packages/package.json

thheller18:06:25

basically you are replicating the structure of the node_modules folder, just with a "package" you are building yourself

Coby Tamayo19:06:04

Got that working, thanks again!

Coby Tamayo20:06:34

hmm, it appears that shadow-cljs does not pick up on changes to files in that dir. I can see out/Button/index.js changing but the shadow-cljs watch command does not, and even a Force compile does not pull in the new JS. Is this expected?

thheller06:06:15

yes, this is treated like node_modules. so only package.json is watched. if you make your babel build touch package.json it should work

Chris McCormick13:06:29

I have watch-dirs set to public. Inside that dir I have a symlink to another dir, and inside that symlinked dir i have a file that is symlinked. When I modify the file the symlink is pointing to shadow-cljs does not pick up that it has changed. Is there something I can do to get it to pick up changes to symlink targets?

thheller13:06:17

not a clue 😛 there is no extra option if you are looking for one

Chris McCormick14:06:03

Ok. I will continue hitting refresh like an absolute animal. 🙈

Chris McCormick14:06:52

For context: I have some CSS that I use across different codebases and I have symlinked to it.

thheller14:06:36

allOf thus includes the only option, which would be FOLLOW_LINKS

thheller14:06:32

I suspect that it just treats the symlink as its own file, and since that doesn't change it doesn't trigger

thheller14:06:15

might be better if you symlink the dir, not the file?

👍 1
Chris McCormick14:06:19

Let me test that.

Chris McCormick14:06:43

Touching the symlink didn't work. It's being included from a different stylesheet like this:

@import url("dopeloop.css");
When I touch the parent CSS file (the one with the the import above) that file is reloaded but the import doesn't reload. Would you expect imported CSS to be reloaded?

Chris McCormick14:06:35

I'll see if I can simplify this setup anyway.

thheller14:06:32

no import is not followed

thheller14:06:39

only actual link tags

Chris McCormick14:06:17

Ah ha that must be it then, thanks. 👍

Chris McCormick16:06:05

Just a quick follow up - I fixed this by using a directory symlink instead of a file symlink as you suggested.

👍 1