website-highlighter 1.0.0 → 1.2.0

package/README.md

@@ -10,21 +10,24 @@ npm install website-highlighter
 
 ## Basic Usage
 
-Import the default function and pass the text you want to find. The library finds the closest fuzzy match inside the target root and applies a `dom-highlight` CSS highlight.
+Import the default function and pass the text you want to find. The library finds the closest fuzzy match inside the target root and applies a `website-highlighter` CSS highlight.
 
 ```js
 import WebsiteHighlighter from 'website-highlighter'
 
 const article = document.querySelector('article')
-const range = WebsiteHighlighter('custom highlight api', article)
+const { range, value } = WebsiteHighlighter('custom highlight api', {
+  root: article
+})
 
 console.log(range.toString())
+console.log(value)
 ```
 
 Add styles for the highlight name:
 
 ```css
-::highlight(dom-highlight) {
+::highlight(website-highlighter) {
   background: #f6d85f;
   color: #111;
 }
@@ -50,7 +53,7 @@ iframe.addEventListener('load', () => {
 })
 ```
 
-The child iframe must load this module too. Importing it registers the message listener that handles `dom-highlight` messages.
+The child iframe must load this module too. Importing it registers the message listener that handles `website-highlighter` messages.
 
 ```html
 <script type="module">
@@ -66,12 +69,15 @@ highlightInIframe(iframe, 'text inside the iframe', 'https://example.com')
 
 ## API
 
-### `WebsiteHighlighter(text, root)`
+### `WebsiteHighlighter(text, options)`
 
-Finds the best fuzzy match for `text` inside `root`, applies the `dom-highlight` custom highlight, and returns the created `Range`.
+Finds the best fuzzy match for `text`, applies the `website-highlighter` custom highlight, and returns `{ range, value }` or resolves to it when threshold retries are enabled.
 
 - `text`: string to search for.
-- `root`: optional DOM node to search. Defaults to `document.body`.
+- `options.root`: optional DOM node to search. Defaults to `document.body`.
+- `options.threshold`: optional minimum match score from `0` to `1`. When greater than `0`, the function returns a Promise and retries until the threshold is met or retries are exhausted.
+- `options.retries`: optional retry count. Defaults to `6`.
+- `options.retryInterval`: optional retry delay in milliseconds. Defaults to `500`.
 
 ### `highlightInIframe(iframe, text, targetOrigin)`
 

package/dist/website-highlighter.js

@@ -1,4 +1,4 @@
-class w {
+class M {
   /**
    * Calculates the Levenshtein distance for all substrings and returns their
    * distance and insertion-deletion offset.
@@ -8,15 +8,15 @@ class w {
    * 
    * @return {array} Array of all substring matches in pairs [distance, offset]
    */
-  getEditDistances(t, o) {
-    var n = new Array(o.length + 1).fill([0, 0]);
-    for (let s = 0; s < t.length; s++) {
-      let r = [[s + 1, 0]];
-      for (let e = 0; e < o.length; e++) {
-        let i = t[s] != o[e], a = n[e + 1][0] + 1, h = r[e][0] + 1, g = n[e][0] + i, f = Math.min(a, Math.min(h, g)), c = [f, n[e][1]];
-        a === f ? c[1] = n[e + 1][1] - 1 : h === f && (c[1] = r[e][1] + 1), r.push(c);
+  getEditDistances(e, t) {
+    var n = new Array(t.length + 1).fill([0, 0]);
+    for (let r = 0; r < e.length; r++) {
+      let a = [[r + 1, 0]];
+      for (let o = 0; o < t.length; o++) {
+        let s = e[r] != t[o], l = n[o + 1][0] + 1, c = a[o][0] + 1, d = n[o][0] + s, u = Math.min(l, Math.min(c, d)), h = [u, n[o][1]];
+        l === u ? h[1] = n[o + 1][1] - 1 : c === u && (h[1] = a[o][1] + 1), a.push(h);
       }
-      n = r;
+      n = a;
     }
     return n;
   }
@@ -29,79 +29,150 @@ class w {
    * 
    * @return {array} Array of best substring matches.
    */
-  getMatches(t, o) {
-    let n = this.getEditDistances(t, o), s = [0], r = n[0][0];
-    for (let i = 1; i < n.length; i++) {
-      let a = n[i][0];
-      a < r ? (s = [i], r = a) : a == r && s.push(i);
+  getMatches(e, t) {
+    let n = this.getEditDistances(e, t), r = [0], a = n[0][0];
+    for (let s = 1; s < n.length; s++) {
+      let l = n[s][0];
+      l < a ? (r = [s], a = l) : l == a && r.push(s);
     }
-    let e = [];
-    for (let i of s) {
-      let a = n[i], h = {
-        distance: a[0],
-        start: i - t.length - a[1],
+    let o = [];
+    for (let s of r) {
+      let l = n[s], c = {
+        distance: l[0],
+        start: s - e.length - l[1],
         //simplification of startPos = endPos − (needleLength + insertions − deletions)
-        end: i
+        end: s
       };
-      e.push(h);
+      o.push(c);
     }
-    return e;
+    return o;
   }
 }
-function m(l, t) {
-  return new w().getMatches(l, t);
+function T(i, e) {
+  return new M().getMatches(i, e);
 }
-function p(l, t) {
-  const o = m(l, t);
+function b(i, e) {
+  const t = T(i, e);
   let n;
-  for (const i of o)
-    (n === void 0 || i.distance < n.distance) && (n = i);
-  const s = Math.max(n.start, 0), r = Math.min(Math.max(n.end, s), t.length);
-  return { value: t.slice(s, r), start: s, end: r };
+  for (const s of t)
+    (n === void 0 || s.distance < n.distance) && (n = s);
+  const r = Math.max(n.start, 0), a = Math.min(Math.max(n.end, r), e.length);
+  return { value: e.slice(r, a), start: r, end: a, distance: n.distance };
 }
-function x(l, t, o) {
-  const n = l.textContent ?? "";
-  if (!Number.isInteger(t) || !Number.isInteger(o) || t < 0 || t >= o || o > n.length)
+function I(i, e, t) {
+  const n = i.textContent ?? "";
+  if (!Number.isInteger(e) || !Number.isInteger(t) || e < 0 || e >= t || t > n.length)
     throw new RangeError(
-      `Invalid range [${t}, ${o}) for text length ${n.length}`
+      `Invalid range [${e}, ${t}) for text length ${n.length}`
     );
-  const s = l.ownerDocument, r = s.createTreeWalker(
-    l,
-    s.defaultView.NodeFilter.SHOW_TEXT
+  const r = i.ownerDocument, a = r.createTreeWalker(
+    i,
+    r.defaultView.NodeFilter.SHOW_TEXT
   );
-  let e = 0, i = null, a = 0, h = null, g = 0;
-  for (let c = r.nextNode(); c; c = r.nextNode()) {
-    const d = e + c.data.length;
-    if (i === null && t >= e && t < d && (i = c, a = t - e), h === null && o > e && o <= d && (h = c, g = o - e), i && h)
+  let o = 0, s = null, l = 0, c = null, d = 0;
+  for (let h = a.nextNode(); h; h = a.nextNode()) {
+    const g = o + h.data.length;
+    if (s === null && e >= o && e < g && (s = h, l = e - o), c === null && t > o && t <= g && (c = h, d = t - o), s && c)
       break;
-    e = d;
+    o = g;
   }
-  if (!i || !h)
+  if (!s || !c)
     throw new Error(
       "Could not map offsets to the DOM. The DOM may have changed."
     );
-  const f = s.createRange();
-  return f.setStart(i, a), f.setEnd(h, g), f;
+  const u = r.createRange();
+  return u.setStart(s, l), u.setEnd(c, d), u;
 }
-const u = "dom-highlight";
-function M(l, t = document.body) {
-  const o = t.textContent ?? "", { start: n, end: s } = p(l, o), r = x(t, n, s), e = t.ownerDocument?.defaultView ?? window;
-  if (!e.CSS?.highlights || !e.Highlight)
-    throw new Error("This browser does not support the CSS Custom Highlight API.");
-  return e.CSS.highlights.set(u, new e.Highlight(r)), r;
+const f = "website-highlighter", w = `${f}:response`, m = 500;
+let y = 0;
+function H(i) {
+  return new Promise((e) => globalThis.setTimeout(e, i));
 }
-function b(l, t, o = "*") {
-  if (!l?.contentWindow)
-    throw new TypeError("Expected an iframe with a contentWindow");
-  l.contentWindow.postMessage({
-    type: u,
-    text: t
-  }, o);
+function S(i, e) {
+  const t = i.ownerDocument?.defaultView ?? window;
+  return t.MutationObserver ? new Promise((n) => {
+    let r;
+    const a = new t.MutationObserver(() => {
+      t.clearTimeout(r), a.disconnect(), n(!0);
+    });
+    r = t.setTimeout(() => {
+      a.disconnect(), n(!1);
+    }, e), a.observe(i, {
+      childList: !0,
+      characterData: !0,
+      subtree: !0
+    });
+  }) : H(e).then(() => !1);
+}
+function x(i, e, t) {
+  const n = Math.max(i.length, e.length);
+  return n === 0 ? 1 : (n - t) / n;
+}
+function p(i, e) {
+  const t = e.textContent ?? "", { start: n, end: r, value: a, distance: o } = b(i, t), s = e.ownerDocument?.defaultView ?? window;
+  if (!s.CSS?.highlights || !s.Highlight) throw new Error("This browser does not support the CSS Custom Highlight API.");
+  return {
+    haystack: t,
+    range: n < r ? I(e, n, r) : null,
+    value: a,
+    view: s,
+    score: x(i, a, o)
+  };
+}
+function E({ range: i, value: e, view: t }) {
+  if (!i) throw new Error("Could not find text to highlight.");
+  return t.CSS.highlights.set(f, new t.Highlight(i)), { range: i, value: e };
+}
+async function v(i, e, t, n, r) {
+  let a = 0;
+  for (; ; ) {
+    const o = p(i, e);
+    if (o.score >= t) return E(o);
+    for (; a < n; ) {
+      const s = await S(e, r);
+      if (a += 1, s) break;
+    }
+    if (a >= n) throw new Error(`Could not find "${i}" with threshold ${t}. Best match was "${o.value}".`);
+  }
+}
+function C(i, {
+  root: e = document.body,
+  threshold: t = 0,
+  retries: n = 6,
+  retryInterval: r = m
+} = {}) {
+  return t > 0 ? v(i, e, t, n, r) : E(p(i, e));
+}
+function N(i, e, t = "*") {
+  if (!i?.contentWindow) throw new TypeError("Expected an iframe with a contentWindow");
+  const n = `${Date.now()}-${y++}`, r = i.contentWindow;
+  let a;
+  function o() {
+    r.postMessage({
+      type: f,
+      id: n,
+      text: e
+    }, t);
+  }
+  function s(l) {
+    l.source === r && l.data?.type === w && l.data.id === n && (window.clearInterval(a), window.removeEventListener("message", s));
+  }
+  window.addEventListener("message", s), o(), a = window.setInterval(o, m);
+}
+if (typeof window < "u") {
+  let i = function(t) {
+    return t.origin === "null" ? "*" : t.origin;
+  }, e = function(t) {
+    t.source?.postMessage({
+      type: w,
+      id: t.data.id
+    }, i(t));
+  };
+  window.addEventListener("message", (t) => {
+    t.data?.type === f && (e(t), C(t.data.text, { threshold: 0.9 }).catch((n) => console.error(n)));
+  });
 }
-typeof window < "u" && window.addEventListener("message", (l) => {
-  l.data?.type !== u || typeof l.data.text != "string" || M(l.data.text, document.body);
-});
 export {
-  M as default,
-  b as highlightInIframe
+  C as default,
+  N as highlightInIframe
 };

package/dist/website-highlighter.umd.cjs

@@ -1 +1 @@
-(function(d,c){typeof exports=="object"&&typeof module<"u"?c(exports):typeof define=="function"&&define.amd?define(["exports"],c):(d=typeof globalThis<"u"?globalThis:d||self,c(d.WebsiteHighlighter={}))})(this,(function(d){"use strict";class c{getEditDistances(e,o){var n=new Array(o.length+1).fill([0,0]);for(let s=0;s<e.length;s++){let r=[[s+1,0]];for(let t=0;t<o.length;t++){let i=e[s]!=o[t],h=n[t+1][0]+1,a=r[t][0]+1,g=n[t][0]+i,u=Math.min(h,Math.min(a,g)),f=[u,n[t][1]];h===u?f[1]=n[t+1][1]-1:a===u&&(f[1]=r[t][1]+1),r.push(f)}n=r}return n}getMatches(e,o){let n=this.getEditDistances(e,o),s=[0],r=n[0][0];for(let i=1;i<n.length;i++){let h=n[i][0];h<r?(s=[i],r=h):h==r&&s.push(i)}let t=[];for(let i of s){let h=n[i],a={distance:h[0],start:i-e.length-h[1],end:i};t.push(a)}return t}}function b(l,e){return new c().getMatches(l,e)}function y(l,e){const o=b(l,e);let n;for(const i of o)(n===void 0||i.distance<n.distance)&&(n=i);const s=Math.max(n.start,0),r=Math.min(Math.max(n.end,s),e.length);return{value:e.slice(s,r),start:s,end:r}}function M(l,e,o){const n=l.textContent??"";if(!Number.isInteger(e)||!Number.isInteger(o)||e<0||e>=o||o>n.length)throw new RangeError(`Invalid range [${e}, ${o}) for text length ${n.length}`);const s=l.ownerDocument,r=s.createTreeWalker(l,s.defaultView.NodeFilter.SHOW_TEXT);let t=0,i=null,h=0,a=null,g=0;for(let f=r.nextNode();f;f=r.nextNode()){const m=t+f.data.length;if(i===null&&e>=t&&e<m&&(i=f,h=e-t),a===null&&o>t&&o<=m&&(a=f,g=o-t),i&&a)break;t=m}if(!i||!a)throw new Error("Could not map offsets to the DOM. The DOM may have changed.");const u=s.createRange();return u.setStart(i,h),u.setEnd(a,g),u}const w="dom-highlight";function p(l,e=document.body){const o=e.textContent??"",{start:n,end:s}=y(l,o),r=M(e,n,s),t=e.ownerDocument?.defaultView??window;if(!t.CSS?.highlights||!t.Highlight)throw new Error("This browser does not support the CSS Custom Highlight API.");return t.CSS.highlights.set(w,new t.Highlight(r)),r}function x(l,e,o="*"){if(!l?.contentWindow)throw new TypeError("Expected an iframe with a contentWindow");l.contentWindow.postMessage({type:w,text:e},o)}typeof window<"u"&&window.addEventListener("message",l=>{l.data?.type!==w||typeof l.data.text!="string"||p(l.data.text,document.body)}),d.default=p,d.highlightInIframe=x,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(c,f){typeof exports=="object"&&typeof module<"u"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(c=typeof globalThis<"u"?globalThis:c||self,f(c.WebsiteHighlighter={}))})(this,(function(c){"use strict";class f{getEditDistances(t,e){var n=new Array(e.length+1).fill([0,0]);for(let o=0;o<t.length;o++){let l=[[o+1,0]];for(let r=0;r<e.length;r++){let s=t[o]!=e[r],a=n[r+1][0]+1,u=l[r][0]+1,w=n[r][0]+s,d=Math.min(a,Math.min(u,w)),h=[d,n[r][1]];a===d?h[1]=n[r+1][1]-1:u===d&&(h[1]=l[r][1]+1),l.push(h)}n=l}return n}getMatches(t,e){let n=this.getEditDistances(t,e),o=[0],l=n[0][0];for(let s=1;s<n.length;s++){let a=n[s][0];a<l?(o=[s],l=a):a==l&&o.push(s)}let r=[];for(let s of o){let a=n[s],u={distance:a[0],start:s-t.length-a[1],end:s};r.push(u)}return r}}function y(i,t){return new f().getMatches(i,t)}function I(i,t){const e=y(i,t);let n;for(const s of e)(n===void 0||s.distance<n.distance)&&(n=s);const o=Math.max(n.start,0),l=Math.min(Math.max(n.end,o),t.length);return{value:t.slice(o,l),start:o,end:l,distance:n.distance}}function S(i,t,e){const n=i.textContent??"";if(!Number.isInteger(t)||!Number.isInteger(e)||t<0||t>=e||e>n.length)throw new RangeError(`Invalid range [${t}, ${e}) for text length ${n.length}`);const o=i.ownerDocument,l=o.createTreeWalker(i,o.defaultView.NodeFilter.SHOW_TEXT);let r=0,s=null,a=0,u=null,w=0;for(let h=l.nextNode();h;h=l.nextNode()){const m=r+h.data.length;if(s===null&&t>=r&&t<m&&(s=h,a=t-r),u===null&&e>r&&e<=m&&(u=h,w=e-r),s&&u)break;r=m}if(!s||!u)throw new Error("Could not map offsets to the DOM. The DOM may have changed.");const d=o.createRange();return d.setStart(s,a),d.setEnd(u,w),d}const g="website-highlighter",p=`${g}:response`,b=500;let H=0;function v(i){return new Promise(t=>globalThis.setTimeout(t,i))}function x(i,t){const e=i.ownerDocument?.defaultView??window;return e.MutationObserver?new Promise(n=>{let o;const l=new e.MutationObserver(()=>{e.clearTimeout(o),l.disconnect(),n(!0)});o=e.setTimeout(()=>{l.disconnect(),n(!1)},t),l.observe(i,{childList:!0,characterData:!0,subtree:!0})}):v(t).then(()=>!1)}function C(i,t,e){const n=Math.max(i.length,t.length);return n===0?1:(n-e)/n}function T(i,t){const e=t.textContent??"",{start:n,end:o,value:l,distance:r}=I(i,e),s=t.ownerDocument?.defaultView??window;if(!s.CSS?.highlights||!s.Highlight)throw new Error("This browser does not support the CSS Custom Highlight API.");return{haystack:e,range:n<o?S(t,n,o):null,value:l,view:s,score:C(i,l,r)}}function M({range:i,value:t,view:e}){if(!i)throw new Error("Could not find text to highlight.");return e.CSS.highlights.set(g,new e.Highlight(i)),{range:i,value:t}}async function O(i,t,e,n,o){let l=0;for(;;){const r=T(i,t);if(r.score>=e)return M(r);for(;l<n;){const s=await x(t,o);if(l+=1,s)break}if(l>=n)throw new Error(`Could not find "${i}" with threshold ${e}. Best match was "${r.value}".`)}}function E(i,{root:t=document.body,threshold:e=0,retries:n=6,retryInterval:o=b}={}){return e>0?O(i,t,e,n,o):M(T(i,t))}function N(i,t,e="*"){if(!i?.contentWindow)throw new TypeError("Expected an iframe with a contentWindow");const n=`${Date.now()}-${H++}`,o=i.contentWindow;let l;function r(){o.postMessage({type:g,id:n,text:t},e)}function s(a){a.source===o&&a.data?.type===p&&a.data.id===n&&(window.clearInterval(l),window.removeEventListener("message",s))}window.addEventListener("message",s),r(),l=window.setInterval(r,b)}if(typeof window<"u"){let i=function(e){return e.origin==="null"?"*":e.origin},t=function(e){e.source?.postMessage({type:p,id:e.data.id},i(e))};window.addEventListener("message",e=>{e.data?.type===g&&(t(e),E(e.data.text,{threshold:.9}).catch(n=>console.error(n)))})}c.default=E,c.highlightInIframe=N,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "website-highlighter",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Fuzzy text matching and highlighting for DOM content.",
   "type": "module",
   "main": "./dist/website-highlighter.umd.cjs",
@@ -24,11 +24,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/ol-c/website-highlighter.git"
+    "url": "git+ssh://git@github.com/jasonford/website-highlighter.git"
   },
   "author": "Jason Ford",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/ol-c/website-highlighter/issues"
+    "url": "https://github.com/jasonford/website-highlighter/issues"
   }
 }