Fork me on GitHub
#fulcro
<
2020-10-08
>
njj00:10:29

Where are we to store static things like images and css w/in a Fulcro project?

Mr. Savy00:10:57

typically under the resources directory

njj00:10:37

is there any easy way to access that path?

Mr. Savy01:10:00

i think that depends on how you want to/are trying to/should try to access it

zilti01:10:10

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

👍 3
njj12:10:29

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

Jakub Holý (HolyJak)20:10:37

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

Jakub Holý (HolyJak)20:10:23

Shadow-cljs has some built in stuff for embedding resources at build time but works only for a few types

Mr. Savy04:10:13

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)))))
the 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.

njj13:10:14

Is it because the id for the button isn’t the same as the id for the sidebar-contents?

cjmurphy13:10:31

The id is just a parameter that comes from the UI (i.e. from inside the render of a component).

👍 3
Mr. Savy22:10:10

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?

cjmurphy22:10:51

@U012MJU8XNU 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.

Mr. Savy22:10:50

hmmm, ok. I think that makes sense, thanks!

njj17:10:43

I’m trying to use the interop/react-factory fn to wrap material-ui components but I keep getting odd errors like:

njj17:10:02

> 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

njj17:10:02

(:require ["@material-ui/core/Container" :default Container])

(def ui-container (interop/react-factory Container))

(ui-container (dom/div "Blah")) ;; etc..

dvingo17:10:46

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

👍 3
Luis Santos18:10:31

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.

Jakub Holý (HolyJak)20:10:42

Not really, I believe. The closest is https://relay.dev regarding graph api, query on component, normalized client side cache

👍 3
Jakub Holý (HolyJak)12:10:54

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/