@bentolabs/sdk 1.1.0 → 1.2.0

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import { generateSelector } from 'rrweb';
+export { generateSelector };
 interface SDKConfig {
     apiKey: string;
     endpoint: string;

package/dist/index.js

@@ -50,7 +50,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   BentoLabsSDK: () => BentoLabsSDK,
-  default: () => index_default
+  default: () => index_default,
+  generateSelector: () => generateSelector
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -9093,6 +9094,115 @@ function inDom(n2) {
   if (!doc) return false;
   return index.contains(doc, n2) || shadowHostInDom(n2);
 }
+function isStableId(id) {
+  if (!id) return false;
+  if (id.length > 30) return false;
+  if (/\d{3,}/.test(id)) return false;
+  if (/^:r[a-z0-9]+:?$/i.test(id)) return false;
+  if (/^radix-/i.test(id)) return false;
+  if (/^headlessui-/i.test(id)) return false;
+  if (/^mui-/i.test(id)) return false;
+  if (/[a-f0-9]{8,}/i.test(id)) return false;
+  if (/^(sc|css|emotion|styled)-/i.test(id)) return false;
+  return true;
+}
+function normalizeHref(href) {
+  if (!href) return null;
+  if (href.startsWith("javascript:") || href.startsWith("data:")) return null;
+  if (href.startsWith("#")) return href;
+  try {
+    const url = new URL(href, "http://x");
+    return url.pathname;
+  } catch (e) {
+    return href.split("?")[0].split("#")[0];
+  }
+}
+function escapeValue(value) {
+  return value.replace(/\|/g, "%7C").replace(/=/g, "%3D");
+}
+function truncate(value, maxLength) {
+  if (value.length <= maxLength) return value;
+  return value.substring(0, maxLength - 3) + "...";
+}
+function getDirectText$1(element) {
+  let text = "";
+  for (const node2 of Array.from(element.childNodes)) {
+    if (node2.nodeType === Node.TEXT_NODE) {
+      text += node2.textContent || "";
+    }
+  }
+  return text.replace(/\s+/g, " ").trim();
+}
+function buildBentoSelector(element) {
+  const parts = [];
+  const tag = element.tagName.toLowerCase();
+  parts.push(tag);
+  const testId = element.getAttribute("data-testid");
+  if (testId) {
+    parts.push(`testid=${escapeValue(truncate(testId, 50))}`);
+  }
+  const dataTest = element.getAttribute("data-test");
+  if (dataTest) {
+    parts.push(`test=${escapeValue(truncate(dataTest, 50))}`);
+  }
+  const dataCy = element.getAttribute("data-cy");
+  if (dataCy) {
+    parts.push(`cy=${escapeValue(truncate(dataCy, 50))}`);
+  }
+  const id = element.id;
+  if (id && isStableId(id)) {
+    parts.push(`id=${escapeValue(id)}`);
+  }
+  const name = element.getAttribute("name");
+  if (name) {
+    parts.push(`name=${escapeValue(truncate(name, 50))}`);
+  }
+  const type = element.getAttribute("type");
+  if (type) {
+    parts.push(`type=${escapeValue(type.toLowerCase())}`);
+  }
+  const role = element.getAttribute("role");
+  if (role) {
+    parts.push(`role=${escapeValue(role)}`);
+  }
+  const ariaLabel = element.getAttribute("aria-label");
+  if (ariaLabel) {
+    parts.push(`label=${escapeValue(truncate(ariaLabel, 50))}`);
+  }
+  const href = normalizeHref(element.getAttribute("href"));
+  if (href) {
+    parts.push(`href=${escapeValue(href)}`);
+  }
+  const placeholder = element.getAttribute("placeholder");
+  if (placeholder) {
+    parts.push(`placeholder=${escapeValue(truncate(placeholder, 50))}`);
+  }
+  const alt = element.getAttribute("alt");
+  if (alt) {
+    parts.push(`alt=${escapeValue(truncate(alt, 50))}`);
+  }
+  const title = element.getAttribute("title");
+  if (title) {
+    parts.push(`title=${escapeValue(truncate(title, 50))}`);
+  }
+  const interactiveTags = ["button", "a", "label", "span", "div", "li", "td", "th", "h1", "h2", "h3", "h4", "h5", "h6", "p"];
+  if (interactiveTags.includes(tag)) {
+    const text = getDirectText$1(element);
+    if (text) {
+      parts.push(`text=${escapeValue(truncate(text, 50))}`);
+    }
+  }
+  return parts.join("|");
+}
+function generateSelector(outerHTML) {
+  const parser2 = new DOMParser();
+  const doc = parser2.parseFromString(outerHTML, "text/html");
+  const element = doc.body.firstElementChild;
+  if (!element) {
+    throw new Error("Invalid outerHTML: could not parse element");
+  }
+  return buildBentoSelector(element);
+}
 var DEFAULT_OPTIONS = {
   maxTextLength: 500,
   includeOuterHTML: true,
@@ -9117,28 +9227,6 @@ function truncateText(text, maxLength) {
   }
   return text.substring(0, maxLength - 3) + "...";
 }
-function getLimitedOuterHTML(element, maxDepth, doc) {
-  if (maxDepth <= 0) {
-    const clone2 = element.cloneNode(false);
-    return clone2.outerHTML;
-  }
-  const clone = element.cloneNode(false);
-  for (const child of Array.from(element.childNodes)) {
-    if (child.nodeType === Node.TEXT_NODE) {
-      const text = child.textContent || "";
-      const truncated = text.length > 100 ? text.substring(0, 97) + "..." : text;
-      clone.appendChild(doc.createTextNode(truncated));
-    } else if (child.nodeType === Node.ELEMENT_NODE) {
-      const childHtml = getLimitedOuterHTML(child, maxDepth - 1, doc);
-      const template = doc.createElement("template");
-      template.innerHTML = childHtml;
-      if (template.content.firstChild) {
-        clone.appendChild(template.content.firstChild.cloneNode(true));
-      }
-    }
-  }
-  return clone.outerHTML;
-}
 function isInputElement(element) {
   const tagName = element.tagName.toUpperCase();
   return tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT";
@@ -9152,7 +9240,6 @@ function extractElementContext(element, options = {}) {
   } = options;
   const tagName = element.tagName.toLowerCase();
   const htmlElement = element;
-  const doc = element.ownerDocument;
   const context = {
     tagName
   };
@@ -9206,13 +9293,9 @@ function extractElementContext(element, options = {}) {
   if (alt) {
     context.alt = alt;
   }
-  if (isClickEvent && opts.includeOuterHTML) {
+  if (isClickEvent) {
     try {
-      context.outerHTML = getLimitedOuterHTML(
-        element,
-        opts.outerHTMLDepth,
-        doc
-      );
+      context.bentoSelector = buildBentoSelector(element);
     } catch (e) {
     }
   }