sqlite-wasm-viewer 0.1.0

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "sqlite-wasm-viewer",
+  "version": "0.1.0",
+  "description": "A SQLite OPFS viewer that allows to inspect the database and run SQL commands",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "babel ./src --out-dir ./build",
+    "tsc": "tsc",
+    "start": "nodemon --exec babel-node viewer/src/index.ts",
+    "lint": "eslint ."
+  },
+  "keywords": [],
+  "author": "MysticEggs",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.22.9",
+    "@babel/core": "^7.22.9",
+    "@babel/node": "^7.22.6",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-typescript": "^7.22.5",
+    "@babel/runtime": "^7.22.6",
+    "@types/wicg-file-system-access": "^2020.9.6",
+    "eslint": "^8.46.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-import": "^2.28.0",
+    "eslint-plugin-json": "^3.1.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "nodemon": "^3.0.1",
+    "prettier": "^3.0.1",
+    "typescript": "^5.1.6"
+  },
+  "packageManager": "yarn@3.6.1",
+  "peerDependencies": {
+    "@sqlite.org/sqlite-wasm": "^3.x.x"
+  }
+}

package/src/DbViewerWorker.ts

@@ -0,0 +1,115 @@
+// @ts-expect-error Missing types
+import sqlite3InitModule from '@sqlite.org/sqlite-wasm';
+import { DbWorkerInput, DbWorkerOutput } from './types';
+
+export class DbViewerWorker {
+    private initialized = false;
+
+    sqlite: any;
+
+    sqliteCApi: any;
+
+    sqliteDb: any;
+
+    constructor() {
+        this.initialized = false;
+        this.sqliteDb = null;
+    }
+
+    post(message: MessageEvent<DbWorkerInput>) {
+        if (message.data.type !== 'init' && !this.initialized) {
+            throw new Error("DbWorker not initialized with 'init' message");
+        }
+
+        if (message.data.type === 'init') {
+            if (this.initialized) {
+                throw new Error('DbWorker already initialized');
+            }
+
+            sqlite3InitModule().then(async (sqlite3: any) => {
+                this.sqlite = sqlite3;
+                this.sqliteCApi = sqlite3.capi;
+
+                this.initialized = true;
+                this.sendMessage({ type: 'onReady' });
+            });
+        }
+
+        switch (message.data.type) {
+            case 'readSchema':
+                {
+                    const { path } = message.data;
+
+                    this.sqliteDb = new this.sqlite.oo1.OpfsDb(path, 'c');
+
+                    const sql = `SELECT name, sql FROM sqlite_master WHERE type='table' ORDER BY name`;
+
+                    const result = this.sqliteDb.exec({
+                        sql,
+                        returnValue: 'resultRows',
+                    });
+
+                    this.sendMessage({
+                        type: 'onSchema',
+                        schema: result,
+                        dbName: path,
+                    });
+                }
+                break;
+            case 'query':
+                {
+                    const { sql, parameters } = message.data.query;
+
+                    const rawStatement = this.sqliteDb.prepare(sql);
+
+                    const isReader =
+                        this.sqliteCApi.sqlite3_column_count(rawStatement) > 1;
+                    const resultRows: any[] = [];
+                    try {
+                        if (parameters?.length > 0) {
+                            rawStatement.bind(parameters);
+                        }
+
+                        while (rawStatement.step()) {
+                            // Kysely expects the results to be in the object mode
+                            const row = rawStatement.get({});
+                            resultRows.push(row);
+                        }
+                    } finally {
+                        rawStatement.finalize();
+                    }
+
+                    if (isReader) {
+                        this.sendMessage({
+                            type: 'onQuery',
+                            result: { resultRows, tableName: '' },
+                            label: message.data.label,
+                        });
+                    } else {
+                        const changes = this.sqliteCApi.sqlite3_changes(
+                            this.sqliteDb.pointer
+                        );
+                        const lastInsertRowid =
+                            this.sqliteCApi.sqlite3_last_insert_rowid(
+                                this.sqliteDb.pointer
+                            );
+
+                        const updates = { changes, lastInsertRowid };
+
+                        this.sendMessage({
+                            type: 'onQuery',
+                            result: { resultRows, updates, tableName: '' },
+                        });
+                    }
+                }
+                break;
+
+            default:
+                break;
+        }
+    }
+
+    sendMessage(message: DbWorkerOutput) {
+        postMessage(message);
+    }
+}

package/src/DbWorker.ts

@@ -0,0 +1,8 @@
+import { DbViewerWorker } from './DbViewerWorker';
+import { DbWorkerInput } from './types';
+
+const dbWorker = new DbViewerWorker();
+
+onmessage = (message: MessageEvent<DbWorkerInput>) => {
+    dbWorker.post(message);
+};

