sqlite-wasm-viewer 1.0.13 → 1.1.1

package/dist/DbViewerWorker.js

@@ -88,7 +88,6 @@ var DbViewerWorker = /*#__PURE__*/function () {
                 rawStatement.bind(parameters);
               }
               while (rawStatement.step()) {
-                // Kysely expects the results to be in the object mode
                 var row = rawStatement.get({});
                 resultRows.push(row);
               }

package/dist/DbWorker.js

@@ -3,5 +3,15 @@
 var _DbViewerWorker = require("./DbViewerWorker");
 var dbWorker = new _DbViewerWorker.DbViewerWorker();
 onmessage = function onmessage(message) {
-  dbWorker.post(message);
+  try {
+    dbWorker.post(message);
+  } catch (e) {
+    if (message.data.type === 'query') {
+      postMessage({
+        type: 'error',
+        sql: message.data.query.sql,
+        errorMsg: e.toString()
+      });
+    }
+  }
 };

package/dist/ListVirtualizer.js

@@ -84,6 +84,13 @@ var ListVirtualizer = /*#__PURE__*/function () {
       first = first < 0 ? 0 : first;
       this.renderChunk(first);
     }
+  }, {
+    key: "update",
+    value: function update() {
+      var first = Math.ceil(this.scrollTop / this.itemHeight - this.screenItemsLen);
+      first = first < 0 ? 0 : first;
+      this.renderChunk(first);
+    }
   }]);
   return ListVirtualizer;
 }();

package/dist/QueryRunner.js

