sqlite-wasm-viewer 1.0.1 → 1.0.2

package/dist/styles.css

@@ -0,0 +1,65 @@
+#viewer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: whitesmoke;
+    display: flex;
+    padding: 10px;
+    padding-top: 20px;
+    gap: 8px;
+}
+
+#viewer * {
+    all: revert;
+}
+
+#viewer .viewHeader {
+    max-height: 20px;
+    flex-basis: 20px;
+    line-height: 1.1rem;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background-color: lightgray;
+}
+
+#viewer #close_btn {
+    position: absolute;
+    left: 10px;
+    top: 0px;
+    cursor: pointer;
+}
+
+#viewer #db_list {
+    width: 200px;
+    padding: 5px;
+    background-color: darkgray;
+    display: flex;
+    flex-direction: column;
+}
+
+#viewer #tree_root {
+    flex-grow: 1;
+    padding: 5px;
+    background-color: darkgray;
+}
+
+#viewer #middle_panel {
+    background-color: darkgray;
+    flex: 1;
+    flex-basis: 800px;
+    display: flex;
+    flex-direction: column;
+}
+
+#viewer #right_panel {
+    padding: 5px;
+    background-color: darkgray;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}

package/dist/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/viewerState.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ViewerState = void 0;
+exports.initState = initState;
+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 _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 ViewerState = /*#__PURE__*/function () {
+  function ViewerState(viewerElem) {
+    _classCallCheck(this, ViewerState);
+    _defineProperty(this, "hasChanges", false);
+    this.viewerElem = viewerElem;
+    ViewerState._instance = this;
+  }
+  _createClass(ViewerState, [{
+    key: "setSelectedCell",
+    value: function setSelectedCell(cell) {
+      this.selectedCell = cell;
+      var event = new CustomEvent('cellSelected', {
+        detail: cell
+      });
+      this.viewerElem.dispatchEvent(event);
+    }
+  }, {
+    key: "setSelectedTable",
+    value: function setSelectedTable(table) {
+      this.selectedTable = table;
+      var event = new CustomEvent('tableSelected', {
+        detail: table
+      });
+      this.viewerElem.dispatchEvent(event);
+    }
+  }, {
+    key: "setHasChanges",
+    value: function setHasChanges(hasChanges) {
+      this.hasChanges = hasChanges;
+      var event = new CustomEvent('dbHasChanges', {
+        detail: hasChanges
+      });
+      this.viewerElem.dispatchEvent(event);
+    }
+  }], [{
+    key: "instance",
+    get: function get() {
+      return ViewerState._instance;
+    }
+  }]);
+  return ViewerState;
+}();
+exports.ViewerState = ViewerState;
+function initState(viewerElem) {
+  return new ViewerState(viewerElem);
+}

package/dist/views/EditCellView/EditCellView.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditCellView = void 0;
+var _viewerState = require("../../viewerState");
+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"); } }
+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 EditCellView = /*#__PURE__*/function () {
+  function EditCellView(viewerElem, rootEl) {
+    var _this = this;
+    _classCallCheck(this, EditCellView);
+    this.viewerElem = viewerElem;
+    this.rootEl = rootEl;
+    this.buildDom();
+    viewerElem.addEventListener('cellSelected', function (event) {
+      var cell = event.detail;
+      _this.currentCell = cell;
+      _this.textArea.value = cell.value;
+      _this.textArea.select();
+    });
+  }
+  _createClass(EditCellView, [{
+    key: "buildDom",
+    value: function buildDom() {
+      var container = document.createElement('div');
+      container.id = 'execute_sql_container';
+      var header = document.createElement('div');
+      header.className = 'viewHeader';
+      header.innerText = 'Edit Cell';
+      container.appendChild(header);
+      this.textArea = document.createElement('textarea');
+      this.textArea.id = 'execute_sql_textarea';
+      container.appendChild(this.textArea);
+      var executeBtn = document.createElement('button');
+      executeBtn.innerText = 'Apply';
+      executeBtn.onclick = this.handleApplyEdit.bind(this);
+      container.appendChild(executeBtn);
+      this.rootEl.appendChild(container);
+    }
+  }, {
+    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({
+            sql: 'SAVEPOINT "RESTOREPOINT"',
+            parameters: []
+          });
+        }
+        (_this$queryRunner2 = this.queryRunner) === null || _this$queryRunner2 === void 0 ? void 0 : _this$queryRunner2.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);
+      }
+    }
+  }, {
+    key: "setDb",
+    value: function setDb(queryRunner) {
+      this.queryRunner = queryRunner;
+    }
+  }]);
+  return EditCellView;
+}();
+exports.EditCellView = EditCellView;

package/dist/views/EditCellView/styles.css

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

