bippy 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bippy",
-	"version": "0.2.0",
+	"version": "0.2.2",
 	"description": "hack into react internals",
 	"keywords": [
 		"react",
@@ -46,6 +46,16 @@
 				"default": "./dist/core.cjs"
 			}
 		},
+		"./inspect": {
+			"import": {
+				"types": "./dist/inspect.d.ts",
+				"default": "./dist/inspect.js"
+			},
+			"require": {
+				"types": "./dist/inspect.d.cts",
+				"default": "./dist/inspect.cjs"
+			}
+		},
 		"./dist/*": "./dist/*.js",
 		"./dist/*.js": "./dist/*.js",
 		"./dist/*.cjs": "./dist/*.cjs",
@@ -55,7 +65,13 @@
 	"module": "dist/index.js",
 	"browser": "dist/index.global.js",
 	"types": "dist/index.d.ts",
-	"files": ["dist", "bin", "package.json", "README.md", "LICENSE"],
+	"files": [
+		"dist",
+		"bin",
+		"package.json",
+		"README.md",
+		"LICENSE"
+	],
 	"scripts": {
 		"build": "NODE_ENV=production tsup",
 		"dev": "NODE_ENV=development tsup --watch",
@@ -81,6 +97,7 @@
 		"publint": "^0.2.12",
 		"react": "19.0.0",
 		"react-dom": "19.0.0",
+		"react-inspector": "^6.0.2",
 		"react-reconciler": "^0.31.0",
 		"terser": "^5.36.0",
 		"tsup": "^8.2.4",

package/dist/extract/index.d.cts

@@ -1,42 +0,0 @@
-interface ReactSpecTree {
-    root: BaseReactSpecNode;
-}
-declare enum ReactSpecNodeType {
-    Component = "component",
-    Element = "element",
-    A11y = "a11y"
-}
-interface BaseReactSpecNode {
-    type: ReactSpecNodeType;
-    children: ReactSpecNode[];
-}
-interface ReactElementSpecNode extends BaseReactSpecNode {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    eventHandlers: Record<string, string>;
-    classes: string[];
-    styles: Record<string, unknown>;
-    element: Element | null;
-}
-interface ReactA11ySpecNode extends ReactElementSpecNode {
-    type: ReactSpecNodeType.A11y;
-    role: string | null;
-    ariaLabel: string | null;
-}
-interface ReactComponentSpecNode extends BaseReactSpecNode {
-    type: ReactSpecNodeType.Component;
-    props: Record<string, unknown>;
-    name: string | null;
-}
-type ReactSpecNode = ReactElementSpecNode | ReactA11ySpecNode | ReactComponentSpecNode;
-declare global {
-    var __RST__: boolean;
-}
-declare const primaryColor = "115,97,230";
-declare const init: () => null | undefined;
-declare const getRectMap: (elements: Element[]) => Promise<Map<Element, DOMRect>>;
-declare const printRST: (tree: ReactSpecTree, indent?: number) => string;
-
-export { type BaseReactSpecNode, type ReactA11ySpecNode, type ReactComponentSpecNode, type ReactElementSpecNode, type ReactSpecNode, ReactSpecNodeType, type ReactSpecTree, getRectMap, init, primaryColor, printRST };

package/dist/extract/index.d.ts

@@ -1,42 +0,0 @@
-interface ReactSpecTree {
-    root: BaseReactSpecNode;
-}
-declare enum ReactSpecNodeType {
-    Component = "component",
-    Element = "element",
-    A11y = "a11y"
-}
-interface BaseReactSpecNode {
-    type: ReactSpecNodeType;
-    children: ReactSpecNode[];
-}
-interface ReactElementSpecNode extends BaseReactSpecNode {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    eventHandlers: Record<string, string>;
-    classes: string[];
-    styles: Record<string, unknown>;
-    element: Element | null;
-}
-interface ReactA11ySpecNode extends ReactElementSpecNode {
-    type: ReactSpecNodeType.A11y;
-    role: string | null;
-    ariaLabel: string | null;
-}
-interface ReactComponentSpecNode extends BaseReactSpecNode {
-    type: ReactSpecNodeType.Component;
-    props: Record<string, unknown>;
-    name: string | null;
-}
-type ReactSpecNode = ReactElementSpecNode | ReactA11ySpecNode | ReactComponentSpecNode;
-declare global {
-    var __RST__: boolean;
-}
-declare const primaryColor = "115,97,230";
-declare const init: () => null | undefined;
-declare const getRectMap: (elements: Element[]) => Promise<Map<Element, DOMRect>>;
-declare const printRST: (tree: ReactSpecTree, indent?: number) => string;
-
-export { type BaseReactSpecNode, type ReactA11ySpecNode, type ReactComponentSpecNode, type ReactElementSpecNode, type ReactSpecNode, ReactSpecNodeType, type ReactSpecTree, getRectMap, init, primaryColor, printRST };

package/dist/extract/index.global.js

@@ -1,9 +0,0 @@
-var SameExtract=function(t){"use strict";
-/**
- * @license bippy
- *
- * Copyright (c) Aiden Bai, Million Software, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var e="bippy-0.2.0",n=()=>{},o=t=>{try{Function.prototype.toString.call(t).indexOf("^_^")>-1&&setTimeout((()=>{throw new Error("React is running in production mode, but dead code elimination has not been applied. Read how to correctly configure React for production: https://reactjs.org/link/perf-use-production-build")}))}catch{}},r=t=>{const r=new Map;let i=0;const s={checkDCE:o,supportsFiber:!0,supportsFlight:!0,hasUnsupportedRendererAttached:!1,renderers:r,onCommitFiberRoot:n,onCommitFiberUnmount:n,onPostCommitFiberRoot:n,inject(e){const n=++i;return r.set(n,e),s._instrumentationIsActive||(s._instrumentationIsActive=!0,t?.()),n},_instrumentationSource:e,_instrumentationIsActive:!1};try{Object.defineProperty(globalThis,"__REACT_DEVTOOLS_GLOBAL_HOOK__",{value:s})}catch{}return s},i=()=>Object.prototype.hasOwnProperty.call(globalThis,"__REACT_DEVTOOLS_GLOBAL_HOOK__"),s=t=>{let e=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;return e&&t?.(),i()||(e=r(t)),e};try{"undefined"==typeof window||!window.document?.createElement&&"ReactNative"!==window.navigator?.product||"undefined"==typeof process||null==process.versions||null==process.versions.node||r()}catch{}var l=t=>{switch(t.tag){case 5:case 26:case 27:return!0;default:return"string"==typeof t.type}},a=t=>{switch(t.tag){case 0:case 1:case 15:case 14:case 11:return!0;default:return!1}},c=(t,e)=>{try{const n=t.memoizedProps,o=t.alternate?.memoizedProps||{},r=new Set([...Object.keys(o),...Object.keys(n)]);for(const t of r){const r=o?.[t],i=n?.[t];if(!0===e(t,i,r))return!0}}catch{}return!1},u=t=>{const e=t.memoizedProps,n=t.alternate?.memoizedProps||{},o=t.flags??t.effectTag??0;switch(t.tag){case 1:case 0:case 9:case 11:case 14:case 15:return!(1&~o);default:return!t.alternate||(n!==e||t.alternate.memoizedState!==t.memoizedState||t.alternate.ref!==t.ref)}},d=t=>{switch(t.tag){case 18:case 6:case 7:case 23:case 22:return!0;case 3:return!1;default:{const e="object"==typeof t.type&&null!==t.type?t.type.$$typeof:t.type;switch("symbol"==typeof e?e.toString():e){case 60111:case"Symbol(react.concurrent_mode)":case"Symbol(react.async_mode)":return!0;default:return!1}}}},m=(t,e=!1)=>{let n=h(t,l,e);return n||(n=h(t,l,!e)),n},h=(t,e,n=!1)=>{if(!t)return null;if(!0===e(t))return t;let o=n?t.return:t.child;for(;o;){const t=h(o,e,n);if(t)return t;o=n?null:o.sibling}return null},p=t=>{const e=t;return"function"==typeof e?e:"object"==typeof e&&e?p(e.type||e.render):null},f=t=>{const e=t;if("function"!=typeof e&&("object"!=typeof e||!e))return null;const n=e.displayName||e.name||null;if(n)return n;const o=p(e);return o&&(o.displayName||o.name)||null},y=t=>{try{if("string"==typeof t.version&&t.bundleType>0)return"development"}catch{}return"production"},g=0,b=new WeakMap,w=t=>{let e=b.get(t);return!e&&t.alternate&&(e=b.get(t.alternate)),e||(e=g++,((t,e=g++)=>{b.set(t,e)})(t,e)),e},v=(t,e,n)=>{let o=e;for(;null!=o;){b.has(o)||w(o);if(!d(o)&&u(o)&&t(o,"mount"),13===o.tag){if(null!==o.memoizedState){const e=o.child,n=e?e.sibling:null;if(n){const e=n.child;null!==e&&v(t,e,!1)}}else{let e=null;null!==o.child&&(e=o.child.child),null!==e&&v(t,e,!1)}}else null!=o.child&&v(t,o.child,!0);o=n?o.sibling:null}},R=(t,e,n,o)=>{if(b.has(e)||w(e),!n)return;b.has(n)||w(n);const r=13===e.tag;!d(e)&&u(e)&&t(e,"update");const i=r&&null!==n.memoizedState,s=r&&null!==e.memoizedState;if(i&&s){const o=e.child?.sibling??null,r=n.child?.sibling??null;null!==o&&null!==r&&R(t,o,r)}else if(i&&!s){const n=e.child;null!==n&&v(t,n,!0)}else if(!i&&s){C(t,n);const o=e.child?.sibling??null;null!==o&&v(t,o,!0)}else if(e.child!==n.child){let n=e.child;for(;n;){if(n.alternate){const e=n.alternate;R(t,n,e)}else v(t,n,!1);n=n.sibling}}},$=(t,e)=>{!(3===e.tag)&&d(e)||t(e,"unmount")},C=(t,e)=>{const n=13===e.tag&&null!==e.memoizedState;let o=e.child;if(n){const t=e.child,n=t?.sibling??null;o=n?.child??null}for(;null!==o;)null!==o.return&&($(t,o),C(t,o)),o=o.sibling},S=0,_=new WeakMap,F=({onRender:t})=>(e,n,o)=>{((t,e)=>{const n="current"in t?t.current:t;let o=_.get(t);o||(o={prevFiber:null,id:S++},_.set(t,o));const{prevFiber:r}=o;if(n)if(null!==r){const t=r&&null!=r.memoizedState&&null!=r.memoizedState.element&&!0!==r.memoizedState.isDehydrated,o=null!=n.memoizedState&&null!=n.memoizedState.element&&!0!==n.memoizedState.isDehydrated;!t&&o?v(e,n,!1):t&&o?R(e,n,n.alternate):t&&!o&&$(e,n)}else v(e,n,!0);else $(e,n);o.prevFiber=n})(n,t)},A=(t,e={})=>{const n=t.onActive,o=i(),r="reactDevtoolsAgent"in s();let l,a=!1;return t.onActive=()=>{clearTimeout(l);let o=!0;try{n?.();const t=s();for(const n of t.renderers.values()){const[t]=n.version.split(".");Number(t)<(e.minReactMajorVersion??17)&&(o=!1);"development"!==y(n)&&(a=!0,e.dangerouslyRunInProduction||(o=!1))}}catch(t){e.onError?.(t)}if(!o)return t.onCommitFiberRoot=void 0,t.onCommitFiberUnmount=void 0,t.onPostCommitFiberRoot=void 0,void(t.onActive=void 0);try{const n=t.onCommitFiberRoot;n&&(t.onCommitFiberRoot=(t,o,r)=>{try{n(t,o,r)}catch(t){e.onError?.(t)}});const o=t.onCommitFiberUnmount;o&&(t.onCommitFiberUnmount=(t,n)=>{try{o(t,n)}catch(t){e.onError?.(t)}});const r=t.onPostCommitFiberRoot;r&&(t.onPostCommitFiberRoot=(t,n)=>{try{r(t,n)}catch(t){e.onError?.(t)}})}catch(t){e.onError?.(t)}},o||r||(l=setTimeout((()=>{a||e.onError?.(),stop()}),e.installCheckTimeout??100)),t},E=(t=>(t.Component="component",t.Element="element",t.A11y="a11y",t))(E||{}),O=new Set,T="115,97,230",j=(t,e)=>Math.floor(t+.2*(e-t)),x=()=>{let t,n,o=!1,r=!1;const i=t=>{w(t)},c=F({onRender:i,onError(t){console.error(t)}});var u;u=A({onActive(){globalThis.__RST__=!0},onCommitFiberRoot(t,e){if(O.add(e),!o)return h(e,i),void(o=!0);c(t,e)}},{dangerouslyRunInProduction:!0,onError:t=>{t&&console.error(t)}}),s((()=>{const t=s();u.onActive?.(),t._instrumentationSource=u.name??e;const n=t.onCommitFiberRoot;u.onCommitFiberRoot&&(t.onCommitFiberRoot=(t,e,o)=>{n&&n(t,e,o),u.onCommitFiberRoot?.(t,e,o)});const o=t.onCommitFiberUnmount;u.onCommitFiberUnmount&&(t.onCommitFiberUnmount=(t,e)=>{o&&o(t,e),u.onCommitFiberUnmount?.(t,e)});const r=t.onPostCommitFiberRoot;u.onPostCommitFiberRoot&&(t.onPostCommitFiberRoot=(t,e)=>{r&&r(t,e),u.onPostCommitFiberRoot?.(t,e)})}));let d=null,m=null,p=null;const y=async()=>{if(!r)return;await(async()=>{if(!z)return;const e=d;if(!e)return b(),!1;const o=[e];m&&h(m,(t=>{l(t)&&o.push(t.stateNode)}));const r=await H(o),i=r.get(e);if(!i)return!1;b();let s=!1;const a=void 0!==t?j(t,i.x):i.x,c=void 0!==n?j(n,i.y):i.y;void 0!==t&&(Math.abs(a-i.x)>.1||Math.abs(c-i.y)>.1)&&(s=!0);for(const t of o){const n=r.get(t);if(!n)continue;const{width:o,height:i}=n,s=t===e?a:n.x,l=t===e?c:n.y;z.beginPath(),z.rect(s,l,o,i),z.strokeStyle=`rgba(${T},0.5)`,e===t&&(z.fillStyle=`rgba(${T},0.1)`,z.strokeStyle=`rgba(${T})`,z.fill()),z.stroke()}if(p){const{width:e}=z.measureText(p),o=11;z.textRendering="optimizeSpeed",z.font="11px monospace";let r=c-o-4;r<0&&(r=0),z.fillStyle=`rgba(${T})`,z.fillRect(a,r,e+4,o+4),z.fillStyle="rgba(255,255,255)",z.fillText(p,a+2,r+o),t=a,n=c}return s})()?requestAnimationFrame(y):r=!1},g=()=>{r||(r=!0,requestAnimationFrame(y))};document.addEventListener("contextmenu",(async t=>{if(2!==t.button)return;const e=t.target,n=(t=>{const e=s();for(const n of e.renderers.values())try{const e=n.findFiberByHostInstance?.(t);if(e)return e}catch{}if("object"==typeof t&&null!=t){if("_reactRootContainer"in t)return t._reactRootContainer?._internalRoot?.current?.child;for(const e in t)if(e.startsWith("__reactInternalInstance$")||e.startsWith("__reactFiber"))return t[e]}return null})(t.target);if(d=e,n){m=n;const t=(t=>{const e=[];let n=t;for(;n.return;)e.push(n),n=n.return;const o=new Array(e.length);for(let t=0;t<e.length;t++)o[t]=e[e.length-t-1];return o})(n),o=t.map((t=>f(t))),r=[];let i=0,s=null,l=n;for(;l;){if(a(l)){s=l;break}l=l.return}for(let t=o.length-1;t>=0;t--){const e=o[t];if(e&&(r.push(e),i++),i>2)break}p=r.join(" > ");const c=await P(s||n,e);console.log(c)}else{m=null,p=e.tagName.toLowerCase();const t=await L(e);console.log(t)}g()}));const b=()=>{z&&z.clearRect(0,0,$.width/C,$.height/C)},v=document.createElement("div");v.setAttribute("data-react-scan","true");const R=v.attachShadow({mode:"open"});R.innerHTML='<canvas style="position:fixed;top:0;left:0;pointer-events:none;z-index:2147483646" aria-hidden="true"></canvas>';const $=R.firstChild;if(!$)return null;let C=Math.min(window.devicePixelRatio||1,2);const{innerWidth:S,innerHeight:_}=window;$.style.width=`${S}px`,$.style.height=`${_}px`;const E=S*C,x=_*C;$.width=E,$.height=x;const z=$.getContext("2d",{alpha:!0});z&&z.scale(C,C);let k=!1;window.addEventListener("resize",(()=>{k||(k=!0,setTimeout((()=>{const t=window.innerWidth,e=window.innerHeight;C=Math.min(window.devicePixelRatio||1,2),$.style.width=`${t}px`,$.style.height=`${e}px`,$.width=t*C,$.height=e*C,z&&(z.resetTransform(),z.scale(C,C)),g(),k=!1})))}));let N=!1;window.addEventListener("scroll",(()=>{N||(N=!0,setTimeout((()=>{requestAnimationFrame((()=>{g()})),N=!1}),32))}));let M=null;setInterval((()=>{M!==d&&(M=d,g())}),32),R.appendChild($),document.documentElement.appendChild(v)};x();var P=async(t,e)=>({root:await M(t,e)}),L=async t=>({root:await N(t)}),z=async t=>{const e=(await H([t])).get(t)||t.getBoundingClientRect(),n=window.getComputedStyle(t),o={};return Array.from({length:n.length}).forEach(((t,e)=>{const r=n[e];o[r]=n.getPropertyValue(r)})),{type:"element",children:[],x:e.x,y:e.y,width:e.width,height:e.height,eventHandlers:{},classes:Array.from(t.classList),styles:o,element:t}},k=(t,e,n)=>({...t,type:"a11y",role:e,ariaLabel:n}),N=async t=>{const e=await z(t);for(const n of Array.from(t.attributes))n.name.startsWith("on")&&(e.eventHandlers[n.name]=n.value);e.children=await Promise.all(Array.from(t.children).map(N));const n=t.getAttribute("role"),o=t.getAttribute("aria-label");return n||o?k(e,n,o):e},M=async(t,e)=>{if(a(t)){const e={};c(t,((t,n)=>{e[t]=n}));const n=[],o=[];return h(t.child,(t=>{if(l(t)&&t.stateNode)o.push(M(t,t.stateNode).then((t=>{n.push(t)})));else if(a(t)){const e=m(t);e?.stateNode&&o.push(M(t,e.stateNode).then((t=>{n.push(t)})))}})),await Promise.all(o),{type:"component",children:n,props:e,name:f(t.type)}}if(l(t)){const n=await z(e);c(t,((t,e)=>{t.startsWith("on")&&"function"==typeof e&&(n.eventHandlers[t]=e.toString())})),n.children=[];const o=[];h(t.child,(t=>{if(l(t)&&t.stateNode)o.push(M(t,t.stateNode).then((t=>{n.children.push(t)})));else if(a(t)){const e=m(t);e?.stateNode&&o.push(M(t,e.stateNode).then((t=>{n.children.push(t)})))}})),await Promise.all(o);const r=e.getAttribute("role"),i=e.getAttribute("aria-label");return r||i?k(n,r,i):n}throw new Error("Unknown fiber type")},H=t=>new Promise((e=>{const n=new Map,o=new IntersectionObserver((t=>{for(let e=0,o=t.length;e<o;e++){const o=t[e],r=o.target,i=o.boundingClientRect;o.isIntersecting&&i.width&&i.height&&n.set(r,i)}o.disconnect(),e(n)}));for(let e=0,n=t.length;e<n;e++){const n=t[e];o.observe(n)}})),I=(t,e=new WeakSet)=>{if(null==t)return String(t);if("function"==typeof t)return t.toString().slice(0,50)+(t.toString().length>50?"...":"");if("object"!=typeof t)return JSON.stringify(t);if(e.has(t))return"[Circular]";if(e.add(t),Array.isArray(t)){return`[${t.map((t=>I(t,e))).join(", ")}]`}try{return`{${Object.entries(t).map((([t,n])=>`${t}: ${I(n,e)}`)).join(", ")}}`}catch{return"[Object]"}};return t.ReactSpecNodeType=E,t.getRectMap=H,t.init=x,t.primaryColor=T,t.printRST=(t,e=0)=>{const n=(t,e)=>{const o="  ".repeat(e);if("component"===t.type&&"props"in t&&"name"in t){const r=Object.entries(t.props).map((([t,e])=>`${t}={${I(e)}}`)).join(" ");return`${o}<${t.name||"Unknown"}${r?` ${r}`:""}>\n${t.children.map((t=>n(t,e+1))).join("\n")}\n${o}</${t.name||"Unknown"}>`}const r=[];if("classes"in t&&t.classes.length>0&&r.push(`class="${t.classes.join(" ")}"`),"eventHandlers"in t){const e=Object.entries(t.eventHandlers).map((([t,e])=>`${t}={${e.slice(0,50)}${e.length>50?"...":""}}`)).join(" ");e&&r.push(e)}if("styles"in t){const e=I(t.styles);"{}"!==e&&r.push(`style={${e}}`)}if("a11y"===t.type&&"role"in t&&"ariaLabel"in t&&(t.role&&r.push(`role="${t.role}"`),t.ariaLabel&&r.push(`aria-label="${t.ariaLabel}"`)),"x"in t&&"y"in t&&"width"in t&&"height"in t){const e=`x=${Math.round(t.x)} y=${Math.round(t.y)} w=${Math.round(t.width)} h=${Math.round(t.height)}`;r.push(e)}const i="element"in t&&t.element?.tagName.toLowerCase()||"unknown",s=r.length>0?` ${r.join(" ")}`:"";return 0===t.children.length?`${o}<${i}${s} />`:`${o}<${i}${s}>\n${t.children.map((t=>n(t,e+1))).join("\n")}\n${o}</${i}>`};if(!("type"in t.root))throw new Error("Invalid RST: root node must have a type");return n(t.root,e)},t}({});