duckdb-wasm import as plain js module

[dberardo-com]

would it be possible to use duckdb in a plain index.html page without help of any bundler ? if so, is there any example out there ?

[carlopi]

Hi! Yes, it's currently possible with a bundler, but we should make it available out of the box, and add a simple example. Thanks for raising this, moved as a issue here:#1633

[dberardo-com]

i kind of figured that out:

/* https://www.jsdelivr.com/package/npm/@duckdb/duckdb-wasm */
<script type="module">
      import * as duckdbduckdbWasm from "https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@1.28.1-dev106.0/+esm";
      window.duckdbduckdbWasm = duckdbduckdbWasm;
    </script>

const duckdb = window.duckdbduckdbWasm as any;
export const getDb = async () => {
  // @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;
};

let me know if this is a proper way to do it

[carlopi]

This is perfect! If you want to add the HTML part and add as an example to either the documentation or the repository, it would be super cool.

[dberardo-com]

check this one out: #1635

[dberardo-com]

btw is there any documentation related to the wasm API, e.g. the arguments accepted by the "query" function, what is the meaning of the "send" function an so on ... the only piece of doc i could find is this, but it is not the full API: https://duckdb.org/docs/api/wasm/query

also: is there any nicer way to get results for queries such as "select 42;" instead of having to use .toArray() ?

[carlopi]

Full API, generated from the code, is here: https://shell.duckdb.org/docs/. it will need to be integrated with the main docs

[dberardo-com]

also: is there any nicer way to get results for queries such as "select 42;" instead of having to use .toArray() ?

besides that: is there a way to persists in-memory tables even after connection.close() is called?

for example i might want to use the same table on multiple pages, or DOM components, is there a way to achieve this or is too complex? one such example could be some sort of real time dashboard where data flows in continuously and one wants to update a materialized view of average values, that can be accessed by different dashboard pages for example