rozenite-sqlite 0.0.11 → 0.0.12

package/src/hooks/useBridgeSync.ts

@@ -14,16 +14,22 @@ function fetchData(client: NonNullable<BridgeClient>, dbName: string, tableName:
   client.send(EVENTS.SQL_EXECUTE, { dbName, query: `SELECT * FROM "${tableName}"` });
 }
 
+export interface MutationResult {
+  success: boolean;
+  error?: string;
+}
+
 export function useBridgeSync(
   dispatch: React.Dispatch<Action>,
   selectedDB: string | null,
   selectedTable: string | null,
 ) {
   const client = useRozeniteDevToolsClient({ pluginId: PLUGIN_ID });
-  const pendingRef = useRef<'tables' | 'data' | 'clear' | 'query' | null>(null);
+  const pendingRef = useRef<'tables' | 'data' | 'query' | null>(null);
   const selectedDBRef = useRef(selectedDB);
   const selectedTableRef = useRef(selectedTable);
   const customQueryResolverRef = useRef<((r: { rows: RowData[]; columns: string[]; error?: string }) => void) | null>(null);
+  const mutationResolverRef = useRef<((r: MutationResult) => void) | null>(null);
   useEffect(() => { selectedDBRef.current = selectedDB; }, [selectedDB]);
   useEffect(() => { selectedTableRef.current = selectedTable; }, [selectedTable]);
 
@@ -72,20 +78,20 @@ export function useBridgeSync(
       } else if (mode === 'data') {
         const rows: RowData[] = Array.isArray(payload) ? (payload as RowData[]) : [];
         dispatch({ type: 'SET_DATA', rows, columns: rows.length > 0 ? Object.keys(rows[0]) : [] });
-      } else if (mode === 'clear') {
-        const db = selectedDBRef.current;
-        const table = selectedTableRef.current;
-        if (db && table) {
-          pendingRef.current = 'data';
-          dispatch({ type: 'LOAD_DATA_START' });
-          fetchData(client, db, table);
-        }
       }
     });
 
+    const sub3 = client.onMessage(EVENTS.MUTATION_RESULT, (payload: unknown) => {
+      const resolver = mutationResolverRef.current;
+      mutationResolverRef.current = null;
+      const result = payload as MutationResult;
+      resolver?.(result);
+    });
+
     return () => {
       sub1.remove();
       sub2.remove();
+      sub3.remove();
     };
   }, [client, dispatch]);
 
@@ -120,12 +126,28 @@ export function useBridgeSync(
     }
   }, [client, selectedDB, selectedTable, dispatch]);
 
-  const clearTable = useCallback(() => {
-    if (!client || !selectedDB || !selectedTable) return;
-    pendingRef.current = 'clear';
-    dispatch({ type: 'LOAD_DATA_START' });
-    client.send(EVENTS.SQL_EXECUTE, { dbName: selectedDB, query: `DELETE FROM "${selectedTable}"` });
-  }, [client, selectedDB, selectedTable, dispatch]);
+  const clearTable = useCallback(
+    (): Promise<MutationResult> =>
+      new Promise((resolve) => {
+        const db = selectedDBRef.current;
+        const table = selectedTableRef.current;
+        if (!client || !db || !table) {
+          resolve({ success: false, error: 'No database or table selected' });
+          return;
+        }
+        mutationResolverRef.current = (result) => {
+          resolve(result);
+          // Refresh data after successful clear
+          if (result.success && client) {
+            pendingRef.current = 'data';
+            dispatch({ type: 'LOAD_DATA_START' });
+            fetchData(client, db, table);
+          }
+        };
+        client.send(EVENTS.CLEAR_TABLE, { dbName: db, table });
+      }),
+    [client, dispatch],
+  );
 
   const runCustomQuery = useCallback(
     (sql: string): Promise<{ rows: RowData[]; columns: string[]; error?: string }> =>
@@ -142,5 +164,54 @@ export function useBridgeSync(
     [client],
   );
 
-  return { refresh, clearTable, runCustomQuery };
+  const saveRowToDB = useCallback(
+    (row: RowData, columns: string[]): Promise<MutationResult> =>
+      new Promise((resolve) => {
+        const db = selectedDBRef.current;
+        const table = selectedTableRef.current;
+        if (!client || !db || !table) {
+          resolve({ success: false, error: 'No database or table selected' });
+          return;
+        }
+        // Detect primary key: use 'id' if it exists, otherwise use first column
+        const primaryKey = columns.includes('id') ? 'id' : columns[0];
+        if (!primaryKey) {
+          resolve({ success: false, error: 'Cannot determine primary key' });
+          return;
+        }
+        mutationResolverRef.current = resolve;
+        client.send(EVENTS.SAVE_ROW, { dbName: db, table, row, primaryKey });
+      }),
+    [client],
+  );
+
+  const deleteRowFromDB = useCallback(
+    (row: RowData, columns: string[]): Promise<MutationResult> =>
+      new Promise((resolve) => {
+        const db = selectedDBRef.current;
+        const table = selectedTableRef.current;
+        if (!client || !db || !table) {
+          resolve({ success: false, error: 'No database or table selected' });
+          return;
+        }
+        // Detect primary key: use 'id' if it exists, otherwise use first column
+        const primaryKey = columns.includes('id') ? 'id' : columns[0];
+        if (!primaryKey) {
+          resolve({ success: false, error: 'Cannot determine primary key' });
+          return;
+        }
+        const primaryKeyValue = row[primaryKey];
+        mutationResolverRef.current = resolve;
+        client.send(EVENTS.DELETE_ROW, { dbName: db, table, primaryKey, primaryKeyValue });
+      }),
+    [client],
+  );
+
+  const reconnect = useCallback(() => {
+    if (!client) return;
+    dispatch({ type: 'RESET' });
+    client.send(EVENTS.GET_DB_LIST, true);
+  }, [client, dispatch]);
+
+  return { refresh, clearTable, runCustomQuery, saveRowToDB, deleteRowFromDB, reconnect };
 }

