nREPL docs
This commit is contained in:
Michiel Borkent
parent
18e4d3639a
commit
1adadb1c3e
56
README.md
56
README.md
|
|
@ -27,61 +27,7 @@ babashka or Clojure JVM):
|
|||
|
||||
### nREPL
|
||||
|
||||
To connect to a Scittle nREPL server from your editor, follow these steps:
|
||||
|
||||
In babashka or Clojure JVM, use the
|
||||
[sci.nrepl](https://github.com/babashka/sci.nrepl) dependency and run:
|
||||
|
||||
```
|
||||
(require 'sci.nrepl.browser-server :as nrepl)
|
||||
(nrepl/start! {:nrepl-port 1339 :websocket-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
|
||||
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
|
||||
the normal routine:
|
||||
|
||||
```
|
||||
<script>var SCITTLE_NREPL_WEBSOCKET_PORT = 1340;</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/scittle@0.2.8/dist/scittle.nrepl.js" type="application/javascript"></script>
|
||||
```
|
||||
|
||||
Also include the CLJS file that you want to evaluate with nREPL:
|
||||
|
||||
```
|
||||
<script src="cljs/script.cljs" type="application/x-scittle"></script>
|
||||
```
|
||||
|
||||
Then visit `cljs/script.cljs` in your editor and connect to the nREPL server,
|
||||
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`. See a demo
|
||||
[here](https://twitter.com/borkdude/status/1526285565343281159).
|
||||
|
||||
### CIDER
|
||||
|
||||
Currently when connecting from CIDER, you need to use this snippet:
|
||||
|
||||
```
|
||||
(cider-register-cljs-repl-type 'sci-js "(+ 1 2 3)")
|
||||
|
||||
(defun mm/cider-connected-hook ()
|
||||
(when (eq 'sci-js cider-cljs-repl-type)
|
||||
(setq-local cider-show-error-buffer nil)
|
||||
(cider-set-repl-type 'cljs)))
|
||||
|
||||
(add-hook 'cider-connected-hook #'mm/cider-connected-hook)
|
||||
```
|
||||
|
||||
Then choose `cider-connect-cljs`, select port `1339`, followed by the `sci-js`
|
||||
REPL type.
|
||||
See [doc/nrepl](doc/nrepl).
|
||||
|
||||
## Tasks
|
||||
|
||||
|
|
|
|||
61
doc/nrepl/README.md
Normal file
61
doc/nrepl/README.md
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
# nREPL
|
||||
|
||||
To connect to a Scittle nREPL server from your editor, follow these steps. The
|
||||
setup described here, can be found in this directory.
|
||||
|
||||
In babashka or Clojure JVM, use the
|
||||
[sci.nrepl](https://github.com/babashka/sci.nrepl) dependency and run:
|
||||
|
||||
```
|
||||
(require 'sci.nrepl.browser-server :as nrepl)
|
||||
(nrepl/start! {:nrepl-port 1339 :websocket-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
|
||||
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
|
||||
the normal routine:
|
||||
|
||||
```
|
||||
<script>var SCITTLE_NREPL_WEBSOCKET_PORT = 1340;</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/scittle@0.2.8/dist/scittle.nrepl.js" type="application/javascript"></script>
|
||||
```
|
||||
|
||||
Also include the CLJS file that you want to evaluate with nREPL:
|
||||
|
||||
```
|
||||
<script src="playground.cljs" type="application/x-scittle"></script>
|
||||
```
|
||||
|
||||
Then visit `playground.cljs` in your editor and connect to the nREPL server,
|
||||
and start evaluating!
|
||||
|
||||
See the `index.html` file for an example.
|
||||
|
||||
When you run `bb dev` in this directory, and then open `http://localhost:1341`
|
||||
you should be able evaluate expressions in `playground.cljs`. See a demo
|
||||
[here](https://twitter.com/borkdude/status/1526285565343281159).
|
||||
|
||||
Note that the nREPL server connection stays alive even after the browser window
|
||||
refreshes.
|
||||
|
||||
### CIDER
|
||||
|
||||
Currently when connecting from CIDER, you need to use this snippet:
|
||||
|
||||
```
|
||||
(cider-register-cljs-repl-type 'sci-js "(+ 1 2 3)")
|
||||
|
||||
(defun mm/cider-connected-hook ()
|
||||
(when (eq 'sci-js cider-cljs-repl-type)
|
||||
(setq-local cider-show-error-buffer nil)
|
||||
(cider-set-repl-type 'cljs)))
|
||||
|
||||
(add-hook 'cider-connected-hook #'mm/cider-connected-hook)
|
||||
```
|
||||
|
||||
Then choose `cider-connect-cljs`, select port `1339`, followed by the `sci-js`
|
||||
REPL type.
|
||||
17
doc/nrepl/bb.edn
Normal file
17
doc/nrepl/bb.edn
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{:deps {io.github.babashka/sci.nrepl
|
||||
{:git/sha "c14b5b4ef4390ff206cdb71f763f327799f5e853"}
|
||||
io.github.babashka/http-server
|
||||
{:git/sha "b38c1f16ad2c618adae2c3b102a5520c261a7dd3"}}
|
||||
:tasks {http-server {:doc "Starts http server for serving static files"
|
||||
:requires ([babashka.http-server :as http])
|
||||
:task (do (http/serve {:port 1341 :dir "."})
|
||||
(println "Serving static assets at http://localhost:1341"))}
|
||||
|
||||
browser-nrepl {:doc "Start browser nREPL"
|
||||
:requires ([sci.nrepl.browser-server :as bp])
|
||||
:task (bp/start! {})}
|
||||
|
||||
-dev {:depends [http-server browser-nrepl]}
|
||||
|
||||
dev {:task (do (run '-dev {:parallel true})
|
||||
(deref (promise)))}}}
|
||||
13
doc/nrepl/index.html
Normal file
13
doc/nrepl/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/npm/scittle@0.2.8/dist/scittle.js" type="application/javascript"></script>
|
||||
<script>var SCITTLE_NREPL_WEBSOCKET_PORT = 1340;</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/scittle@0.2.8/dist/scittle.nrepl.js" type="application/javascript"></script>
|
||||
<script type="application/x-scittle" src="playground.cljs"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Scittle</h1>
|
||||
<h2>What is this?</h2>
|
||||
</body>
|
||||
</html>
|
||||
15
doc/nrepl/playground.cljs
Normal file
15
doc/nrepl/playground.cljs
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
(ns playground)
|
||||
|
||||
(+ 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? :)")
|
||||
Loading…
Reference in a new issue