checkpoint-cli 0.4.1 → 0.5.0

package/dist/index.js

@@ -447,7 +447,7 @@ const program = new commander_1.Command();
 program
     .name('checkpoint')
     .description('Share your localhost with reviewers — get visual feedback directly on the page.\n\nQuick start:\n  1. checkpoint login          Sign in to your Checkpoint account\n  2. checkpoint start -p 3000  Start tunneling and get a share link\n\nReuse a tunnel name to keep the same share URL and preserve all comments.')
-    .version('0.4.1');
+    .version('0.5.0');
 // ── checkpoint login ──
 program
     .command('login')

package/dist/tracking-script-minimal.js

@@ -14,7 +14,6 @@ function buildMinimalTrackingScript() {
   var lastMouseX=0;
   var lastMouseY=0;
   var inspectBox=null;
-  var inspectLabel=null;
   var pickShield=null;
   var lastPath='';
   var mutationTick=false;
@@ -147,6 +146,214 @@ function buildMinimalTrackingScript() {
     return path.slice(-12);
   }
 
+  function withFrameworkSuffix(path,framework){
+    var safePath=Array.isArray(path)?path.slice(0):[];
+    if(framework) safePath.push('@fw:'+framework);
+    return safePath.slice(-16);
+  }
+
+  function getVueComponentFromElement(el){
+    if(!el||el.nodeType!==1) return null;
+    var current=el;
+    var depth=0;
+    while(current&&depth<8){
+      try{
+        if(current.__vueParentComponent) return current.__vueParentComponent;
+        if(current.__vue__) return current.__vue__;
+        if(current.__vnode&&current.__vnode.component) return current.__vnode.component;
+      }catch(e){}
+      current=current.parentElement;
+      depth++;
+    }
+    return null;
+  }
+
+  function getVueComponentName(instance){
+    try{
+      if(!instance) return '';
+      if(instance.type){
+        var t=instance.type;
+        if(typeof t.name==='string'&&t.name) return t.name;
+        if(typeof t.__name==='string'&&t.__name) return t.__name;
+        if(typeof t.displayName==='string'&&t.displayName) return t.displayName;
+      }
+      if(instance.$options&&typeof instance.$options.name==='string'&&instance.$options.name){
+        return instance.$options.name;
+      }
+    }catch(e){}
+    return '';
+  }
+
+  function getVueSourceFile(instance){
+    try{
+      if(!instance) return '';
+      if(instance.type&&typeof instance.type.__file==='string'&&instance.type.__file) return instance.type.__file;
+      if(instance.$options&&typeof instance.$options.__file==='string'&&instance.$options.__file) return instance.$options.__file;
+    }catch(e){}
+    return '';
+  }
+
+  function getVueOwnerPath(instance){
+    var path=[];
+    var current=instance;
+    var steps=0;
+    while(current&&steps<24){
+      var name=getVueComponentName(current);
+      var keyVal='';
+      try{
+        if(current.vnode&&current.vnode.key!=null) keyVal=String(current.vnode.key);
+        else if(current.$vnode&&current.$vnode.key!=null) keyVal=String(current.$vnode.key);
+      }catch(e){}
+      if(name) path.push(keyVal?name+'#'+keyVal:name);
+      current=current.parent||current.$parent||null;
+      steps++;
+    }
+    path.reverse();
+    return path.slice(-12);
+  }
+
+  function getVueInstanceKey(instance){
+    try{
+      if(!instance) return '';
+      if(instance.vnode&&instance.vnode.key!=null) return String(instance.vnode.key);
+      if(instance.$vnode&&instance.$vnode.key!=null) return String(instance.$vnode.key);
+    }catch(e){}
+    return '';
+  }
+
+  function getSvelteMetaFromElement(el){
+    if(!el||el.nodeType!==1) return null;
+    var current=el;
+    var depth=0;
+    while(current&&depth<8){
+      try{
+        if(current.__svelte_meta) return current.__svelte_meta;
+      }catch(e){}
+      current=current.parentElement;
+      depth++;
+    }
+    return null;
+  }
+
+  function basename(path){
+    if(!path) return '';
+    try{
+      var clean=String(path).split(/[\\/]/).pop()||'';
+      return clean;
+    }catch(e){}
+    return '';
+  }
+
+  function withoutExt(name){
+    if(!name) return '';
+    return String(name).replace(/\.[^.]+$/,'');
+  }
+
+  function getAngularComponentFromElement(el){
+    var ngApi=null;
+    try{ ngApi=window.ng||null; }catch(e){ ngApi=null; }
+    if(!ngApi||typeof ngApi.getComponent!=='function') return null;
+    var current=el;
+    var depth=0;
+    while(current&&depth<8){
+      try{
+        var comp=ngApi.getComponent(current);
+        if(comp) return { component:comp, host:current };
+      }catch(e){}
+      current=current.parentElement;
+      depth++;
+    }
+    return null;
+  }
+
+  function getAngularOwnerPath(el){
+    var ngApi=null;
+    try{ ngApi=window.ng||null; }catch(e){ ngApi=null; }
+    if(!ngApi||typeof ngApi.getComponent!=='function') return [];
+    var path=[];
+    var current=el;
+    var depth=0;
+    while(current&&depth<12){
+      try{
+        var comp=ngApi.getComponent(current);
+        if(comp&&comp.constructor&&comp.constructor.name){
+          path.push(String(comp.constructor.name));
+        }
+      }catch(e){}
+      current=current.parentElement;
+      depth++;
+    }
+    path.reverse();
+    return path.slice(-12);
+  }
+
+  function getFrameworkContextFromElement(el){
+    if(!el||el.nodeType!==1) return null;
+
+    var fiber=getReactFiberNode(el);
+    if(fiber){
+      var reactPath=getReactOwnerPathFromFiber(fiber);
+      var reactSource=getSourceDebugInfo(fiber);
+      return {
+        framework:'react',
+        component_name:getReactFiberName(fiber)||'',
+        owner_path:withFrameworkSuffix(reactPath,'react'),
+        source_file:reactSource&&reactSource.fileName?String(reactSource.fileName):'',
+        source_line:reactSource&&typeof reactSource.lineNumber==='number'?reactSource.lineNumber:undefined,
+        source_column:reactSource&&typeof reactSource.columnNumber==='number'?reactSource.columnNumber:undefined,
+        instance_key:fiber&&fiber.key!=null?String(fiber.key):''
+      };
+    }
+
+    var vueInstance=getVueComponentFromElement(el);
+    if(vueInstance){
+      var vueFile=getVueSourceFile(vueInstance);
+      return {
+        framework:'vue',
+        component_name:getVueComponentName(vueInstance)||withoutExt(basename(vueFile))||'',
+        owner_path:withFrameworkSuffix(getVueOwnerPath(vueInstance),'vue'),
+        source_file:vueFile||'',
+        source_line:undefined,
+        source_column:undefined,
+        instance_key:getVueInstanceKey(vueInstance)||''
+      };
+    }
+
+    var svelteMeta=getSvelteMetaFromElement(el);
+    if(svelteMeta){
+      var sLoc=svelteMeta.loc||null;
+      var sFile=sLoc&&sLoc.file?String(sLoc.file):'';
+      var sName=withoutExt(basename(sFile));
+      return {
+        framework:'svelte',
+        component_name:sName||'SvelteComponent',
+        owner_path:withFrameworkSuffix(sName?[sName]:[],'svelte'),
+        source_file:sFile||'',
+        source_line:sLoc&&typeof sLoc.line==='number'?sLoc.line:undefined,
+        source_column:sLoc&&typeof sLoc.column==='number'?sLoc.column:undefined,
+        instance_key:''
+      };
+    }
+
+    var ngMatch=getAngularComponentFromElement(el);
+    if(ngMatch&&ngMatch.component){
+      var ngName=(ngMatch.component.constructor&&ngMatch.component.constructor.name)
+        ? String(ngMatch.component.constructor.name)
+        : 'AngularComponent';
+      return {
+        framework:'angular',
+        component_name:ngName,
+        owner_path:withFrameworkSuffix(getAngularOwnerPath(el),'angular'),
+        source_file:'',
+        source_line:undefined,
+        source_column:undefined,
+        instance_key:''
+      };
+    }
+
+    return null;
+  }
+
   function getExplicitAnchorId(el){
     if(!el||typeof el.closest!=='function') return '';
     var holder=el.closest('[data-checkpoint-anchor]');
@@ -156,22 +363,26 @@ function buildMinimalTrackingScript() {
 
   function getSourceAnchorFromElement(el){
     if(!el||el.nodeType!==1) return null;
-    var fiber=getReactFiberNode(el);
-    var ownerPath=getReactOwnerPathFromFiber(fiber);
-    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);
+    var context=getFrameworkContextFromElement(el);
+    var hasData=!!(
+      explicitId||
+      (context&&(
+        context.component_name||
+        (Array.isArray(context.owner_path)&&context.owner_path.length>0)||
+        context.source_file||
+        context.instance_key
+      ))
+    );
     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,
+      component_name:context&&context.component_name?context.component_name:undefined,
+      owner_path:context&&Array.isArray(context.owner_path)?context.owner_path:[],
+      source_file:context&&context.source_file?context.source_file:undefined,
+      source_line:context&&typeof context.source_line==='number'?context.source_line:undefined,
+      source_column:context&&typeof context.source_column==='number'?context.source_column:undefined,
+      react_key:context&&context.instance_key?context.instance_key:undefined,
       host_tag:el&&el.tagName?String(el.tagName).toLowerCase():undefined
     };
   }
@@ -249,17 +460,16 @@ function buildMinimalTrackingScript() {
       if(explicit===sourceAnchor.explicit_id) score+=2400;
       else if(explicit) score-=200;
     }
-    var fiber=getReactFiberNode(el);
-    var component=getReactFiberName(fiber);
-    var source=getSourceDebugInfo(fiber);
-    var ownerPath=getReactOwnerPathFromFiber(fiber);
+    var context=getFrameworkContextFromElement(el);
+    var component=context&&context.component_name?context.component_name:'';
+    var ownerPath=context&&Array.isArray(context.owner_path)?context.owner_path:[];
     if(sourceAnchor.component_name&&component===sourceAnchor.component_name) score+=240;
-    if(sourceAnchor.react_key&&fiber&&fiber.key!=null&&String(fiber.key)===sourceAnchor.react_key) score+=360;
+    if(sourceAnchor.react_key&&context&&context.instance_key&&String(context.instance_key)===sourceAnchor.react_key) score+=360;
     score+=ownerSuffixScore(ownerPath,sourceAnchor.owner_path||[]);
-    if(sourceAnchor.source_file&&source&&String(source.fileName||'')===String(sourceAnchor.source_file)){
+    if(sourceAnchor.source_file&&context&&context.source_file&&String(context.source_file||'')===String(sourceAnchor.source_file)){
       score+=420;
-      if(typeof sourceAnchor.source_line==='number'&&source.lineNumber===sourceAnchor.source_line) score+=420;
-      if(typeof sourceAnchor.source_column==='number'&&source.columnNumber===sourceAnchor.source_column) score+=80;
+      if(typeof sourceAnchor.source_line==='number'&&context.source_line===sourceAnchor.source_line) score+=420;
+      if(typeof sourceAnchor.source_column==='number'&&context.source_column===sourceAnchor.source_column) score+=80;
     }
     if(sourceAnchor.host_tag&&el.tagName&&String(el.tagName).toLowerCase()===sourceAnchor.host_tag) score+=40;
     return score;
@@ -451,19 +661,6 @@ function buildMinimalTrackingScript() {
     return { coordFallback:null, strategy:'none', matchedSelector:null, status:'none' };
   }
 
-              function getInspectLabelText(target){
-                if(!target||!target.tagName) return '';
-                var tag=String(target.tagName).toLowerCase();
-                var id=target.id?('#'+target.id):'';
-                var cls='';
-                try{
-                  var classes=(target.className&&typeof target.className==='string')
-                    ? target.className.trim().split(/\s+/).filter(Boolean).slice(0,3)
-                    : [];
-                  if(classes.length>0) cls='.'+classes.join('.');
-                }catch(e){}
-                return shortText(tag+id+cls);
-              }
 
   function ensureInspectUi(){
     if(!document.body) return;
@@ -483,31 +680,10 @@ inspectBox.style.border='2px solid #F26522';
       inspectBox.style.display='none';
       document.body.appendChild(inspectBox);
     }
-    if(!inspectLabel){
-      inspectLabel=document.createElement('div');
-      inspectLabel.style.position='fixed';
-      inspectLabel.style.left='0';
-      inspectLabel.style.top='0';
-      inspectLabel.style.padding='6px 8px';
-      inspectLabel.style.maxWidth='420px';
-      inspectLabel.style.borderRadius='8px';
-      inspectLabel.style.border='1px solid rgba(148,163,184,0.45)';
-      inspectLabel.style.background='rgba(15,23,42,0.96)';
-      inspectLabel.style.color='#e2e8f0';
-      inspectLabel.style.font='12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace';
-      inspectLabel.style.whiteSpace='nowrap';
-      inspectLabel.style.wordBreak='break-word';
-      inspectLabel.style.pointerEvents='none';
-      inspectLabel.style.zIndex='2147483647';
-      inspectLabel.style.display='none';
-      inspectLabel.style.boxShadow='0 6px 20px rgba(0,0,0,0.35)';
-      document.body.appendChild(inspectLabel);
-    }
   }
 
   function hideInspectUi(){
-    if(inspectBox) inspectBox.style.display='none';
-    if(inspectLabel) inspectLabel.style.display='none';
+              if(inspectBox) inspectBox.style.display='none';
   }
 
   function ensurePickShield(){
@@ -534,7 +710,7 @@ inspectBox.style.border='2px solid #F26522';
 
   function renderInspectAt(x,y){
     ensureInspectUi();
-    if(!inspectBox||!inspectLabel){
+                if(!inspectBox){
       return;
     }
     var target=getElementAtPoint(x,y);
@@ -552,18 +728,6 @@ inspectBox.style.border='2px solid #F26522';
     inspectBox.style.top=Math.max(0,rect.top)+'px';
     inspectBox.style.width=Math.max(1,rect.width)+'px';
     inspectBox.style.height=Math.max(1,rect.height)+'px';
-    inspectLabel.textContent=getInspectLabelText(target);
-    inspectLabel.style.display='block';
-
-    var vw=window.innerWidth||document.documentElement.clientWidth||0;
-    var vh=window.innerHeight||document.documentElement.clientHeight||0;
-    var lr=inspectLabel.getBoundingClientRect();
-    var left=x+12;
-    var top=y+12;
-    if(left+lr.width>vw-8) left=Math.max(8,x-lr.width-12);
-    if(top+lr.height>vh-8) top=Math.max(8,y-lr.height-12);
-    inspectLabel.style.left=left+'px';
-    inspectLabel.style.top=top+'px';
   }
 
   function postPickResult(target,clientX,clientY){

package/package.json

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