Skip to content

Instantly share code, notes, and snippets.

@polymeris
Last active June 24, 2023 03:39
Show Gist options
  • Save polymeris/5e117676b79a505fe777df17f181ca2e to your computer and use it in GitHub Desktop.
Save polymeris/5e117676b79a505fe777df17f181ca2e to your computer and use it in GitHub Desktop.
re-frame + reagent + figwheel app running in the console
(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)
(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]}}})
lein clean
lein figwheel
# in a separate terminal:
node target/js/compiled/hello_react_blessed.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment