re-frame

richiardiandrea 2024-09-16T16:21:34.541079Z

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

cormacc 2024-09-17T09:29:55.394629Z

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 :)

valerauko 2024-09-17T10:17:41.963959Z

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

richiardiandrea 2024-09-17T13:07:52.792429Z

@cormacc yes that is what I was thinking of doing as well - tried yesterday but freerange is not working here

richiardiandrea 2024-09-17T13:41:36.823889Z

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)

valerauko 2024-09-18T00:38:52.223269Z

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

valerauko 2024-09-18T00:50:07.796029Z

btw if you managed to get latest (v7+) storybook work with latest reagent+re-frame then please do share an example blog post / repo

richiardiandrea 2024-09-18T12:58:44.434419Z

@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

valerauko 2024-09-18T13:51:13.160629Z

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

Kimo 2024-09-16T16:24:42.729519Z

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.

richiardiandrea 2024-09-16T16:25:12.823169Z

Oh man I am so rusty - let me try to require my subs

Kimo 2024-09-16T16:25:38.447899Z

yeah, of course make sure the reg-sub call gets evaluated, too.

p-himik 2024-09-16T16:26:37.206759Z

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

👍 1
richiardiandrea 2024-09-16T16:39:25.948349Z

@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"

Kimo 2024-09-16T16:39:55.469819Z

I think there's a fork for that somewhere

Kimo 2024-09-16T16:41:15.775019Z

But also just consider putting all of it under a subtree. Interceptors like path can make the DX pretty seamless.

richiardiandrea 2024-09-16T16:41:29.529929Z

yeah I think this app does that

richiardiandrea 2024-09-16T17:02:36.818559Z

Found this old fork https://github.com/nextjournal/freerange - it seems some commit is recent

richiardiandrea 2024-09-19T19:43:49.980269Z

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

M 2024-09-20T00:13:48.389429Z

portfolio also doesn't have UI based way to change input / show all the inputs like storybook does.

👍 1
richiardiandrea 2024-09-20T00:14:44.748249Z

Just presented storybook today to the team and everybody seems happy so far 😆

M 2024-09-20T01:52:13.111499Z

Does the auto docs work at all with clojure?

richiardiandrea 2024-09-20T01:53:09.479459Z

Well we are cheating as we use classes from addon-docs in the story

M 2024-09-20T01:54:23.293289Z

The auto docs might be a typescript plugin. Didn't work for a class component.

richiardiandrea 2024-09-20T01:55:29.204729Z

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)

richiardiandrea 2024-09-20T01:56:10.440969Z

Not at kb but I can send a snippet tomorrow. With the old version in place not all features are available to us

richiardiandrea 2024-09-20T01:57:12.942319Z

But both controls in Canvas and Docs tab appear correctly and are updated properly on reload

M 2024-09-20T01:57:47.062139Z

Yeah let's look at the docs feature. It's the main reason not to use portfolio

👍 1
richiardiandrea 2024-09-20T02:01:13.870979Z

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

richiardiandrea 2024-09-20T02:05:01.646049Z

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.