sqlite-wasm-viewer 1.0.7 → 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sqlite-wasm-viewer",
-  "version": "1.0.7",
+  "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"
   }
-}
+}