sqlite-wasm-viewer 1.0.13 → 1.2.0

package/dist/views/TableView/TableView.js

@@ -4,10 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TableView = void 0;
-var _viewerState = require("../../viewerState");
+exports.createTableView = createTableView;
+var _state = require("../../state");
+var Bus = _interopRequireWildcard(require("../../bus"));
 var _ListVirtualizer = require("../../ListVirtualizer");
-require("./styles.css");
+var _QueryRunner = require("../../QueryRunner");
 var _TableViewModel = require("./TableViewModel");
+require("./styles.css");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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); } }
@@ -16,18 +21,33 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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 TableView = /*#__PURE__*/function () {
-  function TableView(viewerElem, rootElement, queryRunner) {
+  function TableView(rootElement) {
     var _this = this;
     _classCallCheck(this, TableView);
     _defineProperty(this, "updateTimer", 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);
+    Bus.listen('table-selected', function (table) {
+      _this.setTable(table.tableName);
+    });
+    Bus.listen('query-results', function (data) {
+      if ((data === null || data === void 0 ? void 0 : data.label) === 'tableViewColumns') {
+        _this.setTableColumns(data.result.resultRows || []);
+      } else if ((data === null || data === void 0 ? void 0 : data.label) === 'tableView') {
+        _this.setTableResults(data.result.resultRows || []);
+      }
+    });
+    Bus.listen('cell-edited', function (_ref) {
+      var cell = _ref.cell,
+        value = _ref.value;
+      var row = _this.model.rows.find(function (r) {
+        return r.rowid === cell.cellRowId;
+      });
+      if (row) {
+        row[cell.columnName] = value;
+        _this.virtualizer.update();
+      }
     });
     this.virtualizer = new _ListVirtualizer.ListVirtualizer({
       width: 500,
@@ -37,19 +57,38 @@ var TableView = /*#__PURE__*/function () {
       contentRoot: this.bodyRoot,
       container: this.container,
       generatorFn: function generatorFn(i) {
-        var _row$rowid;
         var row = _this.model.rows[i];
         if (!row) {
           return null;
         }
         var tr = document.createElement('tr');
-        var rowId = (_row$rowid = row.rowid) !== null && _row$rowid !== void 0 ? _row$rowid : (i + 1).toString();
+        var rowId = row.rowid;
+        tr.onclick = function (event) {
+          var _event$target;
+          var element = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.parentElement;
+          if (element !== null && element !== void 0 && element.id) {
+            var _selectedTable;
+            var value = row[element.id];
+            (0, _state.selectCell)({
+              value: value,
+              cellRowId: rowId,
+              columnName: element.id,
+              tableName: ((_selectedTable = (0, _state.selectedTable)()) === null || _selectedTable === void 0 ? void 0 : _selectedTable.tableName) || ''
+            });
+            if (_this.model.selectedCell) {
+              _this.model.selectedCell.classList.remove('selected');
+            }
+            element.classList.add('selected');
+            _this.model.selectedCell = element;
+          }
+        };
         Object.keys(row).forEach(function (columnKey) {
           if (columnKey === 'rowid') {
             return;
           }
           var value = row[columnKey];
           var td = document.createElement('td');
+          td.id = columnKey;
           var contentEl = document.createElement('div');
           if (value !== null) {
             contentEl.innerHTML = value;
@@ -57,20 +96,6 @@ var TableView = /*#__PURE__*/function () {
             contentEl.innerHTML = 'NULL';
             contentEl.className = 'nullValue';
           }
-          td.onclick = function () {
-            var _ViewerState$instance;
-            _viewerState.ViewerState.instance.setSelectedCell({
-              value: value,
-              cellRowId: rowId,
-              columnName: columnKey,
-              tableName: ((_ViewerState$instance = _viewerState.ViewerState.instance.selectedTable) === null || _ViewerState$instance === void 0 ? void 0 : _ViewerState$instance.tableName) || ''
-            });
-            if (_this.model.selectedCell) {
-              _this.model.selectedCell.classList.remove('selected');
-            }
-            td.classList.add('selected');
-            _this.model.selectedCell = td;
-          };
           td.appendChild(contentEl);
           tr.appendChild(td);
         });
@@ -139,9 +164,8 @@ var TableView = /*#__PURE__*/function () {
       this.bodyRoot = table.createTBody();
       this.container.appendChild(table);
       this.rootElement.appendChild(this.container);
-      this.viewerElem.addEventListener('dbHasChanges', function (event) {
-        var hasChanges = event.detail;
-        if (hasChanges) {
+      Bus.listen('db-dirtied', function (dirty) {
+        if (dirty) {
           saveBtn.removeAttribute('disabled');
           revertBtn.removeAttribute('disabled');
         } else {
@@ -202,12 +226,12 @@ var TableView = /*#__PURE__*/function () {
     value: function requestRows(refetchColumns) {
       if (refetchColumns) {
         var _sql = "PRAGMA table_info(".concat(this.model.tableName, ");");
-        this.queryRunner.runQuery({
+        _QueryRunner.queryRunner.runQuery({
           sql: _sql,
           parameters: []
         }, 'tableViewColumns');
       }
-      var sql = "SELECT \"_rowid_\",* FROM ".concat(this.model.tableName);
+      var sql = "SELECT \"_rowid_\" as rowid,* FROM ".concat(this.model.tableName);
       var filterSql = [];
       Object.entries(this.model.fitlers).forEach(function (filterEntry) {
         var column = filterEntry[0];
@@ -219,7 +243,7 @@ var TableView = /*#__PURE__*/function () {
       if (filterSql.length > 0) {
         sql += " WHERE ".concat(filterSql.join(' AND '), " ESCAPE '\\'");
       }
-      this.queryRunner.runQuery({
+      _QueryRunner.queryRunner.runQuery({
         sql: sql,
         parameters: []
       }, 'tableView');
@@ -228,42 +252,42 @@ var TableView = /*#__PURE__*/function () {
     key: "saveChanges",
     value: function saveChanges() {
       var sql = 'RELEASE "RESTOREPOINT";';
-      this.queryRunner.runQuery({
+      _QueryRunner.queryRunner.runQuery({
         sql: sql,
         parameters: []
       });
-      _viewerState.ViewerState.instance.setHasChanges(false);
+      (0, _state.setDirty)(false);
     }
   }, {
     key: "revertChanges",
     value: function revertChanges() {
       var sql = 'ROLLBACK TO SAVEPOINT "RESTOREPOINT";';
-      this.queryRunner.runQuery({
+      _QueryRunner.queryRunner.runQuery({
         sql: sql,
         parameters: []
       });
       this.requestRows(true);
-      _viewerState.ViewerState.instance.setHasChanges(false);
+      (0, _state.setDirty)(false);
     }
   }, {
     key: "deleteTable",
     value: function deleteTable() {
-      if (!_viewerState.ViewerState.instance.selectedTable) {
+      var table = (0, _state.selectedTable)();
+      if (!table) {
         return;
       }
-      if (!_viewerState.ViewerState.instance.hasChanges) {
-        var _this$queryRunner;
-        (_this$queryRunner = this.queryRunner) === null || _this$queryRunner === void 0 ? void 0 : _this$queryRunner.runQuery({
+      if (!(0, _state.isDirty)()) {
+        _QueryRunner.queryRunner === null || _QueryRunner.queryRunner === void 0 ? void 0 : _QueryRunner.queryRunner.runQuery({
           sql: 'SAVEPOINT "RESTOREPOINT"',
           parameters: []
         });
       }
-      var sql = "DROP TABLE \"".concat(_viewerState.ViewerState.instance.selectedTable.tableName, "\";");
-      this.queryRunner.runQuery({
+      var sql = "DROP TABLE \"".concat(table.tableName, "\";");
+      _QueryRunner.queryRunner.runQuery({
         sql: sql,
         parameters: []
       });
-      _viewerState.ViewerState.instance.setHasChanges(true);
+      (0, _state.setDirty)(true);
     }
   }, {
     key: "scheduleUpdate",
@@ -280,4 +304,12 @@ var TableView = /*#__PURE__*/function () {
   }]);
   return TableView;
 }();
-exports.TableView = TableView;
+exports.TableView = TableView;
+var _tableView;
+function createTableView(rootEl) {
+  if (!_tableView) {
+    _tableView = new TableView(rootEl);
+  } else {
+    // console.warn('TableView is already created');
+  }
+}

package/dist/views/TableView/styles.css

@@ -1,5 +1,5 @@
 #table_view {
-    padding: 5px;
+    padding: 0;
     flex: 1;
     position: relative;
     overflow: hidden;
@@ -8,77 +8,101 @@
 }
 
 #table_view_header {
-    max-height: 20px;
-    flex-basis: 20px;
+    max-height: 34px;
+    flex-basis: 34px;
     left: 0;
     right: 0;
     position: sticky;
     line-height: 1.1rem;
-    padding: 8px;
-    background-color: lightgray;
+    padding: 8px 10px;
+    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
 }
 
 #table_view_header_title {
-    padding: 8px;
+    padding-right: 8px;
 }
 
 #table_container {
-    overflow-y: scroll;
-    display: flex;
+    overflow: auto;
+    flex: 1;
+    background: #fff;
 }
 
 #table_container table {
-    flex: 1;
     table-layout: fixed;
     width: 100%;
-    background-color: whitesmoke;
+    background: #fff;
     border-collapse: collapse;
     border-spacing: 0;
 }
 
 #table_container tbody {
-    flex: 1;
-    overflow-y: scroll;
     position: relative;
 }
 
 #table_container .columnHeaderCell {
-    height: 60px;
+    height: 62px;
     position: sticky;
     top: 0;
-    background-color: darkgray;
+    padding: 6px;
+    background: #f8fafc;
     z-index: 2;
+    color: #334155;
+    font-weight: 600;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 #table_container .columnFilterCell {
-    padding-top: 5px;
+    padding-top: 6px;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 #table_container .columnFilterCell input {
-    width: calc(100% - 8px);
+    width: 100%;
+    box-sizing: border-box;
+    font-size: 12px;
 }
 
 #table_container td, #table_container .columnHeaderCell {
-    border: 1px solid lightgray;
+    border: 1px solid #e2e8f0;
 }
 
 #table_container td.selected {
-    background-color: lightslategray;
-    color: white;
+    background: #2563eb;
+    color: #fff;
 }
 
 #table_container td div {
     height: 40px;
     box-sizing: border-box;
-    padding: 4px;
+    padding: 10px 8px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: pre;
-    font-size: 15px;
-    line-height: 1.1em;
+    font-size: 13px;
+    line-height: 1.2em;
+}
+
+#table_container tbody tr:nth-child(even) td:not(.selected) {
+    background: #fcfdff;
+}
+
+#table_container tbody tr:hover td:not(.selected) {
+    background: #eff6ff;
+}
+
+#table_container tbody tr:hover td.selected {
+    background: #2563eb;
 }
 
 #table_container .nullValue {
     font-style: italic;
-    color: gray;
+    color: #64748b;
+}
+
+::placeholder {
+    color: #959595; /* Use any color format (HEX, RGB, Name) */
+    opacity: 1;    /* Required for Firefox to show full color */
 }

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "sqlite-wasm-viewer",
-  "version": "1.0.13",
-  "description": "An SQLite OPFS database viewer that enables database inspection and SQL command execution.",
+  "version": "1.2.0",
+  "description": "Browser SQLite OPFS viewer for @sqlite.org/sqlite-wasm: inspect OPFS-backed databases, run SQL, and filter tables.",
   "main": "dist/index.js",
+  "homepage": "https://github.com/mifozski/sqlite-wasm-viewer#readme",
+  "bugs": {
+    "url": "https://github.com/mifozski/sqlite-wasm-viewer/issues"
+  },
   "scripts": {
     "build": "yarn build-transpile && yarn build-copy-css",
     "build-transpile": "babel src --extensions .ts --out-dir=dist --presets=@babel/env,@babel/typescript",
@@ -11,10 +15,16 @@
   },
   "keywords": [
     "sqlite",
+    "sqlite-wasm",
     "opfs",
+    "opfs-viewer",
     "wasm",
+    "viewer",
+    "browser",
     "sql",
-    "database"
+    "database",
+    "inspector",
+    "sqlite-wasm-viewer"
   ],
   "author": {
     "name": "Andrey Efimov",