Repository: facebook/react
File: packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js (JavaScript)

Code before:
  fetchFileWithCaching: FetchFileWithCaching | null,
): Promise<mixed> {
  // Deduplicate fetches, since there can be multiple location keys per file.
  const dedupedFetchPromises = new Map<string, Promise<$FlowFixMe>>();

  const setterPromises = [];
  locationKeyToHookSourceAndMetadata.forEach(hookSourceAndMetadata => {
    const {runtimeSourceURL} = hookSourceAndMetadata;

    let fetchFileFunction = fetchFile;
    if (fetchFileWithCaching != null) {
      // If a helper function has been injected to fetch with caching,
      // use it to fetch the (already loaded) source file.
      fetchFileFunction = url => {
        return withAsyncPerfMeasurements(
          `fetchFileWithCaching("${url}")`,
          () => {
            return ((fetchFileWithCaching: any): FetchFileWithCaching)(url);
          },
        );
      };
    }

    const fetchPromise =
      dedupedFetchPromises.get(runtimeSourceURL) ||
      fetchFileFunction(runtimeSourceURL).then(runtimeSourceCode => {
        // TODO (named hooks) Re-think this; the main case where it matters is when there's no source-maps,
        // because then we need to parse the full source file as an AST.
        if (runtimeSourceCode.length > MAX_SOURCE_LENGTH) {
          throw Error('Source code too large to parse');
        }

        if (__DEBUG__) {
          console.groupCollapsed(
            `loadSourceFiles() runtimeSourceURL "${runtimeSourceURL}"`,
          );
          console.log(runtimeSourceCode);
          console.groupEnd();
        }

        return runtimeSourceCode;
      });
    dedupedFetchPromises.set(runtimeSourceURL, fetchPromise);

    setterPromises.push(
      fetchPromise.then(runtimeSourceCode => {
        hookSourceAndMetadata.runtimeSourceCode = runtimeSourceCode;
      }),
    );
  });


Review comment (suggestion):
Consider utilizing the null-safety js feature:
```suggestion
      (!runtimeSourceURL?.startsWith('<anonymous')
```

Code after:
  fetchFileWithCaching: FetchFileWithCaching | null,
): Promise<mixed> {
  // Deduplicate fetches, since there can be multiple location keys per file.
  const dedupedFetchPromises = new Map<string, Promise<$FlowFixMe>>();

  const setterPromises = [];
  locationKeyToHookSourceAndMetadata.forEach(hookSourceAndMetadata => {
    const {runtimeSourceURL} = hookSourceAndMetadata;

    let fetchFileFunction = fetchFile;
    if (fetchFileWithCaching != null) {
      // If a helper function has been injected to fetch with caching,
      // use it to fetch the (already loaded) source file.
      fetchFileFunction = url => {
        return withAsyncPerfMeasurements(
          `fetchFileWithCaching("${url}")`,
          () => {
            return ((fetchFileWithCaching: any): FetchFileWithCaching)(url);
          },
        );
      };
    }

    const fetchPromise =
      dedupedFetchPromises.get(runtimeSourceURL) ||
      (runtimeSourceURL && !runtimeSourceURL.startsWith('<anonymous')
        ? fetchFileFunction(runtimeSourceURL).then(runtimeSourceCode => {
            // TODO (named hooks) Re-think this; the main case where it matters is when there's no source-maps,
            // because then we need to parse the full source file as an AST.
            if (runtimeSourceCode.length > MAX_SOURCE_LENGTH) {
              throw Error('Source code too large to parse');
            }

            if (__DEBUG__) {
              console.groupCollapsed(
                `loadSourceFiles() runtimeSourceURL "${runtimeSourceURL}"`,
              );
              console.log(runtimeSourceCode);
              console.groupEnd();
            }

            return runtimeSourceCode;
          })
        : Promise.reject(new Error('Empty url')));
    dedupedFetchPromises.set(runtimeSourceURL, fetchPromise);

    setterPromises.push(
      fetchPromise.then(runtimeSourceCode => {
        hookSourceAndMetadata.runtimeSourceCode = runtimeSourceCode;
      }),
    );