@@ -3,8 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.QueryRunner = void 0;
-var _viewerState = require("./viewerState");
+exports.queryRunner = exports.QueryRunner = void 0;
+var Bus = _interopRequireWildcard(require("./bus"));
+var _state = require("./state");
+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); } }
@@ -12,41 +15,35 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 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 QueryRunner = /*#__PURE__*/function () {
-  function QueryRunner(db) {
+  function QueryRunner() {
+    var _this = this;
     _classCallCheck(this, QueryRunner);
-    this.db = db;
-    this.listeners = [];
+    Bus.listen('db-connector-ready', function (db) {
+      _this.db = db;
+      Bus.emit('query-runner-ready', true);
+    });
   }
   _createClass(QueryRunner, [{
     key: "runQuery",
     value: function runQuery(query, label) {
-      var currentDatabase = _viewerState.ViewerState.instance.selectedTable;
-      if (!currentDatabase) {
+      if (!this.db) {
+        return;
+      }
+      var currentTable = (0, _state.selectedTable)();
+      if (!currentTable) {
         return;
       }
       this.db.post({
         type: 'query',
         query: query,
-        databasePath: currentDatabase.databasePath,
+        databasePath: currentTable.databasePath,
         label: label
       });
-      this.listeners.forEach(function (listener) {
-        listener(query);
-      });
-    }
-  }, {
-    key: "addListener",
-    value: function addListener(listener) {
-      var _this = this;
-      if (this.listeners.indexOf(listener) !== -1) {
-        throw new Error('Listener is already added');
-      }
-      this.listeners.push(listener);
-      return function () {
-        _this.listeners.splice(_this.listeners.indexOf(listener), 1);
-      };
+      Bus.emit('query-run', query);
     }
   }]);
   return QueryRunner;
 }();
-exports.QueryRunner = QueryRunner;
+exports.QueryRunner = QueryRunner;
+var queryRunner = new QueryRunner();
+exports.queryRunner = queryRunner;

package/dist/bus.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emit = emit;
+exports.listen = listen;
+exports.remove = remove;
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+var _listeners = {};
+function listen(type, listener) {
+  var listeners = _listeners[type];
+  if (!listeners) {
+    listeners = _listeners[type] = [];
+  }
+  listeners.push(listener);
+}
+function remove(type, listener) {
+  var listeners = _listeners[type];
+  if (!listeners) {
+    return;
+  }
+  var idx = listeners.indexOf(listener);
+  if (idx >= 0) {
+    listeners.splice(idx, 1);
+  }
+}
+function emit(type, event) {
+  var listeners = _listeners[type];
+  if (!listeners) {
+    return;
+  }
+  var _iterator = _createForOfIteratorHelper(listeners),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var listener = _step.value;
+      listener(event);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+}

package/dist/dbWorkerConnector.js

@@ -0,0 +1,63 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.connectToWorker = connectToWorker;
+var _dbScanner = require("./dbScanner");
+var Bus = _interopRequireWildcard(require("./bus"));
+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 connectToWorker(config) {
+  var worker = new Worker(new URL('./DbWorker', import.meta.url), {
+    type: 'module'
+  });
+  var collectDbFilesPromise = (0, _dbScanner.collectDbFiles)(config.isSqliteDatabase);
+  var dbs = {};
+  worker.onmessage = function (message) {
+    if (message.data.type === 'onReady') {
+      var db = {
+        post: function post(mess) {
+          worker.postMessage(mess);
+        },
+        on: function on(mess) {
+          var _worker$onmessage;
+          (_worker$onmessage = worker.onmessage) === null || _worker$onmessage === void 0 ? void 0 : _worker$onmessage.call(worker, mess);
+        }
+      };
+      Bus.emit('db-connector-ready', db);
+      collectDbFilesPromise.then(function (dbFiles) {
+        dbFiles.forEach(function (dbFile) {
+          var dbFilepath = dbFile;
+          var dbName = dbFile;
+          dbs[dbFilepath] = {
+            filename: dbName,
+            tables: []
+          };
+          worker.postMessage({
+            type: 'readSchema',
+            path: dbFile
+          });
+        });
+      });
+    } else if (message.data.type === 'onSchema') {
+      var tables = message.data.schema.map(function (tableSchema) {
+        return tableSchema[0];
+      });
+      dbs[message.data.dbName].tables = tables;
+      Bus.emit('db-found', dbs[message.data.dbName]);
+    } else if (message.data.type === 'onQuery') {
+      Bus.emit('query-results', message.data);
+    } else if (message.data.type === 'error') {
+      Bus.emit('query-run', {
+        sql: message.data.sql,
+        errorMsg: message.data.errorMsg,
+        parameters: []
+      });
+    }
+  };
+  worker.postMessage({
+    type: 'init'
+  });
+}

package/dist/index.js

@@ -8,22 +8,8 @@ exports.hideViewer = hideViewer;
 exports.setConfig = setConfig;
 exports.showViewer = showViewer;
 require("./styles.css");
-var _TableView = require("./views/TableView/TableView");
-var _ExecuteSQLView = require("./views/ExecuteSQLView/ExecuteSQLView");
-var _QueryRunner = require("./QueryRunner");
-var _SqlLogView = require("./views/SqlLogView/SqlLogView");
-var _ExplorerView = require("./views/ExplorerView/ExplorerView");
-var _dbScanner = require("./dbScanner");
-var _EditCellView = require("./views/EditCellView/EditCellView");
-var _viewerState = require("./viewerState");
-var _resizeHandler = require("./utils/resizeHandler");
-var viewer = null;
-var dbListEl = null;
-var tableViewer = null;
-var middlePanel = null;
-var rightPanel = null;
-var explorerView = null;
-var queryRunner = null;
+var _viewer2 = require("./viewer");
+var _viewer;
 var defaultSqliteExtension = ['db', 'sqlite'];
 function defaultIsSqliteDatabase(filename) {
   return defaultSqliteExtension.some(function (ext) {
@@ -40,103 +26,15 @@ function setConfig(userConfig) {
   Object.freeze(config);
 }
 function showViewer() {
-  if (!viewer) {
-    viewer = document.createElement('div');
-    viewer.id = 'viewer';
-    (0, _viewerState.initState)(viewer);
-    var closeBtn = document.createElement('div');
-    closeBtn.id = 'close_btn';
-    closeBtn.innerText = 'Close';
-    closeBtn.onclick = function () {
+  if (!_viewer) {
+    _viewer = new _viewer2.Viewer(config, function () {
       hideViewer();
-    };
-    viewer.appendChild(closeBtn);
-
-    // Left Panel
-    dbListEl = document.createElement('div');
-    dbListEl.id = 'db_list';
-    viewer.appendChild(dbListEl);
-
-    // Middle Panel
-    middlePanel = document.createElement('div');
-    middlePanel.id = 'middle_panel';
-    var listResizeHandlerEl = (0, _resizeHandler.createResizeHandler)(dbListEl, middlePanel, true, viewer);
-    viewer.appendChild(listResizeHandlerEl);
-    var tableViewEl = document.createElement('div');
-    tableViewEl.id = 'table_view';
-    middlePanel.appendChild(tableViewEl);
-    viewer.append(middlePanel);
-
-    // Right Panel
-    rightPanel = document.createElement('div');
-    rightPanel.id = 'right_panel';
-    var executeSqlView = new _ExecuteSQLView.ExecuteSQLView(rightPanel);
-    var editCellView = new _EditCellView.EditCellView(viewer, rightPanel);
-    var rightPanelResizeHandlerEl = (0, _resizeHandler.createResizeHandler)(middlePanel, rightPanel, false, viewer);
-    viewer.appendChild(rightPanelResizeHandlerEl);
-    viewer.append(rightPanel);
-    var worker = new Worker(new URL('./DbWorker', import.meta.url), {
-      type: 'module'
-    });
-    explorerView = new _ExplorerView.ExplorerView(dbListEl, viewer);
-    var collectDbFilesPromise = (0, _dbScanner.collectDbFiles)(config.isSqliteDatabase);
-    var dbs = {};
-    worker.onmessage = function (message) {
-      if (message.data.type === 'onReady') {
-        collectDbFilesPromise.then(function (dbFiles) {
-          dbFiles.forEach(function (dbFile) {
-            var dbFilepath = dbFile;
-            var dbName = dbFile;
-            dbs[dbFilepath] = {
-              filename: dbName,
-              tables: []
-            };
-            worker.postMessage({
-              type: 'readSchema',
-              path: dbFile
-            });
-          });
-        });
-      } else if (message.data.type === 'onSchema') {
-        var _explorerView;
-        var tables = message.data.schema.map(function (tableSchema) {
-          return tableSchema[0];
-        });
-        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 === 'tableViewColumns') {
-          var _tableViewer;
-          (_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 || []);
-        }
-      }
-    };
-    var db = {
-      post: function post(message) {
-        worker.postMessage(message);
-      },
-      on: function on(message) {
-        var _worker$onmessage;
-        (_worker$onmessage = worker.onmessage) === null || _worker$onmessage === void 0 ? void 0 : _worker$onmessage.call(worker, message);
-      }
-    };
-    queryRunner = new _QueryRunner.QueryRunner(db);
-    (0, _SqlLogView.initSqlLogView)(rightPanel, queryRunner);
-    tableViewer = new _TableView.TableView(viewer, tableViewEl, queryRunner);
-    executeSqlView.setDb(queryRunner);
-    editCellView.setDb(queryRunner);
-    worker.postMessage({
-      type: 'init'
     });
   }
-  document.body.appendChild(viewer);
+  document.body.appendChild(_viewer.element);
 }
 function hideViewer() {
-  if (viewer) {
-    document.body.removeChild(viewer);
+  if (_viewer) {
+    document.body.removeChild(_viewer.element);
   }
 }

package/dist/state.js

@@ -0,0 +1,37 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isDirty = isDirty;
+exports.selectCell = selectCell;
+exports.selectTable = selectTable;
+exports.selectedTable = selectedTable;
+exports.setDirty = setDirty;
+var Bus = _interopRequireWildcard(require("./bus"));
+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; }
+var _state = {
+  selectedCell: null,
+  selectedTable: null,
+  dirty: false
+};
+function selectedTable() {
+  return _state.selectedTable;
+}
+function isDirty() {
+  return _state.dirty;
+}
+function selectCell(cell) {
+  _state.selectedCell = cell;
+  Bus.emit('cell-selected', cell);
+}
+function selectTable(table) {
+  _state.selectedTable = table;
+  Bus.emit('table-selected', table);
+}
+function setDirty(dirty) {
+  _state.dirty = dirty;
+  Bus.emit('db-dirtied', dirty);
+}

package/dist/viewer.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Viewer = void 0;
+var _dbWorkerConnector = require("./dbWorkerConnector");
+var _resizeHandler = require("./utils/resizeHandler");
+var _EditCellView = require("./views/EditCellView/EditCellView");
+var _ExecuteSQLView = require("./views/ExecuteSQLView/ExecuteSQLView");
+var _ExplorerView = require("./views/ExplorerView/ExplorerView");
+var _SqlLogView = require("./views/SqlLogView/SqlLogView");
+var _TableView = require("./views/TableView/TableView");
+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); } }
+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 _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 Viewer = /*#__PURE__*/function () {
+  function Viewer(config, onClickClose) {
+    _classCallCheck(this, Viewer);
+    this.onClickClose = onClickClose;
+    this.createElements();
+    (0, _dbWorkerConnector.connectToWorker)(config);
+  }
+  _createClass(Viewer, [{
+    key: "createElements",
+    value: function createElements() {
+      var _this = this;
+      this._container = document.createElement('div');
+      this._container.id = 'viewer';
+      var closeBtn = document.createElement('div');
+      closeBtn.id = 'close_btn';
+      closeBtn.innerText = 'Close';
+      closeBtn.onclick = function () {
+        _this.onClickClose();
+      };
+      this._container.appendChild(closeBtn);
+
+      // Left Panel
+      var leftPanel = document.createElement('div');
+      leftPanel.id = 'db_list';
+      (0, _ExplorerView.createExplorerView)(leftPanel, this._container);
+      this._container.appendChild(leftPanel);
+
+      // Middle Panel
+      var middlePanel = document.createElement('div');
+      middlePanel.id = 'middle_panel';
+      var listResizeHandlerEl = (0, _resizeHandler.createResizeHandler)(leftPanel, middlePanel, true, this._container);
+      this._container.appendChild(listResizeHandlerEl);
+      var tableViewEl = document.createElement('div');
+      tableViewEl.id = 'table_view';
+      middlePanel.appendChild(tableViewEl);
+      (0, _TableView.createTableView)(tableViewEl);
+      this._container.append(middlePanel);
+
+      // Right Panel
+      var rightPanel = document.createElement('div');
+      rightPanel.id = 'right_panel';
+      var rightPanelResizeHandlerEl = (0, _resizeHandler.createResizeHandler)(middlePanel, rightPanel, false, this._container);
+      this._container.appendChild(rightPanelResizeHandlerEl);
+      (0, _EditCellView.createEditCellView)(rightPanel);
+      (0, _ExecuteSQLView.createSQLExecutorView)(rightPanel);
+      (0, _SqlLogView.createSqlLogView)(rightPanel);
+      this._container.append(rightPanel);
+    }
+  }, {
+    key: "element",
+    get: function get() {
+      return this._container;
+    }
+  }]);
+  return Viewer;
+}();
+exports.Viewer = Viewer;

package/dist/views/EditCellView/EditCellView.js

@@ -4,8 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EditCellView = void 0;
-var _viewerState = require("../../viewerState");
+exports.createEditCellView = createEditCellView;
+var Bus = _interopRequireWildcard(require("../../bus"));
+var _QueryRunner = require("../../QueryRunner");
+var _state = require("../../state");
 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); } }
@@ -13,14 +18,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 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 EditCellView = /*#__PURE__*/function () {
-  function EditCellView(viewerElem, rootEl) {
+  function EditCellView(rootEl) {
     var _this = this;
     _classCallCheck(this, EditCellView);
-    this.viewerElem = viewerElem;
     this.rootEl = rootEl;
     this.buildDom();
-    viewerElem.addEventListener('cellSelected', function (event) {
-      var cell = event.detail;
+    Bus.listen('cell-selected', function (cell) {
       _this.currentCell = cell;
       _this.textArea.value = cell.value;
       _this.textArea.select();
@@ -48,27 +51,30 @@ var EditCellView = /*#__PURE__*/function () {
     key: "handleApplyEdit",
     value: function handleApplyEdit() {
       if (this.textArea.value) {
-        var _this$queryRunner2, _this$currentCell, _this$currentCell2, _this$currentCell3;
-        if (!_viewerState.ViewerState.instance.hasChanges) {
-          var _this$queryRunner;
-          (_this$queryRunner = this.queryRunner) === null || _this$queryRunner === void 0 ? void 0 : _this$queryRunner.runQuery({
+        var _this$currentCell, _this$currentCell2, _this$currentCell3;
+        if (!(0, _state.isDirty)()) {
+          _QueryRunner.queryRunner.runQuery({
             sql: 'SAVEPOINT "RESTOREPOINT"',
             parameters: []
           });
         }
-        (_this$queryRunner2 = this.queryRunner) === null || _this$queryRunner2 === void 0 ? void 0 : _this$queryRunner2.runQuery({
+        _QueryRunner.queryRunner.runQuery({
           sql: "UPDATE ".concat((_this$currentCell = this.currentCell) === null || _this$currentCell === void 0 ? void 0 : _this$currentCell.tableName, " SET \"").concat((_this$currentCell2 = this.currentCell) === null || _this$currentCell2 === void 0 ? void 0 : _this$currentCell2.columnName, "\"=? WHERE \"_rowid_\"='").concat((_this$currentCell3 = this.currentCell) === null || _this$currentCell3 === void 0 ? void 0 : _this$currentCell3.cellRowId, "'"),
           parameters: [this.textArea.value]
         });
-        _viewerState.ViewerState.instance.setHasChanges(true);
+        if (this.currentCell) {
+          Bus.emit('cell-edited', {
+            cell: this.currentCell,
+            value: this.textArea.value
+          });
+        }
+        (0, _state.setDirty)(true);
       }
     }
-  }, {
-    key: "setDb",
-    value: function setDb(queryRunner) {
-      this.queryRunner = queryRunner;
-    }
   }]);
   return EditCellView;
 }();
-exports.EditCellView = EditCellView;
+exports.EditCellView = EditCellView;
+function createEditCellView(rootEl) {
+  return new EditCellView(rootEl);
+}

package/dist/views/ExecuteSQLView/ExecuteSQLView.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ExecuteSQLView = void 0;
+exports.createSQLExecutorView = createSQLExecutorView;
+var _QueryRunner = require("../../QueryRunner");
 require("./styles.css");
 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"); } }
@@ -39,19 +40,15 @@ var ExecuteSQLView = /*#__PURE__*/function () {
     key: "handleExecuteSql",
     value: function handleExecuteSql() {
       if (this.textArea.value) {
-        var _this$queryRunner;
-        (_this$queryRunner = this.queryRunner) === null || _this$queryRunner === void 0 ? void 0 : _this$queryRunner.runQuery({
+        _QueryRunner.queryRunner.runQuery({
           sql: this.textArea.value,
           parameters: []
         });
       }
     }
-  }, {
-    key: "setDb",
-    value: function setDb(queryRunner) {
-      this.queryRunner = queryRunner;
-    }
   }]);
   return ExecuteSQLView;
 }();
-exports.ExecuteSQLView = ExecuteSQLView;
+function createSQLExecutorView(rootEl) {
+  return new ExecuteSQLView(rootEl);
+}

package/dist/views/ExplorerView/ExplorerView.js

@@ -4,8 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ExplorerView = void 0;
-var _viewerState = require("../../viewerState");
+exports.createExplorerView = createExplorerView;
+var Bus = _interopRequireWildcard(require("../../bus"));
+var _state = require("../../state");
 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,11 +20,15 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 var EXPANDED_EXPLORER_ITEMS_KEY = 'expanded_explorer_items';
 var ExplorerView = /*#__PURE__*/function () {
   function ExplorerView(rootEl, viewEl) {
-    var _localStorage$getItem;
+    var _this = this,
+      _localStorage$getItem;
     _classCallCheck(this, ExplorerView);
     _defineProperty(this, "expandedItems", {});
     _defineProperty(this, "selectedItem", null);
     _defineProperty(this, "showFullItemLabelTimeout", 0);
+    Bus.listen('db-found', function (table) {
+      _this.addDatabaseItem(table);
+    });
     this.dbs = [];
     this.scheduleShowFullItemLabel = this.scheduleShowFullItemLabel.bind(this);
     this.hideFullItemLabel = this.hideFullItemLabel.bind(this);
@@ -52,16 +60,16 @@ var ExplorerView = /*#__PURE__*/function () {
   }, {
     key: "buildDom",
     value: function buildDom() {
-      var _this = this;
+      var _this2 = this;
       this.containerEl.innerHTML = '';
       this.dbs.forEach(function (db) {
-        _this.buildDbGroupDom(db);
+        _this2.buildDbGroupDom(db);
       });
     }
   }, {
     key: "buildDbGroupDom",
     value: function buildDbGroupDom(db) {
-      var _this2 = this;
+      var _this3 = this;
       var dbRoot = document.createDocumentFragment();
       var dbItem = document.createElement('div');
       this.setupCommonItemDom(dbItem);
@@ -74,7 +82,7 @@ var ExplorerView = /*#__PURE__*/function () {
       this.buildExpandArrowDom(dbItem, tablesContainer, db, isExpanded);
       dbRoot.appendChild(dbItem);
       db.tables.forEach(function (table) {
-        _this2.buildTableDom(tablesContainer, table, db);
+        _this3.buildTableDom(tablesContainer, table, db);
       });
       tablesContainer.style.display = isExpanded ? 'block' : 'none';
       dbRoot.appendChild(tablesContainer);
@@ -83,7 +91,7 @@ var ExplorerView = /*#__PURE__*/function () {
   }, {
     key: "buildExpandArrowDom",
     value: function buildExpandArrowDom(itemElem, tablesContainer, db, isExpanded) {
-      var _this3 = this;
+      var _this4 = this;
       var expandArrow = document.createElement('div');
       expandArrow.className = 'expand';
       expandArrow.innerHTML = '&#9656;';
@@ -92,24 +100,24 @@ var ExplorerView = /*#__PURE__*/function () {
         expandArrow.classList.add('expanded');
       }
       expandArrow.onclick = function () {
-        _this3.expandedItems[db.filename] = !_this3.expandedItems[db.filename];
-        tablesContainer.style.display = _this3.expandedItems[db.filename] ? 'block' : 'none';
+        _this4.expandedItems[db.filename] = !_this4.expandedItems[db.filename];
+        tablesContainer.style.display = _this4.expandedItems[db.filename] ? 'block' : 'none';
         expandArrow.classList.toggle('expanded');
-        localStorage.setItem(EXPANDED_EXPLORER_ITEMS_KEY, JSON.stringify(_this3.expandedItems));
+        localStorage.setItem(EXPANDED_EXPLORER_ITEMS_KEY, JSON.stringify(_this4.expandedItems));
       };
       itemElem.appendChild(expandArrow);
     }
   }, {
     key: "buildTableDom",
     value: function buildTableDom(tablesContainer, tableName, db) {
-      var _this4 = this,
+      var _this5 = this,
         _this$selectedItem,
         _this$selectedItem2;
       var tableItem = document.createElement('div');
       this.setupCommonItemDom(tableItem);
       tableItem.classList.add('table');
       tableItem.onclick = function () {
-        _this4.selectTable(tableItem, db);
+        _this5.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;
@@ -132,7 +140,7 @@ var ExplorerView = /*#__PURE__*/function () {
           tableElem: tableEl
         };
         var databasePath = databaseItem.filename;
-        _viewerState.ViewerState.instance.setSelectedTable({
+        (0, _state.selectTable)({
           tableName: tableName,
           databasePath: databasePath
         });
@@ -156,13 +164,13 @@ var ExplorerView = /*#__PURE__*/function () {
   }, {
     key: "scheduleShowFullItemLabel",
     value: function scheduleShowFullItemLabel(event) {
-      var _this5 = this;
+      var _this6 = this;
       var item = event.target;
       var label = item.querySelector('.label');
       if (label && label.offsetWidth < label.scrollWidth) {
         clearTimeout(this.showFullItemLabelTimeout);
         this.showFullItemLabelTimeout = window.setTimeout(function () {
-          _this5.showFullItemLabel(item);
+          _this6.showFullItemLabel(item);
         }, 300);
       }
     }
@@ -190,4 +198,12 @@ var ExplorerView = /*#__PURE__*/function () {
   }]);
   return ExplorerView;
 }();
-exports.ExplorerView = ExplorerView;
+exports.ExplorerView = ExplorerView;
+var _explorerView;
+function createExplorerView(rootEl, viewEl) {
+  if (!_explorerView) {
+    _explorerView = new ExplorerView(rootEl, viewEl);
+  } else {
+    console.warn('ExplorerView is already created');
+  }
+}

package/dist/views/SqlLogView/SqlLogView.js

@@ -3,8 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.initSqlLogView = initSqlLogView;
+exports.createSqlLogView = createSqlLogView;
+var Bus = _interopRequireWildcard(require("../../bus"));
 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); } }
@@ -12,10 +15,16 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 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 SqlLogView = /*#__PURE__*/function () {
-  function SqlLogView(rootEl, queryRunner) {
+  function SqlLogView(rootEl) {
     var _this = this;
     _classCallCheck(this, SqlLogView);
-    queryRunner.addListener(this.handleQueryRun.bind(this));
+    Bus.listen('query-run', function (query) {
+      if (query.errorMsg) {
+        _this.textArea.value += "Error while running previous query: ".concat(query.errorMsg, "\n");
+      } else {
+        _this.textArea.value += "".concat(query.sql, "\n");
+      }
+    });
     var container = document.createElement('div');
     container.id = 'sql_log_container';
     var header = document.createElement('div');
@@ -43,6 +52,6 @@ var SqlLogView = /*#__PURE__*/function () {
   }]);
   return SqlLogView;
 }();
-function initSqlLogView(rootEl, queryRunner) {
-  return new SqlLogView(rootEl, queryRunner);
+function createSqlLogView(rootEl) {
+  return new SqlLogView(rootEl);
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sqlite-wasm-viewer",
-  "version": "1.0.13",
+  "version": "1.1.1",
   "description": "An SQLite OPFS database viewer that enables database inspection and SQL command execution.",
   "main": "dist/index.js",
   "scripts": {