react-native-element-inspector 0.1.0

package/src/utils/layoutSnapshot.ts

@@ -0,0 +1,48 @@
+import { FiberAdapter, type FiberNode, type MeasuredElement } from '../fiber';
+
+/**
+ * Build a layout snapshot: walk the fiber tree, measure every host fiber,
+ * return a flat array sorted by zIndex (desc) → depth (desc).
+ */
+export const buildLayoutSnapshot = async (root: FiberNode): Promise<MeasuredElement[]> => {
+  const hostFibers = FiberAdapter.walkHostFibers(root);
+  const elements: MeasuredElement[] = [];
+
+  // Measure all host fibers in parallel
+  const measurements = await Promise.allSettled(
+    hostFibers.map(async ({ fiber, depth }) => {
+      const rect = await FiberAdapter.measure(fiber);
+      const style = FiberAdapter.getStyle(fiber);
+
+      return {
+        fiber,
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height,
+        depth,
+        zIndex: typeof style?.zIndex === 'number' ? style.zIndex : 0,
+        componentName: FiberAdapter.getComponentName(fiber),
+      } satisfies MeasuredElement;
+    }),
+  );
+
+  for (const result of measurements) {
+    if (result.status === 'fulfilled') {
+      const element = result.value;
+      // Skip zero-size elements — invisible and untappable
+      if (element.width > 0 && element.height > 0) {
+        elements.push(element);
+      }
+    }
+    // Skip fibers that fail to measure (unmounted, off-screen, etc.)
+  }
+
+  // Sort: zIndex descending, then depth descending
+  elements.sort((a, b) => {
+    if (a.zIndex !== b.zIndex) return b.zIndex - a.zIndex;
+    return b.depth - a.depth;
+  });
+
+  return elements;
+};

package/src/utils/sourceMapping.ts

@@ -0,0 +1,67 @@
+import type { FiberNode } from '../fiber';
+
+export interface SourceLocation {
+  fileName: string;
+  lineNumber: number;
+  columnNumber?: number;
+}
+
+/**
+ * Extract the source file location from a fiber node.
+ * Host components (RCTView, RCTText, etc.) don't have _debugSource,
+ * so we check _debugOwner (the component that rendered this element)
+ * and walk up the fiber tree as a fallback.
+ */
+export const getSourceLocation = (fiber: FiberNode): SourceLocation | null => {
+  // Check the fiber itself first
+  if (fiber._debugSource) return fiber._debugSource;
+
+  // Check _debugOwner — points to the component that created this JSX
+  if (fiber._debugOwner?._debugSource) return fiber._debugOwner._debugSource;
+
+  // Walk up the return (parent) chain
+  let current: FiberNode | null = fiber.return;
+  while (current) {
+    if (current._debugSource) return current._debugSource;
+    current = current.return;
+  }
+
+  return null;
+};
+
+/**
+ * Format a source location for display.
+ * Strips the project root for readability.
+ * Adds extension to the file name and line number, e.g. "MyComponent.js:42"
+ */
+export const formatSourceLocation = (source: SourceLocation): string => {
+  const lastSlash = source.fileName.lastIndexOf('/');
+  const fileName = lastSlash === -1 ? source.fileName : source.fileName.substring(lastSlash + 1);
+  return `${fileName}:${source.lineNumber}`;
+};
+
+/**
+ * Get the name of the nearest user component that owns this fiber.
+ * React 19 dropped _debugSource, so we use _debugOwner to find the
+ * parent component name as a fallback.
+ */
+export const getOwnerName = (fiber: FiberNode): string | null => {
+  type OwnerInfo = {
+    type: string | (((...args: never[]) => unknown) & { displayName?: string; name?: string });
+    _debugOwner?: OwnerInfo;
+  };
+
+  let owner = fiber._debugOwner as OwnerInfo | undefined;
+  while (owner) {
+    const ownerType = owner.type;
+    if (typeof ownerType === 'function') {
+      const name = ownerType.displayName ?? ownerType.name;
+      // Skip generic RN host wrappers
+      if (name && name !== 'View' && name !== 'Text' && name !== 'ScrollView') {
+        return `in ${name}`;
+      }
+    }
+    owner = owner._debugOwner;
+  }
+  return null;
+};

package/src/utils/styleFormatting.ts

