Support enter & leave handlers for `traverseFibers`

[Asuka109]

So that we can implement complex traversal logic, such as analyzing the route structure of React Router. It would look like this:

instrument(
  secure({
    onCommitFiberRoot(rendererID, root, _priority) {
      const returns: Fiber[] = [];
      traverseFiber(root.current, {
        enter: fiber => {
          // Do something with the fiber and returns.
          // ...

          returns.unshift(fiber);
        },
        leave: fiber => {
          returns.shift();
        }
      });
    }
  })
);

Or you can just assign it to me. I can take care of it.

[aidenybai]

hmm, is it not already possible with the current API? I can do something like:

traverseFiber(root.current, () => {
  returns.unshift(fiber);

  let ret = value

   returns.shift();

return value
});

[Asuka109]

@aidenybai I've done the modifications in #21. I will work on a gist to explain why we may need the enter & leave handlers.

[Asuka109]

Hi @aidenybai, I have created a case to show how to use traverseFiber for analyzing the route structure of React Router's data router. I believe this can explain why we need a traverseFiber with enter and leave handlers. This is only a showcase. I am using the snippet to analyze the router of my private application. Would it be acceptable to put those utilities in a sub-module as part of bippy?

bippy/packages/bippy/src/test/core/fiber.test.tsx

Lines 512 to 555 in f041a5b

	const returns: Fiber[] = [];
	const routeFibers: Fiber[] = [];
	let routerData: RouterData | null = null;
	traverseFiber(root.current, {
	enter(fiber) {
	if (isRouterProviderFiber(fiber)) {
	const router = fiber.memoizedProps.router as DataRouter;
	const matches = router.state.matches.map(match => ({ ...match }));
	routerData = { fiber, router, matches }
	}
	if (isRenderedRouteFiber(fiber))
	routeFibers.unshift(fiber);
	returns.unshift(fiber);
	},
	leave(fiber) {
	if (isRenderedRouteFiber(fiber))
	routeFibers.shift();
	returns.shift();
	if (fiber === routerData?.fiber) {
	cb(routerData);
	routerData = null;
	}
	if (routerData && fiber.stateNode instanceof Element) {
	for (let i = 0; i < routeFibers.length; i++) {
	routerData.matches[i].element = fiber.stateNode;
	}
	}
	},
	});
	expect(cb).toHaveBeenCalledTimes(1);
	const data = cb.mock.lastCall?.[0] as RouterData;
	expect(data).toEqual(expect.objectContaining({
	fiber: expect.any(Object),
	router: expect.any(Object),
	matches: expect.arrayContaining([
	expect.objectContaining({ pathname: '/', element: getByTestId('root-layout') }),
	expect.objectContaining({ pathname: '/user', element: getByTestId('user-layout') }),
	expect.objectContaining({ pathname: '/user/123', element: getByTestId('user-detail-page') }),
	])
	}))

[Asuka109]

@aidenybai Hi! Just a friendly reminder. Feel free to let me know if there’s anything that needs to be changed in this PR.