a guest Nov 21st, 2019 111 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. (ns simple-reagent-webcomponent (:require [reagent.core :as re]))
  3. (defn webcomponent! [name view-component]
  4.   (let [;; defines the constructor function, which is the "class" object used by the customElements api
  5.         component (fn component [] (let [e
  6.                                          ;; this is the equivalent of the call to "super"
  7.                                          (js/Reflect.construct js/HTMLElement #js [] component)]
  8.                            (js/console.log (str name ": Constructed!"))
  9.                            (set! (.-shadow e) (.attachShadow e #js {:mode "open"}))
  10.                            e))]
  11.     (set! (.-prototype component)
  12.           ;; establishes prototype hierarchy
  13.           (js/Object.create (.-prototype js/HTMLElement)
  14.                             #js {:connectedCallback
  15.                                  #js {:configurable true
  16.                                       :value        (fn []
  17.                                                       (this-as this
  18.                                                         ;; attaches the reagent process to the shadow dom
  19.                                                         (re/render [view-component] (.-shadow this))
  20.                                                         (js/console.log (str name ": Connected! ") this)))}}))
  22.     ;;finally, defines the component with these values
  23.     (js/window.customElements.define name component)
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