package/src/ListVirtualizer.ts

@@ -0,0 +1,125 @@
+interface Config {
+    width: number;
+    height: number;
+    totalRows: number;
+    itemHeight: number;
+    container: HTMLElement;
+    contentRoot: HTMLElement;
+    generatorFn: (index: number) => HTMLElement | null;
+}
+
+export class ListVirtualizer {
+    private height: number;
+
+    private itemHeight: number;
+
+    private totalRows: number;
+
+    private container: HTMLElement;
+
+    private contentRoot: HTMLElement;
+
+    private lastRepaintY: number;
+
+    private screenItemsLen: number;
+
+    private scrollTop: number;
+
+    private generatorFn: (index: number) => HTMLElement | null;
+
+    constructor(config: Config) {
+        this.height = config.height;
+        this.itemHeight = config.itemHeight;
+
+        this.lastRepaintY = 0;
+
+        this.scrollTop = 0;
+
+        this.generatorFn = config.generatorFn;
+        this.totalRows = config.totalRows;
+
+        this.container = config.container;
+        this.contentRoot = config.contentRoot;
+
+        this.renderChunk(0);
+
+        this.container.addEventListener('scroll', this.handleScroll.bind(this));
+    }
+
+    handleScroll(e: MouseEvent) {
+        const { scrollTop } = e.target as HTMLElement;
+
+        this.scrollTop = scrollTop;
+        const screenItemsLen = Math.ceil(this.height / this.itemHeight);
+        const maxBuffer = this.screenItemsLen * this.itemHeight;
+        let first = Math.ceil(scrollTop / this.itemHeight - screenItemsLen);
+        first = first < 0 ? 0 : first;
+        if (
+            !this.lastRepaintY ||
+            Math.abs(scrollTop - this.lastRepaintY) > maxBuffer
+        ) {
+            this.renderChunk(first);
+            this.lastRepaintY = scrollTop;
+        }
+
+        e.preventDefault();
+    }
+
+    renderChunk(fromPos: number) {
+        this.screenItemsLen = Math.ceil(this.height / this.itemHeight);
+
+        // Cache 4 times the number of items that fit in the container viewport
+        const cachedItemsLen = this.screenItemsLen * 3;
+
+        const fragment = document.createDocumentFragment();
+
+        let itemCount = fromPos + cachedItemsLen;
+        if (itemCount > this.totalRows) {
+            itemCount = this.totalRows;
+        }
+
+        if (fromPos > 0) {
+            const offsetterRowEl = document.createElement('tr');
+            const offsetterEl = document.createElement('td');
+            offsetterEl.style.height = `${fromPos * this.itemHeight}px`;
+            offsetterRowEl.appendChild(offsetterEl);
+
+            fragment.appendChild(offsetterRowEl);
+        }
+
+        for (let i = fromPos; i < itemCount; i++) {
+            const item = this.generatorFn(i);
+
+            if (!item) {
+                break;
+            }
+
+            fragment.appendChild(item);
+        }
+
+        if (itemCount < this.totalRows) {
+            const bottomOffsetterRow = document.createElement('tr');
+            const offsetterEl = document.createElement('td');
+            offsetterEl.style.height = `${
+                (this.totalRows - itemCount) * this.itemHeight
+            }px`;
+            bottomOffsetterRow.appendChild(offsetterEl);
+
+            fragment.appendChild(bottomOffsetterRow);
+        }
+
+        this.contentRoot.innerHTML = '';
+        this.contentRoot.appendChild(fragment);
+    }
+
+    public setRowCount(rowCount: number) {
+        this.totalRows = rowCount;
+
+        let first = Math.ceil(
+            this.scrollTop / this.itemHeight - this.screenItemsLen
+        );
+        first = first < 0 ? 0 : first;
+
+        this.renderChunk(first);
+    }
+}

package/src/QueryRunner.ts

@@ -0,0 +1,36 @@
+import { Database } from './types';
+
+export interface Query {
+    sql: string;
+    parameters: any[];
+}
+
+type Listener = (query: Query) => void;
+
+export class QueryRunner {
+    private listeners: Listener[];
+
+    constructor(private db: Database) {
+        this.listeners = [];
+    }
+
+    runQuery(query: Query, label?: string) {
+        this.db.post({ type: 'query', query, label });
+
+        this.listeners.forEach((listener) => {
+            listener(query);
+        });
+    }
+
+    addListener(listener: Listener): () => void {
+        if (this.listeners.indexOf(listener) !== -1) {
+            throw new Error('Listener is already added');
+        }
+
+        this.listeners.push(listener);
+
+        return () => {
+            this.listeners.splice(this.listeners.indexOf(listener), 1);
+        };
+    }
+}

package/src/dbScanner.ts

