This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-12-10
Channels
- # adventofcode (174)
- # announcements (5)
- # aws (9)
- # babashka (17)
- # beginners (259)
- # boot-dev (1)
- # calva (6)
- # cider (19)
- # circleci (7)
- # clj-kondo (9)
- # cljfx (51)
- # cljs-dev (4)
- # clojure (83)
- # clojure-australia (2)
- # clojure-dev (9)
- # clojure-europe (78)
- # clojure-nl (3)
- # clojure-spec (4)
- # clojure-switzerland (1)
- # clojure-uk (18)
- # clojurescript (22)
- # conjure (17)
- # cursive (17)
- # data-science (1)
- # datomic (15)
- # defnpodcast (1)
- # events (2)
- # fulcro (39)
- # graalvm (16)
- # graphql (1)
- # kaocha (5)
- # lambdaisland (11)
- # malli (6)
- # meander (1)
- # off-topic (26)
- # pathom (10)
- # re-frame (10)
- # reitit (6)
- # rewrite-clj (7)
- # sci (3)
- # shadow-cljs (28)
- # sql (12)
- # test-check (10)
- # tools-deps (31)
I’ve fixed the bug in Inspect with network/EQL where quotes were getting lost so that “Send to EQL” was sort of a pain to use. I’m building the chrome store extension now
For those that want to install it early: https://github.com/fulcrologic/fulcro-inspect/releases/tag/chrome-3.0.3
I’m sorry if this is something obvious I’ve missed but I’ve been stuck on this for a few hours: I can’t seem to load initial-state in my sub components (defined with defsc). Eg:
(defsc EntryPanel [_ {:user/keys [name]}]
{:query [:user/name]
:initial-state {:user/name "Aleksander"}
:ident (fn [] [:component/id :entry/panel])
}
(ui/view {:style (tw :w-full :flex-1 :p-5 :align-start :justify-start)}
(comp/fragment
(ui/text {:style (tw :text-sm :mb-1 :text-primary)} "Mon, Nov 17")
(ui/text {:style (tw :text-2xl :mb-2 :text-primary)} (str "Good morning, " (.stringify js/JSON params)))
(ui/text {:style (tw :text-lg :text-primary)} "What did you eat today??")
(ui-new-entry-overlay))))
(def ui-entry-panel (comp/factory EntryPanel))
// In root:
(defsc Root [_ {:root/keys [random]}]
{:query [:root/random]
:initial-state {:root/random "Yo Bro"}}
(ui/safe-area-view
{:style (tw :items-center :px-0 :justify-center
:bg-white :flex-1 :h-full :flex-col)}
(ui/text
random)
(ui-entry-panel {})))
• Nothing shows up in the database in fulcro inspect for EntryPanel (or rather :user/name doesn’t show up)
• It’s not in the parameters I’m printing on the screen either
• :root/random does work exactly as expected
• the initial state dooes show up when I explicitly call (comp/get-initial-state EntryPanel {})
in the replhas to be composed to root @aleksander990
initial state is about the very first animation frame in the entire program, and is a complete graph from root
use mutations and loads to join run-time objects into the view graph. Fulcro uses (by default) a complete reified data graph of the view
if you want to “hang” a floating root (not connected in data graph) in your UI, you use the multi-root renderer. There’s a demo of that in the workspaces of Fulcro…and I think it’s documented in book. https://github.com/fulcrologic/fulcro/blob/develop/src/workspaces/com/fulcrologic/fulcro/cards/multi_root_cards.cljs
specifically item 2 in https://book.fulcrologic.com/#_adding_initial_state_to_components
Floating roots: https://book.fulcrologic.com/#_using_fulcro_component_classes_in_vanilla_js_detached_subtrees
Arhh, ok. I think it’s startinng to make sense
So basically this:
(defsc Root [_ {:root/keys [entry-panel]}]
{:query [:root/entry-panel]
:initial-state {:root/entry-panel (comp/get-query EntryPanel)}}
(ui/safe-area-view
{:style (tw :items-center :px-0 :justify-center
:bg-white :flex-1 :h-full :flex-col)}
(ui-entry-panel entry-panel)))
FYI If you upgrade to the latest Fulcro (which is safe to do), you will get better error checking that would prevent you from mixing a template-form init. state with function calls.
I’m planning on writing a small internal one for new engineers as I bring them on board. So I hope I’ll be able to give something back to this amazing project you’ve built
95% of beginner problems are: didn’t fully grok query/ident/initial-state basics. There’s actually very little to them…it might be helpful to watch this old whiteboard talk I gave on “Untangled”, back when Om Next was still part of the internals. This is probably true for most ppl, I just hate recommending it when it isn’t right for F3, but the GRAPH info and initial state stuff has not changed (though the API and internals are a bit diff): https://www.youtube.com/watch?v=mT4jJHf929Q&list=PLVi9lDx-4C_T_gsmBQ_2gztvk6h_Usw6R&index=8&t=1578s&ab_channel=TonyKay
I really need to redo that video and bring the API and terminology up-to-date…is so very useful I think.
@U0CKQ19AQ this was really great. Super nice way to understand the basics. I feel like I have a much better grasp on how everything fits together
I just don’t have a whiteboard right now, or I’d do it over…it’s the right thing for beginners
Absolutely. I had a mental disconnect between the view nodes in the graph and the data that's loaded. It makes a lot of sense to explicitly connect the data to views (as opposed to doing a filter on every render over the entirety of the data). I took a bunch of note that I expect will help future team members
And understanding why I need to go through the root to initiate app state makes a lot more sense now as well
arhh of course
i.e. {:root/entry-panel {}}
=== (fn [params] {:root/entry-panel (get-initial-state EntryPanel {})})
Like this?
(defsc Root [_ {:root/keys [entry-panel]}]
{:query [:root/entry-panel]
:initial-state {:root/entry-panel {}}}
(ui/safe-area-view
{:style (tw :items-center :px-0 :justify-center
:bg-white :flex-1 :h-full :flex-col)}
(ui-entry-panel entry-panel)))
It worked when I did it with get-initial-state explicitly but the “short-hand magic” doesn’t seem to
do I then do this down in EntryPanel
(fn [params] {:root/entry-panel (get-initial-state EntryPanel {})})
{:root/entry-panel [{:id 1} {:id 2} {:id 3}]}
=== `(fn [params] {:root/entry-panel [(get-initial-state EntryPanel {:id 1}) (get-initial-state EntryPanel {:id 2} ...]})`
Thank you, by the way. Unblocked and moving forward. This is awesome. And the inspect tool is a game changer
FYI If you upgrade to the latest Fulcro (which is safe to do), you will get better error checking that would prevent you from mixing a template-form init. state with function calls.