sqlite-wasm-viewer 0.1.0 → 1.0.0

package/src/index.ts

@@ -1,157 +0,0 @@
-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

@@ -1,65 +0,0 @@
-#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

@@ -1,34 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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);
-}

package/src/views/EditCellView/EditCellView.ts

@@ -1,74 +0,0 @@
-import { QueryRunner } from '../../QueryRunner';
-import { ViewerState } from '../../viewerState';
-
-import './styles.css';
-
-interface CurrentCell {
-    tableName: string;
-    columnName: string;
-    cellRowId: string;
-}
-
-export class EditCellView {
-    queryRunner: QueryRunner | undefined;
-
-    textArea: HTMLTextAreaElement;
-
-    currentCell: CurrentCell | undefined;
-
-    constructor(
-        private viewerElem: HTMLElement,
-        private rootEl: HTMLDivElement
-    ) {
-        this.buildDom();
-
-        viewerElem.addEventListener('cellSelected', (event) => {
-            const { detail: cell } = event;
-            this.currentCell = cell;
-            this.textArea.value = cell.value;
-            this.textArea.select();
-        });
-    }
-
-    private buildDom() {
-        const container = document.createElement('div');
-        container.id = 'execute_sql_container';
-
-        const header = document.createElement('div');
-        header.className = 'viewHeader';
-        header.innerText = 'Edit Cell';
-        container.appendChild(header);
-
-        this.textArea = document.createElement('textarea');
-        this.textArea.id = 'execute_sql_textarea';
-        container.appendChild(this.textArea);
-
-        const executeBtn = document.createElement('button');
-        executeBtn.innerText = 'Apply';
-        executeBtn.onclick = this.handleApplyEdit.bind(this);
-        container.appendChild(executeBtn);
-
-        this.rootEl.appendChild(container);
-    }
-
-    private handleApplyEdit() {
-        if (this.textArea.value) {
-            if (!ViewerState.instance.hasChanges) {
-                this.queryRunner?.runQuery({
-                    sql: 'SAVEPOINT "RESTOREPOINT"',
-                    parameters: [],
-                });
-            }
-            this.queryRunner?.runQuery({
-                sql: `UPDATE ${this.currentCell?.tableName} SET "${this.currentCell?.columnName}"=? WHERE "_rowid_"='${this.currentCell?.cellRowId}'`,
-                parameters: [this.textArea.value],
-            });
-
-            ViewerState.instance.setHasChanges(true);
-        }
-    }
-
-    setDb(queryRunner: QueryRunner) {
-        this.queryRunner = queryRunner;
-    }
-}

package/src/views/EditCellView/styles.css

@@ -1,23 +0,0 @@
-#execute_sql_container {
-    display: flex;
-    flex-direction: column;
-}
-
-#execute_sql_editor {
-    position: relative;
-    background-color: white;
-    height: 300px;
-}
-
-#execute_sql_textarea {
-    resize: none;
-    height: 300px;
-    background-color: white;
-    overflow: auto;
-    white-space: nowrap;
-    font-size: 10pt;
-    font-family: monospace;
-    line-height: 1.5;
-    tab-size: 2;
-    caret-color: black;
-}

package/src/views/ExecuteSQLView/ExecuteSQLView.ts

@@ -1,49 +0,0 @@
-import './styles.css';
-
-import { QueryRunner } from 'src/QueryRunner';
-
-export class ExecuteSQLView {
-    queryRunner: QueryRunner | undefined;
-
-    textArea: HTMLTextAreaElement;
-
-    highlighting: HTMLElement;
-
-    constructor(private rootEl: HTMLDivElement) {
-        this.buildDom();
-    }
-
-    private buildDom() {
-        const container = document.createElement('div');
-        container.id = 'execute_sql_container';
-
-        const header = document.createElement('div');
-        header.className = 'viewHeader';
-        header.innerText = 'Execute SQL';
-        container.appendChild(header);
-
-        this.textArea = document.createElement('textarea');
-        this.textArea.id = 'execute_sql_textarea';
-        container.appendChild(this.textArea);
-
-        const executeBtn = document.createElement('button');
-        executeBtn.innerText = 'Execute SQL';
-        executeBtn.onclick = this.handleExecuteSql.bind(this);
-        container.appendChild(executeBtn);
-
-        this.rootEl.appendChild(container);
-    }
-
-    private handleExecuteSql() {
-        if (this.textArea.value) {
-            this.queryRunner?.runQuery({
-                sql: this.textArea.value,
-                parameters: [],
-            });
-        }
-    }
-
-    setDb(queryRunner: QueryRunner) {
-        this.queryRunner = queryRunner;
-    }
-}

package/src/views/ExecuteSQLView/styles.css

@@ -1,47 +0,0 @@
-#execute_sql_container {
-    display: flex;
-    flex-direction: column;
-}
-
-#execute_sql_editor {
-    position: relative;
-    background-color: white;
-    height: 300px;
-}
-
-#execute_sql_textarea, #execute_sql_highlighting {
-    resize: none;
-    height: 300px;
-    background-color: white;
-    overflow: auto;
-    white-space: nowrap;
-    font-size: 10pt;
-    font-family: monospace;
-    line-height: 1.5;
-    tab-size: 2;
-    caret-color: black;
-}
-
-#execute_sql_highlighting {
-    z-index: 0;
-    margin: 0;
-    padding: 2px;
-}
-
-.highlighting {
-    color: blue;
-}
-
-.sql-hl-keyword {
-    color: purple;
-    /* font-weight: 600; */
-}
-
-.sql-hl-special {
-    color: black;
-}
-
-.sql-hl-string {
-    color: red;
-    /* font-weight: 600; */
-}

