Clojurians Log v2

I noticed that fulcro has barebones configuration for clj-kondo: https://github.com/clj-kondo/config/tree/master/resources/clj-kondo.exports/clj-kondo/fulcro Has anyone played around with writing the configuration for defmutation and some of the other fulcro specific macros? Otherwise I’ll be taking a stab at it in the next few weeks, but I just wanted to ask if someone has cracked this one already

Not aware of any.

I did a low quality test for number 3: I build a production build with them and one without them and it resulted in a 200kb difference. I can try to look through the actual index file and document in a PR

I’m playing around with fulcro’s semantic-ui-wrapper and I’m having trouble sending a javascript “elementType” from the wrapper. For example, ui-sidebar has a prop :as which takes a string or elementType:

(sf/ui-sidebar 
{:as        "Menu"
:animation "overlay"                                                         
:icon      "labeled"                                                                      
:inverted  nil                                                                                          
:vertical  nil                                                                            
:visible   true                                                                            
:width     "thin"}                                                                          
(sf/ui-menu-item                                                                                
{:as "a"}                                                                          
(sf/ui-icon                                                                                           
{:name sfi/home-icon}) "Home"))

the :as is working fine for the ui-menu-item but not for the ui-sidebar . Any ideas what I should pass in props so that :as "Menu" appears as a an object on the javascript side?

There was just a discussion on this in clj-kondo. You’re welcome to contribute to the config. Libraries can now also export their config on the classpath. See #clj-kondo

Ha ha, the timing. Thank you for pointing this out @borkdude

Small thing: I often use a pattern where I unconditionally set-state! in :componentDidUpdate, relaying on :shouldComponentUpdate for breaking the endless loop. However during hot-reloading, everything is force-rendered in a way that do result in an endless loop and ultimately in an exception. Is there a more elegant solution than comparing myself the new state with the old one, which is cumbersome knowing that :sCU already does it 99,99% of the time?

Hey guys, having some weird issues with fulcro-inspect-electron, it won't load even when using the com.fulcrologic.fulcro.inspect.websocket-preload preload in shadow-cljs.edn… using the latest 3.0.2 of the app. cljs.core.ExceptionInfo {message: "No reader function for tag fulcro/tempid.", data: c…s.c…e.PersistentArrayMap, cause: null, name: "Error", description: undefined, …} The same exact code is working for my colleague, so there shouldn't be anything wrong with the tempid stuff (in the pathom parser).

Just finished reading the developer's guide for Fulcro RAD and have a question: how does one go about pushing a Fulcro RAD app into "production"? Totally understand that it is still in alpha and not suitable for "real stuff", but getting a sense of how the real endgame could play out completes Fulcro's full-stack story. The answer is probably DIY... However, having an approachable deployment story would make Fulcro even more appealing. Does anyone has any experience/best-practice/tutorial/blog/video to share? Thanks in advance for sharing.

We run it in prod. I build an uberjar including the shadow-built frontend code

I don't understand the problem. You are sending a string but it is ignored? I guess the component has a list of values it actually supports for the string? Or you mean that instead of a string, you want to send a JS object representing an element type? What is it, something from the DOM api?

Same.

What are you actually trying to do?

Perhaps you are not running the version you think you're running? Installed in more than one place e.g.

If you want to have a “paid alpha” program or something like that, count me in! 🙂 :thumbsup:

Hey Jakub! 🙂 I’m sending a string from cljs (the api says string or function is acceptable). When I inspect the javascript using react tools the props appear as a string. However, if I inspect the semantic example code the props appear as an object. These images might help to clarify. The first one (light theme) is my non-working code. Notice that the Menu props is coming in as a string.

Here is the working example code. Notice that the Menu prop is coming in as an object.

I have a list of components, e.g. ul and li's. On each li I have an onClick event. Depending on the state of the component, I add a button with an onClick handler to a div embedded in the li. It seems as though when I click on the button both onClick events are triggered. I want to only trigger the button onClick event. I've set the z-index of the button so it's on top. Is my solution to this in Fulcro or CSS? Thanks

Answering my own question, I just don't add the onClick hander to the li when the button is also added

Sounds like the event is bubbling up. You could also call (.stopPropagation evt) in your inner handler if you don't want the parent one to be called.

I’m hoping to have an early access program in the next month or two. There are a lot of little kinks to work out, and the CLJS support will probably be a few more months out from there (assuming ppl buy it, and I can afford to keep working on it).

There is even the com.fulcrologic.fulcro.dom.events namespace with a cljc (and Cursive) friendly (stop-propagation! evt)

And the even more used prevent-default!

Awesome. Thanks! This is much better

I see. Can I see the working code that creates the dark screenshot?

https://codesandbox.io/s/zjrf2?module=/example.js&file=/example.js

Then use the react dev tools button at the bottom right to inspect the elements.

