Can I shadow-cljs watch two builds in the same page at the same time? When I try to do this shadow-cljs watch app logger one of them cannot load properly because of 404s on the scripts it loads

react does give us react native, so for now I'm locked in to it...

Hi, Since shadow-cljs and cljsjs don't play well with each other, are there documented ways of making things like soda-ash work well?

looking at it, the adapt-react-class can be called on semantic-ui-react directly I suppose

@caleb.macdonaldblack you cannot load 2 dev builds on the same page in the browser

@pyr https://shadow-cljs.github.io/docs/UsersGuide.html#cljsjs works for all packages

What would be the preferred way of writing a macro that is supposed to expand to CLJS code that uses Shadow-CLJS-style requires? E.g. I have

(:require ["@material-ui/core" :as core]
          [reagent.core :as reagent])

option a) is creating "wrapper" functions in the macro ns. (defn foo [...] (core/foo ...))

option b) pass whatever material thing you are wrapping into the macro (the-macro core/thing ...)

you can in theory get the alias from the compiler env too but thats a bit shadow-cljs specific

also don't ever require "@material-ui/core" directly, be more specific with the requires

otherwise you are adding a lot of maybe unused code

Not sure I understand (a). Where would that core come from? "@material-ui/core" is not available for CLJ. Or did you mean basically what I said, so that function would end up being called only in the expanded code? What about a macro that does something like \(do (require ["@material-ui/core" :refer [Toolbar]]) (... using Toolbar))`? Yes, sure - I oversimplified the ns declaration a bit. I require only the things that I need.

thats option b I mentioned?

would help to know what the macro actually is supposed to do

why do you need to wrap MUI?

No-no. Option (b) I don't even consider as long as there are other alternatives - it still leaves quite a bit of boilerplate. OK, give me some time to actually come up with something. My macro-fu is not what it's supposed to be.

i’m not sure it’s currently possible to avoid boilerplate with material-ui. AFAIK we need to have each specific component we want as an individual :require inside of ns, and we can’t manipulate ns forms with macros

material-ui recently added support for tree-shaking but I don’t think it works with cljs

yeah that currently doesn't work. I have some ideas on how to make it work but it is a lot of work I currently don't have time for

yeah i saw some of your discussions about that somewhere. this stuff seems difficult and a moving target

yeah its a cutting-edge feature in webpack so doesn't seem "final" yet

not many packages support it either yet so we'll see

Ideally, it would be something like this:

(defmacro defcomponent [cljs-name args]
  ;; Intended usage:
  ;; (defcomponent app-bar [{:keys [classes color position] :as props} & children])
  ;; (defcomponent toolbar [{:keys [classes component disable-gutters variant] :as props} & children])
  ;; The full props specification is needed for correct parameters info during development.
  ;; E.g.in Cursive, `defcomponent` could be resolved as a function, making Cursive show that
  ;; `app-bar` accepts [{:keys [classes color position] :as props} & children] as parameters.
  (let [;; "app-bar" -> "AppBar"
        comp-name (string/join (map
                                 string/capitalize
                                 (string/split (name cljs-name) #"-")))]
    `(do
       (require ["@material-ui/core" :refer [~comp-name]])
       (let [comp (reagent.core/adapt-react-class ~comp-name)]
         (defn ~cljs-name [& props+children]
           (into [comp] props+children))))))

There should also probably be (require [reagent.core]) but you get the idea.

isn’t require only a REPL thing in cljs?

yeah thats not possible

:refer is kind of a trap here since it doesn't do what you think it does

webpack style tree shaking is not support for JS packages as mentioned above

you actually need different requires to make that work

(:require ["@material-ui/core/Button" ...])

but generating requires dynamically is not possible in any way

You're giving me too much credit. 😄 I don't have any idea what any of this is supposed to be doing. And I've never been a proper JS developer. Hmm, but (:require ["stuff/core" :refer [Component]]) seems to work just fine, just as (:require ["stuff/core/Component" :default Component]).

if does work just fine yes

but if you require @material-ui/core you will require the "meta" package

Ah, I see.

which includes EVERY component the package provides

so it adds about 1.2mb to you JS

which can't the DCE'd yet

so you should avoid doing that unless you are actually using all of them

if you don't care about size then :refer is not very useful on its own

And I guess Shadow-CLJS can't just magically turn :refer-like :require to a :default-like one, right?

yes that is not currently supported

I mean in principle, given the mess in the way different packages export stuff.

hello! this is perhaps an elementary question, but i am attempting to require a JS (react) module relative to the current namespace as outlined in the docs (https://shadow-cljs.github.io/docs/UsersGuide.html#_requiring_js). i'm unable to get relative paths working (`shadow$provide is not defined`), but if i drop the js module in node_modules, it seems to resolve. are there special considerations i'm perhaps overlooking? i am not importing from the same directory, so i may not fully understand what is meant by "This is unlike node which expects relative requires to always resolve to physical files." thank you!

@james.acklin do you have more details? which version do you use? which build target? build config?

what does the JS do?

Once I watch a build with shadow-cljs is there a way to unwatch it without shutting down the server?

i am using shadow-cljs 2.8.37, the :npm-module build target (which is then imported by storybook-react), and the JS exports a function which returns an SVG with a bunch of child paths

from shadow-cljs.edn:

:stories {:target :npm-module
            :output-dir ".storybook-compiled"
            :devtools {:enabled false}}

hmm :npm-module might not support that style of js require

ahh, got it

i also control this library, so i may just implement a pure clojurescript variant just to keep things simple

it might work if you use ES6 style import/export

okay, i will try that as well

it might be possible to get this to work with npm-module. I never tried before

npm-module has all sorts of special cases 😛

yes! others on my team are discovering that as well

thanks for the help and for the excellent tool

Hi. Does anyone has a template or sample shadow-cljs project for AWS lambda deployment with Serverless Framework ?