Skip to content

Commit e6cc307

Browse files
committed
Improve README for 1.0
Explain how to upgrade. Explain how to distribute wasm files. Update sample code.
1 parent 77ad0d3 commit e6cc307

File tree

1 file changed

+95
-47
lines changed

1 file changed

+95
-47
lines changed

README.md

Lines changed: 95 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,23 @@
33

44
For the impatients, try the demo here: http://kripken.github.io/sql.js/GUI/
55

6-
*sql.js* is a port of [SQLite](http://sqlite.org/about.html) to JavaScript, by compiling the SQLite C code with [Emscripten](http://kripken.github.io/emscripten-site/docs/introducing_emscripten/about_emscripten.html). It uses a [virtual database file stored in memory](https://kripken.github.io/emscripten-site/docs/porting/files/file_systems_overview.html), and thus **doesn't persist the changes** made to the database. However, it allows you to **import** any existing sqlite file, and to **export** the created database as a [javascript typed array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays).
6+
*sql.js* is a port of [SQLite](http://sqlite.org/about.html) to Webassembly, by compiling the SQLite C code with [Emscripten](http://kripken.github.io/emscripten-site/docs/introducing_emscripten/about_emscripten.html). It uses a [virtual database file stored in memory](https://kripken.github.io/emscripten-site/docs/porting/files/file_systems_overview.html), and thus **doesn't persist the changes** made to the database. However, it allows you to **import** any existing sqlite file, and to **export** the created database as a [javascript typed array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays).
77

8-
There is no C bindings or node-gyp compilation here, sql.js is a simple javascript file, that can be used like any traditional javascript library. If you are building a native application in javascript (using Electron for instance), or are working in node.js, you will likely prefer to use [a native binding of SQLite to javascript](https://www.npmjs.com/package/sqlite3).
8+
There are no C bindings or node-gyp compilation here, sql.js is a simple javascript file, that can be used like any traditional javascript library. If you are building a native application in javascript (using Electron for instance), or are working in node.js, you will likely prefer to use [a native binding of SQLite to javascript](https://www.npmjs.com/package/sqlite3).
99

1010
SQLite is public domain, sql.js is MIT licensed.
1111

12+
Sql.js predates WebAssembly, and thus started as an [asm.js](https://en.wikipedia.org/wiki/Asm.js) project. It still supports asm.js for backwards compatability.
13+
1214
## Documentation
1315
A [full documentation](http://kripken.github.io/sql.js/documentation/#http://kripken.github.io/sql.js/documentation/class/Database.html) generated from comments inside the source code, is available.
1416

1517
## Usage
1618

1719
```javascript
1820
var initSqlJs = require('sql-wasm.js');
19-
20-
// or initSqlJs = window.initSqlJs if you are in a browser
21+
// or if you are in a browser:
22+
//var initSqlJs = window.initSqlJs;
2123

2224
initSqlJs().then(function(SQL){
2325

@@ -70,36 +72,46 @@ initSqlJs().then(function(SQL){
7072
```
7173

7274
## Demo
73-
There is an online demo available here : http://kripken.github.io/sql.js/GUI
75+
There are a few examples [available here](https://kripken.github.io/sql.js/index.html). The most full-featured is the [Sqlite Interpreter](https://kripken.github.io/sql.js/examples/GUI/index.html).
7476

7577
## Examples
7678
The test files provide up to date example of the use of the api.
7779
### Inside the browser
7880
#### Example **HTML** file:
7981
```html
80-
<script src='dist/sql-wasm.js'></script>
81-
<script>
82-
//the `initSqlJs` function is globally provided by all of the main dist files if loaded in the browser.
83-
initSqlJs().then(function(SQL){
84-
//Create the database
85-
var db = new SQL.Database();
86-
// Run a query without reading the results
87-
db.run("CREATE TABLE test (col1, col2);");
88-
// Insert two rows: (1,111) and (2,222)
89-
db.run("INSERT INTO test VALUES (?,?), (?,?)", [1,111,2,222]);
90-
91-
// Prepare a statement
92-
var stmt = db.prepare("SELECT * FROM test WHERE col1 BETWEEN $start AND $end");
93-
stmt.getAsObject({$start:1, $end:1}); // {col1:1, col2:111}
94-
95-
// Bind new values
96-
stmt.bind({$start:1, $end:2});
97-
while(stmt.step()) { //
98-
var row = stmt.getAsObject();
99-
// [...] do something with the row of result
82+
<meta charset="utf8" />
83+
<html>
84+
<script src='/dist/sql-wasm.js'></script>
85+
<script>
86+
config = {
87+
locateFile: url => `/dist/${filename}`
10088
}
101-
}
102-
</script>
89+
// The `initSqlJs` function is globally provided by all of the main dist files if loaded in the browser.
90+
// We must specify this locateFile function if we are loading a wasm file from anywhere other than the current html page's folder.
91+
initSqlJs(config).then(function(SQL){
92+
//Create the database
93+
var db = new SQL.Database();
94+
// Run a query without reading the results
95+
db.run("CREATE TABLE test (col1, col2);");
96+
// Insert two rows: (1,111) and (2,222)
97+
db.run("INSERT INTO test VALUES (?,?), (?,?)", [1,111,2,222]);
98+
99+
// Prepare a statement
100+
var stmt = db.prepare("SELECT * FROM test WHERE col1 BETWEEN $start AND $end");
101+
stmt.getAsObject({$start:1, $end:1}); // {col1:1, col2:111}
102+
103+
// Bind new values
104+
stmt.bind({$start:1, $end:2});
105+
while(stmt.step()) { //
106+
var row = stmt.getAsObject();
107+
console.log('Here is a row: ' + JSON.stringify(row));
108+
}
109+
});
110+
</script>
111+
<body>
112+
Output is in Javscript console
113+
</body>
114+
</html>
103115
```
104116

105117
#### Creating a database from a file choosen by the user
@@ -116,12 +128,13 @@ dbFileElm.onchange = () => {
116128
r.readAsArrayBuffer(f);
117129
}
118130
```
119-
See : http://kripken.github.io/sql.js/GUI/gui.js
131+
See : http://kripken.github.io/sql.js/examples/GUI/gui.js
120132

121133
#### Loading a database from a server
122134

123135
```javascript
124136
var xhr = new XMLHttpRequest();
137+
// For example: https://github.com/lerocha/chinook-database/raw/master/ChinookDatabase/DataSources/Chinook_Sqlite.sqlite
125138
xhr.open('GET', '/path/to/database.sqlite', true);
126139
xhr.responseType = 'arraybuffer';
127140

@@ -139,17 +152,17 @@ See: https://github.com/kripken/sql.js/wiki/Load-a-database-from-the-server
139152
### Use from node.js
140153

141154
`sql.js` is [hosted on npm](https://www.npmjs.org/package/sql.js). To install it, you can simply run `npm install sql.js`.
142-
Alternatively, you can simply download the file `sql.js`, from the download link below.
155+
Alternatively, you can simply download `sql-wasm.js` and `sql-wasm.wasm`, from the download link below.
143156

144157
#### read a database from the disk:
145158
```javascript
146159
var fs = require('fs');
147160
var initSqlJs = require('sql-wasm.js');
148161
var filebuffer = fs.readFileSync('test.sqlite');
149162

150-
initSqlJs().then(function(SqlJs){
163+
initSqlJs().then(function(SQL){
151164
// Load the db
152-
var db = new SqlJs.Database(filebuffer);
165+
var db = new SQL.Database(filebuffer);
153166
});
154167

155168
```
@@ -170,12 +183,12 @@ See : https://github.com/kripken/sql.js/blob/master/test/test_node_file.js
170183
If you don't want to run CPU-intensive SQL queries in your main application thread,
171184
you can use the *more limited* WebWorker API.
172185

173-
You will need to download `worker.sql-wasm.js`
186+
You will need to download [dist/worker.sql-wasm.js](dist/worker.sql-wasm.js) [dist/worker.sql-wasm.wasm](dist/worker.sql-wasm.wasm).
174187

175188
Example:
176189
```html
177190
<script>
178-
var worker = new Worker("dist/worker.sql-wasm.js"); // You can find worker.sql.js in this repo
191+
var worker = new Worker("/dist/worker.sql-wasm.js");
179192
worker.onmessage = () => {
180193
console.log("Database opened");
181194
worker.onmessage = event => {
@@ -198,35 +211,70 @@ Example:
198211
</script>
199212
```
200213

201-
See : https://github.com/kripken/sql.js/blob/master/test/test_worker.js
214+
See [examples/GUI/gui.js](examples/GUI/gui.js) for a full working example.
202215

203216
## Flavors/versions Targets/Downloads
204217

205-
This library includes both asm.js and WebAssembly versions of Sqlite. (WebAssembly is the newer, preferred way to compile to Javascript, and has superceded asm.js. It produces smaller, faster code.) Asm.js versions are included for compatibility.
218+
This library includes both WebAssembly and asm.js versions of Sqlite. (WebAssembly is the newer, preferred way to compile to Javascript, and has superceded asm.js. It produces smaller, faster code.) Asm.js versions are included for compatibility.
219+
220+
## Upgrading from 0.x to 1.x
221+
222+
Version 1.0 of sql.js introduces a number of breaking changes due primarily to the fact that WebAssembly must be loaded asynchronously, whereas asm.js was able to be loaded synchronously.
223+
224+
So in the past, you would:
225+
```html
226+
<script src='js/sql.js'></script>
227+
<script>
228+
var db = new SQL.Database();
229+
//...
230+
</script>
231+
```
232+
or:
233+
```javascript
234+
var SQL = require('sql.js');
235+
var db = new QL.Database();
236+
//...
237+
```
238+
239+
Version 1.x:
240+
```html
241+
<script src='dist/sql-wasm.js'></script>
242+
<script>
243+
initSqlJs({ locateFile: filename => `/dist/${filename}` }).then(function(SQL){
244+
var db = new SQL.Database();
245+
//...
246+
});
247+
</script>
248+
```
249+
or:
250+
```javascript
251+
var initSqlJs = require('sql-wasm.js');
252+
initSqlJs().then(function(SQL){
253+
var db = new SQL.Database();
254+
//...
255+
});
256+
```
257+
258+
206259

207-
## Upgrading from previous versions
208260

209-
Version 1.0 of sql.js introduces a number of breaking changes due primarily to the fact that WASM must be loaded asynchronously, whereas asm.js was able to be loaded synchronously.
210261

211-
TODO: More info here:
262+
### Downloading/Using: ###
263+
Although asm.js files were distributed as a single Javascript file, WebAssembly libraries are most efficiently distributed as a pair of files, the `.js` loader and the `.wasm` file, like [dist/sql-wasm.js]([dist/sql-wasm.js]) and [dist/sql-wasm.wasm]([dist/sql-wasm.wasm]). The `.js` file is reponsible for wrapping/loading the `.wasm` file.
264+
265+
212266

213267

214268
## Versions of sql.js included in `dist/`
215269
- `sql-wasm.js` : The Web Assembly version of Sql.js. Minified and suitable for production. Use this. If you use this, you will need to include/ship `sql-wasm.wasm` as well.
216270
- `sql-wasm-debug.js` : The Web Assembly, Debug version of Sql.js. Larger, with assertions turned on. Useful for local development. You will need to include/ship `sql-wasm-debug.wasm` if you use this.
217271
- `sql-asm.js` : The older asm.js version of Sql.js. Slower and larger. Provided for compatiblity reasons.
218272
- `sql-asm-memory-growth.js` : Asm.js doesn't allow for memory to grow by default, because it is slower and de-optimizes. If you are using sql-asm.js and you see this error (`Cannot enlarge memory arrays`), use this file.
219-
- `sql-asm-debug.js` : The _Debug_ asm.js version of Sql.js. If using sql-asm.js, use this for local development.
220-
- `worker.*` - Web Worker versions of the above libraries
221-
Asm.js builds are included for backwards compatilbility.
273+
- `sql-asm-debug.js` : The _Debug_ asm.js version of Sql.js. Use this for local development.
274+
- `worker.*` - Web Worker versions of the above libraries. More limited API. See [examples/GUI/gui.js](examples/GUI/gui.js) for a good example of this.
222275

223276
## Compiling
224277

225278
- Install the EMSDK, [as described here](https://kripken.github.io/emscripten-site/docs/getting_started/downloads.html)
226-
- Run `npm rebuild`
227-
228-
229-
## Related
230-
231-
* [In-Browser/Client-Side Demo](http://kripken.github.io/sql.js/GUI/)
279+
- Run `npm run rebuild`
232280

0 commit comments

Comments
 (0)