Doesn’t seem like you’ve got the state management working yet?

(ns test1
  (:require
    [com.fulcrologic.fulcro.application :as app]
    [com.fulcrologic.fulcro.components :as comp :refer [defsc]]
    [com.fulcrologic.fulcro.mutations :as m]
    [com.fulcrologic.fulcro.dom :as dom]))

(defonce app (do (println "Def app!") (app/fulcro-app)))

(defsc Counter [this {:ui/keys [n]}]
  {:query [:ui/n :counter/id]
   :ident :counter/id
   :initial-state (fn [_] {:counter/id 1 :ui/n 1})}
  (dom/button {:onClick
               (fn [evt]
                 (m/set-integer! this :ui/n :value (inc n)))}
    (str "N:" n)))

(def ui-counter (comp/factory Counter))

(defsc Root [this {:keys [counter]}]
  {:query [{:counter (comp/get-query Counter)}]
   :initial-state (fn [_] {:counter (comp/get-initial-state {})})}
  (dom/div
   (dom/h3 "Hello from Fulcro!")
   (ui-counter counter)))

(app/mount! app Root "demo-app") ; <1>

I haven’t tested it 😅

doesn’t seem to work

Thank you! I will look into it as soon as I can

wonder how we’d get inspect to work

w/o inspect it would be rather painful to debug anything of any complexity

Yeah, me to. Isn’t it enough to issue some call to get it hooked in? I am not sure how it works underneath…

It thinks the component has no ident

I’m getting a “mutation set props missing ident” error in console

My rewrite of the defsc macro could have screwed up, perhaps? I essentially copy-pasted but that might be insufficient

and yes, inspect itself is written in (old) Fulcro, and it’s just a comm protocol between the two

state database says:

