@rozenite/sqlite-plugin 1.7.0-rc.0

package/src/ui/sqlite-row-mutations.ts

@@ -0,0 +1,246 @@
+import { quoteSqlIdentifier } from '../shared/sql';
+import type { SqliteQueryParams } from '../shared/types';
+import type { SqliteColumnInfo, SqliteEntity } from './sqlite-introspection';
+
+export const SQLITE_HIDDEN_ROWID_COLUMN_ID = '__sqlite-hidden-rowid__';
+export const SQLITE_ROW_ACTIONS_COLUMN_ID = '__sqlite-row-actions__';
+
+const SQLITE_ROWID_IDENTIFIERS = ['rowid', '_rowid_', 'oid'] as const;
+
+export type SqliteRowIdIdentifier = (typeof SQLITE_ROWID_IDENTIFIERS)[number];
+
+export type SqliteEditableValueKind =
+  | 'text'
+  | 'number'
+  | 'boolean'
+  | 'blob-ish'
+  | 'json';
+
+export type SqliteRowMutationDescriptor =
+  | {
+      mode: 'primary-key';
+      primaryKeyColumns: SqliteColumnInfo[];
+    }
+  | {
+      mode: 'rowid';
+      rowIdIdentifier: SqliteRowIdIdentifier;
+    };
+
+type BuildRowUpdateMutationInput = {
+  entity: SqliteEntity;
+  columns: SqliteColumnInfo[];
+  row: Record<string, unknown>;
+  descriptor: SqliteRowMutationDescriptor;
+  nextValues: Record<string, unknown>;
+};
+
+type BuildRowDeleteMutationInput = {
+  entity: SqliteEntity;
+  row: Record<string, unknown>;
+  descriptor: SqliteRowMutationDescriptor;
+};
+
+type SqliteMutationResult = {
+  sql: string;
+  params: SqliteQueryParams;
+};
+
+const buildQualifiedEntityName = (schemaName: string, entityName: string) =>
+  `${quoteSqlIdentifier(schemaName)}.${quoteSqlIdentifier(entityName)}`;
+
+const isWithoutRowIdEntity = (entity: SqliteEntity) =>
+  /\bwithout\s+rowid\b/i.test(entity.sql ?? '');
+
+export const getPrimaryKeyColumns = (columns: SqliteColumnInfo[]) =>
+  columns
+    .filter((column) => column.primaryKeyOrder > 0)
+    .sort((left, right) => left.primaryKeyOrder - right.primaryKeyOrder);
+
+export const getEditableColumns = (columns: SqliteColumnInfo[]) =>
+  columns.filter(
+    (column) => column.primaryKeyOrder === 0 && column.hidden === 0,
+  );
+
+const getNormalizedColumnType = (column: SqliteColumnInfo) =>
+  column.type.trim().toLowerCase();
+
+const inferValueKindFromRuntimeValue = (
+  value: unknown,
+): SqliteEditableValueKind => {
+  if (typeof value === 'number') {
+    return 'number';
+  }
+
+  if (typeof value === 'boolean') {
+    return 'boolean';
+  }
+
+  if (Array.isArray(value)) {
+    return value.every((item) => typeof item === 'number')
+      ? 'blob-ish'
+      : 'json';
+  }
+
+  if (value && typeof value === 'object') {
+    return 'json';
+  }
+
+  return 'text';
+};
+
+export const getCompatibleValueKinds = (
+  column: SqliteColumnInfo,
+  value: unknown,
+): SqliteEditableValueKind[] => {
+  const normalizedType = getNormalizedColumnType(column);
+
+  if (normalizedType.includes('json')) {
+    return ['json'];
+  }
+
+  if (normalizedType.includes('blob')) {
+    return ['blob-ish'];
+  }
+
+  if (normalizedType.includes('bool')) {
+    return ['boolean'];
+  }
+
+  if (
+    normalizedType.includes('int') ||
+    normalizedType.includes('real') ||
+    normalizedType.includes('floa') ||
+    normalizedType.includes('doub') ||
+    normalizedType.includes('num') ||
+    normalizedType.includes('dec')
+  ) {
+    return ['number'];
+  }
+
+  if (
+    normalizedType.includes('char') ||
+    normalizedType.includes('clob') ||
+    normalizedType.includes('text') ||
+    normalizedType.includes('varchar') ||
+    normalizedType.includes('string')
+  ) {
+    return ['text'];
+  }
+
+  return [inferValueKindFromRuntimeValue(value)];
+};
+
+export const canColumnBeNull = (column: SqliteColumnInfo) => !column.notNull;
+
+export const getAvailableRowIdIdentifier = (
+  columns: SqliteColumnInfo[],
+): SqliteRowIdIdentifier | null => {
+  const lowerCaseColumnNames = new Set(
+    columns.map((column) => column.name.toLowerCase()),
+  );
+
+  return (
+    SQLITE_ROWID_IDENTIFIERS.find(
+      (identifier) => !lowerCaseColumnNames.has(identifier),
+    ) ?? null
+  );
+};
+
+export const getRowMutationDescriptor = (
+  entity: SqliteEntity | null,
+  columns: SqliteColumnInfo[],
+): SqliteRowMutationDescriptor | null => {
+  if (!entity || entity.type !== 'table' || columns.length === 0) {
+    return null;
+  }
+
+  const primaryKeyColumns = getPrimaryKeyColumns(columns);
+  if (primaryKeyColumns.length > 0) {
+    return {
+      mode: 'primary-key',
+      primaryKeyColumns,
+    };
+  }
+
+  if (isWithoutRowIdEntity(entity)) {
+    return null;
+  }
+
+  const rowIdIdentifier = getAvailableRowIdIdentifier(columns);
+  if (!rowIdIdentifier) {
+    return null;
+  }
+
+  return {
+    mode: 'rowid',
+    rowIdIdentifier,
+  };
+};
+
+const buildWhereClause = (
+  row: Record<string, unknown>,
+  descriptor: SqliteRowMutationDescriptor,
+) => {
+  if (descriptor.mode === 'primary-key') {
+    const params = descriptor.primaryKeyColumns.map(
+      (column) => row[column.name],
+    );
+    const clause = descriptor.primaryKeyColumns
+      .map((column) => `${quoteSqlIdentifier(column.name)} = ?`)
+      .join(' AND ');
+
+    return {
+      clause,
+      params,
+    };
+  }
+
+  return {
+    clause: `${descriptor.rowIdIdentifier} = ?`,
+    params: [row[SQLITE_HIDDEN_ROWID_COLUMN_ID]],
+  };
+};
+
+export const buildRowUpdateMutation = ({
+  entity,
+  columns,
+  row,
+  descriptor,
+  nextValues,
+}: BuildRowUpdateMutationInput): SqliteMutationResult => {
+  const updateColumnNames = getEditableColumns(columns)
+    .map((column) => column.name)
+    .filter((columnName) =>
+      Object.prototype.hasOwnProperty.call(nextValues, columnName),
+    );
+
+  if (updateColumnNames.length === 0) {
+    throw new Error('No editable columns are available for this row.');
+  }
+
+  const assignments = updateColumnNames.map(
+    (columnName) => `${quoteSqlIdentifier(columnName)} = ?`,
+  );
+  const assignmentParams = updateColumnNames.map(
+    (columnName) => nextValues[columnName],
+  );
+  const where = buildWhereClause(row, descriptor);
+
+  return {
+    sql: `UPDATE ${buildQualifiedEntityName(entity.schemaName, entity.name)} SET ${assignments.join(', ')} WHERE ${where.clause}`,
+    params: [...assignmentParams, ...where.params],
+  };
+};
+
+export const buildRowDeleteMutation = ({
+  entity,
+  row,
+  descriptor,
+}: BuildRowDeleteMutationInput): SqliteMutationResult => {
+  const where = buildWhereClause(row, descriptor);
+
+  return {
+    sql: `DELETE FROM ${buildQualifiedEntityName(entity.schemaName, entity.name)} WHERE ${where.clause}`,
+    params: where.params,
+  };
+};

