npm - @rozenite/sqlite-plugin - Versions diffs - 1.12.0 → 2.0.0 - Mend

@rozenite/sqlite-plugin 1.12.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/CHANGELOG.md +23 -0
package/dist/devtools/assets/panel-BarPLQ4-.css +1 -0
package/dist/devtools/assets/{panel-DjRs5NTl.js → panel-CsA6Ejak.js} +45 -44
package/dist/devtools/panel.html +2 -2
package/dist/react-native/index.d.ts +2 -2
package/dist/rozenite.json +1 -1
package/package.json +9 -13
package/src/react-native/useSqliteAgentTools.ts +4 -1
package/src/ui/__tests__/sqlite-drop-mutations.test.ts +135 -0
package/src/ui/globals.css +12 -0
package/src/ui/panel.tsx +214 -0
package/src/ui/sqlite-drop-modal.tsx +219 -0
package/src/ui/sqlite-drop-mutations.ts +60 -0
package/dist/devtools/assets/panel-CIU0JBOs.css +0 -1
package/postcss.config.js +0 -6

package/dist/devtools/panel.html CHANGED Viewed

@@ -22,8 +22,8 @@
     <script>
       var __ROZENITE_PANEL__ = true;
     </script>
-    <script type="module" crossorigin src="../devtools/assets/panel-DjRs5NTl.js"></script>
-    <link rel="stylesheet" crossorigin href="../devtools/assets/panel-CIU0JBOs.css">
+    <script type="module" crossorigin src="../devtools/assets/panel-CsA6Ejak.js"></script>
+    <link rel="stylesheet" crossorigin href="../devtools/assets/panel-BarPLQ4-.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/react-native/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import { RozeniteDevToolsRequestClient } from '@rozenite/plugin-bridge';
 export declare let classifySqlStatement: typeof classifySqlStatement_2;
@@ -203,6 +203,6 @@ declare const statementReturnsRows_2: (statementType: SqliteStatementType) => st
 export declare let useRozeniteSqlitePlugin: typeof useRozeniteSqlitePlugin_2;
-declare const useRozeniteSqlitePlugin_2: ({ adapters, }: RozeniteSqlitePluginOptions) => RozeniteDevToolsClient<SqliteEventMap> | null;
+declare const useRozeniteSqlitePlugin_2: ({ adapters, }: RozeniteSqlitePluginOptions) => RozeniteDevToolsRequestClient<SqliteEventMap> | null;
 export { }

