re-frame + reagent + figwheel app running in the console

core.cljs

(ns hello-react-blessed.core
  (:require
   [cljs.nodejs :as nodejs]
   [reagent.core :as reagent]
   [re-frame.core :as rf]
   [blessed :as blessed]                                    ; or use neo-blessed
   ["react-blessed" :as rb]
   [ws]))

(defonce logger (reagent/atom []))

(defonce screen (blessed/screen #js {:autoPadding true
                                     :smartCSR    true
                                     :title       "Hello react blessed"}))

(defonce render (rb/createBlessedRenderer blessed))

(.key screen #js ["escape" "q" "C-c"] #(.exit js/process 0))

(defn dispatch-timer-event
  []
  (let [now (js/Date.)]
    (rf/dispatch [:timer now])))

(defonce do-timer (js/setInterval dispatch-timer-event 1000))

;; events & subs below copied from one of the official re-frame examples

(rf/reg-event-db
 :initialize
 (fn [_ _]
   {:time (js/Date.)}))

(rf/reg-event-db
 :timer
 (fn [db [_ new-time]]
   (assoc db :time new-time)))

(rf/reg-sub
 :time
 (fn [db _]
   (:time db)))

(rf/reg-sub
 :db
 (fn [db _]
   db))

(defn clock
  []
  [:text
   {:left    0
    :top     0
    :height  2
    :width   50
    :content (-> @(rf/subscribe [:time])
                 .toTimeString
                 (clojure.string/split " ")
                 first)}])


(defn log-box [n]
  [:text#log
   {:bottom     0
    :right      0
    :width      "50%"
    :height     n
    :style      {:fg :yellow :bg :grey}
    :scrollable true
    :content    (->> (take-last n @logger)
                     (clojure.string/join "\n"))}])

(defn debug-box [{:keys [height]}]
  [:text#debug {:bottom 0
                :left   0
                :width  "100%"
                :style  {:border {:fg :yellow}}
                :border {:type :line}
                :label  "Debug info"}
   [:text {:width   "40%"
           :content (str @(rf/subscribe [:db]))}]
   [log-box (dec height)]])

(defn example [_]
  [:box#base {:left   0
              :right  0
              :width  "100%"
              :height "100%"}
   [:box {:bottom 11
          :label  "Box label"
          :border {:type :line}}
    [clock]]
   [debug-box {:height 10}]])


(defn load []
  (-> (reagent/reactify-component example)
      (reagent/create-element #js {})
      (render screen)))

(defn -main []
  (rf/dispatch-sync [:initialize])
  (load))

(defn log-fn [& args]
  (swap! logger conj (clojure.string/join " " args)))

;; Hack to prevent figwheel, which prints to console.log, overwriting the "render"

(set! (.-log js/console) log-fn)

(re-frame.loggers/set-loggers! {:log log-fn, :warn log-fn})

(set! *main-cli-fn* -main)

project.clj

(defproject hello-react-blessed "0.1.0-SNAPSHOT"
  :description "FIXME: write this!"
  :url "http://example.com/FIXME"
  :min-lein-version "2.7.1"
  :dependencies [[org.clojure/clojure "1.9.0"]
                 [org.clojure/clojurescript "1.10.439"]
                 [reagent "0.8.1" :exclusions [[cljsjs/react]
                                               [cljsjs/react-dom]
                                               [cljsjs/create-react-class]]]
                 [re-frame "0.10.6"]]
  :plugins [[lein-cljsbuild "1.1.7" :exclusions [[org.clojure/clojure]]]
            [lein-figwheel "0.5.17"]]
  :source-paths ["src"]
  :clean-targets ["target" "node_modules" "package.json" "package-lock.json"]
  :cljsbuild {:builds [{:id           "dev"
                        :source-paths ["src"]
                        :figwheel     {:on-jsload "hello-react-blessed.core/load"}
                        :compiler     {:main                 hello-react-blessed.core
                                       :asset-path           "target/js/compiled/dev"
                                       :output-to            "target/js/compiled/hello_react_blessed.js"
                                       :output-dir           "target/js/compiled/dev"
                                       :target               :nodejs
                                       :optimizations        :none
                                       :source-map-timestamp true
                                       :npm-deps             {:blessed            "0.1.81"
                                                              :neo-blessed        "0.2.0" ; Optional
                                                              :react-blessed      "0.5.0"
                                                              :react              "16.6.3"
                                                              :react-dom          "16.6.3"
                                                              :create-react-class "15.6.3"
                                                              :ws                 "6.1.2"}
                                       :install-deps         true}}
                       {:id           "prod"
                        :source-paths ["src"]
                        :compiler     {:output-to     "target/main.js"
                                       :output-dir    "target/js/compiled/prod"
                                       :target        :nodejs
                                       :optimizations :simple
                                       :npm-deps      {:blessed            "0.1.81"
                                                       :react-blessed      "0.5.0"
                                                       :react              "16.6.3"
                                                       :react-dom          "16.6.3"
                                                       :create-react-class "15.6.3"}
                                       :install-deps  true}}]}
  :profiles {:dev {:dependencies [[figwheel-sidecar "0.5.13"]
                                  [com.cemerick/piggieback "0.2.2"]]
                   :repl-options {:nrepl-middleware [cemerick.piggieback/wrap-cljs-repl]}}})

re-frame+react-blessed

lein clean
lein figwheel
# in a separate terminal:
node target/js/compiled/hello_react_blessed.js