@momo-kits/foundation 0.169.7-beta.1 → 0.169.7-beta.11

package/Application/Components/useToolkitActions.tsx

@@ -15,8 +15,7 @@ type ToolkitActionsParams = {
 };
 
 /**
- * State and handlers behind the header toolkit: the favorite shortcut (kept in sync
- * with the home), single tool or "more" shortcut, help center and close.
+ * state and handlers behind the header toolkit buttons
  */
 const useToolkitActions = ({
   preventClose,
@@ -32,15 +31,20 @@ const useToolkitActions = ({
   const [isFavorite, setIsFavorite] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState(false);
 
-  const checkAppIsFavorite = useCallback(() => {
-    return navigator?.maxApi?.dispatchFunction?.(
-      'isFavoriteApp',
-      { code: context?.code },
-      (result: boolean) => {
-        setIsFavorite(result);
-      },
-    );
-  }, [context?.code, navigator?.maxApi]);
+  /**
+   * check app is favorite
+   */
+  const checkAppIsFavorite = useCallback(
+    () =>
+      navigator?.maxApi?.dispatchFunction?.(
+        'isFavoriteApp',
+        { code: context?.code },
+        (result: boolean) => {
+          setIsFavorite(result);
+        },
+      ),
+    [context?.code, navigator?.maxApi],
+  );
 
   useEffect(() => {
     if (useShortcut) {
@@ -71,6 +75,9 @@ const useToolkitActions = ({
     }
   };
 
+  /**
+   * close navigation container
+   */
   const onClose = () => {
     const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
     context?.autoTracking?.({
@@ -100,6 +107,9 @@ const useToolkitActions = ({
     }
   };
 
+  /**
+   * on press shortcut
+   */
   const onPressShortcut = () => {
     const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
     const expected = !isFavorite;
@@ -129,6 +139,9 @@ const useToolkitActions = ({
     }, 1000);
   };
 
+  /**
+   * on press help center
+   */
   const onPressHelpCenter = () => {
     const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
     context?.autoTracking?.({
@@ -141,6 +154,9 @@ const useToolkitActions = ({
     navigator?.maxApi?.dispatchFunction?.('showHelpCenter', context);
   };
 
+  /**
+   * on press icon more
+   */
   const onPressIconMore = () => {
     const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
     context?.autoTracking?.({
@@ -184,10 +200,9 @@ const useToolkitActions = ({
     iconShortcut = 'navigation_more_icon';
     shortcutOnPress = onPressIconMore;
   } else if (isHaveOneTool) {
-    const singleToolGroup = tools.find(
+    const singleTool = tools.find(
       (group: ToolGroup) => group?.items?.length === 1,
-    );
-    const singleTool = singleToolGroup?.items[0];
+    )?.items[0];
     iconShortcut = singleTool?.icon;
     shortcutOnPress = () => {
       singleTool?.onPress?.();
@@ -201,9 +216,9 @@ const useToolkitActions = ({
     };
   }
 
-  const showBadge = tools.some((group: ToolGroup) => {
-    return group?.items?.some?.(tool => tool?.showBadge);
-  });
+  const showBadge = tools.some((group: ToolGroup) =>
+    group?.items?.some?.(tool => tool?.showBadge),
+  );
 
   return {
     isLoading,

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