react-native-inapp-inspector 2.5.12 → 2.5.13

package/dist/commonjs/helpers/uiInspectorEngine.d.ts

@@ -0,0 +1,62 @@
+import { A11yAuditResult, BoxModelMetrics, ComponentTreeNode, HierarchyBreadcrumbItem, InspectedElementInfo } from '../types';
+export declare function getCleanComponentName(type: any): string;
+export declare function buildHierarchyFromFiber(fiber: any): HierarchyBreadcrumbItem[];
+export interface IndexedFiberItem {
+    fiber: any;
+    name: string;
+    isHost: boolean;
+    props: Record<string, any>;
+    styles: Record<string, any>;
+    nativeTag?: number;
+    text?: string;
+    sourceLocation?: string;
+    depth: number;
+}
+export declare function getAllAppFibers(): IndexedFiberItem[];
+export declare function getFullComponentTree(): ComponentTreeNode[];
+export declare function inspectFiberTreeAtPoint(locationX: number, locationY: number, nativeHit?: any): InspectedElementInfo | null;
+export declare function getDynamicInspectorDataForPoint(locationX: number, locationY: number, inspectedViewRef?: any): Promise<InspectedElementInfo | null>;
+export declare function extractBoxModel(flattenedStyle?: Record<string, any>, layout?: {
+    width: number;
+    height: number;
+}): BoxModelMetrics;
+export declare function categorizeStyles(flattened?: Record<string, any>): {
+    layout: Record<string, any>;
+    dimensions: Record<string, any>;
+    position: Record<string, any>;
+    spacing: Record<string, any>;
+    typography: Record<string, any>;
+    appearance: Record<string, any>;
+    borders: Record<string, any>;
+    transforms: Record<string, any>;
+    other: Record<string, any>;
+};
+export declare function calculateContrastRatio(textColor?: string, bgColor?: string): {
+    ratio: any;
+    score: "N/A";
+} | {
+    ratio: number;
+    score: "AAA" | "AA" | "Fail";
+};
+export declare function auditAccessibility(props?: Record<string, any>, layout?: {
+    width: number;
+    height: number;
+}, styles?: Record<string, any>): A11yAuditResult;
+export declare function generateJsxSnippet(componentName: string, props?: Record<string, any>, styles?: Record<string, any>): string;
+export declare function generateFullJsxSegmentSnippet(componentName: string, props?: Record<string, any>, styles?: Record<string, any>): {
+    code: string;
+    sourceFile?: string;
+    sourceLocation?: string;
+    lineNumber?: number;
+    columnNumber?: number;
+};
+export declare function generateStyleSheetSnippet(componentName: string, styles?: Record<string, any>): string;
+export declare function generateCssSnippet(componentName: string, styles?: Record<string, any>): string;
+export declare function createInspectedElement(componentName: string, props: Record<string, any>, layout: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    pageX: number;
+    pageY: number;
+}, hierarchy?: HierarchyBreadcrumbItem[], nativeTag?: number, snapshotUri?: string, snapshotBase64?: string): InspectedElementInfo;