I’m having problems getting the react tools to work on http://codesandbox.io if you’re seeing the same thing I started it from https://react.semantic-ui.com/modules/sidebar/#types-sidebar To get a new instance of codesandbox just click the CodeSandbox button on the first example.

i’m afk for about 10 mins…

I see, what do you send in your code? I assume you should send something like sui/menu (if they want the factory) or try directly the JS Menu class from raw sui

I’m sending a cljs string atm which is not working 🙂

I’ll try sending sui/menu… hold on

(I'm on my phone so cannot check stuff easily so I'm hljust guessing names etc)

Question is what do they want, class, factory, or actual react element? Try all 3...

yah, the docs say “string” or “function”. Unfortunately my javascript interop skills are not great so I’m struggling to find the right invocation. I appreciate the help and please don’t interrupt what you’re doing - I’ll hack around a bit and let you know!

So, did any of that work?

getting closer but I haven’t solved it yet.. I know that I need to supply a class but I don’t know js well enough to tell cljs to pass a class directly to js…

Cool, didn't know fulcro had these util fns. I should read the entire API some day instead of reinventing the wheel all the time 😅

The error is Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. that’s why it’s working for "a" in the example (it’s built-in so it expects a string). Menu is not built-in so it expects a javascript class/function

Unfortunately, I’ve got to run for an apt.. I’ll check back in a couple of hours!

What about (:require ["semantic-ui-react" as js-sui]) and passing in js-sui/Menu?

Thanks for all the help so far! I’m delighted beyond words that yesterday, I got my first RAD report generated, so that SessionReport displays the contents of :session/all-sessions retrieved from Datomic Cloud — that was amazing! (Screenshot attached.) I then made a SessionForm, but it’s always showing an empty form — I’m pretty sure it’s because I didn’t write the resolver correctly, as it doesn’t appear to get called.

#?(:clj
    (pc/defresolver session-by-eid [{:keys [db] :as env} input]
      {::pc/input #{:db/id}
       ::pc/output [:session/title
                    :session/venue :session/start-time-utc :session/speakers :session/sched-id]}
      (queries/get-session-from-eid db input)))

#:session{:all-sessions ({:session/conf-sched-id "5348024557502565-32",
                          :session/conf-id #:db{:id 5348024557502565},
                          :session/venue "All Tracks",
                          :session/title "Opening Remarks",
                          :session/sched-id 32,
                          :session/start-time-utc #inst"2020-10-13T15:30:00.000-00:00",
                          :session/type #:db{:id 9649314045362249, :ident :session-type/plenary},
                          :db/id 1561306511442102,
                          :session/speakers "Tony Kay, Jakub Holy, :)"}
                          {}{} ...)}

Googling around, I was initially suspicious about whether I could pass in an Datomic entity-id into a resolver…. I found this in the Clojurians Slack, that seemed to indicate that you can. I’m wondering if there’s a way to more directly call this resolver…. I’ve been trying something like this from the REPL — I thought it worked before…

(com.example.components.parser/parser com.example.components.config/config
                                          [{[:db/id 70368744177664139]
                                            [:session/speakers]}])

Oops: here was the question about using entity-ids in resolvers: https://clojurians-log.clojureverse.org/pathom/2018-12-28

…and here’s my forked version of RAD demo, working in branch: thx! https://github.com/realgenekim/fulcro-rad-demo/blob/gene-experiments/src/shared/com/example/model/session.cljc#L113

Does anyone have a tip on working with nested dynamic routers with parameters? for a path /foo/<param1>/bar/<param2> Should I nest two routers one for`/foo/<param>` and one for /bar/<param2>? Intuitively I would say yes. But then there is the question on how to pass the context from the first router to the targets of the second one. Otherwise maybe it would be better to have just a single router? and have ["foo" :param1 "bar" :param2]as the route-segment?

Oops. Annotated the 2nd screenshot here.

I pass it as a computed prop but I guess the 2nd solution is worth trying, if supported at all

I believe you can pass any number of extra params to route-to or what is it called. RAD reports use it a lot. So you could modify the html5 history integration to trigger a route with these params, (route-to.. {:param1 v1, :param2 v2). Just guessing here... (RAD stores all params inside a base64 encoded EDN map in a query params, not the path, but the principle would be the same) From the book: (comp/transact! this [(r/route-to {:handler :detail :route-params {:kind kind :id id}})]))]

But that is legacy router stuff.

The second solution is superior in that it solves the context problem and it allows unique routing for a :param1 :param2 pair. The nested router solution is just easy for scoped UI that is common to all targets. Actually the nested router way could be problematic. Since the identity of the inner router isn’t depending on the first parameter. So the inner router would have the same state for /foo/VALUE1/bar/<param2> and /foo/<VALUE2/bar/<param2>

That did it! 🎉 The menus are still not rendering properly but that’s probably a different problem.