Skip to content
This repository was archived by the owner on Apr 6, 2025. It is now read-only.
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 6f56e0a

Browse files
committedOct 9, 2024·
1.9.0. Changed both syntax and functionality
1 parent 8125e50 commit 6f56e0a

File tree

6 files changed

+281
-474
lines changed

6 files changed

+281
-474
lines changed
 

‎README.md

Lines changed: 31 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@ This extension is a wrapper for [https://github.com/mmomtchev/sqlite-wasm-http].
1313
The http backend is kept open for the lifetime of the element having the corresponding `hx-db` attribute.
1414

1515
Following events are emitted:
16-
- `htmx:sql:loadstart` when a query execution begins
16+
- `htmx:xhr:loadstart` when a query execution begins
1717
- `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
1919
- `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
2223
performed.
2324
- `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
2727

2828
### Install
2929

@@ -40,34 +40,42 @@ Include the following in your page:
4040

4141
```html
4242
<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>
4444
```
4545

4646
### Usage
4747

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 ..."
4957

5058
#### Use a database relative to current page over HTTP
5159

5260
```html
5361
<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>
5563
</body>
5664
```
5765

5866
#### Use a database with absolute address over HTTP
5967

6068
```html
6169
<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>
6371
</body>
6472
```
6573

6674
#### Define local OPFS database
6775

6876
```html
6977
<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>
7179
</body>
7280
```
7381

@@ -82,38 +90,37 @@ Include the following in your page:
8290
<script>
8391
Handlebars.registerPartial("template", Handlebars.compile(document.getElementById("template").innerHTML));
8492
</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>
8694
```
8795

8896
#### Handle response rows one-by-one with javascript
8997

9098
```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>
97104
```
98105

99106
#### Handle the whole result with javascript
100107

101108
```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>
103110
```
104111

105112

106113
#### Include bind parameters explicitly, and load on change
107114

108115
```html
109116
<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>
111118
```
112119

113-
#### Use _value_ as the query if hx-sql is empty
120+
#### Use _value_ as the query if path is just "this.value"
114121

115122
```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">
117124
<option disabled selected value></option>
118125
<option value="SELECT name FROM mytable">name</option>
119126
<option value="SELECT age FROM mytable">age</option>
@@ -124,5 +131,5 @@ Include the following in your page:
124131
#### Override default config
125132

126133
```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>
128135
```

0 commit comments

Comments
 (0)
This repository has been archived.