@@ -13,17 +13,17 @@ This extension is a wrapper for [https://github.com/mmomtchev/sqlite-wasm-http].
13
13
The http backend is kept open for the lifetime of the element having the corresponding ` hx-db ` attribute.
14
14
15
15
Following events are emitted:
16
- - ` htmx:sql :loadstart ` when a query execution begins
16
+ - ` htmx:xhr :loadstart ` when a query execution begins
17
17
- ` event.detail.xhr.db ` is a promise for SQLite.Promiser
18
- - ` htmx:sql :progress ` for each row of the result
18
+ - ` htmx:xhr :progress ` for each row of the result
19
19
- ` event.detail.xhr.db ` is a promise for SQLite.Promiser
20
- - ` event.detail.xhr.response ` is the received data row
21
- - ` htmx:sql:loadend ` when a query execution is finished (all rows are received) but before any swapping is
20
+ - ` event.detail.xhr.responseJSON ` is the received data row as JSON
21
+ - ` event.detail.xhr.response ` is the received data row as stringified JSON
22
+ - ` htmx:xhr:loadend ` when a query execution is finished (all rows are received) but before any swapping is
22
23
performed.
23
24
- ` event.detail.xhr.db ` is a promise for SQLite.Promiser
24
- - ` event.detail.xhr.response ` is all received data rows
25
-
26
- In addition, ` htmx:beforeOnLoad ` will contain ` event.detail.xhr.response ` with an array of all received data rows.
25
+ - ` event.detail.xhr.responseJSON ` is all received data rows as JSON
26
+ - ` event.detail.xhr.response ` is all received data rows as stringified JSON
27
27
28
28
### Install
29
29
@@ -40,34 +40,42 @@ Include the following in your page:
40
40
41
41
``` html
42
42
<script src =" sqlite-wasm-http-main.js" ></script >
43
- <script src =" https://unpkg.com/htmx-sqlite/dist/sqlite.min.js" ></script >
43
+ <script crossorigin src =" https://unpkg.com/htmx-sqlite/dist/sqlite.min.js" ></script >
44
44
```
45
45
46
46
### Usage
47
47
48
- ` 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.
48
+ Use one of attributes
49
+ - hx-get="SELECT ..."
50
+ - hx-put="UPDATE ..."
51
+ - hx-delete="DELETE ..."
52
+ - hx-post="INSERT ..."
53
+ - hx-post="ALTER ..."
54
+ - hx-post="CREATE ..."
55
+ - hx-post="DROP ..."
56
+ - hx-post="TRUNCATE ..."
49
57
50
58
#### Use a database relative to current page over HTTP
51
59
52
60
``` html
53
61
<body hx-ext =" sqlite" hx-db =" http:/mydb.db" >
54
- <div hx-boost = " true " hx- trigger =" load" hx-sql =" SELECT * FROM mytable" ></div >
62
+ <div hx-trigger =" load" hx-get =" SELECT * FROM mytable" ></div >
55
63
</body >
56
64
```
57
65
58
66
#### Use a database with absolute address over HTTP
59
67
60
68
``` html
61
69
<body hx-ext =" sqlite" hx-db =" https://example.com/mydb.db" >
62
- <div hx-boost = " true " hx- trigger =" load" hx-sql =" SELECT * FROM mytable" ></div >
70
+ <div hx-trigger =" load" hx-get =" SELECT * FROM mytable" ></div >
63
71
</body >
64
72
```
65
73
66
74
#### Define local OPFS database
67
75
68
76
``` html
69
77
<body hx-ext =" sqlite" hx-db =" opfs:mydb.db" >
70
- <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 >
78
+ <div hx-post =" CREATE TABLE IF NOT EXISTS mytable(name STRING); INSERT INTO mytable VALUES ('foo'); SELECT * FROM mytable" hx-trigger =" load" ></div >
71
79
</body >
72
80
```
73
81
@@ -82,38 +90,37 @@ Include the following in your page:
82
90
<script >
83
91
Handlebars .registerPartial (" template" , Handlebars .compile (document .getElementById (" template" ).innerHTML ));
84
92
</script >
85
- <div hx-boost = " true " hx- trigger =" load" handlebars-array-template =" template" hx-sql =" SELECT * FROM mytable" ></div >
93
+ <div hx-trigger =" load" handlebars-array-template =" template" hx-get =" SELECT * FROM mytable" ></div >
86
94
```
87
95
88
96
#### Handle response rows one-by-one with javascript
89
97
90
98
``` html
91
- <div hx-boost =" true"
92
- hx-trigger =" load"
93
- hx-sql =" SELECT * FROM mytable"
94
- hx-on:sql:loadstart =" console.log('started');"
95
- hx-on:sql:progress =" this.innerText+=event.detail.xhr.response;"
96
- hx-on:sql:loadend =" console.log('finished');" ></div >
99
+ <div hx-trigger =" load"
100
+ hx-get =" SELECT * FROM mytable"
101
+ hx-on:xhr:loadstart =" console.log('started');"
102
+ hx-on:xhr:progress =" this.innerText+=event.detail.xhr.response;"
103
+ hx-on:xhr:loadend =" console.log('finished');" ></div >
97
104
```
98
105
99
106
#### Handle the whole result with javascript
100
107
101
108
``` html
102
- <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 >
109
+ <div hx-trigger =" load" hx-on:htmx:before-on-load =" this.innerText='Got: '+event.detail.xhr.response.length+' rows';" hx-get =" SELECT * FROM mytable" ></div >
103
110
```
104
111
105
112
106
113
#### Include bind parameters explicitly, and load on change
107
114
108
115
``` html
109
116
<input name =" ident" value =" 2" />
110
- <div hx-boost = " true " hx- include =" [name='ident']" hx-trigger =" load, change from:[name='ident']" hx-sql =" SELECT * FROM mytable WHERE ident=$ident" ></div >
117
+ <div hx-include =" [name='ident']" hx-trigger =" load, change from:[name='ident']" hx-get =" SELECT * FROM mytable WHERE ident=$ident" ></div >
111
118
```
112
119
113
- #### Use _ value_ as the query if hx-sql is empty
120
+ #### Use _ value_ as the query if path is just "this.value"
114
121
115
122
``` html
116
- <select hx-boost = " true " hx-sql = " " hx-trigger =" change" hx-target =" #target" >
123
+ <select hx-get = " this.value " hx-trigger =" change" hx-target =" #target" >
117
124
<option disabled selected value ></option >
118
125
<option value =" SELECT name FROM mytable" >name</option >
119
126
<option value =" SELECT age FROM mytable" >age</option >
@@ -124,5 +131,5 @@ Include the following in your page:
124
131
#### Override default config
125
132
126
133
``` html
127
- <div hx-boost = " true " hx- trigger =" load" hx-sql =" SELECT * FROM mytable" hx-db-config =" { maxPageSize: 4096, timeout: 10000, cacheSize: 4096 }" ></div >
134
+ <div hx-trigger =" load" hx-get =" SELECT * FROM mytable" hx-request =" { maxPageSize: 4096, timeout: 10000, cacheSize: 4096 }" ></div >
128
135
```
0 commit comments