webmarker-js 0.3.0 → 0.4.0

package/README.md

@@ -32,7 +32,7 @@ You can use this information to build your prompt for the vision-language model.
 Example prompt:
 
 ```javascript
-let markedElements = await mark();
+let markedElements = mark();
 
 let prompt = `The following is a screenshot of a web page.
 
@@ -148,7 +148,7 @@ Only mark elements that are visible in the current viewport.
 ### Advanced example
 
 ```typescript
-const markedElements = await mark({
+const markedElements = mark({
   // Only mark buttons and inputs
   selector: "button, input",
   // Use test id attribute for marker labels

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 type Placement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
-type StyleFunction = (element: Element) => Partial<CSSStyleDeclaration>;
+type StyleFunction = (element: Element, index: number) => Partial<CSSStyleDeclaration>;
 type StyleObject = Partial<CSSStyleDeclaration>;
 interface MarkOptions {
     /**
@@ -51,13 +51,21 @@ interface MarkOptions {
      * @default false
      */
     viewPortOnly?: boolean;
+    /**
+     * Additional class to apply to the mark elements.
+     */
+    markClass?: string;
+    /**
+     * Additional class to apply to the bounding box elements.
+     */
+    boundingBoxClass?: string;
 }
 interface MarkedElement {
     element: Element;
     markElement: HTMLElement;
     boundingBoxElement?: HTMLElement;
 }
-declare function mark(options?: MarkOptions): Promise<Record<string, MarkedElement>>;
+declare function mark(options?: MarkOptions): Record<string, MarkedElement>;
 declare function unmark(): void;
 declare function isMarked(): boolean;
 export { mark, unmark, isMarked };

package/dist/main.js

@@ -928,8 +928,8 @@ var WebMarker = (() => {
 
   // src/index.ts
   var cleanupFns = [];
-  function mark() {
-    return __async(this, arguments, function* (options = {}) {
+  function mark(options = {}) {
+    try {
       const {
         selector = "button, input, a, select, textarea",
         getLabel = (_, index) => index.toString(),
@@ -948,34 +948,57 @@ var WebMarker = (() => {
         },
         showBoundingBoxes = true,
         containerElement = document.body,
-        viewPortOnly = false
+        viewPortOnly = false,
+        markClass = "",
+        boundingBoxClass = ""
       } = options;
+      const isInViewport = (el) => {
+        const rect = el.getBoundingClientRect();
+        return rect.top < window.innerHeight && rect.bottom >= 0;
+      };
       const elements = Array.from(
         containerElement.querySelectorAll(selector)
-      ).filter(
-        (el) => !viewPortOnly || el.getBoundingClientRect().top < window.innerHeight
-      );
+      ).filter((el) => !viewPortOnly || isInViewport(el));
       const markedElements = {};
-      yield Promise.all(
-        elements.map((element, index) => __async(this, null, function* () {
-          const label = getLabel(element, index);
-          const markElement = createMark(element, markStyle, label, markPlacement);
-          const boundingBoxElement = showBoundingBoxes ? createBoundingBox(element, boundingBoxStyle, label) : void 0;
-          markedElements[label] = { element, markElement, boundingBoxElement };
-          element.setAttribute(markAttribute, label);
-        }))
-      );
+      const fragment = document.createDocumentFragment();
+      elements.forEach((element, index) => {
+        const label = getLabel(element, index);
+        const markElement = createMark(
+          element,
+          index,
+          markStyle,
+          label,
+          markPlacement,
+          markClass
+        );
+        fragment.appendChild(markElement);
+        const boundingBoxElement = showBoundingBoxes ? createBoundingBox(element, boundingBoxStyle, label, boundingBoxClass) : void 0;
+        if (boundingBoxElement) {
+          fragment.appendChild(boundingBoxElement);
+        }
+        markedElements[label] = { element, markElement, boundingBoxElement };
+        element.setAttribute(markAttribute, label);
+      });
+      document.body.appendChild(fragment);
       document.documentElement.setAttribute("data-marked", "true");
       return markedElements;
-    });
+    } catch (error) {
+      console.error("Error in mark function:", error);
+      throw error;
+    }
   }
-  function createMark(element, style, label, markPlacement = "top-start") {
+  function createMark(element, index, style, label, markPlacement = "top-start", markClass) {
     const markElement = document.createElement("div");
-    markElement.className = "webmarker";
+    markElement.className = `webmarker ${markClass}`.trim();
     markElement.id = `webmarker-${label}`;
     markElement.textContent = label;
-    document.body.appendChild(markElement);
-    positionMark(markElement, element, markPlacement);
+    markElement.setAttribute("aria-hidden", "true");
+    positionElement(markElement, element, markPlacement, (x, y) => {
+      Object.assign(markElement.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+    });
     applyStyle(
       markElement,
       {
@@ -983,16 +1006,24 @@ var WebMarker = (() => {
         position: "absolute",
         pointerEvents: "none"
       },
-      typeof style === "function" ? style(element) : style
+      typeof style === "function" ? style(element, index) : style
     );
     return markElement;
   }
-  function createBoundingBox(element, style, label) {
+  function createBoundingBox(element, style, label, boundingBoxClass) {
     const boundingBoxElement = document.createElement("div");
-    boundingBoxElement.className = "webmarker-bounding-box";
+    boundingBoxElement.className = `webmarker-bounding-box ${boundingBoxClass}`.trim();
     boundingBoxElement.id = `webmarker-bounding-box-${label}`;
-    document.body.appendChild(boundingBoxElement);
-    positionBoundingBox(boundingBoxElement, element);
+    boundingBoxElement.setAttribute("aria-hidden", "true");
+    positionElement(boundingBoxElement, element, "top-start", (x, y) => {
+      const { width, height } = element.getBoundingClientRect();
+      Object.assign(boundingBoxElement.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+        width: `${width}px`,
+        height: `${height}px`
+      });
+    });
     applyStyle(
       boundingBoxElement,
       {
@@ -1000,47 +1031,27 @@ var WebMarker = (() => {
         position: "absolute",
         pointerEvents: "none"
       },
-      typeof style === "function" ? style(element) : style
+      typeof style === "function" ? style(element, parseInt(label)) : style
     );
     return boundingBoxElement;
   }
-  function positionMark(markElement, element, markPlacement) {
+  function positionElement(target, anchor, placement, updateCallback) {
     function updatePosition() {
-      return __async(this, null, function* () {
-        const { x, y } = yield computePosition2(element, markElement, {
-          placement: markPlacement
-        });
-        Object.assign(markElement.style, {
-          left: `${x}px`,
-          top: `${y}px`
-        });
+      computePosition2(anchor, target, { placement }).then(({ x, y }) => {
+        updateCallback(x, y);
       });
     }
-    cleanupFns.push(autoUpdate(element, markElement, updatePosition));
-  }
-  function positionBoundingBox(boundingBox, element) {
-    return __async(this, null, function* () {
-      const { width, height } = element.getBoundingClientRect();
-      function updatePosition() {
-        return __async(this, null, function* () {
-          const { x, y } = yield computePosition2(element, boundingBox, {
-            placement: "top-start"
-          });
-          Object.assign(boundingBox.style, {
-            left: `${x}px`,
-            top: `${y + height}px`,
-            width: `${width}px`,
-            height: `${height}px`
-          });
-        });
-      }
-      cleanupFns.push(autoUpdate(element, boundingBox, updatePosition));
-    });
+    cleanupFns.push(autoUpdate(anchor, target, updatePosition));
   }
   function applyStyle(element, defaultStyle, customStyle) {
     Object.assign(element.style, defaultStyle, customStyle);
   }
   function unmark() {
+    var _a;
+    const markAttribute = ((_a = document.querySelector("[data-mark-label]")) == null ? void 0 : _a.getAttribute("data-mark-label")) ? "data-mark-label" : "data-webmarker-label";
+    document.querySelectorAll(`[${markAttribute}]`).forEach((el) => {
+      el.removeAttribute(markAttribute);
+    });
     document.querySelectorAll(".webmarker, .webmarker-bounding-box").forEach((el) => el.remove());
     document.documentElement.removeAttribute("data-marked");
     cleanupFns.forEach((fn) => fn());

package/dist/module.js

@@ -904,8 +904,8 @@ var computePosition2 = (reference, floating, options) => {
 
 // src/index.ts
 var cleanupFns = [];
-function mark() {
-  return __async(this, arguments, function* (options = {}) {
+function mark(options = {}) {
+  try {
     const {
       selector = "button, input, a, select, textarea",
       getLabel = (_, index) => index.toString(),
@@ -924,34 +924,57 @@ function mark() {
       },
       showBoundingBoxes = true,
       containerElement = document.body,
-      viewPortOnly = false
+      viewPortOnly = false,
+      markClass = "",
+      boundingBoxClass = ""
     } = options;
+    const isInViewport = (el) => {
+      const rect = el.getBoundingClientRect();
+      return rect.top < window.innerHeight && rect.bottom >= 0;
+    };
     const elements = Array.from(
       containerElement.querySelectorAll(selector)
-    ).filter(
-      (el) => !viewPortOnly || el.getBoundingClientRect().top < window.innerHeight
-    );
+    ).filter((el) => !viewPortOnly || isInViewport(el));
     const markedElements = {};
-    yield Promise.all(
-      elements.map((element, index) => __async(this, null, function* () {
-        const label = getLabel(element, index);
-        const markElement = createMark(element, markStyle, label, markPlacement);
-        const boundingBoxElement = showBoundingBoxes ? createBoundingBox(element, boundingBoxStyle, label) : void 0;
-        markedElements[label] = { element, markElement, boundingBoxElement };
-        element.setAttribute(markAttribute, label);
-      }))
-    );
+    const fragment = document.createDocumentFragment();
+    elements.forEach((element, index) => {
+      const label = getLabel(element, index);
+      const markElement = createMark(
+        element,
+        index,
+        markStyle,
+        label,
+        markPlacement,
+        markClass
+      );
+      fragment.appendChild(markElement);
+      const boundingBoxElement = showBoundingBoxes ? createBoundingBox(element, boundingBoxStyle, label, boundingBoxClass) : void 0;
+      if (boundingBoxElement) {
+        fragment.appendChild(boundingBoxElement);
+      }
+      markedElements[label] = { element, markElement, boundingBoxElement };
+      element.setAttribute(markAttribute, label);
+    });
+    document.body.appendChild(fragment);
     document.documentElement.setAttribute("data-marked", "true");
     return markedElements;
-  });
+  } catch (error) {
+    console.error("Error in mark function:", error);
+    throw error;
+  }
 }
-function createMark(element, style, label, markPlacement = "top-start") {
+function createMark(element, index, style, label, markPlacement = "top-start", markClass) {
   const markElement = document.createElement("div");
-  markElement.className = "webmarker";
+  markElement.className = `webmarker ${markClass}`.trim();
   markElement.id = `webmarker-${label}`;
   markElement.textContent = label;
-  document.body.appendChild(markElement);
-  positionMark(markElement, element, markPlacement);
+  markElement.setAttribute("aria-hidden", "true");
+  positionElement(markElement, element, markPlacement, (x, y) => {
+    Object.assign(markElement.style, {
+      left: `${x}px`,
+      top: `${y}px`
+    });
+  });
   applyStyle(
     markElement,
     {
@@ -959,16 +982,24 @@ function createMark(element, style, label, markPlacement = "top-start") {
       position: "absolute",
       pointerEvents: "none"
     },
-    typeof style === "function" ? style(element) : style
+    typeof style === "function" ? style(element, index) : style
   );
   return markElement;
 }
-function createBoundingBox(element, style, label) {
+function createBoundingBox(element, style, label, boundingBoxClass) {
   const boundingBoxElement = document.createElement("div");
-  boundingBoxElement.className = "webmarker-bounding-box";
+  boundingBoxElement.className = `webmarker-bounding-box ${boundingBoxClass}`.trim();
   boundingBoxElement.id = `webmarker-bounding-box-${label}`;
-  document.body.appendChild(boundingBoxElement);
-  positionBoundingBox(boundingBoxElement, element);
+  boundingBoxElement.setAttribute("aria-hidden", "true");
+  positionElement(boundingBoxElement, element, "top-start", (x, y) => {
+    const { width, height } = element.getBoundingClientRect();
+    Object.assign(boundingBoxElement.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+      width: `${width}px`,
+      height: `${height}px`
+    });
+  });
   applyStyle(
     boundingBoxElement,
     {
@@ -976,47 +1007,27 @@ function createBoundingBox(element, style, label) {
       position: "absolute",
       pointerEvents: "none"
     },
-    typeof style === "function" ? style(element) : style
+    typeof style === "function" ? style(element, parseInt(label)) : style
   );
   return boundingBoxElement;
 }
-function positionMark(markElement, element, markPlacement) {
+function positionElement(target, anchor, placement, updateCallback) {
   function updatePosition() {
-    return __async(this, null, function* () {
-      const { x, y } = yield computePosition2(element, markElement, {
-        placement: markPlacement
-      });
-      Object.assign(markElement.style, {
-        left: `${x}px`,
-        top: `${y}px`
-      });
+    computePosition2(anchor, target, { placement }).then(({ x, y }) => {
+      updateCallback(x, y);
     });
   }
-  cleanupFns.push(autoUpdate(element, markElement, updatePosition));
-}
-function positionBoundingBox(boundingBox, element) {
-  return __async(this, null, function* () {
-    const { width, height } = element.getBoundingClientRect();
-    function updatePosition() {
-      return __async(this, null, function* () {
-        const { x, y } = yield computePosition2(element, boundingBox, {
-          placement: "top-start"
-        });
-        Object.assign(boundingBox.style, {
-          left: `${x}px`,
-          top: `${y + height}px`,
-          width: `${width}px`,
-          height: `${height}px`
-        });
-      });
-    }
-    cleanupFns.push(autoUpdate(element, boundingBox, updatePosition));
-  });
+  cleanupFns.push(autoUpdate(anchor, target, updatePosition));
 }
 function applyStyle(element, defaultStyle, customStyle) {
   Object.assign(element.style, defaultStyle, customStyle);
 }
 function unmark() {
+  var _a;
+  const markAttribute = ((_a = document.querySelector("[data-mark-label]")) == null ? void 0 : _a.getAttribute("data-mark-label")) ? "data-mark-label" : "data-webmarker-label";
+  document.querySelectorAll(`[${markAttribute}]`).forEach((el) => {
+    el.removeAttribute(markAttribute);
+  });
   document.querySelectorAll(".webmarker, .webmarker-bounding-box").forEach((el) => el.remove());
   document.documentElement.removeAttribute("data-marked");
   cleanupFns.forEach((fn) => fn());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webmarker-js",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A library for marking web pages for Set-of-Mark prompting with vision-language models.",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -26,6 +26,7 @@
     "@mdx-js/react": "^3.0.1",
     "@next/mdx": "^14.2.3",
     "@playwright/test": "^1.46.1",
+    "@types/jest": "^29.5.13",
     "@types/mdx": "^2.0.13",
     "@types/node": "^22.5.1",
     "autoprefixer": "^10.4.19",

package/src/index.ts

@@ -14,7 +14,10 @@ type Placement =
   | "left-start"
   | "left-end";
 
-type StyleFunction = (element: Element) => Partial<CSSStyleDeclaration>;
+type StyleFunction = (
+  element: Element,
+  index: number
+) => Partial<CSSStyleDeclaration>;
 type StyleObject = Partial<CSSStyleDeclaration>;
 
 interface MarkOptions {
@@ -67,6 +70,14 @@ interface MarkOptions {
    * @default false
    */
   viewPortOnly?: boolean;
+  /**
+   * Additional class to apply to the mark elements.
+   */
+  markClass?: string;
+  /**
+   * Additional class to apply to the bounding box elements.
+   */
+  boundingBoxClass?: string;
 }
 
 interface MarkedElement {
@@ -77,68 +88,94 @@ interface MarkedElement {
 
 let cleanupFns: (() => void)[] = [];
 
-async function mark(
-  options: MarkOptions = {}
-): Promise<Record<string, MarkedElement>> {
-  const {
-    selector = "button, input, a, select, textarea",
-    getLabel = (_, index) => index.toString(),
-    markAttribute = "data-mark-label",
-    markPlacement = "top-start",
-    markStyle = {
-      backgroundColor: "red",
-      color: "white",
-      padding: "2px 4px",
-      fontSize: "12px",
-      fontWeight: "bold",
-    },
-    boundingBoxStyle = {
-      outline: "2px dashed red",
-      backgroundColor: "transparent",
-    },
-    showBoundingBoxes = true,
-    containerElement = document.body,
-    viewPortOnly = false,
-  } = options;
-
-  const elements = Array.from(
-    containerElement.querySelectorAll(selector)
-  ).filter(
-    (el) => !viewPortOnly || el.getBoundingClientRect().top < window.innerHeight
-  );
+function mark(options: MarkOptions = {}): Record<string, MarkedElement> {
+  try {
+    const {
+      selector = "button, input, a, select, textarea",
+      getLabel = (_, index) => index.toString(),
+      markAttribute = "data-mark-label",
+      markPlacement = "top-start",
+      markStyle = {
+        backgroundColor: "red",
+        color: "white",
+        padding: "2px 4px",
+        fontSize: "12px",
+        fontWeight: "bold",
+      },
+      boundingBoxStyle = {
+        outline: "2px dashed red",
+        backgroundColor: "transparent",
+      },
+      showBoundingBoxes = true,
+      containerElement = document.body,
+      viewPortOnly = false,
+      markClass = "",
+      boundingBoxClass = "",
+    } = options;
+
+    const isInViewport = (el: Element) => {
+      const rect = el.getBoundingClientRect();
+      return rect.top < window.innerHeight && rect.bottom >= 0;
+    };
+
+    const elements = Array.from(
+      containerElement.querySelectorAll(selector)
+    ).filter((el) => !viewPortOnly || isInViewport(el));
 
-  const markedElements: Record<string, MarkedElement> = {};
+    const markedElements: Record<string, MarkedElement> = {};
+    const fragment = document.createDocumentFragment();
 
-  await Promise.all(
-    elements.map(async (element, index) => {
+    elements.forEach((element, index) => {
       const label = getLabel(element, index);
-      const markElement = createMark(element, markStyle, label, markPlacement);
+      const markElement = createMark(
+        element,
+        index,
+        markStyle,
+        label,
+        markPlacement,
+        markClass
+      );
+      fragment.appendChild(markElement);
 
       const boundingBoxElement = showBoundingBoxes
-        ? createBoundingBox(element, boundingBoxStyle, label)
+        ? createBoundingBox(element, boundingBoxStyle, label, boundingBoxClass)
         : undefined;
+      if (boundingBoxElement) {
+        fragment.appendChild(boundingBoxElement);
+      }
 
       markedElements[label] = { element, markElement, boundingBoxElement };
       element.setAttribute(markAttribute, label);
-    })
-  );
+    });
 
-  document.documentElement.setAttribute("data-marked", "true");
-  return markedElements;
+    document.body.appendChild(fragment);
+    document.documentElement.setAttribute("data-marked", "true");
+    return markedElements;
+  } catch (error) {
+    console.error("Error in mark function:", error);
+    throw error;
+  }
 }
 
 function createMark(
   element: Element,
+  index: number,
   style: StyleObject | StyleFunction,
   label: string,
-  markPlacement: Placement = "top-start"
+  markPlacement: Placement = "top-start",
+  markClass: string
 ): HTMLElement {
   const markElement = document.createElement("div");
-  markElement.className = "webmarker";
+  markElement.className = `webmarker ${markClass}`.trim();
   markElement.id = `webmarker-${label}`;
   markElement.textContent = label;
-  document.body.appendChild(markElement);
-  positionMark(markElement, element, markPlacement);
+  markElement.setAttribute("aria-hidden", "true");
+  positionElement(markElement, element, markPlacement, (x, y) => {
+    Object.assign(markElement.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+    });
+  });
   applyStyle(
     markElement,
     {
@@ -146,7 +183,7 @@ function createMark(
       position: "absolute",
       pointerEvents: "none",
     },
-    typeof style === "function" ? style(element) : style
+    typeof style === "function" ? style(element, index) : style
   );
   return markElement;
 }
@@ -154,13 +191,23 @@ function createMark(
 function createBoundingBox(
   element: Element,
   style: StyleObject | StyleFunction,
-  label: string
+  label: string,
+  boundingBoxClass: string
 ): HTMLElement {
   const boundingBoxElement = document.createElement("div");
-  boundingBoxElement.className = "webmarker-bounding-box";
+  boundingBoxElement.className =
+    `webmarker-bounding-box ${boundingBoxClass}`.trim();
   boundingBoxElement.id = `webmarker-bounding-box-${label}`;
-  document.body.appendChild(boundingBoxElement);
-  positionBoundingBox(boundingBoxElement, element);
+  boundingBoxElement.setAttribute("aria-hidden", "true");
+  positionElement(boundingBoxElement, element, "top-start", (x, y) => {
+    const { width, height } = element.getBoundingClientRect();
+    Object.assign(boundingBoxElement.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+      width: `${width}px`,
+      height: `${height}px`,
+    });
+  });
   applyStyle(
     boundingBoxElement,
     {
@@ -168,43 +215,23 @@ function createBoundingBox(
       position: "absolute",
       pointerEvents: "none",
     },
-    typeof style === "function" ? style(element) : style
+    typeof style === "function" ? style(element, parseInt(label)) : style
   );
   return boundingBoxElement;
 }
 
-function positionMark(
-  markElement: HTMLElement,
-  element: Element,
-  markPlacement: Placement
+function positionElement(
+  target: HTMLElement,
+  anchor: Element,
+  placement: Placement,
+  updateCallback: (x: number, y: number) => void
 ) {
-  async function updatePosition() {
-    const { x, y } = await computePosition(element, markElement, {
-      placement: markPlacement,
-    });
-    Object.assign(markElement.style, {
-      left: `${x}px`,
-      top: `${y}px`,
+  function updatePosition() {
+    computePosition(anchor, target, { placement }).then(({ x, y }) => {
+      updateCallback(x, y);
     });
   }
-
-  cleanupFns.push(autoUpdate(element, markElement, updatePosition));
-}
-
-async function positionBoundingBox(boundingBox: HTMLElement, element: Element) {
-  const { width, height } = element.getBoundingClientRect();
-  async function updatePosition() {
-    const { x, y } = await computePosition(element, boundingBox, {
-      placement: "top-start",
-    });
-    Object.assign(boundingBox.style, {
-      left: `${x}px`,
-      top: `${y + height}px`,
-      width: `${width}px`,
-      height: `${height}px`,
-    });
-  }
-  cleanupFns.push(autoUpdate(element, boundingBox, updatePosition));
+  cleanupFns.push(autoUpdate(anchor, target, updatePosition));
 }
 
 function applyStyle(
@@ -216,6 +243,15 @@ function applyStyle(
 }
 
 function unmark(): void {
+  const markAttribute = document
+    .querySelector("[data-mark-label]")
+    ?.getAttribute("data-mark-label")
+    ? "data-mark-label"
+    : "data-webmarker-label";
+
+  document.querySelectorAll(`[${markAttribute}]`).forEach((el) => {
+    el.removeAttribute(markAttribute);
+  });
   document
     .querySelectorAll(".webmarker, .webmarker-bounding-box")
     .forEach((el) => el.remove());