Reagent
This commit is contained in:
Michiel Borkent
parent
b10fa0e9ca
commit
347903bd29
5 changed files with 18 additions and 137 deletions
14
README.md
14
README.md
|
|
@ -13,12 +13,11 @@ for a minimal full stack web application.
|
||||||
See [releases](https://github.com/babashka/scittle/releases) for links to
|
See [releases](https://github.com/babashka/scittle/releases) for links to
|
||||||
[JSDelivr](https://www.jsdelivr.com) to get versioned artifacts.
|
[JSDelivr](https://www.jsdelivr.com) to get versioned artifacts.
|
||||||
|
|
||||||
## Developing with scittle
|
## Serving assets
|
||||||
|
|
||||||
### Serving assets
|
|
||||||
|
|
||||||
To serve assets you can use the
|
To serve assets you can use the
|
||||||
[babashka.http-server](https://github.com/babashka/http-server) dependency:
|
[babashka.http-server](https://github.com/babashka/http-server) dependency (with
|
||||||
|
babashka or Clojure JVM):
|
||||||
|
|
||||||
``` clojure
|
``` clojure
|
||||||
(require '[babashka.http-server :as http])
|
(require '[babashka.http-server :as http])
|
||||||
|
|
@ -41,7 +40,8 @@ In babashka or Clojure JVM, use the
|
||||||
|
|
||||||
This will run an nREPL server on port 1339 and a websocket server on port 1340.
|
This will run an nREPL server on port 1339 and a websocket server on port 1340.
|
||||||
Your editor's nREPL client will connect to port 1339 and your browser, running
|
Your editor's nREPL client will connect to port 1339 and your browser, running
|
||||||
scittle, will connect to port 1340.
|
scittle, will connect to port 1340. The nREPL server forwards messages to the
|
||||||
|
browser via the websocket connection.
|
||||||
|
|
||||||
In your scittle website, you will need to include the following, in addition to
|
In your scittle website, you will need to include the following, in addition to
|
||||||
the normal routine:
|
the normal routine:
|
||||||
|
|
@ -60,6 +60,10 @@ Also include the CLJS file that you want to evaluate with nREPL:
|
||||||
Then visit `cljs/script.cljs` in your editor and connect to the nREPL server,
|
Then visit `cljs/script.cljs` in your editor and connect to the nREPL server,
|
||||||
and start evaluating!
|
and start evaluating!
|
||||||
|
|
||||||
|
See the `resources/public/nrepl.html` file for an example. When you run `bb dev`
|
||||||
|
in this repository, and then open `http://localhost:1341/nrepl.html` you should
|
||||||
|
be able evaluate expressions in `resources/public/cljs/nrepl_playground.cljs`.
|
||||||
|
|
||||||
## Tasks
|
## Tasks
|
||||||
|
|
||||||
Run `bb tasks` to see all available tasks:
|
Run `bb tasks` to see all available tasks:
|
||||||
|
|
|
||||||
4
deps.edn
4
deps.edn
|
|
@ -11,7 +11,9 @@
|
||||||
|
|
||||||
io.github.babashka/sci.nrepl
|
io.github.babashka/sci.nrepl
|
||||||
#_{:local/root "../sci.nrepl"}
|
#_{:local/root "../sci.nrepl"}
|
||||||
{:git/sha "e83421ce9349c36df56a2eb936196dbb65b0de63"}}
|
{:git/sha "e83421ce9349c36df56a2eb936196dbb65b0de63"}
|
||||||
|
io.github.babashka/sci.configs
|
||||||
|
{:git/sha "fcd367c6a6115c5c4e41f3a08ee5a8d5b3387a18"}}
|
||||||
|
|
||||||
:aliases
|
:aliases
|
||||||
{:dev
|
{:dev
|
||||||
|
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
(ns nrepl)
|
|
||||||
|
|
||||||
(+ 1 2 3)
|
|
||||||
|
|
||||||
(->
|
|
||||||
(js/document.getElementsByTagName "body")
|
|
||||||
first
|
|
||||||
(.append
|
|
||||||
(doto (js/document.createElement "p")
|
|
||||||
(.append
|
|
||||||
(js/document.createTextNode "there")))))
|
|
||||||
|
|
||||||
(defn foo [])
|
|
||||||
|
|
||||||
(js/alert "Isn't this cool? :)")
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
<script src="js/scittle.js" type="application/javascript"></script>
|
|
||||||
<script>var SCITTLE_BROWSER_REPL_PROXY_PORT = 1340;</script>
|
|
||||||
<script src="js/scittle.nrepl.js" type="application/javascript"></script>
|
|
||||||
<script type="application/x-scittle" src="cljs/nrepl.cljs"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>Scittle</h1>
|
|
||||||
<h2>What is this?</h2>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,106 +1,10 @@
|
||||||
(ns scittle.reagent
|
(ns scittle.reagent
|
||||||
(:require [reagent.core :as r]
|
(:require
|
||||||
[reagent.debug :as d :refer-macros [dev?]]
|
[reagent.dom :as rdom]
|
||||||
[reagent.dom :as rdom]
|
[sci.configs.reagent.reagent :refer [reagent-debug-namespace
|
||||||
[reagent.ratom :as ratom]
|
reagent-namespace reagent-ratom-namespace]]
|
||||||
[sci.core :as sci]
|
[sci.core :as sci]
|
||||||
[scittle.core :as scittle]))
|
[scittle.core :as scittle]))
|
||||||
|
|
||||||
;; The with-let macro from reagent.core. The only change is that the
|
|
||||||
;; interop/unchecked-aget+set were replaced by aget and aset.
|
|
||||||
(defn ^:macro with-let [_ _ bindings & body]
|
|
||||||
(assert (vector? bindings)
|
|
||||||
(str "with-let bindings must be a vector, not "
|
|
||||||
(pr-str bindings)))
|
|
||||||
(let [v (gensym "with-let")
|
|
||||||
k (keyword v)
|
|
||||||
init (gensym "init")
|
|
||||||
;; V is a reaction, which holds a JS array.
|
|
||||||
;; If the array is empty, initialize values and store to the
|
|
||||||
;; array, using binding index % 2 to access the array.
|
|
||||||
;; After init, the bindings are just bound to the values in the array.
|
|
||||||
bs (into [init `(zero? (alength ~v))]
|
|
||||||
(map-indexed (fn [i x]
|
|
||||||
(if (even? i)
|
|
||||||
x
|
|
||||||
(let [j (quot i 2)]
|
|
||||||
;; Issue 525
|
|
||||||
;; If binding value is not yet set,
|
|
||||||
;; try setting it again. This should
|
|
||||||
;; also throw errors for each render
|
|
||||||
;; and prevent the body being called
|
|
||||||
;; if bindings throw errors.
|
|
||||||
`(if (or ~init
|
|
||||||
(not (.hasOwnProperty ~v ~j)))
|
|
||||||
(aset ~v ~j ~x)
|
|
||||||
(aget ~v ~j)))))
|
|
||||||
bindings))
|
|
||||||
[forms destroy] (let [fin (last body)]
|
|
||||||
(if (and (list? fin)
|
|
||||||
(= 'finally (first fin)))
|
|
||||||
[(butlast body) `(fn [] ~@(rest fin))]
|
|
||||||
[body nil]))
|
|
||||||
add-destroy (when destroy
|
|
||||||
(list
|
|
||||||
`(let [destroy# ~destroy]
|
|
||||||
(if (reagent.ratom/reactive?)
|
|
||||||
(when (nil? (.-destroy ~v))
|
|
||||||
(set! (.-destroy ~v) destroy#))
|
|
||||||
(destroy#)))))
|
|
||||||
asserting (dev?) #_(if *assert* true false)
|
|
||||||
res (gensym "res")]
|
|
||||||
`(let [~v (reagent.ratom/with-let-values ~k)]
|
|
||||||
~(when asserting
|
|
||||||
`(when-some [c# (reagent.ratom/-ratom-context)]
|
|
||||||
(when (== (.-generation ~v) (.-ratomGeneration c#))
|
|
||||||
(d/error "Warning: The same with-let is being used more "
|
|
||||||
"than once in the same reactive context."))
|
|
||||||
(set! (.-generation ~v) (.-ratomGeneration c#))))
|
|
||||||
(let ~(into bs [res `(do ~@forms)])
|
|
||||||
~@add-destroy
|
|
||||||
~res))))
|
|
||||||
|
|
||||||
(def rns (sci/create-ns 'reagent.core nil))
|
|
||||||
|
|
||||||
(def reagent-namespace
|
|
||||||
{'atom (sci/copy-var r/atom rns)
|
|
||||||
'as-element (sci/copy-var r/as-element rns)
|
|
||||||
'with-let (sci/copy-var with-let rns)
|
|
||||||
'cursor (sci/copy-var r/cursor rns)
|
|
||||||
'create-class (sci/copy-var r/create-class rns)
|
|
||||||
'create-compiler (sci/copy-var r/create-compiler rns)})
|
|
||||||
|
|
||||||
(def rtmns (sci/create-ns 'reagent.ratom nil))
|
|
||||||
|
|
||||||
(defn -ratom-context
|
|
||||||
"Read-only access to the ratom context."
|
|
||||||
[]
|
|
||||||
ratom/*ratom-context*)
|
|
||||||
|
|
||||||
(def reagent-ratom-namespace
|
|
||||||
{'with-let-values (sci/copy-var ratom/with-let-values rtmns)
|
|
||||||
'reactive? (sci/copy-var ratom/reactive? rtmns)
|
|
||||||
'-ratom-context (sci/copy-var -ratom-context rtmns)})
|
|
||||||
|
|
||||||
(def rdbgns (sci/create-ns 'reagent.debug nil))
|
|
||||||
|
|
||||||
(defn -tracking? []
|
|
||||||
reagent.debug/tracking)
|
|
||||||
|
|
||||||
(defn ^:macro error
|
|
||||||
"Print with console.error."
|
|
||||||
[_ _ & forms]
|
|
||||||
(when *assert*
|
|
||||||
`(when (some? js/console)
|
|
||||||
(.error (if (reagent.debug/-tracking?)
|
|
||||||
reagent.debug/track-console
|
|
||||||
js/console)
|
|
||||||
(str ~@forms)))))
|
|
||||||
|
|
||||||
(def reagent-debug-namespace
|
|
||||||
{'error (sci/copy-var error rdbgns)
|
|
||||||
'-tracking? (sci/copy-var -tracking? rdbgns)
|
|
||||||
'track-console (sci/copy-var d/track-console rdbgns)})
|
|
||||||
|
|
||||||
(def rdns (sci/create-ns 'reagent.dom nil))
|
(def rdns (sci/create-ns 'reagent.dom nil))
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue