move examples to the top-level directory

2025-12-18 00:54:19 +01:00 · 2025-10-06 18:01:54 +04:00
parent 0b9a5f331c
commit 926fd25cdd
28 changed files with 1186 additions and 739 deletions
--- a/examples/javascript/database-wasm-vite/.gitignore
+++ b/examples/javascript/database-wasm-vite/.gitignore
@@ -0,0 +1 @@
+.vercel
--- a/examples/javascript/database-wasm-vite/README.md
+++ b/examples/javascript/database-wasm-vite/README.md
@@ -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" }
+      ]
+    }
+  ]
+}
+```
--- a/examples/javascript/database-wasm-vite/index.html
+++ b/examples/javascript/database-wasm-vite/index.html
@@ -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>
--- a/examples/javascript/database-wasm-vite/package-lock.json
+++ b/examples/javascript/database-wasm-vite/package-lock.json
--- a/examples/javascript/database-wasm-vite/package.json
+++ b/examples/javascript/database-wasm-vite/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "database-wasm-vite",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "node server.mjs",
+    "tsc-build": "echo 'no tsc-build'",
+    "test": "echo 'no tests'"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "vite": "^7.1.9"
+  },
+  "dependencies": {
+    "@tursodatabase/database-wasm": "../../../bindings/javascript/packages/wasm"
+  }
+}
--- a/examples/javascript/database-wasm-vite/server.mjs
+++ b/examples/javascript/database-wasm-vite/server.mjs
@@ -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}`));
--- a/examples/javascript/database-wasm-vite/vercel.json
+++ b/examples/javascript/database-wasm-vite/vercel.json
@@ -0,0 +1,11 @@
+{
+  "headers": [
+    {
+      "source": "/(.*)",
+      "headers": [
+        { "key": "Cross-Origin-Opener-Policy", "value": "same-origin" },
+        { "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" }
+      ]
+    }
+  ]
+}
--- a/examples/javascript/database-wasm-vite/vite.config.ts
+++ b/examples/javascript/database-wasm-vite/vite.config.ts
@@ -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',
+    }
+  }
+})