Pushed 0.0.8 of Incubator to clojars with some improvements on pmutate!. Makes sure mutation refresh declarations are honored, and adds a mutation response during the loading phase to a declared target. Might not work with advanced targeting, though…

Fulcro 2.6.10 on Clojars. Some bug fixes around unhappy paths of networking. This also adds network activity support in app state, and as an app-accessible thing. The app state allows you to see mutation and load activity, and a new defer functions allows you to schedule a callback for the next time the network is idle. The last one is part of the server-render namespace, and is meant for doing server-side rendering using a headless client and loopback rendering with node. Contributed by @claudiu

Updated developers guide to cover that

I'm having a bad time trying to apply CSS to any component within fulcro I've already tried all exemples of fulcro's guide. Colocated CSS, injected CSS, CSS Localized DOM. It just doesn't apply .

(defsc Component [this props comp {:keys [a]}]
  {:css [[:.a {:color :red}]]}
  (dom/div {:className a} "Hi!"))

@patrickcms hello, had you injected the css in the page?

@wilkerlucio Hello! Yes, I tried doing it with injection, but since I'm not sure about how to do this, I can't tell if my exemple would work. Do you have an exemple of a simple component with injected css?

@patrickcms It’s covered in http://book.fulcrologic.com

use a style-element or upsert-css

Hello @tony.kay ! I did read the guide, but I still don't understand how to do it. If you have an simple-exemple-component, it will help me a lot!

what about the “Show/Hide” source on the live demo in the book can I expand on? It is all right there

If you’re using the new stuff: (cssi/style-element {:component Component}), which can be done inside of the component, or at the root…if you use the new stuff, you can just use Root, assuming things are composed with queries

Hi, case anyone is interested I made a small example app with fulcro+shadow-cljs that has nodejs SSR (including network data fetch) https://github.com/claudiu-apetrei/fulcro-nodejs-ssr-example

Are there functions to convert a form’s data diff into a datomic datom? Specially handling the nested forms case (I can handle that myself, just wondering if it exists somewhere)

Hi, I am trying to use the bootstrap3/Dropdown component. The component I want to have the Dropdown on is not Root but inside nested routers as per the examples in the Routing Examples. If I have some static Dropdown in initial-state of the Page as in the Dev Guide examples it works. But the Options on my dropdown are not static and not part of the Query (from the Serve). I populate them using fulcro.ui.bootstrap3/dropdown. I can not figure out, how to get this into app-state so it normalizes correctly. Where would be an idiomatic place to calculate/trigger merge/transact into app-state? As a follow up to the load or on the UI inside the nested Router? Which of the merge or transact functions would be idiomatic and where do I get the query to go with the merge?

@magra you can use a post-mutation after a load to populate the dropdown

@pvillegas12 which function would you use to normalize?

Normalization is achieved with idents on components

you can define a component that normalizes your dropdown options

would you use fulcro.client.mutations/merge! for that? How do I use the component in the post-mutation?

Use prim/merge-component within the post-mutation passing the component responsible for the normalization

you pass in the component as arguments to the post mutation with post-mutation-params

http://book.fulcrologic.com/#LoadOptions

@pvillegas12 Thanks! I will keep trying in that direction!

Hi, is there a way to get access to children in functional components like in js react? When using fulcro I've only managed to get children to work with defsc. What I'm looking for is to be able to do the equivalent of this javascript in cljs:

export default Button({ onClick, children }) {
  return (
    <button onClick={onClick}>children</button>
   );
}

<Button onClick={onClick}>do something></Button> // do something passed as `children`.

yes @pontus.colliander

(defn button [onClick yield]
  (dom/button {:onClick onClick} yield))
(button on-click (dom/p "do something"))

I tried that but called the second argument "children" but then it didn't work. Thanks 🙂

@pvillegas12 Just to be sure: prim/merge-component or prim/merge-component!? Bang or no bang?

depends, if called within a mutation, without the !

(convention which holds in general)

So write a mutation which calls prim/merge-domponent! and feed that as a postmutation to load?

write a mutation which calls prim/merge-component within it as post-mutation to the load

Thanks!

@pontus.colliander (prim/children this)

is that not in the book?

http://book.fulcrologic.com/#_children

And a note on conventions to all…early versions of Untangled (which preceeded Fulcro) were evolving the conventions. Some of us were rather new to Clojure. The “normal” convention of ! means side-effecting, and the lack of it loosely implies not…but that isn’t guaranteed. The * suffix is my convention for a “mutation helper”…that is: a function (fn [state-map …] state-map) that can be used to compose operations within a mutation.

merge-component (without the !) should therefore have a * on it…but it was a very early one. We’re slowly trying to deprecate the old names and create versions that follow this convention.

I feel the suffix is really helpful because there is a whole class of code you write in Fulcro in mutations, and those particular functions apply there, so having them show up in things like intellisense is nice.

Fulcro Incubator 0.0.9 released. After yesterday’s discussion about flicker-free io progress (and Reacts new craziness to try to get it) I felt it might be a good time to create some helpers, docs, and demos to show how to do it in Fulcro…the new pmutate! and pre-existing load markers combine nicely to get a single unified thing, which is in this release.

The result needs about 4 lines added to your component:

(defsc TodoItem [this {:keys [item/label item/done?]}]
  {:query              [:db/id :item/label :item/done?
                        ::pm/mutation-response]     ; THIS: make sure the mutation response is in props
   :ident              [:todo-item/by-id :db/id]
   :componentDidUpdate (fn [pp _] (ip/update-loading-visible! this pp)) ; THIS: does the timeout magic
   :initial-state      {:db/id :param/id :item/label :param/label :item/done? false}}
  ;; THESE TWO: pull the indicators (first one is "delayed", latter is "immeidate")
  (let [delayed?  (prim/get-state this :loading-visible?)
        disabled? (ip/busy? this)]
    (dom/li
      (dom/input {:type     "checkbox"
                  :disabled disabled?
                  :checked  done?
                  :onChange (fn [] (pm/pmutate! this `pretend-to-mark {:new-value (not done?)}))})
      (when delayed?
        (dom/span "..."))
      label)))

Running demo at: https://fulcrologic.github.io/fulcro-incubator/

flicker-free-ws…the card is a bit hard to resize…I should fix the starting size 😕

it has two simulated remotes. Mutations go to the slow one, and loads you can choose

Thanks! Once I get how to think about it prim/merge-component called from the post-mutation works like a charm.

Pushed 0.0.10 of incubator to clojars with update-io-progress!, an improved function that works the same as above, but gives you separate indications for load vs mutation