mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Sebastian MarkbågeandGitHub
0c89b160f6
This adds a "suspended by" row for each chunk that is referenced from a client reference. So when you select a client component, you can see what bundles will block that client component when loading on the client. This is only done in the browser build since if we added it on the server, it would show up as a blocking resource and while it's possible we expect that a typical server request won't block on loading JS. <img width="664" height="486" alt="Screenshot 2025-08-17 at 3 45 14 PM" src="https://github.com/user-attachments/assets/b1f83445-2a4e-4470-9a20-7cd215ab0482" /> <img width="745" height="678" alt="Screenshot 2025-08-17 at 3 46 58 PM" src="https://github.com/user-attachments/assets/3558eae1-cf34-4e11-9d0e-02ec076356a4" /> Currently this is only included if it ends up wrapped in a lazy like in the typical type position of a Client Component, but there's a general issue that maybe hard references need to transfer their debug info to the parent which can transfer it to the Fiber.
90 lines
2.3 KiB
JavaScript
90 lines
2.3 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 type {Thenable, ReactDebugInfo} from 'shared/ReactTypes';
|
|
|
|
import type {ImportMetadata} from '../shared/ReactFlightImportMetadata';
|
|
|
|
import {
|
|
ID,
|
|
NAME,
|
|
BUNDLES,
|
|
IMPORT_MAP,
|
|
} from '../shared/ReactFlightImportMetadata';
|
|
import {prepareDestinationWithChunks} from 'react-client/src/ReactFlightClientConfig';
|
|
|
|
export type ServerManifest = {
|
|
[string]: Array<string>,
|
|
};
|
|
export type SSRModuleMap = null;
|
|
export type ModuleLoading = null;
|
|
export type ServerConsumerModuleMap = null;
|
|
export type ServerReferenceId = string;
|
|
|
|
export opaque type ClientReferenceMetadata = ImportMetadata;
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
export opaque type ClientReference<T> = ImportMetadata;
|
|
|
|
export function prepareDestinationForModule(
|
|
moduleLoading: ModuleLoading,
|
|
nonce: ?string,
|
|
metadata: ClientReferenceMetadata,
|
|
) {
|
|
prepareDestinationWithChunks(moduleLoading, metadata[BUNDLES], nonce);
|
|
}
|
|
|
|
export function resolveClientReference<T>(
|
|
bundlerConfig: null,
|
|
metadata: ClientReferenceMetadata,
|
|
): ClientReference<T> {
|
|
// Reference is already resolved during the build.
|
|
return metadata;
|
|
}
|
|
|
|
export function resolveServerReference<T>(
|
|
bundlerConfig: ServerManifest,
|
|
ref: ServerReferenceId,
|
|
): ClientReference<T> {
|
|
const idx = ref.lastIndexOf('#');
|
|
const id = ref.slice(0, idx);
|
|
const name = ref.slice(idx + 1);
|
|
const bundles = bundlerConfig[id];
|
|
if (!bundles) {
|
|
throw new Error('Invalid server action: ' + ref);
|
|
}
|
|
return [id, name, bundles];
|
|
}
|
|
|
|
export function preloadModule<T>(
|
|
metadata: ClientReference<T>,
|
|
): null | Thenable<any> {
|
|
if (metadata[IMPORT_MAP]) {
|
|
parcelRequire.extendImportMap(metadata[IMPORT_MAP]);
|
|
}
|
|
|
|
if (metadata[BUNDLES].length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return Promise.all(metadata[BUNDLES].map(url => parcelRequire.load(url)));
|
|
}
|
|
|
|
export function requireModule<T>(metadata: ClientReference<T>): T {
|
|
const moduleExports = parcelRequire(metadata[ID]);
|
|
return moduleExports[metadata[NAME]];
|
|
}
|
|
|
|
export function getModuleDebugInfo<T>(
|
|
metadata: ClientReference<T>,
|
|
): null | ReactDebugInfo {
|
|
// TODO
|
|
return null;
|
|
}
|