package/dist/commonjs/helpers/uiInspectorEngine.js

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getCleanComponentName=getCleanComponentName,exports.buildHierarchyFromFiber=buildHierarchyFromFiber,exports.getAllAppFibers=getAllAppFibers,exports.getFullComponentTree=getFullComponentTree,exports.inspectFiberTreeAtPoint=inspectFiberTreeAtPoint,exports.getDynamicInspectorDataForPoint=getDynamicInspectorDataForPoint,exports.extractBoxModel=extractBoxModel,exports.categorizeStyles=categorizeStyles,exports.calculateContrastRatio=calculateContrastRatio,exports.auditAccessibility=auditAccessibility,exports.generateJsxSnippet=generateJsxSnippet,exports.generateFullJsxSegmentSnippet=generateFullJsxSegmentSnippet,exports.generateStyleSheetSnippet=generateStyleSheetSnippet,exports.generateCssSnippet=generateCssSnippet,exports.createInspectedElement=createInspectedElement;const react_native_1=require("react-native");function getCleanComponentName(t){if(!t)return"Unknown";if(typeof t=="string")return t==="RCTView"||t==="AndroidHorizontalScrollView"?"View":t==="RCTText"||t==="RCTRawText"||t==="RCTVirtualText"?"Text":t==="RCTImageView"||t==="RCTCxxImageView"?"Image":t==="RCTScrollView"?"ScrollView":t==="RCTModalHostView"?"Modal":t==="RCTSafeAreaView"?"SafeAreaView":t.replace(/^RCT/,"").replace(/^Android/,"");if(typeof t=="function")return t.displayName||t.name||"Component";if(typeof t=="object"){if(t.$$typeof?.toString().includes("memo")&&t.type)return`Memo(${getCleanComponentName(t.type)})`;if(t.$$typeof?.toString().includes("forward_ref")&&(t.render||t.type))return t.displayName||`ForwardRef(${getCleanComponentName(t.render||t.type)})`;if(t.displayName)return t.displayName;if(t.name)return t.name}return"Component"}function isInternalWrapper(t){if(!t)return!0;const e=t.toLowerCase();return e.includes("provider")||e.includes("consumer")||e.includes("context")||e.includes("safearray")||e==="errorboundary"||e==="moduleerrorboundary"||e.includes("inspector")||e.includes("screengroup")||e.includes("screenstack")||e.includes("screencontainer")||e.includes("nativestackview")||e.includes("navigationcontainerinner")||e==="anonymous"}function extractTextFromFiber(t){if(!t)return;const e=t.memoizedProps||t.pendingProps;if(typeof e?.children=="string")return e.children;if(typeof e?.title=="string")return e.title;if(typeof e?.label=="string")return e.label;if(typeof e?.text=="string")return e.text;if(typeof e?.accessibilityLabel=="string")return e.accessibilityLabel}function buildHierarchyFromFiber(t){const e=[];let o=t,i=0;for(;o&&i<30;){if(o.type){const n=getCleanComponentName(o.type),l=typeof o.type=="string",a=o.memoizedProps||o.pendingProps||{},c=a.style?react_native_1.StyleSheet.flatten(a.style):void 0,r=extractTextFromFiber(o),s=o._debugSource||a.__source||a._source,d=s?.fileName&&s?.lineNumber?`${s.fileName.replace(/^.*[\\/]/,"")}:${s.lineNumber}`:void 0;(!isInternalWrapper(n)||e.length===0)&&e.unshift({id:`crumb_${i}_${n}_${Math.random().toString(36).substring(2,5)}`,displayName:n,componentName:n,depth:i,isHostComponent:l,props:a,styles:c})}o=o.return,i++}return e}function getAllAppFibers(){const t=[];try{const e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__||typeof window<"u"&&window.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!e||!e._fiberRoots)return t;for(const o of e._fiberRoots.values())if(!(!o||o.size===0))for(const i of o.values()){const n=i?.current;if(!n)continue;const l=[{fiber:n,depth:0}],a=new Set;let c=0;for(;l.length>0&&c<8e3;){const{fiber:r,depth:s}=l.pop();if(!r||a.has(r)||(a.add(r),c++,r.sibling&&l.push({fiber:r.sibling,depth:s}),r.child&&l.push({fiber:r.child,depth:s+1}),!r.type))continue;const d=getCleanComponentName(r.type),u=d.toLowerCase();if(u.includes("inappinspector")||u.includes("uiinspector")||u.includes("floatingcapture")||u.includes("tabbar")||u.includes("devtools"))continue;const p=r.memoizedProps||r.pendingProps||{},f=p.style?react_native_1.StyleSheet.flatten(p.style)||{}:{},g=typeof r.type=="string",y=extractTextFromFiber(r),m=r._debugSource||p.__source||p._source,_=m?.fileName&&m?.lineNumber?`${m.fileName.replace(/^.*[\\/]/,"")}:${m.lineNumber}`:void 0;let w;r.stateNode&&(w=r.stateNode._nativeTag||r.stateNode.canonical?.nativeTag||r.stateNode.node||(typeof r.stateNode=="number"?r.stateNode:void 0)),t.push({fiber:r,name:d,isHost:g,props:p,styles:f,nativeTag:w,text:y,sourceLocation:_,depth:s})}}}catch{}return t}function getFullComponentTree(){try{const t=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__||typeof window<"u"&&window.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!t||!t._fiberRoots)return[];const e=[];for(const o of t._fiberRoots.values())if(!(!o||o.size===0))for(const i of o.values()){let n=function(c,r){if(!c||r>20)return null;const s=getCleanComponentName(c.type),d=s.toLowerCase();if(d.includes("inappinspector")||d.includes("uiinspector")||d.includes("floatingcapture")||d.includes("tabbar"))return null;const u=typeof c.type=="string",p=c.memoizedProps||c.pendingProps||{},f=[];let g=c.child;for(;g;){const y=n(g,r+1);y&&f.push(y),g=g.sibling}return isInternalWrapper(s)&&f.length>0?f.length===1?f[0]:{id:`tree_${r}_${s}_${Math.random().toString(36).substring(2,5)}`,name:s,displayName:s,depth:r,isHostComponent:u,props:p,children:f}:{id:`tree_${r}_${s}_${Math.random().toString(36).substring(2,5)}`,name:s,displayName:s,depth:r,isHostComponent:u,props:p,children:f}};const l=i?.current;if(!l)continue;const a=n(l,0);a&&e.push(a)}return e}catch{return[]}}function inspectFiberTreeAtPoint(t,e,o){try{const i=getAllAppFibers();if(i.length===0)return null;let n=null;if(o?.tag||o?.id){const u=o.tag||o.id;n=i.find(p=>p.nativeTag===u)||null}if(!n&&o?.text&&o.text.trim().length>0){const u=o.text.trim();n=i.find(p=>p.text&&(p.text===u||p.text.includes(u)))||null}if(!n&&o?.className){const u=o.className.replace(/^RCT/,"").replace(/^Android/,"");n=i.find(p=>!isInternalWrapper(p.name)&&(p.name===u||p.name===o.className))||null}if(!n){const u=i.filter(p=>!p.isHost&&!isInternalWrapper(p.name));if(u.length>0)n=u[u.length-1];else{const p=i.filter(f=>!isInternalWrapper(f.name));n=p.length>0?p[p.length-1]:i[i.length-1]}}if(!n)return null;const l=buildHierarchyFromFiber(n.fiber),a=o?.x??n.styles.left??t,c=o?.y??n.styles.top??e,r=o?.width??n.styles.width??160,s=o?.height??n.styles.height??44,d={x:a,y:c,width:r,height:s,pageX:a,pageY:c};return createInspectedElement(n.name,n.props,d,l,n.nativeTag)}catch{return null}}async function getDynamicInspectorDataForPoint(t,e,o){let i=null;try{const{findNativeViewAtPoint:l}=require("../native/NativeInspector");typeof l=="function"&&(i=await l(t,e))}catch{}const n=inspectFiberTreeAtPoint(t,e,i);return n&&n.hierarchy&&n.hierarchy.length>0?(i&&i.width>0&&i.height>0&&(n.layout={x:i.x,y:i.y,width:i.width,height:i.height,pageX:i.x,pageY:i.y},n.boxModel=extractBoxModel(n.flattenedStyles,n.layout)),n):new Promise(l=>{let a=!1;const c=setTimeout(()=>{a||(a=!0,l(inspectFiberTreeAtPoint(t,e,i)))},100);try{const r=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__||typeof window<"u"&&window.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(r&&r.renderers){const s=Array.from(r.renderers.values());for(const d of s){const u=d?.rendererConfig?.getInspectorDataForViewAtPoint;typeof u=="function"&&u(o||null,t,e,p=>{if(a)return!0;if(p&&(p.frame||p.hierarchy&&p.hierarchy.length>0)){a=!0,clearTimeout(c);const{frame:f,props:g,hierarchy:y,selectedIndex:m,touchedViewTag:_,closestInstance:w}=p,b=[];Array.isArray(y)&&y.forEach((h,T)=>{const N=h?.type||h,$=h?.name||getCleanComponentName(N)||`View_${T}`;let C={};try{if(typeof h.getInspectorData=="function"){const V=h.getInspectorData();V?.props&&(C=V.props)}else h.props?C=h.props:h.memoizedProps&&(C=h.memoizedProps)}catch{}const v=C?.style||typeof h.getInspectorData=="function"&&h.getInspectorData()?.props?.style,H=v?react_native_1.StyleSheet.flatten(v):void 0;b.push({id:`crumb_${T}_${$}`,displayName:getCleanComponentName($),componentName:$,depth:T,isHostComponent:typeof $=="string"&&($.startsWith("RCT")||$==="View"||$==="Text"||$==="Image"),props:C,styles:H})});const S=m!=null&&b[m]?b[m]:b[b.length-1],A=S?.componentName||(w?getCleanComponentName(w.type):"View"),R=getCleanComponentName(A),x=g&&Object.keys(g).length>0?g:S?.props||{},O=x.style?react_native_1.StyleSheet.flatten(x.style):S?.styles||{},L={x:f?.left??t,y:f?.top??e,width:f?.width??(i?.width||120),height:f?.height??(i?.height||44),pageX:f?.left??t,pageY:f?.top??e};return l(createInspectedElement(R,x,L,b.length>0?b:void 0,_)),!0}return!1})}}}catch{clearTimeout(c),l(inspectFiberTreeAtPoint(t,e,i))}})}function extractBoxModel(t={},e={width:0,height:0}){const o=(h,T=0)=>{const N=typeof h=="number"?h:parseFloat(h);return isNaN(N)?T:N},i=o(t.margin,0),n=o(t.marginVertical,i),l=o(t.marginHorizontal,i),a=o(t.marginTop,n),c=o(t.marginBottom,n),r=o(t.marginLeft,l),s=o(t.marginRight,l),d=o(t.padding,0),u=o(t.paddingVertical,d),p=o(t.paddingHorizontal,d),f=o(t.paddingTop,u),g=o(t.paddingBottom,u),y=o(t.paddingLeft,p),m=o(t.paddingRight,p),_=o(t.borderWidth,0),w=o(t.borderTopWidth,_),b=o(t.borderBottomWidth,_),S=o(t.borderLeftWidth,_),A=o(t.borderRightWidth,_),R=e.width||o(t.width,0),x=e.height||o(t.height,0),O=Math.max(0,R-(y+m+S+A)),L=Math.max(0,x-(f+g+w+b));return{margin:{top:a,right:s,bottom:c,left:r},border:{top:w,right:A,bottom:b,left:S},padding:{top:f,right:m,bottom:g,left:y},content:{width:Math.round(O*10)/10,height:Math.round(L*10)/10}}}function categorizeStyles(t={}){const e={layout:{},dimensions:{},position:{},spacing:{},typography:{},appearance:{},borders:{},transforms:{},other:{}},o=new Set(["flex","flexDirection","justifyContent","alignItems","alignSelf","alignContent","flexWrap","flexGrow","flexShrink","flexBasis","gap","rowGap","columnGap"]),i=new Set(["width","height","minWidth","maxWidth","minHeight","maxHeight","aspectRatio"]),n=new Set(["position","top","bottom","left","right","start","end","zIndex"]),l=new Set(["padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingHorizontal","paddingVertical","paddingStart","paddingEnd","margin","marginTop","marginRight","marginBottom","marginLeft","marginHorizontal","marginVertical","marginStart","marginEnd"]),a=new Set(["color","fontSize","fontWeight","fontFamily","fontStyle","lineHeight","letterSpacing","textAlign","textAlignVertical","textDecorationLine","textDecorationStyle","textDecorationColor","textTransform","includeFontPadding"]),c=new Set(["backgroundColor","opacity","overflow","elevation","shadowColor","shadowOffset","shadowOpacity","shadowRadius","backfaceVisibility"]),r=new Set(["borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","borderStyle"]);for(const[s,d]of Object.entries(t))d!==void 0&&(o.has(s)?e.layout[s]=d:i.has(s)?e.dimensions[s]=d:n.has(s)?e.position[s]=d:l.has(s)?e.spacing[s]=d:a.has(s)?e.typography[s]=d:c.has(s)?e.appearance[s]=d:r.has(s)?e.borders[s]=d:s==="transform"?e.transforms[s]=d:e.other[s]=d);return e}function getLuminance(t){const e=t.replace("#","");if(e.length<6)return .5;const o=parseInt(e.substring(0,2),16)/255,i=parseInt(e.substring(2,4),16)/255,n=parseInt(e.substring(4,6),16)/255,l=[o,i,n].map(a=>a<=.03928?a/12.92:Math.pow((a+.055)/1.055,2.4));return .2126*l[0]+.7152*l[1]+.0722*l[2]}function calculateContrastRatio(t,e){if(!t||!e||!t.startsWith("#")||!e.startsWith("#"))return{ratio:void 0,score:"N/A"};const o=getLuminance(t),i=getLuminance(e),n=Math.max(o,i),l=Math.min(o,i),a=(n+.05)/(l+.05),c=Math.round(a*100)/100;let r="Fail";return c>=7?r="AAA":c>=4.5&&(r="AA"),{ratio:c,score:r}}function auditAccessibility(t={},e={width:0,height:0},o={}){const i=react_native_1.Platform.OS==="android",n=i?48:44,l=typeof t.onPress=="function"||typeof t.onLongPress=="function"||t.accessible===!0,a=e.width||o.width||0,c=e.height||o.height||0,r=[];let s=!0;l&&(a>0||c>0)&&(a<n||c<n)&&(s=!1,r.push(`Touch target is ${Math.round(a)}\xD7${Math.round(c)}pt. Recommended min is ${n}\xD7${n}pt for ${i?"Android Material Design":"Apple iOS HIG"}.`));const d=!!(t.accessibilityLabel||t["aria-label"]||t.accessibilityTitle);l&&!d&&!t.children&&typeof t.children!="string"&&r.push("Interactive element is missing an accessibilityLabel / aria-label.");const u=o.color,p=o.backgroundColor,f=calculateContrastRatio(u,p);return f.score==="Fail"&&f.ratio!==void 0&&r.push(`Contrast ratio is ${f.ratio}:1 (below WCAG AA minimum 4.5:1).`),{hasValidTouchTarget:s,touchTargetWidth:a,touchTargetHeight:c,recommendedMinSize:n,contrastRatio:f.ratio,contrastScore:f.score,textColor:u,backgroundColor:p,hasAccessibilityLabel:d,accessibilityRole:t.accessibilityRole||t.role,accessibilityHint:t.accessibilityHint,issues:r}}function generateJsxSnippet(t,e={},o={}){return generateFullJsxSegmentSnippet(t,e,o).code}function formatJsxProp(t,e){return typeof e=="string"?`${t}="${e}"`:typeof e=="boolean"?e?t:`${t}={false}`:typeof e=="number"?`${t}={${e}}`:typeof e=="function"?`${t}={() => {}}`:typeof e=="object"&&e!==null?`${t}={${JSON.stringify(e)}}`:`${t}={${String(e)}}`}function formatJsxChildren(t,e=1){if(t==null)return"";const o="  ".repeat(e);if(typeof t=="string"||typeof t=="number")return`${o}${t}`;if(Array.isArray(t))return t.map(i=>formatJsxChildren(i,e)).filter(Boolean).join(`
+`);if(typeof t=="object"&&t.type){const i=typeof t.type=="string"?t.type:t.type.displayName||t.type.name||"Component",n=t.props||{},l=[];for(const[c,r]of Object.entries(n))c==="children"||c==="__source"||c==="__self"||c==="_source"||l.push(formatJsxProp(c,r));const a=l.length?" "+l.join(" "):"";if(n.children){const c=formatJsxChildren(n.children,e+1);return`${o}<${i}${a}>
+${c}
+${o}</${i}>`}return`${o}<${i}${a} />`}return""}function generateFullJsxSegmentSnippet(t,e={},o={}){const i=e.__source||e._source,n=i?.fileName,l=i?.lineNumber,a=i?.columnNumber,c=n?n.replace(/^.*[\\/]/,""):void 0,r=c&&l?`${c}:${l}${a?`:${a}`:""}`:void 0,s=[];for(const[p,f]of Object.entries(e))p==="children"||p==="style"||p==="key"||p==="__source"||p==="__self"||p==="_source"||s.push(formatJsxProp(p,f));Object.keys(o).length>0&&s.push(`style={styles.${t.toLowerCase()||"container"}}`);const d=formatJsxChildren(e.children,1);let u="";return s.length<=1&&!d?u=`<${t}${s.length?" "+s.join(" "):""} />`:d?u=`<${t}${s.length?`
+  `+s.join(`
+  `):""}>
+${d}
+</${t}>`:u=`<${t}
+  ${s.join(`
+  `)}
+/>`,{code:u,sourceFile:n,sourceLocation:r,lineNumber:l,columnNumber:a}}function generateStyleSheetSnippet(t,e={}){const o="    ",i=[];for(const[l,a]of Object.entries(e)){if(a===void 0)continue;const c=typeof a=="string"?`'${a}'`:typeof a=="object"?JSON.stringify(a):String(a);i.push(`${o}${l}: ${c},`)}const n=i.length>0?`{
+${i.join(`
+`)}
+  }`:"{}";return`const styles = StyleSheet.create({
+  ${t.toLowerCase()}Container: ${n},
+});`}function generateCssSnippet(t,e={}){const o=[];for(const[n,l]of Object.entries(e)){if(l===void 0)continue;const a=n.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),c=typeof l=="number"?`${l}px`:String(l);o.push(`  ${a}: ${c};`)}const i=o.length>0?`{
+${o.join(`
+`)}
+}`:"{}";return`.${t.toLowerCase()}-element ${i}`}function createInspectedElement(t,e={},o,i=[],n,l,a){const c=e.style?react_native_1.StyleSheet.flatten(e.style)||{}:{},r={...c},s=extractBoxModel(r,o),d=auditAccessibility(e,o,r);return{id:`elem_${Date.now()}_${Math.random().toString(36).substring(2,6)}`,componentName:t,displayName:t,hierarchy:i.length>0?i:[{id:"root_app",displayName:"App",componentName:"App",depth:0,isHostComponent:!1},{id:"inspected_node",displayName:t,componentName:t,depth:1,isHostComponent:!0,props:e,styles:r}],props:e,originalStyles:c,flattenedStyles:r,tweakedStyles:{},layout:o,boxModel:s,a11y:d,nativeTag:n,snapshotUri:l,snapshotBase64:a,timestamp:Date.now()}}