Refactored console patching to not require additional renderer injections

Author: Brian Vaughn

src/backend/console.js

@@ -1,5 +1,8 @@
 // @flow
 
+import { getInternalReactConstants } from './renderer';
+import describeComponentFrame from './describeComponentFrame';
+
 import type { Fiber, ReactRenderer } from './types';
 
 let isDisabled: boolean = false;
@@ -17,18 +20,22 @@ const FRAME_REGEX = /\n {4}in /;
 
 export function patch(
   targetConsole: Object,
-  { describeComponentFrame, getComponentName, getCurrentFiber }: ReactRenderer
+  { getCurrentFiber, findFiberByHostInstance, version }: ReactRenderer
 ): void {
   if (hasPatched) {
     return;
   }
 
+  if (typeof findFiberByHostInstance !== 'function') {
+    return;
+  }
+
+  const { getDisplayNameForFiber } = getInternalReactConstants(version);
+
   hasPatched = true;
 
   for (let method in targetConsole) {
     const appendComponentStack =
-      typeof describeComponentFrame === 'function' &&
-      typeof getComponentName === 'function' &&
       typeof getCurrentFiber === 'function' &&
       (method === 'error' || method === 'warn' || method === 'trace');
 
@@ -47,10 +54,10 @@ export function patch(
           let current: ?Fiber = getCurrentFiber();
           let ownerStack: string = '';
           while (current != null) {
-            const name = getComponentName(current.type);
+            const name = getDisplayNameForFiber(current);
             const owner = current._debugOwner;
             const ownerName =
-              owner != null ? getComponentName(owner.type) : null;
+              owner != null ? getDisplayNameForFiber(owner) : null;
 
             ownerStack += describeComponentFrame(
               name,

src/backend/describeComponentFrame.js

@@ -0,0 +1,41 @@
+// @flow
+
+// This file was forked from the React GitHub repo:
+// https://raw.githubusercontent.com/facebook/react/master/packages/shared/describeComponentFrame.js
+//
+// It has been modified sligthly to add a zero width space as commented below.
+
+const BEFORE_SLASH_RE = /^(.*)[\\/]/;
+
+export default function describeComponentFrame(
+  name: null | string,
+  source: any,
+  ownerName: null | string
+) {
+  let sourceInfo = '';
+  if (source) {
+    let path = source.fileName;
+    let fileName = path.replace(BEFORE_SLASH_RE, '');
+    if (__DEV__) {
+      // In DEV, include code for a common special case:
+      // prefer "folder/index.js" instead of just "index.js".
+      if (/^index\./.test(fileName)) {
+        const match = path.match(BEFORE_SLASH_RE);
+        if (match) {
+          const pathBeforeSlash = match[1];
+          if (pathBeforeSlash) {
+            const folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
+            // Note the below string contains a zero width space after the "/" character.
+            // This is to prevent browsers like Chrome from formatting the file name as a link.
+            // (Since this is a source link, it would not work to open the source file anyway.)
+            fileName = folderName + '/​' + fileName;
+          }
+        }
+      }
+    }
+    sourceInfo = ' (at ' + fileName + ':' + source.lineNumber + ')';
+  } else if (ownerName) {
+    sourceInfo = ' (created by ' + ownerName + ')';
+  }
+  return '\n    in ' + (name || 'Unknown') + sourceInfo;
+}