Added plain html example

duckdb · Mar 4, 2024 · 5598e19 · 5598e19
1 parent 2cdc981
commit 5598e19
Showing 1 changed file with 51 additions and 0 deletions.
diff --git a/examples/plain-html/index.html b/examples/plain-html/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <script>
+      const getDb = async () => {
+        const duckdb = window.duckdbduckdbWasm;
+        // @ts-ignore
+        if (window._db) return window._db;
+        const JSDELIVR_BUNDLES = duckdb.getJsDelivrBundles();
+
+        // Select a bundle based on browser checks
+        const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES);
+
+        const worker_url = URL.createObjectURL(
+          new Blob([`importScripts("${bundle.mainWorker}");`], {
+            type: "text/javascript",
+          })
+        );
+
+        // Instantiate the asynchronus version of DuckDB-wasm
+        const worker = new Worker(worker_url);
+        // const logger = null //new duckdb.ConsoleLogger();
+        const logger = new duckdb.ConsoleLogger();
+        const db = new duckdb.AsyncDuckDB(logger, worker);
+        await db.instantiate(bundle.mainModule, bundle.pthreadWorker);
+        URL.revokeObjectURL(worker_url);
+        window._db = db;
+        return db;
+      };
+    </script>
+    <script type="module">
+      import * as duckdbduckdbWasm from "https://cdn.jsdelivr.net/npm/@duckdb/[email protected]/+esm";
+      window.duckdbduckdbWasm = duckdbduckdbWasm;
+      getDb().then(async (db) => {
+        // Create a new connection
+        const conn = await db.connect();
+        // Prepare query
+        const stmt = await conn.prepare(
+          `SELECT v + ? FROM generate_series(0, 10000) AS t(v);`
+        );
+        // ... and run the query with materialized results
+        console.log((await stmt.query(234)).toArray());
+      });
+    </script>
+  </body>
+</html>