@keepsnappy/react-native 0.0.0-stage → 0.1.0-alpha.11

package/js/sdk/fiber.ts

@@ -0,0 +1,591 @@
+// Fiber-side registries filled from the commit walk: native tag -> host fiber
+// (to name touched views) and route key -> screen fiber (to name screens).
+// Only reads fiber fields; never mutates the tree.
+
+export interface Fiber {
+  tag: number;
+  flags: number;
+  type: unknown;
+  alternate: Fiber | null;
+  child: Fiber | null;
+  sibling: Fiber | null;
+  return: Fiber | null;
+  memoizedProps: unknown;
+  stateNode: unknown;
+}
+
+export interface FiberRoot {
+  current: Fiber;
+}
+
+export const FUNCTION_COMPONENT = 0;
+export const CLASS_COMPONENT = 1;
+export const HOST_COMPONENT = 5;
+export const HOST_TEXT = 6;
+export const CONTEXT_PROVIDER = 10;
+export const FORWARD_REF = 11;
+export const MEMO_COMPONENT = 14;
+export const SIMPLE_MEMO_COMPONENT = 15;
+
+export const isComponentTag = (tag: number) =>
+  tag === FUNCTION_COMPONENT ||
+  tag === CLASS_COMPONENT ||
+  tag === FORWARD_REF ||
+  tag === SIMPLE_MEMO_COMPONENT;
+
+type Props = Record<string, unknown>;
+
+export const propsOf = (fiber: Fiber): Props | null => {
+  const props = fiber.memoizedProps;
+  return props !== null && typeof props === 'object' ? (props as Props) : null;
+};
+
+const functionName = (value: unknown): string | null => {
+  if (typeof value !== 'function') {
+    return null;
+  }
+  const fn = value as { displayName?: string; name?: string };
+  return fn.displayName || fn.name || null;
+};
+
+// Release bundles are minified, so a component's own name can be a single
+// letter. The Sentry annotate babel plugin puts the source name on the
+// component's root element as a prop; use it when the name is short.
+const annotatedName = (fiber: Fiber): string | null => {
+  const props = fiber.child ? propsOf(fiber.child) : null;
+  if (!props) {
+    return null;
+  }
+  const value =
+    props.dataSentryComponent ?? props['data-sentry-component'] ?? null;
+  return typeof value === 'string' ? value : null;
+};
+
+export const nameStats = { short: 0, total: 0 };
+
+export const componentName = (fiber: Fiber): string => {
+  const type = fiber.type as Record<string, unknown> | null;
+  let name =
+    functionName(type) ??
+    (type && typeof type === 'object'
+      ? (functionName(type.render) ?? functionName(type.type))
+      : null);
+  if (!name || name.length <= 2) {
+    nameStats.short++;
+    name = annotatedName(fiber) ?? `${name ?? 'Anonymous'}#${fiber.tag}`;
+  }
+  nameStats.total++;
+  return name;
+};
+
+const nativeTagOf = (fiber: Fiber): number | null => {
+  const node = fiber.stateNode as {
+    canonical?: { nativeTag?: unknown };
+  } | null;
+  const tag = node?.canonical?.nativeTag;
+  return typeof tag === 'number' ? tag : null;
+};
+
+const depthOf = (fiber: Fiber) => {
+  let depth = 0;
+  for (let f = fiber.return; f !== null; f = f.return) {
+    depth++;
+  }
+  return depth;
+};
+
+const hostByTag = new Map<number, Fiber>();
+
+export const hostFiber = (tag: number) => hostByTag.get(tag) ?? null;
+
+// The value of React Navigation's NavigationContainerRefContext is the
+// container's imperative handle. Upstream @react-navigation and Expo Router's
+// bundled fork are two copies of the class, so it is recognised by shape.
+export interface NavigationRef {
+  getRootState: () => unknown;
+  getCurrentRoute: () => unknown;
+  addListener: (type: string, callback: (event: unknown) => void) => unknown;
+  isReady: () => boolean;
+}
+
+export const asNavigationRef = (value: unknown): NavigationRef | null => {
+  if (value === null || typeof value !== 'object') {
+    return null;
+  }
+  const ref = value as Record<string, unknown>;
+  return typeof ref.getRootState === 'function' &&
+    typeof ref.getCurrentRoute === 'function' &&
+    typeof ref.addListener === 'function' &&
+    typeof ref.isReady === 'function'
+    ? (value as NavigationRef)
+    : null;
+};
+
+interface ContainerHandlers {
+  added: (fiber: Fiber, ref: NavigationRef, depth: number) => void;
+  removed: (fiber: Fiber) => void;
+}
+
+let containerHandlers: ContainerHandlers | null = null;
+
+export const onNavigationContainer = (handlers: ContainerHandlers) => {
+  containerHandlers = handlers;
+};
+
+const containerFibers = new Set<Fiber>();
+
+export const noteContainer = (fiber: Fiber) => {
+  if (
+    containerFibers.has(fiber) ||
+    (fiber.alternate && containerFibers.has(fiber.alternate))
+  ) {
+    return;
+  }
+  const ref = asNavigationRef(propsOf(fiber)?.value);
+  if (!ref) {
+    return;
+  }
+  containerFibers.add(fiber);
+  containerHandlers?.added(fiber, ref, depthOf(fiber));
+};
+
+export interface RouteEntry {
+  key: string;
+  name: string;
+  depth: number;
+  fiber: Fiber;
+  navigation: { isFocused: () => boolean };
+}
+
+export const routes = new Map<string, RouteEntry>();
+
+// React Navigation passes `route` and `navigation` to every screen component;
+// Expo Router routes are React Navigation routes. Reading the props is enough.
+const noteRoute = (fiber: Fiber, props: Props) => {
+  const route = props.route as { key?: unknown; name?: unknown } | null;
+  const navigation = props.navigation as { isFocused?: unknown } | null;
+  if (
+    !route ||
+    typeof route.key !== 'string' ||
+    typeof route.name !== 'string' ||
+    !navigation ||
+    typeof navigation.isFocused !== 'function'
+  ) {
+    return;
+  }
+  const depth = depthOf(fiber);
+  const existing = routes.get(route.key);
+  if (existing && existing.depth <= depth) {
+    return;
+  }
+  routes.set(route.key, {
+    key: route.key,
+    name: route.name,
+    depth,
+    fiber,
+    navigation: navigation as RouteEntry['navigation'],
+  });
+};
+
+export const noteMounted = (fiber: Fiber) => {
+  if (fiber.tag === HOST_COMPONENT) {
+    const tag = nativeTagOf(fiber);
+    if (tag !== null) {
+      hostByTag.set(tag, fiber);
+    }
+    return;
+  }
+  if (fiber.tag === CONTEXT_PROVIDER) {
+    noteContainer(fiber);
+    return;
+  }
+  if (!isComponentTag(fiber.tag) && fiber.tag !== MEMO_COMPONENT) {
+    return;
+  }
+  const props = propsOf(fiber);
+  if (props && props.route !== undefined) {
+    noteRoute(fiber, props);
+  }
+};
+
+export const noteUnmounted = (fiber: Fiber) => {
+  if (fiber.tag === HOST_COMPONENT) {
+    const tag = nativeTagOf(fiber);
+    if (tag !== null) {
+      const current = hostByTag.get(tag);
+      if (current === fiber || current === fiber.alternate) {
+        hostByTag.delete(tag);
+      }
+    }
+    return;
+  }
+  if (fiber.tag === CONTEXT_PROVIDER) {
+    for (const candidate of [fiber, fiber.alternate]) {
+      if (candidate && containerFibers.delete(candidate)) {
+        containerHandlers?.removed(candidate);
+      }
+    }
+    return;
+  }
+  const route = propsOf(fiber)?.route as { key?: unknown } | undefined;
+  if (route && typeof route.key === 'string') {
+    const entry = routes.get(route.key);
+    if (entry && (entry.fiber === fiber || entry.fiber === fiber.alternate)) {
+      routes.delete(route.key);
+    }
+  }
+};
+
+export const registrySizes = () => ({
+  hostTags: hostByTag.size,
+  routes: routes.size,
+  containers: containerFibers.size,
+});
+
+export interface ScreenRoute {
+  screenId: string | null;
+  routeKey: string | null;
+  routeName: string | null;
+}
+
+const MAX_ROUTE_SEARCH = 500;
+
+const routeLike = (value: unknown): { key: string; name: string } | null => {
+  if (value === null || typeof value !== 'object') {
+    return null;
+  }
+  const route = value as { key?: unknown; name?: unknown };
+  return typeof route.key === 'string' && typeof route.name === 'string'
+    ? { key: route.key, name: route.name }
+    : null;
+};
+
+// A native screen host (RNSScreen) carries `screenId` (= route.key) only under
+// native-stack. Otherwise the route is the shallowest descendant that has a
+// `route` prop or provides a route as context value (NavigationRouteContext).
+export const routeOfScreenHost = (host: Fiber): ScreenRoute => {
+  const props = propsOf(host);
+  const screenId = nonEmptyString(props?.screenId);
+  const queue: Fiber[] = [];
+  for (let child = host.child; child !== null; child = child.sibling) {
+    queue.push(child);
+  }
+  let visited = 0;
+  while (queue.length > visited && visited < MAX_ROUTE_SEARCH) {
+    const fiber = queue[visited] as Fiber;
+    visited++;
+    const fiberProps = propsOf(fiber);
+    const route =
+      fiber.tag === CONTEXT_PROVIDER
+        ? routeLike(fiberProps?.value)
+        : routeLike(fiberProps?.route);
+    if (route) {
+      return screenId === null || screenId === route.key
+        ? { screenId, routeKey: route.key, routeName: route.name }
+        : { screenId, routeKey: screenId, routeName: null };
+    }
+    for (let child = fiber.child; child !== null; child = child.sibling) {
+      queue.push(child);
+    }
+  }
+  return { screenId, routeKey: screenId, routeName: null };
+};
+
+const ACTION_PROPS = [
+  'onPress',
+  'onLongPress',
+  'onPressIn',
+  'onResponderRelease',
+  'onClick',
+];
+
+const GENERIC_COMPONENT =
+  /^(View|Text|Image|Pressable|Touchable\w*|Animated\w*|ScrollView|FlatList|VirtualizedList|CellRenderer\w*|Anonymous.*|Unknown.*|\w+#\d+)$/;
+
+const MAX_UP = 80;
+const MAX_TEXT_FIBERS = 300;
+const MAX_TEXT_CHARS = 40;
+
+const isActionable = (props: Props) =>
+  ACTION_PROPS.some(key => typeof props[key] === 'function');
+
+const nonEmptyString = (value: unknown): string | null =>
+  typeof value === 'string' && value.trim() !== '' ? value : null;
+
+// An id a library generated (a bare number, React's useId `:r1:` / `«r1»`) changes from run to run, so it never names a list.
+const GENERATED_ID = /^(\d+|[:«].*[:»])$/;
+const authoredId = (value: unknown): string | null => {
+  const s = nonEmptyString(value);
+  return s !== null && !GENERATED_ID.test(s) ? s : null;
+};
+
+const textUnder = (root: Fiber): string | null => {
+  const parts: string[] = [];
+  const stack: Fiber[] = [root];
+  let visited = 0;
+  let length = 0;
+  while (
+    stack.length > 0 &&
+    visited < MAX_TEXT_FIBERS &&
+    length < MAX_TEXT_CHARS
+  ) {
+    const fiber = stack.pop() as Fiber;
+    visited++;
+    if (fiber.tag === HOST_TEXT && typeof fiber.memoizedProps === 'string') {
+      const text = fiber.memoizedProps.trim();
+      if (text) {
+        parts.push(text);
+        length += text.length;
+      }
+    }
+    const children: Fiber[] = [];
+    for (let child = fiber.child; child !== null; child = child.sibling) {
+      children.push(child);
+    }
+    for (let i = children.length - 1; i >= 0; i--) {
+      stack.push(children[i] as Fiber);
+    }
+  }
+  const text = parts.join(' ').replace(/\s+/g, ' ').trim();
+  return text ? text.slice(0, MAX_TEXT_CHARS) : null;
+};
+
+export type NameSource =
+  | 'testID'
+  | 'accessibilityLabel'
+  | 'text'
+  | 'component'
+  | 'tag';
+
+export interface TargetDescription {
+  name: string;
+  source: NameSource;
+  tag: number;
+  testID: string | null;
+  accessibilityLabel: string | null;
+  component: string | null;
+  actionable: boolean;
+}
+
+// testID -> accessibilityLabel -> text -> nearest named component -> tag.
+// testID/label are searched from the touched view up to the first named
+// component above the actionable (onPress/responder) fiber.
+export const describeTarget = (tag: number): TargetDescription => {
+  const host = hostByTag.get(tag);
+  const result: TargetDescription = {
+    name: `tag:${tag}`,
+    source: 'tag',
+    tag,
+    testID: null,
+    accessibilityLabel: null,
+    component: null,
+    actionable: false,
+  };
+  if (!host) {
+    return result;
+  }
+  let actionable: Fiber | null = null;
+  let steps = 0;
+  for (let f: Fiber | null = host; f !== null && steps < MAX_UP; f = f.return) {
+    steps++;
+    const props = propsOf(f);
+    if (props && isActionable(props)) {
+      actionable = f;
+      break;
+    }
+  }
+  result.actionable = actionable !== null;
+  // Without an actionable ancestor the search stops at the nearest named
+  // component, so a screen-level testID far above never names a stray touch.
+  let passedActionable = actionable === null;
+  steps = 0;
+  for (let f: Fiber | null = host; f !== null && steps < MAX_UP; f = f.return) {
+    steps++;
+    const props = propsOf(f);
+    if (props) {
+      result.testID ??= nonEmptyString(props.testID);
+      result.accessibilityLabel ??=
+        nonEmptyString(props.accessibilityLabel) ??
+        nonEmptyString(props['aria-label']);
+    }
+    if (f === actionable) {
+      passedActionable = true;
+    }
+    if (passedActionable && isComponentTag(f.tag)) {
+      const name = componentName(f);
+      if (!GENERIC_COMPONENT.test(name)) {
+        result.component = name;
+        break;
+      }
+    }
+  }
+  if (result.testID) {
+    result.name = result.testID;
+    result.source = 'testID';
+  } else if (result.accessibilityLabel) {
+    result.name = result.accessibilityLabel;
+    result.source = 'accessibilityLabel';
+  } else {
+    const text = textUnder(actionable ?? host);
+    if (text) {
+      result.name = text;
+      result.source = 'text';
+    } else if (result.component) {
+      result.name = result.component;
+      result.source = 'component';
+    }
+  }
+  return result;
+};
+
+export const findInTree = (
+  root: Fiber,
+  match: (fiber: Fiber) => unknown,
+  limit = 20000,
+): unknown => {
+  const stack: Fiber[] = [root];
+  let visited = 0;
+  while (stack.length > 0 && visited < limit) {
+    const fiber = stack.pop() as Fiber;
+    visited++;
+    const found = match(fiber);
+    if (found) {
+      return found;
+    }
+    for (let child = fiber.child; child !== null; child = child.sibling) {
+      stack.push(child);
+    }
+  }
+  return null;
+};
+
+const SCROLL_HOSTS = new Set(['RCTScrollView', 'AndroidHorizontalScrollView']);
+
+// Components the lists render between their props and the native scroll view;
+// a name from these would not tell two lists apart.
+const GENERIC_SCROLL_COMPONENT =
+  /^(SectionList|VirtualizedSectionList|VirtualizedListContextProvider|VirtualizedListCellContextProvider|FlashList|AnimatedFlashList|RecyclerListView|ScrollViewBase|ScrollViewStickyHeader|ProgressiveListView|AnimatedFlatList|AnimatedScrollView|AnimatedComponent.*)$/;
+
+export type ScrollAxis = 'x' | 'y';
+
+export type ContainerNameSource =
+  | 'testID'
+  | 'accessibilityLabel'
+  | 'nativeID'
+  | 'component'
+  | 'route'
+  | 'host';
+
+export interface ScrollContainer {
+  name: string;
+  source: ContainerNameSource;
+  hostType: string;
+  axis: ScrollAxis;
+  depth: number;
+}
+
+const scrollAxisOf = (fiber: Fiber): ScrollAxis =>
+  fiber.type === 'AndroidHorizontalScrollView' ||
+  propsOf(fiber)?.horizontal === true
+    ? 'x'
+    : 'y';
+
+const isScrollHost = (fiber: Fiber) =>
+  fiber.tag === HOST_COMPONENT &&
+  typeof fiber.type === 'string' &&
+  SCROLL_HOSTS.has(fiber.type);
+
+const routeNameAbove = (fiber: Fiber): string | null => {
+  let steps = 0;
+  for (let f: Fiber | null = fiber; f !== null && steps < MAX_UP * 4; f = f.return) {
+    steps++;
+    const route = routeLike(propsOf(f)?.route);
+    if (route) {
+      return route.name;
+    }
+  }
+  return null;
+};
+
+// The list's own props reach the native scroll view (FlatList -> VirtualizedList
+// -> ScrollView -> RCTScrollView), so testID/label/nativeID are read there first,
+// then on the components above it up to the first one with a specific name,
+// which is the fallback name.
+const nameScrollContainer = (
+  host: Fiber,
+  depth: number,
+): ScrollContainer => {
+  const hostType = host.type as string;
+  let testID: string | null = null;
+  let label: string | null = null;
+  let nativeID: string | null = null;
+  let component: string | null = null;
+  let steps = 0;
+  for (let f: Fiber | null = host; f !== null && steps < MAX_UP; f = f.return) {
+    steps++;
+    // Host views around the list (a screen's root View) are not the list.
+    const props = f === host || isComponentTag(f.tag) ? propsOf(f) : null;
+    if (props) {
+      testID ??= nonEmptyString(props.testID);
+      label ??=
+        nonEmptyString(props.accessibilityLabel) ??
+        nonEmptyString(props['aria-label']);
+      nativeID ??= authoredId(props.nativeID) ?? authoredId(props.id);
+    }
+    if (f !== host && isComponentTag(f.tag)) {
+      const name = componentName(f);
+      if (!GENERIC_COMPONENT.test(name) && !GENERIC_SCROLL_COMPONENT.test(name)) {
+        component = name;
+        break;
+      }
+    }
+  }
+  const base = { hostType, axis: scrollAxisOf(host), depth };
+  if (testID) {
+    return { ...base, name: testID, source: 'testID' };
+  }
+  if (label) {
+    return { ...base, name: label, source: 'accessibilityLabel' };
+  }
+  if (nativeID) {
+    return { ...base, name: nativeID, source: 'nativeID' };
+  }
+  if (component) {
+    return { ...base, name: component, source: 'component' };
+  }
+  const route = routeNameAbove(host);
+  if (route) {
+    return { ...base, name: `${route}/${hostType}`, source: 'route' };
+  }
+  return { ...base, name: hostType, source: 'host' };
+};
+
+// The scroll view a drag moved: the nearest scrollable ancestor of the touched
+// view whose axis matches the gesture's main axis, else the nearest one. A
+// horizontal swipe on a carousel inside a vertical feed names the carousel; a
+// vertical swipe on the same spot names the feed. Scroll events carry no target
+// tag, so the ancestor chain is the only link from the touch to the container.
+export const describeScrollContainer = (
+  host: Fiber | null,
+  axis: ScrollAxis | null,
+): ScrollContainer | null => {
+  let nearest: Fiber | null = null;
+  let nearestDepth = 0;
+  let depth = 0;
+  let steps = 0;
+  for (let f: Fiber | null = host; f !== null && steps < MAX_UP * 4; f = f.return) {
+    steps++;
+    if (!isScrollHost(f)) {
+      continue;
+    }
+    if (axis === null || scrollAxisOf(f) === axis) {
+      return nameScrollContainer(f, depth);
+    }
+    if (nearest === null) {
+      nearest = f;
+      nearestDepth = depth;
+    }
+    depth++;
+  }
+  return nearest ? nameScrollContainer(nearest, nearestDepth) : null;
+};