changed http backend sharing context to closest [hx-db],[hx-request] to allow disabling shared caching when needed

Author: jyrimatti

README.md

@@ -10,7 +10,9 @@ Any feedback and suggestions are welcome!
 
 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.
+The http backend for a query is shared witin the closest element having either `hx-db` or `hx-request` attribute.
+
+Note that the default `shared` backend type caches SQLite pages in memory. I'm not sure if there's any invalidation. If you have problems seeing changes in the database, try forcing the sync backend.
 
 Following events are emitted:
 - `htmx:xhr:loadstart` when a query execution begins
@@ -131,5 +133,5 @@ Use one of attributes
 #### Override default config
 
 ```html
-<div hx-trigger="load" hx-get="SELECT * FROM mytable" hx-request="{ maxPageSize: 4096, timeout: 10000, cacheSize: 4096 }"></div>
+<div hx-trigger="load" hx-get="SELECT * FROM mytable" hx-request='{ "maxPageSize": 4096, "timeout": 10000, "cacheSize": 4096, "backendType": "sync" }'></div>
 ```

dist/sqlite.js

@@ -16,6 +16,7 @@ Extension to use SQLite database backend for Htmx over:
                 maxPageSize: 4096,    // this is the current default SQLite page size
                 timeout:     10000,   // 10s
                 cacheSize:   4096     // 4 MB
+                //backendType: 'sync' // 'sync' or 'shared'. Defaults to 'shared' if available, otherwise sync;
             };
             sqlConfig = {
                 rowMode: 'object'
@@ -84,19 +85,21 @@ Extension to use SQLite database backend for Htmx over:
                     ...sqlConfig,
                     ...conf
                 };
+
+                var contextElem = htmx.closest(elt, '[hx-db],[hx-request]');
 
                 var backend;
-                if (dbElem._htmx_sqlite_http_backend) {
-                    backend = dbElem._htmx_sqlite_http_backend;
+                if (contextElem._htmx_sqlite_http_backend) {
+                    backend = contextElem._htmx_sqlite_http_backend;
                 } else {
                     backend = dbURI.match(/^https?:/) ? { http: sqliteWasmHttp.createHttpBackend(config) }
                                                         : {};
-                    dbElem._htmx_sqlite_http_backend = backend;
+                    contextElem._htmx_sqlite_http_backend = backend;
                 }
-                dbElem.addEventListener('htmx:beforeCleanupElement', function(ev) {
-                    if (ev.detail.elt == dbElem && dbElem._htmx_sqlite_http_backend && dbElem._htmx_sqlite_http_backend.http) {
-                        dbElem._htmx_sqlite_http_backend.http.close();
-                        delete dbElem._htmx_sqlite_http_backend;
+                contextElem.addEventListener('htmx:beforeCleanupElement', function(ev) {
+                    if (ev.detail.elt == contextElem && contextElem._htmx_sqlite_http_backend && contextElem._htmx_sqlite_http_backend.http) {
+                        contextElem._htmx_sqlite_http_backend.http.close();
+                        delete contextElem._htmx_sqlite_http_backend;
                     }
                 });
 

dist/sqlite.min.js

@@ -1,6 +1,6 @@
 {
   "name": "htmx-sqlite",
-  "version": "1.9.1",
+  "version": "1.9.2",
   "description": "Htmx extension to use SQLite database backend over HTTP or OPFS",
   "author": "Jyri-Matti Lähteenmäki <[email protected]>",
   "keywords": [

package.json

@@ -16,6 +16,7 @@ Extension to use SQLite database backend for Htmx over:
                 maxPageSize: 4096,    // this is the current default SQLite page size
                 timeout:     10000,   // 10s
                 cacheSize:   4096     // 4 MB
+                //backendType: 'sync' // 'sync' or 'shared'. Defaults to 'shared' if available, otherwise sync;
             };
             sqlConfig = {
                 rowMode: 'object'
@@ -84,19 +85,21 @@ Extension to use SQLite database backend for Htmx over:
                     ...sqlConfig,
                     ...conf
                 };
+
+                var contextElem = htmx.closest(elt, '[hx-db],[hx-request]');
 
                 var backend;
-                if (dbElem._htmx_sqlite_http_backend) {
-                    backend = dbElem._htmx_sqlite_http_backend;
+                if (contextElem._htmx_sqlite_http_backend) {
+                    backend = contextElem._htmx_sqlite_http_backend;
                 } else {
                     backend = dbURI.match(/^https?:/) ? { http: sqliteWasmHttp.createHttpBackend(config) }
                                                         : {};
-                    dbElem._htmx_sqlite_http_backend = backend;
+                    contextElem._htmx_sqlite_http_backend = backend;
                 }
-                dbElem.addEventListener('htmx:beforeCleanupElement', function(ev) {
-                    if (ev.detail.elt == dbElem && dbElem._htmx_sqlite_http_backend && dbElem._htmx_sqlite_http_backend.http) {
-                        dbElem._htmx_sqlite_http_backend.http.close();
-                        delete dbElem._htmx_sqlite_http_backend;
+                contextElem.addEventListener('htmx:beforeCleanupElement', function(ev) {
+                    if (ev.detail.elt == contextElem && contextElem._htmx_sqlite_http_backend && contextElem._htmx_sqlite_http_backend.http) {
+                        contextElem._htmx_sqlite_http_backend.http.close();
+                        delete contextElem._htmx_sqlite_http_backend;
                     }
                 });
 

src/sqlite.js

@@ -45,6 +45,14 @@ describe("sqlite extension", function() {
             });
         });
 
+        it('sync backend', function (done) {
+            var div = make(`<div hx-trigger="load" hx-request='{"backendType": "sync"}' hx-get="SELECT * FROM mytable"></div>`);
+            div.addEventListener('htmx:afterSwap', () => {
+                div.innerText.should.equal('[]');
+                done();
+            });
+        });
+
         it('override http config', function (done) {
             window.addEventListener('unhandledrejection', e => {
                 e.reason.should.equal('Timeout while waiting on backend');