package/dist/rozenite.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"name":"@rozenite/sqlite-plugin","version":"1.12.0","description":"SQLite inspector for Rozenite.","panels":[{"name":"SQLite","source":"/devtools/panel.html"}]}
1	+ {"name":"@rozenite/sqlite-plugin","version":"2.0.0","description":"SQLite inspector for Rozenite.","panels":[{"name":"SQLite","source":"/devtools/panel.html"}]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@rozenite/sqlite-plugin",
-  "version": "1.12.0",
+  "version": "2.0.0",
   "description": "SQLite inspector for Rozenite.",
   "type": "module",
   "main": "./dist/react-native/index.cjs",
@@ -15,8 +15,8 @@
     "url": "https://github.com/callstackincubator/rozenite.git"
   },
   "dependencies": {
-    "@rozenite/agent-bridge": "1.12.0",
-    "@rozenite/plugin-bridge": "1.12.0"
+    "@rozenite/agent-bridge": "2.0.0",
+    "@rozenite/plugin-bridge": "2.0.0"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -31,26 +31,22 @@
     "@heroui/react": "^3.0.1",
     "@heroui/styles": "^3.0.1",
     "@lezer/highlight": "^1.2.3",
-    "@tailwindcss/postcss": "^4.2.2",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.0.0",
-    "@types/react": "~19.2.2",
-    "autoprefixer": "^10.4.21",
+    "@types/react": "~19.2.3",
     "expo-sqlite": "^55.0.11",
     "lucide-react": "^0.263.1",
-    "postcss": "^8.5.6",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "react-json-tree": "^0.20.0",
-    "react-native": "0.83.1",
+    "react-native": "0.86.0",
     "react-native-web": "^0.21.2",
     "sql-formatter": "^15.7.2",
-    "tailwindcss": "^4.2.2",
     "typescript": "~5.9.3",
     "vite": "^7.3.1",
     "vitest": "^3.2.4",
-    "@rozenite/vite-plugin": "1.12.0",
-    "rozenite": "1.12.0"
+    "@rozenite/vite-plugin": "2.0.0",
+    "rozenite": "2.0.0"
   },
   "peerDependencies": {
     "expo-sqlite": "*",

package/src/react-native/useSqliteAgentTools.ts CHANGED Viewed

@@ -1,5 +1,8 @@
 import { useCallback } from 'react';
-import { useRozenitePluginAgentTool, type AgentTool } from '@rozenite/agent-bridge';
+import {
+  useRozenitePluginAgentTool,
+  type AgentTool,
+} from '@rozenite/agent-bridge';
 import { formatSqliteError } from '../shared/bridge-values';
 import { normalizeSingleStatementSql, splitSqlStatements } from '../shared/sql';
 import type { SqliteExecuteStatementsError } from '../shared/types';

package/src/ui/__tests__/sqlite-drop-mutations.test.ts ADDED Viewed

@@ -0,0 +1,135 @@
+import { describe, expect, it } from 'vitest';
+import {
+  buildDropAllEntitiesSql,
+  buildDropEntitySql,
+  buildSetForeignKeysSql,
+  isForeignKeysEnabled,
+  orderEntitiesForDrop,
+  SQLITE_READ_FOREIGN_KEYS_SQL,
+  type SqliteDropTarget,
+} from '../sqlite-drop-mutations';
+describe('buildDropEntitySql', () => {
+  it('builds a DROP TABLE statement for a table entity', () => {
+    expect(
+      buildDropEntitySql({
+        schemaName: 'main',
+        name: 'projects',
+        type: 'table',
+      }),
+    ).toBe('DROP TABLE "main"."projects"');
+  });
+  it('builds a DROP VIEW statement for a view entity', () => {
+    expect(
+      buildDropEntitySql({
+        schemaName: 'main',
+        name: 'active_projects',
+        type: 'view',
+      }),
+    ).toBe('DROP VIEW "main"."active_projects"');
+  });
+  it('quotes identifiers containing double quotes by doubling them', () => {
+    expect(
+      buildDropEntitySql({
+        schemaName: 'main',
+        name: 'weird"table',
+        type: 'table',
+      }),
+    ).toBe('DROP TABLE "main"."weird""table"');
+  });
+  it('quotes identifiers containing dots so they are not read as separators', () => {
+    expect(
+      buildDropEntitySql({
+        schemaName: 'main',
+        name: 'schema.like.name',
+        type: 'table',
+      }),
+    ).toBe('DROP TABLE "main"."schema.like.name"');
+  });
+  it('quotes schema names containing double quotes and dots as well', () => {
+    expect(
+      buildDropEntitySql({
+        schemaName: 'weird"schema.name',
+        name: 'projects',
+        type: 'view',
+      }),
+    ).toBe('DROP VIEW "weird""schema.name"."projects"');
+  });
+});
+describe('orderEntitiesForDrop', () => {
+  it('moves all views before all tables while preserving relative order', () => {
+    const entities: SqliteDropTarget[] = [
+      { schemaName: 'main', name: 'a_table', type: 'table' },
+      { schemaName: 'main', name: 'b_view', type: 'view' },
+      { schemaName: 'main', name: 'c_table', type: 'table' },
+      { schemaName: 'main', name: 'd_view', type: 'view' },
+    ];
+    expect(orderEntitiesForDrop(entities).map((entity) => entity.name)).toEqual(
+      ['b_view', 'd_view', 'a_table', 'c_table'],
+    );
+  });
+  it('returns an empty array for an empty database', () => {
+    expect(orderEntitiesForDrop([])).toEqual([]);
+  });
+});
+describe('buildDropAllEntitiesSql', () => {
+  it('emits DROP VIEW statements before DROP TABLE statements', () => {
+    const entities: SqliteDropTarget[] = [
+      { schemaName: 'main', name: 'projects', type: 'table' },
+      { schemaName: 'main', name: 'active_projects', type: 'view' },
+    ];
+    expect(buildDropAllEntitiesSql(entities)).toBe(
+      'DROP VIEW "main"."active_projects";\nDROP TABLE "main"."projects";',
+    );
+  });
+  it('quotes every identifier in the generated script', () => {
+    const entities: SqliteDropTarget[] = [
+      { schemaName: 'main', name: 'weird"table', type: 'table' },
+      { schemaName: 'main', name: 'schema.view', type: 'view' },
+    ];
+    expect(buildDropAllEntitiesSql(entities)).toBe(
+      'DROP VIEW "main"."schema.view";\nDROP TABLE "main"."weird""table";',
+    );
+  });
+  it('returns an empty string for an empty database', () => {
+    expect(buildDropAllEntitiesSql([])).toBe('');
+  });
+});
+describe('foreign key pragma helpers', () => {
+  it('exposes the read-only pragma statement', () => {
+    expect(SQLITE_READ_FOREIGN_KEYS_SQL).toBe('PRAGMA foreign_keys');
+  });
+  it('builds a statement enabling foreign keys', () => {
+    expect(buildSetForeignKeysSql(true)).toBe('PRAGMA foreign_keys = ON');
+  });
+  it('builds a statement disabling foreign keys', () => {
+    expect(buildSetForeignKeysSql(false)).toBe('PRAGMA foreign_keys = OFF');
+  });
+  it('treats a foreign_keys value of 1 as enabled', () => {
+    expect(isForeignKeysEnabled([{ foreign_keys: 1 }])).toBe(true);
+  });
+  it('treats a foreign_keys value of 0 as disabled', () => {
+    expect(isForeignKeysEnabled([{ foreign_keys: 0 }])).toBe(false);
+  });
+  it('treats an empty result set as disabled', () => {
+    expect(isForeignKeysEnabled([])).toBe(false);
+  });
+});

package/src/ui/globals.css CHANGED Viewed

@@ -399,6 +399,18 @@
     flex-shrink: 0;
   }
