clojurescript 2025-06-27

hey @d-t-w in the https://github.com/factorhouse/rfx readme there's a storybook example that uses a multimethod to create a story. what library is used for this?

Good question! @tom860 might have an answer for that..

🙏 1

Thanks a lot for the groundbreaking work @tom860! Based on your repo I was able to add storybook to our project. I wasn't able to directly use it (yet) because it makes some assumptions about file locations etc that's not compatible with our project layout. I hope to upstream those changes eventually, if you welcome issues/PRs

❤️ 3

Hello @vale - that is some internal code we have to work with storybookjs within our codebase. Surprisingly difficult/annoying to get cljs to play nicely with storybookjs, I can try open source/polish/release this weekend assuming I have time 🙂

> difficult/annoying to get cljs to play nicely with storybookjs i know 😢 > can try open source/polish/release i'm really not asking for a library you'd support for me, but if you can make a gist of the important bits (mostly how you feed stuff into storybook) that would be hugely helpful i've been trying to get storybook to work with our shadow-cljs + webpack setup but no luck so far (even considered swapping webpack for vite if that'd make it easier) if all falls through i'll use portfolio but storybook has history in the org so it'd be preferable...

Haha the important bits = 500 LOC to communicate 🤣 It's something we'd like to open source eventually, I dangled that storybook/story multimethod example in the README to see if I'd get any bites from the community anyway

oh so you add a compiler pass just for stories huh that looks much less complicated than i anticipated

Yeah, basically Storybook does some static analysis on source files of each _story.js to build up its UI view. And it cannot understand compiled cljs javascript. That's the main annoying problem when dealing with Storybook 😞 That's where the shadow-cljs build hook comes into place, where for each story defined in our codebase, we can build out a shim _story.js file that Storybook understands that can tap into our ClojureScript code. Then the next problem is creating a little translation layer between $CLJS_REACT_LIBRARY and Storybook (eg, how can Storybook render a Uix component) -- and also deal with the translation of the stories :args etc -- that's basically the storybook/story multi-method that allows you to write very concise stories using simple ClojureScript data structures

There's a few other annoying bits that this library hides, eg adding appropriate JSDom shims/etc to the shadow build so that we can invoke some code at compile time given the fact that we are targeting a :npm-module etc

i was a bit surprised you added an entire json serde thing "just" to deal with keywords, must've been a huge frustration

A lot of this code is over 10 months old, I wrote it as part of a Storybook spike at Factor House. The reason why we were interested in Storybook is specifically their addons for https://storybook.js.org/addons/@storybook/addon-a11y + CI features that Clojure community alternatives do not have. But because we were stuck on Reagent + re-frame at the time, the spike ended there -- we tried some other ways of working with Storybook including manually creating the shim JS files and some boilerplate fns that wrapped components for export, but it was wayyyy too verbose, so we landed on this approach with build hooks. It's something we might try and adopt/reevaluate now that we are using RFX (and thus have isolated state, so Storybooks is something we can use properly) - probably similar to you, we are getting some Rails/Typescript in the org that different teams have adopted, and having standardised tooling like Storybooks is another selling point, assuming we find any benefit from adopting Storybook as a team. > i was a bit surprised you added an entire json serde thing "just" to deal with keywords, must've been a huge frustration Yeah, it was literally about not wanting to write wrapper interop components everywhere to play nice with Storybook and its UI, almost all our components are passing around keywords as props lol

@vale - I'm glad you've found some use! Absolutely, we'd welcome those changes for sure. I made some effort to make some of the options for dirs configurable (tho didn't see that work thru/didn't rly consider windows users/etc). Just yell if you need any clarification re: code.