feat: fixed kvvfs & opfs-wl types, added additional demos, expanded test suite

jurerotar · jurerotar · commit 8b42dcf79416 · 2026-04-20T12:58:56.000+02:00
diff --git a/demos/in-worker-demo/package.json b/demos/in-worker-demo/package.json
@@ -7,6 +7,6 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^8.0.8"
+    "vite": "^8.0.9"
   }
 }
diff --git a/demos/kvvfs-demo/index.html b/demos/kvvfs-demo/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>kvvfs Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
+</html>
diff --git a/demos/kvvfs-demo/package.json b/demos/kvvfs-demo/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@sqlite.org/kvvfs-demo",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^8.0.9"
+  }
+}
diff --git a/demos/kvvfs-demo/src/main.ts b/demos/kvvfs-demo/src/main.ts
@@ -0,0 +1,37 @@
+import sqlite3InitModule from '../../../src/index.js';
+
+const runDemo = async () => {
+  const sqlite3 = await sqlite3InitModule();
+  const dbName = 'kvvfs-demo';
+
+  sqlite3.kvvfs.unlink(dbName);
+
+  const db = new sqlite3.oo1.JsStorageDb('session');
+  db.exec('CREATE TABLE test (id INTEGER PRIMARY KEY, name TEXT)');
+  db.exec({
+    sql: 'INSERT INTO test (name) VALUES (?), (?)',
+    bind: ['kvvfs 1', 'kvvfs 2'],
+  });
+
+  const rows = db.selectObjects('SELECT * FROM test ORDER BY id');
+  const size = db.storageSize();
+
+  const app = document.getElementById('app');
+  if (app) {
+    const sizeInfo = document.createElement('p');
+    sizeInfo.textContent = `Stored in kvvfs as ${dbName} (${size} bytes)`;
+    app.appendChild(sizeInfo);
+
+    const ul = document.createElement('ul');
+    rows.forEach((row: any) => {
+      const li = document.createElement('li');
+      li.textContent = `${row.id}: ${row.name}`;
+      ul.appendChild(li);
+    });
+    app.appendChild(ul);
+  }
+
+  db.close();
+};
+
+runDemo().catch(console.error);
diff --git a/demos/main-thread-demo/package.json b/demos/main-thread-demo/package.json
@@ -7,6 +7,6 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^8.0.8"
+    "vite": "^8.0.9"
   }
 }