+  .sqlite-button-danger {
+    border-color: rgba(255, 100, 100, 0.35);
+    background: rgba(255, 90, 90, 0.14);
+    color: rgba(255, 214, 214, 0.95);
+  }
+  .sqlite-button-danger:hover:not(:disabled) {
+    border-color: rgba(255, 120, 120, 0.55);
+    background: rgba(255, 90, 90, 0.22);
+    color: white;
+  }
   .sqlite-badge,
   .sqlite-chip,
   .sqlite-count-pill {

package/src/ui/panel.tsx CHANGED Viewed

@@ -65,6 +65,17 @@ import {
 } from './sqlite-introspection';
 import { QueryResultTable } from './query-result-table';
 import { SqliteRowDeleteModal } from './sqlite-row-delete-modal';
+import {
+  SqliteDropModal,
+  type SqliteDropModalTarget,
+} from './sqlite-drop-modal';
+import {
+  buildDropAllEntitiesSql,
+  buildDropEntitySql,
+  buildSetForeignKeysSql,
+  isForeignKeysEnabled,
+  SQLITE_READ_FOREIGN_KEYS_SQL,
+} from './sqlite-drop-mutations';
 import { SqliteDataTable } from './sqlite-data-table';
 import { SqliteRowEditModal } from './sqlite-row-edit-modal';
 import { SqlEditor, type SqlEditorHandle } from './sql-editor';
@@ -148,6 +159,15 @@ type ActiveRowMutationState = {
   rowIndex: number;
 } | null;
+/**
+ * The drop dialog operates on the target captured when it opened, so that a
+ * mid-dialog explorer reload cannot repoint it at a different object.
+ */
+type ActiveDropState = {
+  databaseId: string;
+  target: SqliteDropModalTarget;
+} | null;
 const DEFAULT_QUERY =
   'SELECT name, type FROM sqlite_schema ORDER BY type, name';
 const DEFAULT_QUERY_LIMIT = 100;
@@ -164,6 +184,14 @@ const DEFAULT_EXPLORER_STATE: ExplorerState = {
   loaded: false,
 };
+const DEFAULT_DROP_TARGET: SqliteDropModalTarget = {
+  kind: 'entity',
+  entityType: 'table',
+  qualifiedName: '',
+  confirmationValue: '',
+  sql: '',
+};
 const joinClassNames = (
   ...classNames: Array<string | false | null | undefined>
 ) => classNames.filter(Boolean).join(' ');
@@ -315,6 +343,7 @@ const iconButtonClassName =
   'sqlite-icon-button inline-flex h-10 w-10 items-center justify-center rounded-xl';
 const primaryIconButtonClassName = `${iconButtonClassName} sqlite-button-primary`;
 const secondaryIconButtonClassName = `${iconButtonClassName} sqlite-button-secondary`;
+const dangerIconButtonClassName = `${iconButtonClassName} sqlite-button-danger`;
 const ghostIconButtonClassName = `${iconButtonClassName} sqlite-button-ghost`;
 const renderEmptyState = (
@@ -418,6 +447,7 @@ export default function SqlitePanel() {
   >({});
   const [editingRow, setEditingRow] = useState<ActiveRowMutationState>(null);
   const [deletingRow, setDeletingRow] = useState<ActiveRowMutationState>(null);
+  const [activeDrop, setActiveDrop] = useState<ActiveDropState>(null);
   const [objectSearch, setObjectSearch] = useState('');
   const [dataSearch, setDataSearch] = useState('');
@@ -1202,6 +1232,149 @@ export default function SqlitePanel() {
     selectedEntity,
   ]);
+  const handleOpenDropEntity = useCallback(() => {
+    if (!selectedDatabaseId || !selectedEntity) {
+      return;
+    }
+    setActiveDrop({
+      databaseId: selectedDatabaseId,
+      target: {
+        kind: 'entity',
+        entityType: selectedEntity.type,
+        qualifiedName: `${selectedEntity.schemaName}.${selectedEntity.name}`,
+        confirmationValue: selectedEntity.name,
+        sql: `${buildDropEntitySql(selectedEntity)};`,
+      },
+    });
+  }, [selectedDatabaseId, selectedEntity]);
+  const handleOpenDropAllEntities = useCallback(() => {
+    if (!selectedDatabaseId || !selectedDatabase) {
+      return;
+    }
+    const tableCount = entities.filter(
+      (entity) => entity.type === 'table',
+    ).length;
+    const viewCount = entities.filter(
+      (entity) => entity.type === 'view',
+    ).length;
+    setActiveDrop({
+      databaseId: selectedDatabaseId,
+      target: {
+        kind: 'database',
+        databaseName: selectedDatabase.name,
+        confirmationValue: selectedDatabase.name,
+        tableCount,
+        viewCount,
+        sql: buildDropAllEntitiesSql(entities),
+      },
+    });
+  }, [entities, selectedDatabase, selectedDatabaseId]);
+  const dropSelectedEntity = useCallback(
+    async (databaseId: string, sql: string) => {
+      await requestQuery({ databaseId, sql });
+    },
+    [requestQuery],
+  );
+  const dropAllEntities = useCallback(
+    async (databaseId: string, sql: string) => {
+      // Dropping a parent table before its children fails while foreign key
+      // enforcement is on, so turn it off for the sweep. The pragma is
+      // per-connection and that connection belongs to the running app, so the
+      // original value has to be restored on every path out of here.
+      const foreignKeysResult = await requestQuery({
+        databaseId,
+        sql: SQLITE_READ_FOREIGN_KEYS_SQL,
+      });
+      const foreignKeysWereEnabled = isForeignKeysEnabled(
+        foreignKeysResult.rows,
+      );
+      if (foreignKeysWereEnabled) {
+        await requestQuery({
+          databaseId,
+          sql: buildSetForeignKeysSql(false),
+        });
+      }
+      let dropError: unknown = null;
+      try {
+        const scriptResult = await requestScriptExecution({
+          databaseId,
+          sql,
+        });
+        if (scriptResult.failedStatementIndex != null) {
+          const failedStatement = scriptResult.statements.find(
+            (statement) =>
+              statement.index === scriptResult.failedStatementIndex,
+          );
+          throw new Error(failedStatement?.error ?? 'Script execution failed.');
+        }
+      } catch (error) {
+        dropError = error;
+      }
+      if (foreignKeysWereEnabled) {
+        try {
+          await requestQuery({
+            databaseId,
+            sql: buildSetForeignKeysSql(true),
+          });
+        } catch (restoreError) {
+          // The drop error, if any, takes priority: it's the reason the user
+          // is looking at this modal. Only surface the restore failure when
+          // the drop itself succeeded, since that's a new, silent problem.
+          if (!dropError) {
+            throw restoreError instanceof Error
+              ? restoreError
+              : new Error(String(restoreError));
+          }
+        }
+      }
+      if (dropError) {
+        throw dropError instanceof Error
+          ? dropError
+          : new Error(String(dropError));
+      }
+    },
+    [requestQuery, requestScriptExecution],
+  );
+  const handleConfirmDrop = useCallback(async () => {
+    if (!activeDrop) {
+      throw new Error('The drop target is no longer available.');
+    }
+    // Execute the target captured when the dialog opened rather than the
+    // current selection: an app reload can fire `sqlite:ready` mid-dialog,
+    // which reloads the explorer and may move the selection elsewhere. The
+    // user confirmed by typing this object's name, so this is the object that
+    // has to be dropped.
+    const { databaseId, target } = activeDrop;
+    if (!target.sql) {
+      throw new Error('There is nothing to drop.');
+    }
+    if (target.kind === 'entity') {
+      await dropSelectedEntity(databaseId, target.sql);
+    } else {
+      await dropAllEntities(databaseId, target.sql);
+    }
+    setActiveDrop(null);
+    setSelectedEntityKey(null);
+    await refreshExplorerData();
+  }, [activeDrop, dropAllEntities, dropSelectedEntity, refreshExplorerData]);
   const getActiveStatement = useCallback(() => {
     const cursorPosition =
       editorRef.current?.getSelection().start ?? querySelection.start;
@@ -2287,6 +2460,17 @@ export default function SqlitePanel() {
               )}
             />
           </button>
+          <button
+            type="button"
+            className={dangerIconButtonClassName}
+            onClick={handleOpenDropEntity}
+            aria-label={
+              selectedEntity.type === 'view' ? 'Drop view' : 'Drop table'
+            }
+            title={selectedEntity.type === 'view' ? 'Drop view' : 'Drop table'}
+          >
+            <Trash2 aria-hidden="true" className="h-4 w-4" />
+          </button>
         </div>
       </header>
@@ -2455,6 +2639,29 @@ export default function SqlitePanel() {
                     )}
                   />
                 </button>
+                <button
+                  type="button"
+                  className={dangerIconButtonClassName}
+                  aria-label={
+                    selectedDatabase
+                      ? `Drop all objects in ${selectedDatabase.name}`
+                      : 'Drop all objects'
+                  }
+                  title={
+                    selectedDatabase
+                      ? `Drop all objects in ${selectedDatabase.name}`
+                      : 'Drop all objects'
+                  }
+                  onClick={handleOpenDropAllEntities}
+                  disabled={
+                    !selectedDatabaseId ||
+                    entities.length === 0 ||
+                    databaseLoading ||
+                    entityLoading
+                  }
+                >
+                  <Trash2 aria-hidden="true" className="h-4 w-4" />
+                </button>
               </div>
             </header>
@@ -2809,6 +3016,13 @@ export default function SqlitePanel() {
           onClose={() => setDeletingRow(null)}
           onDelete={handleDeleteRow}
         />
+        <SqliteDropModal
+          isOpen={!!activeDrop}
+          target={activeDrop?.target ?? DEFAULT_DROP_TARGET}
+          onClose={() => setActiveDrop(null)}
+          onConfirm={handleConfirmDrop}
+        />
       </div>
     </div>
   );