package/src/ui/sqlite-table-column-order.ts

@@ -0,0 +1,154 @@
+import type { Updater } from '@tanstack/react-table';
+
+export const SQLITE_ROW_NUMBER_COLUMN_ID = '__sqlite-row-number__';
+
+type NormalizeTableColumnOrderInput = {
+  columnIds: string[];
+  fixedLeadingColumnIds?: string[];
+  storedColumnOrder?: string[] | null;
+};
+
+type ResolveTableColumnOrderUpdateInput = NormalizeTableColumnOrderInput & {
+  nextColumnOrder: Updater<string[]>;
+};
+
+type ReorderTableColumnOrderInput = NormalizeTableColumnOrderInput & {
+  activeColumnId: string;
+  overColumnId: string;
+};
+
+const applyUpdater = <TValue>(
+  updater: Updater<TValue>,
+  currentValue: TValue,
+): TValue =>
+  typeof updater === 'function'
+    ? (updater as (old: TValue) => TValue)(currentValue)
+    : updater;
+
+export const getDefaultTableColumnOrder = (
+  columnIds: string[],
+  fixedLeadingColumnIds: string[] = [],
+) =>
+  normalizeTableColumnOrder({
+    columnIds,
+    fixedLeadingColumnIds,
+  });
+
+export const normalizeTableColumnOrder = ({
+  columnIds,
+  fixedLeadingColumnIds = [],
+  storedColumnOrder,
+}: NormalizeTableColumnOrderInput) => {
+  const availableColumnIds = new Set(columnIds);
+  const seenColumnIds = new Set<string>();
+  const normalizedOrder: string[] = [];
+
+  for (const columnId of fixedLeadingColumnIds) {
+    if (!availableColumnIds.has(columnId) || seenColumnIds.has(columnId)) {
+      continue;
+    }
+
+    normalizedOrder.push(columnId);
+    seenColumnIds.add(columnId);
+  }
+
+  for (const columnId of storedColumnOrder ?? []) {
+    if (!availableColumnIds.has(columnId) || seenColumnIds.has(columnId)) {
+      continue;
+    }
+
+    normalizedOrder.push(columnId);
+    seenColumnIds.add(columnId);
+  }
+
+  for (const columnId of columnIds) {
+    if (seenColumnIds.has(columnId)) {
+      continue;
+    }
+
+    normalizedOrder.push(columnId);
+    seenColumnIds.add(columnId);
+  }
+
+  return normalizedOrder;
+};
+
+export const reorderTableColumnOrder = ({
+  columnIds,
+  fixedLeadingColumnIds = [],
+  storedColumnOrder = [],
+  activeColumnId,
+  overColumnId,
+}: ReorderTableColumnOrderInput) => {
+  const normalizedOrder = normalizeTableColumnOrder({
+    columnIds,
+    fixedLeadingColumnIds,
+    storedColumnOrder,
+  });
+  const fixedColumnIds = new Set(fixedLeadingColumnIds);
+
+  if (
+    activeColumnId === overColumnId ||
+    fixedColumnIds.has(activeColumnId) ||
+    fixedColumnIds.has(overColumnId)
+  ) {
+    return normalizedOrder;
+  }
+
+  const movableColumnOrder = normalizedOrder.filter(
+    (columnId) => !fixedColumnIds.has(columnId),
+  );
+  const activeIndex = movableColumnOrder.indexOf(activeColumnId);
+  const overIndex = movableColumnOrder.indexOf(overColumnId);
+
+  if (activeIndex === -1 || overIndex === -1) {
+    return normalizedOrder;
+  }
+
+  const nextMovableOrder = [...movableColumnOrder];
+  const [movedColumnId] = nextMovableOrder.splice(activeIndex, 1);
+  nextMovableOrder.splice(overIndex, 0, movedColumnId);
+
+  return [...fixedLeadingColumnIds, ...nextMovableOrder];
+};
+
+export const resolveTableColumnOrderUpdate = ({
+  columnIds,
+  fixedLeadingColumnIds = [],
+  storedColumnOrder = [],
+  nextColumnOrder,
+}: ResolveTableColumnOrderUpdateInput) => {
+  const normalizedCurrentOrder = normalizeTableColumnOrder({
+    columnIds,
+    fixedLeadingColumnIds,
+    storedColumnOrder,
+  });
+
+  return normalizeTableColumnOrder({
+    columnIds,
+    fixedLeadingColumnIds,
+    storedColumnOrder: applyUpdater(nextColumnOrder, normalizedCurrentOrder),
+  });
+};
+
+export const areColumnOrdersEqual = (
+  leftColumnOrder: string[],
+  rightColumnOrder: string[],
+) =>
+  leftColumnOrder.length === rightColumnOrder.length &&
+  leftColumnOrder.every(
+    (columnId, columnIndex) => columnId === rightColumnOrder[columnIndex],
+  );
+
+export const buildEntityTableId = (
+  scope: 'data' | 'structure-columns' | 'structure-indexes',
+  databaseId: string | null,
+  schemaName: string | null,
+  entityName: string | null,
+) =>
+  `${scope}:${databaseId ?? 'unknown'}:${schemaName ?? 'unknown'}:${entityName ?? 'unknown'}`;
+
+export const buildQueryTableId = (
+  databaseId: string | null,
+  columnIds: string[],
+) => `query:${databaseId ?? 'unknown'}:${JSON.stringify(columnIds)}`;

