rozenite-sqlite 0.0.9 → 0.0.12

package/src/constants.ts

@@ -0,0 +1,17 @@
+export const PLUGIN_ID = 'rozenite-sqlite' as const;
+
+export const EVENTS = {
+  GET_DB_LIST: 'get-db-list',
+  SEND_DB_LIST: 'send-db-list',
+  SQL_EXECUTE: 'sql-execute',
+  SQL_EXEC_RESULT: 'sql-exec-result',
+  SAVE_ROW: 'save-row',
+  DELETE_ROW: 'delete-row',
+  CLEAR_TABLE: 'clear-table',
+  MUTATION_RESULT: 'mutation-result',
+} as const;
+
+export const QUERIES = {
+  LIST_TABLES:
+    "SELECT name FROM sqlite_master WHERE type='table' AND name NOT LIKE 'sqlite_%' ORDER BY name",
+} as const;

package/src/hooks/useBridgeSync.ts

@@ -0,0 +1,217 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import { EVENTS, PLUGIN_ID, QUERIES } from '../constants';
+import type { RowData } from '../theme';
+import type { Action } from './useExplorerState';
+
+type BridgeClient = ReturnType<typeof useRozeniteDevToolsClient>;
+
+function fetchTables(client: NonNullable<BridgeClient>, dbName: string) {
+  client.send(EVENTS.SQL_EXECUTE, { dbName, query: QUERIES.LIST_TABLES });
+}
+
+function fetchData(client: NonNullable<BridgeClient>, dbName: string, tableName: string) {
+  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' | '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]);
+
+  useEffect(() => {
+    if (!client) return;
+    // Reset state fully so the DB→tables→data cascade re-runs cleanly.
+    // This prevents the race where effects 2 & 3 both fire on reconnect/hot-reload.
+    dispatch({ type: 'RESET' });
+    client.send(EVENTS.GET_DB_LIST, true);
+
+    const sub1 = client.onMessage(EVENTS.SEND_DB_LIST, (payload: unknown) => {
+      const databases = Array.isArray(payload) ? (payload as string[]) : [];
+      dispatch({ type: 'SET_DATABASES', databases });
+    });
+
+    const sub2 = client.onMessage(EVENTS.SQL_EXEC_RESULT, (payload: unknown) => {
+      const mode = pendingRef.current;
+      const isError = payload !== null && typeof payload === 'object' && 'error' in payload;
+      const errorMsg = isError ? String((payload as { error: unknown }).error) : null;
+
+      if (mode === 'query') {
+        const resolver = customQueryResolverRef.current;
+        customQueryResolverRef.current = null;
+        pendingRef.current = null;
+        resolver?.(
+          isError
+            ? { rows: [], columns: [], error: errorMsg! }
+            : (() => {
+                const rows: RowData[] = Array.isArray(payload) ? (payload as RowData[]) : [];
+                return { rows, columns: rows.length > 0 ? Object.keys(rows[0]) : [] };
+              })(),
+        );
+        return;
+      }
+
+      if (isError) {
+        dispatch({ type: 'SET_ERROR', error: errorMsg! });
+        return;
+      }
+
+      if (mode === 'tables') {
+        const tables = Array.isArray(payload)
+          ? (payload as Array<{ name: string }>).map((r) => r.name)
+          : [];
+        dispatch({ type: 'SET_TABLES', tables });
+      } 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]) : [] });
+      }
+    });
+
+    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]);
+
+  // No `client` in deps — driven purely by state changes from the cascade above.
+  // This prevents effects 2 & 3 from firing simultaneously when client reconnects.
+  useEffect(() => {
+    if (!client || !selectedDB) return;
+    pendingRef.current = 'tables';
+    dispatch({ type: 'LOAD_TABLES_START' });
+    fetchTables(client, selectedDB);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedDB, dispatch]);
+
+  useEffect(() => {
+    if (!client || !selectedDB || !selectedTable) return;
+    pendingRef.current = 'data';
+    dispatch({ type: 'LOAD_DATA_START' });
+    fetchData(client, selectedDB, selectedTable);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedDB, selectedTable, dispatch]);
+
+  const refresh = useCallback(() => {
+    if (!client) return;
+    if (selectedDB && selectedTable) {
+      pendingRef.current = 'data';
+      dispatch({ type: 'LOAD_DATA_START' });
+      fetchData(client, selectedDB, selectedTable);
+    } else if (selectedDB) {
+      pendingRef.current = 'tables';
+      dispatch({ type: 'LOAD_TABLES_START' });
+      fetchTables(client, selectedDB);
+    }
+  }, [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 }> =>
+      new Promise((resolve) => {
+        const db = selectedDBRef.current;
+        if (!client || !db) {
+          resolve({ rows: [], columns: [], error: 'No database selected' });
+          return;
+        }
+        pendingRef.current = 'query';
+        customQueryResolverRef.current = resolve;
+        client.send(EVENTS.SQL_EXECUTE, { dbName: db, query: sql });
+      }),
+    [client],
+  );
+
+  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

