seatable-html-page-sdk 0.0.1

package/lib/iframe-adapter.js

@@ -0,0 +1,356 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
+var _createClass = require('@babel/runtime/helpers/createClass');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
+var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
+var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var POST_MESSAGE_TYPE = {
+  HTML_PAGE_REQUEST: 'HTML_PAGE_REQUEST',
+  HTML_PAGE_RESPONSE: 'HTML_PAGE_RESPONSE',
+  HTML_PAGE_EVENT: 'HTML_PAGE_EVENT',
+  WINDOW_EVENT: 'WINDOW_EVENT'
+};
+var POST_MESSAGE_REQUEST_TYPE = {
+  GET_SERVER: 'get_server',
+  GET_ACCESS_TOKEN: 'get_access_token',
+  GET_APP_UUID: 'get_app_uuid',
+  GET_PAGE_ID: 'get_page_id'
+};
+var WINDOW_EVENT_SOURCE_TYPE = {
+  APP: 'app',
+  IFRAME: 'iframe'
+};
+var SUPPORT_WINDOW_MOUSE_EVENT_TYPES = ['click', 'dblclick', 'mousemove', 'mouseenter', 'mouseleave', 'mousedown', 'mouseup', 'contextmenu'];
+var SUPPORT_WINDOW_KEYBOARD_EVENT_TYPES = ['keydown', 'keyup', 'keypress'];
+var SUPPORT_WINDOW_DRAG_EVENT_TYPES = ['dragstart', 'dragover', 'drag', 'dragend', 'dragenter', 'dragleave', 'drop'];
+var HIGH_FREQUENCY_WINDOW_EVENT_TYPES = ['mousemove', 'dragover'];
+var hasOwnProperty = function hasOwnProperty(obj, key) {
+  return Object.prototype.hasOwnProperty.call(obj, key);
+};
+var generatorBase64Code = function generatorBase64Code() {
+  var keyLength = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 4;
+  var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz0123456789';
+  var key = '';
+  for (var i = 0; i < keyLength; i++) {
+    key += possible.charAt(Math.floor(Math.random() * possible.length));
+  }
+  return key;
+};
+var createWindowEventData = function createWindowEventData(_ref) {
+  var eventType = _ref.eventType,
+    event = _ref.event;
+  if (SUPPORT_WINDOW_MOUSE_EVENT_TYPES.includes(eventType)) {
+    return {
+      type: eventType,
+      x: event.x,
+      y: event.y,
+      button: event.button,
+      buttons: event.buttons
+    };
+  }
+  if (SUPPORT_WINDOW_KEYBOARD_EVENT_TYPES.includes(eventType)) {
+    return {
+      type: eventType,
+      key: event.key,
+      code: event.code,
+      keyCode: event.keyCode,
+      ctrlKey: event.ctrlKey,
+      shiftKey: event.shiftKey,
+      altKey: event.altKey,
+      metaKey: event.metaKey,
+      repeat: event.repeat
+    };
+  }
+  if (SUPPORT_WINDOW_DRAG_EVENT_TYPES.includes(eventType)) {
+    return {
+      type: eventType,
+      x: event.x,
+      y: event.y
+    };
+  }
+  return null;
+};
+
+/**
+ * IframeAdapter – enables secure postMessage communication in production environments
+ * For HTML page running inside an iframe
+ */
+var IframeAdapter = /*#__PURE__*/function () {
+  function IframeAdapter() {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _classCallCheck__default["default"](this, IframeAdapter);
+    this.selfWindow = window.parent === window.self;
+    this.targetOrigin = options.targetOrigin || '*';
+    this.pendingRequests = {};
+    this.eventHandlers = {};
+    this.timeout = options.timeout || 10000;
+    this.setupMessageListener();
+  }
+  return _createClass__default["default"](IframeAdapter, [{
+    key: "generatorRequestId",
+    value: function generatorRequestId() {
+      var id = generatorBase64Code();
+      while (hasOwnProperty(this.pendingRequests, id)) {
+        id = generatorBase64Code();
+      }
+      return id;
+    }
+  }, {
+    key: "setupMessageListener",
+    value: function setupMessageListener() {
+      if (this.selfWindow) return;
+      window.addEventListener('message', this.handleMessage.bind(this));
+      this.setEventsListener();
+    }
+  }, {
+    key: "postWindowEvent",
+    value: function postWindowEvent(eventData) {
+      if (!eventData) return;
+      window.parent.postMessage({
+        type: POST_MESSAGE_TYPE.WINDOW_EVENT,
+        params: {
+          event_data: _objectSpread(_objectSpread({}, eventData), {}, {
+            source: WINDOW_EVENT_SOURCE_TYPE.IFRAME
+          })
+        }
+      }, this.targetOrigin);
+    }
+  }, {
+    key: "setEventsListener",
+    value: function setEventsListener() {
+      var _this = this;
+      var rafId = null;
+      var pendingEvent = null;
+      [].concat(SUPPORT_WINDOW_MOUSE_EVENT_TYPES, SUPPORT_WINDOW_KEYBOARD_EVENT_TYPES, SUPPORT_WINDOW_DRAG_EVENT_TYPES).forEach(function (eventType) {
+        window.addEventListener(eventType, function (event) {
+          if (event.source === WINDOW_EVENT_SOURCE_TYPE.APP) return;
+          if (HIGH_FREQUENCY_WINDOW_EVENT_TYPES.includes(eventType)) {
+            // High-frequency events that need throttling (use RAF to limit to 60fps)
+            // Use requestAnimationFrame for throttling high-frequency events
+            // Store the latest event with necessary data
+            pendingEvent = createWindowEventData({
+              eventType: eventType,
+              event: event
+            });
+
+            // Only schedule a new frame if one isn't already scheduled
+            if (rafId === null) {
+              rafId = requestAnimationFrame(function () {
+                if (pendingEvent) {
+                  _this.postWindowEvent(pendingEvent);
+                  pendingEvent = null;
+                  rafId = null;
+                }
+              });
+            }
+            return;
+          }
+
+          // Low-frequency events
+          _this.postWindowEvent(createWindowEventData({
+            eventType: eventType,
+            event: event
+          }));
+        }, true);
+      });
+    }
+  }, {
+    key: "request",
+    value: function () {
+      var _request = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee(method, params) {
+        var _this2 = this;
+        var requestId;
+        return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!this.selfWindow) {
+                _context.next = 2;
+                break;
+              }
+              return _context.abrupt("return", new Promise(function (resolve) {
+                resolve(null);
+              }));
+            case 2:
+              requestId = this.generatorRequestId();
+              return _context.abrupt("return", new Promise(function (resolve, reject) {
+                _this2.pendingRequests[requestId] = {
+                  resolve: resolve,
+                  reject: reject
+                };
+                window.parent.postMessage({
+                  type: POST_MESSAGE_TYPE.HTML_PAGE_REQUEST,
+                  requestId: requestId,
+                  method: method,
+                  params: params
+                }, _this2.targetOrigin);
+
+                // request timeout
+                // reject and clear the pending request
+                var timeoutId = setTimeout(function () {
+                  if (hasOwnProperty(_this2.pendingRequests, requestId)) {
+                    delete _this2.pendingRequests[requestId];
+                    reject(new Error("Request timeout: ".concat(method)));
+                  }
+                }, _this2.timeout);
+
+                // save timeoutId for the pending request
+                var pending = _this2.pendingRequests[requestId];
+                if (pending) {
+                  pending.timeoutId = timeoutId;
+                }
+              }));
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function request(_x, _x2) {
+        return _request.apply(this, arguments);
+      }
+      return request;
+    }()
+  }, {
+    key: "handleMessage",
+    value: function handleMessage(event) {
+      var _event$data = event.data,
+        type = _event$data.type,
+        requestId = _event$data.requestId,
+        data = _event$data.data,
+        error = _event$data.error,
+        eventType = _event$data.eventType,
+        payload = _event$data.payload;
+      if (type === POST_MESSAGE_TYPE.HTML_PAGE_RESPONSE) {
+        var pending = this.pendingRequests[requestId];
+        if (pending) {
+          clearTimeout(pending.timeoutId);
+          delete this.pendingRequests[requestId];
+          if (error) {
+            pending.reject(new Error(error));
+          } else {
+            pending.resolve(data ? JSON.parse(data) : null);
+          }
+        }
+      } else if (type === POST_MESSAGE_TYPE.HTML_PAGE_EVENT) {
+        this.emitEvent(eventType, payload);
+      } else if (type === POST_MESSAGE_TYPE.WINDOW_EVENT) {
+        var eventData = data.event_data;
+        if (!eventData) return;
+        var syntheticEvent;
+        var targetElement;
+        if (SUPPORT_WINDOW_KEYBOARD_EVENT_TYPES.includes(eventData.type)) {
+          syntheticEvent = new KeyboardEvent(eventData.type, {
+            bubbles: true,
+            cancelable: true,
+            key: eventData.key,
+            code: eventData.code,
+            keyCode: eventData.keyCode,
+            ctrlKey: eventData.ctrlKey,
+            shiftKey: eventData.shiftKey,
+            altKey: eventData.altKey,
+            metaKey: eventData.metaKey,
+            repeat: eventData.repeat,
+            view: window
+          });
+          targetElement = document.activeElement || document.body;
+        } else if (SUPPORT_WINDOW_MOUSE_EVENT_TYPES.includes(eventData.type)) {
+          syntheticEvent = new MouseEvent(eventData.type, {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+            clientX: eventData.x,
+            clientY: eventData.y,
+            screenX: eventData.x,
+            screenY: eventData.y,
+            button: eventData.button,
+            buttons: eventData.buttons
+          });
+          var elementAtPoint = document.elementFromPoint(eventData.x, eventData.y);
+          targetElement = elementAtPoint || document.body;
+        } else if (SUPPORT_WINDOW_DRAG_EVENT_TYPES.includes(eventData.type)) {
+          syntheticEvent = new DragEvent(eventData.type, {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+            clientX: eventData.x,
+            clientY: eventData.y,
+            screenX: eventData.x,
+            screenY: eventData.y,
+            button: eventData.button,
+            buttons: eventData.buttons
+          });
+          var _elementAtPoint = document.elementFromPoint(eventData.x, eventData.y);
+          targetElement = _elementAtPoint || document.body;
+        }
+        if (!targetElement || !syntheticEvent) return;
+
+        // Dispatch once on the target element, it will bubble up naturally
+        syntheticEvent.source = eventData.source;
+        targetElement.dispatchEvent(syntheticEvent);
+      }
+    }
+  }, {
+    key: "on",
+    value: function on(eventType, handler) {
+      var _this3 = this;
+      if (!hasOwnProperty(this.eventHandlers, eventType)) {
+        this.eventHandlers[eventType] = [];
+      }
+      this.eventHandlers[eventType].push(handler);
+      return function () {
+        return _this3.off(eventType, handler);
+      };
+    }
+  }, {
+    key: "off",
+    value: function off(eventType, handler) {
+      var handlers = this.eventHandlers[eventType];
+      if (handlers) {
+        var index = handlers.indexOf(handler);
+        if (index !== -1) {
+          handlers.splice(index, 1);
+        }
+      }
+    }
+  }, {
+    key: "emitEvent",
+    value: function emitEvent(eventType, payload) {
+      var handlers = this.eventHandlers[eventType] || [];
+      handlers.forEach(function (handler) {
+        try {
+          handler(payload);
+        } catch (error) {
+          // eslint-disable-next-line
+          console.error("Error in event handler for ".concat(eventType, ":"), error);
+        }
+      });
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.pendingRequests.forEach(function (pending) {
+        clearTimeout(pending.timeoutId);
+        pending.reject(new Error('Adapter destroyed'));
+      });
+      this.pendingRequests = {};
+      this.eventHandlers = {};
+    }
+  }]);
+}();
+
+exports.IframeAdapter = IframeAdapter;
+exports.POST_MESSAGE_REQUEST_TYPE = POST_MESSAGE_REQUEST_TYPE;

