fix: colum names display

Author: KKould

package-lock.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "kite_sql": "^0.1.3"
+    "@kipdata/kite_sql": "^0.1.4"
   },
   "devDependencies": {
     "@types/node": "^22.9.0",

package.json

@@ -4,10 +4,11 @@
 // Based on the upstream glue with minimal changes for ESM + browsers.
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
-import wasmUrl from "kite_sql/kite_sql_bg.wasm?url";
+import wasmUrl from "@kipdata/kite_sql/kite_sql_bg.wasm?url";
 
 const placeholder: any = {};
-const imports: any = { __wbindgen_placeholder__: placeholder };
+// The wasm expects its JS imports under the module name "./kite_sql_bg.js".
+const imports: any = { "./kite_sql_bg.js": placeholder };
 let wasm: any;
 
 function addToExternrefTable0(obj) {
@@ -189,23 +190,34 @@ class WasmResultIter {
   free() {
     const ptr = this.__destroy_into_raw();
     wasm.__wbg_wasmresultiter_free(ptr, 0);
-  }
-  /**
-   * Returns the next row as a JS object, or `undefined` when done.
-   * @returns {any}
-   */
-  next() {
-    const ret = wasm.wasmresultiter_next(this.__wbg_ptr);
-    if (ret[2]) {
-      throw takeFromExternrefTable0(ret[1]);
     }
-    return takeFromExternrefTable0(ret[0]);
-  }
-  /**
-   * Collect all remaining rows into an array and finish the iterator.
-   * @returns {any}
-   */
-  rows() {
+    /**
+     * Returns the next row as a JS object, or `undefined` when done.
+     * @returns {any}
+     */
+    next() {
+      const ret = wasm.wasmresultiter_next(this.__wbg_ptr);
+      if (ret[2]) {
+        throw takeFromExternrefTable0(ret[1]);
+      }
+      return takeFromExternrefTable0(ret[0]);
+    }
+    /**
+     * Returns the output schema as an array of `{ name, datatype, nullable }`.
+     * @returns {any}
+     */
+    schema() {
+      const ret = wasm.wasmresultiter_schema(this.__wbg_ptr);
+      if (ret[2]) {
+        throw takeFromExternrefTable0(ret[1]);
+      }
+      return takeFromExternrefTable0(ret[0]);
+    }
+    /**
+     * Collect all remaining rows into an array and finish the iterator.
+     * @returns {any}
+     */
+    rows() {
     const ret = wasm.wasmresultiter_rows(this.__wbg_ptr);
     if (ret[2]) {
       throw takeFromExternrefTable0(ret[1]);
@@ -335,9 +347,10 @@ async function init(input = wasmUrl) {
   const { instance, module } = await (async () => {
     const res = await response;
     if (res instanceof Response) {
+      const resForStreaming = res.clone();
       if (typeof WebAssembly.instantiateStreaming === "function") {
         try {
-          return await WebAssembly.instantiateStreaming(res, imports);
+          return await WebAssembly.instantiateStreaming(resForStreaming, imports);
         } catch (e) {
           // Fallback if incorrect MIME type.
           const bytes = await res.arrayBuffer();

src/kite-sql-web.ts

@@ -93,13 +93,21 @@ const extractValue = (v: any) => {
   return finalValue;
 };
 
-function renderRows(rows: any[]) {
+const columnNamesFromSchema = (schema: any) => {
+  if (!Array.isArray(schema)) return [];
+  return schema
+    .map((col) => (typeof col?.name === "string" ? col.name : undefined))
+    .filter((name): name is string => Boolean(name));
+};
+
+function renderRows(rows: any[], columnNames?: string[]) {
   if (!rows.length) {
     outputEl.textContent = "No rows returned.";
     return;
   }
 
   const columns =
+    (columnNames && columnNames.length ? columnNames : undefined) ??
     rows[0]?.columns ??
     rows[0]?.keys ??
     rows[0]?.names ??
@@ -153,9 +161,11 @@ async function seedDemoData(showResult = true) {
 
   if (showResult) {
     const result = db.run("select * from t_demo order by score desc");
+    const schema = typeof (result as any).schema === "function" ? (result as any).schema() : null;
+    const columns = columnNamesFromSchema(schema);
     const rows = result.rows();
     result.finish();
-    renderRows(rows);
+    renderRows(rows, columns ?? undefined);
     setStatus("Demo data ready ✓", true);
   } else {
     setStatus("Demo data ready ✓", true);
@@ -185,10 +195,13 @@ async function runSql(sqlText: string) {
     }
 
     let lastRows: any[] | null = null;
+    let lastColumns: string[] | null = null;
     for (const sql of statements) {
       const isQuery = /^(select|with|pragma|explain)/i.test(sql.trim());
       if (isQuery) {
         const result = db!.run(sql);
+        const schema = typeof (result as any).schema === "function" ? (result as any).schema() : null;
+        lastColumns = columnNamesFromSchema(schema);
         lastRows = result.rows();
         result.finish();
       } else {
@@ -197,7 +210,7 @@ async function runSql(sqlText: string) {
     }
 
     if (lastRows) {
-      renderRows(lastRows);
+      renderRows(lastRows, lastColumns ?? undefined);
       setStatus("Query completed ✓", true);
     } else {
       outputEl.textContent = `Executed ${statements.length} statement(s).`;