htmx-sqlite
v1.0.0
Published
Htmx extension to use SQLite database backend over HTTP or OPFS
Downloads
114
Readme
htmx-sqlite
Htmx extension to use SQLite database backend over HTTP or OPFS.
Status
Experimental. I've used this a little, but not much. Any feedback and suggestions are welcome!
General concept
This extension is a wrapper for [https://github.com/mmomtchev/sqlite-wasm-http]. Please have a look for more information of the underlying database access implementation.
The http backend is kept open for the lifetime of the element having the corresponding hx-db attribute.
Following events are emitted:
htmx:sql:loadstartwhen a query execution beginsevent.detail.xhr.dbis a promise for SQLite.Promiser
htmx:sql:progressfor each row of the resultevent.detail.xhr.dbis a promise for SQLite.Promiserevent.detail.xhr.responseis the received data row
htmx:sql:loadendwhen a query execution is finished (all rows are received) but before any swapping is performed.event.detail.xhr.dbis a promise for SQLite.Promiserevent.detail.xhr.responseis all received data rows
In addition, htmx:beforeOnLoad will contain event.detail.xhr.response with an array of all received data rows.
Install
Web Workers don't work cross-domain. Copy the following files under your app:
- https://unpkg.com/htmx-sqlite/dist/sqlite-wasm-http-main.js
- https://unpkg.com/htmx-sqlite/dist/sqlite-wasm-http-87.js
- https://unpkg.com/htmx-sqlite/dist/sqlite-wasm-http-806.js
- https://unpkg.com/htmx-sqlite/dist/sqlite-wasm-http-892.js
- https://unpkg.com/htmx-sqlite/dist/sqlite-wasm-http-901.js
- https://unpkg.com/htmx-sqlite/dist/sqlite-wasm-http-985.js
- https://unpkg.com/htmx-sqlite/dist/4fb34c1567962ff5a6c9.wasm
Include the following in your page:
<script src="sqlite-wasm-http-main.js"></script>
<script src="https://unpkg.com/htmx-sqlite/dist/sqlite.min.js"></script>Usage
hx-sql elements need a useless hx-boost attribute to get "registered" to Htmx. Please let me know if there is a better way to do this.
Use a database relative to current page over HTTP
<body hx-ext="sqlite" hx-db="http:/mydb.db">
<div hx-boost="true" hx-trigger="load" hx-sql="SELECT * FROM mytable"></div>
</body>Use a database with absolute address over HTTP
<body hx-ext="sqlite" hx-db="https://example.com/mydb.db">
<div hx-boost="true" hx-trigger="load" hx-sql="SELECT * FROM mytable"></div>
</body>Define local OPFS database
<body hx-ext="sqlite" hx-db="opfs:mydb.db">
<div hx-sql="CREATE TABLE IF NOT EXISTS mytable(name STRING); INSERT INTO mytable VALUES ('foo'); SELECT * FROM mytable" hx-boost="true" hx-trigger="load"></div>
</body>Render response with client-side-templates
<script crossorigin src="https://unpkg.com/[email protected]/dist/ext/client-side-templates.js"></script>
<template id="template">
{{#data}}{{name}}{{/data}}
</template>
<script>
Handlebars.registerPartial("template", Handlebars.compile(document.getElementById("template").innerHTML));
</script>
<div hx-boost="true" hx-trigger="load" handlebars-array-template="template" hx-sql="SELECT * FROM mytable"></div>Handle response rows one-by-one with javascript
<div hx-boost="true"
hx-trigger="load"
hx-sql="SELECT * FROM mytable"
hx-on:sql:loadstart="console.log('started');"
hx-on:sql:progress="this.innerText+=event.detail.xhr.response;"
hx-on:sql:loadend="console.log('finished');"></div>Handle the whole result with javascript
<div hx-boost="true" hx-trigger="load" hx-on:htmx:before-on-load="this.innerText='Got: '+event.detail.xhr.response.length+' rows';" hx-sql="SELECT * FROM mytable"></div>Include bind parameters explicitly, and load on change
<input name="ident" value="2" />
<div hx-boost="true" hx-include="[name='ident']" hx-trigger="load, change from:[name='ident']" hx-sql="SELECT * FROM mytable WHERE ident=$ident"></div>Use value as the query if hx-sql is empty
<select hx-boost="true" hx-sql="" hx-trigger="change" hx-target="#target">
<option disabled selected value></option>
<option value="SELECT name FROM mytable">name</option>
<option value="SELECT age FROM mytable">age</option>
</select>
<div id="target"></div>Override default config
<div hx-boost="true" hx-trigger="load" hx-sql="SELECT * FROM mytable" hx-db-config="{ maxPageSize: 4096, timeout: 10000, cacheSize: 4096 }"></div>