levand / quiescent

A lightweight ClojureScript abstraction over ReactJS
Eclipse Public License 1.0
613 stars 46 forks source link

Adding proper unmounting capabilities. #37

Closed mmavko closed 9 years ago

mmavko commented 9 years ago

This little fix enables us to write this kind of wrapper:

(q/defcomponent SelfUpdatingWrapper
  []
  (letfn [(render [node] (q/render (Main @world) node))]
    (q/wrapper
     (html [:div])
     :onMount (fn [node]
                (let [renderer (partial render node)]
                  (renderer)
                  (add-watch world "renderer-id" renderer)))
     :onWillUnmount (fn [node]
                      (remove-watch world "renderer-id")
                      (q/unmount-at-node node)))))

Exposing this component like

(def ^:export component SelfUpdatingWrapper)

gives the ability to use it as a regular component in another ReactJS project:

ClojureScriptComponent = React.createClass({
  render: function() {
    return clojurescriptproject.namespace.component();
  }
});

Now I can freely mount/unmount ClojureScriptComponent within any ReactJS project while it is sandboxed in its own "world". That's what we're doing currently in our project in production.