package/src/hooks/useExplorerState.ts

@@ -1,6 +1,6 @@
-import { useReducer, useCallback } from 'react';
+import { useReducer, useCallback, useState } from 'react';
 import type { RowData } from '../theme';
-import { useBridgeSync } from './useBridgeSync';
+import { useBridgeSync, type MutationResult } from './useBridgeSync';
 
 export type ExplorerStatus = 'connecting' | 'idle' | 'loadingTables' | 'loadingData' | 'error';
 
@@ -144,17 +144,73 @@ function reducer(state: ExplorerState, action: Action): ExplorerState {
 
 export function useExplorerState() {
   const [state, dispatch] = useReducer(reducer, initial);
-  const { selectedDB, selectedTable } = state;
+  const { selectedDB, selectedTable, columns, selectedRowIndex, rows } = state;
+  const [mutating, setMutating] = useState(false);
+  const [mutationError, setMutationError] = useState<string | null>(null);
 
-  const { refresh, clearTable, runCustomQuery } = useBridgeSync(dispatch, selectedDB, selectedTable);
+  const { refresh, clearTable, runCustomQuery, saveRowToDB, deleteRowFromDB, reconnect } = useBridgeSync(dispatch, selectedDB, selectedTable);
 
   const selectDB = useCallback((db: string) => dispatch({ type: 'SELECT_DB', db }), []);
   const selectTable = useCallback((table: string) => dispatch({ type: 'SELECT_TABLE', table }), []);
   const selectRow = useCallback((index: number) => dispatch({ type: 'SELECT_ROW', index }), []);
   const closeRow = useCallback(() => dispatch({ type: 'CLOSE_ROW' }), []);
-  const saveRow = useCallback((updated: RowData) => dispatch({ type: 'SAVE_ROW', updated }), []);
-  const deleteRow = useCallback(() => dispatch({ type: 'DELETE_ROW' }), []);
 
-  return { state, selectDB, selectTable, selectRow, closeRow, saveRow, deleteRow, refresh, clearTable, runCustomQuery };
+  const saveRow = useCallback(
+    async (updated: RowData): Promise<MutationResult> => {
+      setMutating(true);
+      setMutationError(null);
+      const result = await saveRowToDB(updated, columns);
+      setMutating(false);
+      if (result.success) {
+        dispatch({ type: 'SAVE_ROW', updated });
+      } else {
+        setMutationError(result.error ?? 'Failed to save row');
+      }
+      return result;
+    },
+    [saveRowToDB, columns],
+  );
+
+  const deleteRow = useCallback(
+    async (): Promise<MutationResult> => {
+      if (selectedRowIndex === null) {
+        return { success: false, error: 'No row selected' };
+      }
+      const row = rows[selectedRowIndex];
+      if (!row) {
+        return { success: false, error: 'Row not found' };
+      }
+      setMutating(true);
+      setMutationError(null);
+      const result = await deleteRowFromDB(row, columns);
+      setMutating(false);
+      if (result.success) {
+        dispatch({ type: 'DELETE_ROW' });
+      } else {
+        setMutationError(result.error ?? 'Failed to delete row');
+      }
+      return result;
+    },
+    [deleteRowFromDB, columns, selectedRowIndex, rows],
+  );
+
+  const clearMutationError = useCallback(() => setMutationError(null), []);
+
+  return {
+    state,
+    selectDB,
+    selectTable,
+    selectRow,
+    closeRow,
+    saveRow,
+    deleteRow,
+    refresh,
+    clearTable,
+    runCustomQuery,
+    mutating,
+    mutationError,
+    clearMutationError,
+    reconnect,
+  };
 }
 

package/src/hooks/useRozeniteSQLite.ts

@@ -14,8 +14,18 @@ export interface RozeniteSQLiteConfig {
   sqlExecutor: SQLExecutor;
 }
 
+/** Escape a value for safe SQL string interpolation */
+function escapeValue(val: unknown): string {
+  if (val === null || val === undefined) return 'NULL';
+  if (typeof val === 'number') return String(val);
+  if (typeof val === 'boolean') return val ? '1' : '0';
+  // Escape single quotes by doubling them
+  const str = String(val).replace(/'/g, "''");
+  return `'${str}'`;
+}
+
 /**
- * Connects your React Native app to the Rozenite SQLite devtools panel.
+ * Connects your React Native app to the SQLighter devtools panel.
  *
  * Call this once somewhere near the root of your app (or in the component
  * that holds the database instances). It handles all devtools communication —
@@ -59,6 +69,55 @@ export function useRozeniteSQLite(config: RozeniteSQLiteConfig): void {
           },
         );
       }),
+
+      client.onMessage(EVENTS.SAVE_ROW, (payload: unknown) => {
+        const { dbName, table, row, primaryKey } = payload as {
+          dbName: string;
+          table: string;
+          row: Record<string, unknown>;
+          primaryKey: string;
+        };
+        const pkValue = row[primaryKey];
+        const columns = Object.keys(row).filter((k) => k !== primaryKey);
+        const setClause = columns.map((col) => `"${col}" = ${escapeValue(row[col])}`).join(', ');
+        const query = `UPDATE "${table}" SET ${setClause} WHERE "${primaryKey}" = ${escapeValue(pkValue)}`;
+        configRef.current.sqlExecutor(dbName, query).then(
+          () => client.send(EVENTS.MUTATION_RESULT, { success: true }),
+          (error: unknown) => client.send(EVENTS.MUTATION_RESULT, {
+            success: false,
+            error: error instanceof Error ? error.message : String(error),
+          }),
+        );
+      }),
+
+      client.onMessage(EVENTS.DELETE_ROW, (payload: unknown) => {
+        const { dbName, table, primaryKey, primaryKeyValue } = payload as {
+          dbName: string;
+          table: string;
+          primaryKey: string;
+          primaryKeyValue: unknown;
+        };
+        const query = `DELETE FROM "${table}" WHERE "${primaryKey}" = ${escapeValue(primaryKeyValue)}`;
+        configRef.current.sqlExecutor(dbName, query).then(
+          () => client.send(EVENTS.MUTATION_RESULT, { success: true }),
+          (error: unknown) => client.send(EVENTS.MUTATION_RESULT, {
+            success: false,
+            error: error instanceof Error ? error.message : String(error),
+          }),
+        );
+      }),
+
+      client.onMessage(EVENTS.CLEAR_TABLE, (payload: unknown) => {
+        const { dbName, table } = payload as { dbName: string; table: string };
+        const query = `DELETE FROM "${table}"`;
+        configRef.current.sqlExecutor(dbName, query).then(
+          () => client.send(EVENTS.MUTATION_RESULT, { success: true }),
+          (error: unknown) => client.send(EVENTS.MUTATION_RESULT, {
+            success: false,
+            error: error instanceof Error ? error.message : String(error),
+          }),
+        );
+      }),
     ];
 
     return () => {

package/src/panel.tsx

@@ -7,8 +7,8 @@ import { SqlPanel } from './components/SqlPanel';
 import { DataTable } from './components/DataTable';
 import { RowDetailPanel } from './components/RowDetailPanel';
 
-export default function SQLiteExplorerPanel() {
-  const { state, selectDB, selectTable, selectRow, closeRow, saveRow, deleteRow, refresh, clearTable, runCustomQuery } = useExplorerState();
+export default function SQLighterPanel() {
+  const { state, selectDB, selectTable, selectRow, closeRow, saveRow, deleteRow, refresh, clearTable, runCustomQuery, mutating, mutationError, clearMutationError, reconnect } = useExplorerState();
   const { databases, selectedDB, tables, selectedTable, rows, columns, selectedRowIndex, status, error } = state;
 
   const isLoadingTables = status === 'loadingTables';
@@ -48,6 +48,7 @@ export default function SQLiteExplorerPanel() {
           status={status}
           error={error}
           onClearTable={selectedTable ? clearTable : undefined}
+          onReconnect={reconnect}
         />
         {selectedRow !== null && (
           <RowDetailPanel
@@ -56,6 +57,9 @@ export default function SQLiteExplorerPanel() {
             onClose={closeRow}
             onSave={saveRow}
             onDelete={deleteRow}
+            mutating={mutating}
+            mutationError={mutationError}
+            onClearError={clearMutationError}
           />
         )}
       </View>