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

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

@@ -85,6 +85,17 @@ const COUNTED_FIBER_TAGS: number[] = [
 
 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');
 
@@ -94,9 +105,12 @@ export {
   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,

package/Application/KitAdoption/utils.ts

@@ -13,6 +13,11 @@ import {
   SLOT_SCAN_DEPTH,
   TOP_TRANSPARENT_LIMIT,
 } from './constants';
+import {
+  getAuthorFiber,
+  isAppAuthored,
+  isHostDefined,
+} from './Authorship/utils';
 import type {
   AdoptionBucket,
   FiberLike,
@@ -156,30 +161,6 @@ const createRegistries = (
   return { kit, rn };
 };
 
-/**
- * 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, i.e. it was created by mini-app code
- * (prod bundle) rather than by the host's dev build.
- */
-const isAppAuthored = (fiber: FiberLike): boolean => !fiber._debugStack;
-
-/**
- * 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;
-};
-
 /** 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;
@@ -259,6 +240,7 @@ const topEntries = (
     .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,

package/Application/__tests__/KitAdoption.test.ts

@@ -198,10 +198,9 @@ describe('KitAdoption walkScreen', () => {
       }),
       [innerView],
     );
-    const hostKit = link(
-      makeFiber({ type: Button, _debugStack: STACK }),
-      [hostMemo],
-    );
+    const hostKit = link(makeFiber({ type: Button, _debugStack: STACK }), [
+      hostMemo,
+    ]);
 
     const result = walkScreen(
       hostKit,
@@ -222,14 +221,38 @@ describe('KitAdoption walkScreen', () => {
       [innerButton],
     );
 
-    const result = walkScreen(
-      appMemo,
-      createRegistries([{ Button }], {}),
-    );
+    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', () => {

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.169.4-beta.8",
+    "version": "0.169.5-beta.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},