A hot reload for serving html (or htmx) with just babashka ('panas' is an Indonesian word for 'hot')
needs babashka version > 1.0.169
⚠️ currently still figuring things how to distribute codes, expect a lot of changes for now
with bbin
If you just want live reload for static assets, you can
bbin install https://raw.githubusercontent.com/keychera/panas.reload/main/bbin/panas.file-server.clj
panas --dir path/to/static/assetsnote:
panas.file-server.cljis an extension of babashka/http-server- live reload will works if the file is a complete html (having
<html>,<head>, and<body>tags) - css will live reload if its in a link tag with
type='text/css'and atitletag e.g:
<link href="/styles.css" rel="stylesheet" type="text/css" title="default">
if you want live reload a server that returns html and css:
create a bb.edn file, specify source path and create a task like below (using latest git sha from the main branch of this repo)
for example:
{:paths ["src"]
:tasks {panas.reload {:extra-deps {io.github.keychera/panas.reload {:git/sha "<latest-main-sha>"}}
:requires ([panas.reload] your-namespace)
:task (panas.reload/-main your-namespace/your-router {:port 42042})}}}the task will call panas.reload/-main that have the same signature as org.httpkit.server/run-server plus two optional argument for configuration for panas.reload itself, which are handler, server-opts, and server-opts
handler- a fully qualified symbol that refers to your ring-router function, e.g'your-namespace/your-routerserver-opts- (Optional) a map that will be passed to httpkit as-ispanas-opts- (Optional) a map of the following config keywords:
{:watch-dir "path/to/dir"
;; this specify the directory to watch file changes,
;; default to the first classpath root (from the value of `(io/resource "")`)
:reloadable? predicate-fn
;; this is a 1-param predicate that accept a ring request
;; to override the default predicate that determines which url to reload,
;; the default is `panas.default/reloadable?`.
;; Other than overriding, you can also extend the default using clojure built-in `every-pred`
;; e.g. `(every-pred your-pred panas.default/reloadable?)`
}the run the task panas.reload with
bb panas.reloadmake some changes in any file in your src!
you can try some examples here: https://github.com/keychera/panas.example
WIP
some notes for later:
- currently file watching only one folder
- planning to make this usable in Clojure JVM, as well as making this work with other server (current impl locked to httpkit server but personally I am using this same but tweaked code on JVM with ring-jetty and works pretty well)
- css refresh currently select all
linktag that istype="text/css"and havetitleattribute (initial reasoning: so we can differentiate which css to reload) - htmx websocket inside akar body has issues
- currently this has encoding issues on windows, refer to #5
WIP
some notes for later:
- uses htmx and its websocket extentsion
WIP
- test with:
clj -M:test-deps:test