@duckdb/react-duckdb 1.11.1-dev.0

package/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "@duckdb/react-duckdb",
+    "version": "1.11.1-dev.0",
+    "description": "React components for DuckDB-Wasm",
+    "license": "MPL-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/duckdb/duckdb-wasm.git"
+    },
+    "keywords": [
+        "sql",
+        "duckdb",
+        "relational",
+        "database",
+        "data",
+        "query",
+        "wasm",
+        "analytics",
+        "olap",
+        "arrow",
+        "parquet",
+        "json",
+        "csv"
+    ],
+    "files": [
+        "src"
+    ],
+    "main": "src/index.ts",
+    "types": "src/index.ts"
+}

package/src/connection_provider.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import * as imm from 'immutable';
+import * as duckdb from '@duckdb/duckdb-wasm';
+import { useDuckDB, useDuckDBResolver } from './database_provider';
+import { ResolvableStatus } from './resolvable';
+
+type DialerFn = (id?: number) => void;
+
+export const poolCtx = React.createContext<imm.Map<number, duckdb.AsyncDuckDBConnection>>(imm.Map());
+export const dialerCtx = React.createContext<DialerFn | null>(null);
+
+export const useDuckDBConnection = (id?: number): duckdb.AsyncDuckDBConnection | null =>
+    React.useContext(poolCtx)?.get(id || 0) || null;
+export const useDuckDBConnectionDialer = (): DialerFn => React.useContext(dialerCtx)!;
+
+type DuckDBConnectionProps = {
+    /// The children
+    children: React.ReactElement | React.ReactElement[];
+    /// The epoch
+    epoch?: number;
+};
+
+export const DuckDBConnectionProvider: React.FC<DuckDBConnectionProps> = (props: DuckDBConnectionProps) => {
+    const db = useDuckDB();
+    const resolveDB = useDuckDBResolver();
+    const [pending, setPending] = React.useState<imm.List<number>>(imm.List());
+    const [pool, setPool] = React.useState<imm.Map<number, duckdb.AsyncDuckDBConnection>>(imm.Map());
+
+    const inFlight = React.useRef<Map<number, boolean>>(new Map());
+
+    // Resolve request assuming that the database is ready
+    const dialer = async (id: number) => {
+        if (inFlight.current.get(id)) {
+            return;
+        }
+        const conn = await db!.value!.connect();
+        setPool(p => p.set(id, conn));
+        inFlight.current.delete(id);
+    };
+
+    // Resolve request or remember as pending
+    const dialerCallback = React.useCallback(
+        (id?: number) => {
+            if (db.value != null) {
+                dialer(id || 0);
+            } else if (!db.resolving()) {
+                resolveDB();
+                setPending(pending.push(id || 0));
+            }
+        },
+        [db],
+    );
+
+    // Process pending if possible
+    React.useEffect(() => {
+        if (db.value == null) {
+            return;
+        }
+        const claimed = pending;
+        setPending(imm.List());
+        for (const id of claimed) {
+            dialer(id);
+        }
+    }, [db, pending]);
+
+    return (
+        <dialerCtx.Provider value={dialerCallback}>
+            <poolCtx.Provider value={pool}>{props.children}</poolCtx.Provider>
+        </dialerCtx.Provider>
+    );
+};

package/src/database_provider.tsx

@@ -0,0 +1,87 @@
+import React, { ReactElement } from 'react';
+import * as duckdb from '@duckdb/duckdb-wasm';
+import { useDuckDBLogger, useDuckDBBundle, useDuckDBBundleResolver } from './platform_provider';
+import { Resolvable, Resolver, ResolvableStatus } from './resolvable';
+
+const setupCtx = React.createContext<Resolvable<duckdb.AsyncDuckDB, duckdb.InstantiationProgress> | null>(null);
+const resolverCtx = React.createContext<Resolver<duckdb.AsyncDuckDB> | null>(null);
+
+export const useDuckDB = (): Resolvable<duckdb.AsyncDuckDB, duckdb.InstantiationProgress> =>
+    React.useContext(setupCtx)!;
+export const useDuckDBResolver = (): Resolver<duckdb.AsyncDuckDB> => React.useContext(resolverCtx)!;
+
+type DuckDBProps = {
+    children: React.ReactElement | ReactElement[];
+    config?: duckdb.DuckDBConfig;
+    value?: duckdb.AsyncDuckDB;
+};
+
+export const DuckDBProvider: React.FC<DuckDBProps> = (props: DuckDBProps) => {
+    const logger = useDuckDBLogger();
+    const resolveBundle = useDuckDBBundleResolver();
+    const [setup, updateSetup] = React.useState<Resolvable<duckdb.AsyncDuckDB, duckdb.InstantiationProgress>>(
+        new Resolvable<duckdb.AsyncDuckDB, duckdb.InstantiationProgress>(),
+    );
+
+    const worker = React.useRef<Worker | null>(null);
+    React.useEffect(
+        () => () => {
+            if (worker.current != null) {
+                worker.current.terminate();
+                worker.current = null;
+            }
+        },
+        [],
+    );
+
+    const inFlight = React.useRef<Promise<duckdb.AsyncDuckDB | null> | null>(null);
+    const resolver = React.useCallback(async () => {
+        // Run only once
+        if (inFlight.current) return await inFlight.current;
+        inFlight.current = (async () => {
+            // Resolve bundle
+            const bundle = await resolveBundle();
+            if (bundle == null) {
+                updateSetup(s => s.failWith('invalid bundle'));
+                return null;
+            }
+
+            // Create worker and next database
+            let worker: Worker;
+            let next: duckdb.AsyncDuckDB;
+            try {
+                worker = new Worker(bundle.mainWorker!);
+                next = new duckdb.AsyncDuckDB(logger, worker);
+            } catch (e: any) {
+                updateSetup(s => s.failWith(e));
+                return null;
+            }
+
+            // Instantiate the database asynchronously
+            try {
+                await next.instantiate(bundle.mainModule, bundle.pthreadWorker, (p: duckdb.InstantiationProgress) => {
+                    try {
+                        updateSetup(s => s.updateRunning(p));
+                    } catch (e: any) {
+                        console.warn(`progress handler failed with error: ${e.toString()}`);
+                    }
+                });
+                if (props.config !== undefined) {
+                    await next.open(props.config!);
+                }
+            } catch (e: any) {
+                updateSetup(s => s.failWith(e));
+                return null;
+            }
+            updateSetup(s => s.completeWith(next));
+            return next;
+        })();
+        return await inFlight.current;
+    }, [logger]);
+
+    return (
+        <resolverCtx.Provider value={resolver}>
+            <setupCtx.Provider value={setup}>{props.children}</setupCtx.Provider>
+        </resolverCtx.Provider>
+    );
+};

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './connection_provider';
+export * from './database_provider';
+export * from './platform_provider';
+export * from './resolvable';