@@ -0,0 +1,34 @@
+/** Complete set of React Native style properties typed as ColorValue */
+const COLOR_PROPS = new Set([
+  'color',
+  'backgroundColor',
+  'borderColor',
+  'borderTopColor',
+  'borderRightColor',
+  'borderBottomColor',
+  'borderLeftColor',
+  'borderStartColor',
+  'borderEndColor',
+  'borderBlockColor',
+  'borderBlockStartColor',
+  'borderBlockEndColor',
+  'outlineColor',
+  'shadowColor',
+  'textDecorationColor',
+  'textShadowColor',
+  'tintColor',
+  'overlayColor',
+]);
+
+/** Returns true if the style property name holds a color value */
+export const isColorProp = (propertyName: string): boolean => COLOR_PROPS.has(propertyName);
+
+/** Format a style value for display in the inspector panel */
+export const formatValue = (value: unknown): string => {
+  if (value === undefined) return 'undefined';
+  if (value === null) return 'null';
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'string') return `"${value}"`;
+  if (typeof value === 'boolean') return String(value);
+  return JSON.stringify(value);
+};

package/src/utils/styleInputParsing.ts

@@ -0,0 +1,33 @@
+/** Parses user input back to the appropriate type. */
+export const parseInput = (text: string, originalValue: unknown): unknown => {
+  const trimmed = text.trim();
+  if (trimmed === '') return originalValue;
+
+  // Strip surrounding quotes if the user typed them
+  if (
+    (trimmed.startsWith('"') && trimmed.endsWith('"')) ||
+    (trimmed.startsWith("'") && trimmed.endsWith("'"))
+  ) {
+    return trimmed.slice(1, -1);
+  }
+
+  // Only coerce to number when the original was numeric
+  if (typeof originalValue === 'number') {
+    const asNumber = Number(trimmed);
+    if (!Number.isNaN(asNumber)) return asNumber;
+  }
+
+  // Boolean
+  if (trimmed === 'true') return true;
+  if (trimmed === 'false') return false;
+
+  // Everything else is a string (e.g. color names, hex codes)
+  return trimmed;
+};
+
+/** Raw value → editable string (no quotes around strings). */
+export const toEditableString = (value: unknown): string => {
+  if (value === undefined) return '';
+  if (value === null) return '';
+  return String(value);
+};

package/src/utils/yogaLayout.ts

@@ -0,0 +1,49 @@
+import type { StyleObject } from './flattenStyles';
+
+export interface BoxModel {
+  margin: { top: number; right: number; bottom: number; left: number };
+  border: { top: number; right: number; bottom: number; left: number };
+  padding: { top: number; right: number; bottom: number; left: number };
+  content: { width: number; height: number };
+}
+
+/**
+ * Extract box model values from a flattened style object.
+ */
+export const extractBoxModel = (
+  style: StyleObject | null,
+  measured: { width: number; height: number },
+): BoxModel => {
+  const num = (key: string): number | undefined => {
+    const val = style?.[key];
+    return typeof val === 'number' ? val : undefined;
+  };
+
+  const margin = {
+    top: num('marginTop') ?? num('marginVertical') ?? num('margin') ?? 0,
+    right: num('marginRight') ?? num('marginHorizontal') ?? num('margin') ?? 0,
+    bottom: num('marginBottom') ?? num('marginVertical') ?? num('margin') ?? 0,
+    left: num('marginLeft') ?? num('marginHorizontal') ?? num('margin') ?? 0,
+  };
+
+  const border = {
+    top: num('borderTopWidth') ?? num('borderWidth') ?? 0,
+    right: num('borderRightWidth') ?? num('borderWidth') ?? 0,
+    bottom: num('borderBottomWidth') ?? num('borderWidth') ?? 0,
+    left: num('borderLeftWidth') ?? num('borderWidth') ?? 0,
+  };
+
+  const padding = {
+    top: num('paddingTop') ?? num('paddingVertical') ?? num('padding') ?? 0,
+    right: num('paddingRight') ?? num('paddingHorizontal') ?? num('padding') ?? 0,
+    bottom: num('paddingBottom') ?? num('paddingVertical') ?? num('padding') ?? 0,
+    left: num('paddingLeft') ?? num('paddingHorizontal') ?? num('padding') ?? 0,
+  };
+
+  const content = {
+    width: measured.width - padding.left - padding.right - border.left - border.right,
+    height: measured.height - padding.top - padding.bottom - border.top - border.bottom,
+  };
+
+  return { margin, border, padding, content };
+};