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

package/Application/KitAdoption/utils.ts

@@ -0,0 +1,376 @@
+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,
+  TOP_TRANSPARENT_LIMIT,
+} from './constants';
+import {
+  getAuthorFiber,
+  isAppAuthored,
+  isHostDefined,
+} from './Authorship/utils';
+import { collectCellSlots, collectSlotProps, isListCell } from './Slots/utils';
+import type {
+  AdoptionBucket,
+  AdoptionTrackingParams,
+  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 };
+};
+
+/** 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);
+};
+
+/** 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);
+
+/** Status 'dev_bundle' means no fiber was authored by a bundle other than the host's. */
+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 and, in structural
+ * mode, so does every K/R/O fiber; only the app-passed slot descendants are walked on.
+ */
+const countFiber = (
+  fiber: FiberLike,
+  registries: KitRegistries,
+  tally: Tally,
+  stack: WalkEntry[],
+  isStructural: boolean,
+): void => {
+  const name = getTypeName(fiber.type);
+  const kind = classifyFiber(fiber, registries);
+  if (kind === 'transparent') {
+    incrementName(tally.transparent, name);
+    pushChildren(fiber, null, stack);
+    return;
+  }
+  countComponent(tally, kind === 'unit' ? 'K' : kind, name);
+  if (kind !== 'unit' && !isStructural) {
+    pushChildren(fiber, null, stack);
+    return;
+  }
+  const slots = new Set<unknown>();
+  collectSlotProps(fiber.memoizedProps, slots, 0);
+  pushChildren(fiber, slots, 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[],
+  isStructural: boolean,
+): void => {
+  const { fiber, unitSlots } = entry;
+  if (!COUNTED_FIBER_TAGS.includes(fiber.tag)) {
+    pushChildren(fiber, unitSlots, stack);
+    return;
+  }
+  if (unitSlots && !unitSlots.has(fiber.memoizedProps)) {
+    if (isStructural && isListCell(fiber)) collectCellSlots(fiber, unitSlots);
+    pushChildren(fiber, unitSlots, stack);
+    return;
+  }
+  if (!isAppAuthored(getAuthorFiber(fiber))) {
+    pushChildren(fiber, null, stack);
+    return;
+  }
+  tally.appAuthoredSeen = true;
+  countFiber(fiber, registries, tally, stack, isStructural);
+};
+
+/**
+ * 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.
+ * Structural mode (release) treats every counted fiber as a unit and walks only app-passed slots.
+ */
+const walkScreen = (
+  rootFiber: FiberLike,
+  registries: KitRegistries,
+  stopAt?: (fiber: FiberLike) => boolean,
+  maxFibers = MAX_FIBERS,
+  isStructural = !__DEV__,
+): 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, isStructural);
+  }
+  return buildResult(tally, fibers, truncated);
+};
+
+/** True only when the host marks this app as whitelisted for adoption tracking. */
+const isAdoptionTrackingEnabled = (context: unknown): boolean => {
+  if (!isObjectLike(context)) return false;
+  const config = context.designSystemConfig;
+  return isObjectLike(config) && config.isWhiteList === true;
+};
+
+/** Counts as the analytics params of a screen-load event, or undefined unless the walk is ok. */
+const getAdoptionTrackingParams = (
+  result: WalkResult | undefined,
+): AdoptionTrackingParams | undefined => {
+  if (result?.status !== 'ok') return undefined;
+  const { K, R, O } = result.counts;
+  return { num_design_system: K, num_rn: R, num_other: O };
+};
+
+export {
+  classifyFiber,
+  collectSlotProps,
+  createRegistries,
+  getAdoptionTrackingParams,
+  getAppId,
+  getAuthorFiber,
+  getCurrentFiber,
+  getTypeName,
+  isAdoptionTrackingEnabled,
+  isAppAuthored,
+  isHostDefined,
+  unwrapType,
+  walkScreen,
+};

package/Application/Localize.ts

@@ -2,10 +2,6 @@ import { NativeModules } from 'react-native';
 import { LocalizationObject } from './types';
 import defaultLanguage from '../Assets/language.json';
 