package/src/ui/use-sqlite-requests.ts

@@ -0,0 +1,205 @@
+import { useCallback, useEffect, useRef } from 'react';
+import type { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import { encodeSqliteBridgeValue } from '../shared/bridge-values';
+import type { SqliteEventMap } from '../shared/protocol';
+import type {
+  SqliteDatabaseInfo,
+  SqliteQueryParams,
+  SqliteQueryResult,
+  SqliteScriptResult,
+} from '../shared/types';
+import { newRequestId, withTimeout } from './utils';
+
+type PendingListResolver = (
+  payload: SqliteEventMap['sqlite:list-databases:result'],
+) => void;
+type PendingQueryResolver = (
+  payload: SqliteEventMap['sqlite:query:result'],
+) => void;
+type PendingScriptResolver = (
+  payload: SqliteEventMap['sqlite:execute-script:result'],
+) => void;
+
+export const useSqliteRequests = (
+  client: RozeniteDevToolsClient<SqliteEventMap> | null,
+) => {
+  const listResolversRef = useRef(new Map<string, PendingListResolver>());
+  const queryResolversRef = useRef(new Map<string, PendingQueryResolver>());
+  const scriptResolversRef = useRef(new Map<string, PendingScriptResolver>());
+
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    const listSubscription = client.onMessage(
+      'sqlite:list-databases:result',
+      (payload) => {
+        const resolve = listResolversRef.current.get(payload.requestId);
+        if (!resolve) {
+          return;
+        }
+
+        listResolversRef.current.delete(payload.requestId);
+        resolve(payload);
+      },
+    );
+
+    const querySubscription = client.onMessage(
+      'sqlite:query:result',
+      (payload) => {
+        const resolve = queryResolversRef.current.get(payload.requestId);
+        if (!resolve) {
+          return;
+        }
+
+        queryResolversRef.current.delete(payload.requestId);
+        resolve(payload);
+      },
+    );
+
+    const scriptSubscription = client.onMessage(
+      'sqlite:execute-script:result',
+      (payload) => {
+        const resolve = scriptResolversRef.current.get(payload.requestId);
+        if (!resolve) {
+          return;
+        }
+
+        scriptResolversRef.current.delete(payload.requestId);
+        resolve(payload);
+      },
+    );
+
+    return () => {
+      listSubscription.remove();
+      querySubscription.remove();
+      scriptSubscription.remove();
+      listResolversRef.current.clear();
+      queryResolversRef.current.clear();
+      scriptResolversRef.current.clear();
+    };
+  }, [client]);
+
+  const requestDatabases = useCallback(async (): Promise<
+    SqliteDatabaseInfo[]
+  > => {
+    if (!client) {
+      return [];
+    }
+
+    const requestId = newRequestId();
+    const pending = new Promise<SqliteEventMap['sqlite:list-databases:result']>(
+      (resolve) => {
+        listResolversRef.current.set(requestId, resolve);
+      },
+    );
+
+    client.send('sqlite:list-databases', { requestId });
+
+    const response = await withTimeout(
+      pending,
+      8000,
+      'Timeout fetching databases.',
+    );
+
+    if (response.error) {
+      throw new Error(response.error);
+    }
+
+    return response.databases;
+  }, [client]);
+
+  const requestQuery = useCallback(
+    async (input: {
+      databaseId: string;
+      sql: string;
+      params?: SqliteQueryParams;
+    }): Promise<SqliteQueryResult> => {
+      if (!client) {
+        throw new Error('Rozenite client is not connected.');
+      }
+
+      const requestId = newRequestId();
+      const pending = new Promise<SqliteEventMap['sqlite:query:result']>(
+        (resolve) => {
+          queryResolversRef.current.set(requestId, resolve);
+        },
+      );
+
+      client.send('sqlite:query', {
+        requestId,
+        databaseId: input.databaseId,
+        sql: input.sql,
+        params:
+          input.params === undefined
+            ? undefined
+            : (encodeSqliteBridgeValue(input.params) as SqliteQueryParams),
+      });
+
+      const response = await withTimeout(
+        pending,
+        15000,
+        'Timeout executing SQL query.',
+      );
+
+      if (response.error) {
+        throw new Error(response.error);
+      }
+
+      if (!response.result) {
+        throw new Error('The query completed without a result payload.');
+      }
+
+      return response.result;
+    },
+    [client],
+  );
+
+  const requestScriptExecution = useCallback(
+    async (input: {
+      databaseId: string;
+      sql: string;
+    }): Promise<SqliteScriptResult> => {
+      if (!client) {
+        throw new Error('Rozenite client is not connected.');
+      }
+
+      const requestId = newRequestId();
+      const pending = new Promise<
+        SqliteEventMap['sqlite:execute-script:result']
+      >((resolve) => {
+        scriptResolversRef.current.set(requestId, resolve);
+      });
+
+      client.send('sqlite:execute-script', {
+        requestId,
+        databaseId: input.databaseId,
+        sql: input.sql,
+      });
+
+      const response = await withTimeout(
+        pending,
+        30000,
+        'Timeout executing SQL script.',
+      );
+
+      if (response.error) {
+        throw new Error(response.error);
+      }
+
+      if (!response.result) {
+        throw new Error('The script completed without a result payload.');
+      }
+
+      return response.result;
+    },
+    [client],
+  );
+
+  return {
+    requestDatabases,
+    requestQuery,
+    requestScriptExecution,
+  };
+};

