sqlite-wasm-viewer 1.0.5 → 1.0.9

package/README.md

@@ -37,7 +37,8 @@ showViewer();
 ```
 
 # Development
-A testing app will be available on `http://localhost:9000` after running:
+Run:
 ```
 yarn start
-```
+```
+to start the testing app at `http://localhost:9000`

package/dist/index.js

@@ -98,9 +98,13 @@ function showViewer() {
         dbs[message.data.dbName].tables = tables;
         (_explorerView = explorerView) === null || _explorerView === void 0 ? void 0 : _explorerView.addDatabaseItem(dbs[message.data.dbName]);
       } else if (message.data.type === 'onQuery') {
-        if (message.data.label === 'tableView') {
+        if (message.data.label === 'tableViewColumns') {
           var _tableViewer;
-          (_tableViewer = tableViewer) === null || _tableViewer === void 0 ? void 0 : _tableViewer.setTableResults(message.data.result.resultRows || []);
+          (_tableViewer = tableViewer) === null || _tableViewer === void 0 ? void 0 : _tableViewer.setTableColumns(message.data.result.resultRows || []);
+        }
+        if (message.data.label === 'tableView') {
+          var _tableViewer2;
+          (_tableViewer2 = tableViewer) === null || _tableViewer2 === void 0 ? void 0 : _tableViewer2.setTableResults(message.data.result.resultRows || []);
         }
       }
     };

package/dist/views/ExplorerView/ExplorerView.js

