Dev tools

Dump state to console on hover + key press

You can use this snippet to dump the react state when pressing CTRL+SHIF+e while hovering over a component.

You might want to further pick your state apart and dump them on several console lines (:rum/local, :rum/args etc...)

(:require
  [goog.object :as gobj]
  [goog.events :as events]
  [goog.ui.KeyboardShortcutHandler.EventType :as EventType])
(:import
  [goog.ui KeyboardShortcutHandler])

(defn log-component-name-under-mouse
  []
  (when-some [owner (some-> (prim-seq (js/document.querySelectorAll ":hover"))
                            last
                            (gobj/findValue (fn [v k] (.startsWith k "__reactInternalInstance")))
                            (aget "_debugOwner"))]
    (let [st (some-> owner .-stateNode .-state (aget ":rum/state") deref)]
      (js/console.info "Key: " (.-key owner))
      (js/console.info "Rum state: " st))))

(when ^boolean goog/DEBUG
  (defonce react-inspector-dev
    (let [handler (KeyboardShortcutHandler. js/window)]
      (.registerShortcut handler "x" "CTRL+SHIFT+e")
      (events/listen handler EventType/SHORTCUT_TRIGGERED #(log-component-name-under-mouse)))))