@momo-kits/foundation 0.169.4-beta.5 → 0.169.4-beta.6

package/Application/KitAdoption/styles.ts

@@ -0,0 +1,55 @@
+import { StyleSheet } from 'react-native';
+
+import { Colors, Radius, Spacing } from '../../Consts';
+
+// Keeps the summary pill from stretching across a narrow screen.
+const BADGE_MAX_WIDTH = 240;
+// Wide enough for the three action labels without clipping.
+const PANEL_MIN_WIDTH = 180;
+// Floats the dev overlay above screen content.
+const BADGE_Z_INDEX = 9999;
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'flex-end',
+    paddingRight: Spacing.L,
+    zIndex: BADGE_Z_INDEX,
+  },
+  badge: {
+    maxWidth: BADGE_MAX_WIDTH,
+    backgroundColor: Colors.black_17,
+    borderRadius: Radius.S,
+    paddingHorizontal: Spacing.S,
+    paddingVertical: Spacing.XS,
+  },
+  panel: {
+    marginTop: Spacing.XS,
+    minWidth: PANEL_MIN_WIDTH,
+    gap: Spacing.XS,
+    padding: Spacing.S,
+    backgroundColor: Colors.black_01,
+    borderRadius: Radius.M,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: Colors.black_05,
+  },
+  action: {
+    alignItems: 'center',
+    paddingHorizontal: Spacing.S,
+    paddingVertical: Spacing.XS,
+    borderRadius: Radius.S,
+    backgroundColor: Colors.blue_09,
+  },
+  actionOutline: {
+    alignItems: 'center',
+    paddingHorizontal: Spacing.S,
+    paddingVertical: Spacing.XS,
+    borderRadius: Radius.S,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: Colors.black_07,
+  },
+});
+
+export { styles };

package/Application/KitAdoption/types.ts

@@ -0,0 +1,48 @@
+type AdoptionBucket = 'K' | 'R' | 'O';
+
+type SnapshotStatus = 'ok' | 'dev_bundle' | 'truncated' | 'error';
+
+type WalkResult = {
+  counts: { K: number; R: number; O: number };
+  kit: Record<string, number>;
+  rn: Record<string, number>;
+  other: Record<string, number>;
+  top_transparent: { name: string; count: number }[];
+  fibers: number;
+  truncated: boolean;
+  status: SnapshotStatus;
+};
+
+type ScreenSnapshot = WalkResult & {
+  app_id: string;
+  screen_name: string;
+  foundation_version?: string;
+  platform: string;
+  ts: number;
+  walk_ms: number;
+};
+
+type FiberLike = {
+  tag: number;
+  type: unknown;
+  child?: FiberLike | null;
+  sibling?: FiberLike | null;
+  return?: FiberLike | null;
+  alternate?: FiberLike | null;
+  memoizedProps?: unknown;
+  _debugStack?: unknown;
+  _debugOwner?: unknown;
+  stateNode?: unknown;
+};
+
+/** Identity sets of component objects: kit exports and RN primitives. */
+type KitRegistries = { kit: WeakSet<object>; rn: WeakSet<object> };
+
+export type {
+  AdoptionBucket,
+  FiberLike,
+  KitRegistries,
+  ScreenSnapshot,
+  SnapshotStatus,
+  WalkResult,
+};

package/Application/KitAdoption/utils.ts

