Merge pull request #15 from etiennenoel/added-comlink-and-better-main-thread-support

tomayac · web-flow · commit d713ca1dd234 · 2023-06-30T20:04:59.000+05:30
Added comlink and a sqlite client that encapsulates the communication…
diff --git a/demo/index.html b/demo/index.html
@@ -5,12 +5,15 @@
     <title>SQLite Wasm Demo</title>
     <script type="module" src="script.js"></script>
     <script type="module" src="main-thread.js"></script>
+    <script type="module" src="sqlite-client.js"></script>
   </head>
   <body>
     <h1>SQLite Wasm Demo</h1>
     <h2>Main thread</h2>
     <div class="main-thread"></div>
     <h2>Worker</h2>
     <div class="worker"></div>
+    <h2>Built-in SQLite Client</h2>
+    <div id="sqlite-client"></div>
   </body>
 </html>
diff --git a/demo/sqlite-client.js b/demo/sqlite-client.js
@@ -0,0 +1,28 @@
+import SqliteClient from '/src/sqlite.client.mjs';
+
+const sqliteClient = new SqliteClient('/db.sqlite3', '/src/sqlite.worker.mjs');
+
+await sqliteClient.init();
+
+await sqliteClient.executeSql('CREATE TABLE IF NOT EXISTS t(a,b)');
+
+for (let i = 20; i <= 25; ++i) {
+  await sqliteClient.executeSql('INSERT INTO t(a,b) VALUES (?,?)', [i, i * 2]);
+}
+
+const rows = await sqliteClient.executeSql(
+  'SELECT a FROM t ORDER BY a LIMIT 3',
+);
+
+console.log(rows);
+
+document.getElementById('sqlite-client').innerHTML =
+  '<table>' +
+  '<thead>' +
+  '<tr>' +
+  '<th>a</th>' +
+  '</tr>' +
+  '</thead>' +
+  '<tbody>' +
+  rows.map((row) => '<tr><td> ' + row[0] + '</td></tr>').concat();
+'</tbody>' + '</table>';
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -58,5 +58,8 @@
     "prettier": "^2.8.8",
     "publint": "^0.1.12",
     "shx": "^0.3.4"
+  },
+  "dependencies": {
+    "comlink": "^4.4.1"
   }
 }
diff --git a/src/sqlite-client.mjs b/src/sqlite-client.mjs
@@ -0,0 +1,70 @@
+const log = (...args) => console.log(...args);
+const error = (...args) => console.error(...args);
+
+export default class SqliteClient {
+  sqliteWorker;
+
+  dbFile = '';
+  sqliteWorkerPath = '';
+
+  constructor(dbFile, sqliteWorkerPath) {
+    if (typeof dbFile !== 'string') {
+      return error(
+        "The 'dbFile' parameter passed to the SqliteClient constructor must be of type 'string'. Instead, you passed: '" +
+          typeof dbFile +
+          "'",
+      );
+    }
+
+    if (typeof sqliteWorkerPath !== 'string') {
+      return error(
+        "The 'sqliteWorkerPath' parameter passed to the SqliteClient constructor must be of type 'string'. Instead, you passed: '" +
+          typeof sqliteWorkerPath +
+          "'",
+      );
+    }
+
+    this.dbFile = dbFile;
+    this.sqliteWorkerPath = sqliteWorkerPath;
+  }
+
+  async init() {
+    const SqliteWorker = Comlink.wrap(
+      new Worker(this.sqliteWorkerPath, {
+        type: 'module',
+      }),
+    );
+
+    this.sqliteWorker = await new SqliteWorker();
+
+    await this.sqliteWorker.init(this.dbFile);
+  }
+
+  async executeSql(sqlStatement, bindParameters = []) {
+    if (typeof sqlStatement !== 'string') {
+      return error(
+        "The 'sqlStatement' parameter passed to the 'executeSql' method of the SqliteClient must be of type 'string'. Instead, you passed: '" +
+          typeof sqlStatement +
+          "'",
+      );
+    }
+
+    if (!Array.isArray(bindParameters)) {
+      return error(
+        "The 'bindParameters' parameter passed to the 'executeSql' method of the SqliteClient must be of type 'array'. Instead, you passed: '" +
+          typeof bindParameters +
+          "'",
+      );
+    }
+
+    return new Promise(async (resolve) => {
+      await this.sqliteWorker.executeSql(
+        sqlStatement,
+        bindParameters,
+        Comlink.proxy((rows) => {
+          return resolve(rows);
+        }),
+      );
+    });
+  }
+}
diff --git a/src/sqlite-worker.mjs b/src/sqlite-worker.mjs
@@ -0,0 +1,38 @@
+import * as Comlink from 'https://unpkg.com/comlink/dist/esm/comlink.mjs';
+import { default as sqlite3InitModule } from '../index.mjs';
+
+const log = (...args) => console.log(...args);
+const error = (...args) => console.error(...args);
+
+class SqliteWorker {
+  db;
+  init(dbFile) {
+    return new Promise((resolve) => {
+      sqlite3InitModule({
+        print: log,
+        printErr: error,
+      }).then((sqlite3) => {
+        try {
+          this.db = new sqlite3.oo1.OpfsDb(dbFile);
+        } catch (err) {
+          error(err.name, err.message);
+        }
+
+        return resolve();
+      });
+    });
+  }
+
+  executeSql(sqlStatement, bindParameters, callback) {
+    return callback(
+      this.db.exec({
+        sql: sqlStatement,
+        bind: bindParameters,
+        returnValue: 'resultRows',
+        rowMode: 'array',
+      }),
+    );
+  }
+}
+
+Comlink.expose(SqliteWorker);

Original file line number	Diff line number	Diff line change
`@@ -58,5 +58,8 @@`
`58`	`58`	`"prettier": "^2.8.8",`
`59`	`59`	`"publint": "^0.1.12",`
`60`	`60`	`"shx": "^0.3.4"`
	`61`	`+ },`
	`62`	`+ "dependencies": {`
	`63`	`+ "comlink": "^4.4.1"`
`61`	`64`	`}`
`62`	`65`	`}`