Files
react/packages/react-devtools-shared/src/dynamicImportCache.js
Brian Vaughn 225740be48 Add named hooks support to react-devtools-inline (#22263)
This commit builds on PR #22260 and makes the following changes:
* Adds a DevTools feature flag for named hooks support. (This allows us to disable it entirely for a build via feature flag.)
* Adds a new Suspense cache for dynamically imported modules. (This allows a component to suspend while importing an external code chunk– like the hook names parsing code).
* DevTools supports a hookNamesModuleLoaderFunction param to import the hook names module. I wish this could be handles as part of the react-devtools-shared package, but I'm not sure how to configure Webpack (4) to serve the chunk from react-devtools-inline. This seemed like a reasonable workaround.

The PR also contains an additional unrelated change:
* Removes pre-fetch optimization (added in DevTools: Improve named hooks network caching #22198). This optimization was mostly only important for cases where sources needed to be re-downloaded, something which we can now avoid in most cases¹ thanks to using cached responses already loaded by the page. (I tested this locally on Facebook and this change has no negative performance impact. There is still some overhead from serializing the JS through the Bridge but that's constant between the two approaches.)

¹ The case where we don't benefit from cached responses is when DevTools are opened after the page has already loaded certain scripts. This seems uncommon enough that I don't think it justified the added complexity of prefetching.
2021-09-09 15:25:26 -04:00

160 lines
3.6 KiB
JavaScript

/**
* Copyright (c) Facebook, Inc. and its 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 {__DEBUG__} from 'react-devtools-shared/src/constants';
import type {Thenable, Wakeable} from 'shared/ReactTypes';
const TIMEOUT = 30000;
const Pending = 0;
const Resolved = 1;
const Rejected = 2;
type PendingRecord = {|
status: 0,
value: Wakeable,
|};
type ResolvedRecord<T> = {|
status: 1,
value: T,
|};
type RejectedRecord = {|
status: 2,
value: null,
|};
type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
type Module = any;
type ModuleLoaderFunction = () => Thenable<Module>;
// This is intentionally a module-level Map, rather than a React-managed one.
// Otherwise, refreshing the inspected element cache would also clear this cache.
// Modules are static anyway.
const moduleLoaderFunctionToModuleMap: Map<
ModuleLoaderFunction,
Module,
> = new Map();
function readRecord<T>(record: Record<T>): ResolvedRecord<T> | RejectedRecord {
if (record.status === Resolved) {
// This is just a type refinement.
return record;
} else if (record.status === Rejected) {
// This is just a type refinement.
return record;
} else {
throw record.value;
}
}
// TODO Flow type
export function loadModule(moduleLoaderFunction: ModuleLoaderFunction): Module {
let record = moduleLoaderFunctionToModuleMap.get(moduleLoaderFunction);
if (__DEBUG__) {
console.log(
`[dynamicImportCache] loadModule("${moduleLoaderFunction.name}")`,
);
}
if (!record) {
const callbacks = new Set();
const wakeable: Wakeable = {
then(callback) {
callbacks.add(callback);
},
};
const wake = () => {
if (timeoutID) {
clearTimeout(timeoutID);
timeoutID = null;
}
// This assumes they won't throw.
callbacks.forEach(callback => callback());
callbacks.clear();
};
const newRecord: Record<Module> = (record = {
status: Pending,
value: wakeable,
});
let didTimeout = false;
moduleLoaderFunction().then(
module => {
if (__DEBUG__) {
console.log(
`[dynamicImportCache] loadModule("${moduleLoaderFunction.name}") then()`,
);
}
if (didTimeout) {
return;
}
const resolvedRecord = ((newRecord: any): ResolvedRecord<Module>);
resolvedRecord.status = Resolved;
resolvedRecord.value = module;
wake();
},
error => {
if (__DEBUG__) {
console.log(
`[dynamicImportCache] loadModule("${moduleLoaderFunction.name}") catch()`,
);
}
if (didTimeout) {
return;
}
console.log(error);
const thrownRecord = ((newRecord: any): RejectedRecord);
thrownRecord.status = Rejected;
thrownRecord.value = null;
wake();
},
);
// Eventually timeout and stop trying to load the module.
let timeoutID = setTimeout(function onTimeout() {
if (__DEBUG__) {
console.log(
`[dynamicImportCache] loadModule("${moduleLoaderFunction.name}") onTimeout()`,
);
}
timeoutID = null;
didTimeout = true;
const timedoutRecord = ((newRecord: any): RejectedRecord);
timedoutRecord.status = Rejected;
timedoutRecord.value = null;
wake();
}, TIMEOUT);
moduleLoaderFunctionToModuleMap.set(moduleLoaderFunction, record);
}
const response = readRecord(record).value;
return response;
}