Or How I Learned To Stop Worrying And Ditch Custom Directives
Since writing my post Reactive Canvas with TypeScript and Vue I've discovered glue
, a library for defining Vue components in ClojureScript. Ever the hipster, I had to give it a spin. This post details the same functionality as that post but using ClojureScript instead of TypeScript.
Setup
To start, you'll need to have a JDK installed. You'll also need to obtain leiningen
which provides package managment and build tooling for Clojure/ClojureScript.
Once you've installed the above navigate to your project directory and issue: lein new figwheel rxcanvas-cljs
. Navigate to your new folder rxcanvas-cljs
and open up project.clj
. We just need to make one change. Find your :dependencies
key and make it look like this:
:dependencies [[org.clojure/clojure "1.9.0"]
[org.clojure/clojurescript "1.10.238"]
[org.clojure/core.async "0.4.474"]
[glue "0.1.3-SNAPSHOT"]]
We've just added glue
to the list. Don't worry too much if your version numbers don't match exactly - this is just what the template came with on the date of this writing.
Now we execute lein figwheel
. The first run will be the longest as it gathers dependencies. When it loads, open your browser to localhost:3449
. When the page loads you should see the REPL prompt appear in your terminal - try issuing (js/alert "Hello from ClojureScript")
:
// ...
[Rebel readline] Type :repl/help for online help info
ClojureScript 1.10.238
dev:cljs.user=> (js/alert "Hello from ClojureScript")
You should see the requested alert in your browser. Leave this running as you develop and when you're ready to close type :cljs/quit
at the REPL prompt.
If you're new to figwheel
take a moment to familiarize yourself with the blank project layout. There's not too much here. The dev
directory just sets up some convenience functions, and our HTML and CSS will live in resources/public
. It has pre-populated a .gitignore
and a README.md
for you. All of our logic will live in src/rxcanvas_cljs/core.cljs
.
Add a template
We're not using Single-File Components. This would currently involve some non-trivial DIY plumbing. There's no vue-loader
equivalent to do the parsing for us yet - you could write the first! If I'm wrong about this, somebody pipe up below.
We're just going to keep our template separate. Open up resources/public/index.html
. The figwheel template comes with a div
with the id app
. We'll keep the div but replace the contents:
<div id="app">
<rxcanvas></rxcanvas>
</div>
Now we can use the <template>
tag to define our resizable dot component. Place this above the app
div, directly following the opening <body>
tag:
<template id="rxcanvas">
<div>
<span>{{ size }}</span>
<input type="range" min="1" max="100" step="5" id="size" @change="drawDot">
<label for="size">- Size</label>
<p><canvas id="rx"></canvas></p>
</div>
</template>
There are two changes from the TypeScript. For one, I've replaced v-model="size"
in the range
tag with @change="drawDot"
. This method will handle updating our state. I've also ditched the custom directive in the <canvas>
tag, instead just assigning an id.
Add some Lisp
Now we get to the good stuff. Open up src/rxcanvas_cljs/core.cljs
. First, we need to override the built-in atom
with the one glue
provides and bring the rest of the library into scope. Add the following to your ns
form at the top of the file:
(ns rxcanvas-cljs.core
(:refer-clojure :exclude [atom])
(:require [glue.core :as g :refer [atom]]))
Leave in the (enable-console-print!)
line at the top of the file - this allows us to use the browser console for output with println
should we so choose - but delete everything else.
We'll start with the mount point:
(defonce app (g/vue {:el "#app"})
This locates the <div id="app">
from index.html
and mounts our Vue stuff to it. We also need to make sure it keeps itself refreshed - add the following below:
(defn on-js-reload []
(g/reset-state!))
ClojureScript is not object-oriented like TypeScript, so we'll just define a plain old function to handle the canvas drawing logic instead of a Dot
class. Put this above your app
definition:
(defn draw
[radius canvas]
(let [canvas-dim (* 2 radius)]
;; resize canvas
(set! (.-width canvas) canvas-dim)
(set! (.-height canvas) canvas-dim)
;; draw the shape
(let [ctx (.getContext canvas "2d")
center-x (/ (.-width canvas) 2)
center-y (/ (.-height canvas) 2)]
(set! (.-fillStyle ctx) "rgb(0,0,0)")
(.clearRect ctx 0 0 (.-width canvas) (.-height canvas))
(.beginPath ctx)
(.arc ctx center-x center-y radius 0 (* 2 (.-PI js/Math)) false)
(.fill ctx)
(.stroke ctx))))
Interop is dirt simple - you just put the method in the first position of the s-expression. You can get and set properties via syntax like (.-PI js/Math)
. It's rather easy to get addicted to the hyper-regular syntax.
Now we're ready to define the component itself. With glue
we use defcomponent
, right below draw
:
(g/defcomponent
:rxcanvas
{:template "#rxcanvas"
:state (fn [] {:size (atom 10)})
:methods {:draw-dot (fn [this state _]
;; update the state
(reset! (:size state) (.-value (.querySelector js/document "#size")))
;; grab the new value and the canvas for drawing
(draw @(:size state) (.querySelector js/document "#rx"))
)}})
Instead of data()
we're using the key :state
but it still returns a function. We've explicitly stored the size
in an atom
, ClojureScript's mechanism for allowing mutability in an otherwise immutable language. This particular atom
, as discussed, is from glue
and has some extra goodness built in to ease use in Vue components. Using it we can access size
using simple forms like (:size state)
.
Also note - in our template we style the method name drawDot
, and in our ClojureScript it's called draw-dot
. This is another part of what glue
is handling!
We need the @
operator as in @(:size state)
to get at the current value of the atom
in our call to draw
.
That's it! Now our canvas will resize and redraw on each change to our slider.
The completed code can be found here.
Top comments (7)
Long time since I've seen people interested in Clojure or ClojureScript, kudos for your post!
Tragic, that - though your penchant for Common Lisp is even more rare!
I'm not giving up on it :D
Lisp is beautiful in all it's flavors, and Clojure managed to make it even sexier :D
Yeah, more Clojure and Common Lisp please!
See? This guy gets it XD
Nice! Thanks for posting this.
You could use
reset!
instead ofswap!
- it does what you want, reset the atom to a single value rather than using a function. :)Aha! Thank you thank you, I forgot about this - clearly a bit rusty :) I'll update the post, that's much clearer.