@@ -0,0 +1,400 @@
+import { Fragment, isValidElement } from 'react';
+
+import {
+  COUNTED_FIBER_TAGS,
+  FIBER_TAG,
+  FOUNDATION_REEXPORT_NAMES,
+  HOST_RN_PREFIXES,
+  LIB_UNIT_NAMES,
+  MAX_FIBERS,
+  REACT_FORWARD_REF_TYPE,
+  REACT_MEMO_TYPE,
+  RN_PRIMITIVE_NAMES,
+  SLOT_SCAN_DEPTH,
+  TOP_TRANSPARENT_LIMIT,
+} from './constants';
+import type {
+  AdoptionBucket,
+  FiberLike,
+  KitRegistries,
+  SnapshotStatus,
+  WalkResult,
+} from './types';
+
+const ANONYMOUS_NAME = 'Anonymous';
+const UNKNOWN_APP_ID = 'unknown';
+
+type LooseObject = Record<string, unknown>;
+type Classification = AdoptionBucket | 'unit' | 'transparent';
+type WalkEntry = { fiber: FiberLike; unitSlots: Set<unknown> | null };
+type Tally = {
+  counts: Record<AdoptionBucket, number>;
+  names: Record<AdoptionBucket, Record<string, number>>;
+  transparent: Record<string, number>;
+  appAuthoredSeen: boolean;
+};
+
+/**
+ * True for non-null objects and functions, the only values React fibers and
+ * component types can hold.
+ */
+const isObjectLike = (value: unknown): value is LooseObject =>
+  (typeof value === 'object' && value !== null) || typeof value === 'function';
+
+/** Non-empty string name, or undefined. */
+const readName = (value: unknown): string | undefined =>
+  typeof value === 'string' && value !== '' ? value : undefined;
+
+const readNameOf = (value: unknown): string | undefined =>
+  isObjectLike(value) ? readName(value.name) : undefined;
+
+/** Runs a read that may throw (RN exports use throwing getters); returns undefined on failure. */
+const readSafely = (read: () => unknown): unknown => {
+  try {
+    return read();
+  } catch {
+    return undefined;
+  }
+};
+
+/** Functions and React exotic objects ($$typeof) are component candidates. */
+const isComponentLike = (value: unknown): value is object =>
+  typeof value === 'function' ||
+  (isObjectLike(value) && value.$$typeof !== undefined);
+
+const isInSet = (set: WeakSet<object>, value: unknown): boolean =>
+  isObjectLike(value) && set.has(value);
+
+/** Adds a non-null object-typed count, keeping prototype keys (e.g. "constructor") out of the lookup. */
+const incrementName = (record: Record<string, number>, name: string): void => {
+  const current = Object.prototype.hasOwnProperty.call(record, name)
+    ? record[name]
+    : 0;
+  record[name] = current + 1;
+};
+
+/**
+ * Returns the live copy of a fiber: the one under the committed HostRoot,
+ * otherwise its alternate. Walking a stale copy would count the old tree.
+ */
+const getCurrentFiber = (fiber: FiberLike): FiberLike => {
+  let hostRoot: FiberLike | null | undefined = fiber;
+  while (hostRoot && hostRoot.tag !== FIBER_TAG.HostRoot) {
+    hostRoot = hostRoot.return;
+  }
+  if (!hostRoot) return fiber;
+  const root = hostRoot.stateNode as { current?: unknown } | null | undefined;
+  return root?.current === hostRoot ? fiber : fiber.alternate ?? fiber;
+};
+
+/** Inner component of a React.memo or forwardRef wrapper, or undefined for other types. */
+const getWrappedType = (type: LooseObject): unknown => {
+  if (type.$$typeof === REACT_MEMO_TYPE) return type.type;
+  if (type.$$typeof === REACT_FORWARD_REF_TYPE) return type.render;
+  return undefined;
+};
+
+/**
+ * Strips memo and forwardRef wrappers (recursively) to reach the underlying
+ * component, since a fiber's type is often the wrapper.
+ */
+const unwrapType = (type: unknown): unknown => {
+  if (!isObjectLike(type)) return type;
+  const inner = getWrappedType(type);
+  return inner === undefined ? type : unwrapType(inner);
+};
+
+/**
+ * Display name for a fiber type, following wrappers when the type has no name
+ * of its own. Used for lib-unit matching and the report.
+ */
+const getTypeName = (type: unknown): string => {
+  if (typeof type === 'string') return type;
+  if (!isObjectLike(type)) return ANONYMOUS_NAME;
+  return (
+    readName(type.displayName) ??
+    readName(type.name) ??
+    readNameOf(type.render) ??
+    readNameOf(type.type) ??
+    ANONYMOUS_NAME
+  );
+};
+
+/** Adds a component and its unwrapped form to the set. */
+const addRegistryEntry = (set: WeakSet<object>, value: unknown): void => {
+  if (!isComponentLike(value)) return;
+  set.add(value);
+  const inner = unwrapType(value);
+  if (isObjectLike(inner)) set.add(inner);
+};
+
+/**
+ * Builds the identity sets used to classify fibers. RN is read by name only,
+ * because enumerating react-native exports hits throwing getters.
+ */
+const createRegistries = (
+  kitModules: Record<string, unknown>[],
+  rnModule: Record<string, unknown>,
+): KitRegistries => {
+  const kit = new WeakSet<object>();
+  const rn = new WeakSet<object>();
+  kitModules.forEach(mod => {
+    Object.keys(mod).forEach(name => {
+      if (FOUNDATION_REEXPORT_NAMES.includes(name)) return;
+      addRegistryEntry(
+        kit,
+        readSafely(() => mod[name]),
+      );
+    });
+  });
+  RN_PRIMITIVE_NAMES.forEach(name => {
+    addRegistryEntry(
+      rn,
+      readSafely(() => rnModule[name]),
+    );
+  });
+  return { kit, rn };
+};
+
+/**
+ * The fiber whose stack decides authorship. React creates the inner fiber of a
+ * MemoComponent itself, with no stack, so it inherits its memo parent's.
+ */
+const getAuthorFiber = (fiber: FiberLike): FiberLike =>
+  fiber.return?.tag === FIBER_TAG.MemoComponent && fiber.return.child === fiber
+    ? fiber.return
+    : fiber;
+
+/**
+ * True when the fiber has no dev stack, i.e. it was created by mini-app code
+ * (prod bundle) rather than by the host's dev build.
+ */
+const isAppAuthored = (fiber: FiberLike): boolean => !fiber._debugStack;
+
+/**
+ * True when the fiber's first child was created by host code and is owned by
+ * this fiber, which marks a host-internal wrapper.
+ */
+const isHostDefined = (fiber: FiberLike): boolean => {
+  const child = fiber.child;
+  return !!child && !isAppAuthored(child) && child._debugOwner === fiber;
+};
+
+/** True when the mini-app context opted into kit adoption measurement. */
+const isAdoptionEnabled = (context: unknown): boolean =>
+  isObjectLike(context) &&
+  isObjectLike(context.features) &&
+  context.features.kitAdoption === true;
+
+/** App id from the mini-app context, or a placeholder when it is missing. */
+const getAppId = (context: unknown): string => {
+  if (!isObjectLike(context) || context.appId == null) return UNKNOWN_APP_ID;
+  return String(context.appId);
+};
+
+/**
+ * Adds the props of React elements that the app passed into a lib unit, found
+ * among the props and in arrays up to SLOT_SCAN_DEPTH. Never looks inside an element.
+ */
+const collectSlotProps = (
+  props: unknown,
+  set: Set<unknown>,
+  depth: number,
+): void => {
+  if (depth > SLOT_SCAN_DEPTH || !isObjectLike(props)) return;
+  Object.values(props).forEach(value => {
+    if (isValidElement(value)) {
+      set.add(value.props);
+      if (value.type === Fragment)
+        collectSlotProps(value.props, set, depth + 1);
+    } else if (Array.isArray(value)) {
+      collectSlotProps(value, set, depth + 1);
+    }
+  });
+};
+
+/** True for host string types that come from react-native's native components. */
+const isRnHostType = (type: unknown): boolean =>
+  typeof type === 'string' &&
+  HOST_RN_PREFIXES.some(prefix => type.startsWith(prefix));
+
+/**
+ * Buckets a fiber: K/R/O for kit, RN and other components, 'unit' for lib
+ * units (counted once), or 'transparent' for app wrappers that are not counted.
+ */
+const classifyFiber = (
+  fiber: FiberLike,
+  registries: KitRegistries,
+): Classification => {
+  if (fiber.tag === FIBER_TAG.HostComponent) {
+    return isRnHostType(fiber.type) ? 'R' : 'O';
+  }
+  const inner = unwrapType(fiber.type);
+  if (isInSet(registries.kit, fiber.type) || isInSet(registries.kit, inner)) {
+    return 'K';
+  }
+  if (isInSet(registries.rn, fiber.type) || isInSet(registries.rn, inner)) {
+    return 'R';
+  }
+  if (LIB_UNIT_NAMES.includes(getTypeName(fiber.type))) return 'unit';
+  return isHostDefined(fiber) ? 'O' : 'transparent';
+};
+
+const createTally = (): Tally => ({
+  counts: { K: 0, R: 0, O: 0 },
+  names: { K: {}, R: {}, O: {} },
+  transparent: {},
+  appAuthoredSeen: false,
+});
+
+const countComponent = (
+  tally: Tally,
+  bucket: AdoptionBucket,
+  name: string,
+): void => {
+  tally.counts[bucket] += 1;
+  incrementName(tally.names[bucket], name);
+};
+
+/** Top transparent wrapper names by count, most frequent first. */
+const topEntries = (
+  record: Record<string, number>,
+): { name: string; count: number }[] =>
+  Object.keys(record)
+    .map(name => ({ name, count: record[name] }))
+    .sort((a, b) => b.count - a.count)
+    .slice(0, TOP_TRANSPARENT_LIMIT);
+
+const getStatus = (
+  truncated: boolean,
+  fibers: number,
+  appAuthoredSeen: boolean,
+): SnapshotStatus => {
+  if (truncated) return 'truncated';
+  if (fibers > 0 && !appAuthoredSeen) return 'dev_bundle';
+  return 'ok';
+};
+
+const buildResult = (
+  tally: Tally,
+  fibers: number,
+  truncated: boolean,
+): WalkResult => ({
+  counts: { ...tally.counts },
+  kit: tally.names.K,
+  rn: tally.names.R,
+  other: tally.names.O,
+  top_transparent: topEntries(tally.transparent),
+  fibers,
+  truncated,
+  status: getStatus(truncated, fibers, tally.appAuthoredSeen),
+});
+
+/**
+ * Queues the children of a fiber (and their siblings) with the given slot set.
+ * Slot sets only pass through lib-unit internals and walk-through fibers.
+ */
+const pushChildren = (
+  fiber: FiberLike,
+  unitSlots: Set<unknown> | null,
+  stack: WalkEntry[],
+): void => {
+  for (let child = fiber.child; child; child = child.sibling) {
+    stack.push({ fiber: child, unitSlots });
+  }
+};
+
+/**
+ * Counts one app-scope fiber. A lib unit counts as K once; its slot props are
+ * collected so that the app-passed descendants are counted too.
+ */
+const countFiber = (
+  fiber: FiberLike,
+  registries: KitRegistries,
+  tally: Tally,
+  stack: WalkEntry[],
+): void => {
+  const name = getTypeName(fiber.type);
+  const kind = classifyFiber(fiber, registries);
+  if (kind === 'unit') {
+    countComponent(tally, 'K', name);
+    const slots = new Set<unknown>();
+    collectSlotProps(fiber.memoizedProps, slots, 0);
+    pushChildren(fiber, slots, stack);
+    return;
+  }
+  if (kind === 'transparent') {
+    incrementName(tally.transparent, name);
+  } else {
+    countComponent(tally, kind, name);
+  }
+  pushChildren(fiber, null, stack);
+};
+
+/**
+ * Handles one popped fiber: walk-through tags and lib-unit internals are
+ * only traversed, host-defined fibers are skipped, and app-scope fibers are counted.
+ */
+const visitEntry = (
+  entry: WalkEntry,
+  registries: KitRegistries,
+  tally: Tally,
+  stack: WalkEntry[],
+): void => {
+  const { fiber, unitSlots } = entry;
+  if (!COUNTED_FIBER_TAGS.includes(fiber.tag)) {
+    pushChildren(fiber, unitSlots, stack);
+    return;
+  }
+  if (unitSlots && !unitSlots.has(fiber.memoizedProps)) {
+    pushChildren(fiber, unitSlots, stack);
+    return;
+  }
+  if (!isAppAuthored(getAuthorFiber(fiber))) {
+    pushChildren(fiber, null, stack);
+    return;
+  }
+  tally.appAuthoredSeen = true;
+  countFiber(fiber, registries, tally, stack);
+};
+
+/**
+ * Walks a screen's fiber tree from rootFiber (not its siblings) and tallies
+ * app-authored kit, RN and other components. Stops at maxFibers and marks truncated.
+ */
+const walkScreen = (
+  rootFiber: FiberLike,
+  registries: KitRegistries,
+  stopAt?: (fiber: FiberLike) => boolean,
+  maxFibers = MAX_FIBERS,
+): WalkResult => {
+  const tally = createTally();
+  const stack: WalkEntry[] = [{ fiber: rootFiber, unitSlots: null }];
+  let fibers = 0;
+  let truncated = false;
+  for (let entry = stack.pop(); entry; entry = stack.pop()) {
+    if (fibers === maxFibers) {
+      truncated = true;
+      break;
+    }
+    fibers += 1;
+    if (entry.fiber !== rootFiber && stopAt?.(entry.fiber)) continue;
+    visitEntry(entry, registries, tally, stack);
+  }
+  return buildResult(tally, fibers, truncated);
+};
+
+export {
+  classifyFiber,
+  collectSlotProps,
+  createRegistries,
+  getAppId,
+  getAuthorFiber,
+  getCurrentFiber,
+  getTypeName,
+  isAdoptionEnabled,
+  isAppAuthored,
+  isHostDefined,
+  unwrapType,
+  walkScreen,
+};

