Clojurians Log v2
fulcro
Where are we to store static things like images and css w/in a Fulcro project?
@zilti Does this work only for clj? I can’t seem to get it to work for cljs. I’m basically trying to import an image from my resources/public dir
Uh? Import an image into what becomes Javascript file at build time? Or load it at run tine? If the latter - use <img href=<server url>>, make sure there is a static resources Middleware
Shadow-cljs has some built in stuff for embedding resources at build time but works only for a few types
https://github.com/thheller/shadow-cljs/blob/master/src/main/shadow/resource.clj
typically under the resources directory
is there any easy way to access that path?
i think that depends on how you want to/are trying to/should try to access it
When you have it in your :paths vector in deps.edn, you can access it using io/resource. So if it is in resources/test.css, it'd be (io/resource "test.css")
yoooooo I, like, halfway got it. @cjmurphy thanks for your suggestion earlier. I got it working with the local state that I had already set up, so I think I understand it well enough now. Here's what I'm threw together.
(defmutation toggle [{:keys [id]}]
(action [{:keys [state] :as env}]
(swap!-> state
(update-in [:button/id id :button/num]
#(if (= %1 1) 0 1))
(update-in [:sidebar-contents/id 2 :sidebar-contents/state]
#(if (= %1 1) 0 1)))))button case works fine, but the same can't be said for the sidebar case.
although, it does work if I hard code the id and that works for me; for now anyways.Is it because the id for the button isn’t the same as the id for the sidebar-contents?
The id is just a parameter that comes from the UI (i.e. from inside the render of a component).
I had the same id for both for testing purposes. That's a good catch though exit2. Does every id of every component have to be different?
@ajsnow2012 Think in terms of idents not components. Many component instances may share an ident - which is a row of information, like an individual person for instance. The answer to your question is 'no'. But really there's no such thing as an id of a component.
hmmm, ok. I think that makes sense, thanks!
I’m trying to use the interop/react-factory fn to wrap material-ui components but I keep getting odd errors like:
> Warning: Invalid value for prop $$typeof on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see
(:require ["@material-ui/core/Container" :default Container])
(def ui-container (interop/react-factory Container))
(ui-container (dom/div "Blah")) ;; etc..
it expects 2 arity for children: https://github.com/fulcrologic/fulcro/blob/3f0686be2e3b6c0fca53c4ece00658ab697c23f6/src/main/com/fulcrologic/fulcro/algorithms/react_interop.cljc#L22
You can make a similar helper that is more convenient, e.g.: https://github.com/dvingo/my-clj-utils/blob/master/src/main/dv/fulcro_util.cljs#L104
Is there anything similar to Fulcro in the Javascript ecosystem? Was Fulcro inspired by some framework out there? I'm talking about the it handles data, relations and revolvers. The way it handles separation of state, view and mutations feels familiar but everything else feels unique. It has similarities with GraphQL.
Fun fact: I have mostly finished a transcript of my DevFest Norway talk about Fulcro and JS alternatives https://blog.jakubholy.net/2020/talk-want-more-from-your-frontend-framework/
Not really, I believe. The closest is https://relay.dev regarding graph api, query on component, normalized client side cache