@momo-kits/foundation 0.169.4 → 0.169.5-beta.1

package/Application/BottomSheet.tsx

@@ -18,6 +18,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 import { DUO_ORIENTATIONS, styles } from './BottomSheet.styles';
+import { AdoptionProbe } from './KitAdoption';
 import {
   useBottomSheetLayout,
   useDuoKeyboardLift,
@@ -173,11 +174,16 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   );
 
   const screen = (
-    <Screen
-      {...props}
-      {...props.route.params}
-      onRequestClose={onRequestClose}
-    />
+    <AdoptionProbe
+      screenName={Screen?.name || 'Invalid'}
+      navigation={props.navigation}
+    >
+      <Screen
+        {...props}
+        {...props.route.params}
+        onRequestClose={onRequestClose}
+      />
+    </AdoptionProbe>
   );
 
   return (

package/Application/KitAdoption/AdoptionBadge.tsx

@@ -0,0 +1,119 @@
+import React, { useState, useSyncExternalStore } from 'react';
+import { Share, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Colors, Spacing } from '../../Consts';
+import { Text } from '../../Text';
+import { adoptionStore } from './AdoptionStore';
+import { styles } from './styles';
+import type { ScreenSnapshot } from './types';
+
+/** Subscribes a React listener to the adoption store. Stable identity for useSyncExternalStore. */
+const subscribeToStore = (listener: () => void): (() => void) =>
+  adoptionStore.subscribe(listener);
+
+const getLatestSnapshot = (): ScreenSnapshot | undefined =>
+  adoptionStore.getLatest();
+
+const getScreenCount = (): number => adoptionStore.getAll().length;
+
+/** Share of classified nodes that are app-authored kit: K / (K + R + O). */
+const getAdoptionRate = (snapshot: ScreenSnapshot): number => {
+  const { K, R, O } = snapshot.counts;
+  const total = K + R + O;
+  return total === 0 ? 0 : K / total;
+};
+
+const formatSummary = (snapshot: ScreenSnapshot | undefined): string => {
+  if (!snapshot) return 'Kit adoption: chưa có dữ liệu';
+  const { K, R, O } = snapshot.counts;
+  const percent = Math.round(getAdoptionRate(snapshot) * 100);
+  return `Kit ${percent}% · K${K} R${R} O${O}`;
+};
+
+const handleRemeasure = (): void => {
+  adoptionStore.remeasureActive();
+};
+
+const handleShare = (): void => {
+  Share.share({ message: JSON.stringify(adoptionStore.getAll()) }).catch(
+    () => undefined,
+  );
+};
+
+const handleClear = (): void => {
+  adoptionStore.clear();
+};
+
+/**
+ * Dev-only floating badge showing the latest screen's kit adoption. Tap to
+ * expand actions (re-measure, share JSON, clear). Renders nothing in release builds.
+ */
+const AdoptionBadge: React.FC = () => {
+  const insets = useSafeAreaInsets();
+  const [isExpanded, setExpanded] = useState(false);
+  const latest = useSyncExternalStore(subscribeToStore, getLatestSnapshot);
+  const screenCount = useSyncExternalStore(subscribeToStore, getScreenCount);
+
+  if (!__DEV__) return null;
+
+  const handleToggle = (): void => setExpanded(prev => !prev);
+
+  return (
+    <View
+      pointerEvents="box-none"
+      style={[styles.wrapper, { top: insets.top + Spacing.S }]}
+    >
+      <TouchableOpacity
+        accessibilityRole="button"
+        onPress={handleToggle}
+        style={styles.badge}
+      >
+        <Text typography="label_xs_medium" color={Colors.black_01}>
+          {formatSummary(latest)}
+        </Text>
+        {latest ? (
+          <Text typography="description_xs_regular" color={Colors.black_01}>
+            {latest.screen_name}
+          </Text>
+        ) : null}
+      </TouchableOpacity>
+      {isExpanded ? (
+        <View style={styles.panel}>
+          <Text typography="label_xs_medium" color={Colors.black_17}>
+            {`Đã đo ${screenCount} màn hình`}
+          </Text>
+          <TouchableOpacity
+            accessibilityRole="button"
+            onPress={handleRemeasure}
+            style={styles.action}
+          >
+            <Text typography="label_xs_medium" color={Colors.blue_03}>
+              Đo lại
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            accessibilityRole="button"
+            onPress={handleShare}
+            style={styles.action}
+          >
+            <Text typography="label_xs_medium" color={Colors.blue_03}>
+              Share JSON
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            accessibilityRole="button"
+            onPress={handleClear}
+            style={styles.actionOutline}
+          >
+            <Text typography="label_xs_medium" color={Colors.black_17}>
+              Xoá
+            </Text>
+          </TouchableOpacity>
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+export { AdoptionBadge };

package/Application/KitAdoption/AdoptionProbe.tsx

@@ -0,0 +1,145 @@
+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 {
+  FiberLike,
+  KitRegistries,
+  ScreenSnapshot,
+  WalkResult,
+} from './types';
+import {
+  createRegistries,
+  getAppId,
+  getCurrentFiber,
+  walkScreen,
+} from './utils';
+
+type NavigationLike = {
+  addListener?: (event: string, callback: () => void) => () => void;
+};
+
+type ProbeProps = {
+  screenName: string;
+  navigation?: NavigationLike;
+  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;
+
+/** Passes children through with no measurement. Used in release builds. */
+const PassThrough = (props: ProbeProps): React.JSX.Element => (
+  <>{props.children}</>
+);
+
+/**
+ * Dev-only wrapper around a screen. Measures the screen's fiber tree after
+ * the first interactions settle, and again on focus. Release builds use PassThrough.
+ */
+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 {
+    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 {
+    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;
+    try {
+      const self = getCurrentFiber(
+        (this as unknown as { _reactInternals: FiberLike })._reactInternals,
+      );
+      const root = self.child;
+      if (!root) return;
+      result = walkScreen(root, getRegistries(), isProbeFiber);
+    } catch {
+      result = createErrorResult();
+    }
+    this.save(result, startedAt);
+  };
+
+  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 = __DEV__ ? AdoptionProbeDev : PassThrough;
+
+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/constants.ts

@@ -0,0 +1,118 @@
+const SETTLE_MS = 3000;
+const MAX_FIBERS = 20000;
+const SLOT_SCAN_DEPTH = 4;
+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 {
+  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,5 @@
+import { AdoptionBadge } from './AdoptionBadge';
+import { AdoptionProbe } from './AdoptionProbe';
+import { adoptionStore } from './AdoptionStore';
+
+export { AdoptionBadge, AdoptionProbe, adoptionStore };

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 };