@@ -13,8 +13,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var EXPANDED_EXPLORER_ITEMS_KEY = 'expanded_explorer_items';
 var ExplorerView = /*#__PURE__*/function () {
   function ExplorerView(rootEl) {
+    var _localStorage$getItem;
     _classCallCheck(this, ExplorerView);
     _defineProperty(this, "expandedItems", {});
     _defineProperty(this, "selectedItem", null);
@@ -26,60 +28,102 @@ var ExplorerView = /*#__PURE__*/function () {
     this.containerEl = document.createElement('div');
     this.containerEl.id = 'explorer_tree';
     rootEl.appendChild(this.containerEl);
+    this.expandedItems = JSON.parse((_localStorage$getItem = localStorage.getItem(EXPANDED_EXPLORER_ITEMS_KEY)) !== null && _localStorage$getItem !== void 0 ? _localStorage$getItem : '{}');
   }
   _createClass(ExplorerView, [{
     key: "addDatabaseItem",
     value: function addDatabaseItem(databaseItem) {
       this.dbs.push(databaseItem);
-      this.addDbToDom(databaseItem);
+      this.buildDom();
       if (this.selectedItem === null) {
-        var firstTable = document.querySelector('#explorer_tree > .table');
+        var firstTable = document.querySelector('#explorer_tree .table');
         if (firstTable) {
           this.selectTable(firstTable, databaseItem);
         }
       }
     }
   }, {
-    key: "addDbToDom",
-    value: function addDbToDom(databaseItem) {
+    key: "buildDom",
+    value: function buildDom() {
       var _this = this;
+      this.containerEl.innerHTML = '';
+      this.dbs.forEach(function (db) {
+        _this.buildDbGroupDom(db);
+      });
+    }
+  }, {
+    key: "buildDbGroupDom",
+    value: function buildDbGroupDom(db) {
+      var _this2 = this;
       var dbRoot = document.createDocumentFragment();
       var dbItem = document.createElement('div');
-      dbItem.innerText = databaseItem.filename;
+      dbItem.innerText = db.filename;
       dbItem.className = 'db';
+      var tablesContainer = document.createElement('div');
+      var isExpanded = !(this.expandedItems[db.filename] === false);
+      this.buildExpandArrowDom(dbItem, tablesContainer, db, isExpanded);
+      dbRoot.appendChild(dbItem);
+      db.tables.forEach(function (table) {
+        _this2.buildTableDom(tablesContainer, table, db);
+      });
+      tablesContainer.style.display = isExpanded ? 'block' : 'none';
+      dbRoot.appendChild(tablesContainer);
+      this.containerEl.appendChild(dbRoot);
+    }
+  }, {
+    key: "buildExpandArrowDom",
+    value: function buildExpandArrowDom(itemElem, tablesContainer, db, isExpanded) {
+      var _this3 = this;
       var expandArrow = document.createElement('div');
       expandArrow.className = 'expand';
       expandArrow.innerText = '>';
       expandArrow.style.cursor = 'pointer';
+      if (isExpanded) {
+        expandArrow.classList.add('expanded');
+      }
       expandArrow.onclick = function () {
-        _this.expandedItems[databaseItem.filename] = !_this.expandedItems[databaseItem.filename];
+        _this3.expandedItems[db.filename] = !_this3.expandedItems[db.filename];
+
+        // eslint-disable-next-line no-param-reassign
+        tablesContainer.style.display = _this3.expandedItems[db.filename] ? 'block' : 'none';
         expandArrow.classList.toggle('expanded');
+        localStorage.setItem(EXPANDED_EXPLORER_ITEMS_KEY, JSON.stringify(_this3.expandedItems));
       };
-      expandArrow.classList.add('expanded');
-      dbItem.appendChild(expandArrow);
-      dbRoot.appendChild(dbItem);
-      databaseItem.tables.forEach(function (table) {
-        var tableItem = document.createElement('div');
-        tableItem.className = 'table';
-        tableItem.onclick = function () {
-          _this.selectTable(tableItem, databaseItem);
-        };
-        var tableItemInner = document.createElement('div');
-        tableItemInner.innerText = table;
-        tableItem.appendChild(tableItemInner);
-        dbRoot.appendChild(tableItem);
-      });
-      this.containerEl.appendChild(dbRoot);
+      itemElem.appendChild(expandArrow);
+    }
+  }, {
+    key: "buildTableDom",
+    value: function buildTableDom(tablesContainer, tableName, db) {
+      var _this4 = this,
+        _this$selectedItem,
+        _this$selectedItem2;
+      var tableItem = document.createElement('div');
+      tableItem.className = 'table';
+      tableItem.onclick = function () {
+        _this4.selectTable(tableItem, db);
+      };
+      if (((_this$selectedItem = this.selectedItem) === null || _this$selectedItem === void 0 ? void 0 : _this$selectedItem.tableName) === tableName && ((_this$selectedItem2 = this.selectedItem) === null || _this$selectedItem2 === void 0 ? void 0 : _this$selectedItem2.dbName) === db.filename) {
+        this.selectedItem.tableElem = tableItem;
+        tableItem.classList.add('selected');
+      }
+      var tableItemInner = document.createElement('div');
+      tableItemInner.innerText = tableName;
+      tableItem.appendChild(tableItemInner);
+      tablesContainer.appendChild(tableItem);
     }
   }, {
     key: "selectTable",
     value: function selectTable(tableEl, databaseItem) {
       if (tableEl) {
-        var _this$selectedItem;
+        var _this$selectedItem3;
         var tableName = tableEl.innerText;
-        (_this$selectedItem = this.selectedItem) === null || _this$selectedItem === void 0 ? void 0 : _this$selectedItem.classList.remove('selected');
+        (_this$selectedItem3 = this.selectedItem) === null || _this$selectedItem3 === void 0 ? void 0 : _this$selectedItem3.tableElem.classList.remove('selected');
         tableEl.classList.add('selected');
-        this.selectedItem = tableEl;
+        this.selectedItem = {
+          dbName: databaseItem.filename,
+          tableName: tableEl.innerText,
+          tableElem: tableEl
+        };
         var databasePath = databaseItem.filename;
         _viewerState.ViewerState.instance.setSelectedTable({
           tableName: tableName,

package/dist/views/ExplorerView/styles.css

@@ -16,24 +16,24 @@
     position: absolute;
     top: 0;
     left: -15px;
-    transition: all .3s ease-in;
+    transition: all .1s ease-in;
 }
 
 #explorer_tree .expanded {
     transform: rotate(90deg);
 }
 
-#explorer_tree > .table {
+#explorer_tree .table {
     margin-left: 20px;
     height: 20px;
     cursor: pointer;
 }
 
-#explorer_tree > .table > div {
+#explorer_tree .table > div {
     text-overflow: ellipsis;
     overflow-x: hidden;
 }
 
-#explorer_tree > .table.selected {
+#explorer_tree .table.selected {
     background-color: rgb(128, 128, 128);
 }

package/dist/views/SqlLogView/SqlLogView.js

@@ -13,6 +13,7 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var SqlLogView = /*#__PURE__*/function () {
   function SqlLogView(rootEl, queryRunner) {
+    var _this = this;
     _classCallCheck(this, SqlLogView);
     queryRunner.addListener(this.handleQueryRun.bind(this));
     var container = document.createElement('div');
@@ -20,6 +21,13 @@ var SqlLogView = /*#__PURE__*/function () {
     var header = document.createElement('div');
     header.className = 'viewHeader';
     header.innerText = 'SQL Log';
+    var clearBtn = document.createElement('button');
+    clearBtn.style.marginLeft = 'auto';
+    clearBtn.innerText = 'Clear';
+    clearBtn.onclick = function () {
+      _this.textArea.value = '';
+    };
+    header.appendChild(clearBtn);
     container.appendChild(header);
     this.textArea = document.createElement('textarea');
     this.textArea.id = 'query_log_text';

package/dist/views/TableView/TableView.js

@@ -7,6 +7,7 @@ exports.TableView = void 0;
 var _viewerState = require("../../viewerState");
 var _ListVirtualizer = require("../../ListVirtualizer");
 require("./styles.css");
+var _TableViewModel = require("./TableViewModel");
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
@@ -18,14 +19,12 @@ var TableView = /*#__PURE__*/function () {
   function TableView(viewerElem, rootElement, queryRunner) {
     var _this = this;
     _classCallCheck(this, TableView);
-    _defineProperty(this, "columnNames", []);
-    _defineProperty(this, "fitlers", {});
     _defineProperty(this, "updateTimer", null);
-    _defineProperty(this, "selectedCell", null);
     this.viewerElem = viewerElem;
     this.rootElement = rootElement;
     this.queryRunner = queryRunner;
     this.buildDomTemplate();
+    this.model = new _TableViewModel.TableViewModel();
     this.viewerElem.addEventListener('tableSelected', function (event) {
       var selectedTable = event.detail;
       _this.setTable(selectedTable.tableName);
@@ -39,7 +38,7 @@ var TableView = /*#__PURE__*/function () {
       container: this.container,
       generatorFn: function generatorFn(i) {
         var _row$rowid;
-        var row = _this.rows[i];
+        var row = _this.model.rows[i];
         if (!row) {
           return null;
         }
@@ -66,11 +65,11 @@ var TableView = /*#__PURE__*/function () {
               columnName: columnKey,
               tableName: ((_ViewerState$instance = _viewerState.ViewerState.instance.selectedTable) === null || _ViewerState$instance === void 0 ? void 0 : _ViewerState$instance.tableName) || ''
             });
-            if (_this.selectedCell) {
-              _this.selectedCell.classList.remove('selected');
+            if (_this.model.selectedCell) {
+              _this.model.selectedCell.classList.remove('selected');
             }
             td.classList.add('selected');
-            _this.selectedCell = td;
+            _this.model.selectedCell = td;
           };
           td.appendChild(contentEl);
           tr.appendChild(td);
@@ -83,11 +82,18 @@ var TableView = /*#__PURE__*/function () {
   _createClass(TableView, [{
     key: "setTableResults",
     value: function setTableResults(rows) {
-      this.rows = rows;
-      this.viewHeaderTitle.innerHTML = this.tableName;
-      this.buildHeader(rows);
+      this.model.rows = rows;
+      this.viewHeaderTitle.innerHTML = this.model.tableName;
       this.virtualizer.setRowCount(rows.length);
     }
+  }, {
+    key: "setTableColumns",
+    value: function setTableColumns(columns) {
+      this.model.columnNames = columns.map(function (column) {
+        return column.name;
+      });
+      this.buildHeader();
+    }
   }, {
     key: "buildDomTemplate",
     value: function buildDomTemplate() {
@@ -100,7 +106,7 @@ var TableView = /*#__PURE__*/function () {
       var updateBtn = document.createElement('button');
       updateBtn.innerText = 'Update';
       updateBtn.onclick = function () {
-        _this2.requestRows();
+        _this2.requestRows(true);
       };
       this.viewHeader.appendChild(updateBtn);
       var saveBtn = document.createElement('button');
@@ -140,27 +146,31 @@ var TableView = /*#__PURE__*/function () {
     }
   }, {
     key: "buildHeader",
-    value: function buildHeader(rows) {
+    value: function buildHeader() {
       var _this3 = this;
-      if (this.columnNames.length !== 0) {
+      if (this.model.columnNames.length === 0) {
         return;
       }
-      var schema = rows.length > 0 ? Object.keys(rows[0]).filter(function (column) {
-        return column !== 'rowid';
-      }) : [];
-      if (schema.length > 0) {
-        this.columnNames = schema;
-      }
       this.headerRow.innerHTML = '';
-      this.columnNames.forEach(function (column) {
+      this.model.columnNames.forEach(function (column) {
         var columnHeader = document.createElement('th');
         columnHeader.className = 'columnHeaderCell';
         columnHeader.innerHTML = column;
         var filterFieldCell = document.createElement('th');
         filterFieldCell.className = 'columnFilterCell';
         var filterField = document.createElement('input');
+        if (_this3.model.fitlers[column]) {
+          filterField.value = _this3.model.fitlers[column];
+        }
+        filterField.onkeydown = function (event) {
+          if (event.key === 'Escape') {
+            filterField.value = '';
+            _this3.model.fitlers[column] = '';
+            _this3.scheduleUpdate();
+          }
+        };
         filterField.oninput = function () {
-          _this3.fitlers[column] = filterField.value;
+          _this3.model.fitlers[column] = filterField.value;
           _this3.scheduleUpdate();
         };
         filterField.placeholder = 'Filter';
@@ -172,20 +182,27 @@ var TableView = /*#__PURE__*/function () {
   }, {
     key: "setTable",
     value: function setTable(name) {
-      if (this.tableName === name) {
+      if (this.model.tableName === name) {
         return;
       }
-      this.tableName = name;
-      this.columnNames = [];
-      this.fitlers = {};
-      this.requestRows();
+      this.model.tableName = name;
+      this.model.columnNames = [];
+      this.model.fitlers = {};
+      this.requestRows(true);
     }
   }, {
     key: "requestRows",
-    value: function requestRows() {
-      var sql = "SELECT \"_rowid_\",* FROM ".concat(this.tableName);
+    value: function requestRows(refetchColumns) {
+      if (refetchColumns) {
+        var _sql = "PRAGMA table_info(".concat(this.model.tableName, ");");
+        this.queryRunner.runQuery({
+          sql: _sql,
+          parameters: []
+        }, 'tableViewColumns');
+      }
+      var sql = "SELECT \"_rowid_\",* FROM ".concat(this.model.tableName);
       var filterSql = [];
-      Object.entries(this.fitlers).forEach(function (filterEntry) {
+      Object.entries(this.model.fitlers).forEach(function (filterEntry) {
         var column = filterEntry[0];
         var filter = filterEntry[1];
         if (filter) {
@@ -218,7 +235,7 @@ var TableView = /*#__PURE__*/function () {
         sql: sql,
         parameters: []
       });
-      this.requestRows();
+      this.requestRows(true);
       _viewerState.ViewerState.instance.setHasChanges(false);
     }
   }, {
@@ -229,7 +246,7 @@ var TableView = /*#__PURE__*/function () {
         window.clearTimeout(this.updateTimer);
       }
       this.updateTimer = window.setTimeout(function () {
-        _this4.requestRows();
+        _this4.requestRows(false);
         _this4.updateTimer = null;
       }, 300);
     }

package/dist/views/TableView/TableViewModel.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableViewModel = void 0;
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var TableViewModel = /*#__PURE__*/_createClass(function TableViewModel() {
+  _classCallCheck(this, TableViewModel);
+  _defineProperty(this, "columnNames", []);
+  _defineProperty(this, "fitlers", {});
+  _defineProperty(this, "selectedCell", null);
+});
+exports.TableViewModel = TableViewModel;

package/dist/views/TableView/styles.css

@@ -73,6 +73,7 @@
     white-space: pre;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
+    line-height: 1.2em;
 }
 
 #table_container .nullValue {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sqlite-wasm-viewer",
-  "version": "1.0.5",
+  "version": "1.0.9",
   "description": "An SQLite OPFS database viewer that enables database inspection and SQL command execution.",
   "main": "dist/index.js",
   "scripts": {
@@ -52,4 +52,4 @@
   "peerDependencies": {
     "@sqlite.org/sqlite-wasm": "^3.x.x"
   }
-}
+}