package/src/platform_provider.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import * as duckdb from '@duckdb/duckdb-wasm';
+import { Resolvable, Resolver, ResolvableStatus } from './resolvable';
+
+type PlatformProps = {
+    children: React.ReactElement | React.ReactElement[];
+    logger: duckdb.Logger;
+    bundles: duckdb.DuckDBBundles;
+};
+
+const loggerCtx = React.createContext<duckdb.Logger | null>(null);
+const bundleCtx = React.createContext<Resolvable<duckdb.DuckDBBundle> | null>(null);
+const resolverCtx = React.createContext<Resolver<duckdb.DuckDBBundle> | null>(null);
+export const useDuckDBLogger = (): duckdb.Logger => React.useContext(loggerCtx)!;
+export const useDuckDBBundle = (): Resolvable<duckdb.DuckDBBundle> => React.useContext(bundleCtx)!;
+export const useDuckDBBundleResolver = (): Resolver<duckdb.DuckDBBundle> => React.useContext(resolverCtx)!;
+
+export const DuckDBPlatform: React.FC<PlatformProps> = (props: PlatformProps) => {
+    const [bundle, setBundle] = React.useState<Resolvable<duckdb.DuckDBBundle>>(new Resolvable());
+
+    const inFlight = React.useRef<Promise<duckdb.DuckDBBundle | null> | null>(null);
+    const resolver = React.useCallback(async () => {
+        if (bundle.error) return null;
+        if (bundle.value) return bundle.value;
+        if (inFlight.current) return await inFlight.current;
+        inFlight.current = (async () => {
+            try {
+                setBundle(b => b.updateRunning());
+                const next = await duckdb.selectBundle(props.bundles);
+                inFlight.current = null;
+                setBundle(b => b.completeWith(next));
+                return next;
+            } catch (e: any) {
+                inFlight.current = null;
+                console.error(e);
+                setBundle(b => b.failWith(e));
+                return null;
+            }
+        })();
+        return await inFlight.current;
+    }, [props.bundles]);
+
+    return (
+        <loggerCtx.Provider value={props.logger}>
+            <resolverCtx.Provider value={resolver}>
+                <bundleCtx.Provider value={bundle}>{props.children}</bundleCtx.Provider>
+            </resolverCtx.Provider>
+        </loggerCtx.Provider>
+    );
+};

package/src/resolvable.ts

@@ -0,0 +1,35 @@
+export enum ResolvableStatus {
+    NONE,
+    RUNNING,
+    FAILED,
+    COMPLETED,
+}
+
+export type Resolver<Value> = () => Promise<Value | null>;
+
+export class Resolvable<Value, Progress = null, Error = string> {
+    public readonly status: ResolvableStatus;
+    public readonly value: Value | null;
+    public readonly error: Error | null;
+    public readonly progress: Progress | null;
+
+    constructor(status?: ResolvableStatus, value?: Value | null, error?: Error | null, progress?: Progress | null) {
+        this.status = status || ResolvableStatus.NONE;
+        this.value = value || null;
+        this.error = error || null;
+        this.progress = progress || null;
+    }
+
+    public resolving(): boolean {
+        return this.status != ResolvableStatus.NONE;
+    }
+    public completeWith(value: Value, progress: Progress | null = null): Resolvable<Value, Progress, Error> {
+        return new Resolvable(ResolvableStatus.COMPLETED, value, this.error, progress);
+    }
+    public failWith(error: Error, progress: Progress | null = null): Resolvable<Value, Progress, Error> {
+        return new Resolvable(ResolvableStatus.FAILED, this.value, error, progress);
+    }
+    public updateRunning(progress: Progress | null = null): Resolvable<Value, Progress, Error> {
+        return new Resolvable(ResolvableStatus.RUNNING, this.value, this.error, progress);
+    }
+}