[devtools-snippet] add reactHelpers.js

Author: 0xdevalias

devtools-snippets/reactHelpers.js

@@ -0,0 +1,39 @@
+// reactHelpers.js
+// https://github.com/0xdevalias/userscripts/tree/main/devtools-snippets
+//
+// See also:
+//   - https://gist.github.com/search?q=user:0xdevalias+react
+//   - https://gist.github.com/0xdevalias/8c621c5d09d780b1d321bfdb86d67cdd#react-internals
+
+// Function to get find all elements connected to React
+function findAllReactElements(customPredicate = () => true, rootNode = document, tagQuery = '*') {
+  if (typeof customPredicate !== 'function') throw 'customPredicate must be a function returning a boolean'
+  if (typeof rootNode?.['querySelector'] !== 'function') return [];
+
+  const foundElements = rootNode.getElementsByTagName(tagQuery);
+  return Array.from(foundElements).filter(element => {
+    const keys = Object.getOwnPropertyNames(element);
+    const reactPropsKey = keys.find(key => key.startsWith('__reactProps$'));
+    const reactFiberKey = keys.find(key => key.startsWith('__reactFiber$'));
+    const props = reactPropsKey ? element[reactPropsKey] : null;
+    const fiber = reactFiberKey ? element[reactFiberKey] : null;
+
+    return (props || fiber) && customPredicate({ props, fiber, element });
+  });
+}
+
+// Function to get React props for a given HTML element
+function getReactProps(element) {
+  const propsKey = Object.getOwnPropertyNames(element).find(propName =>
+    propName.startsWith('__reactProps$')
+  );
+  return propsKey ? element[propsKey] : null;
+}
+
+// Function to get React fiber for a given HTML element
+function getReactFiber(element) {
+  const fiberKey = Object.getOwnPropertyNames(element).find(propName =>
+    propName.startsWith('__reactFiber$')
+  );
+  return fiberKey ? element[fiberKey] : null;
+}