SHARE
TWEET

Untitled

a guest Oct 9th, 2019 90 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. (s/def ::element
  2.        (s/cat :type (s/or :htmltag keyword?
  3.                           :component symbol?)
  4.               :props (s/? (s/map-of keyword? any?))
  5.               :children (s/* (s/or :text-node string?
  6.                                    :element ::element))))
  7.  
  8. (s/def ::component
  9.        (s/cat :name symbol?
  10.               :props-signature (s/spec (s/cat :props any?))
  11.               :body any?))
  12.  
  13.  
  14. (defn create-element [{:keys [type children props]}]
  15.   `(react/createElement
  16.      ~(case (key type)
  17.         :htmltag (-> type val name)
  18.         :component (-> type val))
  19.      ~(when props
  20.         (let [process-keys '(fn [[k v]]
  21.                               (case k
  22.                                 :style [:style (clj->js v)]
  23.                                 [k v]))]
  24.           `(cljs-bean.core/object
  25.              (into (cljs-bean.core/bean)
  26.                    (map ~process-keys ~props)))))
  27.      ~@(when children
  28.          (map
  29.            (fn [node]
  30.              (case (key node)
  31.                :text-node (val node)
  32.                :element (-> node val create-element)))
  33.            children))))
  34.  
  35.  
  36. (defmacro jsx [react-tree]
  37.   (let [ast (s/conform ::element react-tree)]
  38.     (create-element ast)))
  39.  
  40. (defmacro defcomponent [& args]
  41.   (let [{:keys [name props body]} (s/conform ::component args)]
  42.     (list 'defn
  43.           name
  44.           ['props]
  45.           (list 'let ['props '(cljs-bean.core/bean props)]
  46.                 body))))
  47.  
  48. (defcomponent Form [props]
  49.   (let [[state setState] (react/useState (-> props :input :default))]
  50.     (jsx
  51.       [:input
  52.        {:placeholder "hello world"
  53.         :value state
  54.         :onChange #(setState (-> % .-target .-value))}])))
  55.  
  56.  
  57. (defn app []
  58.   (println "whesh")
  59.   (jsx
  60.     [:div {:style {:background-color "red"}} "hello"
  61.      [:p "world"]
  62.      [Form {:input {:default "mdr"}}]]))
  63.  
  64.  
  65. (react-dom/render
  66.   (jsx
  67.     [app])
  68.   app-root)
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top