@momo-kits/foundation 0.169.6 → 0.169.7-beta.10

package/Application/KitAdoption/AdoptionProbe.tsx

@@ -0,0 +1,166 @@
+import React from 'react';
+import { InteractionManager, Platform } from 'react-native';
+
+import { MiniAppContext } from '../../Context';
+import { adoptionStore } from './AdoptionStore';
+import { SETTLE_MS } from './constants';
+import type {
+  AdoptionMeasureRef,
+  FiberLike,
+  KitRegistries,
+  ScreenSnapshot,
+  WalkResult,
+} from './types';
+import {
+  createRegistries,
+  getAppId,
+  getCurrentFiber,
+  isAdoptionTrackingEnabled,
+  walkScreen,
+} from './utils';
+
+type NavigationLike = {
+  addListener?: (event: string, callback: () => void) => () => void;
+};
+
+type ProbeProps = {
+  screenName: string;
+  navigation?: NavigationLike;
+  measureRef?: AdoptionMeasureRef;
+  children: React.ReactNode;
+};
+
+let registriesCache: KitRegistries | undefined;
+
+/**
+ * Kit and RN identity sets, built on first use. Lazy require breaks the cycle
+ * between the foundation index and the Application screens that render this probe.
+ */
+const getRegistries = (): KitRegistries => {
+  if (!registriesCache) {
+    const kitModule = require('../../index') as Record<string, unknown>;
+    const rnModule = require('react-native') as Record<string, unknown>;
+    registriesCache = createRegistries([kitModule], rnModule);
+  }
+  return registriesCache;
+};
+
+/** Foundation version from its package.json, or undefined if it cannot be read. */
+const readFoundationVersion = (): string | undefined => {
+  try {
+    const pkg = require('../../package.json') as { version?: string };
+    return pkg.version;
+  } catch {
+    return undefined;
+  }
+};
+
+const createErrorResult = (): WalkResult => ({
+  counts: { K: 0, R: 0, O: 0 },
+  kit: {},
+  rn: {},
+  other: {},
+  top_transparent: [],
+  fibers: 0,
+  truncated: false,
+  status: 'error',
+});
+
+/** Stops the walk at nested probes so each screen is measured on its own. */
+const isProbeFiber = (fiber: FiberLike): boolean =>
+  fiber.type === AdoptionProbeDev;
+
+/**
+ * Wrapper around a screen. In dev it measures the fiber tree after the first
+ * interactions settle and on focus; when tracking is enabled it exposes a measure for screen-load events.
+ */
+class AdoptionProbeDev extends React.Component<ProbeProps> {
+  static contextType = MiniAppContext;
+
+  private timer: ReturnType<typeof setTimeout> | undefined;
+  private interaction: { cancel: () => void } | undefined;
+  private unsubscribeFocus: (() => void) | undefined;
+
+  componentDidMount(): void {
+    const { measureRef } = this.props;
+    if (measureRef && (__DEV__ || isAdoptionTrackingEnabled(this.context))) {
+      measureRef.current = this.measureForTracking;
+    }
+    if (!__DEV__) return;
+    adoptionStore.setActive(this.measure);
+    this.unsubscribeFocus = this.props.navigation?.addListener?.(
+      'focus',
+      this.handleFocus,
+    );
+    this.interaction = InteractionManager.runAfterInteractions(() => {
+      this.timer = setTimeout(this.measure, SETTLE_MS);
+    });
+  }
+
+  componentWillUnmount(): void {
+    const { measureRef } = this.props;
+    if (measureRef?.current === this.measureForTracking) {
+      measureRef.current = undefined;
+    }
+    if (!__DEV__) return;
+    if (this.timer !== undefined) clearTimeout(this.timer);
+    this.interaction?.cancel();
+    this.unsubscribeFocus?.();
+    adoptionStore.clearActive(this.measure);
+  }
+
+  render(): React.ReactNode {
+    return this.props.children;
+  }
+
+  private handleFocus = (): void => {
+    adoptionStore.setActive(this.measure);
+  };
+
+  private measure = (): void => {
+    const startedAt = Date.now();
+    let result: WalkResult | undefined;
+    try {
+      result = this.walk();
+    } catch {
+      result = createErrorResult();
+    }
+    if (result) this.save(result, startedAt);
+  };
+
+  /** Measures without saving to the store; undefined on error or when there is no content. */
+  private measureForTracking = (): WalkResult | undefined => {
+    try {
+      return this.walk();
+    } catch {
+      return undefined;
+    }
+  };
+
+  private walk(): WalkResult | undefined {
+    const self = getCurrentFiber(
+      (this as unknown as { _reactInternals: FiberLike })._reactInternals,
+    );
+    const root = self.child;
+    if (!root) return undefined;
+    return walkScreen(root, getRegistries(), isProbeFiber, undefined, !__DEV__);
+  }
+
+  private save(result: WalkResult, startedAt: number): void {
+    const snapshot: ScreenSnapshot = {
+      ...result,
+      app_id: getAppId(this.context),
+      screen_name: this.props.screenName,
+      foundation_version: readFoundationVersion(),
+      platform: Platform.OS,
+      ts: Date.now(),
+      walk_ms: Date.now() - startedAt,
+    };
+    adoptionStore.save(snapshot);
+  }
+}
+
+const AdoptionProbe = AdoptionProbeDev;
+
+export type { NavigationLike, ProbeProps };
+export { AdoptionProbe, AdoptionProbeDev };