package/Application/ModalScreen.tsx

@@ -24,6 +24,7 @@ import Navigation from './Navigation';
 import { ModalParams } from './types';
 import BottomSheet from './BottomSheet';
 import { isIPhoneDuo } from './utils';
+import { AdoptionProbe } from './KitAdoption';
 import { useModalLayout } from './modalLayout';
 import { scheduleOnRN } from 'react-native-worklets';
 
@@ -182,7 +183,12 @@ const Modal: React.FC<ModalParams> = props => {
             modalStyle,
           ]}
         >
-          <Component {...params} onRequestClose={onDismiss} />
+          <AdoptionProbe
+            screenName={Component?.name || Component?.type?.name || 'Invalid'}
+            navigation={props.navigation}
+          >
+            <Component {...params} onRequestClose={onDismiss} />
+          </AdoptionProbe>
         </Animated.View>
       </KeyboardAvoidingView>
     </Container>

package/Application/NavigationContainer.tsx

@@ -30,6 +30,7 @@ import { HeaderBackground } from './Components/HeaderBackground';
 import { useScreenLayout } from '../Layout';
 import { getHeaderRowOptions } from '../Layout/utils';
 import { ReservedRegionsProvider } from '../Layout/ReservedRegions';
+import { AdoptionBadge } from './KitAdoption';
 
 const Stack = createStackNavigator();
 
@@ -86,6 +87,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
             initialParams={initialParams}
             localize={localize}
           />
+          <AdoptionBadge />
         </MiniAppContext.Provider>
       </ReservedRegionsProvider>
     </SafeAreaProvider>

package/Application/StackScreen.tsx

@@ -8,6 +8,7 @@ import { SwipeBackHaptic } from './Components/SwipeBackHaptic';
 import { useAppState } from './hooks';
 import { createScreenTracking } from './StackScreen.tracking';
 import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal';
+import { AdoptionProbe } from './KitAdoption';
 
 const runAfterInteractions = InteractionManager.runAfterInteractions;
 
@@ -283,7 +284,9 @@ const StackScreen: React.FC<any> = props => {
       }}
     >
       <TooltipPortalProvider>
-        <Component heightHeader={heightHeader} {...data} />
+        <AdoptionProbe screenName={screenName} navigation={props.navigation}>
+          <Component heightHeader={heightHeader} {...data} />
+        </AdoptionProbe>
         <TooltipPortalHost />
         <SwipeBackHaptic />
       </TooltipPortalProvider>