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

Version 3.0.3 of Chrome extension submitted for review.

For those that want to install it early: https://github.com/fulcrologic/fulcro-inspect/releases/tag/chrome-3.0.3

https://github.com/fulcrologic/fulcro-inspect/releases/tag/electron-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 {})))

has 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

it is not a constructor

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

it is literally View = F(state)

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

https://book.fulcrologic.com/#_initial_application_state

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

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

no, get-initial-state

not get-query

arhh of course

my bad

you do need to join the query too

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

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

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

{: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