@keepsnappy/react-native 0.0.0-stage → 0.1.0-alpha.12

package/js/sdk/profile-export.ts

@@ -0,0 +1,257 @@
+// A React DevTools profiler export (version 5, the shape TraceSift's
+// parseReactExport reads) built from our own commit walk, one per window.
+// Fibers get ids on first sight (shared with their alternate); a fiber is
+// ADDed to the window's tree the first time it renders inside the window,
+// under its nearest component ancestor already in the tree, else the root.
+// snapshots stay empty: every rendered id is named by an ADD operation.
+
+import {
+  CLASS_COMPONENT,
+  type Fiber,
+  FORWARD_REF,
+  isComponentTag,
+  SIMPLE_MEMO_COMPONENT,
+} from './fiber';
+import type { UpdateCause } from './profile';
+
+const ROOT_ID = 1;
+const RENDERER_ID = 1;
+const OP_ADD = 1;
+const TYPE_CLASS = 1;
+const TYPE_FUNCTION = 5;
+const TYPE_FORWARD_REF = 6;
+const TYPE_MEMO = 8;
+const TYPE_ROOT = 11;
+
+const ids = new WeakMap<object, number>();
+let nextId = ROOT_ID + 1;
+
+export const fiberId = (fiber: Fiber): number => {
+  const known = ids.get(fiber) ?? (fiber.alternate ? ids.get(fiber.alternate) : undefined);
+  if (known !== undefined) {
+    ids.set(fiber, known);
+    return known;
+  }
+  const id = nextId++;
+  ids.set(fiber, id);
+  if (fiber.alternate) {
+    ids.set(fiber.alternate, id);
+  }
+  return id;
+};
+
+const elementType = (tag: number) =>
+  tag === CLASS_COMPONENT
+    ? TYPE_CLASS
+    : tag === FORWARD_REF
+      ? TYPE_FORWARD_REF
+      : tag === SIMPLE_MEMO_COMPONENT
+        ? TYPE_MEMO
+        : TYPE_FUNCTION;
+
+export interface ExportFiber {
+  id: number;
+  name: string;
+  type: number;
+  // Component ancestors, nearest first.
+  ancestors: number[];
+  actualMs: number;
+  selfMs: number;
+  cause: UpdateCause;
+}
+
+export interface ExportCommit {
+  t: number;
+  durationMs: number;
+  updaters: string[] | null;
+  // What caused the commit (causes.ts `describeCauses`).
+  causes: string[];
+  // Timer-carried (`timer`, `timer-net`) or null; the backend compares attribution approaches from it.
+  carrier: 'timer' | 'timer-net' | null;
+  // A store write a carried tick made, moved to a newer action (`touch#3>touch#9`), or null.
+  store: string | null;
+  // The commit without the store move, when it had one: what the registering code's causes and carrier were.
+  task: { causes: string[]; carrier: 'timer' | 'timer-net' | null } | null;
+  // Commit-stream facts (stream.ts): the commit's update parts, and the render time with null kept.
+  facts?: {
+    seq: number;
+    renderMs: number | null;
+    unknown: boolean;
+    // [root ids, timer run id, store write id] per part.
+    parts: [number[], number | null, number | null][];
+    more: number;
+    fibers: boolean;
+  };
+  fibers: ExportFiber[];
+}
+
+const MAX_ANCESTORS = 64;
+
+// A fiber's component ancestors, nearest first, up to MAX_ANCESTORS: the walk from its parent up.
+export const ancestorsOf = (fiber: Fiber): number[] => {
+  const ancestors: number[] = [];
+  for (
+    let f = fiber.return;
+    f !== null && ancestors.length < MAX_ANCESTORS;
+    f = f.return
+  ) {
+    if (isComponentTag(f.tag)) {
+      ancestors.push(fiberId(f));
+    }
+  }
+  return ancestors;
+};
+
+// The same lists for every fiber of one commit, without walking the whole path each time: the component fibers at and
+// above a fiber are its own (when it is a component) in front of its parent's, so each is built once from its parent's.
+// Ids are taken nearest first, the order ancestorsOf gives them out (fiberId numbers a fiber when it first sees it), and
+// a list's ids are kept for the fibers that share it. Lists are shared, so they are read-only.
+export const createAncestorPaths = () => {
+  const known = new Map<Fiber, Fiber[]>();
+  const ids = new Map<Fiber[], number[]>();
+  const through = (fiber: Fiber | null): Fiber[] => {
+    const pending: Fiber[] = [];
+    let above: Fiber[] = [];
+    for (let f = fiber; f !== null; f = f.return) {
+      const hit = known.get(f);
+      if (hit) {
+        above = hit;
+        break;
+      }
+      pending.push(f);
+    }
+    for (let i = pending.length - 1; i >= 0; i--) {
+      const f = pending[i] as Fiber;
+      if (isComponentTag(f.tag)) {
+        above = [f, ...(above.length < MAX_ANCESTORS ? above : above.slice(0, MAX_ANCESTORS - 1))];
+      }
+      known.set(f, above);
+    }
+    return above;
+  };
+  return (fiber: Fiber): number[] => {
+    const list = through(fiber.return);
+    let out = ids.get(list);
+    if (!out) {
+      out = list.map(fiberId);
+      ids.set(list, out);
+    }
+    return out;
+  };
+};
+
+export const exportFiber = (
+  fiber: Fiber,
+  name: string,
+  cause: UpdateCause,
+  actualMs: number | null,
+  selfMs: number | null,
+  ancestors: number[] = ancestorsOf(fiber),
+): ExportFiber => {
+  return {
+    id: fiberId(fiber),
+    name,
+    type: elementType(fiber.tag),
+    ancestors,
+    actualMs: actualMs ?? 0,
+    selfMs: selfMs ?? 0,
+    cause,
+  };
+};
+
+const encodeString = (value: string) => {
+  const codes: number[] = [];
+  for (const char of value) {
+    codes.push(char.codePointAt(0) as number);
+  }
+  return [codes.length, ...codes];
+};
+
+const changeDescription = (cause: UpdateCause) => ({
+  context: cause.context,
+  didHooksChange: (cause.hooks?.length ?? 0) > 0,
+  hooks: cause.mount ? null : (cause.hooks ?? []),
+  isFirstMount: cause.mount,
+  props: cause.mount ? null : (cause.props ?? []),
+  state: cause.mount ? null : cause.state,
+});
+
+export interface ReactExport {
+  version: 5;
+  source: 'perflab';
+  captureStart: { clock: 'perf-now-ms'; t0: number };
+  dataForRoots: {
+    rootID: number;
+    displayName: string;
+    snapshots: never[];
+    initialTreeBaseDurations: never[];
+    operations: number[][];
+    commitData: Record<string, unknown>[];
+  }[];
+}
+
+// Builds the export for one window from the commits that fell into it.
+export const buildReactExport = (t0: number, commits: ExportCommit[]): ReactExport => {
+  const added = new Set<number>([ROOT_ID]);
+  const operations: number[][] = [];
+  const commitData: Record<string, unknown>[] = [];
+  commits.forEach((commit, index) => {
+    const strings: string[] = [];
+    const ops: number[] = [];
+    if (index === 0) {
+      ops.push(OP_ADD, ROOT_ID, TYPE_ROOT, 0, 0, 0, 0);
+    }
+    for (const fiber of commit.fibers) {
+      if (added.has(fiber.id)) {
+        continue;
+      }
+      const parent = fiber.ancestors.find(id => added.has(id)) ?? ROOT_ID;
+      let nameIndex = strings.indexOf(fiber.name) + 1;
+      if (nameIndex === 0) {
+        strings.push(fiber.name);
+        nameIndex = strings.length;
+      }
+      ops.push(OP_ADD, fiber.id, fiber.type, parent, 0, nameIndex, 0);
+      added.add(fiber.id);
+    }
+    const table = strings.flatMap(encodeString);
+    operations.push([RENDERER_ID, ROOT_ID, table.length, ...table, ...ops]);
+    commitData.push({
+      changeDescriptions: commit.fibers.map(f => [f.id, changeDescription(f.cause)]),
+      duration: commit.durationMs,
+      effectDuration: null,
+      fiberActualDurations: commit.fibers.map(f => [f.id, f.actualMs]),
+      fiberSelfDurations: commit.fibers.map(f => [f.id, f.selfMs]),
+      passiveEffectDuration: null,
+      priorityLevel: null,
+      timestamp: Math.max(0, commit.t - t0),
+      perflabCauses: commit.causes,
+      perflabCarrier: commit.carrier,
+      perflabStore: commit.store,
+      perflabTask: commit.task,
+      ...(commit.facts ? { perflabFacts: commit.facts } : {}),
+      updaters: (commit.updaters ?? []).map(displayName => ({
+        displayName,
+        hocDisplayNames: null,
+        compiledWithForget: false,
+        key: null,
+        type: TYPE_FUNCTION,
+      })),
+    });
+  });
+  return {
+    version: 5,
+    source: 'perflab',
+    captureStart: { clock: 'perf-now-ms', t0 },
+    dataForRoots: [
+      {
+        rootID: ROOT_ID,
+        displayName: 'Root',
+        snapshots: [],
+        initialTreeBaseDurations: [],
+        operations,
+        commitData,
+      },
+    ],
+  };
+};