Utilities for making small ClojureScript UI artifacts.
The problem: you have a static site and you want to add a sprinkle of interactivity, using Clojure, without bloating your build.
With cljs-ultralight we try to achieve this dream:
* sub-1k build sizes.
* Concise functions for common UI operations.
* Clojure language & tooling (live-reload, editor integration, repl etc.)
cljs-ultralight is a group of functions to help you keep your cljs builds tiny when building simple UIs.
You can easily keep your bundle size under 1k uncompressed with this.
Here is a blog post about making ClojureScript UIs in 500 bytes.
``
{:deps {io.github.chr15m/cljs-ultralight {:git/tag "LATEST-GIT-TAG" :git/sha "LATEST-GIT-SHA"}}}
Alternatively you can use npm to install it into node_modules.
`
npm i cljs-ultralight
You'll have to manually add the sources in your shadow-cljs.edn if you use npm to install it.
`clojure`
:source-paths [... "node_modules/cljs-ultralight/src"]
`clojure
(ns myapp.core
(:require [ultralight.core :as u]))
(-> (u/$$ "#my-button")
(u/evt "click"
#(js/alert "Clicked!")))
`
The source code is so small as to be self-documenting. 😅
When this changes I will add more documentation.
Check out the demo for more examples.
* npm run build to build it.npm run size
* to see the build size (will automatically build first).npm run watch
* to develop on it.
To get tiny build sizes cljs-ultralight tries to use native JS constructs where ever possible.1k
You should do the same if you want those small build sizes.
Including a single equality operator for example will balloon a basic build size from to 94k.
Here are some rules to follow to avoid this:
* Use #js {}, #js [], etc. instead of Clojure data types.coercive-=
* Use instead of =.(.concat string-1 string-2)
* Use instead of (str string-1 string-2).(.map #js [1 2 3] (fn [i] ...))
* Use etc. instead of (map (fn [i] ...) [1 2 3]).#(... %)
* Use instead of partial.js/console.log
* Use instead of print.
The library applied-science/js-interop` works well too.