[Fiber Debugger] Bring up to date (#8765)

* Ignore orphaned fibers in the debugger

* Remember last entered code via localStorage

* Update Create React App

* Minor fixes

* Dogfood Fiber

examples/fiber/debugger/.env

@@ -0,0 +1 @@
+NODE_PATH=../../../build/packages

examples/fiber/debugger/.gitignore

@@ -11,5 +11,4 @@ build
 
 # misc
 .DS_Store
-.env
 npm-debug.log

examples/fiber/debugger/package.json

@@ -3,13 +3,11 @@
   "version": "0.0.1",
   "private": true,
   "devDependencies": {
-    "react-scripts": "0.6.1"
+    "react-scripts": "0.8.4"
   },
   "dependencies": {
     "dagre": "^0.7.4",
     "pretty-format": "^4.2.1",
-    "react": "^15.3.2",
-    "react-dom": "^15.3.2",
     "react-draggable": "^2.2.2",
     "react-motion": "^0.4.5"
   },

examples/fiber/debugger/src/App.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Draggable from 'react-draggable';
-import ReactNoop from '../../../../build/packages/react-noop-renderer';
-import ReactFiberInstrumentation from '../../../../build/packages/react-noop-renderer/lib/ReactFiberInstrumentation';
+import ReactNoop from 'react-noop-renderer';
+import ReactFiberInstrumentation from 'react-noop-renderer/lib/ReactFiberInstrumentation';
 import Editor from './Editor';
 import Fibers from './Fibers';
 import describeFibers from './describeFibers';
@@ -27,7 +27,7 @@ class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      code: defaultCode,
+      code: localStorage.getItem('fiber-debugger-code') || defaultCode,
       isEditing: false,
       history: [],
       currentStep: 0,
@@ -51,6 +51,9 @@ class App extends Component {
     let currentStage;
     let currentRoot;
 
+    ReactFiberInstrumentation.debugTool = null;
+    ReactNoop.render(null);
+    ReactNoop.flush();
     ReactFiberInstrumentation.debugTool = {
       onMountContainer: (root) => {
         currentRoot = root;
@@ -128,6 +131,7 @@ class App extends Component {
   }
 
   handleCloseEdit = (nextCode) => {
+    localStorage.setItem('fiber-debugger-code', nextCode);
     this.setState({
       isEditing: false,
       history: [],

examples/fiber/debugger/src/Fibers.js

@@ -116,6 +116,10 @@ function Graph(props) {
 }
 
 function Vertex(props) {
+  if (Number.isNaN(props.x) || Number.isNaN(props.y)) {
+    return null;
+  }
+
   return (
     <div style={{
       position: 'absolute',

examples/fiber/debugger/src/describeFibers.js

@@ -19,16 +19,18 @@ function getFriendlyTag(tag) {
     case 3:
       return '[root]';
     case 4:
-      return '[host]';
+      return '[portal]';
     case 5:
-      return '[text]';
+      return '[host]';
     case 6:
-      return '[coroutine]';
+      return '[text]';
     case 7:
-      return '[handler]';
+      return '[coroutine]';
     case 8:
-      return '[yield]';
+      return '[handler]';
     case 9:
+      return '[yield]';
+    case 10:
       return '[frag]';
     default:
       throw new Error('Unknown tag.');
@@ -41,6 +43,9 @@ export default function describeFibers(rootFiber, workInProgress) {
     if (!fiber) {
       return null;
     }
+    if (!fiber.return && fiber.tag !== 3) {
+      return null;
+    }
     const id = getFiberUniqueID(fiber);
     if (descriptions[id]) {
       return id;

examples/fiber/debugger/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/fiber';
 import App from './App';
 import './index.css';