-/**
- * String table for kit and feature copy. The language is read once from the
- * native `RNResource` module at construction; Vietnamese is the default.
- */
 class Localize {
   private assets: LocalizationObject;
   private readonly currentLanguage: 'en' | 'vi';
@@ -29,17 +25,14 @@ class Localize {
     return this.assets;
   }
 
-  /** Text for `key` in the current language, or the key itself if missing. */
   translate(key: string) {
     return this.assets[this.currentLanguage]?.[key] || key;
   }
 
-  /** Picks the current-language text of a `{ vi, en }` pair, else its JSON. */
   translateData(data: { vi: string; en: string }) {
     return data[this.currentLanguage] ?? JSON.stringify(data);
   }
 
-  /** Merges extra translations; keys that already exist keep their text. */
   addTranslations(translations: LocalizationObject) {
     this.assets = {
       vi: { ...translations?.vi, ...this.assets.vi },

package/Application/ModalScreen.tsx

@@ -24,13 +24,10 @@ 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';
 
-/**
- * Screen of the `Modal` route: a bottom sheet when pushed by
- * `showBottomSheet`, otherwise a centered popup.
- */
 const ModalScreen: React.FC<any> = props => {
   if (props.route?.params?.isBottomSheet) {
     return <BottomSheet {...props} />;
@@ -38,10 +35,6 @@ const ModalScreen: React.FC<any> = props => {
   return <Modal {...props} />;
 };
 
-/**
- * Centered popup that fades and scales in over a scrim. On foldables it is
- * centered in the modal placement area, at most a popup wide.
- */
 const Modal: React.FC<ModalParams> = props => {
   const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
@@ -58,7 +51,9 @@ const Modal: React.FC<ModalParams> = props => {
   const isDuo = isIPhoneDuo();
   const { isFoldable, placement, popup, scrimOpacity } = useModalLayout();
 
-  // Auto-tracks the popup as displayed on the current screen.
+  /**
+   * Fire auto_popup_displayed tracking event on mount
+   */
   useEffect(() => {
     navigator?.maxApi?.getDataObserver?.('current_screen', (curScreen: any) => {
       context.autoTracking({
@@ -188,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/Navigation.ts

@@ -11,10 +11,6 @@ export const WHITE_LIST = [
   'vn.momo.ekyc',
 ];
 
-/**
- * Screen-level navigation handle given to features; `setOptions` enforces the
- * design system's header rules before applying React Navigation options.
- */
 class Navigation {
   instance: NavigationProp<any>;
   context: any;
@@ -25,33 +21,39 @@ class Navigation {
   }
 
   /**
-   * Drops header overrides the design system forbids: any `headerLeft`, and
-   * render-function `headerRight`/`headerTitle` outside `WHITE_LIST` apps.
+   * navigation options filter by design system rule
+   * @param params
    */
   private filterParams = (params: NavigationOptions) => {
-    const isWhiteListed = WHITE_LIST.includes(this.context?.appId);
-    const rightType = typeof params.headerRight;
-    const titleType = typeof params.headerTitle;
-    const isTitleRenderer = titleType !== 'string' && titleType !== 'object';
-
     if (params.headerLeft) {
       console.warn('headerLeft not allow override render by design system!');
       delete params.headerLeft;
     }
 
-    if (params.headerRight && rightType !== 'object' && !isWhiteListed) {
+    if (
+      params.headerRight &&
+      typeof params.headerRight !== 'object' &&
+      !WHITE_LIST.includes(this.context?.appId)
+    ) {
       console.warn('headerRight not allow type func render by design system!');
       delete params.headerRight;
     }
 
-    if (params.headerTitle && isTitleRenderer && !isWhiteListed) {
+    if (
+      params.headerTitle &&
+      !['string', 'object'].includes(typeof params.headerTitle) &&
+      !WHITE_LIST.includes(this.context?.appId)
+    ) {
       console.warn('headerTitle not allow type func render by design system!');
       delete params.headerTitle;
     }
     return params;
   };
 
-  /** Applies kit `NavigationOptions` to the screen after `filterParams`. */
+  /**
+   * navigation setOptions support props NavigationOptions base on react-navigation options
+   * @param params
+   */
   setOptions = (params: NavigationOptions) => {
     const options = getOptions(this.filterParams(params));
     this.instance.setOptions(options as StackNavigationOptions);

package/Application/NavigationContainer.tsx

@@ -30,13 +30,10 @@ 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();
 
-/**
- * Root of a mini app: safe area, reserved regions and the merged mini app
- * context around the kit's navigator.
- */
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
   screen,
   theme = defaultTheme,
@@ -90,16 +87,13 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
             initialParams={initialParams}
             localize={localize}
           />
+          <AdoptionBadge />
         </MiniAppContext.Provider>
       </ReservedRegionsProvider>
     </SafeAreaProvider>
   );
 };
 
-/**
- * Stack navigator with its `Stack`, `Dialog` and `Modal` routes, under an
- * `ApplicationContext` carrying the navigator, themed fonts and `translate`.
- */
 const Navigation: React.FC<any> = ({
   screen,
   theme = defaultTheme,
@@ -117,10 +111,9 @@ const Navigation: React.FC<any> = ({
   const syncCanGoBack = useNativeCanGoBack();
   const isWhiteList = isWhiteListDesignSystem(context);
   const fontFamily = isWhiteList ? 'MomoTrustSans' : 'SFProText';
-  let navigationFontFamily = 'SFProText';
-  if (isWhiteList) {
-    navigationFontFamily = 'MomoTrustSans-Regular';
-  }
+  const navigationFontFamily = isWhiteList
+    ? 'MomoTrustSans-Regular'
+    : 'SFProText';
   let headerBackground = context?.designSystemConfig?.config?.headerBar;
   let headerGradient = theme.colors?.gradient;
 
@@ -131,9 +124,15 @@ const Navigation: React.FC<any> = ({
     headerGradient = context?.designSystemConfig?.config?.headerGradient;
   }
 
+  /**
+   * inject data for navigator
+   */
   navigator.current.maxApi = maxApi;
 
-  /** Text for a localization key, or the current-language side of `{ vi, en }`. */
+  /**
+   * translate context method
+   * @param data
+   */
   const translate = (data?: string | { vi: string; en: string }) => {
     if (data && typeof data !== 'string') {
       return localize?.translateData(data);
@@ -231,12 +230,12 @@ const Navigation: React.FC<any> = ({
                   backgroundColor: theme.colors.background.default,
                 },
                 headerLeft: (props: any) => <HeaderLeft {...props} floating />,
-                headerBackground: (props: any) => {
-                  return <HeaderBackground {...props} />;
-                },
-                headerRight: (props: any) => {
-                  return <HeaderRight {...props} floating />;
-                },
+                headerBackground: (props: any) => (
+                  <HeaderBackground {...props} />
+                ),
+                headerRight: (props: any) => (
+                  <HeaderRight {...props} floating />
+                ),
                 headerTintColor: Colors.black_17,
                 ...TransitionPresets.ModalTransition,
               }}