Fixing reagent errors

reagent_errors.cljs

(ns devdemos.reagent-errors
  (:require
   [reagent.interop :refer-macros [.' .!]]
   [reagent.core :as reagent]
   [reagent.impl.component :as comp]
   [sablono.core :as sab :include-macros true])
  (:require-macros
   [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
;; --------------------------------------------------

(enable-console-print!)

(defonce shared-state-atom (reagent/atom "foo"))

(defonce other-state-atom (reagent/atom "bar"))

;; Reagent code copied (with slight modification) from
;;  http://reagent-project.github.io


(defonce Reactifier
  (js/React.createClass
   #js{:displayName "react-wrapper"
       :render
       (fn []
         (this-as this
                  (reagent/as-element
                   [(aget (.-props this) "reagent_component")
                    (-> (.' this :props)
                        comp/shallow-obj-to-map
                        ;; 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 []
      [:div
       [:hr]
       [:p "The value is now: " @val]
       [:p "Change it here: " [atom-input val]]])))


(defcard somestuff
  (reactify-component shared-state)
  shared-state-atom
  {: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)
  shared-state-atom
  {;;: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)
  other-state-atom
  {:inspect-data true
   :frame true
   :history true})