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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@duckdb/react-duckdb",
-    "version": "1.13.1-dev260.0",
+    "version": "1.13.1-dev273.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,62 +1,67 @@
 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;
-        // Is updating?
-        if (lock.current) return;
-        lock.current = true;
+    const worker = React.useRef<Worker | null>(null);
+    React.useEffect(
+        () => () => {
+            if (worker.current != null) {
+                worker.current.terminate();
+                worker.current = 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) {
-            lock.current = false;
-            setStatus({
-                instantiationProgress: null,
-                instantiationError: e,
-            });
-            return;
-        }
+    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;
+            }
 
-        // Instantiate the database asynchronously
-        const init = async () => {
+            // 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 {
-                        setStatus({
-                            instantiationProgress: p,
-                            instantiationError: null,
-                        });
+                        updateSetup(s => s.updateRunning(p));
                     } catch (e: any) {
                         console.warn(`progress handler failed with error: ${e.toString()}`);
                     }
@@ -64,27 +69,19 @@ export const DuckDBProvider: React.FC<DuckDBProps> = (props: DuckDBProps) => {
                 if (props.config !== undefined) {
                     await next.open(props.config!);
                 }
-            } catch (e) {
-                lock.current = false;
-                setStatus({
-                    instantiationProgress: null,
-                    instantiationError: e,
-                });
-                return;
+            } catch (e: any) {
+                updateSetup(s => s.failWith(e));
+                return null;
             }
-            lock.current = false;
-            setDb(next);
-        };
-        init();
-        // Terminate the worker on destruction
-        return () => {
-            worker.terminate();
-        };
-    }, [logger, bundle]);
+            updateSetup(s => s.completeWith(next));
+            return next;
+        })();
+        return await inFlight.current;
+    }, [logger]);
 
     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

@@ -1,6 +1,4 @@
 export * from './connection_provider';
 export * from './database_provider';
 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,42 @@ 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 lock = React.useRef<boolean>(false);
-    React.useEffect(() => {
-        if (!launched || bundle != null || lock.current) return;
-        lock.current = true;
-        (async () => {
+    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 {
-                const b = await duckdb.selectBundle(props.bundles);
-                setBundle(b);
-            } catch (e) {
+                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;
             }
-            lock.current = false;
         })();
-    }, [launched, props.bundles]);
-    const launcher = React.useCallback(() => setLaunched(true), [setLaunched]);
+        return await inFlight.current;
+    }, [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);
+    }
+}

package/src/epoch_contexts.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-export const TABLE_SCHEMA_EPOCH = React.createContext<number | null>(null);
-export const useTableSchemaEpoch = (): number | null => React.useContext(TABLE_SCHEMA_EPOCH);
-
-export const TABLE_DATA_EPOCH = React.createContext<number | null>(null);
-export const useTableDataEpoch = (): number | null => React.useContext(TABLE_DATA_EPOCH);

package/src/table_schema.ts