{nil #:ui{:n 1}, :com.fulcrologic.fulcro.application/active-remotes #{}}

could be a problem with initial state

oh my bad!

I tried initial state in convenience mode and non convenience, but made a typo there

Nice to see that you too are human 🙂

I hate this editor, though

the paren matching is just making it impossible to edit

FYI it might be easier to use https://github.com/holyjak/sci.configs/ , follow https://github.com/holyjak/sci.configs/tree/add-fulcro#development , and then eval stuff in https://github.com/holyjak/sci.configs/blob/add-fulcro/dev/development.cljs#L25

Thx for the feedback! I have mostly focused on the plumbing and not usage. I am sure there is a ton to improve. I might have messed up integration of clojure-mode …

initial state works fine

it’s ident that has a problem I think

both lamda and shorthand version

hm…if I call get-ident manually it is ok, though

(ns test1
  (:require
    [com.fulcrologic.fulcro.application :as app]
    [com.fulcrologic.fulcro.components :as comp :refer [defsc]]
    [com.fulcrologic.fulcro.mutations :as m]
    [com.fulcrologic.fulcro.dom :as dom]))

(defonce app (do (println "Def app!") (app/fulcro-app)))

(defsc Counter [this {:ui/keys [n] :as props}]
  {:query [:ui/n :counter/id]
   :ident :counter/id
   :initial-state {:counter/id 1 :ui/n 1} }
  (dom/button {:onClick
               (fn [evt]
                 (m/set-integer! this :ui/n :value (inc n)))}
    (str "N:" n)))

(def ui-counter (comp/factory Counter))

(defsc Root [this {:keys [counter]}]
  {:query [{:counter (comp/get-query Counter)}]
   :initial-state {:counter {}}}
  (dom/div
    (dom/h3 "Hello from Fulcro!")
    (dom/div (pr-str (app/current-state this)))
    (dom/div (pr-str (comp/get-initial-state Root {})))
    (dom/div (pr-str (comp/get-ident Counter {:counter/id 3})))
    (ui-counter counter)) )

(app/mount! app Root "demo-app") ; <1>

weird

the component looks fine

(defsc Root [this {:keys [counter]}]
  {:query [{:counter (comp/get-query Counter)}]
   :initial-state {:counter {}}}
  (dom/div
    (dom/h3 "Hello from Fulcro!")
    (dom/div (pr-str (app/current-state this)))
    (dom/div (pr-str (meta (comp/get-query Counter))))
    (dom/div (pr-str (comp/get-ident (:component (meta (comp/get-query Counter))) {:counter/id 44})))
    (dom/div (pr-str (comp/get-initial-state Root {})))
    (dom/div (pr-str (comp/get-ident Counter {:counter/id 3})))
    (ui-counter counter)) )

The component is in the metadata of the query, and the get-ident works just fine from that component to generate an ident

ok, now I’m really stumped. db->tree works

There’s nothing wrong with the component or the base internal algorithm for normalization. Something about mount itself?

(defsc Root [this {:keys [counter]}]
  {:query [{:counter (comp/get-query Counter)}]
   :initial-state {:counter {}}}
  (let [s (norm/tree->db Root {:counter {:counter/id 5}} true)]
  (dom/div
    (dom/h3 "Hello from Fulcro!")
    (dom/div (pr-str s))
    (dom/div (pr-str (app/current-state this)))
    (dom/div (pr-str (meta (comp/get-query Counter))))
    (dom/div (pr-str (comp/get-ident (:component (meta (comp/get-query Counter))) {:counter/id 44})))
    (dom/div (pr-str (comp/get-initial-state Root {})))
    (dom/div (pr-str (comp/get-ident Counter {:counter/id 3})))
    (ui-counter counter))))

So, summary of my findings: • Component itself seems ok. query, initial state, embedding of component on query, ident. • Normalization alg works fine when invoked manually

Found it

component registry is empty

I would suspect that I did something wrong when rewriting macros into SCI (it was almost only copy-paste, but this does’t always yield the expected result)

Ah, yes. Comp. registry is a dyn var, and they are special.

class->registry-key on Counter returns :/Counter

so the macro pulling the “current ns” to make the registry key is broken

Though we should only be setting it from code the SCI script (the content of the editor) invokes, no? Unless defsc expands into code that tries to set it…

and for hot code reload support the components use the registry to pull the updated query (or dynamic even)

These two lines in defsc*:

nspc                             (if (cljs? env) (-> env :ns :name str) (name (ns-name *ns*)))
           fqkw                             (keyword (str nspc) (name sym))

in CLJ assumes *ns* will work, in cljs the compiler has that in &env. Don’t know for sci

Yep, for some reason, sci env lacks :ns LEt me fix it…

This is true on all of the component generating things. They need to be able to figure out the ns to make the registry key

Actually, :ns should have been there… https://github.com/holyjak/sci.configs/blob/add-fulcro/src/sci/configs/fulcro/component.cljs#L331

sci won’t let me look at the component-registry (marked private)

so I’m not sure what is in it if anything

but that would cause the misbehavior I’m seeing

If I look up the class with :/Counter I do get something back, so even though it is wrong, I think perhaps that isn’t causing the normalization problem. I can call get-query on it, and it works, so it seems like it is a functioning component. So, it may or may not be the root cause of the problem.

heh

Using development.cljs in my sci.configs, with this code in the init fn (copy of yours), I get the updates when I click the button:

(sci/eval-string* full-ctx "
    (do
      (ns test (:require 
        [com.fulcrologic.fulcro.dom :as dom]
        [com.fulcrologic.fulcro.mutations :as m]
        [com.fulcrologic.fulcro.application :as app]
        [com.fulcrologic.fulcro.react.version18 :refer [with-react18]]
        [com.fulcrologic.fulcro.algorithms.normalize :as norm]
        [com.fulcrologic.fulcro.components :as comp :refer [defsc]]))
(defonce app (-> (app/fulcro-app) with-react18))
                              
(defsc Counter [this {:ui/keys [n] :as props}]
  {:query [:ui/n :counter/id]
   :ident :counter/id
   :initial-state {:counter/id 1 :ui/n 1} }
  (dom/button {:onClick
               (fn [evt]
                 (m/set-integer! this :ui/n :value (inc n)))}
    (str \"N:\" n)))

(def ui-counter (comp/factory Counter))
                              
  (defsc Root [this {:keys [counter]}]
  {:query [{:counter (comp/get-query Counter)}]
   :initial-state {:counter {}}}
  (let [s (norm/tree->db Root {:counter {:counter/id 5}} true)]
  (dom/div
    (dom/h3 \"Hello from Fulcro!\")
    (dom/div (pr-str s))
    (dom/div (pr-str (app/current-state this)))
    (dom/div (pr-str (meta (comp/get-query Counter))))
    (dom/div (pr-str (comp/get-ident (:component (meta (comp/get-query Counter))) {:counter/id 44})))
    (dom/div (pr-str (comp/get-initial-state Root {})))
    (dom/div (pr-str (comp/get-ident Counter {:counter/id 3})))
    (ui-counter counter))))
      (app/mount! app Root \"app\"))
    ")

it does work…it’s that your hot code reload isn’t working 😄

I reloaded the page and it is fine, though the registry keys are wrong

wait, not fine…it initialized correctly, but it still won’t let me run the mutation. still says ident is missing

but normalization worked

OH WAIT: No it didn’t

I read the wrong line

The current state is completely empty now

nil

It updates when I hit the button to have junk

but only one I re-eval the code

So, yeah, updated summary: • Initial state is nil on first mount • CMD-Enter on updated code (after trying a mutation) has someething in db • So, it is initialization of the first frame db that is not happening at all

In terms of “Inspect”. Just having a formatted db you can look at is probably good enough, and that’s easy enough to do.

Where / how is initial state nil on 1st mount? When using the sci.configs development.cljs, and evaluating the code above from init + reloading the page, I get current state =

{:fulcro.inspect.core/app-id "/Root", :counter [:counter/id 1], :counter/id {1 {:counter/id 1, :ui/n 1}}, :fulcro.inspect.core/app-uuid #uuid "e0f73551-f2a4-4788-aeff-f498f7cc6148"}

I do not see the problem. Where should I look? When I get the html from https://gist.github.com/holyjak/4c7048f2fe385c1ae826c6603fbcb560 and serve it with e.g. python3 -m http.server 8888 then http://localhost:8888/dev-editor.html renders

{:counter [:counter/id 5], :counter/id {5 #:counter{:id 5}}}
State{:fulcro.inspect.core/app-id "/Root", :counter [:counter/id 1], :counter/id {1 {:counter/id 1, :ui/n 1}}}
{:component #object[Function], :queryid "/Counter"}
[:counter/id 44]
{:counter {:counter/id 1, :ui/n 1}}
[:counter/id 3]
N: 1

BTW I see why the ns is missing, I assumed that it was a string but it should be a map with :name …

FYI pushed a fix for the missing namespace, and https://blog.jakubholy.net/js/code-editor.js is updated with the fix

To summarize, I do not know how to replicate Initial state is nil on first mount and/or hot code eval issues 🙏

I was working in your blog post

mayebe it’s just the blog post version?

is it old?

Let me see…

It works there now, it seems to me. Just make sure to not use cached version of code-editor.js

cool!