package/dist/views/ExecuteSQLView/ExecuteSQLView.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExecuteSQLView = void 0;
+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"); } }
+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 ExecuteSQLView = /*#__PURE__*/function () {
+  function ExecuteSQLView(rootEl) {
+    _classCallCheck(this, ExecuteSQLView);
+    this.rootEl = rootEl;
+    this.buildDom();
+  }
+  _createClass(ExecuteSQLView, [{
+    key: "buildDom",
+    value: function buildDom() {
+      var container = document.createElement('div');
+      container.id = 'execute_sql_container';
+      var header = document.createElement('div');
+      header.className = 'viewHeader';
+      header.innerText = 'Execute SQL';
+      container.appendChild(header);
+      this.textArea = document.createElement('textarea');
+      this.textArea.id = 'execute_sql_textarea';
+      container.appendChild(this.textArea);
+      var executeBtn = document.createElement('button');
+      executeBtn.innerText = 'Execute SQL';
+      executeBtn.onclick = this.handleExecuteSql.bind(this);
+      container.appendChild(executeBtn);
+      this.rootEl.appendChild(container);
+    }
+  }, {
+    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({
+          sql: this.textArea.value,
+          parameters: []
+        });
+      }
+    }
+  }, {
+    key: "setDb",
+    value: function setDb(queryRunner) {
+      this.queryRunner = queryRunner;
+    }
+  }]);
+  return ExecuteSQLView;
+}();
+exports.ExecuteSQLView = ExecuteSQLView;

package/dist/views/ExecuteSQLView/styles.css

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

package/dist/views/ExplorerView/ExplorerView.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExplorerView = void 0;
+var _viewerState = require("../../viewerState");
+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"); } }
+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 _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 ExplorerView = /*#__PURE__*/function () {
+  function ExplorerView(rootEl) {
+    _classCallCheck(this, ExplorerView);
+    _defineProperty(this, "expandedItems", {});
+    _defineProperty(this, "selectedItem", null);
+    this.dbs = [];
+    var dbListHeader = document.createElement('div');
+    dbListHeader.className = 'viewHeader';
+    dbListHeader.innerText = 'Database List';
+    rootEl.appendChild(dbListHeader);
+    this.containerEl = document.createElement('div');
+    this.containerEl.id = 'explorer_tree';
+    rootEl.appendChild(this.containerEl);
+  }
+  _createClass(ExplorerView, [{
+    key: "addDatabaseItem",
+    value: function addDatabaseItem(databaseItem) {
+      this.dbs.push(databaseItem);
+      this.addDbToDom(databaseItem);
+      if (this.selectedItem === null) {
+        var firstTable = document.querySelector('#explorer_tree > .table');
+        if (firstTable) {
+          this.selectTable(firstTable, databaseItem);
+        }
+      }
+    }
+  }, {
+    key: "addDbToDom",
+    value: function addDbToDom(databaseItem) {
+      var _this = this;
+      var dbRoot = document.createDocumentFragment();
+      var dbItem = document.createElement('div');
+      dbItem.innerText = databaseItem.filename;
+      dbItem.className = 'db';
+      var expandArrow = document.createElement('div');
+      expandArrow.className = 'expand';
+      expandArrow.innerText = '>';
+      expandArrow.style.cursor = 'pointer';
+      expandArrow.onclick = function () {
+        _this.expandedItems[databaseItem.filename] = !_this.expandedItems[databaseItem.filename];
+        expandArrow.classList.toggle('expanded');
+      };
+      expandArrow.classList.add('expanded');
+      dbItem.appendChild(expandArrow);
+      dbRoot.appendChild(dbItem);
+      databaseItem.tables.forEach(function (table) {
+        var tableItem = document.createElement('div');
+        tableItem.innerText = table;
+        tableItem.className = 'table';
+        tableItem.onclick = function () {
+          _this.selectTable(tableItem, databaseItem);
+        };
+        dbRoot.appendChild(tableItem);
+      });
+      this.containerEl.appendChild(dbRoot);
+    }
+  }, {
+    key: "selectTable",
+    value: function selectTable(tableEl, databaseItem) {
+      if (tableEl) {
+        var _this$selectedItem;
+        var tableName = tableEl.innerText;
+        (_this$selectedItem = this.selectedItem) === null || _this$selectedItem === void 0 ? void 0 : _this$selectedItem.classList.remove('selected');
+        tableEl.classList.add('selected');
+        this.selectedItem = tableEl;
+        var databasePath = databaseItem.filename;
+        _viewerState.ViewerState.instance.setSelectedTable({
+          tableName: tableName,
+          databasePath: databasePath
+        });
+      }
+    }
+  }]);
+  return ExplorerView;
+}();
+exports.ExplorerView = ExplorerView;

package/dist/views/ExplorerView/styles.css

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

package/dist/views/SqlLogView/SqlLogView.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.initSqlLogView = initSqlLogView;
+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"); } }
+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 SqlLogView = /*#__PURE__*/function () {
+  function SqlLogView(rootEl, queryRunner) {
+    _classCallCheck(this, SqlLogView);
+    queryRunner.addListener(this.handleQueryRun.bind(this));
+    var container = document.createElement('div');
+    container.id = 'sql_log_container';
+    var header = document.createElement('div');
+    header.className = 'viewHeader';
+    header.innerText = 'SQL Log';
+    container.appendChild(header);
+    this.textArea = document.createElement('textarea');
+    this.textArea.id = 'query_log_text';
+    this.textArea.readOnly = true;
+    container.appendChild(this.textArea);
+    rootEl.appendChild(container);
+  }
+  _createClass(SqlLogView, [{
+    key: "handleQueryRun",
+    value: function handleQueryRun(query) {
+      this.textArea.value += "".concat(query.sql, "\n");
+    }
+  }]);
+  return SqlLogView;
+}();
+function initSqlLogView(rootEl, queryRunner) {
+  return new SqlLogView(rootEl, queryRunner);
+}

package/dist/views/SqlLogView/styles.css

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