extractAndLoadSourceMapJSON() — react Function Reference

Source Code

packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js lines 125–304

function extractAndLoadSourceMapJSON(
  locationKeyToHookSourceAndMetadata: LocationKeyToHookSourceAndMetadata,
): Promise<mixed> {
  // Deduplicate fetches, since there can be multiple location keys per source map.
  const dedupedFetchPromises = new Map<string, Promise<$FlowFixMe>>();

  if (__DEBUG__) {
    console.log(
      'extractAndLoadSourceMapJSON() load',
      locationKeyToHookSourceAndMetadata.size,
      'source maps',
    );
  }

  const setterPromises = [];
  locationKeyToHookSourceAndMetadata.forEach(hookSourceAndMetadata => {
    const sourceMapRegex = / ?sourceMappingURL=([^\s'"]+)/gm;
    const runtimeSourceCode =
      ((hookSourceAndMetadata.runtimeSourceCode: any): string);

    // TODO (named hooks) Search for our custom metadata first.
    // If it's found, we should use it rather than source maps.

    // TODO (named hooks) If this RegExp search is slow, we could try breaking it up
    // first using an indexOf(' sourceMappingURL=') to find the start of the comment
    // (probably at the end of the file) and then running the RegExp on the remaining substring.
    let sourceMappingURLMatch = withSyncPerfMeasurements(
      'sourceMapRegex.exec(runtimeSourceCode)',
      () => sourceMapRegex.exec(runtimeSourceCode),
    );

    if (sourceMappingURLMatch == null) {
      if (__DEBUG__) {
        console.log('extractAndLoadSourceMapJSON() No source map found');
      }

      // Maybe file has not been transformed; we'll try to parse it as-is in parseSourceAST().
    } else {
      const externalSourceMapURLs = [];
      while (sourceMappingURLMatch != null) {
        const {runtimeSourceURL} = hookSourceAndMetadata;
        const sourceMappingURL = sourceMappingURLMatch[1];
        const hasInlineSourceMap = sourceMappingURL.indexOf('base64,') >= 0;
        if (hasInlineSourceMap) {
          try {
            // TODO (named hooks) deduplicate parsing in this branch (similar to fetching in the other branch)
            // since there can be multiple location keys per source map.

            // Web apps like Code Sandbox embed multiple inline source maps.
            // In this case, we need to loop through and find the right one.
            // We may also need to trim any part of this string that isn't based64 encoded data.
            const trimmed = ((sourceMappingURL.match(
              /base64,([a-zA-Z0-9+\/=]+)/,
            ): any): Array<string>)[1];
            const decoded = withSyncPerfMeasurements(
              'decodeBase64String()',
              () => decodeBase64String(trimmed),
            );

            const sourceMapJSON = withSyncPerfMeasurements(
              'JSON.parse(decoded)',
              () => JSON.parse(decoded),
            );

            if (__DEBUG__) {
              console.groupCollapsed(
                'extractAndLoadSourceMapJSON() Inline source map',
              );
              console.log(sourceMapJSON);
              console.groupEnd();
            }

            // Hook source might be a URL like "https://4syus.csb.app/src/App.js"
            // Parsed source map might be a partial path like "src/App.js"
            if (sourceMapIncludesSource(sourceMapJSON, runtimeSourceURL)) {
              hookSourceAndMetadata.sourceMapJSON = sourceMapJSON;

              // OPTIMIZATION If we've located a source map for this source,
              // we'll use it to retrieve the original source (to extract hook names).
              // We only fall back to parsing the full source code is when there's no source map.
              // The source is (potentially) very large,