@momo-kits/foundation 0.169.7-beta.2 → 0.169.7-beta.4

package/Application/__tests__/KitAdoption.integration.test.tsx

@@ -0,0 +1,253 @@
+jest.unmock('react-native');
+
+/* Native packages are stubbed: the real modules are ESM or need native code under jest. */
+jest.mock('react-native-reanimated', () => {
+  const { View, Text, Image } = require('react-native');
+  const Animated = {
+    View,
+    Text,
+    Image,
+    createAnimatedComponent: (component: unknown) => component,
+  };
+  return {
+    __esModule: true,
+    default: Animated,
+    ...Animated,
+    useSharedValue: (value: unknown) => ({ value }),
+    useAnimatedStyle: () => ({}),
+    useDerivedValue: (fn: () => unknown) => ({ value: fn() }),
+    withTiming: (value: unknown) => value,
+    withSpring: (value: unknown) => value,
+    runOnJS: (fn: unknown) => fn,
+    interpolate: () => 0,
+  };
+});
+jest.mock('react-native-fast-image', () => {
+  const mockReact = require('react');
+  const FastImageStub = (props: Record<string, unknown>) =>
+    mockReact.createElement('FastImage', props);
+  return { __esModule: true, default: FastImageStub };
+});
+jest.mock('react-native-linear-gradient', () => {
+  const mockReact = require('react');
+  const LinearGradientStub = (props: Record<string, unknown>) =>
+    mockReact.createElement('LinearGradient', props);
+  return { __esModule: true, default: LinearGradientStub };
+});
+jest.mock('lottie-react-native', () => {
+  const mockReact = require('react');
+  const LottieStub = () => null;
+  return { __esModule: true, default: mockReact.forwardRef(LottieStub) };
+});
+jest.mock('../../Application', () => ({
+  useComponentId: () => ({ componentId: 'test-id' }),
+}));
+
+import React, { Fragment, type ElementType, type ReactNode } from 'react';
+import {
+  FlatList,
+  Image,
+  Text as RNText,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { act, create, type ReactTestRenderer } from 'react-test-renderer';
+
+import { Button as FoundationButton } from '../../Button';
+import { Text as FoundationText } from '../../Text';
+import {
+  createRegistries,
+  getCurrentFiber,
+  walkScreen,
+} from '../KitAdoption/utils';
+import type { FiberLike, WalkResult } from '../KitAdoption/types';
+
+/**
+ * Production jsx of the React build. Elements made with it carry no
+ * `_debugStack`, the same as mini-app code shipped as a prod bundle. Loaded by
+ * resolved path: the react `exports` map blocks cjs/ under jest.
+ */
+const reactEntry = (
+  require as unknown as { resolve: (id: string) => string }
+).resolve('react');
+const prodJsxRuntime = require(reactEntry.replace(
+  /index\.js$/,
+  'cjs/react-jsx-runtime.production.js',
+)) as {
+  jsx: (
+    type: ElementType,
+    props: Record<string, unknown>,
+  ) => React.ReactElement;
+};
+
+/** Builds an element with the prod jsx runtime, the way a mini-app prod bundle does. */
+const prodJsx = (
+  type: ElementType,
+  props: Record<string, unknown>,
+  ...children: ReactNode[]
+): React.ReactElement => {
+  if (children.length === 0) return prodJsxRuntime.jsx(type, props);
+  return prodJsxRuntime.jsx(type, {
+    ...props,
+    children: children.length > 1 ? children : children[0],
+  });
+};
+
+/** Test-only probe: exposes its fiber so the measurement starts from the real tree. */
+class Probe extends React.Component<{ children?: ReactNode }> {
+  render(): ReactNode {
+    return this.props.children;
+  }
+}
+
+/**
+ * Kit registry built from the components this test renders. The full foundation
+ * index cannot load under jest (navigation and native-only packages), so it is
+ * not used. TouchableOpacity is listed as the foundation re-export, which must not count as kit.
+ */
+const registries = createRegistries(
+  [{ Button: FoundationButton, Text: FoundationText }, { TouchableOpacity }],
+  require('react-native') as Record<string, unknown>,
+);
+
+/** Renders the tree under a Probe and walks the probe's child, as AdoptionProbe does. */
+const measure = (tree: ReactNode, isStructural = false): WalkResult => {
+  let instance: Probe | null = null;
+  let renderer: ReactTestRenderer | undefined;
+  act(() => {
+    renderer = create(
+      <Probe
+        ref={(value: Probe | null) => {
+          instance = value;
+        }}
+      >
+        {tree}
+      </Probe>,
+    );
+  });
+  const fiber = (instance as unknown as { _reactInternals: FiberLike })
+    ._reactInternals;
+  const root = getCurrentFiber(fiber).child;
+  if (!root) throw new Error('probe rendered no child fiber');
+  const result = walkScreen(
+    root,
+    registries,
+    undefined,
+    undefined,
+    isStructural,
+  );
+  act(() => {
+    renderer?.unmount();
+  });
+  return result;
+};
+
+/** Shorthand for the K/R/O triple the demo screen prints. */
+const kro = (result: WalkResult): string =>
+  `K${result.counts.K} R${result.counts.R} O${result.counts.O}`;
+
+describe('KitAdoption integration (prod-built app tree over dev host)', () => {
+  it('a. kit-only tree: kit components counted, their internals not', () => {
+    const result = measure(
+      prodJsx(
+        View,
+        {},
+        prodJsx(FoundationText, {}, 'a'),
+        prodJsx(FoundationButton, { title: 'b' }),
+      ),
+    );
+
+    expect(kro(result)).toBe('K2 R1 O0');
+    expect(result.status).toBe('ok');
+    expect(result.kit).toEqual({ Text: 1, Button: 1 });
+  });
+
+  it('b. app wrapper is transparent, each use of the kit inside it is counted', () => {
+    // Two buttons are siblings, so they sit under one dev root, like a real screen.
+    // The probe walks a single root and not its siblings (see walkScreen).
+    function MyButton(props: { title: string }): React.ReactElement {
+      return prodJsx(FoundationButton, props);
+    }
+    function Screen(): React.ReactElement {
+      return prodJsx(
+        Fragment,
+        {},
+        prodJsx(MyButton, { title: '1' }),
+        prodJsx(MyButton, { title: '2' }),
+      );
+    }
+    const result = measure(<Screen />);
+
+    expect(result.counts.K).toBe(2);
+    expect(kro(result)).toBe('K2 R0 O0');
+    expect(result.top_transparent).toEqual([{ name: 'MyButton', count: 2 }]);
+  });
+
+  it('c. raw react-native primitives written by the app count as R', () => {
+    const result = measure(
+      prodJsx(
+        View,
+        {},
+        prodJsx(RNText, {}, 'x'),
+        prodJsx(Image, { source: { uri: 'https://example.com/a.png' } }),
+        prodJsx(TouchableOpacity, {}),
+      ),
+    );
+
+    expect(kro(result)).toBe('K0 R4 O0');
+  });
+
+  it('d. app child in a kit container counts K, the container internals do not', () => {
+    const result = measure(
+      prodJsx(FoundationText, {}, prodJsx(FoundationText, {}, 'child')),
+    );
+
+    expect(kro(result)).toBe('K2 R0 O0');
+    expect(result.kit).toEqual({ Text: 2 });
+  });
+
+  it('e. FlatList counts R once, each renderItem element counts K', () => {
+    const items = ['one', 'two', 'three'];
+    const result = measure(
+      prodJsx(FlatList, {
+        data: items,
+        keyExtractor: (item: string) => item,
+        renderItem: ({ item }: { item: string }) =>
+          prodJsx(FoundationText, {}, item),
+      }),
+    );
+
+    expect(kro(result)).toBe('K3 R1 O0');
+    expect(result.rn).toEqual({ FlatList: 1 });
+  });
+
+  it('f. foundation re-export of TouchableOpacity counts as R, not K', () => {
+    const result = measure(prodJsx(TouchableOpacity, {}, 'x'));
+
+    expect(kro(result)).toBe('K0 R1 O0');
+  });
+
+  it('g. an all-dev tree is reported as dev_bundle', () => {
+    const result = measure(
+      <View>
+        <RNText>x</RNText>
+      </View>,
+    );
+
+    expect(result.status).toBe('dev_bundle');
+    expect(result.counts).toEqual({ K: 0, R: 0, O: 0 });
+    expect(result.fibers).toBeGreaterThan(0);
+  });
+
+  it('h. structural mode matches dev mode on the FlatList scenario', () => {
+    const tree = (): React.ReactElement =>
+      prodJsx(FlatList, {
+        data: ['one', 'two', 'three'],
+        keyExtractor: (item: string) => item,
+        renderItem: ({ item }: { item: string }) =>
+          prodJsx(FoundationText, {}, item),
+      });
+
+    expect(kro(measure(tree(), true))).toBe(kro(measure(tree())));
+  });
+});

package/Application/__tests__/KitAdoption.test.ts

@@ -0,0 +1,283 @@
+import { createElement, Fragment } from 'react';
+
+import { FIBER_TAG, REACT_MEMO_TYPE } from '../KitAdoption/constants';
+import type { FiberLike } from '../KitAdoption/types';
+import {
+  createRegistries,
+  getCurrentFiber,
+  walkScreen,
+} from '../KitAdoption/utils';
+
+const STACK = 'dev-stack';
+
+const Button = () => null;
+const Card = () => null;
+const Chip = () => null;
+const MyButton = () => null;
+const Plain = () => null;
+const RNView = () => null;
+const Text = () => null;
+const TouchableOpacity = () => null;
+
+const makeFiber = (overrides: Partial<FiberLike> = {}): FiberLike => ({
+  tag: FIBER_TAG.FunctionComponent,
+  type: undefined,
+  child: null,
+  sibling: null,
+  return: null,
+  alternate: null,
+  memoizedProps: {},
+  ...overrides,
+});
+
+/** Sets children of parent (child, sibling, return links) and returns parent. */
+const link = (parent: FiberLike, children: FiberLike[]): FiberLike => {
+  children.forEach((child, index) => {
+    child.return = parent;
+    child.sibling = children[index + 1] ?? null;
+  });
+  parent.child = children[0] ?? null;
+  return parent;
+};
+
+/** Linear chain of plain app fibers, returned from the top. */
+const buildChain = (length: number): FiberLike => {
+  let head = makeFiber({ type: Plain });
+  for (let i = 1; i < length; i += 1) {
+    head = link(makeFiber({ type: Plain }), [head]);
+  }
+  return head;
+};
+
+describe('KitAdoption walkScreen', () => {
+  it('counts a kit component once and skips its host-internal fibers', () => {
+    const internalView = makeFiber({
+      tag: FIBER_TAG.HostComponent,
+      type: 'RCTView',
+      _debugStack: STACK,
+    });
+    const button = link(makeFiber({ type: Button }), [internalView]);
+    const myButton = link(makeFiber({ type: MyButton }), [button]);
+
+    const result = walkScreen(
+      myButton,
+      createRegistries([{ Button }], { View: RNView }),
+    );
+
+    expect(result.counts.K).toBe(1);
+    expect(result.counts.R).toBe(0);
+    expect(result.kit.Button).toBe(1);
+    expect(result.top_transparent).toEqual([{ name: 'MyButton', count: 1 }]);
+    expect(result.status).toBe('ok');
+  });
+
+  it('counts a raw RN View written by the app as R', () => {
+    const result = walkScreen(
+      makeFiber({ type: RNView }),
+      createRegistries([{ Button }], { View: RNView }),
+    );
+
+    expect(result.counts.R).toBe(1);
+    expect(result.counts.K).toBe(0);
+  });
+
+  it('counts an app Text inside a kit Card as K and ignores the Card host view', () => {
+    const cardInternalView = makeFiber({
+      tag: FIBER_TAG.HostComponent,
+      type: 'RCTView',
+      _debugStack: STACK,
+    });
+    const appText = makeFiber({ type: Text });
+    const card = link(makeFiber({ type: Card }), [cardInternalView, appText]);
+
+    const result = walkScreen(
+      card,
+      createRegistries([{ Card, Text: Text }], { Text: Text }),
+    );
+
+    expect(result.counts.K).toBe(2);
+    expect(result.counts.R).toBe(0);
+    expect(result.kit.Card).toBe(1);
+    expect(result.kit.Text).toBe(1);
+  });
+
+  it('counts a lib unit once and only the slot children the app passed in', () => {
+    const slotElement = createElement(Button, { label: 'slot' });
+    const internalButton = makeFiber({ type: Button, memoizedProps: {} });
+    const slotFiber = makeFiber({
+      type: Button,
+      memoizedProps: slotElement.props,
+    });
+    const chip = link(
+      makeFiber({ type: Chip, memoizedProps: { children: slotElement } }),
+      [internalButton, slotFiber],
+    );
+
+    const result = walkScreen(chip, createRegistries([{ Button }], {}));
+
+    expect(result.counts.K).toBe(2);
+    expect(result.kit.Chip).toBe(1);
+    expect(result.kit.Button).toBe(1);
+  });
+
+  it('treats the children of a Fragment passed into a lib unit as slots', () => {
+    const first = createElement(Button, { label: 'first' });
+    const second = createElement(Button, { label: 'second' });
+    const fragment = createElement(Fragment, null, first, second);
+    const chip = link(
+      makeFiber({ type: Chip, memoizedProps: { children: fragment } }),
+      [
+        makeFiber({ type: Button, memoizedProps: {} }),
+        makeFiber({ type: Button, memoizedProps: first.props }),
+        makeFiber({ type: Button, memoizedProps: second.props }),
+      ],
+    );
+
+    const result = walkScreen(chip, createRegistries([{ Button }], {}));
+
+    expect(result.kit.Button).toBe(2);
+    expect(result.counts.K).toBe(3);
+  });
+
+  it('does not count the TouchableOpacity re-export as kit', () => {
+    const registries = createRegistries([{ TouchableOpacity }], {
+      TouchableOpacity,
+    });
+
+    const result = walkScreen(
+      makeFiber({ type: TouchableOpacity }),
+      registries,
+    );
+
+    expect(result.counts.K).toBe(0);
+    expect(result.counts.R).toBe(1);
+  });
+
+  it('reports truncated when the walk exceeds the fiber limit', () => {
+    const result = walkScreen(
+      buildChain(10),
+      createRegistries([], {}),
+      undefined,
+      5,
+    );
+
+    expect(result.truncated).toBe(true);
+    expect(result.status).toBe('truncated');
+    expect(result.fibers).toBe(5);
+  });
+
+  it('reports dev_bundle when every fiber carries a dev stack', () => {
+    const child = makeFiber({
+      tag: FIBER_TAG.HostComponent,
+      type: 'RCTView',
+      _debugStack: STACK,
+    });
+    const root = link(
+      makeFiber({
+        tag: FIBER_TAG.HostComponent,
+        type: 'RCTView',
+        _debugStack: STACK,
+      }),
+      [child],
+    );
+
+    const result = walkScreen(root, createRegistries([{ Button }], {}));
+
+    expect(result.status).toBe('dev_bundle');
+    expect(result.counts).toEqual({ K: 0, R: 0, O: 0 });
+    expect(result.fibers).toBe(2);
+  });
+
+  it('does not count the inner fiber of a host-created memo as app code', () => {
+    const innerView = makeFiber({ type: RNView });
+    const hostMemo = link(
+      makeFiber({
+        tag: FIBER_TAG.MemoComponent,
+        type: { $$typeof: REACT_MEMO_TYPE, type: RNView },
+        _debugStack: STACK,
+      }),
+      [innerView],
+    );
+    const hostKit = link(makeFiber({ type: Button, _debugStack: STACK }), [
+      hostMemo,
+    ]);
+
+    const result = walkScreen(
+      hostKit,
+      createRegistries([{ Button }], { View: RNView }),
+    );
+
+    expect(result.counts.R).toBe(0);
+    expect(result.counts.K).toBe(0);
+  });
+
+  it('counts an app-authored memo wrapping a kit component exactly once', () => {
+    const innerButton = makeFiber({ type: Button });
+    const appMemo = link(
+      makeFiber({
+        tag: FIBER_TAG.MemoComponent,
+        type: { $$typeof: REACT_MEMO_TYPE, type: Button },
+      }),
+      [innerButton],
+    );
+
+    const result = walkScreen(appMemo, createRegistries([{ Button }], {}));
+
+    expect(result.counts.K).toBe(1);
+    expect(result.kit.Button).toBe(1);
+  });
+  it('counts a kit element created by a mini-app bundle frame but not host-created children', () => {
+    const appStack = {
+      stack: [
+        'Error: react-stack-top-frame',
+        '    at anonymous (http://localhost:8081/index.bundle:1:2)',
+        '    at Tab (address at file:///x/Documents/apps/vn.momo.billpay/ios/a.bundle:1:2)',
+        '    at react-stack-bottom-frame (http://localhost:8081/index.bundle:1:2)',
+      ].join('\n'),
+    };
+    const hostStack = {
+      stack: [
+        'Error: react-stack-top-frame',
+        '    at createElement (/repo/node_modules/react/index.js:1:1)',
+        '    at Text (/repo/src/foundations/Text/index.tsx:10:5)',
+        '    at react-stack-bottom-frame (/repo/node_modules/react/index.js:1:1)',
+      ].join('\n'),
+    };
+    const inner = makeFiber({ type: Plain, _debugStack: hostStack });
+    const text = link(makeFiber({ type: Text, _debugStack: appStack }), [
+      inner,
+    ]);
+
+    const result = walkScreen(text, createRegistries([{ Text }], {}));
+
+    expect(result.counts).toEqual({ K: 1, R: 0, O: 0 });
+    expect(result.kit.Text).toBe(1);
+  });
+});
+
+describe('KitAdoption getCurrentFiber', () => {
+  it('returns the alternate when the fiber hangs off a stale HostRoot', () => {
+    const alternate = makeFiber({ type: Plain });
+    const fiber = makeFiber({ type: Plain, alternate });
+    const committedRoot = makeFiber({ tag: FIBER_TAG.HostRoot });
+    link(
+      makeFiber({
+        tag: FIBER_TAG.HostRoot,
+        stateNode: { current: committedRoot },
+      }),
+      [fiber],
+    );
+
+    expect(getCurrentFiber(fiber)).toBe(alternate);
+  });
+
+  it('returns the fiber itself when its HostRoot is the committed one', () => {
+    const alternate = makeFiber({ type: Plain });
+    const fiber = makeFiber({ type: Plain, alternate });
+    const hostRoot = makeFiber({ tag: FIBER_TAG.HostRoot });
+    link(hostRoot, [fiber]);
+    hostRoot.stateNode = { current: hostRoot };
+
+    expect(getCurrentFiber(fiber)).toBe(fiber);
+  });
+});

package/Application/__tests__/KitAdoptionAuthorship.test.ts

@@ -0,0 +1,132 @@
+import {
+  getCreatorSource,
+  getSourceKey,
+  isAppAuthored,
+  parseFrameLocation,
+} from '../KitAdoption/Authorship/utils';
+import type { FiberLike } from '../KitAdoption/types';
+
+const FACTORY =
+  '    at anonymous (http://localhost:8081/index.bundle?platform=ios:221225:88)';
+const BOTTOM =
+  '    at react-stack-bottom-frame (http://localhost:8081/index.bundle?platform=ios:195108:33)';
+const APP_DIR = 'file:///Users/x/Library/Documents/apps/vn.momo.billpay/ios';
+const BILLPAY_STACK = [
+  'Error: react-stack-top-frame',
+  FACTORY,
+  `    at BillPaymentTab (address at ${APP_DIR}/MainGroup.chunk.bundle:1:52311)`,
+  BOTTOM,
+  '    at renderWithHooks (http://localhost:8081/index.bundle?platform=ios:188891:42)',
+].join('\n');
+const KIT_STACK = [
+  'Error: react-stack-top-frame',
+  '    at anonymous (http://localhost:8081/index.bundle?platform=ios:220604:93)',
+  '    at renderTitle (http://localhost:8081/index.bundle?platform=ios:290576:50)',
+  '    at Button (http://localhost:8081/index.bundle?platform=ios:290744:32)',
+  BOTTOM,
+].join('\n');
+const HOST_PATH_STACK = [
+  'Error: react-stack-top-frame',
+  '    at createElement (/repo/node_modules/react/index.js:1:1)',
+  '    at Button (/repo/src/foundations/Button/index.tsx:10:5)',
+  BOTTOM,
+].join('\n');
+
+const makeFiber = (debugStack?: unknown): FiberLike => ({
+  tag: 0,
+  type: undefined,
+  _debugStack: debugStack,
+});
+
+describe('getSourceKey', () => {
+  it('returns the origin for http urls', () => {
+    expect(getSourceKey('http://localhost:8081/index.bundle?x=1:2:3')).toBe(
+      'http://localhost:8081',
+    );
+  });
+
+  it('returns the directory for file urls', () => {
+    expect(getSourceKey('file:///a/b/c.bundle:1:2')).toBe('file:///a/b');
+  });
+
+  it('returns local for bare paths', () => {
+    expect(getSourceKey('/repo/src/a.ts:1:2')).toBe('local');
+  });
+});
+
+describe('parseFrameLocation', () => {
+  it('parses the three frame shapes', () => {
+    expect(parseFrameLocation('    at fn (http://h:1/a.js:1:2)')).toBe(
+      'http://h:1/a.js:1:2',
+    );
+    expect(
+      parseFrameLocation('    at fn (address at file:///a/b.js:1:2)'),
+    ).toBe('file:///a/b.js:1:2');
+    expect(parseFrameLocation('    at http://h:1/a.js:1:2')).toBe(
+      'http://h:1/a.js:1:2',
+    );
+  });
+});
+
+describe('getCreatorSource', () => {
+  it('returns the mini-app directory for an app-created element', () => {
+    expect(getCreatorSource({ stack: BILLPAY_STACK })).toBe(APP_DIR);
+  });
+
+  it('returns the host origin for a kit-created element', () => {
+    expect(getCreatorSource({ stack: KIT_STACK })).toBe(
+      'http://localhost:8081',
+    );
+  });
+
+  it('skips a jsxDEV wrapper frame', () => {
+    const stack = [
+      'Error: react-stack-top-frame',
+      FACTORY,
+      '    at jsxDEV (http://localhost:8081/index.bundle:1:2)',
+      `    at Screen (address at ${APP_DIR}/a.bundle:1:2)`,
+      BOTTOM,
+    ].join('\n');
+    expect(getCreatorSource({ stack })).toBe(APP_DIR);
+  });
+
+  it('skips a native frame', () => {
+    const stack = [
+      'Error: react-stack-top-frame',
+      FACTORY,
+      '    at apply (native)',
+      `    at Screen (address at ${APP_DIR}/a.bundle:1:2)`,
+      BOTTOM,
+    ].join('\n');
+    expect(getCreatorSource({ stack })).toBe(APP_DIR);
+  });
+
+  it('returns undefined without a bottom marker', () => {
+    const stack = ['Error: x', FACTORY].join('\n');
+    expect(getCreatorSource({ stack })).toBeUndefined();
+  });
+
+  it('returns undefined for non-error and string values', () => {
+    expect(getCreatorSource('dev-stack')).toBeUndefined();
+    expect(getCreatorSource(42)).toBeUndefined();
+    expect(getCreatorSource(null)).toBeUndefined();
+  });
+});
+
+describe('isAppAuthored', () => {
+  it('is true without a debug stack', () => {
+    expect(isAppAuthored(makeFiber())).toBe(true);
+  });
+
+  it('is true when the creator frame is in another bundle', () => {
+    expect(isAppAuthored(makeFiber({ stack: BILLPAY_STACK }))).toBe(true);
+  });
+
+  it('is false when the creator frame is a host source path', () => {
+    expect(isAppAuthored(makeFiber({ stack: HOST_PATH_STACK }))).toBe(false);
+  });
+
+  it('is false for an unparseable stack', () => {
+    expect(isAppAuthored(makeFiber('dev-stack'))).toBe(false);
+  });
+});