chore: added demo apps for webpack, rsbuild and parcel bundlers

jurerotar · jurerotar · commit a4b723349dad · 2026-04-21T16:31:55.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -41,3 +41,5 @@ Thumbs.db
 node_modules
 dist/
 bundle
+
+.parcel-cache
diff --git a/demos/sahpool-parcel-demo/index.html b/demos/sahpool-parcel-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>SAHPOOL Parcel Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.js"></script>
+  </body>
+</html>
diff --git a/demos/sahpool-parcel-demo/package.json b/demos/sahpool-parcel-demo/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@sqlite.org/sahpool-parcel-demo",
+  "type": "module",
+  "scripts": {
+    "dev": "parcel serve index.html --port 5174 --dist-dir dist",
+    "build": "parcel build index.html --dist-dir dist"
+  },
+  "targets": {
+    "default": {
+      "outputFormat": "esmodule"
+    }
+  },
+  "devDependencies": {
+    "parcel": "^2.16.1"
+  }
+}
diff --git a/demos/sahpool-parcel-demo/src/main.js b/demos/sahpool-parcel-demo/src/main.js
@@ -0,0 +1,23 @@
+const worker = new Worker(new URL('./workers/worker.js', import.meta.url), {
+  type: 'module',
+});
+
+worker.onmessage = (e) => {
+  if (e.data.type === 'success') {
+    const app = document.getElementById('app');
+    if (app) {
+      const ul = document.createElement('ul');
+      e.data.rows.forEach((row) => {
+        const li = document.createElement('li');
+        li.textContent = `${row.id}: ${row.name}`;
+        ul.appendChild(li);
+      });
+      app.appendChild(ul);
+    }
+    return;
+  }
+
+  console.error(e.data.message);
+};
+
+worker.postMessage({ type: 'start' });
diff --git a/demos/sahpool-parcel-demo/src/workers/worker.js b/demos/sahpool-parcel-demo/src/workers/worker.js
@@ -0,0 +1,26 @@
+import sqlite3InitModule from '../../../../dist/index.mjs';
+
+self.onmessage = async (e) => {
+  if (e.data.type !== 'start') return;
+
+  try {
+    const sqlite3 = await sqlite3InitModule();
+    const opfsSahPool = await sqlite3.installOpfsSAHPoolVfs({
+      directory: '/sqlite-wasm-sahpool-parcel-demo',
+      clearOnInit: true,
+    });
+
+    const db = new opfsSahPool.OpfsSAHPoolDb('/test-sahpool-parcel-worker.sqlite3');
+    db.exec('CREATE TABLE test (id INTEGER PRIMARY KEY, name TEXT)');
+    db.exec({
+      sql: 'INSERT INTO test (name) VALUES (?), (?)',
+      bind: ['Alice', 'Bob'],
+    });
+
+    const rows = db.selectObjects('SELECT * FROM test ORDER BY id');
+    db.close();
+    self.postMessage({ type: 'success', rows });
+  } catch (err) {
+    self.postMessage({ type: 'error', message: err.message });
+  }
+};
diff --git a/demos/sahpool-rsbuild-demo/package.json b/demos/sahpool-rsbuild-demo/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@sqlite.org/sahpool-rsbuild-demo",
+  "type": "module",
+  "scripts": {
+    "dev": "rsbuild dev --port 5175",
+    "build": "rsbuild build"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^1.5.13"
+  }
+}
diff --git a/demos/sahpool-rsbuild-demo/rsbuild.config.mjs b/demos/sahpool-rsbuild-demo/rsbuild.config.mjs
@@ -0,0 +1,13 @@
+import { defineConfig } from '@rsbuild/core';
+
+export default defineConfig({
+  server: {
+    headers: {
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+      'Cross-Origin-Opener-Policy': 'same-origin',
+    },
+  },
+  html: {
+    title: 'SAHPOOL Rsbuild Demo',
+  },
+});
diff --git a/demos/sahpool-rsbuild-demo/src/index.js b/demos/sahpool-rsbuild-demo/src/index.js
@@ -0,0 +1 @@
+import './main.js';
diff --git a/demos/sahpool-rsbuild-demo/src/main.js b/demos/sahpool-rsbuild-demo/src/main.js
@@ -0,0 +1,23 @@
+const worker = new Worker(new URL('./workers/worker.js', import.meta.url), {
+  type: 'module',
+});
+
+worker.onmessage = (e) => {
+  if (e.data.type === 'success') {
+    const app = document.getElementById('app');
+    if (app) {
+      const ul = document.createElement('ul');
+      e.data.rows.forEach((row) => {
+        const li = document.createElement('li');
+        li.textContent = `${row.id}: ${row.name}`;
+        ul.appendChild(li);
+      });
+      app.appendChild(ul);
+    }
+    return;
+  }
+
+  console.error(e.data.message);
+};
+
+worker.postMessage({ type: 'start' });
diff --git a/demos/sahpool-rsbuild-demo/src/workers/worker.js b/demos/sahpool-rsbuild-demo/src/workers/worker.js
@@ -0,0 +1,26 @@
+import sqlite3InitModule from '../../../../dist/index.mjs';
+
+self.onmessage = async (e) => {
+  if (e.data.type !== 'start') return;
+
+  try {
+    const sqlite3 = await sqlite3InitModule();
+    const opfsSahPool = await sqlite3.installOpfsSAHPoolVfs({
+      directory: '/sqlite-wasm-sahpool-rsbuild-demo',
+      clearOnInit: true,
+    });
+
+    const db = new opfsSahPool.OpfsSAHPoolDb('/test-sahpool-rsbuild-worker.sqlite3');
+    db.exec('CREATE TABLE test (id INTEGER PRIMARY KEY, name TEXT)');
+    db.exec({
+      sql: 'INSERT INTO test (name) VALUES (?), (?)',
+      bind: ['Alice', 'Bob'],
+    });
+
+    const rows = db.selectObjects('SELECT * FROM test ORDER BY id');
+    db.close();
+    self.postMessage({ type: 'success', rows });
+  } catch (err) {
+    self.postMessage({ type: 'error', message: err.message });
+  }
+};
diff --git a/demos/sahpool-webpack-demo/index.html b/demos/sahpool-webpack-demo/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SAHPOOL Webpack Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/demos/sahpool-webpack-demo/package.json b/demos/sahpool-webpack-demo/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "@sqlite.org/sahpool-webpack-demo",
+  "type": "module",
+  "scripts": {
+    "dev": "webpack serve --config webpack.config.mjs --mode development",
+    "build": "webpack --config webpack.config.mjs --mode production"
+  },
+  "devDependencies": {
+    "webpack": "^5.102.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2"
+  }
+}
diff --git a/demos/sahpool-webpack-demo/src/main.js b/demos/sahpool-webpack-demo/src/main.js
@@ -0,0 +1,23 @@
+const worker = new Worker(new URL('./workers/worker.js', import.meta.url), {
+  type: 'module',
+});
+
+worker.onmessage = (e) => {
+  if (e.data.type === 'success') {
+    const app = document.getElementById('app');
+    if (app) {
+      const ul = document.createElement('ul');
+      e.data.rows.forEach((row) => {
+        const li = document.createElement('li');
+        li.textContent = `${row.id}: ${row.name}`;
+        ul.appendChild(li);
+      });
+      app.appendChild(ul);
+    }
+    return;
+  }
+
+  console.error(e.data.message);
+};
+
+worker.postMessage({ type: 'start' });
diff --git a/demos/sahpool-webpack-demo/src/workers/worker.js b/demos/sahpool-webpack-demo/src/workers/worker.js
@@ -0,0 +1,26 @@
+import sqlite3InitModule from '../../../../dist/index.mjs';
+
+self.onmessage = async (e) => {
+  if (e.data.type !== 'start') return;
+
+  try {
+    const sqlite3 = await sqlite3InitModule();
+    const opfsSahPool = await sqlite3.installOpfsSAHPoolVfs({
+      directory: '/sqlite-wasm-sahpool-webpack-demo',
+      clearOnInit: true,
+    });
+
+    const db = new opfsSahPool.OpfsSAHPoolDb('/test-sahpool-webpack-worker.sqlite3');
+    db.exec('CREATE TABLE test (id INTEGER PRIMARY KEY, name TEXT)');
+    db.exec({
+      sql: 'INSERT INTO test (name) VALUES (?), (?)',
+      bind: ['Alice', 'Bob'],
+    });
+
+    const rows = db.selectObjects('SELECT * FROM test ORDER BY id');
+    db.close();
+    self.postMessage({ type: 'success', rows });
+  } catch (err) {
+    self.postMessage({ type: 'error', message: err.message });
+  }
+};
diff --git a/demos/sahpool-webpack-demo/webpack.config.mjs b/demos/sahpool-webpack-demo/webpack.config.mjs
@@ -0,0 +1,31 @@
+import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'node:path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export default {
+  entry: './src/main.js',
+  output: {
+    filename: 'bundle.js',
+    path: resolve(__dirname, 'dist'),
+    clean: true,
+  },
+  stats: {
+    errorDetails: true,
+  },
+  devtool: 'source-map',
+  experiments: {
+    asyncWebAssembly: true,
+  },
+  devServer: {
+    port: 5173,
+    static: {
+      directory: __dirname,
+    },
+    headers: {
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+      'Cross-Origin-Opener-Policy': 'same-origin',
+    },
+  },
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
