checkpoint-cli 0.1.8 → 0.2.0

package/dist/index.js

@@ -339,132 +339,19 @@ function trackingScript() {
     return '';
   }
 
-  function getNavSignature(){
-    try{
-      var candidates=[];
-      var activeSelectors=[
-        '[aria-current=\"page\"]',
-        '[aria-selected=\"true\"]',
-        '[data-state=\"active\"]',
-        '.active',
-        '.is-active',
-        '.selected'
-      ];
-      for(var i=0;i<activeSelectors.length;i++){
-        var nodes=document.querySelectorAll(activeSelectors[i]);
-        for(var j=0;j<nodes.length&&candidates.length<8;j++){
-          var text=getVisibleText(nodes[j]);
-          if(text) candidates.push(text);
-        }
-      }
-      if(candidates.length===0){
-        var heading=document.querySelector('main h1, [role=\"main\"] h1, h1, h2');
-        var fallbackText=getVisibleText(heading);
-        if(fallbackText) candidates.push(fallbackText);
+  function getSourceDebugInfo(fiber){
+    var current=fiber;
+    var steps=0;
+    while(current&&steps<24){
+      if(current._debugSource){
+        return current._debugSource;
       }
-      if(candidates.length===0) return '';
-      return candidates.slice(0,4).join('|');
-    }catch(e){}
-    return '';
-  }
-
-  function getHeadingSignature(){
-    try{
-      var heading=document.querySelector('main h1, [role=\"main\"] h1, h1, h2');
-      return getVisibleText(heading);
-    }catch(e){}
-    return '';
-  }
-
-  function getViewContext(){
-    return {
-      nav_signature:getNavSignature()||undefined,
-      heading_signature:getHeadingSignature()||undefined
-    };
-  }
-
-  function viewContextMatches(expected){
-    if(!expected||typeof expected!=='object') return true;
-    var current=getViewContext();
-    if(expected.nav_signature&&current.nav_signature&&expected.nav_signature!==current.nav_signature){
-      return false;
-    }
-    if(expected.heading_signature&&current.heading_signature&&expected.heading_signature!==current.heading_signature){
-      return false;
-    }
-    return true;
-  }
-
-  function isScrollable(el){
-    if(!el||el.nodeType!==1||!window.getComputedStyle) return false;
-    try{
-      var style=window.getComputedStyle(el);
-      var overflowY=String(style.overflowY||'').toLowerCase();
-      var overflowX=String(style.overflowX||'').toLowerCase();
-      var canScrollY=(overflowY==='auto'||overflowY==='scroll'||overflowY==='overlay')&&(el.scrollHeight-el.clientHeight>1);
-      var canScrollX=(overflowX==='auto'||overflowX==='scroll'||overflowX==='overlay')&&(el.scrollWidth-el.clientWidth>1);
-      return !!(canScrollX||canScrollY);
-    }catch(e){}
-    return false;
-  }
-
-  function getNearestScrollContainer(el){
-    if(!el) return null;
-    var current=el.parentElement;
-    var depth=0;
-    while(current&&depth<10){
-      if(current===document.body||current===document.documentElement) return null;
-      if(isScrollable(current)) return current;
-      current=current.parentElement;
-      depth++;
+      current=current.return||null;
+      steps++;
     }
     return null;
   }
 
-  function getScrollContext(el,clientX,clientY){
-    var container=getNearestScrollContainer(el);
-    if(!container) return null;
-    var rect=container.getBoundingClientRect?container.getBoundingClientRect():null;
-    if(!rect) return null;
-    var safeW=Math.max(1,rect.width||1);
-    var safeH=Math.max(1,rect.height||1);
-    return {
-      container_selector_chain:getSelectorChain(container),
-      container_fingerprint:getDomFingerprint(container),
-      container_x_percent:clampPercent(((clientX-rect.left)/safeW)*100),
-      container_y_percent:clampPercent(((clientY-rect.top)/safeH)*100)
-    };
-  }
-
-  function getPointFromScrollContext(scrollContext){
-    if(!scrollContext||typeof scrollContext!=='object') return null;
-    var container=null;
-    if(Array.isArray(scrollContext.container_selector_chain)){
-      for(var i=0;i<scrollContext.container_selector_chain.length;i++){
-        var candidate=scrollContext.container_selector_chain[i];
-        if(!candidate||typeof candidate.selector!=='string') continue;
-        var nodes=querySelectorAllSafe(document,candidate.selector);
-        var match=pickBestElement(nodes,{coord_fallback:null},getMetrics(),null);
-        if(match&&match.element){
-          container=match.element;
-          break;
-        }
-      }
-    }
-    if(!container&&scrollContext.container_fingerprint){
-      var fp=resolveFromFingerprint(scrollContext.container_fingerprint,{coord_fallback:null},getMetrics(),document);
-      container=fp&&fp.element?fp.element:null;
-    }
-    if(!container||!container.getBoundingClientRect) return null;
-    var rect=container.getBoundingClientRect();
-    var relX=typeof scrollContext.container_x_percent==='number'?clampPercent(scrollContext.container_x_percent)/100:0.5;
-    var relY=typeof scrollContext.container_y_percent==='number'?clampPercent(scrollContext.container_y_percent)/100:0.5;
-    return {
-      clientX:rect.left+(rect.width*relX),
-      clientY:rect.top+(rect.height*relY)
-    };
-  }
-
   function buildCoordFallback(clientX,clientY,metrics){
     var safeViewW=metrics.viewWidth||1;
     var safeViewH=metrics.viewHeight||1;
@@ -511,8 +398,7 @@ function trackingScript() {
       },
       container_hint:getContainerHint(el),
       transient_context:getTransientContext(el),
-      view_context:getViewContext(),
-      scroll_context:getScrollContext(el,clientX,clientY),
+      source_anchor:getSourceAnchor(el),
       coord_fallback:fallback
     };
   }
@@ -587,17 +473,163 @@ function trackingScript() {
     return dist;
   }
 
+  function getReactFiberNode(el){
+    if(!el||typeof el!=='object') return null;
+    try{
+      var keys=Object.keys(el);
+      for(var i=0;i<keys.length;i++){
+        var key=keys[i];
+        if(key.indexOf('__reactFiber$')===0||key.indexOf('__reactInternalInstance$')===0){
+          return el[key];
+        }
+      }
+    }catch(e){}
+    return null;
+  }
+
+  function getReactFiberName(fiber){
+    try{
+      if(!fiber) return '';
+      var t=fiber.type||fiber.elementType;
+      if(typeof t==='string') return t;
+      if(t&&typeof t.displayName==='string'&&t.displayName) return t.displayName;
+      if(t&&typeof t.name==='string'&&t.name) return t.name;
+    }catch(e){}
+    return '';
+  }
+
+  function getReactOwnerPath(el){
+    var fiber=getReactFiberNode(el);
+    if(!fiber) return [];
+    var path=[];
+    var current=fiber;
+    var steps=0;
+    while(current&&steps<24){
+      var name=getReactFiberName(current);
+      if(name){
+        var keyVal=current.key!=null?String(current.key):'';
+        path.push(keyVal?name+'#'+keyVal:name);
+      }
+      current=current.return||null;
+      steps++;
+    }
+    path.reverse();
+    if(path.length>12){
+      path=path.slice(path.length-12);
+    }
+    return path;
+  }
+
+  function getExplicitAnchorId(el){
+    if(!el||typeof el.closest!=='function') return '';
+    var holder=el.closest('[data-checkpoint-anchor]');
+    if(!holder||!holder.getAttribute) return '';
+    return holder.getAttribute('data-checkpoint-anchor')||'';
+  }
+
+  function getSourceAnchor(el){
+    var fiber=getReactFiberNode(el);
+    var ownerPath=getReactOwnerPath(el);
+    var source=getSourceDebugInfo(fiber);
+    var component=getReactFiberName(fiber);
+    var explicitId=getExplicitAnchorId(el);
+    var reactKey=fiber&&fiber.key!=null?String(fiber.key):'';
+    var hasData=!!(explicitId||component||ownerPath.length>0||source||reactKey);
+    if(!hasData) return null;
+    return {
+      explicit_id:explicitId||undefined,
+      component_name:component||undefined,
+      owner_path:ownerPath,
+      source_file:source&&source.fileName?String(source.fileName):undefined,
+      source_line:source&&typeof source.lineNumber==='number'?source.lineNumber:undefined,
+      source_column:source&&typeof source.columnNumber==='number'?source.columnNumber:undefined,
+      react_key:reactKey||undefined,
+      host_tag:el&&el.tagName?String(el.tagName).toLowerCase():undefined
+    };
+  }
+
+  function ownerPathSuffixMatches(current,expected){
+    if(!Array.isArray(current)||!Array.isArray(expected)||current.length===0||expected.length===0) return 0;
+    var i=current.length-1;
+    var j=expected.length-1;
+    var matches=0;
+    while(i>=0&&j>=0){
+      if(current[i]!==expected[j]) break;
+      matches++;
+      i--;
+      j--;
+    }
+    return matches;
+  }
+
+  function sourceMatchScore(node,sourceAnchor){
+    if(!sourceAnchor||typeof sourceAnchor!=='object') return 0;
+    var score=0;
+    var explicit=getExplicitAnchorId(node);
+    if(sourceAnchor.explicit_id){
+      if(explicit===sourceAnchor.explicit_id) score+=1400;
+      else if(explicit) score-=300;
+    }
+    var fiber=getReactFiberNode(node);
+    if(fiber){
+      var component=getReactFiberName(fiber);
+      if(sourceAnchor.component_name&&component===sourceAnchor.component_name){
+        score+=180;
+      }
+      if(sourceAnchor.react_key&&fiber.key!=null&&String(fiber.key)===sourceAnchor.react_key){
+        score+=260;
+      }
+      var currentPath=getReactOwnerPath(node);
+      var suffix=ownerPathSuffixMatches(currentPath,sourceAnchor.owner_path);
+      if(suffix>0){
+        score+=suffix*80;
+      }
+      var source=getSourceDebugInfo(fiber);
+      if(source&&sourceAnchor.source_file){
+        var currentFile=String(source.fileName||'');
+        var targetFile=String(sourceAnchor.source_file||'');
+        if(currentFile===targetFile){
+          score+=260;
+          if(typeof sourceAnchor.source_line==='number'&&source.lineNumber===sourceAnchor.source_line){
+            score+=280;
+          }
+          if(typeof sourceAnchor.source_column==='number'&&source.columnNumber===sourceAnchor.source_column){
+            score+=60;
+          }
+        }
+      }
+    }
+    if(sourceAnchor.host_tag&&node&&node.tagName&&String(node.tagName).toLowerCase()===sourceAnchor.host_tag){
+      score+=35;
+    }
+    return score;
+  }
+
+  function textMatchScore(node,payload){
+    if(!payload||!payload.text_context) return 0;
+    var tc=payload.text_context;
+    var selfText=getVisibleText(node);
+    var parentText=node.parentElement?getVisibleText(node.parentElement):'';
+    var bonus=0;
+    if(tc.self&&selfText&&tc.self.length>2){
+      if(selfText===tc.self.toLowerCase()) bonus+=200;
+      else if(selfText.indexOf(tc.self.toLowerCase())>=0||tc.self.toLowerCase().indexOf(selfText)>=0) bonus+=80;
+    }
+    if(tc.parent&&parentText&&tc.parent.length>2){
+      if(parentText===tc.parent.toLowerCase()) bonus+=100;
+      else if(parentText.indexOf(tc.parent.toLowerCase())>=0||tc.parent.toLowerCase().indexOf(parentText)>=0) bonus+=40;
+    }
+    return bonus;
+  }
+
   function pickBestElement(nodes,payload,metrics,fingerprintPath){
-    if(!nodes||nodes.length===0) return { element:null, ambiguous:false, bestScore:Infinity };
+    if(!nodes||nodes.length===0) return { element:null, bestScore:Infinity };
     var target=getTargetDocPoint(payload,metrics);
     var best=null;
     var bestScore=Infinity;
-    var secondScore=Infinity;
-    var matchCount=0;
     for(var i=0;i<nodes.length;i++){
       var node=nodes[i];
       if(!node||node.nodeType!==1) continue;
-      matchCount++;
       var anchorPoint=getAnchorClientPoint(node,payload);
       var docX=anchorPoint.clientX+metrics.scrollX;
       var docY=anchorPoint.clientY+metrics.scrollY;
@@ -610,24 +642,15 @@ function trackingScript() {
       if(Array.isArray(fingerprintPath)&&fingerprintPath.length>0){
         score+=siblingPathDistance(node,fingerprintPath)*40;
       }
+      var tBonus=textMatchScore(node,payload);
+      score=Math.max(0,score-tBonus);
       if(score<bestScore){
-        secondScore=bestScore;
         best=node;
         bestScore=score;
-      }else if(score<secondScore){
-        secondScore=score;
-      }
-    }
-    if(!best) return { element:null, ambiguous:false, bestScore:Infinity };
-    var ambiguous=false;
-    if(matchCount>1){
-      if(!target){
-        ambiguous=true;
-      }else if((secondScore-bestScore)<18){
-        ambiguous=true;
       }
     }
-    return { element:best, ambiguous:ambiguous, bestScore:bestScore };
+    if(!best) return { element:null, bestScore:Infinity };
+    return { element:best, bestScore:bestScore };
   }
 
   function querySelectorAllSafe(scope,selector){
@@ -640,14 +663,14 @@ function trackingScript() {
   }
 
   function resolveFromFingerprint(fingerprint,payload,metrics,scope){
-    if(!fingerprint) return { element:null, ambiguous:false, bestScore:Infinity };
+    if(!fingerprint) return { element:null, bestScore:Infinity };
     var searchScope=scope||document;
     if(fingerprint.id){
       var byId=searchScope.getElementById?searchScope.getElementById(fingerprint.id):null;
       if(!byId&&searchScope.querySelector){
         try{ byId=searchScope.querySelector('#'+cssEscape(fingerprint.id)); }catch(e){}
       }
-      if(byId) return { element:byId, ambiguous:false, bestScore:0 };
+      if(byId) return { element:byId, bestScore:0 };
     }
     var tag=fingerprint.tag||'*';
     var selector=tag;
@@ -658,6 +681,65 @@ function trackingScript() {
     return pickBestElement(nodes,payload,metrics,fingerprint.sibling_path);
   }
 
+  function resolveFromSourceAnchor(sourceAnchor,payload,metrics,scope){
+    if(!sourceAnchor||typeof sourceAnchor!=='object'){
+      return { element:null, score:0 };
+    }
+    var searchScope=scope||document;
+    var best=null;
+    var bestScore=0;
+    var target=getTargetDocPoint(payload,metrics);
+
+    function consider(nodes){
+      for(var i=0;i<nodes.length;i++){
+        var node=nodes[i];
+        if(!node||node.nodeType!==1) continue;
+        var score=sourceMatchScore(node,sourceAnchor);
+        if(score<=0) continue;
+        if(target){
+          var point=getAnchorClientPoint(node,payload);
+          var dx=(point.clientX+metrics.scrollX)-target.x;
+          var dy=(point.clientY+metrics.scrollY)-target.y;
+          var dist=Math.sqrt(dx*dx+dy*dy);
+          score-=Math.min(280,dist*0.7);
+        }
+        if(score>bestScore){
+          best=node;
+          bestScore=score;
+        }
+      }
+    }
+
+    if(sourceAnchor.explicit_id){
+      var explicitNodes=querySelectorAllSafe(searchScope,'[data-checkpoint-anchor=\"'+cssEscape(sourceAnchor.explicit_id)+'\"]');
+      consider(explicitNodes);
+      if(!best&&searchScope!==document){
+        consider(querySelectorAllSafe(document,'[data-checkpoint-anchor=\"'+cssEscape(sourceAnchor.explicit_id)+'\"]'));
+      }
+      if(best){
+        return { element:best, score:bestScore };
+      }
+    }
+
+    var tag=sourceAnchor.host_tag||((payload.dom_fingerprint&&payload.dom_fingerprint.tag)||'*');
+    var nodes=querySelectorAllSafe(searchScope,tag);
+    if(nodes.length>1800){
+      nodes=nodes.slice(0,1800);
+    }
+    consider(nodes);
+    if(!best&&searchScope!==document){
+      var docNodes=querySelectorAllSafe(document,tag);
+      if(docNodes.length>1800){
+        docNodes=docNodes.slice(0,1800);
+      }
+      consider(docNodes);
+    }
+    if(bestScore<220){
+      return { element:null, score:bestScore };
+    }
+    return { element:best, score:bestScore };
+  }
+
   function isStrongContainerHint(hint){
     if(!hint||typeof hint!=='object') return false;
     if(typeof hint.id==='string'&&hint.id.length>0) return true;
@@ -689,19 +771,10 @@ function trackingScript() {
 
   function resolveAnchor(payload){
     if(!payload||typeof payload!=='object') return {coordFallback:null,strategy:'none',matchedSelector:null,status:'none'};
-    if(!viewContextMatches(payload.view_context)){
-      return {
-        coordFallback:payload.coord_fallback||null,
-        strategy:'context_mismatch',
-        matchedSelector:null,
-        status:'context_mismatch'
-      };
-    }
     var element=null;
     var strategy='none';
     var matchedSelector=null;
     var metrics=getMetrics();
-    var ambiguous=false;
     var transientRoot=null;
     var hasTransientContext=!!(payload.transient_context&&typeof payload.transient_context==='object');
     if(hasTransientContext){
@@ -720,7 +793,6 @@ function trackingScript() {
         var found=pickBestElement(nodes,payload,metrics,null);
         if(found&&found.element){
           element=found.element;
-          ambiguous=!!found.ambiguous;
           strategy='selector';
           matchedSelector=(scopeTag?scopeTag+': ':'')+candidate.selector;
           return true;
@@ -732,6 +804,15 @@ function trackingScript() {
     if(transientRoot){
       trySelectorChain(transientRoot,'transient_root');
     }
+    if(!element&&payload.source_anchor){
+      var sourceScope=transientRoot||document;
+      var sourceMatch=resolveFromSourceAnchor(payload.source_anchor,payload,metrics,sourceScope);
+      if(sourceMatch&&sourceMatch.element){
+        element=sourceMatch.element;
+        strategy='source';
+        matchedSelector='source_anchor';
+      }
+    }
     if(!element){
       trySelectorChain(document,'document');
     }
@@ -750,7 +831,6 @@ function trackingScript() {
       }
       if(containerMatch.element){
         element=containerMatch.element;
-        ambiguous=!!containerMatch.ambiguous;
         strategy='container';
         matchedSelector=payload.container_hint.selector;
       }
@@ -762,45 +842,10 @@ function trackingScript() {
       }
       if(fpMatch.element){
         element=fpMatch.element;
-        ambiguous=!!fpMatch.ambiguous;
         strategy='fingerprint';
       }
     }
-    if(!element&&payload.scroll_context){
-      var fromContainer=getPointFromScrollContext(payload.scroll_context);
-      if(fromContainer){
-        return {
-          coordFallback:buildCoordFallback(fromContainer.clientX,fromContainer.clientY,metrics),
-          strategy:'scroll_container',
-          matchedSelector:null,
-          status:'resolved'
-        };
-      }
-    }
     if(!element) return {coordFallback:null,strategy:'fallback',matchedSelector:null,status:'fallback_only'};
-    if(ambiguous){
-      return {
-        coordFallback:payload.coord_fallback||null,
-        strategy:'ambiguous',
-        matchedSelector:matchedSelector,
-        status:'ambiguous'
-      };
-    }
-    var target=getTargetDocPoint(payload,metrics);
-    if(target){
-      var anchorPoint=getAnchorClientPoint(element,payload);
-      var distX=(anchorPoint.clientX+metrics.scrollX)-target.x;
-      var distY=(anchorPoint.clientY+metrics.scrollY)-target.y;
-      var dist=Math.sqrt(distX*distX+distY*distY);
-      if(dist>220){
-        return {
-          coordFallback:payload.coord_fallback||null,
-          strategy:'ambiguous',
-          matchedSelector:matchedSelector,
-          status:'ambiguous'
-        };
-      }
-    }
     var point=getAnchorClientPoint(element,payload);
     var clientX=point.clientX;
     var clientY=point.clientY;
@@ -893,7 +938,6 @@ function trackingScript() {
       scrollTick=true;
       requestAnimationFrame(function(){
         reportScroll();
-        reportDomMutation('scroll');
         scrollTick=false;
       });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "checkpoint-cli",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "description": "Share your localhost with reviewers — get visual feedback directly on the page",
   "keywords": [
     "checkpoint",