shadow-cljs icon indicating copy to clipboard operation
shadow-cljs copied to clipboard

Build targets to better support remix, nextjs or similar frameworks

Open janat08 opened this issue 2 years ago • 6 comments

I believe all react vue and svelte have server side routing based on file path that’s run on something like cloudflare worker. The worker part isn’t necessary, but can this output bundles in same path. I’m looking to use remix or blitzjs as simplified nextjs.

janat08 avatar May 14 '22 15:05 janat08

Sorry, I do not understand what this is about. Please clarify and provide an example.

thheller avatar May 14 '22 15:05 thheller

Those frameworks have a folder named route or something, and once you create a file there, that becomes a route. I believe some of them don't have an option to do something other than that.

janat08 avatar May 14 '22 16:05 janat08

I think it’s a problem because you need to output js back in those same directories under same file names which compilers usually don’t.

janat08 avatar May 14 '22 17:05 janat08

Frameworks such as remix or nextjs do require custom file layouts. In shadow-cljs this would be covered by implementing a custom :target for those platforms.

I did [some experiments](https://clojureverse.org/t/creating-websites-with-shadow-cljs-gatsby-or-next-js/2912 in that are a while ago but have not looked at them since. I also currently do not have the time to do so.

If anyone wants to take this on however I can provide pointers and guidance. It will however require digging into some of the internals of shadow-cljs build targets.

thheller avatar May 20 '22 08:05 thheller

To be honest my ClojureScript knowledge is limited, but I wanted to share some insight since I've been developing in the JS framework space for a while. I wrote an article here, it gives some insight into why basically I think Astro is the most useful JS framework at the moment (even though it's not necessarily the most popular).

I'm not sure if I could implement this myself or not, but given ClojureScript's small footprint (especially when doing things like macros) it might be a good match for Astro which also strives to leave the smallest possible footprint in the browser (prioritizing loading HTML first over JS). Your ClojureScript could theoretically be evaluated all the way down to HTML (assuming it could translate into JSX), which I think would be really interesting to see that level of optimization. I'm just putting this idea out there 😄

Some Potential Benefits

  • Astro could make Clojurescript able to work alongside other JS frameworks like Solid and React rather than in competition to them (Astro has a lot of extensibility features)
  • Also it seems like it would be really good for component state (being able to use atoms/macros to update the DOM)

Alternatively you could make your own JSX layer and compile down to static assets (html/css/js)

L1lith avatar Jul 16 '22 23:07 L1lith

I haven't used Astro, so this is all based on glances of the docs. I don't think its a good match for CLJS (and shadow-cljs), given that they really need you to use the .astro files. Generating those would probably be more work than just writing something like Astro yourself.

You could write all components in .astro files with a little bit of JS and just have some of the data handling/logic parts in CLJS. That would be fine and no extra target is required for that. :npm-module or :esm already cover integration with other tools. Integrating with other build tools is less than ideal from a build perspective. You are basically building everything twice and inherit the union of the constraints of both tools.

I mean feel free to create an example project of how the ideal integration you have in mind would look. I doesn't have to be working, but I can probably tell you if it could work at all or how much work it would be.

thheller avatar Jul 17 '22 06:07 thheller

Closing this as there is nothing actionable for me to do.

I cannot keep up with all the different possible platforms and their own expectations. Feel free to open new issues in the format of "how do I get shadow-cljs to create this file in that location for me?", with actual examples of how those files would need to look. Combing through platforms docs to figure out whats needed just takes too much time.

I still think that most use cases are covered via :npm-module and :esm.

thheller avatar Feb 22 '23 10:02 thheller