Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Fixing reagent errors
(ns devdemos.reagent-errors
[reagent.interop :refer-macros [.' .!]]
[reagent.core :as reagent]
[reagent.impl.component :as comp]
[sablono.core :as sab :include-macros true])
[cljs-react-reload.core :refer [defonce-react-class]]
[devcards.core :as dc :refer [defcard deftest]]))
;; --------------------------------------------------
;; This replaces the core.cljs from devcards-template
;; Make sure to add [reagent "0.5.1"] to project.clj
;; --------------------------------------------------
(defonce shared-state-atom (reagent/atom "foo"))
(defonce other-state-atom (reagent/atom "bar"))
;; Reagent code copied (with slight modification) from
(defonce Reactifier
#js{:displayName "react-wrapper"
(fn []
(this-as this
[(aget (.-props this) "reagent_component")
(-> (.' this :props)
;; ensure re-render, might get mutable js data
(assoc :-elem-count
(set! comp/elem-counter
(inc comp/elem-counter))))])))}))
(defn reactify-component [comp]
(js/React.createElement Reactifier #js {:reagent_component comp}))
(defn atom-input [value]
[:input {:type "text"
:value @value
:on-change #(reset! value (-> % .-target .-value))}])
(defn shared-state []
(let [val shared-state-atom]
(fn []
[:p "The value is now: " @val]
[:p "Change it here: " [atom-input val]]])))
(defcard somestuff
(reactify-component shared-state)
{:inspect-data true})
(defcard reagent-without-atom
"Reagent devcard that doesn't pass the atom to defcard.
Editing this works fine."
(dc/reagent shared-state))
(defcard reagent-with-atom
"Reagent devcard that passes its atom to defcard.
Editing this loses focus on each keystroke."
(dc/reagent shared-state)
{;;:inspect-data true
;:history true
(defcard reagent-with-other-atom
"Reagent devcard that passes a different atom to defcard.
Editing this works fine."
(dc/reagent shared-state)
{:inspect-data true
:frame true
:history true})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.