Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2023-06-09

Channels

#shadow-cljs
<
2023-06-09
>
indy19:06:26

Does touching the package.json of an npm package still cause the package to reload? I haven’t been able get hot code reload working forever for npm linked packages. And this makes my workflow really slow.

thheller20:06:48

why are you trying to hot load npm packages? and yes, package.json changing should still cause a recompile. whether or not hot-reload is up to the package. many npm/js things aren't really hot-reloadable

indy09:06:04

I write all the UI components in react typescript and have custom hooks that will pull in data from cljs and publish actions to cljs land, because cljs is good with data. The UI components are a separate project because: • Storybook driven development FTW. (I know this can be done with cljs but it’s a pain, one has to enlist the control types and it’s not done automatically) • So much better when letting freelance react and typescript developers build UI components. • A lot of libraries look awkward and take time to write when invoked from cljs/reagent. I use a lot of prosemirror, google-map apis and it’s much simpler to do it all in JS. • TS is nice for UI development and Storybook. Nullchecks and documentation of props are very useful. Prop types are automatically converted to controls in Storybook. • Embracing JS/React world for the libs and pool of people (many junior devs) and embracing CLJS for the ultimate productivity when it comes to working with data (few senior devs). It has worked very well for us. The whole App is written in TSX (we freelance to get the components built, Figma has a plugin that allows exporting a component as HTML + TailwindCSS, so a lot of times this is just copy and paste and some tweaking to use the custom hooks to get the data). The App is imported into cljs as a lib. The data plumbing, routing and event handling is all done in CLJS by just two devs. We want to restrict access to the clj+cljs project so we don’t want to pull in the UI project into it and use babel to generate JS that can be used directly.

indy09:06:25

Well, I tried touching, and just changing something and saving the package.json but it didn’t cause a recompile. It’s quite sad. Every month or so I revisit this and fail at a solution. It hampers our devX quite a bit.

indy09:06:44

Many many thanks for ShadowCLJS btw, it has been really smooth for us and has a very well thought design.

indy11:06:12

If there was an api in shadow-cljs, where I could specify the package I want to watch/hot-reload, that would be nice. (I’m aware of the history here: https://github.com/thheller/shadow-cljs/issues/759)

thheller13:06:05

so how are you doing all of the above? like what is building the JS code, how is the CLJS build configured?

indy14:06:55

Vite is building the JS code in library mode. For cljs, the shadow-cljs config is simple: 

{:deps {:aliases [:client]}
 :nrepl {:port 7000}
 :dev-http {8000 "target"}
 :builds {:app {:target :browser
                :output-dir "target/scripts/"
                :asset-path "/scripts/"
                :modules {:core {:init-fn }}}}}

indy14:06:28

The whole App and all the internal components are written in TS. It uses custom hooks for subscribing to state and dispatching events. These hooks are based on functions that are registered in react context. When I import this JS app in cljs, I pass the functions as part of the context.

thheller14:06:28

I just checked. the npm reload is indeed broken in many ways

thheller14:06:41

not enough time to fix it now, feel free to open a ticket so I don't forget

indy14:06:17

Will create a ticket, thank you! 🍻

indy09:06:04

I write all the UI components in react typescript and have custom hooks that will pull in data from cljs and publish actions to cljs land, because cljs is good with data. The UI components are a separate project because: • Storybook driven development FTW. (I know this can be done with cljs but it’s a pain, one has to enlist the control types and it’s not done automatically) • So much better when letting freelance react and typescript developers build UI components. • A lot of libraries look awkward and take time to write when invoked from cljs/reagent. I use a lot of prosemirror, google-map apis and it’s much simpler to do it all in JS. • TS is nice for UI development and Storybook. Nullchecks and documentation of props are very useful. Prop types are automatically converted to controls in Storybook. • Embracing JS/React world for the libs and pool of people (many junior devs) and embracing CLJS for the ultimate productivity when it comes to working with data (few senior devs). It has worked very well for us. The whole App is written in TSX (we freelance to get the components built, Figma has a plugin that allows exporting a component as HTML + TailwindCSS, so a lot of times this is just copy and paste and some tweaking to use the custom hooks to get the data). The App is imported into cljs as a lib. The data plumbing, routing and event handling is all done in CLJS by just two devs. We want to restrict access to the clj+cljs project so we don’t want to pull in the UI project into it and use babel to generate JS that can be used directly.