Duplicate DOM elements appear during hot reload

[den1k]

video: https://share.cleanshot.com/wkr5K4

(p/defn App []
  (p/server
    (binding [db (p/watch db/conn)]
      (p/client
        (dom/div
          (dom/h1 (dom/text "Create User"))
          (let [{handle-value ::ui/value}
                (ui/input {::dom/type        :text
                           ::dom/placeholder "handle"})

                {email-value ::ui/value}
                (ui/input {::dom/type        :text
                           ::dom/placeholder "email"})]
            (ui/button {::ui/click-event  
                        (p/fn [_]
                              (p/server
                                (println
                                  (db/create-user handle-value
                                                  email-value))))}
                       (dom/text "create user"))))))))

(def ^:export
  main
  #?(:cljs
     (p/boot
       (try
         (binding [dom/node (dom/by-id "root")]
           (App.))
         (catch Pending _)
         (catch Cancelled _)))))

#?(:clj
   (user/browser-main! `main))

[dustingetz]

this is known and wip, it happens on system teardown only. Leo proposes to fix the underlying issue in the missionary layer so it might be a month. It’s annoying me too so i might hack together a workaround - just manually removing all children of the photon-dom mount point in the hot code reload hook might work

…

On Sun, Jul 31, 2022 at 3:36 PM Dennis Heihoff ***@***.***> wrote: video: https://share.cleanshot.com/wkr5K4 (p/defn App [] (p/server (binding [db (p/watch db/conn)] (p/client (dom/div (dom/h1 (dom/text "Create User")) (let [{handle-value ::ui/value} (ui/input {::dom/type :text ::dom/placeholder "handle"}) {email-value ::ui/value} (ui/input {::dom/type :text ::dom/placeholder "email"})] (ui/button {::ui/click-event (p/fn [_] (p/server (println (db/create-user handle-value email-value))))} (dom/text "create user")))))))) (def ^:export main #?(:cljs (p/boot (try (binding [dom/node (dom/by-id "root")] (App.)) (catch Pending _) (catch Cancelled _))))) #?(:clj (user/browser-main! `main)) — Reply to this email directly, view it on GitHub <#10>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAA6J7W5EMMGJOYZZAFAH3LVW3IVRANCNFSM55FM6VAQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[den1k]

this did the trick

(def ^:export
  main
  #?(:cljs
     (p/boot
       (try
         (binding [dom/node (dom/by-id "root")]
           (when (= "dev" (env/get :env))
             (j/call (dom/by-id "root") :replaceChildren)) ; <----
           (App.))
         (catch Pending _)
         (catch Cancelled _)))))

[dustingetz]

We think this is a hung reactor (stuck during graceful shutdown) and also a second reactor starts; so the app is running twice and the old app is hung. Internal ticket is "app can hang during shutdown (switching entrypoint or hot code reloading) due to network shutting down too soon"

[dustingetz]

Committed workaround: 4fb652e

[dustingetz]

Todo: workaround needs to be added to all public repos (photon-starter-app, the replit demos, the two database browsers, etc)

[den1k]

this seems to be fixed, closing