My big concern here is whether reagent components can be consumed from “vanilla React” given that reagent structures props and rendering in a very different way to most other React components. (i.e. while we can re-use react components in reagent, we cannot necessarily re-use reagent components in react)

My understanding is that Reagent components can be turned into React components.

I am mostly basing my comments off of remarks made https://clojurians.slack.com/archives/C0620C0C8/p1675329221577859?thread_ts=1675296130.694469&cid=C0620C0C8 and https://clojurians.slack.com/archives/C0620C0C8/p1675762484239369?thread_ts=1675296130.694469&cid=C0620C0C8

Hm. https://cljdoc.org/d/reagent/reagent/1.2.0/doc/tutorials/interop-with-react#creating-react-components-from-reagent-components

Yup — that same link was posted in the thread I referenced, but apparently it’s only for use within a reagent app

Yikes.

The good news is that you will have some luck with Helix, whose components are always plain old React components. This makes them very natural to embed into vanilla JS and even in react components that let you pass in a component (e.g. material ui's list component, which accepts a list item prop if you want to bring your own list item component)

in that case i think your distribution issues can be solved by deciding a minimum react version (e.g. 16) and building against it — I don’t think react has to be bundled in this case, but users of your library will have to be aware of compatible react versions

Hm, my CLJS lib is already built with React. Extracting from a CLJS app, to make the functionality available to other JS apps.

Seems like I'd need to rewrite the views I want to share in Helix. Maybe all of them, if Helix can't coexist with Reagent.

Helix can coexist with reagent just fine. The caveat is that reagent views are functions returning hiccup, which need to be interpreted into a react component. This is done with r/as-element

I want to say the bigger concern here is being able to refactor Hiccup in a way that plays nicely with Helix, assuming you’d want to refactor reagent code into helix code. I believe Helix lets you define your own defnc macro so that you can use Hiccup, but it’s an “opt in” feature and it needs some work to set up

Thanks for the info. This was quite the surprise. That reagent fn's docs could really be more clear that it's not creating react components that can be used in a react app.

how does the other react app provide react to js libs?

two react version is very likely to cause problems

you could use :js-options {:js-provider :import} https://shadow-cljs.github.io/docs/UsersGuide.html#_third_party_tool_integration

and if the other app provides an import map, it could provide the react version it uses that way? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap

or :js-options {:keep-as-import #{"react" "react-dom"}} to only keep those two as regular import but have the rest bundled also works

it really all depends on how the react app you are trying to integrate with is built

it could also be providing a global React variable, where you'd do this https://shadow-cljs.github.io/docs/UsersGuide.html#js-resolve

FWIW you can use reagent components from react directly just fine. just needs to be the reactify-component thing, not the plain fn

but even the plain fns will work if you wrap them as (defn my-component [props] (r/as-element [the-actual-thing ...]))

there is no need for helix, but that is an option too of course

what does your config look like? not sure which :port you are referring to?

maybe you want to start with https://github.com/shadow-cljs/quickstart-browser

the first hello world sort of depends on which react wrapper you want to use

might be quicker to start with a re-frame template?

create-cljs-project is the bare minium, without any assumption that you are even going to build a web frontend

Thx, I was refering to the nrepl port, but I saw that maybe I need to setup the dev-http instead. I'll take a look on that project after lunch

:dev-http is the http server yes. nrepl is what your editor would use to connect.

With that project and https://maksimrv.medium.com/setup-shadow-cljs-react-project-36a14e9f07d5 now everything works properly 🙂 I can run, the auto-refresh worked well and also react is working. Thanks again, awesome project

please don't do this 😛

(defn main []
  (let [app-node (.getElementById js/document "app")]
    (rdom/render [app] app-node)))
(main)

instead do

(defn main []
  (let [app-node (.getElementById js/document "app")]
    (rdom/render [app] app-node)))

(defn ^:dev/after-load reload! []
  (main))

and in your build config instead of {:entries [core]} {:init-fn core/main}

see https://code.thheller.com/blog/shadow-cljs/2019/08/25/hot-reload-in-clojurescript.html

hmm makes sense to use lifecycle, I'll read ASAP, thank you