Skip to content

Commit 49496d4

Browse files
sebmarkbagehoxyq
sebmarkbage
and
hoxyq
authored
[DevTools] Support Server Components in Tree (#30684)
This adds VirtualInstances to the tree. Each Fiber has a list of its parent Server Components in `_debugInfo`. The algorithm is that when we enter a set of fibers, we actually traverse level 0 of all the `_debugInfo` in each fiber. Then level 1 of each `_debugInfo` and so on. It would be simpler if `_debugInfo` only contained Server Component since then we could just look at the index in the array but it actually contains other data as well which leads to multiple passes but we don't expect it to have a lot of levels before hitting a reified fiber. Finally when we hit the end a traverse the fiber itself. This lets us match consecutive `ReactComponentInfo` that are all the same at the same level. This creates a single VirtualInstance for each sequence. This lets the same Server Component instance that's a parent to multiple children appear as a single Instance instead of one per Fiber. Since a Server Component's result can be rendered in more than one place there's not a 1:1 mapping though. If it is in different parents or if the sequence is interrupted, then it gets split into two different instances with the same `ReactComponentInfo` data. The real interesting case is what happens during updates because this algorithm means that a Fiber can become reparented during an update to end up in a different VirtualInstance. The ideal would maybe be that the frontend could deal with this reparenting but instead I basically just unmount the previous instance (and its children) and mount a new instance which leads to some interesting scenarios. This is inline with the strategy I was intending to pursue anyway where instances are reconciled against the previous children of the same parent instead of the `fiberToFiberInstance` map - which would let us get rid of that map. In that case the model is resilient to Fiber being in more than one place at a time. However this unmount/remount does mean that we can lose selection when this happens. We could maybe do something like using the tracked path like I did for component filters. Ideally it's a weird edge case though because you'd typically not have it. The main case that it happens now is for reorders of list of server components. In that case basically all the children move between server components while the server components themselves stay in place. We should really include the key in server components so that we can reconcile them using the key to handle reorders which would solve the common case anyway. I convert the name to the `Env(Name)` pattern which allows the Environment Name to be used as a badge. <img width="1105" alt="Screenshot 2024-08-13 at 9 55 29 PM" src="https://github.com/user-attachments/assets/323c20ba-b655-4ee8-84fa-8233f55d2999"> (Screenshot is with #30667. I haven't tried it with the alternative fix.) --------- Co-authored-by: Ruslan Lesiutin <rdlesyutin@gmail.com>
1 parent 0ad0fac commit 49496d4

5 files changed

Lines changed: 912 additions & 86 deletions

File tree

‎packages/react-devtools-shared/src/__tests__/inspectedElement-test.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3150,4 +3150,35 @@ describe('InspectedElement', () => {
31503150
<Child> ⚠
31513151
`);
31523152
});
3153+
3154+
// @reactVersion > 18.2
3155+
it('should inspect server components', async () => {
3156+
const ChildPromise = Promise.resolve(<div />);
3157+
ChildPromise._debugInfo = [
3158+
{
3159+
name: 'ServerComponent',
3160+
env: 'Server',
3161+
owner: null,
3162+
},
3163+
];
3164+
const Parent = () => ChildPromise;
3165+
3166+
await utils.actAsync(() => {
3167+
modernRender(<Parent />);
3168+
});
3169+
3170+
const inspectedElement = await inspectElementAtIndex(1);
3171+
expect(inspectedElement).toMatchInlineSnapshot(`
3172+
{
3173+
"context": null,
3174+
"events": undefined,
3175+
"hooks": null,
3176+
"id": 3,
3177+
"owners": null,
3178+
"props": null,
3179+
"rootType": "createRoot()",
3180+
"state": null,
3181+
}
3182+
`);
3183+
});
31533184
});

‎packages/react-devtools-shared/src/__tests__/store-test.js‎

Lines changed: 276 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2212,4 +2212,280 @@ describe('Store', () => {
22122212
`);
22132213
});
22142214
});
2215+
2216+
// @reactVersion > 18.2
2217+
it('does not show server components without any children reified children', async () => {
2218+
// A Server Component that doesn't render into anything on the client doesn't show up.
2219+
const ServerPromise = Promise.resolve(null);
2220+
ServerPromise._debugInfo = [
2221+
{
2222+
name: 'ServerComponent',
2223+
env: 'Server',
2224+
owner: null,
2225+
},
2226+
];
2227+
const App = () => ServerPromise;
2228+
2229+
await actAsync(() => render(<App />));
2230+
expect(store).toMatchInlineSnapshot(`
2231+
[root]
2232+
<App>
2233+
`);
2234+
});
2235+
2236+
// @reactVersion > 18.2
2237+
it('does show a server component that renders into a filtered node', async () => {
2238+
const ServerPromise = Promise.resolve(<div />);
2239+
ServerPromise._debugInfo = [
2240+
{
2241+
name: 'ServerComponent',
2242+
env: 'Server',
2243+
owner: null,
2244+
},
2245+
];
2246+
const App = () => ServerPromise;
2247+
2248+
await actAsync(() => render(<App />));
2249+
expect(store).toMatchInlineSnapshot(`
2250+
[root]
2251+
▾ <App>
2252+
<ServerComponent> [Server]
2253+
`);
2254+
});
2255+
2256+
it('can render the same server component twice', async () => {
2257+
function ClientComponent() {
2258+
return <div />;
2259+
}
2260+
const ServerPromise = Promise.resolve(<ClientComponent />);
2261+
ServerPromise._debugInfo = [
2262+
{
2263+
name: 'ServerComponent',
2264+
env: 'Server',
2265+
owner: null,
2266+
},
2267+
];
2268+
const App = () => (
2269+
<>
2270+
{ServerPromise}
2271+
<ClientComponent />
2272+
{ServerPromise}
2273+
</>
2274+
);
2275+
2276+
await actAsync(() => render(<App />));
2277+
expect(store).toMatchInlineSnapshot(`
2278+
[root]
2279+
▾ <App>
2280+
▾ <ServerComponent> [Server]
2281+
<ClientComponent>
2282+
<ClientComponent>
2283+
▾ <ServerComponent> [Server]
2284+
<ClientComponent>
2285+
`);
2286+
});
2287+
2288+
// @reactVersion > 18.2
2289+
it('collapses multiple parent server components into one', async () => {
2290+
function ClientComponent() {
2291+
return <div />;
2292+
}
2293+
const ServerPromise = Promise.resolve(<ClientComponent />);
2294+
ServerPromise._debugInfo = [
2295+
{
2296+
name: 'ServerComponent',
2297+
env: 'Server',
2298+
owner: null,
2299+
},
2300+
];
2301+
const ServerPromise2 = Promise.resolve(<ClientComponent />);
2302+
ServerPromise2._debugInfo = [
2303+
{
2304+
name: 'ServerComponent2',
2305+
env: 'Server',
2306+
owner: null,
2307+
},
2308+
];
2309+
const App = ({initial}) => (
2310+
<>
2311+
{ServerPromise}
2312+
{ServerPromise}
2313+
{ServerPromise2}
2314+
{initial ? null : ServerPromise2}
2315+
</>
2316+
);
2317+
2318+
await actAsync(() => render(<App initial={true} />));
2319+
expect(store).toMatchInlineSnapshot(`
2320+
[root]
2321+
▾ <App>
2322+
▾ <ServerComponent> [Server]
2323+
<ClientComponent>
2324+
<ClientComponent>
2325+
▾ <ServerComponent2> [Server]
2326+
<ClientComponent>
2327+
`);
2328+
2329+
await actAsync(() => render(<App initial={false} />));
2330+
expect(store).toMatchInlineSnapshot(`
2331+
[root]
2332+
▾ <App>
2333+
▾ <ServerComponent> [Server]
2334+
<ClientComponent>
2335+
<ClientComponent>
2336+
▾ <ServerComponent2> [Server]
2337+
<ClientComponent>
2338+
<ClientComponent>
2339+
`);
2340+
});
2341+
2342+
// @reactVersion > 18.2
2343+
it('can reparent a child when the server components change', async () => {
2344+
function ClientComponent() {
2345+
return <div />;
2346+
}
2347+
const ServerPromise = Promise.resolve(<ClientComponent />);
2348+
ServerPromise._debugInfo = [
2349+
{
2350+
name: 'ServerAB',
2351+
env: 'Server',
2352+
owner: null,
2353+
},
2354+
];
2355+
const ServerPromise2 = Promise.resolve(<ClientComponent />);
2356+
ServerPromise2._debugInfo = [
2357+
{
2358+
name: 'ServerA',
2359+
env: 'Server',
2360+
owner: null,
2361+
},
2362+
{
2363+
name: 'ServerB',
2364+
env: 'Server',
2365+
owner: null,
2366+
},
2367+
];
2368+
const App = ({initial}) => (initial ? ServerPromise : ServerPromise2);
2369+
2370+
await actAsync(() => render(<App initial={true} />));
2371+
expect(store).toMatchInlineSnapshot(`
2372+
[root]
2373+
▾ <App>
2374+
▾ <ServerAB> [Server]
2375+
<ClientComponent>
2376+
`);
2377+
2378+
await actAsync(() => render(<App initial={false} />));
2379+
expect(store).toMatchInlineSnapshot(`
2380+
[root]
2381+
▾ <App>
2382+
▾ <ServerA> [Server]
2383+
▾ <ServerB> [Server]
2384+
<ClientComponent>
2385+
`);
2386+
});
2387+
2388+
// @reactVersion > 18.2
2389+
it('splits a server component parent when a different child appears between', async () => {
2390+
function ClientComponent() {
2391+
return <div />;
2392+
}
2393+
const ServerPromise = Promise.resolve(<ClientComponent />);
2394+
ServerPromise._debugInfo = [
2395+
{
2396+
name: 'ServerComponent',
2397+
env: 'Server',
2398+
owner: null,
2399+
},
2400+
];
2401+
const App = ({initial}) =>
2402+
initial ? (
2403+
<>
2404+
{ServerPromise}
2405+
{null}
2406+
{ServerPromise}
2407+
</>
2408+
) : (
2409+
<>
2410+
{ServerPromise}
2411+
<ClientComponent />
2412+
{ServerPromise}
2413+
</>
2414+
);
2415+
2416+
await actAsync(() => render(<App initial={true} />));
2417+
// Initially the Server Component only appears once because the children
2418+
// are consecutive.
2419+
expect(store).toMatchInlineSnapshot(`
2420+
[root]
2421+
▾ <App>
2422+
▾ <ServerComponent> [Server]
2423+
<ClientComponent>
2424+
<ClientComponent>
2425+
`);
2426+
2427+
// Later the same instance gets split into two when it is no longer
2428+
// consecutive so we need two virtual instances to represent two parents.
2429+
await actAsync(() => render(<App initial={false} />));
2430+
expect(store).toMatchInlineSnapshot(`
2431+
[root]
2432+
▾ <App>
2433+
▾ <ServerComponent> [Server]
2434+
<ClientComponent>
2435+
<ClientComponent>
2436+
▾ <ServerComponent> [Server]
2437+
<ClientComponent>
2438+
`);
2439+
});
2440+
2441+
// @reactVersion > 18.2
2442+
it('can reorder keyed components', async () => {
2443+
function ClientComponent({text}) {
2444+
return <div>{text}</div>;
2445+
}
2446+
function getServerComponent(key) {
2447+
const ServerPromise = Promise.resolve(
2448+
<ClientComponent key={key} text={key} />,
2449+
);
2450+
ServerPromise._debugInfo = [
2451+
{
2452+
name: 'ServerComponent',
2453+
env: 'Server',
2454+
owner: null,
2455+
// TODO: Ideally the debug info should include the "key" too to
2456+
// preserve the virtual identity of the server component when
2457+
// reordered. Atm only the children of it gets reparented.
2458+
},
2459+
];
2460+
return ServerPromise;
2461+
}
2462+
const set1 = ['A', 'B', 'C'].map(getServerComponent);
2463+
const set2 = ['B', 'A', 'D'].map(getServerComponent);
2464+
2465+
const App = ({initial}) => (initial ? set1 : set2);
2466+
2467+
await actAsync(() => render(<App initial={true} />));
2468+
expect(store).toMatchInlineSnapshot(`
2469+
[root]
2470+
▾ <App>
2471+
▾ <ServerComponent> [Server]
2472+
<ClientComponent key="A">
2473+
▾ <ServerComponent> [Server]
2474+
<ClientComponent key="B">
2475+
▾ <ServerComponent> [Server]
2476+
<ClientComponent key="C">
2477+
`);
2478+
2479+
await actAsync(() => render(<App initial={false} />));
2480+
expect(store).toMatchInlineSnapshot(`
2481+
[root]
2482+
▾ <App>
2483+
▾ <ServerComponent> [Server]
2484+
<ClientComponent key="B">
2485+
▾ <ServerComponent> [Server]
2486+
<ClientComponent key="A">
2487+
▾ <ServerComponent> [Server]
2488+
<ClientComponent key="D">
2489+
`);
2490+
});
22152491
});

0 commit comments

Comments
 (0)
⚡