Dear all, using re-frame again after a loooong time 😄
Has anybody been able to use re-frame with Storybook by any chance?
I am getting the dreaded No protocol method IDeref.-deref defined for type undefined: on @(rf/subscribe) and I am sure I am missing some require somewhere
I've been enjoying portfolio. Re app-db / portfolio - the approach I've been taking is to keep the re-frame subscriptions outside the components and pass the data received from the sub in via props. Similarly, if the component needs to publish an event I just have the component take a callback prop and pass in #(rf/dispatch [:my-event %]) or whatever via props. This feels purer / more in line with the component driven development philosophy to me. Today at least - ask me again tomorrow :)
I've done some research since then, and I found this function in re-frame that might be very useful for this purpose. Haven't tested it yet https://github.com/day8/re-frame/blob/cf5e8360bf669221114bc9ec7464157bd851bc22/src/re_frame/core.cljc#L1125 I find portfolio super easy and intuitive to use
@cormacc yes that is what I was thinking of doing as well - tried yesterday but freerange is not working here
and @vale I saw that function I am just not yet sure when to hook it up in Storybook (which is what my team decided to use)
I haven't worked with storybook in a while but iirc it had hooks on Story objects like setup and mounted that you could use for setup and teardown
btw if you managed to get latest (v7+) storybook work with latest reagent+re-frame then please do share an example blog post / repo
@vale no we are stuck at 6.3.13 for now as the new one does some static analysis on code that I could not figure out how to emit from shadow-cljs
yeah that (and @storybook/react just not working by itself anymore even though it's available) were the reason i just gave up and went with portfolio. i'm happy with portfolio but at work people are already used to storybook so if it worked that'd lower some bars significantly -- alas it doesn't
Usually that means you're trying to subscribe to a query that isn't registered. A common mistake is to do (reg-sub ::my-sub (fn ...)), and then call (subscribe [:my-sub]). The query ids (`my-sub`, :my-sub) look the same at first glance, but one is qualified, so they're totally different values. So the lookup fails.
Oh man I am so rusty - let me try to require my subs
yeah, of course make sure the reg-sub call gets evaluated, too.
Note that there's also Portfolio that should be more CLJS-friendly. Although I myself have never used it and there's a very recent question about whether or not it works with re-frame: https://clojurians.slack.com/archives/C03S1L9DN/p1726483166406089
@kimo741 that worked! 😄 I also remember there were problems with creating a local app-db - is that still the case? Ideally I'd like to see the app db in my story without having it "global"
I think there's a fork for that somewhere
But also just consider putting all of it under a subtree. Interceptors like path can make the DX pretty seamless.
yeah I think this app does that
Found this old fork https://github.com/nextjournal/freerange - it seems some commit is recent
yeah I explored portfolio but the other thing we wanted to get is hot-reload of JS/TS component libraries - which does not work with shadow-cljs alone - now we have it in storybook because it is using webpack
portfolio also doesn't have UI based way to change input / show all the inputs like storybook does.
Just presented storybook today to the team and everybody seems happy so far 😆
Does the auto docs work at all with clojure?
Well we are cheating as we use classes from addon-docs in the story
The auto docs might be a typescript plugin. Didn't work for a class component.
What I mean is that there is no "auto" doc but you can return page docs JavaScript objects from a story (I think under :parameters)
Not at kb but I can send a snippet tomorrow. With the old version in place not all features are available to us
But both controls in Canvas and Docs tab appear correctly and are updated properly on reload
Yeah let's look at the docs feature. It's the main reason not to use portfolio
About upgrading to a new version ... The indexer feature might be something we can explore https://github.com/storybookjs/storybook/discussions/23176 It seems though they state that dynamic stuff in a Non-Goal there
Digging more, the way forward seems to be to provide what they call a (cljs) "framework" for load time and an indexer for build time.