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

package/package.json

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

package/src/database_provider.tsx

@@ -18,18 +18,11 @@ type DuckDBProps = {
 
 export const DuckDBProvider: React.FC<DuckDBProps> = (props: DuckDBProps) => {
     const logger = useDuckDBLogger();
-    const bundle = useDuckDBBundle();
     const resolveBundle = useDuckDBBundleResolver();
     const [setup, updateSetup] = React.useState<Resolvable<duckdb.AsyncDuckDB, duckdb.InstantiationProgress>>(
         new Resolvable<duckdb.AsyncDuckDB, duckdb.InstantiationProgress>(),
     );
 
-    React.useEffect(() => {
-        if (!bundle.resolving()) {
-            resolveBundle();
-        }
-    }, [bundle]);
-
     const worker = React.useRef<Worker | null>(null);
     React.useEffect(
         () => () => {
@@ -41,51 +34,50 @@ export const DuckDBProvider: React.FC<DuckDBProps> = (props: DuckDBProps) => {
         [],
     );
 
-    const lock = React.useRef<boolean>(false);
+    const inFlight = React.useRef<Promise<duckdb.AsyncDuckDB | null> | null>(null);
     const resolver = React.useCallback(async () => {
-        // Invalid input?
-        if (!logger || !bundle || bundle.value == null) return null;
-        // Is updating?
-        if (lock.current) return null;
-        lock.current = true;
+        // 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.value.mainWorker!);
-            next = new duckdb.AsyncDuckDB(logger, worker);
-        } catch (e: any) {
-            lock.current = false;
-            updateSetup(s => s.failWith(e));
-            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.value.mainModule,
-                bundle.value.pthreadWorker,
-                (p: duckdb.InstantiationProgress) => {
+            // 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!);
+                });
+                if (props.config !== undefined) {
+                    await next.open(props.config!);
+                }
+            } catch (e: any) {
+                updateSetup(s => s.failWith(e));
+                return null;
             }
-        } catch (e: any) {
-            lock.current = false;
-            updateSetup(s => s.failWith(e));
-            return null;
-        }
-        lock.current = false;
-        updateSetup(s => s.completeWith(next));
-        return next;
-    }, [logger, bundle]);
+            updateSetup(s => s.completeWith(next));
+            return next;
+        })();
+        return await inFlight.current;
+    }, [logger]);
 
     return (
         <resolverCtx.Provider value={resolver}>

package/src/index.ts

@@ -1,7 +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

@@ -18,22 +18,26 @@ export const useDuckDBBundleResolver = (): Resolver<duckdb.DuckDBBundle> => Reac
 export const DuckDBPlatform: React.FC<PlatformProps> = (props: PlatformProps) => {
     const [bundle, setBundle] = React.useState<Resolvable<duckdb.DuckDBBundle>>(new Resolvable());
 
-    const lock = React.useRef<boolean>(false);
+    const inFlight = React.useRef<Promise<duckdb.DuckDBBundle | null> | null>(null);
     const resolver = React.useCallback(async () => {
-        if (lock.current) return null;
-        lock.current = true;
-        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;
-            console.error(e);
-            setBundle(b => b.failWith(e));
-            return null;
-        }
+        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 (

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>;
-};