mirror of
https://github.com/aljazceru/turso.git
synced 2025-12-18 00:54:19 +01:00
add basic examples for database-wasm package
This commit is contained in:
12
bindings/javascript/examples/database-node/README.md
Normal file
12
bindings/javascript/examples/database-node/README.md
Normal file
@@ -0,0 +1,12 @@
|
||||
# database-node
|
||||
|
||||
This is a minimal example showing how to use [`@tursodatabase/database`](https://www.npmjs.com/package/@tursodatabase/database) in the node.js
|
||||
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
npm install
|
||||
node index.mjs
|
||||
```
|
||||
21
bindings/javascript/examples/database-node/index.mjs
Normal file
21
bindings/javascript/examples/database-node/index.mjs
Normal file
@@ -0,0 +1,21 @@
|
||||
import { connect } from "@tursodatabase/database";
|
||||
|
||||
const db = await connect("local.db", {
|
||||
timeout: 1000, // busy timeout for handling high-concurrency write cases
|
||||
});
|
||||
|
||||
// execute multiple SQL statements with exec(...)
|
||||
await db.exec(`
|
||||
CREATE TABLE IF NOT EXISTS guestbook (comment TEXT, created_at DEFAULT (unixepoch()));
|
||||
CREATE INDEX IF NOT EXISTS guestbook_idx ON guestbook (created_at);
|
||||
`);
|
||||
|
||||
// use prepared statements and bind args to placeholders later
|
||||
const insert = db.prepare(`INSERT INTO guestbook(comment) VALUES (?)`);
|
||||
|
||||
// use run(...) method if query only need to be executed till completion
|
||||
await insert.run([`hello, turso at ${Math.floor(Date.now() / 1000)}`]);
|
||||
|
||||
const select = db.prepare(`SELECT * FROM guestbook ORDER BY created_at DESC LIMIT ?`);
|
||||
// use all(...) or get(...) methods to get all or one row from the query
|
||||
console.info(await select.all([5]))
|
||||
14
bindings/javascript/examples/database-node/package.json
Normal file
14
bindings/javascript/examples/database-node/package.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "database-node",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": "",
|
||||
"dependencies": {
|
||||
"@tursodatabase/database": "^0.2.0"
|
||||
}
|
||||
}
|
||||
1
bindings/javascript/examples/database-wasm-vite/.gitignore
vendored
Normal file
1
bindings/javascript/examples/database-wasm-vite/.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.vercel
|
||||
63
bindings/javascript/examples/database-wasm-vite/README.md
Normal file
63
bindings/javascript/examples/database-wasm-vite/README.md
Normal file
@@ -0,0 +1,63 @@
|
||||
# database-wasm-vite
|
||||
|
||||
This is a minimal example showing how to use [`@tursodatabase/database-wasm`](https://www.npmjs.com/package/@tursodatabase/database-wasm) in the browser with [Vite](https://vite.dev/).
|
||||
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
# or build assets and serve them with simple node.js server
|
||||
npm run build
|
||||
npm run serve
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Important: COOP / COEP Headers
|
||||
|
||||
Because `@tursodatabase/database-wasm` relies on **SharedArrayBuffer**, you need Cross-Origin headers in development and production:
|
||||
|
||||
### Vite dev server config (`vite.config.js`)
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
headers: {
|
||||
'Cross-Origin-Opener-Policy': 'same-origin',
|
||||
'Cross-Origin-Embedder-Policy': 'require-corp',
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### Static production server (`server.mjs`)
|
||||
|
||||
When serving the `dist/` build, also make sure your server sets these headers:
|
||||
|
||||
```js
|
||||
res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
|
||||
res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
|
||||
```
|
||||
|
||||
### Vercel deployment
|
||||
|
||||
If you deploy to [**Vercel**](https://vercel.com/), add a `vercel.json` file to ensure COOP / COEP headers are set:
|
||||
|
||||
```json
|
||||
{
|
||||
"headers": [
|
||||
{
|
||||
"source": "/(.*)",
|
||||
"headers": [
|
||||
{ "key": "Cross-Origin-Opener-Policy", "value": "same-origin" },
|
||||
{ "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
95
bindings/javascript/examples/database-wasm-vite/index.html
Normal file
95
bindings/javascript/examples/database-wasm-vite/index.html
Normal file
@@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Guestbook</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
max-width: 600px;
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
#comments {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#comments li {
|
||||
padding: 8px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
#comments li:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 0.8em;
|
||||
color: gray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Guestbook</h1>
|
||||
<form id="form">
|
||||
<input id="comment" placeholder="Write a comment..." style="width:70%; padding:6px;" />
|
||||
<button type="submit">Add</button>
|
||||
</form>
|
||||
<ul id="comments"></ul>
|
||||
|
||||
<script type="module">
|
||||
import { connect } from "@tursodatabase/database-wasm/vite";
|
||||
|
||||
let db = await connect("local.db", {
|
||||
timeout: 1000 // busy timeout for handling high-concurrency write cases
|
||||
});
|
||||
// execute multiple SQL statements with exec(...)
|
||||
await db.exec(`
|
||||
CREATE TABLE IF NOT EXISTS guestbook ( comment TEXT, created_at DEFAULT (unixepoch()) );
|
||||
CREATE INDEX IF NOT EXISTS guestbook_idx ON guestbook (created_at);
|
||||
`);
|
||||
await refresh();
|
||||
|
||||
async function addComment() {
|
||||
// use prepared statements and bind args to placeholders later
|
||||
const insert = db.prepare(`INSERT INTO guestbook(comment) VALUES (?)`);
|
||||
|
||||
const input = document.getElementById("comment");
|
||||
const text = input.value.trim();
|
||||
input.value = "";
|
||||
|
||||
// use run(...) method if query only need to be executed till completion
|
||||
await insert.run([text]);
|
||||
|
||||
await refresh();
|
||||
}
|
||||
document.getElementById("form").addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
addComment();
|
||||
});
|
||||
|
||||
async function refresh() {
|
||||
const select = db.prepare(`SELECT comment, created_at FROM guestbook ORDER BY created_at DESC LIMIT ?`);
|
||||
// use all(...) or get(...) methods to get all or one row from the query
|
||||
const rows = await select.all([5]);
|
||||
|
||||
const ul = document.getElementById("comments");
|
||||
ul.innerHTML = "";
|
||||
rows.forEach((row) => {
|
||||
const li = document.createElement("li");
|
||||
li.innerHTML = `
|
||||
<div>${row.comment}</div>
|
||||
<div class="time">${new Date(row.created_at * 1000).toLocaleString()}</div>
|
||||
`;
|
||||
ul.appendChild(li);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
19
bindings/javascript/examples/database-wasm-vite/package.json
Normal file
19
bindings/javascript/examples/database-wasm-vite/package.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "database-wasm-vite",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"serve": "node server.mjs"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": "",
|
||||
"devDependencies": {
|
||||
"vite": "^7.1.9"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tursodatabase/database-wasm": "^0.2.0"
|
||||
}
|
||||
}
|
||||
34
bindings/javascript/examples/database-wasm-vite/server.mjs
Normal file
34
bindings/javascript/examples/database-wasm-vite/server.mjs
Normal file
@@ -0,0 +1,34 @@
|
||||
import http from "http";
|
||||
import { readFile } from "fs/promises";
|
||||
import { extname, join } from "path";
|
||||
import { fileURLToPath } from "url";
|
||||
|
||||
const root = fileURLToPath(new URL("./dist", import.meta.url));
|
||||
const port = 8080;
|
||||
|
||||
const mimeTypes = { ".html": "text/html", ".js": "application/javascript" };
|
||||
|
||||
const server = http.createServer(async (req, res) => {
|
||||
// COOP / COEP headers necessary for shared WASM memory
|
||||
res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
|
||||
res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
|
||||
|
||||
try {
|
||||
const url = new URL(req.url, `http://${req.headers.host}`);
|
||||
const pathname = url.pathname;
|
||||
const filePath = pathname === "/" ? "index.html" : pathname;
|
||||
const fullPath = join(root, filePath);
|
||||
|
||||
const data = await readFile(fullPath);
|
||||
const ext = extname(fullPath).toLowerCase();
|
||||
const contentType = mimeTypes[ext] || "application/octet-stream";
|
||||
|
||||
res.writeHead(200, { "Content-Type": contentType });
|
||||
res.end(data);
|
||||
} catch (err) {
|
||||
res.writeHead(404, { "Content-Type": "text/plain" });
|
||||
res.end("Not found");
|
||||
}
|
||||
});
|
||||
|
||||
server.listen(port, "0.0.0.0", () => console.log(`Serving on http://localhost:${port}`));
|
||||
11
bindings/javascript/examples/database-wasm-vite/vercel.json
Normal file
11
bindings/javascript/examples/database-wasm-vite/vercel.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"headers": [
|
||||
{
|
||||
"source": "/(.*)",
|
||||
"headers": [
|
||||
{ "key": "Cross-Origin-Opener-Policy", "value": "same-origin" },
|
||||
{ "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
headers: {
|
||||
'Cross-Origin-Opener-Policy': 'same-origin',
|
||||
'Cross-Origin-Embedder-Policy': 'require-corp',
|
||||
}
|
||||
}
|
||||
})
|
||||
35
bindings/javascript/package-lock.json
generated
35
bindings/javascript/package-lock.json
generated
@@ -13,9 +13,28 @@
|
||||
"packages/wasm",
|
||||
"sync/packages/common",
|
||||
"sync/packages/native",
|
||||
"sync/packages/wasm"
|
||||
"sync/packages/wasm",
|
||||
"examples/database-node",
|
||||
"examples/database-wasm-vite"
|
||||
]
|
||||
},
|
||||
"examples/database-node": {
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@tursodatabase/database": "^0.2.0"
|
||||
}
|
||||
},
|
||||
"examples/database-wasm-vite": {
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@tursodatabase/database-wasm": "^0.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^7.1.9"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
"version": "7.27.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
|
||||
@@ -1656,6 +1675,14 @@
|
||||
"node": ">= 12"
|
||||
}
|
||||
},
|
||||
"node_modules/database-node": {
|
||||
"resolved": "examples/database-node",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/database-wasm-vite": {
|
||||
"resolved": "examples/database-wasm-vite",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
|
||||
@@ -3248,9 +3275,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "7.1.5",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.1.5.tgz",
|
||||
"integrity": "sha512-4cKBO9wR75r0BeIWWWId9XK9Lj6La5X846Zw9dFfzMRw38IlTk2iCcUt6hsyiDRcPidc55ZParFYDXi0nXOeLQ==",
|
||||
"version": "7.1.9",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.1.9.tgz",
|
||||
"integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
|
||||
@@ -12,7 +12,9 @@
|
||||
"packages/wasm",
|
||||
"sync/packages/common",
|
||||
"sync/packages/native",
|
||||
"sync/packages/wasm"
|
||||
"sync/packages/wasm",
|
||||
"examples/database-node",
|
||||
"examples/database-wasm-vite"
|
||||
],
|
||||
"version": "0.2.0"
|
||||
}
|
||||
|
||||
@@ -1593,7 +1593,7 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@tursodatabase/database-wasm@workspace:packages/wasm":
|
||||
"@tursodatabase/database-wasm@npm:^0.2.0, @tursodatabase/database-wasm@workspace:packages/wasm":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@tursodatabase/database-wasm@workspace:packages/wasm"
|
||||
dependencies:
|
||||
@@ -1608,7 +1608,7 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@tursodatabase/database@workspace:packages/native":
|
||||
"@tursodatabase/database@npm:^0.2.0, @tursodatabase/database@workspace:packages/native":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@tursodatabase/database@workspace:packages/native"
|
||||
dependencies:
|
||||
@@ -2100,6 +2100,23 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"database-node@workspace:examples/database-node":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "database-node@workspace:examples/database-node"
|
||||
dependencies:
|
||||
"@tursodatabase/database": "npm:^0.2.0"
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"database-wasm-vite@workspace:examples/database-wasm-vite":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "database-wasm-vite@workspace:examples/database-wasm-vite"
|
||||
dependencies:
|
||||
"@tursodatabase/database-wasm": "npm:^0.2.0"
|
||||
vite: "npm:^7.1.9"
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"debug@npm:4":
|
||||
version: 4.4.3
|
||||
resolution: "debug@npm:4.4.3"
|
||||
@@ -3865,9 +3882,9 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"vite@npm:^5.0.0 || ^6.0.0 || ^7.0.0-0, vite@npm:^7.1.5":
|
||||
version: 7.1.5
|
||||
resolution: "vite@npm:7.1.5"
|
||||
"vite@npm:^5.0.0 || ^6.0.0 || ^7.0.0-0, vite@npm:^7.1.5, vite@npm:^7.1.9":
|
||||
version: 7.1.9
|
||||
resolution: "vite@npm:7.1.9"
|
||||
dependencies:
|
||||
esbuild: "npm:^0.25.0"
|
||||
fdir: "npm:^6.5.0"
|
||||
@@ -3916,7 +3933,7 @@ __metadata:
|
||||
optional: true
|
||||
bin:
|
||||
vite: bin/vite.js
|
||||
checksum: 10c0/782d2f20c25541b26d1fb39bef5f194149caff39dc25b7836e25f049ca919f2e2ce186bddb21f3f20f6195354b3579ec637a8ca08d65b117f8b6f81e3e730a9c
|
||||
checksum: 10c0/f628f903a137c1410232558bde99c223ea00a090bda6af77752c61f912955f0050aac12d3cfe024d08a0f150ff6fab61b3d0be75d634a59b94d49f525392e1f7
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
|
||||
Reference in New Issue
Block a user