package/lib/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var sdk = require('./sdk.js');
+
+
+
+exports.HTMLPageSDK = sdk.HTMLPageSDK;

package/lib/sdk.js

@@ -0,0 +1,154 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
+var _createClass = require('@babel/runtime/helpers/createClass');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var universalAppApi = require('./apis/universal-app-api.js');
+var iframeAdapter = require('./iframe-adapter.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
+var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
+var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
+var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
+
+var HTMLPageSDK = /*#__PURE__*/function () {
+  function HTMLPageSDK() {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _classCallCheck__default["default"](this, HTMLPageSDK);
+    this.options = options || {};
+    this.iframeAdapter = new iframeAdapter.IframeAdapter(options);
+  }
+  return _createClass__default["default"](HTMLPageSDK, [{
+    key: "init",
+    value: function () {
+      var _init = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee() {
+        var _this$options, server, accessToken, appUuid;
+        return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (this.options.server) {
+                _context.next = 4;
+                break;
+              }
+              _context.next = 3;
+              return this.iframeAdapter.request(iframeAdapter.POST_MESSAGE_REQUEST_TYPE.GET_SERVER);
+            case 3:
+              this.options.server = _context.sent;
+            case 4:
+              if (this.options.accessToken) {
+                _context.next = 8;
+                break;
+              }
+              _context.next = 7;
+              return this.iframeAdapter.request(iframeAdapter.POST_MESSAGE_REQUEST_TYPE.GET_ACCESS_TOKEN);
+            case 7:
+              this.options.accessToken = _context.sent;
+            case 8:
+              if (this.options.appUuid) {
+                _context.next = 12;
+                break;
+              }
+              _context.next = 11;
+              return this.iframeAdapter.request(iframeAdapter.POST_MESSAGE_REQUEST_TYPE.GET_APP_UUID);
+            case 11:
+              this.options.appUuid = _context.sent;
+            case 12:
+              if (this.options.pageId) {
+                _context.next = 16;
+                break;
+              }
+              _context.next = 15;
+              return this.iframeAdapter.request(iframeAdapter.POST_MESSAGE_REQUEST_TYPE.GET_PAGE_ID);
+            case 15:
+              this.options.pageId = _context.sent;
+            case 16:
+              _this$options = this.options, server = _this$options.server, accessToken = _this$options.accessToken, appUuid = _this$options.appUuid;
+              this.universalAppAPI = new universalAppApi["default"]({
+                server: server,
+                accessToken: accessToken,
+                appUuid: appUuid
+              });
+            case 18:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function init() {
+        return _init.apply(this, arguments);
+      }
+      return init;
+    }()
+  }, {
+    key: "listRows",
+    value: function listRows(_ref) {
+      var tableName = _ref.tableName,
+        start = _ref.start,
+        limit = _ref.limit;
+      return this.universalAppAPI.listRows(this.options.pageId, tableName, start, limit);
+    }
+  }, {
+    key: "addRow",
+    value: function addRow(_ref2) {
+      var tableName = _ref2.tableName,
+        rowData = _ref2.rowData,
+        rowLinksData = _ref2.rowLinksData;
+      return this.universalAppAPI.addRow(this.options.pageId, tableName, rowData, rowLinksData);
+    }
+  }, {
+    key: "updateRow",
+    value: function updateRow(_ref3) {
+      var tableName = _ref3.tableName,
+        rowId = _ref3.rowId,
+        rowData = _ref3.rowData;
+      var rowsData = [{
+        id: rowId,
+        row: rowData
+      }];
+      this.batchUpdateRows({
+        tableName: tableName,
+        rowsData: rowsData
+      });
+    }
+  }, {
+    key: "deleteRow",
+    value: function deleteRow(_ref4) {
+      var tableName = _ref4.tableName,
+        rowId = _ref4.rowId;
+      var rowsIds = [rowId];
+      return this.batchDeleteRows({
+        tableName: tableName,
+        rowsIds: rowsIds
+      });
+    }
+  }, {
+    key: "batchAddRows",
+    value: function batchAddRows(_ref5) {
+      var tableName = _ref5.tableName,
+        rowsData = _ref5.rowsData,
+        rowsLinksData = _ref5.rowsLinksData;
+      return this.universalAppAPI.addRows(this.options.pageId, tableName, rowsData, rowsLinksData);
+    }
+  }, {
+    key: "batchUpdateRows",
+    value: function batchUpdateRows(_ref6) {
+      var tableName = _ref6.tableName,
+        rowsData = _ref6.rowsData;
+      return this.universalAppAPI.updateRows(this.options.pageId, tableName, rowsData);
+    }
+  }, {
+    key: "batchDeleteRows",
+    value: function batchDeleteRows(_ref7) {
+      var tableName = _ref7.tableName,
+        rowsIds = _ref7.rowsIds;
+      return this.universalAppAPI.deleteRows(this.options.pageId, tableName, rowsIds);
+    }
+  }]);
+}();
+
+exports.HTMLPageSDK = HTMLPageSDK;

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "seatable-html-page-sdk",
+  "version": "0.0.1",
+  "description": "JavaScript SDK for embedding HTML pages within SeaTable Universal Apps.",
+  "main": "./lib/index.js",
+  "module": "./es/index.js",
+  "private": false,
+  "scripts": {
+    "test": "jest --watchAll",
+    "test-cov": "jest --coverage",
+    "eslint": "eslint ./src/**",
+    "eslint-fix": "eslint ./src/** --fix",
+    "build": "rm -rf dist lib es && NODE_ENV=production rollup -c",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "HTML page"
+  ],
+  "author": "SeaTable",
+  "files": [
+    "dist",
+    "lib",
+    "es",
+    "package.json"
+  ],
+  "dependencies": {
+    "axios": "~1.12.*"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/plugin-transform-runtime": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/runtime": "^7.26.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-eslint": "^9.0.5",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@types/jest": "^30.0.0",
+    "babel-jest": "^30.2.0",
+    "eslint": "^8.57.1",
+    "eslint-config-airbnb": "^19.0.4",
+    "jest": "^30.2.0",
+    "rollup": "2.79.2"
+  }
+}