Setup DuckDB Wasm with Stimulus for client-side queries

murdho · Jan 26, 2025 · 87cc8a8 · 87cc8a8
1 parent 1fae547
commit 87cc8a8
Show file tree

Hide file tree

Showing 9 changed files with 223 additions and 1 deletion.
diff --git a/app/javascript/controllers/duckdb_controller.js b/app/javascript/controllers/duckdb_controller.js
@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+import { startDuckDB, stopDuckDB } from "helpers/duckdb";
+
+// Connects to data-controller="duckdb"
+export default class extends Controller {
+  static values = {
+    databasePath: String,
+  }
+
+  async connect() {
+    this.db = await startDuckDB(this.databasePathValue);
+    window.duckdb = this.db;
+    this.dispatch("ready");
+  }
+
+  async disconnect() {
+    await stopDuckDB(this.db);
+  }
+}
diff --git a/app/javascript/helpers/duckdb.js b/app/javascript/helpers/duckdb.js
@@ -0,0 +1,50 @@
+import * as duckdb from "@duckdb/duckdb-wasm";
+
+export async function startDuckDB(databasePath) {
+  if (!databasePath) {
+    throw new Error("Cannot start DuckDB, invalid database path: '" + databasePath + "'");
+  }
+
+  const db = await initialize();
+  await openDatabase(db, databasePath);
+  return db;
+}
+
+export async function stopDuckDB(database) {
+  if (database) {
+    await database.close();
+  }
+}
+
+async function initialize() {
+  const bundles = duckdb.getJsDelivrBundles();
+  const bundle = await duckdb.selectBundle(bundles);
+
+  const worker_url = URL.createObjectURL(
+    new Blob([`importScripts("${bundle.mainWorker}");`], {
+      type: "text/javascript"
+    })
+  );
+
+  const worker = new Worker(worker_url);
+  const logger = new duckdb.ConsoleLogger();
+  const db = new duckdb.AsyncDuckDB(logger, worker);
+  await db.instantiate(bundle.mainModule, bundle.pthreadWorker);
+  URL.revokeObjectURL(worker_url);
+  return db;
+}
+
+async function openDatabase(db, databasePath) {
+  const response = await fetch(databasePath, {
+    cache: "default"
+  });
+
+  const buffer = await response.arrayBuffer();
+  await db.registerFileBuffer("database.duckdb", new Uint8Array(buffer));
+  await db.open({
+    path: "database.duckdb",
+    query: {
+      castTimestampToDate: true
+    }
+  });
+}
diff --git a/app/javascript/helpers/index.js b/app/javascript/helpers/index.js
@@ -0,0 +1 @@
+export * from "helpers/duckdb"
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" data-controller="duckdb" data-duckdb-database-path-value="<%= perspective_database_path %>">
 <head>
   <title><%= ["spendbetter", content_for(:title)].compact.join(" – ") %></title>
   <meta name="viewport" content="width=device-width,initial-scale=1">

diff --git a/config/importmap.rb b/config/importmap.rb
@@ -4,4 +4,6 @@
 pin "@hotwired/turbo-rails", to: "turbo.min.js"
 pin "@hotwired/stimulus", to: "stimulus.min.js"
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
+pin "@duckdb/duckdb-wasm", to: "https://cdn.jsdelivr.net/npm/@duckdb/[email protected]/+esm"
 pin_all_from "app/javascript/controllers", under: "controllers"
+pin_all_from "app/javascript/helpers", under: "helpers"
diff --git a/vendor/javascript/@duckdb--duckdb-wasm.js b/vendor/javascript/@duckdb--duckdb-wasm.js
diff --git a/vendor/javascript/apache-arrow.js b/vendor/javascript/apache-arrow.js