@qoh/core-react 1.0.0-rc.5 → 1.0.0-rc.6

package/lib/QueenofheartsService.js

@@ -0,0 +1,662 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fetchDynamicComponents = exports.componentRegistry = exports.QueenofheartsService = exports.Filter = void 0;
+exports.getAllregisteredComponents = getAllregisteredComponents;
+exports.registerComponent = registerComponent;
+exports.registerLazyComponent = registerLazyComponent;
+exports.unregisterComponent = unregisterComponent;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _ApiError = require("./ApiError");
+var _react = _interopRequireWildcard(require("react"));
+var _Dodo = _interopRequireDefault(require("./components/Dodo"));
+var _QueenofheartsService; //TODO: remove????
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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) { (0, _defineProperty2["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 Filter = exports.Filter = /*#__PURE__*/function (Filter) {
+  Filter["eq"] = "eq";
+  Filter["in"] = "in";
+  Filter["neq"] = "neq";
+  Filter["notIn"] = "notIn";
+  return Filter;
+}({});
+//const qohUri = 'http://localhost:3000/api';
+var qohUri = 'https://qoh.azurewebsites.net/api';
+var componentRegistry = exports.componentRegistry = {};
+function unregisterComponent(name) {
+  delete componentRegistry[name];
+}
+function registerComponent(functionalComponent, typeName, fieldNames, overwrite) {
+  if (typeName !== undefined) {
+    if (overwrite || componentRegistry[typeName] === undefined) {
+      var componentWithFieldNames = {
+        component: functionalComponent,
+        fieldNames: fieldNames
+      };
+      componentRegistry[typeName] = componentWithFieldNames;
+    }
+  }
+}
+function registerLazyComponent(loader, typeName, fieldNames) {
+  var overwrite = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  if (!!typeName) {
+    if (overwrite || componentRegistry[typeName] === undefined) {
+      componentRegistry[typeName] = {
+        fieldNames: fieldNames,
+        loader: loader
+      };
+      //console.log('Registred lazy type: ' + typeName);
+    }
+  } else {
+    console.warn("registerComponent failed: undefined typeName ");
+  }
+}
+function getAllregisteredComponents() {
+  return componentRegistry;
+}
+var fetchDynamicComponents = exports.fetchDynamicComponents = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(props) {
+    var instance, asyncTypeNames, y;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          instance = QueenofheartsService.getInstance();
+          asyncTypeNames = instance.findComponentsInProps(props).filter(function (value, index, arr) {
+            return arr.indexOf(value) === index;
+          });
+          _context.next = 4;
+          return instance.fetchDynamicComponents(asyncTypeNames);
+        case 4:
+          y = _context.sent;
+          return _context.abrupt("return", y.filter(function (x) {
+            return x !== null;
+          }));
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function fetchDynamicComponents(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var QueenofheartsService = exports.QueenofheartsService = /*#__PURE__*/function () {
+  function QueenofheartsService(backend, apiToken, localServer) {
+    var _this = this;
+    (0, _classCallCheck2["default"])(this, QueenofheartsService);
+    (0, _defineProperty2["default"])(this, "data", void 0);
+    (0, _defineProperty2["default"])(this, "debug", void 0);
+    (0, _defineProperty2["default"])(this, "backend", void 0);
+    (0, _defineProperty2["default"])(this, "apiToken", void 0);
+    (0, _defineProperty2["default"])(this, "localServer", void 0);
+    //debugger-data:
+    (0, _defineProperty2["default"])(this, "latestUrl", '');
+    (0, _defineProperty2["default"])(this, "latestData", {});
+    (0, _defineProperty2["default"])(this, "findComponentsInProps", function (props) {
+      // returns unique list of components in props and it's children
+      if (props && typeof props !== 'string') {
+        var myName = props.__typename ? [props.__typename] : [];
+        var elements = Array.isArray(props) ? props : Object.values(props);
+        var children = [].concat(myName, (0, _toConsumableArray2["default"])(elements.reduce(function (acc, item) {
+          var res = _this.findComponentsInProps(item);
+          if (res) {
+            acc = [].concat((0, _toConsumableArray2["default"])(acc), (0, _toConsumableArray2["default"])(res));
+          }
+          return acc;
+        }, [])));
+        return children;
+      }
+      return [];
+    });
+    (0, _defineProperty2["default"])(this, "fetchDynamicComponents", /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(componentsToLoad) {
+        var needsLoading, hasLoaded, loadedComponents;
+        return _regenerator["default"].wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              needsLoading = false;
+              hasLoaded = false; //console.log('components to fetch');
+              //console.log(Object.values(componentsToLoad));
+              loadedComponents = Promise.all(componentsToLoad.map(/*#__PURE__*/function () {
+                var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(typeName) {
+                  var _componentRegistry$ty;
+                  var existingComponent, component;
+                  return _regenerator["default"].wrap(function _callee2$(_context2) {
+                    while (1) switch (_context2.prev = _context2.next) {
+                      case 0:
+                        if (!componentRegistry[typeName]) {
+                          _context2.next = 8;
+                          break;
+                        }
+                        existingComponent = componentRegistry[typeName].component;
+                        if (!(existingComponent === undefined)) {
+                          _context2.next = 8;
+                          break;
+                        }
+                        needsLoading = true;
+                        //console.log(`Component ${typeName}: start asynchron loading... `);
+                        _context2.next = 6;
+                        return _this.loadAsyncComponent(typeName);
+                      case 6:
+                        component = _context2.sent;
+                        return _context2.abrupt("return", component);
+                      case 8:
+                        if (!((_componentRegistry$ty = componentRegistry[typeName]) !== null && _componentRegistry$ty !== void 0 && _componentRegistry$ty.loader)) {
+                          _context2.next = 10;
+                          break;
+                        }
+                        return _context2.abrupt("return", typeName);
+                      case 10:
+                        return _context2.abrupt("return", null);
+                      case 11:
+                      case "end":
+                        return _context2.stop();
+                    }
+                  }, _callee2);
+                }));
+                return function (_x3) {
+                  return _ref3.apply(this, arguments);
+                };
+              }()));
+              hasLoaded = true;
+              return _context3.abrupt("return", loadedComponents);
+            case 5:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      }));
+      return function (_x2) {
+        return _ref2.apply(this, arguments);
+      };
+    }());
+    (0, _defineProperty2["default"])(this, "buildUrl", function (endpoint) {
+      var _this$localServer;
+      var url = (_this$localServer = _this.localServer) !== null && _this$localServer !== void 0 ? _this$localServer : qohUri;
+      var suffix = _this.apiToken ? "?code=".concat(_this.apiToken) : '';
+      return "".concat(url, "/").concat(endpoint).concat(suffix);
+    });
+    (0, _defineProperty2["default"])(this, "queryGraphql", /*#__PURE__*/function () {
+      var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4(graphqlQuery) {
+        var queryUrl, response, body, errorResponse;
+        return _regenerator["default"].wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              /*    
+              if (!this.backend.uri) {
+                throw new Error(
+                  'Backend-Uri is missing. The Backend-Uri is either set via the constructor or the init methode.'
+                );
+              }
+              if (!this.backend.token) {
+                throw new Error(
+                  'Token is missing. The token is eihter set via the constructor or the init methode.'
+                );
+              }
+              */
+              queryUrl = _this.buildUrl('execGraphqlQuery');
+              console.warn("using url : ".concat(queryUrl));
+              if (!queryUrl) {
+                _context4.next = 19;
+                break;
+              }
+              _context4.next = 5;
+              return fetch(queryUrl, {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                  uri: _this.backend.uri,
+                  query: graphqlQuery,
+                  token: _this.backend.token
+                })
+              });
+            case 5:
+              response = _context4.sent;
+              if (!response.ok) {
+                _context4.next = 14;
+                break;
+              }
+              _context4.next = 9;
+              return response.json();
+            case 9:
+              body = _context4.sent;
+              _this.sendDebugEvent();
+              return _context4.abrupt("return", body);
+            case 14:
+              _context4.next = 16;
+              return response.json();
+            case 16:
+              errorResponse = _context4.sent;
+              console.log(errorResponse);
+              throw new _ApiError.ApiError(response.status, errorResponse);
+            case 19:
+              throw new _ApiError.ApiError(500, {
+                id: '99',
+                summary: 'queryUrl was not set',
+                details: "LocalServer: ".concat(_this.localServer)
+              });
+            case 20:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4);
+      }));
+      return function (_x4) {
+        return _ref4.apply(this, arguments);
+      };
+    }());
+    (0, _defineProperty2["default"])(this, "query", /*#__PURE__*/function () {
+      var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5(queryName, options) {
+        var queryUrl, extendedVariables, _extendedVariables$fi, _options$variables, _extendedVariables$fi2, response, _yield$response$json, body, normalizedBody, injectedBody, errorResponse;
+        return _regenerator["default"].wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
+            case 0:
+              // if (!this.backend.uri) {
+              //   throw new Error(
+              //     'Backend-Uri is missing. The Backend-Uri is either set via the constructor or the init methode.'
+              //   );
+              // }
+              // if (!this.backend.token) {
+              //   throw new Error(
+              //     'Token is missing. The token is eihter set via the constructor or the init methode.'
+              //   );
+              // }
+              //    if (queryName) {
+              //      throw new Error('QueryName is missing. The QueryName is has to be provided when calling the query methode. The queryName refers to the name of the objects to be queried. E.g. pages');
+              //    }
+              queryUrl = _this.buildUrl('execQuery');
+              extendedVariables = options !== null && options !== void 0 && options.variables ? _objectSpread({}, options.variables) : {};
+              if (options !== null && options !== void 0 && options.locale) {
+                extendedVariables.locale = options.locale;
+              }
+              if (options !== null && options !== void 0 && options.filter && Array.isArray(options.filter)) {
+                if (!extendedVariables.filter) {
+                  extendedVariables.filter = [];
+                }
+                (_extendedVariables$fi = extendedVariables.filter).push.apply(_extendedVariables$fi, (0, _toConsumableArray2["default"])(options.filter));
+                if (options !== null && options !== void 0 && (_options$variables = options.variables) !== null && _options$variables !== void 0 && _options$variables.filter && Array.isArray(options.variables.filter)) {
+                  (_extendedVariables$fi2 = extendedVariables.filter).push.apply(_extendedVariables$fi2, (0, _toConsumableArray2["default"])(options.variables.filter));
+                }
+              }
+              if (!(queryUrl && !!options)) {
+                _context5.next = 35;
+                break;
+              }
+              _context5.next = 7;
+              return fetch(queryUrl, {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json'
+                },
+                credentials: 'include',
+                body: JSON.stringify({
+                  uri: _this.backend.uri,
+                  queryname: queryName,
+                  token: _this.backend.token,
+                  variables: extendedVariables,
+                  components: _this.getRegisteredComponentsWithFields(),
+                  ignoreProperties: options.ignoreProperties,
+                  depth: options.depth
+                })
+              });
+            case 7:
+              response = _context5.sent;
+              if (!response.ok) {
+                _context5.next = 28;
+                break;
+              }
+              _context5.next = 11;
+              return response.json();
+            case 11:
+              _context5.t1 = _yield$response$json = _context5.sent;
+              _context5.t0 = _context5.t1 === null;
+              if (_context5.t0) {
+                _context5.next = 15;
+                break;
+              }
+              _context5.t0 = _yield$response$json === void 0;
+            case 15:
+              if (!_context5.t0) {
+                _context5.next = 19;
+                break;
+              }
+              _context5.t2 = void 0;
+              _context5.next = 20;
+              break;
+            case 19:
+              _context5.t2 = _yield$response$json.data;
+            case 20:
+              body = _context5.t2;
+              normalizedBody = _this.backend.normalize(body);
+              injectedBody = _this.debug ? _this.injectIds(normalizedBody) : normalizedBody;
+              _this.latestData = injectedBody;
+              _this.sendDebugEvent();
+              return _context5.abrupt("return", injectedBody);
+            case 28:
+              _context5.next = 30;
+              return response.json();
+            case 30:
+              errorResponse = _context5.sent;
+              console.log(errorResponse);
+              throw new _ApiError.ApiError(response.status, errorResponse);
+            case 33:
+              _context5.next = 36;
+              break;
+            case 35:
+              throw new _ApiError.ApiError(500, {
+                id: '99',
+                summary: "Query: queryUrl (".concat(queryUrl, ") or options are invalid"),
+                details: "queryUrl: ".concat(queryUrl)
+              });
+            case 36:
+            case "end":
+              return _context5.stop();
+          }
+        }, _callee5);
+      }));
+      return function (_x5, _x6) {
+        return _ref5.apply(this, arguments);
+      };
+    }());
+    (0, _defineProperty2["default"])(this, "getRegisteredComponentsWithFields", function () {
+      var components = {};
+      var entries = Object.entries(getAllregisteredComponents());
+      if (entries && Array.isArray(entries)) {
+        entries.forEach(function (_ref6) {
+          var _ref7 = (0, _slicedToArray2["default"])(_ref6, 2),
+            key = _ref7[0],
+            value = _ref7[1];
+          var fields = {};
+          var fieldNames = value.fieldNames;
+          var hasAtLeastOneField = false;
+          if (fieldNames && Array.isArray(fieldNames)) {
+            fieldNames.forEach(function (field) {
+              fields[field] = true;
+              hasAtLeastOneField = true;
+            });
+          }
+          if (hasAtLeastOneField) {
+            components[key] = fields;
+          } else {
+            components[key] = {
+              __all: true
+            };
+          }
+        });
+      }
+      return components;
+    });
+    (0, _defineProperty2["default"])(this, "getQueries", /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+      var queryUrl, response, body;
+      return _regenerator["default"].wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
+          case 0:
+            queryUrl = _this.buildUrl('queries');
+            if (!(queryUrl && _this.backend && (_this.localServer || _this.backend.token))) {
+              _context6.next = 18;
+              break;
+            }
+            _context6.next = 4;
+            return fetch(queryUrl, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json'
+              },
+              body: JSON.stringify({
+                uri: _this.backend.uri,
+                token: _this.backend.token || null
+              })
+            });
+          case 4:
+            response = _context6.sent;
+            if (!response.ok) {
+              _context6.next = 16;
+              break;
+            }
+            _context6.prev = 6;
+            _context6.next = 9;
+            return response.json();
+          case 9:
+            body = _context6.sent;
+            return _context6.abrupt("return", body);
+          case 13:
+            _context6.prev = 13;
+            _context6.t0 = _context6["catch"](6);
+            console.error(_context6.t0);
+          case 16:
+            _context6.next = 19;
+            break;
+          case 18:
+            console.error('api, uri and CMSToken have to be provided');
+          case 19:
+            return _context6.abrupt("return", '');
+          case 20:
+          case "end":
+            return _context6.stop();
+        }
+      }, _callee6, null, [[6, 13]]);
+    })));
+    this.backend = backend;
+    this.apiToken = apiToken;
+    this.localServer = localServer;
+    // devtools-panel events and debug-option
+    this.debug = typeof document !== 'undefined' && document.getElementsByTagName('body')[0].classList.contains('qoh-inject-ids');
+    if (this.debug && typeof window !== 'undefined') {
+      window.addEventListener('QueenOfHearts-RequestData', function () {
+        _this.sendDebugEvent();
+      });
+      window.addEventListener('QueenOfHearts-RequestQueries', function () {
+        _this.sendQueriesEvent();
+      });
+      window.addEventListener('QueenOfHearts-HighlightComponent', function (event) {
+        _this.highlightComponent(event.detail);
+      });
+      window.addEventListener('QueenOfHearts-RequestComponentHTML', function (event) {
+        _this.sendComponentHTML(event.detail);
+      });
+    }
+  }
+  return (0, _createClass2["default"])(QueenofheartsService, [{
+    key: "loadAsyncComponent",
+    value: function () {
+      var _loadAsyncComponent = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee7(typeName) {
+        var template, loader, component;
+        return _regenerator["default"].wrap(function _callee7$(_context7) {
+          while (1) switch (_context7.prev = _context7.next) {
+            case 0:
+              //console.log(`load Async: ${typeName}`);
+              template = componentRegistry[typeName];
+              if (!(template && template.component === undefined)) {
+                _context7.next = 10;
+                break;
+              }
+              if (template !== null && template !== void 0 && template.component) {
+                _context7.next = 9;
+                break;
+              }
+              if (!template.loader) {
+                _context7.next = 9;
+                break;
+              }
+              loader = template.loader; //componentRegistry[typeName].loader = undefined;
+              _context7.next = 7;
+              return loader();
+            case 7:
+              component = _context7.sent;
+              if (component) {
+                componentRegistry[typeName].component = component["default"];
+                //console.log('loaded async component : ' + typeName);
+              } else {
+                console.error("error loading ".concat(typeName));
+                console.error(component);
+              }
+            case 9:
+              return _context7.abrupt("return", typeName);
+            case 10:
+              return _context7.abrupt("return", null);
+            case 11:
+            case "end":
+              return _context7.stop();
+          }
+        }, _callee7);
+      }));
+      function loadAsyncComponent(_x7) {
+        return _loadAsyncComponent.apply(this, arguments);
+      }
+      return loadAsyncComponent;
+    }()
+  }, {
+    key: "createComponent",
+    value: function createComponent(props) {
+      var _template$component;
+      var data = props.data,
+        _props$contextProps = props.contextProps,
+        contextProps = _props$contextProps === void 0 ? {} : _props$contextProps;
+      var typeName = data.__typename;
+      var template = componentRegistry[typeName];
+      if (template) {
+        if (template.loader) {
+          /*#__PURE__*/(0, _react.lazy)(template.loader);
+        }
+      }
+      var functionalComponent = (_template$component = template === null || template === void 0 ? void 0 : template.component) !== null && _template$component !== void 0 ? _template$component : _Dodo["default"];
+      return /*#__PURE__*/_react["default"].createElement(functionalComponent, _objectSpread(_objectSpread({}, data), {}, {
+        contextProps: contextProps
+      }));
+    }
+  }, {
+    key: "injectIds",
+    value: function injectIds(data) {
+      var _this2 = this;
+      if (Array.isArray(data)) {
+        data.forEach(function (entry) {
+          return _this2.injectIds(entry);
+        });
+      } else if (data && (0, _typeof2["default"])(data) === 'object') {
+        if (data.hasOwnProperty('__typename')) {
+          var id = Math.random().toString();
+          data.__qohId = id.substr(id.indexOf('.') + 1);
+        }
+        Object.keys(data).forEach(function (key) {
+          return data[key] = _this2.injectIds(data[key]);
+        });
+      }
+      return data;
+    }
+  }, {
+    key: "sendDebugEvent",
+    value: function sendDebugEvent() {
+      if (typeof window === 'undefined') return;
+      var debugData = {
+        registeredComponents: Object.keys(componentRegistry),
+        url: this.latestUrl,
+        data: this.latestData
+      };
+      var event = new CustomEvent('QueenOfHearts-DebuggingData', {
+        detail: debugData
+      });
+      window.dispatchEvent(event);
+    }
+  }, {
+    key: "sendQueriesEvent",
+    value: function () {
+      var _sendQueriesEvent = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee8() {
+        var event;
+        return _regenerator["default"].wrap(function _callee8$(_context8) {
+          while (1) switch (_context8.prev = _context8.next) {
+            case 0:
+              if (!(typeof window === 'undefined')) {
+                _context8.next = 2;
+                break;
+              }
+              return _context8.abrupt("return");
+            case 2:
+              _context8.t0 = CustomEvent;
+              _context8.next = 5;
+              return this.getQueries();
+            case 5:
+              _context8.t1 = _context8.sent;
+              _context8.t2 = {
+                detail: _context8.t1
+              };
+              event = new _context8.t0('QueenOfHearts-AvailableQueries', _context8.t2);
+              window.dispatchEvent(event);
+            case 9:
+            case "end":
+              return _context8.stop();
+          }
+        }, _callee8, this);
+      }));
+      function sendQueriesEvent() {
+        return _sendQueriesEvent.apply(this, arguments);
+      }
+      return sendQueriesEvent;
+    }()
+  }, {
+    key: "sendComponentHTML",
+    value: function sendComponentHTML(id) {
+      var _document$querySelect;
+      if (typeof window === 'undefined') return;
+      var component = (_document$querySelect = document.querySelector("[qohId='".concat(id, "']"))) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.nextElementSibling;
+      if (component) {
+        var event = new CustomEvent('QueenOfHearts-SelectedComponentHTML', {
+          detail: {
+            qohId: id,
+            html: component.outerHTML
+          }
+        });
+        window.dispatchEvent(event);
+      }
+    }
+  }, {
+    key: "highlightComponent",
+    value: function highlightComponent(id) {
+      var _document$querySelect2;
+      var animation = [{
+        outline: 'thick auto white'
+      }, {
+        outline: 'thick auto red'
+      }];
+      var animationTiming = {
+        duration: 1000,
+        iterations: 2
+      };
+      var component = (_document$querySelect2 = document.querySelector("[qohId='".concat(id, "']"))) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.nextElementSibling;
+      component && component.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'center'
+      });
+      component && component.animate(animation, animationTiming);
+    }
+  }], [{
+    key: "init",
+    value: function init(backend, apiToken, localServer) {
+      QueenofheartsService.instance = new QueenofheartsService(backend, apiToken, localServer);
+    }
+  }, {
+    key: "getInstance",
+    value: function getInstance() {
+      if (!QueenofheartsService.instance) console.error('QueenofheartsService was not initialized using QueenofheartsService.init(backend, apiToken)');
+      return QueenofheartsService.instance;
+    }
+  }]);
+}();
+_QueenofheartsService = QueenofheartsService;
+(0, _defineProperty2["default"])(QueenofheartsService, "instance", void 0);