webmarker-js 0.0.4 → 0.0.5

package/esbuild.config.js

@@ -0,0 +1,28 @@
+const esbuild = require("esbuild");
+const { dtsPlugin } = require("esbuild-plugin-d.ts");
+
+esbuild
+  .build({
+    entryPoints: ["src/index.ts"],
+    bundle: true,
+    outfile: "dist/main.js",
+    format: "iife",
+    globalName: "WebMarker",
+    platform: "browser",
+    target: ["es2015"],
+    plugins: [dtsPlugin()],
+    jsx: "transform",
+  })
+  .catch(() => process.exit(1));
+
+esbuild
+  .build({
+    entryPoints: ["src/index.ts"],
+    bundle: true,
+    outfile: "dist/module.js",
+    format: "esm",
+    platform: "browser",
+    target: ["es2015"],
+    jsx: "transform",
+  })
+  .catch(() => process.exit(1));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webmarker-js",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A library for marking web pages for Set-of-Mark (SoM) prompting with vision-language models.",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -8,12 +8,13 @@
   "types": "dist/types.d.ts",
   "scripts": {
     "test": "jest",
-    "build": "parcel build",
-    "demo:start": "parcel demo/index.html",
-    "demo:build": "parcel build demo/.html",
+    "build": "node esbuild.config.js",
+    "demo:start": "esbuild demo/index.js --bundle --servedir=demo --outdir=demo/dist --loader:.js=jsx",
+    "demo:build": "esbuild demo/index.js --bundle --minify --outdir=demo/dist",
     "docs:dev": "cd docs && next",
     "docs:build": "cd docs && next build",
-    "docs:start": "cd docs && next start"
+    "docs:start": "cd docs && next start",
+    "test:playwright": "cd test/playwright && npx playwright test"
   },
   "author": "Reid Barber",
   "license": "MIT",
@@ -24,19 +25,18 @@
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
     "@next/mdx": "^14.2.3",
-    "@parcel/packager-ts": "2.12.0",
-    "@parcel/transformer-typescript-tsc": "^2.12.0",
-    "@parcel/transformer-typescript-types": "2.12.0",
-    "@parcel/validator-typescript": "^2.12.0",
+    "@playwright/test": "^1.46.1",
     "@types/mdx": "^2.0.13",
+    "@types/node": "^22.5.1",
     "autoprefixer": "^10.4.19",
     "babel-jest": "^29.7.0",
+    "esbuild": "^0.23.1",
+    "esbuild-plugin-d.ts": "^1.3.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "next": "^14.2.3",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",
-    "parcel": "^2.12.0",
     "postcss": "^8.4.38",
     "process": "^0.11.10",
     "react": "^18.3.1",

package/src/index.ts

