Fork me on GitHub
#fulcro
<
2020-12-10
>
tony.kay18:12:18

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

❤️ 9
tony.kay18:12:04

Version 3.0.3 of Chrome extension submitted for review.

Aleksander Rendtslev23:12:08

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 repl

tony.kay23:12:56

has to be composed to root @aleksander990

tony.kay23:12:20

initial state is about the very first animation frame in the entire program, and is a complete graph from root

tony.kay23:12:26

it is not a constructor

tony.kay23:12:55

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

tony.kay23:12:04

it is literally View = F(state)

tony.kay23:12:27

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

Aleksander Rendtslev23:12:53

Arhh, ok. I think it’s startinng to make sense

Aleksander Rendtslev23:12:18

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

holyjak08:12:25

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.

tony.kay23:12:25

common misunderstanding. I need to write a 3 page “things you MUST know” doc 😜

🙏 3
Aleksander Rendtslev23:12:00

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

👍 3
tony.kay23:12:11

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&amp;list=PLVi9lDx-4C_T_gsmBQ_2gztvk6h_Usw6R&amp;index=8&amp;t=1578s&amp;ab_channel=TonyKay

🙌 15
tony.kay23:12:50

I really need to redo that video and bring the API and terminology up-to-date…is so very useful I think.

Aleksander Rendtslev20:12:06

@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

tony.kay20:12:22

I just don’t have a whiteboard right now, or I’d do it over…it’s the right thing for beginners

Aleksander Rendtslev20:12:54

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

Aleksander Rendtslev20:12:25

And understanding why I need to go through the root to initiate app state makes a lot more sense now as well

tony.kay23:12:46

no, get-initial-state

tony.kay23:12:48

not get-query

tony.kay23:12:55

you do need to join the query too

tony.kay23:12:03

and initial-state has magic (it can use query)

tony.kay23:12:14

i.e. {:root/entry-panel {}} === (fn [params] {:root/entry-panel (get-initial-state EntryPanel {})})

Aleksander Rendtslev23:12:47

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

Aleksander Rendtslev23:12:14

It worked when I did it with get-initial-state explicitly but the “short-hand magic” doesn’t seem to

Aleksander Rendtslev23:12:17

do I then do this down in EntryPanel

(fn [params] {:root/entry-panel (get-initial-state EntryPanel {})}) 

tony.kay23:12:33

just a shorthand, but super handy…also works in to-many rels

tony.kay23:12:28

{: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} ...]})`

Aleksander Rendtslev23:12:01

Thank you, by the way. Unblocked and moving forward. This is awesome. And the inspect tool is a game changer