mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Sebastian MarkbågeandGitHub
f33a6b69c6
This implements the concept of a DEV-only "owner" for Server Components. The owner concept isn't really super useful. We barely use it anymore, but we do have it as a concept in DevTools in a couple of cases so this adds it for parity. However, this is mainly interesting because it could be used to wire up future owner-based stacks. I do this by outlining the DebugInfo for a Server Component (ReactComponentInfo). Then I just rely on Flight deduping to refer to that. I refer to the same thing by referential equality so that we can associate a Server Component parent in DebugInfo with an owner. If you suspend and replay a Server Component, we have to restore the same owner. To do that, I did a little ugly hack and stashed it on the thenable state object. Felt unnecessarily complicated to add a stateful wrapper for this one dev-only case. The owner could really be anything since it could be coming from a different implementation. Because this is the first time we have an owner other than Fiber, I have to fix up a bunch of places that assumes Fiber. I mainly did the `typeof owner.tag === 'number'` to assume it's a Fiber for now. This also doesn't actually add it to DevTools / RN Inspector yet. I just ignore them there for now. Because Server Components can be async the owner isn't tracked after an await. We need per-component AsyncLocalStorage for that. This can be done in a follow up.
63 lines
1.5 KiB
JavaScript
63 lines
1.5 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
*/
|
|
|
|
import {
|
|
describeBuiltInComponentFrame,
|
|
describeFunctionComponentFrame,
|
|
describeClassComponentFrame,
|
|
} from 'shared/ReactComponentStackFrame';
|
|
|
|
// DEV-only reverse linked list representing the current component stack
|
|
type BuiltInComponentStackNode = {
|
|
tag: 0,
|
|
parent: null | ComponentStackNode,
|
|
type: string,
|
|
};
|
|
type FunctionComponentStackNode = {
|
|
tag: 1,
|
|
parent: null | ComponentStackNode,
|
|
type: Function,
|
|
};
|
|
type ClassComponentStackNode = {
|
|
tag: 2,
|
|
parent: null | ComponentStackNode,
|
|
type: Function,
|
|
};
|
|
export type ComponentStackNode =
|
|
| BuiltInComponentStackNode
|
|
| FunctionComponentStackNode
|
|
| ClassComponentStackNode;
|
|
|
|
export function getStackByComponentStackNode(
|
|
componentStack: ComponentStackNode,
|
|
): string {
|
|
try {
|
|
let info = '';
|
|
let node: ComponentStackNode = componentStack;
|
|
do {
|
|
switch (node.tag) {
|
|
case 0:
|
|
info += describeBuiltInComponentFrame(node.type);
|
|
break;
|
|
case 1:
|
|
info += describeFunctionComponentFrame(node.type);
|
|
break;
|
|
case 2:
|
|
info += describeClassComponentFrame(node.type);
|
|
break;
|
|
}
|
|
// $FlowFixMe[incompatible-type] we bail out when we get a null
|
|
node = node.parent;
|
|
} while (node);
|
|
return info;
|
|
} catch (x) {
|
|
return '\nError generating stack: ' + x.message + '\n' + x.stack;
|
|
}
|
|
}
|