diff --git a/demos/opfs-demo/index.html b/demos/opfs-demo/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OPFS Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
+</html>
diff --git a/demos/opfs-demo/package.json b/demos/opfs-demo/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@sqlite.org/opfs-demo",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^8.0.9"
+  }
+}
diff --git a/demos/opfs-demo/src/main.ts b/demos/opfs-demo/src/main.ts
@@ -0,0 +1,26 @@
+const worker = new Worker(new URL('./workers/worker.ts', import.meta.url), {
+  type: 'module',
+});
+
+worker.onmessage = (e) => {
+  if (e.data.type === 'success') {
+    const app = document.getElementById('app');
+    if (app) {
+      const file = document.createElement('p');
+      file.textContent = `Stored in OPFS file ${e.data.filename}`;
+      app.appendChild(file);
+
+      const ul = document.createElement('ul');
+      e.data.rows.forEach((row: any) => {
+        const li = document.createElement('li');
+        li.textContent = `${row.id}: ${row.name}`;
+        ul.appendChild(li);
+      });
+      app.appendChild(ul);
+    }
+  } else if (e.data.type === 'error') {
+    console.error(e.data.message);
+  }
+};
+
+worker.postMessage({ type: 'start' });
diff --git a/demos/opfs-demo/src/workers/worker.ts b/demos/opfs-demo/src/workers/worker.ts
@@ -0,0 +1,25 @@
+import sqlite3InitModule from '../../../../src/index.js';
+
+self.onmessage = async (e) => {
+  if (e.data.type === 'start') {
+    try {
+      const sqlite3 = await sqlite3InitModule();
+      const filename = '/opfs-demo.sqlite3';
+      const db = new sqlite3.oo1.OpfsDb(filename, 'ct');
+
+      db.exec('CREATE TABLE test (id INTEGER PRIMARY KEY, name TEXT)');
+      db.exec({
+        sql: 'INSERT INTO test (name) VALUES (?), (?)',
+        bind: ['OPFS 1', 'OPFS 2'],
+      });
+
+      const rows = db.selectObjects('SELECT * FROM test ORDER BY id');
+
+      db.close();
+
+      self.postMessage({ type: 'success', filename, rows });
+    } catch (err: any) {
+      self.postMessage({ type: 'error', message: err.message });
+    }
+  }
+};
diff --git a/demos/opfs-wl-demo/index.html b/demos/opfs-wl-demo/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OPFS Web Locks Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
+</html>
diff --git a/demos/opfs-wl-demo/package.json b/demos/opfs-wl-demo/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@sqlite.org/opfs-wl-demo",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^8.0.9"
+  }
+}
diff --git a/demos/opfs-wl-demo/src/main.ts b/demos/opfs-wl-demo/src/main.ts
@@ -0,0 +1,26 @@
+const worker = new Worker(new URL('./workers/worker.ts', import.meta.url), {
+  type: 'module',
+});
+
+worker.onmessage = (e) => {
+  if (e.data.type === 'success') {
+    const app = document.getElementById('app');
+    if (app) {
+      const file = document.createElement('p');
+      file.textContent = `Stored in OPFS Web Locks file ${e.data.filename}`;
+      app.appendChild(file);
+
+      const ul = document.createElement('ul');
+      e.data.rows.forEach((row: any) => {
+        const li = document.createElement('li');
+        li.textContent = `${row.id}: ${row.name}`;
+        ul.appendChild(li);
+      });
+      app.appendChild(ul);
+    }
+  } else if (e.data.type === 'error') {
+    console.error(e.data.message);
+  }
+};
+
+worker.postMessage({ type: 'start' });
diff --git a/demos/opfs-wl-demo/src/workers/worker.ts b/demos/opfs-wl-demo/src/workers/worker.ts
@@ -0,0 +1,25 @@
+import sqlite3InitModule from '../../../../src/index.js';
+
+self.onmessage = async (e) => {
+  if (e.data.type === 'start') {
+    try {
+      const sqlite3 = await sqlite3InitModule();
+      const filename = '/opfs-wl-demo.sqlite3';
+      const db = new sqlite3.oo1.OpfsWlDb(filename, 'ct');
+
+      db.exec('CREATE TABLE test (id INTEGER PRIMARY KEY, name TEXT)');
+      db.exec({
+        sql: 'INSERT INTO test (name) VALUES (?), (?)',
+        bind: ['OPFS-WL 1', 'OPFS-WL 2'],
+      });
+
+      const rows = db.selectObjects('SELECT * FROM test ORDER BY id');
+
+      db.close();
+
+      self.postMessage({ type: 'success', filename, rows });
+    } catch (err: any) {
+      self.postMessage({ type: 'error', message: err.message });
+    }
+  }
+};
diff --git a/demos/sahpool-demo/package.json b/demos/sahpool-demo/package.json
@@ -7,6 +7,6 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^8.0.8"
+    "vite": "^8.0.9"
   }
 }
diff --git a/demos/sahpool-demo/src/main.ts b/demos/sahpool-demo/src/main.ts
@@ -3,6 +3,7 @@ const worker = new Worker(new URL('./workers/worker.ts', import.meta.url), {
 });
 
 worker.onmessage = (e) => {
+  console.log(e);
   if (e.data.type === 'success') {
     const rows = e.data.rows;
     const app = document.getElementById('app');
diff --git a/demos/sahpool-demo/src/workers/worker.ts b/demos/sahpool-demo/src/workers/worker.ts
@@ -6,6 +6,7 @@ self.onmessage = async (e) => {
       const sqlite3 = await sqlite3InitModule();
       const opfsSahPool = await sqlite3.installOpfsSAHPoolVfs({
         directory: '/sqlite-wasm-sahpool-demo',
+        clearOnInit: true,
       });
 
       const db = new opfsSahPool.OpfsSAHPoolDb('/test-sahpool-worker.sqlite3');
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/src/__tests__/sqlite3-opfs.browser.test.js b/src/__tests__/sqlite3-opfs.browser.test.js
diff --git a/src/__tests__/workers/sqlite3-opfs-wl.worker.js b/src/__tests__/workers/sqlite3-opfs-wl.worker.js
diff --git a/src/__tests__/workers/sqlite3-opfs.worker.js b/src/__tests__/workers/sqlite3-opfs.worker.js
diff --git a/src/index.d.ts b/src/index.d.ts
diff --git a/vitest.config.ts b/vitest.config.ts

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,6 @@`
`7`	`7`	`"preview": "vite preview"`
`8`	`8`	`},`
`9`	`9`	`"devDependencies": {`
`10`		`- "vite": "^8.0.8"`
	`10`	`+ "vite": "^8.0.9"`
`11`	`11`	`}`
`12`	`12`	`}`