react in lighttable

gistfile1.clj

(ns lt.plugins.user
  (:require [clojure.string :as string]
            [lt.object :as object]
            [lt.objs.tabs :as tabs]
            [lt.objs.command :as cmd])
  (:require-macros [lt.macros :refer [defui behavior]]))

(defui react-panel [this]
  [:h1 {:id "app-root"} "React + LightTable!"])

(defn el [name attr children]
  (React/createElement name, attr, children))

(defn format-time [d]
  (let [values [(.getHours d) (.getMinutes d) (.getSeconds d)]
        zero-prefixed (map (partial str "0") values)
        normalized (map #(.slice % -2) zero-prefixed)
        joined (string/join  ":"  normalized )
        ]
    joined))

(def label
  (React/createClass #js {:displayName "myLabel"
                          :render (fn [] (this-as this
                                           (el "h1" nil (str "React tick is: " (-> this .-props .-time)))))}))

;; Define an object prototype
(object/object* ::user.react-timer
                :tags [:user.hello]
                :behaviors [::on-close-timer-destroy]
                :init (fn [this]
                        (react-panel this)))


(behavior ::on-close-timer-destroy
          :triggers #{:close}
          :reaction (fn [this]
                      (js/window.clearTimeout (:interval @this))
                      (object/raise this :destroy)))


(def react-timer (object/create ::user.react-timer))

(cmd/command {:command :user.show-time
              :desc "User: Show time"
              :exec (fn []
                      (tabs/add-or-focus! react-timer)
                      (let [app-root (.getElementById js/document "app-root")
                            label-inst (React/render (el label #js {:time (format-time (js/Date.))} [])
                                                     app-root)
                            refresh-timer (fn []
                                            (prn (format-time (js/Date.)))
                                            (.setProps label-inst #js {:time (format-time (js/Date.))}))
                            interval (js/window.setInterval refresh-timer 1000)]
                            (object/merge! react-timer {:interval interval})))})

• Prevent Maximum recursion depth (set! *print-level* 5)
• Add back ([{ pairing behavior [:app :lt.objs.settings/pair-keymap-diffs]