package/src/views/ExplorerView/ExplorerView.ts

@@ -1,94 +0,0 @@
-import { ViewerState } from '../../viewerState';
-
-import './styles.css';
-
-export interface DatabaseItem {
-    filename: string;
-    tables: string[];
-}
-
-export class ExplorerView {
-    private containerEl: HTMLElement;
-
-    private expandedItems: { [dbFilepath: string]: boolean } = {};
-
-    private dbs: DatabaseItem[];
-
-    private selectedItem: HTMLElement | null = null;
-
-    constructor(rootEl: HTMLDivElement) {
-        this.dbs = [];
-
-        const dbListHeader = document.createElement('div');
-        dbListHeader.className = 'viewHeader';
-        dbListHeader.innerText = 'Database List';
-
-        rootEl.appendChild(dbListHeader);
-
-        this.containerEl = document.createElement('div');
-        this.containerEl.id = 'explorer_tree';
-        rootEl.appendChild(this.containerEl);
-    }
-
-    public addDatabaseItem(databaseItem: DatabaseItem): void {
-        this.dbs.push(databaseItem);
-
-        this.addDbToDom(databaseItem);
-
-        if (this.selectedItem === null) {
-            const firstTable = document.querySelector(
-                '#explorer_tree > .table'
-            ) as HTMLElement | undefined;
-            if (firstTable) {
-                this.selectTable(firstTable);
-            }
-        }
-    }
-
-    private addDbToDom(databaseItem: DatabaseItem) {
-        const dbRoot = document.createDocumentFragment();
-
-        const dbItem = document.createElement('div');
-        dbItem.innerText = databaseItem.filename;
-        dbItem.className = 'db';
-
-        const expandArrow = document.createElement('div');
-        expandArrow.className = 'expand';
-        expandArrow.innerText = '>';
-        expandArrow.style.cursor = 'pointer';
-        expandArrow.onclick = () => {
-            this.expandedItems[databaseItem.filename] =
-                !this.expandedItems[databaseItem.filename];
-
-            expandArrow.classList.toggle('expanded');
-        };
-        expandArrow.classList.add('expanded');
-        dbItem.appendChild(expandArrow);
-
-        dbRoot.appendChild(dbItem);
-        databaseItem.tables.forEach((table) => {
-            const tableItem = document.createElement('div');
-            tableItem.innerText = table;
-            tableItem.className = 'table';
-            tableItem.onclick = () => {
-                this.selectTable(tableItem);
-            };
-
-            dbRoot.appendChild(tableItem);
-        });
-
-        this.containerEl.appendChild(dbRoot);
-    }
-
-    private selectTable(tableEl: HTMLElement | null) {
-        if (tableEl) {
-            const tableName = tableEl.innerText;
-
-            this.selectedItem?.classList.remove('selected');
-            tableEl.classList.add('selected');
-            this.selectedItem = tableEl;
-
-            ViewerState.instance.setSelectedTable(tableName);
-        }
-    }
-}

package/src/views/ExplorerView/styles.css

@@ -1,30 +0,0 @@
-#explorer_tree {
-    padding: 8px;
-    padding-left: 20px;
-}
-
-#explorer_tree > .db {
-    position: relative;
-    text-overflow: ellipsis;
-    overflow-y: clip;
-}
-
-#explorer_tree .expand {
-    position: absolute;
-    top: 0;
-    left: -15px;
-    transition: all .3s ease-in;
-}
-
-#explorer_tree .expanded {
-    transform: rotate(90deg);
-}
-
-#explorer_tree > .table {
-    margin-left: 20px;
-    cursor: pointer;
-}
-
-#explorer_tree > .table.selected {
-    background-color: rgb(128, 128, 128);
-}

package/src/views/SqlLogView/SqlLogView.ts

@@ -1,37 +0,0 @@
-import { Query, QueryRunner } from 'src/QueryRunner';
-import './styles.css';
-
-class SqlLogView {
-    textArea: HTMLTextAreaElement;
-
-    constructor(rootEl: HTMLDivElement, queryRunner: QueryRunner) {
-        queryRunner.addListener(this.handleQueryRun.bind(this));
-
-        const container = document.createElement('div');
-        container.id = 'sql_log_container';
-
-        const header = document.createElement('div');
-        header.className = 'viewHeader';
-        header.innerText = 'SQL Log';
-
-        container.appendChild(header);
-
-        this.textArea = document.createElement('textarea');
-        this.textArea.id = 'query_log_text';
-        this.textArea.readOnly = true;
-        container.appendChild(this.textArea);
-
-        rootEl.appendChild(container);
-    }
-
-    handleQueryRun(query: Query) {
-        this.textArea.value += `${query.sql}\n`;
-    }
-}
-
-export function initSqlLogView(
-    rootEl: HTMLDivElement,
-    queryRunner: QueryRunner
-) {
-    return new SqlLogView(rootEl, queryRunner);
-}

package/src/views/SqlLogView/styles.css

@@ -1,10 +0,0 @@
-#sql_log_container {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-#query_log_text {
-    resize: none;
-    height: 100%;
-}