@@ -0,0 +1,33 @@
+export async function collectDbFiles(
+    isSqliteDatabase: (fileName: string) => boolean
+): Promise<string[]> {
+    const root = await navigator.storage.getDirectory();
+
+    const dbFileHandlers = await getDbFiles(root, isSqliteDatabase);
+
+    return Promise.all(
+        dbFileHandlers.map((dbFile) => {
+            return root.resolve(dbFile).then((parts) => parts?.join('/') || '');
+        })
+    );
+}
+
+async function getDbFiles(
+    root: FileSystemDirectoryHandle,
+    isSqliteDatabase: (fileName: string) => boolean
+): Promise<FileSystemFileHandle[]> {
+    let dbs: FileSystemFileHandle[] = [];
+
+    for await (const handle of root.values()) {
+        const child = handle;
+
+        if (child.kind === 'directory') {
+            const childDbs = await getDbFiles(child, isSqliteDatabase);
+            dbs = dbs.concat(dbs, ...childDbs);
+        } else if (isSqliteDatabase(child.name)) {
+            dbs.push(child);
+        }
+    }
+
+    return dbs;
+}

package/src/index.ts

@@ -0,0 +1,157 @@
+import './styles.css';
+
+import { Database, DbWorkerOutput } from './types';
+import { TableView } from './views/TableView/TableView';
+import { ExecuteSQLView } from './views/ExecuteSQLView/ExecuteSQLView';
+import { QueryRunner } from './QueryRunner';
+import { initSqlLogView } from './views/SqlLogView/SqlLogView';
+import { DatabaseItem, ExplorerView } from './views/ExplorerView/ExplorerView';
+import { collectDbFiles } from './dbScanner';
+import { EditCellView } from './views/EditCellView/EditCellView';
+import { initState } from './viewerState';
+
+let viewer: HTMLDivElement | null = null;
+
+let dbListEl: HTMLDivElement | null = null;
+
+let tableViewer: TableView | null = null;
+
+let middlePanel: HTMLDivElement | null = null;
+
+let rightPanel: HTMLDivElement | null = null;
+
+let explorerView: ExplorerView | null = null;
+
+let queryRunner: QueryRunner | null = null;
+
+type Config = {
+    isSqliteDatabase: (fileName: string) => boolean;
+};
+
+const defaultSqliteExtension = ['db', 'sqlite'];
+
+const config: Config = {
+    isSqliteDatabase: (filename: string) => {
+        return defaultSqliteExtension.some((ext) =>
+            filename.endsWith(`.${ext}`)
+        );
+    },
+};
+
+export function setConfig(userConfig: Partial<Config>) {
+    Object.assign(config, userConfig);
+    Object.freeze(config);
+}
+
+export function showViewer(): void {
+    if (!viewer) {
+        viewer = document.createElement('div');
+        viewer.id = 'viewer';
+
+        initState(viewer);
+
+        const closeBtn = document.createElement('div');
+        closeBtn.id = 'close_btn';
+        closeBtn.innerText = 'Close';
+        closeBtn.onclick = () => {
+            hideViewer();
+        };
+        viewer.appendChild(closeBtn);
+
+        dbListEl = document.createElement('div');
+        dbListEl.id = 'db_list';
+
+        viewer.appendChild(dbListEl);
+
+        // Middle Panel
+        middlePanel = document.createElement('div');
+        middlePanel.id = 'middle_panel';
+
+        const tableViewEl = document.createElement('div');
+        tableViewEl.id = 'table_view';
+        middlePanel.appendChild(tableViewEl);
+
+        viewer.append(middlePanel);
+
+        // Right Panel
+        rightPanel = document.createElement('div');
+        rightPanel.id = 'right_panel';
+
+        const executeSqlView = new ExecuteSQLView(rightPanel);
+
+        const editCellView = new EditCellView(viewer, rightPanel);
+
+        viewer.append(rightPanel);
+
+        const worker = new Worker(new URL('DbWorker.ts', import.meta.url), {
+            type: 'module',
+        });
+
+        explorerView = new ExplorerView(dbListEl);
+
+        const collectDbFilesPromise = collectDbFiles(config.isSqliteDatabase);
+
+        const dbs: { [dbFilepath: string]: DatabaseItem } = {};
+        worker.onmessage = (message: MessageEvent<DbWorkerOutput>): void => {
+            if (message.data.type === 'onReady') {
+                collectDbFilesPromise.then((dbFiles) => {
+                    dbFiles.forEach((dbFile) => {
+                        const dbFilepath = dbFile;
+                        const dbName = dbFile;
+                        dbs[dbFilepath] = {
+                            filename: dbName,
+                            tables: [],
+                        };
+
+                        worker.postMessage({
+                            type: 'readSchema',
+                            path: dbFile,
+                        });
+                    });
+                });
+            } else if (message.data.type === 'onSchema') {
+                const tables = message.data.schema.map((tableSchema) => {
+                    return tableSchema[0];
+                });
+
+                dbs[message.data.dbName].tables = tables;
+
+                explorerView?.addDatabaseItem(dbs[message.data.dbName]);
+            } else if (message.data.type === 'onQuery') {
+                if (message.data.label === 'tableView') {
+                    tableViewer?.setTableResults(
+                        message.data.result.resultRows || []
+                    );
+                }
+            }
+        };
+
+        const db: Database = {
+            post: (message) => {
+                worker.postMessage(message);
+            },
+            on: (message) => {
+                worker.onmessage?.(message);
+            },
+        };
+
+        queryRunner = new QueryRunner(db);
+
+        initSqlLogView(rightPanel, queryRunner);
+
+        tableViewer = new TableView(viewer, tableViewEl, queryRunner);
+
+        executeSqlView.setDb(queryRunner);
+        editCellView.setDb(queryRunner);
+
+        worker.postMessage({ type: 'init' });
+    }
+
+    document.body.appendChild(viewer);
+}
+
+export function hideViewer(): void {
+    if (viewer) {
+        document.body.removeChild(viewer);
+    }
+}

