database-devtools 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,96 @@
+# database-devtools
+
+[![npm version](https://img.shields.io/npm/v/database-devtools.svg)](https://www.npmjs.com/package/database-devtools)
+[![license](https://img.shields.io/npm/l/database-devtools.svg)](https://github.com/tamangRajkumar/database-devtools/blob/master/LICENSE)
+
+> Inspect and debug **SQLite** in **React Native** and **Expo** apps from your browser — browse tables, run SQL, and edit live data on connected devices.
+
+**database-devtools** is a Chrome DevTools-like toolkit for mobile app databases. Add one component to your app, run `npx database-devtools` on your machine, and inspect your local SQLite database in a full browser UI.
+
+## Features
+
+- **React Native SQLite inspector** — zero-config [expo-sqlite](https://docs.expo.dev/versions/latest/sdk/sqlite/) auto-detection
+- **Expo & React Native debugging** — floating dev overlay in your app during development
+- **Browser database explorer** — tables, schema, paginated rows, search, and sort
+- **SQL workspace** — run queries with history, favorites, and export (TSV, CSV, JSON)
+- **Edit mode** — transactional inserts, updates, and deletes on the live device database
+- **Offline exports** — snapshot saved per app; inspect even when the device disconnects
+- **Single npm install** — no extra inspector packages required
+
+## Install
+
+```bash
+npm install database-devtools expo-sqlite
+```
+
+Peer dependencies: `react`, `react-native`, `expo-sqlite`.
+
+## Quick start — React Native / Expo
+
+```tsx
+import * as SQLite from 'expo-sqlite';
+import { DatabaseDevTools } from 'database-devtools';
+
+const db = await SQLite.openDatabaseAsync('myapp.db');
+
+export function App() {
+  return (
+    <>
+      {/* your app */}
+      <DatabaseDevTools database={db} />
+    </>
+  );
+}
+```
+
+SQLite is auto-detected from the raw `expo-sqlite` instance. Optional:
+
+```tsx
+<DatabaseDevTools database={db} type="sqlite" />
+<DatabaseDevTools database={db} adapter={customAdapter} />
+```
+
+## Run the inspector hub
+
+After installing, start the local hub and browser UI:
+
+```bash
+npx database-devtools
+```
+
+Opens [http://localhost:3847](http://localhost:3847). Connect your app (simulator, emulator, or physical device on the same network), then **Refresh** to pull a database snapshot.
+
+### Physical device
+
+Point the mobile app at your machine's LAN IP:
+
+```bash
+EXPO_PUBLIC_DATABASE_DEVTOOLS_URL=ws://192.168.1.10:3847/ws
+```
+
+| Variable | Default | Purpose |
+|----------|---------|---------|
+| `DATABASE_DEVTOOLS_PORT` | `3847` | Hub and web UI port |
+| `DATABASE_DEVTOOLS_NO_OPEN` | unset | Set to `1` to skip opening the browser |
+
+## Advanced exports
+
+| Import | Use case |
+|--------|----------|
+| `database-devtools/adapters/sqlite` | Custom SQLite adapter wiring |
+| `database-devtools/inspector-sqlite` | Browser-side sql.js inspector (custom UI) |
+| `database-devtools/client` | WebSocket client for custom tools |
+| `database-devtools/server` | Embed the hub in Node.js |
+
+## Documentation
+
+- **Repository:** [github.com/tamangRajkumar/database-devtools](https://github.com/tamangRajkumar/database-devtools)
+- **Issues:** [github.com/tamangRajkumar/database-devtools/issues](https://github.com/tamangRajkumar/database-devtools/issues)
+
+## Security
+
+For **local development only**. The hub listens on `0.0.0.0`. The RN overlay is disabled in production by default (`__DEV__`). Edit mode writes to the live device database.
+
+## License
+
+MIT © [tamangRajkumar/database-devtools](https://github.com/tamangRajkumar/database-devtools)

package/dist/DatabaseDevTools-CdpQJBqG.d.ts

@@ -0,0 +1,39 @@
+import { a as DatabaseKind } from './snapshot-Dknp_qP1.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { StyleProp, TextStyle } from 'react-native';
+import { C as ConnectionState } from './handleDeviceSnapshot-DF9sS1Pm.js';
+import { D as DatabaseAdapter } from './adapter-cIF5P6qI.js';
+
+/** @deprecated Use `DatabaseKind` from `./kind` instead. */
+type DatabaseDialect = DatabaseKind;
+
+type FloatingButtonPosition = {
+    x: number;
+    y: number;
+};
+
+type DatabaseDevToolsProps = {
+    /** Raw database instance (auto-detected) or a resolved adapter. */
+    database?: unknown;
+    /** Explicit database kind override. */
+    type?: DatabaseKind;
+    /** Custom adapter override (advanced). */
+    adapter?: DatabaseAdapter;
+    serverUrl?: string;
+    enabled?: boolean;
+    position?: 'bottom-right' | 'bottom-left';
+    /** Allow dragging the floating button around the screen. */
+    draggable?: boolean;
+    /** Snap the button to screen edges after dragging. */
+    snapToEdges?: boolean;
+    /** Controlled floating button position. */
+    floatingPosition?: FloatingButtonPosition;
+    /** Called when the user drags the floating button to a new position. */
+    onFloatingPositionChange?: (position: FloatingButtonPosition) => void;
+    /** Optional style for the floating button database icon. */
+    style?: StyleProp<TextStyle>;
+    onConnectionStateChange?: (state: ConnectionState) => void;
+};
+declare function DatabaseDevTools({ database, type, adapter, serverUrl, enabled, position, draggable, snapToEdges, floatingPosition, onFloatingPositionChange, style, onConnectionStateChange, }: DatabaseDevToolsProps): react_jsx_runtime.JSX.Element | null;
+
+export { DatabaseDevTools as D, type FloatingButtonPosition as F, type DatabaseDevToolsProps as a, type DatabaseDialect as b };

package/dist/DatabaseDevTools-sw1wX5nW.d.cts

@@ -0,0 +1,39 @@
+import { a as DatabaseKind } from './snapshot-Dknp_qP1.cjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { StyleProp, TextStyle } from 'react-native';
+import { C as ConnectionState } from './handleDeviceSnapshot-CIZ_00fE.cjs';
+import { D as DatabaseAdapter } from './adapter-DQyQ5ycj.cjs';
+
+/** @deprecated Use `DatabaseKind` from `./kind` instead. */
+type DatabaseDialect = DatabaseKind;
+
+type FloatingButtonPosition = {
+    x: number;
+    y: number;
+};
+
+type DatabaseDevToolsProps = {
+    /** Raw database instance (auto-detected) or a resolved adapter. */
+    database?: unknown;
+    /** Explicit database kind override. */
+    type?: DatabaseKind;
+    /** Custom adapter override (advanced). */
+    adapter?: DatabaseAdapter;
+    serverUrl?: string;
+    enabled?: boolean;
+    position?: 'bottom-right' | 'bottom-left';
+    /** Allow dragging the floating button around the screen. */
+    draggable?: boolean;
+    /** Snap the button to screen edges after dragging. */
+    snapToEdges?: boolean;
+    /** Controlled floating button position. */
+    floatingPosition?: FloatingButtonPosition;
+    /** Called when the user drags the floating button to a new position. */
+    onFloatingPositionChange?: (position: FloatingButtonPosition) => void;
+    /** Optional style for the floating button database icon. */
+    style?: StyleProp<TextStyle>;
+    onConnectionStateChange?: (state: ConnectionState) => void;
+};
+declare function DatabaseDevTools({ database, type, adapter, serverUrl, enabled, position, draggable, snapToEdges, floatingPosition, onFloatingPositionChange, style, onConnectionStateChange, }: DatabaseDevToolsProps): react_jsx_runtime.JSX.Element | null;
+
+export { DatabaseDevTools as D, type FloatingButtonPosition as F, type DatabaseDevToolsProps as a, type DatabaseDialect as b };

package/dist/adapter/index.d.cts

@@ -1,6 +1,6 @@
-import { A as AdapterDefinition, R as ResolveAdapterOptions } from '../types-BRLJdBRY.cjs';
-import { D as DatabaseKind } from '../snapshot-Dhyecgo2.cjs';
-import { D as DatabaseAdapter } from '../adapter-BjJm71wW.cjs';
+import { A as AdapterDefinition, R as ResolveAdapterOptions } from '../types-gT3gDw_T.cjs';
+import { a as DatabaseKind } from '../snapshot-Dknp_qP1.cjs';
+import { D as DatabaseAdapter } from '../adapter-DQyQ5ycj.cjs';
 import '../write-C3toEIMs.cjs';
 
 type SupportedDatabase = {

package/dist/adapter/index.d.ts

@@ -1,6 +1,6 @@
-import { A as AdapterDefinition, R as ResolveAdapterOptions } from '../types-CF6qEU-_.js';
-import { D as DatabaseKind } from '../snapshot-Dhyecgo2.js';
-import { D as DatabaseAdapter } from '../adapter-DJSjDewg.js';
+import { A as AdapterDefinition, R as ResolveAdapterOptions } from '../types-DkVlU6t-.js';
+import { a as DatabaseKind } from '../snapshot-Dknp_qP1.js';
+import { D as DatabaseAdapter } from '../adapter-cIF5P6qI.js';
 import '../write-C3toEIMs.js';
 
 type SupportedDatabase = {

package/dist/{adapter-BjJm71wW.d.cts → adapter-DQyQ5ycj.d.cts}

@@ -1,4 +1,4 @@
-import { D as DatabaseKind, A as AdapterCapabilities, S as SnapshotExport } from './snapshot-Dhyecgo2.cjs';
+import { a as DatabaseKind, A as AdapterCapabilities, e as SnapshotExport } from './snapshot-Dknp_qP1.cjs';
 import { a as WriteOperation } from './write-C3toEIMs.cjs';
 
 /** Database adapter interface for export and write operations on the live device. */

package/dist/{adapter-DJSjDewg.d.ts → adapter-cIF5P6qI.d.ts}

@@ -1,4 +1,4 @@
-import { D as DatabaseKind, A as AdapterCapabilities, S as SnapshotExport } from './snapshot-Dhyecgo2.js';
+import { a as DatabaseKind, A as AdapterCapabilities, e as SnapshotExport } from './snapshot-Dknp_qP1.js';
 import { a as WriteOperation } from './write-C3toEIMs.js';
 
 /** Database adapter interface for export and write operations on the live device. */

package/dist/adapters/sqlite/index.d.cts

@@ -1,8 +1,8 @@
-export { C as CreateExpoSqliteAdapterOptions, E as ExpoSqliteDatabase, a as ExpoSqliteInspectableDatabase, c as createExpoSqliteAdapter, d as detectExpoSqlite, b as detectExpoSqliteInspectable, r as registerSqliteAdapter, s as sqliteAdapterDefinition } from '../../register-BuicFu9L.cjs';
+export { C as CreateExpoSqliteAdapterOptions, E as ExpoSqliteDatabase, a as ExpoSqliteInspectableDatabase, c as createExpoSqliteAdapter, d as detectExpoSqlite, b as detectExpoSqliteInspectable, r as registerSqliteAdapter, s as sqliteAdapterDefinition } from '../../register-DEZ0kK1p.cjs';
 import { D as DeleteOperation, W as WriteCellValue, I as InsertOperation, U as UpdateOperation } from '../../write-C3toEIMs.cjs';
-import '../../adapter-BjJm71wW.cjs';
-import '../../snapshot-Dhyecgo2.cjs';
-import '../../types-BRLJdBRY.cjs';
+import '../../adapter-DQyQ5ycj.cjs';
+import '../../snapshot-Dknp_qP1.cjs';
+import '../../types-gT3gDw_T.cjs';
 
 declare function quoteIdentifier(name: string): string;
 declare function buildInsertSql(operation: InsertOperation): {

package/dist/adapters/sqlite/index.d.ts

@@ -1,8 +1,8 @@
-export { C as CreateExpoSqliteAdapterOptions, E as ExpoSqliteDatabase, a as ExpoSqliteInspectableDatabase, c as createExpoSqliteAdapter, d as detectExpoSqlite, b as detectExpoSqliteInspectable, r as registerSqliteAdapter, s as sqliteAdapterDefinition } from '../../register-aITLN9Q9.js';
+export { C as CreateExpoSqliteAdapterOptions, E as ExpoSqliteDatabase, a as ExpoSqliteInspectableDatabase, c as createExpoSqliteAdapter, d as detectExpoSqlite, b as detectExpoSqliteInspectable, r as registerSqliteAdapter, s as sqliteAdapterDefinition } from '../../register-Dawue1_L.js';
 import { D as DeleteOperation, W as WriteCellValue, I as InsertOperation, U as UpdateOperation } from '../../write-C3toEIMs.js';
-import '../../adapter-DJSjDewg.js';
-import '../../snapshot-Dhyecgo2.js';
-import '../../types-CF6qEU-_.js';
+import '../../adapter-cIF5P6qI.js';
+import '../../snapshot-Dknp_qP1.js';
+import '../../types-DkVlU6t-.js';
 
 declare function quoteIdentifier(name: string): string;
 declare function buildInsertSql(operation: InsertOperation): {