package/src/ui/utils.ts

@@ -0,0 +1,107 @@
+export function newRequestId(): string {
+  return `${Date.now().toString(16)}-${Math.random().toString(16).slice(2)}`;
+}
+
+export async function withTimeout<T>(
+  promise: Promise<T>,
+  ms: number,
+  message: string,
+): Promise<T> {
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+
+  try {
+    return await Promise.race([
+      promise,
+      new Promise<T>((_, reject) => {
+        timeout = setTimeout(() => reject(new Error(message)), ms);
+      }),
+    ]);
+  } finally {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+  }
+}
+
+export const formatDuration = (durationMs?: number | null) => {
+  if (durationMs == null || Number.isNaN(durationMs)) {
+    return '—';
+  }
+
+  if (durationMs < 1) {
+    return `${durationMs.toFixed(2)} ms`;
+  }
+
+  if (durationMs < 100) {
+    return `${durationMs.toFixed(1)} ms`;
+  }
+
+  return `${Math.round(durationMs)} ms`;
+};
+
+export const formatNumber = (value?: number | null) => {
+  if (value == null || Number.isNaN(value)) {
+    return '—';
+  }
+
+  return new Intl.NumberFormat().format(value);
+};
+
+export const truncateText = (value: string, maxLength = 180) => {
+  if (value.length <= maxLength) {
+    return value;
+  }
+
+  return `${value.slice(0, maxLength - 1)}…`;
+};
+
+export const copyToClipboard = async (text: string) => {
+  if (typeof navigator !== 'undefined' && navigator.clipboard) {
+    await navigator.clipboard.writeText(text);
+    return true;
+  }
+
+  if (typeof document === 'undefined') {
+    return false;
+  }
+
+  try {
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    textArea.style.position = 'fixed';
+    textArea.style.top = '0';
+    textArea.style.left = '-9999px';
+    textArea.style.opacity = '0';
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+    const success = document.execCommand('copy');
+    document.body.removeChild(textArea);
+    return success;
+  } catch {
+    return false;
+  }
+};
+
+export const downloadTextFile = (fileName: string, content: string) => {
+  if (typeof document === 'undefined') {
+    return false;
+  }
+
+  const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
+  const objectUrl = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = objectUrl;
+  anchor.download = fileName;
+  document.body.appendChild(anchor);
+  anchor.click();
+  document.body.removeChild(anchor);
+  URL.revokeObjectURL(objectUrl);
+  return true;
+};
+
+export const slugifyFileName = (value: string) =>
+  value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '') || 'sqlite-export';