package/src/styles.css

@@ -0,0 +1,65 @@
+#viewer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: whitesmoke;
+    display: flex;
+    padding: 10px;
+    padding-top: 20px;
+    gap: 8px;
+}
+
+#viewer * {
+    all: revert;
+}
+
+#viewer .viewHeader {
+    max-height: 20px;
+    flex-basis: 20px;
+    line-height: 1.1rem;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background-color: lightgray;
+}
+
+#viewer #close_btn {
+    position: absolute;
+    left: 10px;
+    top: 0px;
+    cursor: pointer;
+}
+
+#viewer #db_list {
+    width: 200px;
+    padding: 5px;
+    background-color: darkgray;
+    display: flex;
+    flex-direction: column;
+}
+
+#viewer #tree_root {
+    flex-grow: 1;
+    padding: 5px;
+    background-color: darkgray;
+}
+
+#viewer #middle_panel {
+    background-color: darkgray;
+    flex: 1;
+    flex-basis: 800px;
+    display: flex;
+    flex-direction: column;
+}
+
+#viewer #right_panel {
+    padding: 5px;
+    background-color: darkgray;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}

package/src/types.ts

@@ -0,0 +1,34 @@
+export type DbWorkerInput =
+    | {
+          readonly type: 'init';
+      }
+    | {
+          readonly type: 'query';
+          readonly query: {
+              sql: string;
+              parameters: ReadonlyArray<unknown>;
+          };
+          label?: string;
+      }
+    | {
+          readonly type: 'readSchema';
+          readonly path: string;
+      };
+
+export type DbWorkerOutput =
+    | { readonly type: 'onReady' }
+    | { readonly type: 'onSchema'; dbName: string; schema: string[] }
+    | {
+          readonly type: 'onQuery';
+          readonly result: {
+              resultRows?: any[];
+              tableName: string;
+              updates?: { changes: any[]; lastInsertRowid: number };
+          };
+          label?: string;
+      };
+
+export type Database = {
+    post: (message: DbWorkerInput) => void;
+    on: (message: MessageEvent<DbWorkerOutput>) => void;
+};

package/src/viewerState.ts

@@ -0,0 +1,49 @@
+export interface SelectedCell {
+    value: string;
+    tableName: string;
+    columnName: string;
+    cellRowId: string;
+}
+
+export class ViewerState {
+    private static _instance: ViewerState;
+
+    static get instance(): ViewerState {
+        return ViewerState._instance;
+    }
+
+    selectedCell: SelectedCell | undefined;
+
+    selectedTable: string;
+
+    hasChanges = false;
+
+    constructor(private viewerElem: HTMLElement) {
+        ViewerState._instance = this;
+    }
+
+    setSelectedCell(cell: SelectedCell) {
+        this.selectedCell = cell;
+
+        const event = new CustomEvent('cellSelected', { detail: cell });
+        this.viewerElem.dispatchEvent(event);
+    }
+
+    setSelectedTable(tableName: string) {
+        this.selectedTable = tableName;
+
+        const event = new CustomEvent('tableSelected', { detail: tableName });
+        this.viewerElem.dispatchEvent(event);
+    }
+
+    setHasChanges(hasChanges: boolean) {
+        this.hasChanges = hasChanges;
+
+        const event = new CustomEvent('hasChanges', { detail: hasChanges });
+        this.viewerElem.dispatchEvent(event);
+    }
+}
+
+export function initState(viewerElem: HTMLElement) {
+    return new ViewerState(viewerElem);
+}