duckdb-wasmをペライチで利用するサンプル

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/[email protected]/css/xterm.min.css">

<style>
body {
  background-color: rgb(51, 51, 51);
}
#shell-container {
  width: 100%;
  height: 100%;
}
</style>

<script type="module">

import * as duckdb from 'https://cdn.jsdelivr.net/npm/@duckdb/[email protected]/+esm';
import * as shell from 'https://cdn.jsdelivr.net/npm/@duckdb/[email protected]/+esm';

// Create a container element  
const shellDiv = document.getElementById('shell-container');  

// 本当は以下のように shell.getJsDelivrModule() を使いたい
//
//    const shellModule = shell.getJsDelivrModule();
//
// しかしバグのために dist/ が重複して間違ったURLになるため、自前で指定している。
// 問題の箇所: https://github.com/duckdb/duckdb-wasm/blob/de7382ee418b5cac6b268124f5daa83a80fdf8e7/packages/duckdb-wasm-shell/src/platform.ts#L4-L5
//
const shellModule = new URL('https://cdn.jsdelivr.net/npm/@duckdb/[email protected]/dist/shell_bg.wasm');

// Embed the shell  
await shell.embed({  
  container: shellDiv,  
  shellModule: shellModule,
  resolveDatabase: async (progress) => {  
    // Select the bundle and load the worker.
    const bundle = await duckdb.selectBundle(duckdb.getJsDelivrBundles());  
    const worker_url = URL.createObjectURL(new Blob([`importScripts("${bundle.mainWorker}");`], {type: 'text/javascript'}));
    // Create a worker and instantiate the database  
    const worker = new Worker(worker_url);
    const db = new duckdb.AsyncDuckDB(new duckdb.ConsoleLogger(), worker);  
    await db.instantiate(bundle.mainModule, bundle.pthreadWorker, progress);  
    // Reveke the worker URL.
    URL.revokeObjectURL(worker_url);
    return db;  
  }  
});

</script>

<div id="shell-container" />