mirror of
https://github.com/zebrajr/react.git
synced 2025-12-06 12:20:20 +01:00
3c67bbe5f9
We need to track that Suspensey CSS (Host Resources) can contribute to the loading state. We can pick up the start/end time from the Performance Observer API since we know which resource was loaded. If DOM nodes are not filtered there's a link to the `<link>` instance. The `"awaited by"` stack is the callsite of the JSX creating the `<link>`. <img width="591" height="447" alt="Screenshot 2025-08-11 at 1 35 21 AM" src="https://github.com/user-attachments/assets/63af0ca9-de8d-4c74-a797-af0a009b5d73" /> Inspecting the link itself: <img width="592" height="344" alt="Screenshot 2025-08-11 at 1 31 43 AM" src="https://github.com/user-attachments/assets/89603dbc-6721-4bbf-8b58-6010719b29e3" /> In this approach I only include it if the page currently matches the media query. It might contribute in some other scenario but we're not showing every possible state but every possible scenario that might suspend if timing changes in the current state.
75 lines
2.3 KiB
JavaScript
75 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
|
|
*/
|
|
|
|
export function getIODescription(value: any): string {
|
|
if (!__DEV__) {
|
|
return '';
|
|
}
|
|
try {
|
|
switch (typeof value) {
|
|
case 'object':
|
|
// Test the object for a bunch of common property names that are useful identifiers.
|
|
// While we only have the return value here, it should ideally be a name that
|
|
// describes the arguments requested.
|
|
if (value === null) {
|
|
return '';
|
|
} else if (value instanceof Error) {
|
|
// eslint-disable-next-line react-internal/safe-string-coercion
|
|
return String(value.message);
|
|
} else if (typeof value.url === 'string') {
|
|
return value.url;
|
|
} else if (typeof value.href === 'string') {
|
|
return value.href;
|
|
} else if (typeof value.command === 'string') {
|
|
return value.command;
|
|
} else if (
|
|
typeof value.request === 'object' &&
|
|
typeof value.request.url === 'string'
|
|
) {
|
|
return value.request.url;
|
|
} else if (
|
|
typeof value.response === 'object' &&
|
|
typeof value.response.url === 'string'
|
|
) {
|
|
return value.response.url;
|
|
} else if (
|
|
typeof value.id === 'string' ||
|
|
typeof value.id === 'number' ||
|
|
typeof value.id === 'bigint'
|
|
) {
|
|
// eslint-disable-next-line react-internal/safe-string-coercion
|
|
return String(value.id);
|
|
} else if (typeof value.name === 'string') {
|
|
return value.name;
|
|
} else {
|
|
const str = value.toString();
|
|
if (str.startWith('[object ') || str.length < 5 || str.length > 500) {
|
|
// This is probably not a useful description.
|
|
return '';
|
|
}
|
|
return str;
|
|
}
|
|
case 'string':
|
|
if (value.length < 5 || value.length > 500) {
|
|
return '';
|
|
}
|
|
return value;
|
|
case 'number':
|
|
case 'bigint':
|
|
// eslint-disable-next-line react-internal/safe-string-coercion
|
|
return String(value);
|
|
default:
|
|
// Not useful descriptors.
|
|
return '';
|
|
}
|
|
} catch (x) {
|
|
return '';
|
|
}
|
|
}
|