helix

Melody 2024-11-03T17:25:04.299269Z

After messing around for a bit with helix I got to the point where I am at least displaying things, and I was trying to get hot reloading to work and got it to work in what seems to me a kind of dumb/silly way

(ns tic-tac-toe.main
  (:require ["react-dom/client" :as rdom]
            #_["react-router-dom" :as rr]
            [helix.core :refer [defnc $]]
            [helix.core :as hx :refer [$ <>]]
            [helix.dom :as d]
            [helix.hooks :as hooks]
            [helix.experimental.refresh :as refresh]))

(defnc app []
  (d/div
   (d/h1 "Hello from Helix!")
   (d/p "Web app test")))

(def root (rdom/createRoot (js/document.getElementById "tic-tac-toe")))

(defn ^:dev/after-load after-load []
  (.render root ($ app))
  (refresh/refresh!))

(defn ^:export init
  []
  (.render root ($ app))
  (refresh/refresh!))
Particularly the last two functions there In particular I don't know if I am *actually supposed to be calling .render on after-load because I thought for some reason that it should really only render once and then refresh and maybe there was another way to render the page. This is working but I don't know if this is the 'correct' way to get auto reloading.

lilactown 2024-11-03T19:42:10.083449Z

you should only have to call refresh! on reload

lilactown 2024-11-03T19:42:51.858679Z

most likely what's happening is when this file reloads, root gets redefined and creates a new root, so you have to call .render on it again

lilactown 2024-11-03T19:43:01.532939Z

you can fix this by using defonce

lilactown 2024-11-03T19:43:43.400219Z

https://github.com/lilactown/helix/blob/32178efcdc38b1e94a01212220018d74f90859d6/dev/refresh_example.cljs is a demo of how to set up a basic example similar to what you're doing

lilactown 2024-11-03T19:44:51.170939Z

you're also missing inject-hook! which is important so that the react-refresh machinery will track which components are rendered for the active roots

Melody 2024-11-03T21:27:47.603419Z

Got it and yes I took refresh! out of init and it still works and I will use inject-hook! as well. Thank you!