@@ -1,117 +0,0 @@
-import * as arrow from 'apache-arrow';
-import * as duckdb from '@duckdb/duckdb-wasm';
-
-/// A column group
-export interface TableSchemaColumnGroup {
-    /// The group title
-    title: string;
-    /// The begin of the column span
-    spanBegin: number;
-    /// The size of the column span
-    spanSize: number;
-}
-
-/// A table metadatStorea
-export interface TableSchema {
-    /// The table schema
-    readonly tableSchema: string;
-    /// The table name
-    readonly tableName: string;
-
-    /// The column names
-    readonly columnNames: string[];
-    /// The column name indices
-    readonly columnNameMapping: Map<string, number>;
-    /// The column types
-    readonly columnTypes: arrow.DataType[];
-    /// The number of data columns.
-    /// Allows to append compute metadata columns that are not rendered in the table viewer.
-    readonly dataColumns: number;
-
-    /// The column aliases (if any)
-    readonly columnAliases: (string | null)[];
-    /// The column grouping sets (if any)
-    readonly columnGroupingSets: TableSchemaColumnGroup[][];
-    /// The row grouping sets (if any)
-    readonly rowGroupingSets: number[][];
-}
-
-/// Get raw qualified name
-export function getQualifiedNameRaw(schema: string, name: string) {
-    return `${schema || 'main'}.${name}`;
-}
-/// Get qualified name
-export function getQualifiedName(table: TableSchema) {
-    return `${table.tableSchema}.${table.tableName}`;
-}
-
-/// Collect table info
-export async function collectTableSchema(
-    conn: duckdb.AsyncDuckDBConnection,
-    info: Partial<TableSchema> & { tableSchema?: string; tableName: string },
-): Promise<TableSchema> {
-    // Use DESCRIBE to find all column types
-    const columnNames: string[] = [];
-    const columnNameMapping: Map<string, number> = new Map();
-    const columnTypes: arrow.DataType[] = [];
-    const describe = await conn.query<{ Field: arrow.Utf8; Type: arrow.Utf8 }>(
-        `DESCRIBE ${info.tableSchema || 'main'}.${info.tableName}`,
-    );
-    let column = 0;
-    for (const row of describe) {
-        columnNames.push(row!.Field!);
-        columnNameMapping.set(row!.Field!, column++);
-        const mapType = (type: string): arrow.DataType => {
-            switch (type) {
-                case 'BOOLEAN':
-                    return new arrow.Bool();
-                case 'TINYINT':
-                    return new arrow.Int8();
-                case 'SMALLINT':
-                    return new arrow.Int16();
-                case 'INTEGER':
-                    return new arrow.Int32();
-                case 'BIGINT':
-                    return new arrow.Int64();
-                case 'UTINYINT':
-                    return new arrow.Uint8();
-                case 'USMALLINT':
-                    return new arrow.Uint16();
-                case 'UINTEGER':
-                    return new arrow.Uint32();
-                case 'UBIGINT':
-                    return new arrow.Uint64();
-                case 'FLOAT':
-                    return new arrow.Float32();
-                case 'HUGEINT':
-                    return new arrow.Decimal(32, 0);
-                case 'DOUBLE':
-                    return new arrow.Float64();
-                case 'VARCHAR':
-                    return new arrow.Utf8();
-                case 'DATE':
-                    return new arrow.DateDay();
-                case 'TIME':
-                    return new arrow.Time(arrow.TimeUnit.MILLISECOND, 32);
-                case 'TIMESTAMP':
-                    return new arrow.TimeNanosecond();
-                default:
-                    return new arrow.Null();
-            }
-        };
-        columnTypes.push(mapType(row!.Type!));
-    }
-    const table: TableSchema = {
-        ...info,
-        tableSchema: info.tableSchema || 'main',
-        columnNames,
-        columnTypes,
-        dataColumns: columnTypes.length,
-        columnNameMapping,
-        columnAliases: [],
-        columnGroupingSets: [],
-        rowGroupingSets: [],
-    };
-
-    return table;
-}

package/src/table_schema_provider.tsx

@@ -1,70 +0,0 @@
-import * as React from 'react';
-import { TableSchema, collectTableSchema } from './table_schema';
-import { useTableSchemaEpoch } from './epoch_contexts';
-import { useDuckDBConnection } from './connection_provider';
-
-interface Props {
-    /// The children
-    children: React.ReactElement | React.ReactElement[];
-    /// The schema
-    schema?: string;
-    /// The name
-    name: string;
-}
-
-interface State {
-    /// The schema
-    schema: string | null;
-    /// The name
-    name: string | null;
-    /// The metadata
-    metadata: TableSchema | null;
-    /// The own epoch
-    ownEpoch: number | null;
-}
-
-export const TABLE_METADATA = React.createContext<TableSchema | null>(null);
-export const useTableSchema = (): TableSchema | null => React.useContext(TABLE_METADATA);
-
-export const DuckDBTableSchemaProvider: React.FC<Props> = (props: Props) => {
-    const conn = useDuckDBConnection();
-    const epoch = useTableSchemaEpoch();
-    const [state, setState] = React.useState<State>({
-        schema: null,
-        name: null,
-        ownEpoch: epoch,
-        metadata: null,
-    });
-    const inFlight = React.useRef<boolean>(false);
-
-    // Detect unmount
-    const isMounted = React.useRef(true);
-    React.useEffect(() => {
-        return () => void (isMounted.current = false);
-    }, []);
-
-    // Resolve the metadata
-    React.useEffect(() => {
-        if (!isMounted.current || !conn || inFlight.current) {
-            return;
-        }
-        inFlight.current = true;
-        const resolve = async (schema: string, name: string, epoch: number | null) => {
-            const metadata = await collectTableSchema(conn!, {
-                tableSchema: schema,
-                tableName: name,
-            });
-            inFlight.current = false;
-            if (!isMounted.current) return;
-            setState({
-                schema,
-                name,
-                ownEpoch: epoch,
-                metadata,
-            });
-        };
-        resolve(props.schema || 'main', props.name, epoch).catch(e => console.error(e));
-    }, [conn, props.schema, props.name, epoch]);
-
-    return <TABLE_METADATA.Provider value={state.metadata}>{props.children}</TABLE_METADATA.Provider>;
-};