Skip to content

Commit 0aa5305

Browse files
insipxinsipx
authored
Update README + Add Example website (#17)
1 parent 7f0f938 commit 0aa5305

34 files changed

+1981
-510
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,4 @@ node_modules/**
3030
.direnv/**
3131
.envrc
3232
.DS_Store
33+
examples/web-sqlite/pkg/**

‎Cargo.toml

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
[package]
2-
name = "diesel-wasm-sqlite"
2+
name = "sqlite-web"
33
version = "0.0.1"
44
edition = "2021"
55
resolver = "2"
@@ -63,3 +63,5 @@ unsafe-debug-query = []
6363
[build]
6464
target = "wasm32-unknown-unknown"
6565

66+
[package.metadata.wasm-pack.profile.dev.wasm-bindgen]
67+
split-linked-modules = true

‎README.md

+17-52
Original file line numberDiff line numberDiff line change
@@ -4,66 +4,31 @@ Use SQLite with Diesel ORM in your web apps!
44

55
## Quickstart
66

7-
Add `diesel-wasm-sqlite` to your project. SQLite is automatically bundled with
8-
the library.
7+
Add `sqlite-web` to your project. SQLite is automatically bundled with the
8+
library.
99

1010
```toml
1111
[dependencies]
1212
diesel = { version = "2.2" }
13-
diesel-wasm-sqlite = { git = "https://github.com/xmtp/libxmtp", branch = "wasm-backend" }
13+
sqlite-web = { git = "https://github.com/xmtp/sqlite-web-rs", branch = "main" }
1414
wasm-bindgen = "0.2"
1515
```
1616

17-
```rust
18-
use diesel_wasm_sqlite::{connection::WasmSqliteConnection, WasmSqlite};
19-
use wasm_bindgen::prelude::*;
20-
21-
pub const MIGRATIONS: EmbeddedMigrations = embed_migrations!("./tests/web/migrations/");
22-
23-
mod schema {
24-
diesel::table! {
25-
books {
26-
id -> Integer,
27-
title -> Text,
28-
author -> Nullable<Text>,
29-
}
30-
}
31-
}
32-
33-
34-
#[derive(Deserialize, Insertable, Debug, PartialEq, Clone)]
35-
#[diesel(table_name = books)]
36-
pub struct BookForm {
37-
title: String,
38-
author: Option<String>,
39-
}
40-
41-
// SQLite must be instantiated in a web-worker
42-
// to take advantage of OPFS
43-
#[wasm_bindgen]
44-
async fn code_in_web_worker() -> Result<i32, diesel::QueryResult<usize>> {
45-
use schema::books::dsl::*;
46-
// `init_sqlite` sets up OPFS and SQLite. It must be ran before anything else,
47-
// or we crash once we start trying to do queries.
48-
diesel_wasm_sqlite::init_sqlite().await;
49-
50-
// create a new persistent SQLite database with OPFS
51-
let result = WasmSqliteConnection::establish(&format!("test-{}", rng));
52-
let query = insert_into(books).values(vec![
53-
BookForm {
54-
title: "Game of Thrones".into(),
55-
author: Some("George R.R".into()),
56-
},
57-
BookForm {
58-
title: "The Hobbit".into(),
59-
author: Some("J.R.R. Tolkien".into()),
60-
},
61-
]);
62-
Ok(query.execute(conn)?)
63-
}
64-
```
17+
## Try It Out!
18+
19+
Try out SQLite on the web with rust at this
20+
[example app](https://sqlite-web-example.netlify.app/)
21+
22+
## Running the Example
23+
24+
Look in `examples/web-sqlite` for a working example!
6525

66-
Look in `tests/test/web.rs` for a working example!
26+
- run `yarn` in the root of the repo
27+
- navigate to `examples/web-sqlite`
28+
- make sure the [`miniserve`](https://github.com/svenstaro/miniserve) crate is
29+
installed locally
30+
- run `./build.sh && ./run.sh`
31+
- navigate to `localhost:8080`
6732

6833
## Contributing
6934

‎examples/web-sqlite/.vscode/settings.json

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"rust-analyzer.cargo.sysroot": "discover",
3+
"rust-analyzer.cargo.allTargets": false,
4+
"rust-analyzer.cargo.target": "wasm32-unknown-unknown",
5+
"rust-analyzer.procMacro.enable": true,
6+
"rust-analyzer.diagnostics.enable": true,
7+
"rust-analyzer.diagnostics.disabled": [
8+
"unlinked-file",
9+
"unresolved-macro-call",
10+
"unresolved-proc-macro"
11+
],
12+
"rust-analyzer.procMacro.attributes.enable": true,
13+
"rust-analyzer.procMacro.ignored": {
14+
"async-trait": ["async_trait"],
15+
"napi-derive": ["napi"],
16+
"async-recursion": ["async_recursion"],
17+
"ctor": ["ctor"],
18+
"tokio": ["test"],
19+
"diesel": ["table"],
20+
"wasm-bindgen": ["wasm-bindgen"]
21+
},
22+
"[toml]": {
23+
"editor.defaultFormatter": "tamasfe.even-better-toml"
24+
},
25+
"[typescript]": {
26+
"editor.defaultFormatter": "esbenp.prettier-vscode"
27+
},
28+
"[javascript]": {
29+
"editor.defaultFormatter": "esbenp.prettier-vscode"
30+
},
31+
"[json]": {
32+
"editor.defaultFormatter": "esbenp.prettier-vscode"
33+
}
34+
}

‎examples/web-sqlite/Cargo.toml

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
[package]
2+
name = "example-sqlite-web"
3+
version = "0.0.0"
4+
edition = "2021"
5+
publish = false
6+
7+
[lib]
8+
crate-type = ["cdylib"]
9+
10+
[dependencies]
11+
sqlite-web = { path = "./../../" }
12+
wasm-bindgen = "=0.2.99"
13+
wasm-bindgen-futures = "0.4"
14+
diesel = "2.2"
15+
console_error_panic_hook = { version = "0.1.6" }
16+
diesel_migrations = "2.2"
17+
serde = "1"
18+
serde-wasm-bindgen = "0.6"
19+
anyhow = "1"
20+
tracing-subscriber = { version = "0.3", features = ["env-filter"] }
21+
tracing = "0.1"
22+
tracing-wasm = "0.2"
23+
24+
[dependencies.web-sys]
25+
version = "0.3"
26+
features = [
27+
'console',
28+
'Document',
29+
'HtmlElement',
30+
'HtmlInputElement',
31+
'HtmlTextAreaElement',
32+
'MessageEvent',
33+
'Window',
34+
'Worker',
35+
'WorkerType',
36+
'WorkerOptions'
37+
]
38+
39+
# patch needed until diesel makes a release that includes
40+
# the latest changes
41+
[patch.crates-io]
42+
diesel = { git = "https://github.com/diesel-rs/diesel", branch = "master" }
43+
diesel_derives = { git = "https://github.com/diesel-rs/diesel", branch = "master" }
44+
diesel_migrations = { git = "https://github.com/diesel-rs/diesel", branch = "master" }
45+
46+
47+
[package.metadata.wasm-pack.profile.dev.wasm-bindgen]
48+
# Required for sqlite-web
49+
split-linked-modules = true

‎examples/web-sqlite/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# web-sqlite

‎examples/web-sqlite/build.sh

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
#!/bin/bash
2+
3+
set -ex
4+
5+
# This example requires to *not* create ES modules, therefore we pass the flag
6+
# `--target no-modules`
7+
cd ../../
8+
yarn
9+
cd examples/web-sqlite
10+
11+
curl -L --proto '=https' --tlsv1.2 -sSf https://raw.githubusercontent.com/cargo-bins/cargo-binstall/main/install-from-binstall-release.sh | bash
12+
cargo binstall wasm-bindgen-cli
13+
14+
RUSTFLAGS="-Ctarget-feature=+bulk-memory,+mutable-globals,+reference-types" cargo build \
15+
--release --target wasm32-unknown-unknown
16+
17+
wasm-bindgen ./target/wasm32-unknown-unknown/release/example_sqlite_web.wasm \
18+
--out-dir ./pkg --split-linked-modules --target web
19+
rm pkg/package.json
20+
yarn wasm-opt ./pkg/example_sqlite_web_bg.wasm -o ./pkg/example_sqlite_web_bg.wasm-opt.wasm -Oz
21+
22+
if [[ $? -eq 0 ]]; then
23+
mv ./pkg/example_sqlite_web_bg.wasm-opt.wasm ./pkg/example_sqlite_web_bg.wasm
24+
else
25+
echo "wasm-opt failed"
26+
fi

‎examples/web-sqlite/css/attribution.txt

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
CSS provided by https://github.com/matifandy8/NeoBrutalismCSS/tree/main

‎examples/web-sqlite/css/brutalist.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/web-sqlite/css/style.css

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
body {
2+
width: 100%;
3+
height: 100%;
4+
display: flex;
5+
flex-direction: column;
6+
align-items: center;
7+
justify-content: center;
8+
font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
9+
}
10+
11+
#wrapper {
12+
width: 50%;
13+
display: flex;
14+
flex-direction: row;
15+
align-items: center;
16+
justify-content: center;
17+
}
18+
19+
#div-wrapper {
20+
display: flex;
21+
flex-direction: column;
22+
align-items: center;
23+
justify-content: center;
24+
padding: 2em;
25+
}
26+
27+
#inputNumber {
28+
text-align: center;
29+
}
30+
31+
#resultField {
32+
text-align: center;
33+
height: 1em;
34+
padding-top: 0.2em;
35+
}

‎examples/web-sqlite/diesel.toml

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# For documentation on how to configure this file,
2+
# see https://diesel.rs/guides/configuring-diesel-cli
3+
4+
[print_schema]
5+
file = "src/storage/encrypted_store/schema.rs"
6+
7+
[migrations_directory]
8+
dir = "migrations"

‎examples/web-sqlite/index.html

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Simple Post Manager</title>
7+
<link rel="stylesheet" href="css/style.css">
8+
<link rel="stylesheet" href="css/brutalist.css" />
9+
</head>
10+
<body>
11+
<div id = "div-wrapper">
12+
<H2>Database</h2>
13+
<h4>web-sqlite-rs-test-db.db3</h4>
14+
</div>
15+
<div id="wrapper">
16+
<div>
17+
<div id = "div-wrapper">
18+
<div>
19+
<label for="title">Title:</label>
20+
<input type="text" id="title" class="nb-input default" required>
21+
</div>
22+
<div>
23+
<label for="body">Body:</label>
24+
<textarea id="body" class="nb-input default" rows="4" required></textarea>
25+
</div>
26+
<div>
27+
<label for="published">
28+
<input type="checkbox" class="nb-checkbox" id="published"> Published
29+
</label>
30+
</div>
31+
<button id="create-post-btn" type="button" class="nb-button blue">Create Post</button>
32+
</div>
33+
</div>
34+
<div>
35+
<div id = "div-wrapper">
36+
<input type="text" id="post-id" class="nb-input default" required>
37+
<button id="delete-post-btn" type="button" class="nb-button blue">Delete Post</button>
38+
</div>
39+
</div>
40+
<div id = "div-wrapper">
41+
<button id="list-posts-btn" type="button" class="nb-button blue">List Posts</button>
42+
</div>
43+
<div id = "div-wrapper">
44+
<button id="clear-posts-btn" type="button" class="nb-button blue">Clear</button>
45+
</div>
46+
</div>
47+
<div>
48+
<!-- List of Posts -->
49+
<div>
50+
<h2>Posts</h2>
51+
<hr>
52+
<div id="posts-container" class="grid"></div>
53+
</div>
54+
</div>
55+
<script type="module" src="./index.js"></script>
56+
</body>
57+
</html>

‎examples/web-sqlite/index.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// We only need `startup` here which is the main entry point
2+
// In theory, we could also use all other functions/struct types from Rust which we have bound with
3+
// `#[wasm_bindgen]`
4+
import init, { startup } from "./pkg/example_sqlite_web.js";
5+
6+
async function run_wasm() {
7+
// Load the Wasm file by awaiting the Promise returned by `wasm_bindgen`
8+
// `wasm_bindgen` was imported in `index.html`
9+
await init();
10+
11+
console.log("index.js loaded");
12+
13+
// Run main Wasm entry point
14+
// This will create a worker from within our Rust code compiled to Wasm
15+
startup();
16+
}
17+
18+
run_wasm();

‎examples/web-sqlite/migrations/2024-12-09-190250_posts/down.sql

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
DROP TABLE posts

‎examples/web-sqlite/migrations/2024-12-09-190250_posts/up.sql

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
CREATE TABLE posts (
2+
id INTEGER NOT NULL PRIMARY KEY,
3+
title VARCHAR NOT NULL,
4+
body TEXT NOT NULL,
5+
published BOOLEAN NOT NULL DEFAULT 0
6+
)

‎examples/web-sqlite/netlify.toml

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
[[headers]]
2+
for = "/*"
3+
[headers.values]
4+
Cross-Origin-Embedder-Policy = "require-corp"
5+
Cross-Origin-Opener-Policy = "same-origin"

0 commit comments

Comments
 (0)