@duckdb/react-duckdb 1.13.1-dev260.0 → 1.13.1-dev266.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@duckdb/react-duckdb",
-    "version": "1.13.1-dev260.0",
+    "version": "1.13.1-dev266.0",
     "description": "React components for DuckDB-Wasm",
     "license": "MPL-2.0",
     "repository": {

package/src/connection_provider.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import * as imm from 'immutable';
 import * as duckdb from '@duckdb/duckdb-wasm';
-import { useDuckDB } from './database_provider';
-import { useDuckDBLauncher } from './platform_provider';
+import { useDuckDB, useDuckDBResolver } from './database_provider';
+import { ResolvableStatus } from './resolvable';
 
 type DialerFn = (id?: number) => void;
 
@@ -22,8 +22,7 @@ type DuckDBConnectionProps = {
 
 export const DuckDBConnectionProvider: React.FC<DuckDBConnectionProps> = (props: DuckDBConnectionProps) => {
     const db = useDuckDB();
-    const launchDB = useDuckDBLauncher();
-    const launched = React.useRef<boolean>();
+    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());
 
@@ -34,7 +33,7 @@ export const DuckDBConnectionProvider: React.FC<DuckDBConnectionProps> = (props:
         if (inFlight.current.get(id)) {
             return;
         }
-        const conn = await db!.connect();
+        const conn = await db!.value!.connect();
         setPool(p => p.set(id, conn));
         inFlight.current.delete(id);
     };
@@ -42,13 +41,10 @@ export const DuckDBConnectionProvider: React.FC<DuckDBConnectionProps> = (props:
     // Resolve request or remember as pending
     const dialerCallback = React.useCallback(
         (id?: number) => {
-            if (db != null) {
+            if (db.value != null) {
                 dialer(id || 0);
-            } else {
-                if (!launched.current) {
-                    launched.current = true;
-                    launchDB();
-                }
+            } else if (!db.resolving()) {
+                resolveDB();
                 setPending(pending.push(id || 0));
             }
         },
@@ -57,7 +53,7 @@ export const DuckDBConnectionProvider: React.FC<DuckDBConnectionProps> = (props:
 
     // Process pending if possible
     React.useEffect(() => {
-        if (!db) {
+        if (db.value == null) {
             return;
         }
         const claimed = pending;

package/src/database_provider.tsx

@@ -1,90 +1,95 @@
 import React, { ReactElement } from 'react';
 import * as duckdb from '@duckdb/duckdb-wasm';
-import { useDuckDBLogger, useDuckDBBundle } from './platform_provider';
+import { useDuckDBLogger, useDuckDBBundle, useDuckDBBundleResolver } from './platform_provider';
+import { Resolvable, Resolver, ResolvableStatus } from './resolvable';
 
-export interface DuckDBStatus {
-    instantiationProgress: duckdb.InstantiationProgress | null;
-    instantiationError: any | null;
-}
+const setupCtx = React.createContext<Resolvable<duckdb.AsyncDuckDB, duckdb.InstantiationProgress> | null>(null);
+const resolverCtx = React.createContext<Resolver<duckdb.AsyncDuckDB> | null>(null);
 
-const dbCtx = React.createContext<duckdb.AsyncDuckDB | null>(null);
-const statusCtx = React.createContext<DuckDBStatus | null>(null);
-
-export const useDuckDB = (): duckdb.AsyncDuckDB | null => React.useContext(dbCtx);
-export const useDuckDBStatus = (): DuckDBStatus | null => React.useContext(statusCtx);
+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 bundle = useDuckDBBundle();
-    const [db, setDb] = React.useState<duckdb.AsyncDuckDB | null>(null);
-    const [status, setStatus] = React.useState<DuckDBStatus | null>(null);
+    const resolveBundle = useDuckDBBundleResolver();
+    const [setup, updateSetup] = React.useState<Resolvable<duckdb.AsyncDuckDB, duckdb.InstantiationProgress>>(
+        new Resolvable<duckdb.AsyncDuckDB, duckdb.InstantiationProgress>(),
+    );
 
-    // Reinitialize the worker and the database when the bundle changes
-    const lock = React.useRef<boolean>(false);
     React.useEffect(() => {
-        // No bundle available?
-        if (!bundle) return;
+        if (!bundle.resolving()) {
+            resolveBundle();
+        }
+    }, [bundle]);
+
+    const worker = React.useRef<Worker | null>(null);
+    React.useEffect(
+        () => () => {
+            if (worker.current != null) {
+                worker.current.terminate();
+                worker.current = null;
+            }
+        },
+        [],
+    );
+
+    const lock = React.useRef<boolean>(false);
+    const resolver = React.useCallback(async () => {
+        // Invalid input?
+        if (!logger || !bundle || bundle.value == null) return null;
         // Is updating?
-        if (lock.current) return;
+        if (lock.current) return null;
         lock.current = true;
 
         // Create worker and next database
         let worker: Worker;
         let next: duckdb.AsyncDuckDB;
         try {
-            worker = new Worker(bundle.mainWorker!);
+            worker = new Worker(bundle.value.mainWorker!);
             next = new duckdb.AsyncDuckDB(logger, worker);
-        } catch (e) {
+        } catch (e: any) {
             lock.current = false;
-            setStatus({
-                instantiationProgress: null,
-                instantiationError: e,
-            });
-            return;
+            updateSetup(s => s.failWith(e));
+            return null;
         }
 
         // Instantiate the database asynchronously
-        const init = async () => {
-            try {
-                await next.instantiate(bundle.mainModule, bundle.pthreadWorker, (p: duckdb.InstantiationProgress) => {
+        try {
+            await next.instantiate(
+                bundle.value.mainModule,
+                bundle.value.pthreadWorker,
+                (p: duckdb.InstantiationProgress) => {
                     try {
-                        setStatus({
-                            instantiationProgress: p,
-                            instantiationError: null,
-                        });
+                        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) {
-                lock.current = false;
-                setStatus({
-                    instantiationProgress: null,
-                    instantiationError: e,
-                });
-                return;
+                },
+            );
+            if (props.config !== undefined) {
+                await next.open(props.config!);
             }
+        } catch (e: any) {
             lock.current = false;
-            setDb(next);
-        };
-        init();
-        // Terminate the worker on destruction
-        return () => {
-            worker.terminate();
-        };
+            updateSetup(s => s.failWith(e));
+            return null;
+        }
+        lock.current = false;
+        updateSetup(s => s.completeWith(next));
+        return next;
     }, [logger, bundle]);
 
     return (
-        <dbCtx.Provider value={db}>
-            <statusCtx.Provider value={status}>{props.children}</statusCtx.Provider>
-        </dbCtx.Provider>
+        <resolverCtx.Provider value={resolver}>
+            <setupCtx.Provider value={setup}>{props.children}</setupCtx.Provider>
+        </resolverCtx.Provider>
     );
 };

package/src/index.ts

@@ -4,3 +4,4 @@ export * from './platform_provider';
 export * from './table_schema';
 export * from './table_schema_provider';
 export * from './epoch_contexts';
+export * from './resolvable';

package/src/platform_provider.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import * as duckdb from '@duckdb/duckdb-wasm';
+import { Resolvable, Resolver, ResolvableStatus } from './resolvable';
 
 type PlatformProps = {
     children: React.ReactElement | React.ReactElement[];
@@ -8,35 +9,38 @@ type PlatformProps = {
 };
 
 const loggerCtx = React.createContext<duckdb.Logger | null>(null);
-const bundleCtx = React.createContext<duckdb.DuckDBBundle | null>(null);
-const launcherCtx = React.createContext<(() => void) | null>(null);
-export const useDuckDBLauncher = (): (() => void) => React.useContext(launcherCtx)!;
+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 = (): duckdb.DuckDBBundle => React.useContext(bundleCtx)!;
+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<duckdb.DuckDBBundle | null>(null);
-    const [launched, setLaunched] = React.useState<boolean>(false);
+    const [bundle, setBundle] = React.useState<Resolvable<duckdb.DuckDBBundle>>(new Resolvable());
+
     const lock = React.useRef<boolean>(false);
-    React.useEffect(() => {
-        if (!launched || bundle != null || lock.current) return;
+    const resolver = React.useCallback(async () => {
+        if (lock.current) return null;
         lock.current = true;
-        (async () => {
-            try {
-                const b = await duckdb.selectBundle(props.bundles);
-                setBundle(b);
-            } catch (e) {
-                console.error(e);
-            }
+        try {
+            setBundle(b => b.updateRunning());
+            const next = await duckdb.selectBundle(props.bundles);
+            lock.current = false;
+            setBundle(b => b.completeWith(next));
+            return next;
+        } catch (e: any) {
             lock.current = false;
-        })();
-    }, [launched, props.bundles]);
-    const launcher = React.useCallback(() => setLaunched(true), [setLaunched]);
+            console.error(e);
+            setBundle(b => b.failWith(e));
+            return null;
+        }
+    }, [props.bundles]);
+
     return (
         <loggerCtx.Provider value={props.logger}>
-            <launcherCtx.Provider value={launcher}>
+            <resolverCtx.Provider value={resolver}>
                 <bundleCtx.Provider value={bundle}>{props.children}</bundleCtx.Provider>
-            </launcherCtx.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);
+    }
+}