package/Application/KitAdoption/AdoptionStore.ts

@@ -0,0 +1,80 @@
+import type { ScreenSnapshot } from './types';
+
+type Listener = () => void;
+type Measure = () => void;
+
+/** Total classified nodes in a snapshot, used to keep the richer measurement. */
+const getTotal = (snapshot: ScreenSnapshot): number =>
+  snapshot.counts.K + snapshot.counts.R + snapshot.counts.O;
+
+const getKey = (snapshot: ScreenSnapshot): string =>
+  `${snapshot.app_id}/${snapshot.screen_name}`;
+
+/**
+ * In-memory, dev-only store of per-screen snapshots. Keeps one snapshot per
+ * app and screen (the one with the most nodes) and holds the active measurer.
+ */
+class AdoptionStore {
+  private snapshots = new Map<string, ScreenSnapshot>();
+  private listeners = new Set<Listener>();
+  private latestKey: string | undefined;
+  private activeMeasure: Measure | undefined;
+
+  /** Stores a snapshot unless the stored one for the same screen is larger. */
+  save(snapshot: ScreenSnapshot): void {
+    const key = getKey(snapshot);
+    const existing = this.snapshots.get(key);
+    if (!existing || getTotal(existing) <= getTotal(snapshot)) {
+      this.snapshots.set(key, snapshot);
+    }
+    this.latestKey = key;
+    this.notify();
+  }
+
+  getAll(): ScreenSnapshot[] {
+    return Array.from(this.snapshots.values());
+  }
+
+  /** The screen saved most recently, or undefined when nothing is saved. */
+  getLatest(): ScreenSnapshot | undefined {
+    return this.latestKey === undefined
+      ? undefined
+      : this.snapshots.get(this.latestKey);
+  }
+
+  clear(): void {
+    this.snapshots.clear();
+    this.latestKey = undefined;
+    this.notify();
+  }
+
+  /** Registers a change listener and returns its unsubscribe function. */
+  subscribe(listener: Listener): () => void {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  setActive(measure: Measure): void {
+    this.activeMeasure = measure;
+  }
+
+  /** Clears the active measurer only if it is still the given one. */
+  clearActive(measure: Measure): void {
+    if (this.activeMeasure === measure) this.activeMeasure = undefined;
+  }
+
+  remeasureActive(): void {
+    this.activeMeasure?.();
+  }
+
+  private notify(): void {
+    this.listeners.forEach(listener => listener());
+  }
+}
+
+const adoptionStore = new AdoptionStore();
+
+export type { Listener, Measure };
+export { AdoptionStore, adoptionStore };

package/Application/KitAdoption/Authorship/utils.ts

@@ -0,0 +1,137 @@
+import {
+  FIBER_TAG,
+  LOCAL_SOURCE_KEY,
+  REACT_FACTORY_FRAME_NAMES,
+  REACT_STACK_BOTTOM_FRAME,
+} from '../constants';
+import type { FiberLike } from '../types';
+
+const HTTP_ORIGIN_PATTERN = /^(https?:\/\/[^/]+)/i;
+const FILE_URL_PATTERN = /^file:\/\//i;
+const LINE_COL_SUFFIX_PATTERN = /:\d+(?::\d+)?$/;
+const PAREN_LOCATION_PATTERN = /\((?:address at )?(.+)\)\s*$/;
+const BARE_LOCATION_PATTERN = /^\s*at\s+(.+?)\s*$/;
+const FRAME_NAME_PATTERN = /^\s*at\s+([^\s(]+)/;
+const NATIVE_FRAME_LOCATION = 'native';
+
+const creatorSourceCache = new WeakMap<object, string | null>();
+let hostSource: string | undefined;
+
+/**
+ * Bundle identity of a frame location: the origin for http(s), the directory
+ * for file URLs, and one shared key for bare source paths (jest).
+ */
+const getSourceKey = (location: string): string => {
+  const origin = HTTP_ORIGIN_PATTERN.exec(location);
+  if (origin) return origin[1];
+  if (!FILE_URL_PATTERN.test(location)) return LOCAL_SOURCE_KEY;
+  const path = location.replace(LINE_COL_SUFFIX_PATTERN, '');
+  return path.slice(0, path.lastIndexOf('/'));
+};
+
+/** Location (`url:line:col`) of a stack frame line, or undefined when it has none. */
+const parseFrameLocation = (line: string): string | undefined => {
+  const match =
+    PAREN_LOCATION_PATTERN.exec(line) ?? BARE_LOCATION_PATTERN.exec(line);
+  return match?.[1];
+};
+
+/** Reads `.stack` of a debug stack value without throwing; undefined if it is not a string. */
+const readStack = (debugStack: unknown): string | undefined => {
+  try {
+    const stack = (debugStack as { stack?: unknown } | null)?.stack;
+    return typeof stack === 'string' ? stack : undefined;
+  } catch {
+    return undefined;
+  }
+};
+
+/** Frame lines below the header, cut at React's bottom-frame marker. */
+const getFrameLines = (stack: string): string[] => {
+  const lines = stack.split('\n').slice(1);
+  const bottom = lines.findIndex(line =>
+    line.includes(REACT_STACK_BOTTOM_FRAME),
+  );
+  return bottom === -1 ? lines : lines.slice(0, bottom);
+};
+
+/**
+ * True for frames that cannot be the element's creator: React's own factory
+ * wrappers and native frames (e.g. `apply (native)`), which carry no bundle.
+ */
+const isSkippedFrame = (line: string): boolean => {
+  const name = FRAME_NAME_PATTERN.exec(line)?.[1] ?? '';
+  const isNative = parseFrameLocation(line) === NATIVE_FRAME_LOCATION;
+  return isNative || REACT_FACTORY_FRAME_NAMES.includes(name);
+};
+
+/** Source key of the frame that created the element, skipping React's factory frames. */
+const findCreatorSource = (stack: string): string | undefined => {
+  const lines = getFrameLines(stack).slice(1);
+  const index = lines.findIndex(line => !isSkippedFrame(line));
+  const location = index === -1 ? undefined : parseFrameLocation(lines[index]);
+  return location === undefined ? undefined : getSourceKey(location);
+};
+
+/**
+ * Source key of the code that created an element, read from its debug stack.
+ * Cached per stack object since fibers and alternates share it.
+ */
+const getCreatorSource = (debugStack: unknown): string | undefined => {
+  const isCacheable = typeof debugStack === 'object' && debugStack !== null;
+  if (isCacheable && creatorSourceCache.has(debugStack)) {
+    return creatorSourceCache.get(debugStack) ?? undefined;
+  }
+  const stack = readStack(debugStack);
+  const source = stack === undefined ? undefined : findCreatorSource(stack);
+  if (isCacheable) creatorSourceCache.set(debugStack, source ?? null);
+  return source;
+};
+
+/** Source key of the bundle running this module (the host), cached after the first read. */
+const getHostSource = (): string => {
+  if (hostSource !== undefined) return hostSource;
+  const line = (new Error().stack ?? '').split('\n')[1] ?? '';
+  const location = parseFrameLocation(line);
+  hostSource =
+    location === undefined ? LOCAL_SOURCE_KEY : getSourceKey(location);
+  return hostSource;
+};
+
+/**
+ * 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 (prod jsx) or its creator frame lives
+ * in a bundle other than the host's. Unparseable stacks count as host.
+ */
+const isAppAuthored = (fiber: FiberLike): boolean => {
+  if (!fiber._debugStack) return true;
+  const source = getCreatorSource(fiber._debugStack);
+  return source !== undefined && source !== getHostSource();
+};
+
+/**
+ * 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;
+};
+
+export {
+  getAuthorFiber,
+  getCreatorSource,
+  getHostSource,
+  getSourceKey,
+  isAppAuthored,
+  isHostDefined,
+  parseFrameLocation,
+};

package/Application/KitAdoption/Slots/utils.ts

@@ -0,0 +1,68 @@
+import { Fragment, isValidElement } from 'react';
+
+import {
+  CELL_WRAPPER_SCAN_DEPTH,
+  FIBER_TAG,
+  SLOT_SCAN_DEPTH,
+} from '../constants';
+import type { FiberLike } from '../types';
+
+type PropBag = Record<string, unknown>;
+
+/** True for non-null objects, the only values that can hold props. */
+const isPropBag = (value: unknown): value is PropBag =>
+  typeof value === 'object' && value !== null;
+
+/**
+ * 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 || !isPropBag(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 a VirtualizedList cell, detected by its props shape (`cellKey` and a
+ * numeric `index`) because release bundles may minify component names.
+ */
+const isListCell = (fiber: FiberLike): boolean => {
+  const props = fiber.memoizedProps;
+  if (fiber.tag !== FIBER_TAG.ClassComponent || !isPropBag(props)) return false;
+  return 'cellKey' in props && typeof props.index === 'number';
+};
+
+/** True for the context provider and fragment fibers that sit above a cell's wrapper view. */
+const isCellPassThrough = (fiber: FiberLike): boolean =>
+  fiber.tag === FIBER_TAG.ContextProvider || fiber.tag === FIBER_TAG.Fragment;
+
+/**
+ * Adds the rendered item and separator of a list cell to the unit's slots. They
+ * come from `renderItem`, so no app-passed props hold them; they are the
+ * children of the wrapper under the cell's providers.
+ */
+const collectCellSlots = (cell: FiberLike, unitSlots: Set<unknown>): void => {
+  let wrapper = cell.child;
+  for (
+    let step = 0;
+    wrapper && isCellPassThrough(wrapper) && step < CELL_WRAPPER_SCAN_DEPTH;
+    step += 1
+  ) {
+    wrapper = wrapper.child;
+  }
+  if (wrapper) collectSlotProps(wrapper.memoizedProps, unitSlots, 0);
+};
+
+export { collectCellSlots, collectSlotProps, isListCell };

package/Application/KitAdoption/constants.ts

@@ -0,0 +1,120 @@
+const SETTLE_MS = 3000;
+const MAX_FIBERS = 20000;
+const SLOT_SCAN_DEPTH = 4;
+const CELL_WRAPPER_SCAN_DEPTH = 3;
+const TOP_TRANSPARENT_LIMIT = 10;
+
+// Generic lib names (Badge, Title, Logo, ...) are left out on purpose so app components with the same name are not counted as kit.
+const LIB_UNIT_NAMES: string[] = [
+  'AutoComplete',
+  'Avatar',
+  'Calendar',
+  'Carousel',
+  'Chip',
+  'Collapse',
+  'DateTimePicker',
+  'ProgressInfo',
+  'Rating',
+  'Slider',
+  'Stepper',
+  'Steps',
+  'SuggestAction',
+  'Swipe',
+  'TabView',
+  'TabBar',
+  'CardTabBar',
+  'ScrollableTabBar',
+  'HeaderSliderBanner',
+  'TrustBanner',
+  'Uploader',
+];
+
+const RN_PRIMITIVE_NAMES: string[] = [
+  'View',
+  'Text',
+  'Image',
+  'ImageBackground',
+  'TextInput',
+  'ScrollView',
+  'FlatList',
+  'SectionList',
+  'VirtualizedList',
+  'TouchableOpacity',
+  'TouchableHighlight',
+  'TouchableWithoutFeedback',
+  'Pressable',
+  'Switch',
+  'ActivityIndicator',
+  'Modal',
+  'KeyboardAvoidingView',
+  'RefreshControl',
+];
+
+/** Foundation exports that come from third-party or RN and must not count as kit. */
+const FOUNDATION_REEXPORT_NAMES: string[] = [
+  'TouchableOpacity',
+  'LinearGradient',
+  'SafeAreaView',
+  'SafeAreaProvider',
+  'SafeAreaConsumer',
+  'SafeAreaInsetsContext',
+  'SafeAreaFrameContext',
+  'withSafeAreaInsets',
+];
+
+const FIBER_TAG = {
+  FunctionComponent: 0,
+  ClassComponent: 1,
+  HostRoot: 3,
+  HostComponent: 5,
+  HostText: 6,
+  Fragment: 7,
+  ContextProvider: 10,
+  ForwardRef: 11,
+  MemoComponent: 14,
+  SimpleMemoComponent: 15,
+} as const;
+
+/** Fiber tags that are component fibers; every other tag is walked through without counting. */
+const COUNTED_FIBER_TAGS: number[] = [
+  FIBER_TAG.FunctionComponent,
+  FIBER_TAG.ClassComponent,
+  FIBER_TAG.HostComponent,
+  FIBER_TAG.ForwardRef,
+  FIBER_TAG.SimpleMemoComponent,
+];
+
+const HOST_RN_PREFIXES: string[] = ['RCT', 'Android'];
+
+const LOCAL_SOURCE_KEY = 'local';
+const REACT_STACK_BOTTOM_FRAME = 'react-stack-bottom-frame';
+const REACT_FACTORY_FRAME_NAMES: string[] = [
+  'jsx',
+  'jsxs',
+  'jsxDEV',
+  'jsxDEVImpl',
+  'createElement',
+  'jsxProd',
+];
+
+const REACT_MEMO_TYPE = Symbol.for('react.memo');
+const REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+
+export {
+  CELL_WRAPPER_SCAN_DEPTH,
+  COUNTED_FIBER_TAGS,
+  FIBER_TAG,
+  FOUNDATION_REEXPORT_NAMES,
+  HOST_RN_PREFIXES,
+  LIB_UNIT_NAMES,
+  LOCAL_SOURCE_KEY,
+  MAX_FIBERS,
+  REACT_FACTORY_FRAME_NAMES,
+  REACT_FORWARD_REF_TYPE,
+  REACT_MEMO_TYPE,
+  REACT_STACK_BOTTOM_FRAME,
+  RN_PRIMITIVE_NAMES,
+  SETTLE_MS,
+  SLOT_SCAN_DEPTH,
+  TOP_TRANSPARENT_LIMIT,
+};

package/Application/KitAdoption/index.ts

@@ -0,0 +1,12 @@
+import { AdoptionBadge } from './AdoptionBadge';
+import { AdoptionProbe } from './AdoptionProbe';
+import { adoptionStore } from './AdoptionStore';
+import { getAdoptionTrackingParams, isAdoptionTrackingEnabled } from './utils';
+
+export {
+  AdoptionBadge,
+  AdoptionProbe,
+  adoptionStore,
+  getAdoptionTrackingParams,
+  isAdoptionTrackingEnabled,
+};

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,61 @@
+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 AdoptionTrackingParams = {
+  num_design_system: number;
+  num_rn: number;
+  num_other: number;
+};
+
+/** Ref the probe fills with a function that measures its screen for tracking. */
+type AdoptionMeasureRef = {
+  current: (() => WalkResult | undefined) | undefined;
+};
+
+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,
+  AdoptionMeasureRef,
+  AdoptionTrackingParams,
+  FiberLike,
+  KitRegistries,
+  ScreenSnapshot,
+  SnapshotStatus,
+  WalkResult,
+};