@@ -0,0 +1,216 @@
+import { useReducer, useCallback, useState } from 'react';
+import type { RowData } from '../theme';
+import { useBridgeSync, type MutationResult } from './useBridgeSync';
+
+export type ExplorerStatus = 'connecting' | 'idle' | 'loadingTables' | 'loadingData' | 'error';
+
+export interface ExplorerState {
+  databases: string[];
+  selectedDB: string | null;
+  tables: string[];
+  selectedTable: string | null;
+  rows: RowData[];
+  columns: string[];
+  selectedRowIndex: number | null;
+  status: ExplorerStatus;
+  error: string | null;
+}
+
+export type Action =
+  | { type: 'RESET' }
+  | { type: 'SELECT_DB'; db: string }
+  | { type: 'SELECT_TABLE'; table: string }
+  | { type: 'SET_DATABASES'; databases: string[] }
+  | { type: 'LOAD_TABLES_START' }
+  | { type: 'SET_TABLES'; tables: string[] }
+  | { type: 'LOAD_DATA_START' }
+  | { type: 'SET_DATA'; rows: RowData[]; columns: string[] }
+  | { type: 'SET_ERROR'; error: string }
+  | { type: 'SELECT_ROW'; index: number }
+  | { type: 'CLOSE_ROW' }
+  | { type: 'SAVE_ROW'; updated: RowData }
+  | { type: 'DELETE_ROW' };
+
+const initial: ExplorerState = {
+  databases: [],
+  selectedDB: null,
+  tables: [],
+  selectedTable: null,
+  rows: [],
+  columns: [],
+  selectedRowIndex: null,
+  status: 'connecting',
+  error: null,
+};
+
+function reducer(state: ExplorerState, action: Action): ExplorerState {
+  switch (action.type) {
+    case 'RESET':
+      return { ...initial };
+
+    case 'SELECT_DB':
+      return {
+        ...state,
+        selectedDB: action.db,
+        tables: [],
+        selectedTable: null,
+        rows: [],
+        columns: [],
+        selectedRowIndex: null,
+        error: null,
+      };
+
+    case 'SELECT_TABLE':
+      return { ...state, selectedTable: action.table, selectedRowIndex: null, error: null };
+
+    case 'SET_DATABASES':
+      return {
+        ...state,
+        status: 'idle',
+        databases: action.databases,
+        selectedDB: action.databases[0] ?? null,
+        error: null,
+      };
+
+    case 'LOAD_TABLES_START':
+      return {
+        ...state,
+        status: 'loadingTables',
+        tables: [],
+        selectedTable: null,
+        rows: [],
+        columns: [],
+        error: null,
+      };
+
+    case 'SET_TABLES': {
+      const { tables } = action;
+      const selectedTable = tables.includes(state.selectedTable ?? '')
+        ? state.selectedTable
+        : (tables[0] ?? null);
+      return { ...state, status: 'idle', tables, selectedTable };
+    }
+
+    case 'LOAD_DATA_START':
+      return {
+        ...state,
+        status: 'loadingData',
+        rows: [],
+        columns: [],
+        selectedRowIndex: null,
+        error: null,
+      };
+
+    case 'SET_DATA':
+      return {
+        ...state,
+        status: 'idle',
+        rows: action.rows,
+        columns: action.columns,
+        selectedRowIndex: null,
+      };
+
+    case 'SET_ERROR':
+      return { ...state, status: 'error', error: action.error };
+
+    case 'SELECT_ROW':
+      return {
+        ...state,
+        selectedRowIndex: state.selectedRowIndex === action.index ? null : action.index,
+      };
+
+    case 'CLOSE_ROW':
+      return { ...state, selectedRowIndex: null };
+
+    case 'SAVE_ROW':
+      if (state.selectedRowIndex === null) return state;
+      return {
+        ...state,
+        rows: state.rows.map((r, i) => (i === state.selectedRowIndex ? action.updated : r)),
+      };
+
+    case 'DELETE_ROW':
+      if (state.selectedRowIndex === null) return state;
+      return {
+        ...state,
+        rows: state.rows.filter((_, i) => i !== state.selectedRowIndex),
+        selectedRowIndex: null,
+      };
+
+    default:
+      return state;
+  }
+}
+
+export function useExplorerState() {
+  const [state, dispatch] = useReducer(reducer, initial);
+  const { selectedDB, selectedTable, columns, selectedRowIndex, rows } = state;
+  const [mutating, setMutating] = useState(false);
+  const [mutationError, setMutationError] = useState<string | null>(null);
+
+  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(
+    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

@@ -0,0 +1,127 @@
+import { useEffect, useRef } from 'react';
+import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import { EVENTS, PLUGIN_ID } from '../constants';
+
+export type SQLExecutor = (
+  dbName: string,
+  query: string,
+) => Promise<Record<string, unknown>[]>;
+
+export interface RozeniteSQLiteConfig {
+  /** List of database names exposed to the devtools panel, e.g. ["app.db", "cache.db"] */
+  databases: string[];
+  /** Library-agnostic SQL runner — receives the db name and raw query, returns rows */
+  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 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 —
+ * you don't need to touch the plugin-bridge directly.
+ *
+ * @example
+ * useRozeniteSQLite({
+ *   databases: ['app.db', 'cache.db'],
+ *   sqlExecutor: async (dbName, query) => {
+ *     const db = myDatabases[dbName];
+ *     return db.getAllAsync(query);
+ *   },
+ * });
+ */
+export function useRozeniteSQLite(config: RozeniteSQLiteConfig): void {
+  const client = useRozeniteDevToolsClient({ pluginId: PLUGIN_ID });
+
+  const configRef = useRef(config);
+  useEffect(() => {
+    configRef.current = config;
+  });
+
+  useEffect(() => {
+    if (!client) return;
+
+    const subs = [
+      client.onMessage(EVENTS.GET_DB_LIST, () => {
+        client.send(EVENTS.SEND_DB_LIST, configRef.current.databases);
+      }),
+
+      client.onMessage(EVENTS.SQL_EXECUTE, (payload: unknown) => {
+        const { dbName, query } = payload as { dbName: string; query: string };
+        configRef.current.sqlExecutor(dbName, query).then(
+          (rows) => {
+            client.send(EVENTS.SQL_EXEC_RESULT, rows);
+          },
+          (error: unknown) => {
+            client.send(EVENTS.SQL_EXEC_RESULT, {
+              error: error instanceof Error ? error.message : String(error),
+            });
+          },
+        );
+      }),
+
+      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 () => {
+      subs.forEach((sub) => sub.remove());
+    };
+  }, [client]);
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './hooks/useRozeniteSQLite';