@@ -74,7 +74,7 @@ let cleanupFns: (() => void)[] = [];
 
 async function mark(
   options: MarkOptions = {}
-): Promise<Map<string, MarkedElement>> {
+): Promise<Record<string, MarkedElement>> {
   const {
     selector = "button, input, a, select, textarea",
     markStyle = {
@@ -101,7 +101,7 @@ async function mark(
     (el) => !viewPortOnly || el.getBoundingClientRect().top < window.innerHeight
   );
 
-  const markedElements = new Map<string, MarkedElement>();
+  const markedElements: Record<string, MarkedElement> = {};
 
   await Promise.all(
     elements.map(async (element, index) => {
@@ -112,7 +112,7 @@ async function mark(
         ? createMask(element, maskStyle, label)
         : undefined;
 
-      markedElements.set(label, { element, markElement, maskElement });
+      markedElements[label] = { element, markElement, maskElement };
       element.setAttribute("data-webmarkeredby", `webmarker-${label}`);
     })
   );

package/test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}

package/dist/main.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;;;;;A,I,kC,a,U,S,I,S,O,E,U,E,C,E,S;I,S,M,K;Q,O,iB,I,Q,I,E,S,O;Y,Q;Q;I;I,O,I,C,K,C,I,O,C,E,S,O,E,M;Q,S,U,K;Y,I;gB,K,U,I,C;Y,E,O,G;gB,O;Y;Q;Q,S,S,K;Y,I;gB,K,S,C,Q,C;Y,E,O,G;gB,O;Y;Q;Q,S,K,M;Y,O,I,G,Q,O,K,I,M,O,K,E,I,C,W;Q;Q,K,A,C,Y,U,K,C,S,c,E,C,E,I;I;A;A,I,oC,a,U,W,I,S,O,E,I;I,I,I;Q,O;Q,M;Y,I,C,C,E,G,G,M,C,C,E;Y,O,C,C,E;Q;Q,M,E;Q,K,E;I,G,G,G,G;I,O,I;Q,M,K;Q,S,K;Q,U,K;I,G,O,W,c,C,C,C,O,Q,C,G;Q,O,I;I,C,G;I,S,K,C;Q,O,S,C;Y,O,K;gB;gB;a;Q;I;I,S,K,E;Q,I,G,M,I,U;Q,M,K,C,I,G,E,C,E,I,C,I,C,C,G,E,I;Y,I,I,G,K,C,I,E,C,E,G,I,C,C,S,G,E,C,E,G,C,C,Q,I,C,A,C,I,C,C,S,A,K,E,I,C,I,C,I,E,I,A,K,C,A,C,I,E,I,C,G,E,C,E,C,E,I,E,O;Y,I,I,G,G,K;gB,E,C,E,G;gB,E,K;a;Y,O,E,C,E;gB,K;gB,K;oB,I;oB;gB,K;oB,E,K;oB,O;wB,O,E,C,E;wB,M;oB;gB,K;oB,E,K;oB,I,E,C,E;oB,K;wB;qB;oB;gB,K;oB,K,E,G,C,G;oB,E,I,C,G;oB;gB;oB,I,C,C,I,E,I,E,I,E,M,G,K,C,C,E,M,G,E,A,K,C,E,C,E,K,K,E,C,E,K,C,G;wB,I;wB;oB;oB,I,E,C,E,K,K,C,C,K,E,C,E,G,C,C,E,I,E,C,E,G,C,C,E,G;wB,E,K,G,E,C,E;wB;oB;oB,I,E,C,E,K,K,E,K,G,C,C,E,E;wB,E,K,G,C,C,E;wB,I;wB;oB;oB,I,K,E,K,G,C,C,E,E;wB,E,K,G,C,C,E;wB,E,G,C,I,C;wB;oB;oB,I,C,C,E,E,E,G,C,G;oB,E,I,C,G;oB;Y;Y,K,K,I,C,S;Q,E,O,G;Y,K;gB;gB;a;Y,I;Q,S;Y,I,I;Q;Q,I,E,C,E,G,G,M,E,C,E;Q,O;Y,O,E,C,E,G,E,C,E,G,K;Y,M;Q;I;A;AAwEA,IAA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","sources":["src/index.ts"],"sourcesContent":["import { autoUpdate, computePosition } from \"@floating-ui/dom\";\n\ntype Placement =\n  | \"top\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"right\"\n  | \"right-start\"\n  | \"right-end\"\n  | \"bottom\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"left\"\n  | \"left-start\"\n  | \"left-end\";\n\ninterface MarkOptions {\n  /**\n   * A CSS selector to specify the elements to be marked.\n   */\n  selector?: string;\n  /**\n   * A CSS style to apply to the label element.\n   * You can also specify a function that returns a CSS style object.\n   */\n  markStyle?:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);\n  /**\n   * The placement of the mark relative to the element.\n   *\n   * @default 'top-start'\n   */\n  markPlacement?: Placement;\n  /**\n   * A CSS style to apply to the bounding box element.\n   * You can also specify a function that returns a CSS style object.\n   * Bounding boxes are only shown if `showMasks` is `true`.\n   */\n  maskStyle?:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);\n  /**\n   * Whether or not to show bounding boxes around the elements.\n   *\n   * @default true\n   */\n  showMasks?: boolean;\n  /**\n   * Provide a function for generating labels.\n   * By default, labels are generated as numbers starting from 0.\n   */\n  labelGenerator?: (element: Element, index: number) => string;\n  /**\n   * Provide a container element to query the elements to be marked.\n   * By default, the container element is `document.body`.\n   */\n  containerElement?: Element;\n  /**\n   * Only mark elements that are visible in the current viewport\n   *\n   * @default false\n   */\n  viewPortOnly?: boolean;\n}\n\ninterface MarkedElement {\n  element: Element;\n  markElement: HTMLElement;\n  maskElement?: HTMLElement;\n}\n\nlet cleanupFns: (() => void)[] = [];\n\nasync function mark(\n  options: MarkOptions = {}\n): Promise<Map<string, MarkedElement>> {\n  const {\n    selector = \"button, input, a, select, textarea\",\n    markStyle = {\n      backgroundColor: \"red\",\n      color: \"white\",\n      padding: \"2px 4px\",\n      fontSize: \"12px\",\n      fontWeight: \"bold\",\n    },\n    markPlacement = \"top-start\",\n    maskStyle = {\n      outline: \"2px dashed red\",\n      backgroundColor: \"transparent\",\n    },\n    showMasks = true,\n    labelGenerator = (_, index) => index.toString(),\n    containerElement = document.body,\n    viewPortOnly = false,\n  } = options;\n\n  const elements = Array.from(\n    containerElement.querySelectorAll(selector)\n  ).filter(\n    (el) => !viewPortOnly || el.getBoundingClientRect().top < window.innerHeight\n  );\n\n  const markedElements = new Map<string, MarkedElement>();\n\n  await Promise.all(\n    elements.map(async (element, index) => {\n      const label = labelGenerator(element, index);\n      const markElement = createMark(element, markStyle, label, markPlacement);\n\n      const maskElement = showMasks\n        ? createMask(element, maskStyle, label)\n        : undefined;\n\n      markedElements.set(label, { element, markElement, maskElement });\n      element.setAttribute(\"data-webmarkeredby\", `webmarker-${label}`);\n    })\n  );\n\n  document.documentElement.dataset.webmarkered = \"true\";\n  return markedElements;\n}\n\nfunction createMark(\n  element: Element,\n  style:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>),\n  label: string,\n  markPlacement: Placement = \"top-start\"\n): HTMLElement {\n  const markElement = document.createElement(\"div\");\n  markElement.className = \"webmarker\";\n  markElement.id = `webmarker-${label}`;\n  markElement.textContent = label;\n  document.body.appendChild(markElement);\n  positionMark(markElement, element, markPlacement);\n  applyStyle(\n    markElement,\n    {\n      zIndex: \"999999999\",\n      position: \"absolute\",\n      pointerEvents: \"none\",\n    },\n    typeof style === \"function\" ? style(element) : style\n  );\n  return markElement;\n}\n\nfunction createMask(\n  element: Element,\n  style:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>),\n  label: string\n): HTMLElement {\n  const maskElement = document.createElement(\"div\");\n  maskElement.className = \"webmarkermask\";\n  maskElement.id = `webmarkermask-${label}`;\n  document.body.appendChild(maskElement);\n  positionMask(maskElement, element);\n  applyStyle(\n    maskElement,\n    {\n      zIndex: \"999999999\",\n      position: \"absolute\",\n      pointerEvents: \"none\",\n    },\n    typeof style === \"function\" ? style(element) : style\n  );\n  return maskElement;\n}\n\nfunction positionMark(\n  markElement: HTMLElement,\n  element: Element,\n  markPlacement: Placement\n) {\n  async function updatePosition() {\n    const { x, y } = await computePosition(element, markElement, {\n      placement: markPlacement,\n    });\n    Object.assign(markElement.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n  }\n\n  cleanupFns.push(autoUpdate(element, markElement, updatePosition));\n}\n\nasync function positionMask(mask: HTMLElement, element: Element) {\n  const { width, height } = element.getBoundingClientRect();\n  async function updatePosition() {\n    const { x: maskX, y: maskY } = await computePosition(element, mask, {\n      placement: \"top-start\",\n    });\n    Object.assign(mask.style, {\n      left: `${maskX}px`,\n      top: `${maskY + height}px`,\n      width: `${width}px`,\n      height: `${height}px`,\n    });\n  }\n  cleanupFns.push(autoUpdate(element, mask, updatePosition));\n}\n\nfunction applyStyle(\n  element: HTMLElement,\n  defaultStyle: Readonly<Partial<CSSStyleDeclaration>>,\n  customStyle: Readonly<Partial<CSSStyleDeclaration>>\n): void {\n  Object.assign(element.style, defaultStyle, customStyle);\n}\n\nfunction unmark(): void {\n  document\n    .querySelectorAll(\".webmarker, .webmarkermask\")\n    .forEach((el) => el.remove());\n  document.documentElement.removeAttribute(\"data-webmarkered\");\n  cleanupFns.forEach((fn) => fn());\n  cleanupFns = [];\n}\n\nfunction isMarked(): boolean {\n  return document.documentElement.hasAttribute(\"data-webmarkered\");\n}\n\nwindow[\"mark\"] = mark;\nwindow[\"unmark\"] = unmark;\nwindow[\"isMarked\"] = isMarked;\n\nexport { mark, unmark, isMarked };\nexport type { MarkOptions, MarkedElement, Placement };\n"],"names":[],"version":3,"file":"main.js.map"}

package/dist/module.js.map

@@ -1 +0,0 @@
-{"mappings":";;;A,I,kC,a,U,S,I,S,O,E,U,E,C,E,S;I,S,M,K;Q,O,iB,I,Q,I,E,S,O;Y,Q;Q;I;I,O,I,C,K,C,I,O,C,E,S,O,E,M;Q,S,U,K;Y,I;gB,K,U,I,C;Y,E,O,G;gB,O;Y;Q;Q,S,S,K;Y,I;gB,K,S,C,Q,C;Y,E,O,G;gB,O;Y;Q;Q,S,K,M;Y,O,I,G,Q,O,K,I,M,O,K,E,I,C,W;Q;Q,K,A,C,Y,U,K,C,S,c,E,C,E,I;I;A;A,I,oC,a,U,W,I,S,O,E,I;I,I,I;Q,O;Q,M;Y,I,C,C,E,G,G,M,C,C,E;Y,O,C,C,E;Q;Q,M,E;Q,K,E;I,G,G,G,G;I,O,I;Q,M,K;Q,S,K;Q,U,K;I,G,O,W,c,C,C,C,O,Q,C,G;Q,O,I;I,C,G;I,S,K,C;Q,O,S,C;Y,O,K;gB;gB;a;Q;I;I,S,K,E;Q,I,G,M,I,U;Q,M,K,C,I,G,E,C,E,I,C,I,C,C,G,E,I;Y,I,I,G,K,C,I,E,C,E,G,I,C,C,S,G,E,C,E,G,C,C,Q,I,C,A,C,I,C,C,S,A,K,E,I,C,I,C,I,E,I,A,K,C,A,C,I,E,I,C,G,E,C,E,C,E,I,E,O;Y,I,I,G,G,K;gB,E,C,E,G;gB,E,K;a;Y,O,E,C,E;gB,K;gB,K;oB,I;oB;gB,K;oB,E,K;oB,O;wB,O,E,C,E;wB,M;oB;gB,K;oB,E,K;oB,I,E,C,E;oB,K;wB;qB;oB;gB,K;oB,K,E,G,C,G;oB,E,I,C,G;oB;gB;oB,I,C,C,I,E,I,E,I,E,M,G,K,C,C,E,M,G,E,A,K,C,E,C,E,K,K,E,C,E,K,C,G;wB,I;wB;oB;oB,I,E,C,E,K,K,C,C,K,E,C,E,G,C,C,E,I,E,C,E,G,C,C,E,G;wB,E,K,G,E,C,E;wB;oB;oB,I,E,C,E,K,K,E,K,G,C,C,E,E;wB,E,K,G,C,C,E;wB,I;wB;oB;oB,I,K,E,K,G,C,C,E,E;wB,E,K,G,C,C,E;wB,E,G,C,I,C;wB;oB;oB,I,C,C,E,E,E,G,C,G;oB,E,I,C,G;oB;Y;Y,K,K,I,C,S;Q,E,O,G;Y,K;gB;gB;a;Y,I;Q,S;Y,I,I;Q;Q,I,E,C,E,G,G,M,E,C,E;Q,O;Y,O,E,C,E,G,E,C,E,G,K;Y,M;Q;I;A;AAwEA,IAAI,mCAA6B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","sources":["src/index.ts"],"sourcesContent":["import { autoUpdate, computePosition } from \"@floating-ui/dom\";\n\ntype Placement =\n  | \"top\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"right\"\n  | \"right-start\"\n  | \"right-end\"\n  | \"bottom\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"left\"\n  | \"left-start\"\n  | \"left-end\";\n\ninterface MarkOptions {\n  /**\n   * A CSS selector to specify the elements to be marked.\n   */\n  selector?: string;\n  /**\n   * A CSS style to apply to the label element.\n   * You can also specify a function that returns a CSS style object.\n   */\n  markStyle?:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);\n  /**\n   * The placement of the mark relative to the element.\n   *\n   * @default 'top-start'\n   */\n  markPlacement?: Placement;\n  /**\n   * A CSS style to apply to the bounding box element.\n   * You can also specify a function that returns a CSS style object.\n   * Bounding boxes are only shown if `showMasks` is `true`.\n   */\n  maskStyle?:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);\n  /**\n   * Whether or not to show bounding boxes around the elements.\n   *\n   * @default true\n   */\n  showMasks?: boolean;\n  /**\n   * Provide a function for generating labels.\n   * By default, labels are generated as numbers starting from 0.\n   */\n  labelGenerator?: (element: Element, index: number) => string;\n  /**\n   * Provide a container element to query the elements to be marked.\n   * By default, the container element is `document.body`.\n   */\n  containerElement?: Element;\n  /**\n   * Only mark elements that are visible in the current viewport\n   *\n   * @default false\n   */\n  viewPortOnly?: boolean;\n}\n\ninterface MarkedElement {\n  element: Element;\n  markElement: HTMLElement;\n  maskElement?: HTMLElement;\n}\n\nlet cleanupFns: (() => void)[] = [];\n\nasync function mark(\n  options: MarkOptions = {}\n): Promise<Map<string, MarkedElement>> {\n  const {\n    selector = \"button, input, a, select, textarea\",\n    markStyle = {\n      backgroundColor: \"red\",\n      color: \"white\",\n      padding: \"2px 4px\",\n      fontSize: \"12px\",\n      fontWeight: \"bold\",\n    },\n    markPlacement = \"top-start\",\n    maskStyle = {\n      outline: \"2px dashed red\",\n      backgroundColor: \"transparent\",\n    },\n    showMasks = true,\n    labelGenerator = (_, index) => index.toString(),\n    containerElement = document.body,\n    viewPortOnly = false,\n  } = options;\n\n  const elements = Array.from(\n    containerElement.querySelectorAll(selector)\n  ).filter(\n    (el) => !viewPortOnly || el.getBoundingClientRect().top < window.innerHeight\n  );\n\n  const markedElements = new Map<string, MarkedElement>();\n\n  await Promise.all(\n    elements.map(async (element, index) => {\n      const label = labelGenerator(element, index);\n      const markElement = createMark(element, markStyle, label, markPlacement);\n\n      const maskElement = showMasks\n        ? createMask(element, maskStyle, label)\n        : undefined;\n\n      markedElements.set(label, { element, markElement, maskElement });\n      element.setAttribute(\"data-webmarkeredby\", `webmarker-${label}`);\n    })\n  );\n\n  document.documentElement.dataset.webmarkered = \"true\";\n  return markedElements;\n}\n\nfunction createMark(\n  element: Element,\n  style:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>),\n  label: string,\n  markPlacement: Placement = \"top-start\"\n): HTMLElement {\n  const markElement = document.createElement(\"div\");\n  markElement.className = \"webmarker\";\n  markElement.id = `webmarker-${label}`;\n  markElement.textContent = label;\n  document.body.appendChild(markElement);\n  positionMark(markElement, element, markPlacement);\n  applyStyle(\n    markElement,\n    {\n      zIndex: \"999999999\",\n      position: \"absolute\",\n      pointerEvents: \"none\",\n    },\n    typeof style === \"function\" ? style(element) : style\n  );\n  return markElement;\n}\n\nfunction createMask(\n  element: Element,\n  style:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>),\n  label: string\n): HTMLElement {\n  const maskElement = document.createElement(\"div\");\n  maskElement.className = \"webmarkermask\";\n  maskElement.id = `webmarkermask-${label}`;\n  document.body.appendChild(maskElement);\n  positionMask(maskElement, element);\n  applyStyle(\n    maskElement,\n    {\n      zIndex: \"999999999\",\n      position: \"absolute\",\n      pointerEvents: \"none\",\n    },\n    typeof style === \"function\" ? style(element) : style\n  );\n  return maskElement;\n}\n\nfunction positionMark(\n  markElement: HTMLElement,\n  element: Element,\n  markPlacement: Placement\n) {\n  async function updatePosition() {\n    const { x, y } = await computePosition(element, markElement, {\n      placement: markPlacement,\n    });\n    Object.assign(markElement.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n  }\n\n  cleanupFns.push(autoUpdate(element, markElement, updatePosition));\n}\n\nasync function positionMask(mask: HTMLElement, element: Element) {\n  const { width, height } = element.getBoundingClientRect();\n  async function updatePosition() {\n    const { x: maskX, y: maskY } = await computePosition(element, mask, {\n      placement: \"top-start\",\n    });\n    Object.assign(mask.style, {\n      left: `${maskX}px`,\n      top: `${maskY + height}px`,\n      width: `${width}px`,\n      height: `${height}px`,\n    });\n  }\n  cleanupFns.push(autoUpdate(element, mask, updatePosition));\n}\n\nfunction applyStyle(\n  element: HTMLElement,\n  defaultStyle: Readonly<Partial<CSSStyleDeclaration>>,\n  customStyle: Readonly<Partial<CSSStyleDeclaration>>\n): void {\n  Object.assign(element.style, defaultStyle, customStyle);\n}\n\nfunction unmark(): void {\n  document\n    .querySelectorAll(\".webmarker, .webmarkermask\")\n    .forEach((el) => el.remove());\n  document.documentElement.removeAttribute(\"data-webmarkered\");\n  cleanupFns.forEach((fn) => fn());\n  cleanupFns = [];\n}\n\nfunction isMarked(): boolean {\n  return document.documentElement.hasAttribute(\"data-webmarkered\");\n}\n\nwindow[\"mark\"] = mark;\nwindow[\"unmark\"] = unmark;\nwindow[\"isMarked\"] = isMarked;\n\nexport { mark, unmark, isMarked };\nexport type { MarkOptions, MarkedElement, Placement };\n"],"names":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts.map

@@ -1 +0,0 @@
-{"mappings":"AAEA,wBACI,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAC;AAEf;IACE;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EACN,QAAQ,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,GACtC,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,QAAQ,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;IACnE;;;;OAIG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EACN,QAAQ,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,GACtC,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,QAAQ,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;IACnE;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7D;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;IACE,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAID,qBACE,OAAO,GAAE,WAAgB,GACxB,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CA6CrC;AA8FD,0BAAmB,IAAI,CAOtB;AAED,4BAAqB,OAAO,CAE3B","sources":["src/src/index.ts","src/index.ts"],"sourcesContent":[null,"import { autoUpdate, computePosition } from \"@floating-ui/dom\";\n\ntype Placement =\n  | \"top\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"right\"\n  | \"right-start\"\n  | \"right-end\"\n  | \"bottom\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"left\"\n  | \"left-start\"\n  | \"left-end\";\n\ninterface MarkOptions {\n  /**\n   * A CSS selector to specify the elements to be marked.\n   */\n  selector?: string;\n  /**\n   * A CSS style to apply to the label element.\n   * You can also specify a function that returns a CSS style object.\n   */\n  markStyle?:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);\n  /**\n   * The placement of the mark relative to the element.\n   *\n   * @default 'top-start'\n   */\n  markPlacement?: Placement;\n  /**\n   * A CSS style to apply to the bounding box element.\n   * You can also specify a function that returns a CSS style object.\n   * Bounding boxes are only shown if `showMasks` is `true`.\n   */\n  maskStyle?:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);\n  /**\n   * Whether or not to show bounding boxes around the elements.\n   *\n   * @default true\n   */\n  showMasks?: boolean;\n  /**\n   * Provide a function for generating labels.\n   * By default, labels are generated as numbers starting from 0.\n   */\n  labelGenerator?: (element: Element, index: number) => string;\n  /**\n   * Provide a container element to query the elements to be marked.\n   * By default, the container element is `document.body`.\n   */\n  containerElement?: Element;\n  /**\n   * Only mark elements that are visible in the current viewport\n   *\n   * @default false\n   */\n  viewPortOnly?: boolean;\n}\n\ninterface MarkedElement {\n  element: Element;\n  markElement: HTMLElement;\n  maskElement?: HTMLElement;\n}\n\nlet cleanupFns: (() => void)[] = [];\n\nasync function mark(\n  options: MarkOptions = {}\n): Promise<Map<string, MarkedElement>> {\n  const {\n    selector = \"button, input, a, select, textarea\",\n    markStyle = {\n      backgroundColor: \"red\",\n      color: \"white\",\n      padding: \"2px 4px\",\n      fontSize: \"12px\",\n      fontWeight: \"bold\",\n    },\n    markPlacement = \"top-start\",\n    maskStyle = {\n      outline: \"2px dashed red\",\n      backgroundColor: \"transparent\",\n    },\n    showMasks = true,\n    labelGenerator = (_, index) => index.toString(),\n    containerElement = document.body,\n    viewPortOnly = false,\n  } = options;\n\n  const elements = Array.from(\n    containerElement.querySelectorAll(selector)\n  ).filter(\n    (el) => !viewPortOnly || el.getBoundingClientRect().top < window.innerHeight\n  );\n\n  const markedElements = new Map<string, MarkedElement>();\n\n  await Promise.all(\n    elements.map(async (element, index) => {\n      const label = labelGenerator(element, index);\n      const markElement = createMark(element, markStyle, label, markPlacement);\n\n      const maskElement = showMasks\n        ? createMask(element, maskStyle, label)\n        : undefined;\n\n      markedElements.set(label, { element, markElement, maskElement });\n      element.setAttribute(\"data-webmarkeredby\", `webmarker-${label}`);\n    })\n  );\n\n  document.documentElement.dataset.webmarkered = \"true\";\n  return markedElements;\n}\n\nfunction createMark(\n  element: Element,\n  style:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>),\n  label: string,\n  markPlacement: Placement = \"top-start\"\n): HTMLElement {\n  const markElement = document.createElement(\"div\");\n  markElement.className = \"webmarker\";\n  markElement.id = `webmarker-${label}`;\n  markElement.textContent = label;\n  document.body.appendChild(markElement);\n  positionMark(markElement, element, markPlacement);\n  applyStyle(\n    markElement,\n    {\n      zIndex: \"999999999\",\n      position: \"absolute\",\n      pointerEvents: \"none\",\n    },\n    typeof style === \"function\" ? style(element) : style\n  );\n  return markElement;\n}\n\nfunction createMask(\n  element: Element,\n  style:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>),\n  label: string\n): HTMLElement {\n  const maskElement = document.createElement(\"div\");\n  maskElement.className = \"webmarkermask\";\n  maskElement.id = `webmarkermask-${label}`;\n  document.body.appendChild(maskElement);\n  positionMask(maskElement, element);\n  applyStyle(\n    maskElement,\n    {\n      zIndex: \"999999999\",\n      position: \"absolute\",\n      pointerEvents: \"none\",\n    },\n    typeof style === \"function\" ? style(element) : style\n  );\n  return maskElement;\n}\n\nfunction positionMark(\n  markElement: HTMLElement,\n  element: Element,\n  markPlacement: Placement\n) {\n  async function updatePosition() {\n    const { x, y } = await computePosition(element, markElement, {\n      placement: markPlacement,\n    });\n    Object.assign(markElement.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n  }\n\n  cleanupFns.push(autoUpdate(element, markElement, updatePosition));\n}\n\nasync function positionMask(mask: HTMLElement, element: Element) {\n  const { width, height } = element.getBoundingClientRect();\n  async function updatePosition() {\n    const { x: maskX, y: maskY } = await computePosition(element, mask, {\n      placement: \"top-start\",\n    });\n    Object.assign(mask.style, {\n      left: `${maskX}px`,\n      top: `${maskY + height}px`,\n      width: `${width}px`,\n      height: `${height}px`,\n    });\n  }\n  cleanupFns.push(autoUpdate(element, mask, updatePosition));\n}\n\nfunction applyStyle(\n  element: HTMLElement,\n  defaultStyle: Readonly<Partial<CSSStyleDeclaration>>,\n  customStyle: Readonly<Partial<CSSStyleDeclaration>>\n): void {\n  Object.assign(element.style, defaultStyle, customStyle);\n}\n\nfunction unmark(): void {\n  document\n    .querySelectorAll(\".webmarker, .webmarkermask\")\n    .forEach((el) => el.remove());\n  document.documentElement.removeAttribute(\"data-webmarkered\");\n  cleanupFns.forEach((fn) => fn());\n  cleanupFns = [];\n}\n\nfunction isMarked(): boolean {\n  return document.documentElement.hasAttribute(\"data-webmarkered\");\n}\n\nwindow[\"mark\"] = mark;\nwindow[\"unmark\"] = unmark;\nwindow[\"isMarked\"] = isMarked;\n\nexport { mark, unmark, isMarked };\nexport type { MarkOptions, MarkedElement, Placement };\n"],"names":[],"version":3,"file":"types.d.ts.map"}