filipesilva / create-cljs-app

Set up a modern CLJS web app by running one command.
MIT License
299 stars 23 forks source link

Consider swapping out devcards with Storybook. #303

Open wildwestrom opened 2 years ago

wildwestrom commented 2 years ago

It seems like Storybook has all of devcards' features and devcards doesn't seem very active. If this seems like a good idea I'll work on it.

https://shaolang.github.io/posts/2021-02-14-storybook.js-with-shadow-cljs/

filipesilva commented 2 years ago

Heya!

Storybook indeed does a lot. I use it at my dayjob together together with the cljs compilation, but using JS components on storybook. I played around with that guide as well before, and didn't move forward much because I wasn't sure about how the general UX would be.

A big difference (I think) with that guide versus a plain storybook setup is that you need to specify each ns as an entry point. In that case it's acme.stories.header-stories. Storybook discovers these automatically.

Still might be worth it to use storybook instead. I'm finding it hard to maintain devcards as the default due to https://github.com/bhauman/devcards/issues/168 and https://github.com/bhauman/devcards/issues/163. \

I'd review a PR if you're interested in working on it!

wildwestrom commented 2 years ago

Having to specify each namespace as an :entry is pretty annoying. I only skimmed the guide.

Is there another guide that shows how to integrate cljs with storybook? If not, maybe I can figure out an easier way to integrate storybook with cljs myself.

Either way, I'd love to work on this. I'd love to see this repo modernized.

filipesilva commented 2 years ago

I don't know of a better way to do it, no... at the end of the day I think it'd either require shadow-cljs to have a dynamic config to build the entries (e.g. how tests has ns-regexp), or have a way in the main entry point to find the others. Neither sounds super straightforward.

I might also be missing something important. Might be a good idea to ask Shadow-CLJS's author, he's very responsive in both the issue tracker and the clojurians slack.

Are there other things you think that fall within the bucket of modernizing this repo? I've held off on react etc dep updates because I was worried how devcards might break. Deps.edn is a good improvement but has some iffy interactions with Windows, where you need powershell to run any clj commands. I didn't really have anything else in mind myself.

wildwestrom commented 2 years ago

I don't know of a better way to do it, no... at the end of the day I think it'd either require shadow-cljs to have a dynamic config to build the entries (e.g. how tests has ns-regexp), or have a way in the main entry point to find the others.

Using ns-regexp doesn't sound that bad, it's kind of a 'set it and forget it' solution.

Are there other things you think that fall within the bucket of modernizing this repo?

I was just thinking of keeping all the npm stuff up to date. I don't think it's necessary to add deps.edn either. I prefer it on my repos, but shadow-cljs largely takes care of it.

Might be a good idea to ask Shadow-CLJS's author, he's very responsive in both the issue tracker and the clojurians slack.

I'd like to hear @thheller's opinion as well.

Browsing the issue tracker, I found this gist as well: https://gist.github.com/ghostandthemachine/347d1a1c679615a93930e4fdb48d907e

filipesilva commented 2 years ago

ng-regexp isn't available for the :npm-module target, or other non-test formats iirc. But maybe it works?

The things that keeps moving me towards deps.edn in other projects is pinning to git, and using npm scripts that call clj -A for stuff like linting. I might take that one on myself.

thheller commented 2 years ago

:ns-regexp works for :npm-module. Well, it was broken for a bit but was fixed a couple releases ago.

I have no opinion on Storybook otherwise. I have not used it myself.

filipesilva commented 2 years ago

@thheller that's really useful for this situation! Updated the docs to reflect that in https://github.com/shadow-cljs/shadow-cljs.github.io/pull/72.

DavidVujic commented 2 years ago

Here's a fully working example repo that might help, using :ns-regex for the Storybook alias. https://github.com/DavidVujic/clojurescript-amplified