React 14.9<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@0.14.9\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@0.14.9\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/14.9.html\">http:\/\/localhost:9000\/fixtures\/regression\/14.9.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.0.html b\/fixtures\/regression\/15.0.html\nnew file mode 100644\nindex 0000000000..b3f05333c2\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.0.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.0<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.0\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.0\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/15.0.html\">http:\/\/localhost:9000\/fixtures\/regression\/15.0.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.1.html b\/fixtures\/regression\/15.1.html\nnew file mode 100644\nindex 0000000000..8712b56a9e\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.1.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.1<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.1\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.1\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/15.1.html\">http:\/\/localhost:9000\/fixtures\/regression\/15.1.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.2.html b\/fixtures\/regression\/15.2.html\nnew file mode 100644\nindex 0000000000..acde32fe21\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.2.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.2<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.2\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.2\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/15.2.html\">http:\/\/localhost:9000\/fixtures\/regression\/15.2.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.3.html b\/fixtures\/regression\/15.3.html\nnew file mode 100644\nindex 0000000000..ced3559ea6\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.3.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.3<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.3\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.3\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/15.3.html\">http:\/\/localhost:9000\/fixtures\/regression\/15.3.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.4.html b\/fixtures\/regression\/15.4.html\nnew file mode 100644\nindex 0000000000..0f23cdea7d\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.4.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.4<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.4\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.4\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/15.4.html\">http:\/\/localhost:9000\/fixtures\/regression\/15.4.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.5.html b\/fixtures\/regression\/15.5.html\nnew file mode 100644\nindex 0000000000..361512d9bd\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.5.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.5<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.5\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.5\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/15.5.html\">http:\/\/localhost:9000\/fixtures\/regression\/15.5.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.6.html b\/fixtures\/regression\/15.6.html\nnew file mode 100644\nindex 0000000000..97ff99ccf5\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.6.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.6<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.6\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.6\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/15.6.html\">http:\/\/localhost:9000\/fixtures\/regression\/15.6.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.0.html b\/fixtures\/regression\/16.0.html\nnew file mode 100644\nindex 0000000000..ea5cf812c9\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.0.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.0<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16.0\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.0\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/16.0.html\">http:\/\/localhost:9000\/fixtures\/regression\/16.0.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.1.html b\/fixtures\/regression\/16.1.html\nnew file mode 100644\nindex 0000000000..494cc97900\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.1.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.1<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16.1\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.1\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/16.1.html\">http:\/\/localhost:9000\/fixtures\/regression\/16.1.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.2.html b\/fixtures\/regression\/16.2.html\nnew file mode 100644\nindex 0000000000..b1c3186720\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.2.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.2<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16.2\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.2\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/16.2.html\">http:\/\/localhost:9000\/fixtures\/regression\/16.2.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.3.html b\/fixtures\/regression\/16.3.html\nnew file mode 100644\nindex 0000000000..76799903d8\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.3.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.3<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16.3\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.3\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/16.3.html\">http:\/\/localhost:9000\/fixtures\/regression\/16.3.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.4.html b\/fixtures\/regression\/16.4.html\nnew file mode 100644\nindex 0000000000..ca6c30dec1\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.4.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.4<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16.4\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.4\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/16.4.html\">http:\/\/localhost:9000\/fixtures\/regression\/16.4.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.5.html b\/fixtures\/regression\/16.5.html\nnew file mode 100644\nindex 0000000000..48e14a457c\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.5.html\n@@ -0,0 +1,41 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.5<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/schedule@0.5.0\/umd\/schedule.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/schedule@0.5.0\/umd\/schedule-tracing.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react@16.5\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.5\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/16.5.html\">http:\/\/localhost:9000\/fixtures\/regression\/16.5.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.6.html b\/fixtures\/regression\/16.6.html\nnew file mode 100644\nindex 0000000000..ca32dc5b9c\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.6.html\n@@ -0,0 +1,42 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.6<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/scheduler@0.10.0\/umd\/scheduler.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/scheduler@0.10.0\/umd\/scheduler-tracing.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react@16.6\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.6\/umd\/react-dom.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-cache@2.0.0-alpha.1\/umd\/react-cache.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/16.6.html\">http:\/\/localhost:9000\/fixtures\/regression\/16.6.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.7.html b\/fixtures\/regression\/16.7.html\nnew file mode 100644\nindex 0000000000..2b7ec759fa\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.7.html\n@@ -0,0 +1,42 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.7<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/scheduler@0.12.0\/umd\/scheduler.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/scheduler@0.12.0\/umd\/scheduler-tracing.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react@16.7\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.7\/umd\/react-dom.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-cache@2.0.0-alpha.1\/umd\/react-cache.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/16.7.html\">http:\/\/localhost:9000\/fixtures\/regression\/16.7.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/canary.html b\/fixtures\/regression\/canary.html\nnew file mode 100644\nindex 0000000000..cd25e6162a\n--- \/dev\/null\n+++ b\/fixtures\/regression\/canary.html\n@@ -0,0 +1,42 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React canary<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/scheduler@canary\/umd\/scheduler.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/scheduler@canary\/umd\/scheduler-tracing.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react@canary\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@canary\/umd\/react-dom.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-cache@next\/umd\/react-cache.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/canary.html\">http:\/\/localhost:9000\/fixtures\/regression\/canary.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/index.html b\/fixtures\/regression\/index.html\nnew file mode 100644\nindex 0000000000..125a8e8baf\n--- \/dev\/null\n+++ b\/fixtures\/regression\/index.html\n@@ -0,0 +1,28 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React DevTools regression test<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+ <\/head>\n+ <body>\n+ <iframe src=\"canary.html\"><\/iframe>\n+ <iframe src=\"next.html\"><\/iframe>\n+ <iframe src=\"16.7.html\"><\/iframe>\n+ <iframe src=\"16.6.html\"><\/iframe>\n+ <iframe src=\"16.5.html\"><\/iframe>\n+ <iframe src=\"16.4.html\"><\/iframe>\n+ <iframe src=\"16.3.html\"><\/iframe>\n+ <iframe src=\"16.2.html\"><\/iframe>\n+ <iframe src=\"16.1.html\"><\/iframe>\n+ <iframe src=\"16.0.html\"><\/iframe>\n+ <iframe src=\"15.6.html\"><\/iframe>\n+ <iframe src=\"15.5.html\"><\/iframe>\n+ <iframe src=\"15.4.html\"><\/iframe>\n+ <iframe src=\"15.3.html\"><\/iframe>\n+ <iframe src=\"15.2.html\"><\/iframe>\n+ <iframe src=\"15.1.html\"><\/iframe>\n+ <iframe src=\"15.0.html\"><\/iframe>\n+ <iframe src=\"14.9.html\"><\/iframe>\n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/next.html b\/fixtures\/regression\/next.html\nnew file mode 100644\nindex 0000000000..c457f03acc\n--- \/dev\/null\n+++ b\/fixtures\/regression\/next.html\n@@ -0,0 +1,42 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React next<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/scheduler@next\/umd\/scheduler.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/scheduler@next\/umd\/scheduler-tracing.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react@next\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@next\/umd\/react-dom.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-cache@next\/umd\/react-cache.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/next.html\">http:\/\/localhost:9000\/fixtures\/regression\/next.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/shared.js b\/fixtures\/regression\/shared.js\nnew file mode 100644\nindex 0000000000..362e02e911\n--- \/dev\/null\n+++ b\/fixtures\/regression\/shared.js\n@@ -0,0 +1,330 @@\n+\/* eslint-disable no-fallthrough, react\/react-in-jsx-scope, react\/jsx-no-undef *\/\n+\/* global React ReactCache ReactDOM SchedulerTracing ScheduleTracing *\/\n+\n+const apps = [];\n+\n+const pieces = React.version.split('.');\n+const major =\n+ pieces[0] === '0' ? parseInt(pieces[1], 10) : parseInt(pieces[0], 10);\n+const minor =\n+ pieces[0] === '0' ? parseInt(pieces[2], 10) : parseInt(pieces[1], 10);\n+\n+\/\/ Convenience wrapper to organize API features in DevTools.\n+function Feature({ children, label, version }) {\n+ return (\n+ <div className=\"Feature\">\n+ <div className=\"FeatureHeader\">\n+ <code className=\"FeatureCode\">{label}<\/code>\n+ <small>{version}<\/small>\n+ <\/div>\n+ {children}\n+ <\/div>\n+ );\n+}\n+\n+\/\/ Simplify interaction tracing for tests below.\n+let trace = null;\n+if (typeof SchedulerTracing !== 'undefined') {\n+ trace = SchedulerTracing.unstable_trace;\n+} else if (typeof ScheduleTracing !== 'undefined') {\n+ trace = ScheduleTracing.unstable_trace;\n+} else {\n+ trace = (_, __, callback) => callback();\n+}\n+\n+\/\/ https:\/\/github.com\/facebook\/react\/blob\/master\/CHANGELOG.md\n+switch (major) {\n+ case 16:\n+ switch (minor) {\n+ case 7:\n+ if (typeof React.useState === 'function') {\n+ \/\/ Hooks\n+ function Hooks() {\n+ const [count, setCount] = React.useState(0);\n+ const incrementCount = React.useCallback(\n+ () => setCount(count + 1),\n+ [count]\n+ );\n+ return (\n+ <div>\n+ count: {count}{' '}\n+ <button onClick={incrementCount}>increment<\/button>\n+ <\/div>\n+ );\n+ }\n+ apps.push(\n+ <Feature key=\"Hooks\" label=\"Hooks\" version=\"16.7+\">\n+ <Hooks \/>\n+ <\/Feature>\n+ );\n+ }\n+ case 6:\n+ \/\/ memo\n+ function LabelComponent({ label }) {\n+ return <label>{label}<\/label>;\n+ }\n+ const AnonymousMemoized = React.memo(({ label }) => (\n+ <label>{label}<\/label>\n+ ));\n+ const Memoized = React.memo(LabelComponent);\n+ const CustomMemoized = React.memo(LabelComponent);\n+ CustomMemoized.displayName = 'MemoizedLabelFunction';\n+ apps.push(\n+ <Feature key=\"memo\" label=\"memo\" version=\"16.6+\">\n+ <AnonymousMemoized label=\"AnonymousMemoized\" \/>\n+ <Memoized label=\"Memoized\" \/>\n+ <CustomMemoized label=\"CustomMemoized\" \/>\n+ <\/Feature>\n+ );\n+\n+ \/\/ Suspense\n+ const loadResource = ([text, ms]) => {\n+ return new Promise((resolve, reject) => {\n+ setTimeout(() => {\n+ resolve(text);\n+ }, ms);\n+ });\n+ };\n+ const getResourceKey = ([text, ms]) => text;\n+ const Resource = ReactCache.unstable_createResource(\n+ loadResource,\n+ getResourceKey\n+ );\n+ class Suspending extends React.Component {\n+ state = { useSuspense: false };\n+ useSuspense = () => this.setState({ useSuspense: true });\n+ render() {\n+ if (this.state.useSuspense) {\n+ const text = Resource.read(['loaded', 2000]);\n+ return text;\n+ } else {\n+ return <button onClick={this.useSuspense}>load data<\/button>;\n+ }\n+ }\n+ }\n+ apps.push(\n+ <Feature key=\"Suspense\" label=\"Suspense\" version=\"16.6+\">\n+ <React.Suspense fallback={<div>loading...<\/div>}>\n+ <Suspending \/>\n+ <\/React.Suspense>\n+ <\/Feature>\n+ );\n+\n+ \/\/ lazy\n+ const LazyWithDefaultProps = React.lazy(\n+ () =>\n+ new Promise(resolve => {\n+ function FooWithDefaultProps(props) {\n+ return (\n+ <h1>\n+ {props.greeting}, {props.name}\n+ <\/h1>\n+ );\n+ }\n+ FooWithDefaultProps.defaultProps = {\n+ name: 'World',\n+ greeting: 'Bonjour',\n+ };\n+ resolve({\n+ default: FooWithDefaultProps,\n+ });\n+ })\n+ );\n+ apps.push(\n+ <Feature key=\"lazy\" label=\"lazy\" version=\"16.6+\">\n+ <React.Suspense fallback={<div>loading...<\/div>}>\n+ <LazyWithDefaultProps greeting=\"Hello\" \/>\n+ <\/React.Suspense>\n+ <\/Feature>\n+ );\n+ case 5:\n+ case 4:\n+ \/\/ unstable_Profiler\n+ class ProfilerChild extends React.Component {\n+ state = { count: 0 };\n+ incrementCount = () =>\n+ this.setState(prevState => ({ count: prevState.count + 1 }));\n+ render() {\n+ return (\n+ <div>\n+ count: {this.state.count}{' '}\n+ <button onClick={this.incrementCount}>increment<\/button>\n+ <\/div>\n+ );\n+ }\n+ }\n+ const onRender = (...args) => console.log('onRender()', ...args);\n+ const Profiler = React.unstable_Profiler || React.Profiler;\n+ apps.push(\n+ <Feature\n+ key=\"unstable_Profiler\"\n+ label=\"unstable_Profiler\"\n+ version=\"16.4+\"\n+ >\n+ <Profiler id=\"count\" onRender={onRender}>\n+ <div>\n+ <ProfilerChild \/>\n+ <\/div>\n+ <\/Profiler>\n+ <\/Feature>\n+ );\n+ case 3:\n+ \/\/ createContext()\n+ const LocaleContext = React.createContext();\n+ LocaleContext.displayName = 'LocaleContext';\n+ const ThemeContext = React.createContext();\n+ apps.push(\n+ <Feature key=\"createContext\" label=\"createContext\" version=\"16.3+\">\n+ <ThemeContext.Provider value=\"blue\">\n+ <ThemeContext.Consumer>\n+ {theme => <div>theme: {theme}<\/div>}\n+ <\/ThemeContext.Consumer>\n+ <\/ThemeContext.Provider>\n+ <LocaleContext.Provider value=\"en-US\">\n+ <LocaleContext.Consumer>\n+ {locale => <div>locale: {locale}<\/div>}\n+ <\/LocaleContext.Consumer>\n+ <\/LocaleContext.Provider>\n+ <\/Feature>\n+ );\n+\n+ \/\/ forwardRef()\n+ const AnonymousFunction = React.forwardRef((props, ref) => (\n+ <div ref={ref}>{props.children}<\/div>\n+ ));\n+ const NamedFunction = React.forwardRef(function named(props, ref) {\n+ return <div ref={ref}>{props.children}<\/div>;\n+ });\n+ const CustomName = React.forwardRef((props, ref) => (\n+ <div ref={ref}>{props.children}<\/div>\n+ ));\n+ CustomName.displayName = 'CustomNameForwardRef';\n+ apps.push(\n+ <Feature key=\"forwardRef\" label=\"forwardRef\" version=\"16.3+\">\n+ <AnonymousFunction>AnonymousFunction<\/AnonymousFunction>\n+ <NamedFunction>NamedFunction<\/NamedFunction>\n+ <CustomName>CustomName<\/CustomName>\n+ <\/Feature>\n+ );\n+\n+ \/\/ StrictMode\n+ class StrictModeChild extends React.Component {\n+ render() {\n+ return 'StrictModeChild';\n+ }\n+ }\n+ apps.push(\n+ <Feature key=\"StrictMode\" label=\"StrictMode\" version=\"16.3+\">\n+ <React.StrictMode>\n+ <StrictModeChild \/>\n+ <\/React.StrictMode>\n+ <\/Feature>\n+ );\n+\n+ \/\/ unstable_AsyncMode (later renamed to unstable_ConcurrentMode, then ConcurrentMode)\n+ const ConcurrentMode =\n+ React.ConcurrentMode ||\n+ React.unstable_ConcurrentMode ||\n+ React.unstable_AsyncMode;\n+ apps.push(\n+ <Feature\n+ key=\"AsyncMode\/ConcurrentMode\"\n+ label=\"AsyncMode\/ConcurrentMode\"\n+ version=\"16.3+\"\n+ >\n+ <ConcurrentMode>\n+ <div>\n+ unstable_AsyncMode was added in 16.3, renamed to\n+ unstable_ConcurrentMode in 16.5, and then renamed to\n+ ConcurrentMode in 16.7\n+ <\/div>\n+ <\/ConcurrentMode>\n+ <\/Feature>\n+ );\n+ case 2:\n+ \/\/ Fragment\n+ apps.push(\n+ <Feature key=\"Fragment\" label=\"Fragment\" version=\"16.4+\">\n+ <React.Fragment>\n+ <div>one<\/div>\n+ <div>two<\/div>\n+ <\/React.Fragment>\n+ <\/Feature>\n+ );\n+ case 1:\n+ case 0:\n+ default:\n+ break;\n+ }\n+ break;\n+ case 15:\n+ break;\n+ case 14:\n+ break;\n+ default:\n+ break;\n+}\n+\n+function Even() {\n+ return <small>(even)<\/small>;\n+}\n+\n+\/\/ Simple stateful app shared by all React versions\n+class SimpleApp extends React.Component {\n+ state = { count: 0 };\n+ incrementCount = () => {\n+ const updaterFn = prevState => ({ count: prevState.count + 1 });\n+ trace('Updating count', performance.now(), () => this.setState(updaterFn));\n+ };\n+ render() {\n+ const { count } = this.state;\n+ return (\n+ <div>\n+ {count % 2 === 0 ? (\n+ <span>\n+ count: {count} <Even \/>\n+ <\/span>\n+ ) : (\n+ <span>count: {count}<\/span>\n+ )}{' '}\n+ <button onClick={this.incrementCount}>increment<\/button>\n+ <\/div>\n+ );\n+ }\n+}\n+apps.push(\n+ <Feature key=\"Simple stateful app\" label=\"Simple stateful app\" version=\"any\">\n+ <SimpleApp \/>\n+ <\/Feature>\n+);\n+\n+\/\/ This component, with the version prop, helps organize DevTools at a glance.\n+function TopLevelWrapperForDevTools({ version }) {\n+ let header = <h1>React {version}<\/h1>;\n+ if (version.includes('canary')) {\n+ const commitSha = version.match(\/.+canary-(.+)\/)[1];\n+ header = (\n+ <h1>\n+ React canary{' '}\n+ <a href={`https:\/\/github.com\/facebook\/react\/commit\/${commitSha}`}>\n+ {commitSha}\n+ <\/a>\n+ <\/h1>\n+ );\n+ } else if (version.includes('alpha')) {\n+ header = <h1>React next<\/h1>;\n+ }\n+\n+ return (\n+ <div>\n+ {header}\n+ {apps}\n+ <\/div>\n+ );\n+}\n+TopLevelWrapperForDevTools.displayName = 'React';\n+\n+ReactDOM.render(\n+ <TopLevelWrapperForDevTools version={React.version} \/>,\n+ document.getElementById('root')\n+);\ndiff --git a\/fixtures\/regression\/styles.css b\/fixtures\/regression\/styles.css\nnew file mode 100644\nindex 0000000000..6cbaaa5c01\n--- \/dev\/null\n+++ b\/fixtures\/regression\/styles.css\n@@ -0,0 +1,37 @@\n+body {\n+ font-family: sans-serif;\n+ font-size: 12px;\n+}\n+\n+h1 {\n+ margin: 0;\n+ font-size: 20px;\n+}\n+\n+h2 {\n+ margin: 1rem 0 0;\n+}\n+\n+iframe {\n+ border: 1px solid #ddd;\n+ border-radius: 0.5rem;\n+}\n+\n+code {\n+ white-space: nowrap;\n+}\n+\n+.Feature {\n+ margin: 1rem 0;\n+ border-bottom: 1px solid #eee;\n+ padding-bottom: 1rem;\n+}\n+.FeatureHeader {\n+ font-size: 16px;\n+ margin-bottom: 0.5rem;\n+}\n+.FeatureCode {\n+ background-color: #eee;\n+ padding: 0.25rem;\n+ border-radius: 0.25rem;\n+}\ndiff --git a\/src\/backend\/agent.js b\/src\/backend\/agent.js\nindex f1f7532e1f..5ca5696646 100644\n--- a\/src\/backend\/agent.js\n+++ b\/src\/backend\/agent.js\n@@ -113,7 +113,7 @@ export default class Agent extends EventEmitter {\n const renderer = ((this._rendererInterfaces[\n (rendererID: any)\n ]: any): RendererInterface);\n- return renderer.getFiberIDFromNative(node, true);\n+ return renderer.getInternalIDFromNative(node, true);\n } catch (e) {}\n }\n return null;\n@@ -253,7 +253,7 @@ export default class Agent extends EventEmitter {\n \n let node: HTMLElement | null = null;\n if (renderer !== null) {\n- node = ((renderer.findNativeByFiberID(id): any): HTMLElement);\n+ node = ((renderer.getNativeFromInternal(id): any): HTMLElement);\n }\n \n if (node != null) {\ndiff --git a\/src\/backend\/index.js b\/src\/backend\/index.js\nindex 298d06a121..2df5c21154 100644\n--- a\/src\/backend\/index.js\n+++ b\/src\/backend\/index.js\n@@ -4,6 +4,7 @@ import type { DevToolsHook, ReactRenderer, RendererInterface } from '.\/types';\n import Agent from '.\/agent';\n \n import { attach } from '.\/renderer';\n+import { attach as attachLegacy } from '.\/legacy\/renderer';\n \n export function initBackend(\n hook: DevToolsHook,\n@@ -40,7 +41,11 @@ export function initBackend(\n \n \/\/ Inject any not-yet-injected renderers (if we didn't reload-and-profile)\n if (!rendererInterface) {\n- rendererInterface = attach(hook, id, renderer, global);\n+ if (typeof renderer.findFiberByHostInstance === 'function') {\n+ rendererInterface = attach(hook, id, renderer, global);\n+ } else {\n+ rendererInterface = attachLegacy(hook, id, renderer, global);\n+ }\n \n hook.rendererInterfaces.set(id, rendererInterface);\n }\ndiff --git a\/src\/backend\/legacy\/getChildren.js b\/src\/backend\/legacy\/getChildren.js\nnew file mode 100644\nindex 0000000000..1ed8b52e08\n--- \/dev\/null\n+++ b\/src\/backend\/legacy\/getChildren.js\n@@ -0,0 +1,63 @@\n+\/\/ @flow\n+\n+export default function getChildren(internalInstance: Object): Array<any> {\n+ \/\/ If the parent is a native node without rendered children, but with\n+ \/\/ multiple string children, then the `element` that gets passed in here is\n+ \/\/ a plain value -- a string or number.\n+ if (internalInstance._renderedComponent) {\n+ return [internalInstance._renderedComponent];\n+ } else if (internalInstance._renderedChildren) {\n+ return childrenToArray(internalInstance._renderedChildren);\n+ } else if (\n+ internalInstance._currentElement &&\n+ internalInstance._currentElement.props\n+ ) {\n+ \/\/ DevTools doesn't need to display primative child types,\n+ \/\/ So we can filter them out early.\n+ \/*\n+ const children = [];\n+\n+ \/\/ This is a native node without rendered children -- meaning the children\n+ \/\/ prop is the unfiltered list of children.\n+ \/\/ This may include 'null' or even other invalid values, so we need to\n+ \/\/ filter it the same way that ReactDOM does.\n+ \/\/ Instead of pulling in the whole React library, we just copied over the\n+ \/\/ 'traverseAllChildrenImpl' method.\n+ \/\/ https:\/\/github.com\/facebook\/react\/blob\/240b84ed8e1db715d759afaae85033718a0b24e1\/src\/isomorphic\/children\/ReactChildren.js#L112-L158\n+ const unfilteredChildren = internalInstance._currentElement.props.children;\n+ traverseAllChildrenImpl(\n+ unfilteredChildren,\n+ '', \/\/ nameSoFar\n+ (_traverseContext, child) => {\n+ const childType = typeof child;\n+ if (childType === 'string' || childType === 'number') {\n+ children.push(child);\n+ }\n+ }\n+ \/\/ traverseContext\n+ );\n+\n+ return children;\n+ *\/\n+ }\n+\n+ if (internalInstance._instance) {\n+ var inst = internalInstance._instance;\n+ \/\/ TODO: React ART currently falls in this bucket, but this doesn't\n+ \/\/ actually make sense and we should clean this up after stabilizing our\n+ \/\/ API for backends\n+ if (inst._renderedChildren) {\n+ return childrenToArray(inst._renderedChildren);\n+ }\n+ }\n+\n+ return [];\n+}\n+\n+function childrenToArray(children) {\n+ const array = [];\n+ for (var name in children) {\n+ array.push(children[name]);\n+ }\n+ return array;\n+}\ndiff --git a\/src\/backend\/legacy\/getData.js b\/src\/backend\/legacy\/getData.js\nnew file mode 100644\nindex 0000000000..200fd767a4\n--- \/dev\/null\n+++ b\/src\/backend\/legacy\/getData.js\n@@ -0,0 +1,46 @@\n+\/\/ @flow\n+\n+import {\n+ ElementTypeClass,\n+ ElementTypeOtherOrUnknown,\n+} from 'src\/devtools\/types';\n+import { getDisplayName } from 'src\/utils';\n+\n+import type { InternalInstance } from '.\/renderer';\n+import type { FiberData } from '..\/types';\n+\n+export default function getData(internalInstance: InternalInstance): FiberData {\n+ let displayName = null;\n+ let key = null;\n+ let type = ElementTypeOtherOrUnknown;\n+\n+ \/\/ != used deliberately here to catch undefined and null\n+ if (internalInstance._currentElement != null) {\n+ if (internalInstance._currentElement.key) {\n+ key = String(internalInstance._currentElement.key);\n+ }\n+\n+ const elementType = internalInstance._currentElement.type;\n+ if (typeof elementType === 'string') {\n+ \/\/ ...\n+ } else if (typeof elementType === 'function') {\n+ \/\/ TODO Can we differentiate between function and class component types?\n+ \/\/ Dan said _compositeType tells you PureClass, ImpureClass, StatelessFunctional but it was only added in v14\n+ \/\/ getPublicInstance() returns null for function components\n+ type = ElementTypeClass;\n+ displayName = getDisplayName(elementType);\n+ } else if (typeof internalInstance._stringText === 'string') {\n+ \/\/ ...\n+ } else {\n+ \/\/ TODO What kind of case does this cover?\n+ console.log('what is this type?');\n+ displayName = getDisplayName(elementType);\n+ }\n+ }\n+\n+ return {\n+ displayName,\n+ key,\n+ type,\n+ };\n+}\ndiff --git a\/src\/backend\/legacy\/getElementType.js b\/src\/backend\/legacy\/getElementType.js\nnew file mode 100644\nindex 0000000000..1740cfe9ad\n--- \/dev\/null\n+++ b\/src\/backend\/legacy\/getElementType.js\n@@ -0,0 +1,22 @@\n+\/\/ @flow\n+import {\n+ ElementTypeClass,\n+ ElementTypeOtherOrUnknown,\n+} from 'src\/devtools\/types';\n+\n+import type { InternalInstance } from '.\/renderer';\n+import type { ElementType } from 'src\/devtools\/types';\n+\n+export default function getElementType(\n+ internalInstance: InternalInstance\n+): ElementType {\n+ \/\/ != used deliberately here to catch undefined and null\n+ if (internalInstance._currentElement != null) {\n+ const elementType = internalInstance._currentElement.type;\n+ if (typeof elementType === 'function') {\n+ return ElementTypeClass;\n+ }\n+ }\n+\n+ return ElementTypeOtherOrUnknown;\n+}\ndiff --git a\/src\/backend\/legacy\/renderer.js b\/src\/backend\/legacy\/renderer.js\nnew file mode 100644\nindex 0000000000..5d4afa1eb5\n--- \/dev\/null\n+++ b\/src\/backend\/legacy\/renderer.js\n@@ -0,0 +1,787 @@\n+\/\/ @flow\n+\n+import {\n+ ElementTypeClass,\n+ ElementTypeFunction,\n+ ElementTypeRoot,\n+ ElementTypeOtherOrUnknown,\n+} from 'src\/devtools\/types';\n+import { getUID, utfEncodeString, operationsArrayToString } from '..\/..\/utils';\n+import { cleanForBridge, copyWithSet } from '..\/utils';\n+import {\n+ __DEBUG__,\n+ TREE_OPERATION_ADD,\n+ TREE_OPERATION_REMOVE,\n+} from '..\/..\/constants';\n+import getChildren from '.\/getChildren';\n+import getData from '.\/getData';\n+import getElementType from '.\/getElementType';\n+import {\n+ decorateResult,\n+ decorateMany,\n+ forceUpdate,\n+ restoreMany,\n+} from '.\/utils';\n+\n+import type {\n+ DevToolsHook,\n+ GetInternalIDFromNative,\n+ GetNativeFromInternal,\n+ NativeType,\n+ RendererInterface,\n+} from '..\/types';\n+import type { InspectedElement } from 'src\/devtools\/views\/Components\/types';\n+\n+export type InternalInstance = Object;\n+type LegacyRenderer = Object;\n+\n+export function attach(\n+ hook: DevToolsHook,\n+ rendererID: number,\n+ renderer: LegacyRenderer,\n+ global: Object\n+): RendererInterface {\n+ const idToInternalInstanceMap: Map<number, InternalInstance> = new Map();\n+ const idToParentIDMap: Map<number, number> = new Map();\n+ const internalInstanceToIDMap: Map<InternalInstance, number> = new Map();\n+ const mountedIDs: Set<number> = new Set();\n+ const pendingMountIDs: Set<number> = new Set();\n+ const pendingUnmountIDs: Set<number> = new Set();\n+ const rootIDs: Set<number> = new Set();\n+\n+ function getID(internalInstance: InternalInstance): number {\n+ if (!internalInstanceToIDMap.has(internalInstance)) {\n+ const id = getUID();\n+ internalInstanceToIDMap.set(internalInstance, id);\n+ idToInternalInstanceMap.set(id, internalInstance);\n+ }\n+ return ((internalInstanceToIDMap.get(internalInstance): any): number);\n+ }\n+\n+ function getChildIDs(internalInstance: InternalInstance): Array<number> {\n+ return getChildren(internalInstance).map(getID);\n+ }\n+\n+ \/\/function getParentID(internalInstance: InternalInstance): number {\n+ \/\/ return getID(internalInstance._hostParent);\n+ \/\/}\n+\n+ function findNearestAncestorInTree(\n+ internalInstance: InternalInstance\n+ ): number | null {\n+ let current = internalInstance;\n+ while (current != null) {\n+ const id = getID(current);\n+ if (\n+ rootIDs.has(id) ||\n+ getElementType(current) !== ElementTypeOtherOrUnknown\n+ ) {\n+ return id;\n+ }\n+ const parentID = idToParentIDMap.get(id);\n+ current = parentID != null ? idToInternalInstanceMap.get(parentID) : null;\n+ }\n+ return null;\n+ }\n+\n+ let getInternalIDFromNative: GetInternalIDFromNative = ((null: any): GetInternalIDFromNative);\n+ let getNativeFromInternal: (\n+ id: number\n+ ) => ?NativeType = ((null: any): GetNativeFromInternal);\n+\n+ \/\/ React Native\n+ if (renderer.Mount.findNodeHandle && renderer.Mount.nativeTagToRootNodeID) {\n+ getInternalIDFromNative = (nativeTag, findNearestUnfilteredAncestor) => {\n+ const internalInstance = renderer.Mount.nativeTagToRootNodeID(nativeTag);\n+ return findNearestAncestorInTree(internalInstance);\n+ };\n+ getNativeFromInternal = (id: number) => {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ return renderer.Mount.findNodeHandle(internalInstance);\n+ };\n+\n+ \/\/ React DOM 15+\n+ } else if (renderer.ComponentTree) {\n+ getInternalIDFromNative = (node, findNearestUnfilteredAncestor) => {\n+ const internalInstance = renderer.ComponentTree.getClosestInstanceFromNode(\n+ node\n+ );\n+ return findNearestAncestorInTree(internalInstance);\n+ };\n+ getNativeFromInternal = (id: number) => {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ return renderer.ComponentTree.getNodeFromInstance(internalInstance);\n+ };\n+\n+ \/\/ React DOM\n+ } else if (renderer.Mount.getID && renderer.Mount.getNode) {\n+ getInternalIDFromNative = (node, findNearestUnfilteredAncestor) => {\n+ let id = renderer.Mount.getID(node);\n+ while (node && node.parentNode && !id) {\n+ node = node.parentNode;\n+ id = renderer.Mount.getID(node);\n+ }\n+ return id;\n+ };\n+\n+ getNativeFromInternal = (id: number) => {\n+ try {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance != null) {\n+ return renderer.Mount.getNode(internalInstance._rootNodeID);\n+ }\n+ } catch (e) {}\n+\n+ return null;\n+ };\n+ } else {\n+ console.warn(\n+ 'Unknown React version (does not have getID), probably an unshimmed React Native'\n+ );\n+ }\n+\n+ let oldReconcilerMethods = null;\n+ let oldRenderComponent = null;\n+ let oldRenderRoot = null;\n+\n+ \/\/ React DOM\n+ if (renderer.Mount._renderNewRootComponent) {\n+ oldRenderRoot = decorateResult(\n+ renderer.Mount,\n+ '_renderNewRootComponent',\n+ internalInstance => {\n+ const id = getID(internalInstance);\n+\n+ rootIDs.add(id);\n+\n+ if (__DEBUG__) {\n+ console.log('renderer.Mount._renderNewRootComponent()', id);\n+ }\n+\n+ recordPendingMount(internalInstance);\n+\n+ \/\/ If we're mounting a root, we've just finished a batch of work,\n+ \/\/ so it's safe to synchronously flush.\n+ flushPendingEvents(id);\n+ }\n+ );\n+\n+ \/\/ React Native\n+ } else if (renderer.Mount.renderComponent) {\n+ oldRenderComponent = decorateResult(\n+ renderer.Mount,\n+ 'renderComponent',\n+ internalInstance => {\n+ const id = getID(internalInstance);\n+\n+ rootIDs.add(id);\n+\n+ if (__DEBUG__) {\n+ console.log('renderer.Mount.renderComponent()', id);\n+ }\n+\n+ recordPendingMount(internalInstance);\n+\n+ \/\/ If we're mounting a root, we've just finished a batch of work,\n+ \/\/ so it's safe to synchronously flush.\n+ flushPendingEvents(id);\n+ }\n+ );\n+ }\n+\n+ if (renderer.Reconciler) {\n+ oldReconcilerMethods = decorateMany(renderer.Reconciler, {\n+ mountComponent(internalInstance, rootID, transaction, context) {\n+ recordPendingMount(internalInstance);\n+ },\n+ performUpdateIfNecessary(\n+ internalInstance,\n+ nextChild,\n+ transaction,\n+ context\n+ ) {\n+ \/\/ TODO Check for change in order of children\n+ },\n+ receiveComponent(internalInstance, nextChild, transaction, context) {\n+ \/\/ TODO Check for change in order of children\n+ },\n+ unmountComponent(internalInstance) {\n+ recordPendingUnmount(internalInstance);\n+ },\n+ });\n+ }\n+\n+ function cleanup() {\n+ if (oldReconcilerMethods !== null) {\n+ if (renderer.Component) {\n+ restoreMany(renderer.Component.Mixin, oldReconcilerMethods);\n+ } else {\n+ restoreMany(renderer.Reconciler, oldReconcilerMethods);\n+ }\n+ }\n+ if (oldRenderRoot !== null) {\n+ renderer.Mount._renderNewRootComponent = oldRenderRoot;\n+ }\n+ if (oldRenderComponent !== null) {\n+ renderer.Mount.renderComponent = oldRenderComponent;\n+ }\n+ oldReconcilerMethods = null;\n+ oldRenderRoot = null;\n+ oldRenderComponent = null;\n+ }\n+\n+ let pendingOperations: Uint32Array = new Uint32Array(0);\n+\n+ function addOperation(\n+ newAction: Uint32Array,\n+ addToStartOfQueue: boolean = false\n+ ): void {\n+ const oldActions = pendingOperations;\n+ pendingOperations = new Uint32Array(oldActions.length + newAction.length);\n+ if (addToStartOfQueue) {\n+ pendingOperations.set(newAction);\n+ pendingOperations.set(oldActions, newAction.length);\n+ } else {\n+ pendingOperations.set(oldActions);\n+ pendingOperations.set(newAction, oldActions.length);\n+ }\n+ }\n+\n+ \/\/ TODO Rethink the below queueing mechanism.\n+ \/\/ Every mount is some parent's update (except for the root mount which we can explicitly handle)\n+ \/\/ So maybe we only need to call queueFlushPendingEvents() for updates,\n+ \/\/ and maybe we can rely on an id-to-root Map for this case, to limit the scope of what we crawl.\n+\n+ \/\/ Older React renderers did not have the concept of a commit.\n+ \/\/ The data structure was just ad-hoc mutated in place.\n+ \/\/ So except for the case of the root mounting the first time,\n+ \/\/ there is no event we can observe to signal that a render is finished.\n+ \/\/ However since older renderers were always synchronous,\n+ \/\/ we can use setTimeout to batch operations together.\n+ \/\/ In the case of a cascading update, we might batch multiple \"commits\"-\n+ \/\/ but that should be okay, since the batching is not strictly necessary.\n+ let flushPendingEventsTimeoutID: TimeoutID | null = null;\n+ function queueFlushPendingEvents() {\n+ if (flushPendingEventsTimeoutID === null) {\n+ flushPendingEventsTimeoutID = setTimeout(() => {\n+ flushPendingEventsTimeoutID = null;\n+\n+ \/\/ If there are pending operations, walk the tree and find them.\n+ \/\/ Ideally we wouldjust pluck the pending operations out of the sets directly,\n+ \/\/ but without doing a full traversal, it would be hard for us to determine the filtered parent.\n+ \/\/ It should be possible to improve this though, by maintaining a map of id-to-parent,\n+ \/\/ and crawling upward to the first non-filtered node.\n+ \/\/ TODO Revisit this and think about it more...\n+ if (pendingMountIDs.size > 0 || pendingUnmountIDs.size > 0) {\n+ rootIDs.forEach(flushPendingEvents);\n+ }\n+ }, 0);\n+ }\n+ }\n+\n+ function flushInitialOperations() {\n+ \/\/ Older versions of React do not support profiling mode, so there's nothing to flush.\n+ \/\/ Crawl roots though and register any nodes that mounted before we were injected.\n+\n+ const roots =\n+ renderer.Mount._instancesByReactRootID ||\n+ renderer.Mount._instancesByContainerID;\n+\n+ for (let key in roots) {\n+ const internalInstance = roots[key];\n+ const id = getID(internalInstance);\n+\n+ rootIDs.add(id);\n+\n+ crawlAndRecordMounts(id, 0, true);\n+\n+ \/\/ It's safe to synchronously flush for the root we just crawled.\n+ flushPendingEvents(id);\n+ }\n+ }\n+\n+ function crawlAndRecordMounts(\n+ id: number,\n+ parentID: number,\n+ isInitialMount: boolean\n+ ) {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ const shouldIncludeInTree =\n+ parentID === 0 ||\n+ getElementType(internalInstance) !== ElementTypeOtherOrUnknown;\n+\n+ \/\/ Not all nodes are mounted in the frontend DevTools tree,\n+ \/\/ but it's important to track parent info even for the unmounted ones.\n+ idToParentIDMap.set(id, parentID);\n+\n+ if (__DEBUG__) {\n+ console.group(\n+ 'crawlAndRecordMounts() id:',\n+ id,\n+ 'shouldIncludeInTree?',\n+ shouldIncludeInTree\n+ );\n+ }\n+\n+ if (shouldIncludeInTree) {\n+ const didMount = isInitialMount || pendingMountIDs.has(id);\n+ const didUnmount = pendingUnmountIDs.has(id);\n+\n+ \/\/ If this node was both mounted and unmounted in the same batch,\n+ \/\/ just skip it and don't send any update.\n+ if (didMount && didUnmount) {\n+ pendingUnmountIDs.delete(id);\n+ return;\n+ } else if (didMount) {\n+ recordMount(id, parentID);\n+ }\n+ }\n+\n+ getChildIDs(internalInstance).forEach(childID =>\n+ crawlAndRecordMounts(\n+ childID,\n+ shouldIncludeInTree ? id : parentID,\n+ isInitialMount\n+ )\n+ );\n+\n+ if (__DEBUG__) {\n+ console.groupEnd();\n+ }\n+ }\n+\n+ function flushPendingEvents(rootID: number): void {\n+ \/\/ Crawl tree and queue mounts\/updates.\n+ crawlAndRecordMounts(rootID, 0, false);\n+\n+ \/\/ Send pending deletions.\n+ pendingUnmountIDs.forEach(id => {\n+ if (mountedIDs.has(id)) {\n+ recordUnmount(id);\n+ }\n+ });\n+\n+ \/\/ Identify which renderer this update is coming from.\n+ \/\/ This enables roots to be mapped to renderers,\n+ \/\/ Which in turn enables fiber props, states, and hooks to be inspected.\n+ const idArray = new Uint32Array(2);\n+ idArray[0] = rendererID;\n+ idArray[1] = rootID;\n+ addOperation(idArray, true);\n+\n+ if (__DEBUG__) {\n+ operationsArrayToString(pendingOperations);\n+ }\n+\n+ \/\/ If we've already connected to the frontend, just pass the operations through.\n+ hook.emit('operations', pendingOperations);\n+\n+ pendingMountIDs.clear();\n+ pendingUnmountIDs.clear();\n+ pendingOperations = new Uint32Array(0);\n+ }\n+\n+ function inspectElement(id: number): InspectedElement | null {\n+ let result = inspectElementRaw(id);\n+ if (result === null) {\n+ return null;\n+ }\n+ \/\/ TODO Review sanitization approach for the below inspectable values.\n+ result.context = cleanForBridge(result.context);\n+ result.props = cleanForBridge(result.props);\n+ result.state = cleanForBridge(result.state);\n+ return result;\n+ }\n+\n+ function inspectElementRaw(id: number): InspectedElement | null {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ const data = getData(internalInstance);\n+\n+ let context = null;\n+ let owners = null;\n+ let props = null;\n+ let state = null;\n+ let source = null;\n+\n+ if (internalInstance != null) {\n+ const element = internalInstance._currentElement;\n+ if (element !== null) {\n+ props = element.props;\n+ source = element._source != null ? element._source : null;\n+\n+ let owner = element._owner;\n+ if (owner) {\n+ owners = [];\n+ while (owner != null) {\n+ owners.push({\n+ displayName: getData(owner).displayName || 'Unknown',\n+ id: getID(owner),\n+ });\n+ owner = owner.owner;\n+ }\n+ }\n+ }\n+ context = internalInstance.context || null;\n+ state = internalInstance.state || null;\n+ }\n+\n+ return {\n+ id,\n+\n+ \/\/ Hooks did not exist in legacy versions\n+ canEditHooks: false,\n+\n+ \/\/ Does the current renderer support editable function props?\n+ canEditFunctionProps: true,\n+\n+ \/\/ Suspense did not exist in legacy versions\n+ canToggleSuspense: false,\n+\n+ \/\/ Can view component source location.\n+ canViewSource:\n+ data.type === ElementTypeClass || data.type === ElementTypeFunction,\n+\n+ displayName: data.displayName,\n+\n+ \/\/ Inspectable properties.\n+ context,\n+ hooks: null,\n+ props,\n+ state,\n+\n+ \/\/ List of owners\n+ owners,\n+\n+ \/\/ Location of component in source coude.\n+ source,\n+ };\n+ }\n+\n+ function logElementToConsole(id: number): void {\n+ const result = inspectElementRaw(id);\n+ if (result === null) {\n+ console.warn(`Could not find element with id \"${id}\"`);\n+ return;\n+ }\n+\n+ const supportsGroup = typeof console.groupCollapsed === 'function';\n+ if (supportsGroup) {\n+ console.groupCollapsed(\n+ `[Click to expand] %c<${result.displayName || 'Component'} \/>`,\n+ \/\/ --dom-tag-name-color is the CSS variable Chrome styles HTML elements with in the console.\n+ 'color: var(--dom-tag-name-color); font-weight: normal;'\n+ );\n+ }\n+ if (result.props !== null) {\n+ console.log('Props:', result.props);\n+ }\n+ if (result.state !== null) {\n+ console.log('State:', result.state);\n+ }\n+ if (result.context !== null) {\n+ console.log('State:', result.context);\n+ }\n+ const nativeNode = getNativeFromInternal(id);\n+ if (nativeNode !== null) {\n+ console.log('Node:', nativeNode);\n+ }\n+ if (window.chrome || \/firefox\/i.test(navigator.userAgent)) {\n+ console.log(\n+ 'Right-click any value to save it as a global variable for further inspection.'\n+ );\n+ }\n+ if (supportsGroup) {\n+ console.groupEnd();\n+ }\n+ }\n+\n+ function prepareViewElementSource(id: number): void {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance == null) {\n+ console.warn(`Could not find instance with id \"${id}\"`);\n+ return;\n+ }\n+\n+ const element = internalInstance._currentElement;\n+ if (element == null) {\n+ console.warn(`Could not find element with id \"${id}\"`);\n+ return;\n+ }\n+\n+ global.$type = element.type;\n+ }\n+\n+ function selectElement(id: number): void {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance == null) {\n+ console.warn(`Could not find instance with id \"${id}\"`);\n+ return;\n+ }\n+\n+ switch (getElementType(internalInstance)) {\n+ case ElementTypeClass:\n+ case ElementTypeFunction:\n+ const element = internalInstance._currentElement;\n+ if (element == null) {\n+ console.warn(`Could not find element with id \"${id}\"`);\n+ return;\n+ }\n+\n+ global.$r = {\n+ props: element.props,\n+ type: element.type,\n+ };\n+ break;\n+ default:\n+ break;\n+ }\n+ }\n+\n+ function recordPendingMount(internalInstance: InternalInstance) {\n+ pendingMountIDs.add(getID(internalInstance));\n+\n+ if (__DEBUG__) {\n+ console.log(\n+ '%crecordPendingMount()',\n+ 'color: green',\n+ getID(internalInstance)\n+ );\n+ }\n+\n+ queueFlushPendingEvents();\n+ }\n+\n+ function recordPendingUnmount(internalInstance: InternalInstance) {\n+ const id = getID(internalInstance);\n+\n+ pendingUnmountIDs.add(id);\n+\n+ \/\/ Not all nodes are mounted (or unmounted) in the frontend DevTools tree,\n+ \/\/ so it's important to remove entries from this map on pending unmount.\n+ idToParentIDMap.delete(id);\n+\n+ if (__DEBUG__) {\n+ console.log(\n+ '%crecordPendingUnmount()',\n+ 'color: red',\n+ getID(internalInstance)\n+ );\n+ }\n+\n+ queueFlushPendingEvents();\n+ }\n+\n+ function recordMount(id: number, parentID: number) {\n+ const internalInstance = ((idToInternalInstanceMap.get(\n+ id\n+ ): any): InternalInstance);\n+ const isRoot = rootIDs.has(id);\n+\n+ if (__DEBUG__) {\n+ console.log(\n+ '%crecordMount()',\n+ 'color: green; font-weight: bold;',\n+ id,\n+ getData(internalInstance).displayName\n+ );\n+ }\n+\n+ mountedIDs.add(id);\n+\n+ if (isRoot) {\n+ \/\/ TODO Is this right? For all versions?\n+ const hasOwnerMetadata =\n+ internalInstance._currentElement != null &&\n+ internalInstance._currentElement._owner != null;\n+\n+ const operation = new Uint32Array(5);\n+ operation[0] = TREE_OPERATION_ADD;\n+ operation[1] = id;\n+ operation[2] = ElementTypeRoot;\n+ operation[3] = 0; \/\/ isProfilingSupported?\n+ operation[4] = hasOwnerMetadata ? 1 : 0;\n+ addOperation(operation);\n+ } else {\n+ const { displayName, key, type } = getData(internalInstance);\n+\n+ const ownerID =\n+ internalInstance._currentElement != null &&\n+ internalInstance._currentElement._owner != null\n+ ? getID(internalInstance._currentElement._owner)\n+ : 0;\n+\n+ let encodedDisplayName = ((null: any): Uint8Array);\n+ let encodedKey = ((null: any): Uint8Array);\n+\n+ if (displayName !== null) {\n+ encodedDisplayName = utfEncodeString(displayName);\n+ }\n+\n+ if (key !== null) {\n+ \/\/ React$Key supports string and number types as inputs,\n+ \/\/ But React converts numeric keys to strings, so we only have to handle that type here.\n+ \/\/ https:\/\/github.com\/facebook\/react\/blob\/0e67969cb1ad8c27a72294662e68fa5d7c2c9783\/packages\/react\/src\/ReactElement.js#L187\n+ encodedKey = utfEncodeString(((key: any): string));\n+ }\n+\n+ const encodedDisplayNameSize =\n+ displayName === null ? 0 : encodedDisplayName.length;\n+ const encodedKeySize = key === null ? 0 : encodedKey.length;\n+\n+ const operation = new Uint32Array(\n+ 7 + encodedDisplayNameSize + encodedKeySize\n+ );\n+ operation[0] = TREE_OPERATION_ADD;\n+ operation[1] = id;\n+ operation[2] = type;\n+ operation[3] = parentID;\n+ operation[4] = ownerID;\n+ operation[5] = encodedDisplayNameSize;\n+ if (displayName !== null) {\n+ operation.set(encodedDisplayName, 6);\n+ }\n+ operation[6 + encodedDisplayNameSize] = encodedKeySize;\n+ if (key !== null) {\n+ operation.set(encodedKey, 6 + encodedDisplayNameSize + 1);\n+ }\n+ addOperation(operation);\n+ }\n+ }\n+\n+ function recordUnmount(id: number) {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ const isRoot = rootIDs.has(id);\n+\n+ if (__DEBUG__) {\n+ console.log(\n+ '%crecordUnmount()',\n+ 'color: red; font-weight: bold;',\n+ id,\n+ getData(internalInstance).displayName\n+ );\n+ }\n+\n+ if (isRoot) {\n+ const operation = new Uint32Array(2);\n+ operation[0] = TREE_OPERATION_REMOVE;\n+ operation[1] = id;\n+ addOperation(operation);\n+\n+ rootIDs.delete(id);\n+ } else {\n+ const operation = new Uint32Array(2);\n+ operation[0] = TREE_OPERATION_REMOVE;\n+ operation[1] = id;\n+ addOperation(operation);\n+ }\n+\n+ idToInternalInstanceMap.delete(id);\n+ internalInstanceToIDMap.delete(internalInstance);\n+\n+ mountedIDs.delete(id);\n+ }\n+\n+ function setInProps(id: number, path: Array<string | number>, value: any) {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance != null) {\n+ const element = internalInstance._currentElement;\n+ internalInstance._currentElement = {\n+ ...element,\n+ props: copyWithSet(element.props, path, value),\n+ };\n+ forceUpdate(internalInstance._instance);\n+ }\n+ }\n+\n+ function setInState(id: number, path: Array<string | number>, value: any) {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance != null) {\n+ setIn(internalInstance.state, path, value);\n+ internalInstance.forceUpdate();\n+ }\n+ }\n+\n+ function setInContext(id: number, path: Array<string | number>, value: any) {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance != null) {\n+ setIn(internalInstance.context, path, value);\n+ forceUpdate(internalInstance);\n+ }\n+ }\n+\n+ function setIn(obj: Object, path: Array<string | number>, value: any) {\n+ const last = path.pop();\n+ const parent = path.reduce(\n+ \/\/ $FlowFixMe\n+ (reduced, attr) => (reduced ? reduced[attr] : null),\n+ obj\n+ );\n+ if (parent) {\n+ \/\/ $FlowFixMe\n+ parent[last] = value;\n+ }\n+ }\n+\n+ \/\/ v16+ only features\n+ const getCommitDetails = () => {\n+ throw new Error('getCommitDetails not supported by this renderer');\n+ };\n+ const getFiberCommits = () => {\n+ throw new Error('getFiberCommits not supported by this renderer');\n+ };\n+ const getInteractions = () => {\n+ throw new Error('getInteractions not supported by this renderer');\n+ };\n+ const getProfilingDataForDownload = () => {\n+ throw new Error(\n+ 'getProfilingDataForDownload not supported by this renderer'\n+ );\n+ };\n+ const getProfilingSummary = () => {\n+ throw new Error('getProfilingSummary not supported by this renderer');\n+ };\n+ const handleCommitFiberRoot = () => {\n+ throw new Error('handleCommitFiberRoot not supported by this renderer');\n+ };\n+ const handleCommitFiberUnmount = () => {\n+ throw new Error('handleCommitFiberUnmount not supported by this renderer');\n+ };\n+ const overrideSuspense = () => {\n+ throw new Error('overrideSuspense not supported by this renderer');\n+ };\n+ const setInHook = () => {\n+ throw new Error('setInHook not supported by this renderer');\n+ };\n+ const startProfiling = () => {\n+ throw new Error('startProfiling not supported by this renderer');\n+ };\n+ const stopProfiling = () => {\n+ throw new Error('stopProfiling not supported by this renderer');\n+ };\n+\n+ return {\n+ cleanup,\n+ flushInitialOperations,\n+ getCommitDetails,\n+ getFiberCommits,\n+ getInteractions,\n+ getInternalIDFromNative,\n+ getNativeFromInternal,\n+ getProfilingDataForDownload,\n+ getProfilingSummary,\n+ handleCommitFiberRoot,\n+ handleCommitFiberUnmount,\n+ inspectElement,\n+ logElementToConsole,\n+ overrideSuspense,\n+ prepareViewElementSource,\n+ renderer,\n+ selectElement,\n+ setInContext,\n+ setInHook,\n+ setInProps,\n+ setInState,\n+ startProfiling,\n+ stopProfiling,\n+ };\n+}\ndiff --git a\/src\/backend\/legacy\/traverseAllChildrenImpl.js b\/src\/backend\/legacy\/traverseAllChildrenImpl.js\nnew file mode 100644\nindex 0000000000..a7e1cd399c\n--- \/dev\/null\n+++ b\/src\/backend\/legacy\/traverseAllChildrenImpl.js\n@@ -0,0 +1,146 @@\n+\/\/ @flow\n+\n+const SEPARATOR = '.';\n+const SUBSEPARATOR = ':';\n+\n+const FAUX_ITERATOR_SYMBOL = '@@iterator'; \/\/ Before Symbol spec.\n+\/\/ The Symbol used to tag the ReactElement type. If there is no native Symbol\n+\/\/ nor polyfill, then a plain number is used for performance.\n+const ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;\n+const REACT_ELEMENT_TYPE =\n+ (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.element')) ||\n+ 0xeac7;\n+\n+\/**\n+ * Escape and wrap key so it is safe to use as a reactid\n+ *\n+ * @param {string} key to be escaped.\n+ * @return {string} the escaped key.\n+ *\/\n+function escape(key: string): string {\n+ const escapeRegex = \/[=:]\/g;\n+ const escaperLookup = {\n+ '=': '=0',\n+ ':': '=2',\n+ };\n+ const escapedString = ('' + key).replace(escapeRegex, function(match) {\n+ return escaperLookup[match];\n+ });\n+\n+ return '$' + escapedString;\n+}\n+\n+\/**\n+ * Generate a key string that identifies a component within a set.\n+ *\n+ * @param {*} component A component that could contain a manual key.\n+ * @param {number} index Index that is used if a manual key is not provided.\n+ * @return {string}\n+ *\/\n+function getComponentKey(component, index) {\n+ \/\/ Do some typechecking here since we call this blindly. We want to ensure\n+ \/\/ that we don't block potential future ES APIs.\n+ if (\n+ typeof component === 'object' &&\n+ component !== null &&\n+ component.key != null\n+ ) {\n+ \/\/ Explicit key\n+ return escape(component.key);\n+ }\n+ \/\/ Implicit key determined by the index in the set\n+ return index.toString(36);\n+}\n+\n+\/**\n+ * We do a copied the 'traverseAllChildrenImpl' method from\n+ * `React.Children` so that we don't pull in the whole React library.\n+ * @param {?*} children Children tree container.\n+ * @param {!string} nameSoFar Name of the key path so far.\n+ * @param {!function} callback Callback to invoke with each child found.\n+ * @param {?*} traverseContext Used to pass information throughout the traversal\n+ * process.\n+ * @return {!number} The number of children in this subtree.\n+ *\/\n+export default function traverseAllChildrenImpl(\n+ children: any,\n+ nameSoFar: string,\n+ callback: Function,\n+ traverseContext: any\n+): number {\n+ const type = typeof children;\n+\n+ if (type === 'undefined' || type === 'boolean') {\n+ \/\/ All of the above are perceived as null.\n+ children = null;\n+ }\n+\n+ if (\n+ children === null ||\n+ type === 'string' ||\n+ type === 'number' ||\n+ \/\/ The following is inlined from ReactElement. This means we can optimize\n+ \/\/ some checks. React Fiber also inlines this logic for similar purposes.\n+ (type === 'object' && children.$$typeof === REACT_ELEMENT_TYPE)\n+ ) {\n+ callback(\n+ traverseContext,\n+ children,\n+ \/\/ If it's the only child, treat the name as if it was wrapped in an array\n+ \/\/ so that it's consistent if the number of children grows.\n+ nameSoFar === '' ? SEPARATOR + getComponentKey(children, 0) : nameSoFar\n+ );\n+ return 1;\n+ }\n+\n+ let child;\n+ let nextName;\n+ let subtreeCount = 0; \/\/ Count of children found in the current subtree.\n+ let nextNamePrefix = nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR;\n+\n+ if (Array.isArray(children)) {\n+ for (let i = 0; i < children.length; i++) {\n+ child = children[i];\n+ nextName = nextNamePrefix + getComponentKey(child, i);\n+ subtreeCount += traverseAllChildrenImpl(\n+ child,\n+ nextName,\n+ callback,\n+ traverseContext\n+ );\n+ }\n+ } else {\n+ let iteratorFn =\n+ (ITERATOR_SYMBOL && children[ITERATOR_SYMBOL]) ||\n+ children[FAUX_ITERATOR_SYMBOL];\n+ if (typeof iteratorFn === 'function') {\n+ let iterator = iteratorFn.call(children);\n+ let step;\n+ let ii = 0;\n+ while (!(step = iterator.next()).done) {\n+ child = step.value;\n+ nextName = nextNamePrefix + getComponentKey(child, ii++);\n+ subtreeCount += traverseAllChildrenImpl(\n+ child,\n+ nextName,\n+ callback,\n+ traverseContext\n+ );\n+ }\n+ } else if (type === 'object') {\n+ let addendum =\n+ ' If you meant to render a collection of children, use an array ' +\n+ 'instead.';\n+ let childrenString = '' + children;\n+ throw Error(\n+ `The React Devtools cannot render an object as a child. (found: ${\n+ childrenString === '[object Object]'\n+ ? 'object with keys {' + Object.keys(children).join(', ') + '}'\n+ : childrenString\n+ }). ${addendum}`\n+ );\n+ }\n+ }\n+\n+ return subtreeCount;\n+}\ndiff --git a\/src\/backend\/legacy\/utils.js b\/src\/backend\/legacy\/utils.js\nnew file mode 100644\nindex 0000000000..49a67888a2\n--- \/dev\/null\n+++ b\/src\/backend\/legacy\/utils.js\n@@ -0,0 +1,55 @@\n+\/\/ @flow\n+\n+import type { InternalInstance } from '.\/renderer';\n+\n+export function decorateResult(\n+ object: Object,\n+ attr: string,\n+ fn: Function\n+): Function {\n+ const old = object[attr];\n+ object[attr] = function(instance: InternalInstance) {\n+ const res = old.apply(this, arguments);\n+ fn(res);\n+ return res;\n+ };\n+ return old;\n+}\n+\n+export function decorate(object: Object, attr: string, fn: Function): Function {\n+ const old = object[attr];\n+ object[attr] = function(instance: InternalInstance) {\n+ const res = old.apply(this, arguments);\n+ fn.apply(this, arguments);\n+ return res;\n+ };\n+ return old;\n+}\n+\n+export function decorateMany(\n+ source: Object,\n+ fns: { [attr: string]: Function }\n+): Object {\n+ const olds = {};\n+ for (const name in fns) {\n+ olds[name] = decorate(source, name, fns[name]);\n+ }\n+ return olds;\n+}\n+\n+export function restoreMany(source: Object, olds: Object): void {\n+ for (let name in olds) {\n+ source[name] = olds[name];\n+ }\n+}\n+\n+export function forceUpdate(instance: InternalInstance): void {\n+ if (typeof instance.forceUpdate === 'function') {\n+ instance.forceUpdate();\n+ } else if (\n+ instance.updater != null &&\n+ typeof instance.updater.enqueueForceUpdate === 'function'\n+ ) {\n+ instance.updater.enqueueForceUpdate(this, () => {}, 'forceUpdate');\n+ }\n+}\ndiff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex 7aa8b1555a..d0acd59fa5 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -14,7 +14,7 @@ import {\n ElementTypeRoot,\n ElementTypeSuspense,\n } from 'src\/devtools\/types';\n-import { getDisplayName, utfEncodeString } from '..\/utils';\n+import { getDisplayName, getUID, utfEncodeString } from '..\/utils';\n import { cleanForBridge, copyWithSet, setInObject } from '.\/utils';\n import {\n __DEBUG__,\n@@ -25,7 +25,6 @@ import {\n TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN,\n TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n } from '..\/constants';\n-import { getUID } from '..\/utils';\n import { inspectHooksOfFiber } from '.\/ReactDebugHooks';\n \n import type {\n@@ -312,8 +311,6 @@ export function attach(\n : symbolOrNumber;\n }\n \n- \/\/ TODO: we might want to change the data structure once we no longer suppport Stack versions of `getData`.\n- \/\/ TODO: Keep in sync with getElementType()\n function getDataForFiber(fiber: Fiber): FiberData {\n const { elementType, type, key, tag } = fiber;\n \n@@ -1166,7 +1163,7 @@ export function attach(\n currentRootID = -1;\n }\n \n- function findNativeByFiberID(id: number) {\n+ function getNativeFromInternal(id: number) {\n try {\n const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));\n if (fiber === null) {\n@@ -1190,7 +1187,7 @@ export function attach(\n }\n }\n \n- function getFiberIDFromNative(\n+ function getInternalIDFromNative(\n hostInstance,\n findNearestUnfilteredAncestor = false\n ) {\n@@ -1441,6 +1438,14 @@ export function attach(\n case ForwardRef:\n global.$type = fiber.type.render;\n break;\n+ case MemoComponent:\n+ case SimpleMemoComponent:\n+ const { elementType, type } = fiber;\n+ global.$type =\n+ elementType != null && elementType.type != null\n+ ? elementType.type\n+ : type;\n+ break;\n default:\n global.$type = null;\n break;\n@@ -1483,7 +1488,9 @@ export function attach(\n tag === FunctionComponent ||\n tag === IncompleteClassComponent ||\n tag === IndeterminateComponent ||\n- tag === ForwardRef\n+ tag === MemoComponent ||\n+ tag === ForwardRef ||\n+ tag === SimpleMemoComponent\n ) {\n canViewSource = true;\n if (stateNode && stateNode.context != null) {\n@@ -1623,7 +1630,7 @@ export function attach(\n if (result.hooks !== null) {\n console.log('Hooks:', result.hooks);\n }\n- const nativeNode = findNativeByFiberID(id);\n+ const nativeNode = getNativeFromInternal(id);\n if (nativeNode !== null) {\n console.log('Node:', nativeNode);\n }\n@@ -1938,10 +1945,10 @@ export function attach(\n cleanup,\n flushInitialOperations,\n getCommitDetails,\n- getFiberIDFromNative,\n+ getInternalIDFromNative,\n getFiberCommits,\n getInteractions,\n- findNativeByFiberID,\n+ getNativeFromInternal,\n getProfilingDataForDownload,\n getProfilingSummary,\n handleCommitFiberRoot,\ndiff --git a\/src\/backend\/types.js b\/src\/backend\/types.js\nindex bd4562eef7..afd060bb48 100644\n--- a\/src\/backend\/types.js\n+++ b\/src\/backend\/types.js\n@@ -19,7 +19,7 @@ export type FiberData = {|\n type: ElementType,\n |};\n \n-export type NativeType = {};\n+export type NativeType = Object;\n export type RendererID = number;\n \n type Dispatcher = any;\n@@ -90,17 +90,20 @@ export type ProfilingSummary = {|\n rootID: number,\n |};\n \n+export type GetInternalIDFromNative = (\n+ component: NativeType,\n+ findNearestUnfilteredAncestor?: boolean\n+) => number | null;\n+export type GetNativeFromInternal = (id: number) => ?NativeType;\n+\n export type RendererInterface = {\n cleanup: () => void,\n- findNativeByFiberID: (id: number) => ?NativeType,\n flushInitialOperations: () => void,\n getCommitDetails: (rootID: number, commitIndex: number) => CommitDetails,\n- getFiberIDFromNative: (\n- component: NativeType,\n- findNearestUnfilteredAncestor?: boolean\n- ) => number | null,\n getFiberCommits: (rootID: number, fiberID: number) => FiberCommits,\n getInteractions: (rootID: number) => Interactions,\n+ getInternalIDFromNative: GetInternalIDFromNative,\n+ getNativeFromInternal: GetNativeFromInternal,\n getProfilingDataForDownload: (rootID: number) => Object,\n getProfilingSummary: (rootID: number) => ProfilingSummary,\n handleCommitFiberRoot: (fiber: Object) => void,\n@@ -112,14 +115,14 @@ export type RendererInterface = {\n renderer: ReactRenderer | null,\n selectElement: (id: number) => void,\n setInContext: (id: number, path: Array<string | number>, value: any) => void,\n+ setInProps: (id: number, path: Array<string | number>, value: any) => void,\n+ setInState: (id: number, path: Array<string | number>, value: any) => void,\n setInHook: (\n id: number,\n index: number,\n path: Array<string | number>,\n value: any\n ) => void,\n- setInProps: (id: number, path: Array<string | number>, value: any) => void,\n- setInState: (id: number, path: Array<string | number>, value: any) => void,\n startProfiling: () => void,\n stopProfiling: () => void,\n };\ndiff --git a\/src\/utils.js b\/src\/utils.js\nindex f085f550d5..7065a6fe3c 100644\n--- a\/src\/utils.js\n+++ b\/src\/utils.js\n@@ -1,6 +1,16 @@\n \/\/ @flow\n \n-const LRU = require('lru-cache');\n+import LRU from 'lru-cache';\n+import {\n+ TREE_OPERATION_ADD,\n+ TREE_OPERATION_REMOVE,\n+ TREE_OPERATION_RESET_CHILDREN,\n+ TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN,\n+ TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n+} from '.\/constants';\n+import { ElementTypeRoot } from 'src\/devtools\/types';\n+\n+import type { ElementType } from 'src\/devtools\/types';\n \n const FB_MODULE_RE = \/^(.*) \\[from (.*)\\]$\/;\n const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();\n@@ -76,3 +86,96 @@ export function utfEncodeString(string: string): Uint32Array {\n function toCodePoint(string: string) {\n return string.codePointAt(0);\n }\n+\n+export function operationsArrayToString(operations: Uint32Array) {\n+ const rendererID = operations[0];\n+ const rootID = operations[1];\n+\n+ console.group('rendererID:', rendererID, 'rootID:', rootID);\n+\n+ let i = 2;\n+ while (i < operations.length) {\n+ let id: number = ((null: any): number);\n+ let parentID: number = ((null: any): number);\n+ let type: ElementType = ((null: any): ElementType);\n+\n+ const operation = operations[i];\n+\n+ switch (operation) {\n+ case TREE_OPERATION_ADD:\n+ id = ((operations[i + 1]: any): number);\n+ type = ((operations[i + 2]: any): ElementType);\n+\n+ i = i + 3;\n+\n+ if (type === ElementTypeRoot) {\n+ console.log(`Add root fiber ${id}`);\n+\n+ i++; \/\/ supportsProfiling\n+ i++; \/\/ hasOwnerMetadata\n+ } else {\n+ parentID = ((operations[i]: any): number);\n+ i++;\n+\n+ i++; \/\/ ownerID\n+\n+ const displayNameLength = operations[i];\n+ i++;\n+ const displayName =\n+ displayNameLength === 0\n+ ? null\n+ : utfDecodeString(\n+ (operations.slice(i, i + displayNameLength): any)\n+ );\n+ i += displayNameLength;\n+\n+ const keyLength = operations[i];\n+ i++;\n+ i += +keyLength;\n+\n+ console.log(\n+ `Add fiber ${id} (${displayName || 'null'}) as child of ${parentID}`\n+ );\n+ }\n+ break;\n+ case TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN: {\n+ id = ((operations[i + 1]: any): number);\n+\n+ i = i + 2;\n+\n+ console.log(`Recursively remove children from fiber ${id}`);\n+ break;\n+ }\n+ case TREE_OPERATION_REMOVE: {\n+ id = ((operations[i + 1]: any): number);\n+\n+ i = i + 2;\n+\n+ console.log(`Remove fiber ${id}`);\n+ break;\n+ }\n+ case TREE_OPERATION_RESET_CHILDREN:\n+ id = ((operations[i + 1]: any): number);\n+ const numChildren = ((operations[i + 2]: any): number);\n+ const children = ((operations.slice(\n+ i + 3,\n+ i + 3 + numChildren\n+ ): any): Array<number>);\n+\n+ i = i + 3 + numChildren;\n+\n+ console.log(`Re-order fiber ${id} children ${children.join(',')}`);\n+ break;\n+ case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:\n+ \/\/ Base duration updates are only sent while profiling is in progress.\n+ \/\/ We can ignore them at this point.\n+ \/\/ The profiler UI uses them lazily in order to generate the tree.\n+ i = i + 3;\n+ break;\n+ default:\n+ throw Error(`Unsupported Bridge operation ${operation}`);\n+ }\n+ }\n+\n+ console.groupEnd();\n+}\n","body":"","commit":{"shortRevision":"7ab93402a8","authorName":"Brian Vaughn","authoredAt":"2019-04-16T10:22:26-07:00","subject":"Initial support for v15+ via new legaacy renderer","revision":"7ab93402a8de30fa7e0e885ff40aae2890b901c7","authorEmail":"bvaughn@fb.com"},"parents":["0d932d770bb4328fc1e6acdb00ca5dbf43288ad4"],"files":[{"status":"M","path":".gitignore"},{"status":"A","path":"fixtures\/regression\/14.9.html"},{"status":"A","path":"fixtures\/regression\/15.0.html"},{"status":"A","path":"fixtures\/regression\/15.1.html"},{"status":"A","path":"fixtures\/regression\/15.2.html"},{"status":"A","path":"fixtures\/regression\/15.3.html"},{"status":"A","path":"fixtures\/regression\/15.4.html"},{"status":"A","path":"fixtures\/regression\/15.5.html"},{"status":"A","path":"fixtures\/regression\/15.6.html"},{"status":"A","path":"fixtures\/regression\/16.0.html"},{"status":"A","path":"fixtures\/regression\/16.1.html"},{"status":"A","path":"fixtures\/regression\/16.2.html"},{"status":"A","path":"fixtures\/regression\/16.3.html"},{"status":"A","path":"fixtures\/regression\/16.4.html"},{"status":"A","path":"fixtures\/regression\/16.5.html"},{"status":"A","path":"fixtures\/regression\/16.6.html"},{"status":"A","path":"fixtures\/regression\/16.7.html"},{"status":"A","path":"fixtures\/regression\/canary.html"},{"status":"A","path":"fixtures\/regression\/index.html"},{"status":"A","path":"fixtures\/regression\/next.html"},{"status":"A","path":"fixtures\/regression\/shared.js"},{"status":"A","path":"fixtures\/regression\/styles.css"},{"status":"M","path":"src\/backend\/agent.js"},{"status":"M","path":"src\/backend\/index.js"},{"status":"A","path":"src\/backend\/legacy\/getChildren.js"},{"status":"A","path":"src\/backend\/legacy\/getData.js"},{"status":"A","path":"src\/backend\/legacy\/getElementType.js"},{"status":"A","path":"src\/backend\/legacy\/renderer.js"},{"status":"A","path":"src\/backend\/legacy\/traverseAllChildrenImpl.js"},{"status":"A","path":"src\/backend\/legacy\/utils.js"},{"status":"M","path":"src\/backend\/renderer.js"},{"status":"M","path":"src\/backend\/types.js"},{"status":"M","path":"src\/utils.js"}]}</article></body></html>

{"patch":"diff --git a\/.gitignore b\/.gitignore\nindex 85e420fd9f..b3eab07625 100644\n--- a\/.gitignore\n+++ b\/.gitignore\n@@ -12,5 +12,4 @@ yarn-error.log\n .vscode\n .idea\n .watchmanconfig\n-key.pem\n-\n+key.pem\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/14.9.html b\/fixtures\/regression\/14.9.html\nnew file mode 100644\nindex 0000000000..e92a308301\n--- \/dev\/null\n+++ b\/fixtures\/regression\/14.9.html\n@@ -0,0 +1,39 @@\n+\n+\n+ \n+ \n+ React 14.9<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@0.14.9\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@0.14.9\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/14.9.html\">http:\/\/localhost:9000\/fixtures\/regression\/14.9.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.0.html b\/fixtures\/regression\/15.0.html\nnew file mode 100644\nindex 0000000000..b3f05333c2\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.0.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.0<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.0\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.0\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/15.0.html\">http:\/\/localhost:9000\/fixtures\/regression\/15.0.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.1.html b\/fixtures\/regression\/15.1.html\nnew file mode 100644\nindex 0000000000..8712b56a9e\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.1.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.1<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.1\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.1\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/15.1.html\">http:\/\/localhost:9000\/fixtures\/regression\/15.1.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.2.html b\/fixtures\/regression\/15.2.html\nnew file mode 100644\nindex 0000000000..acde32fe21\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.2.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.2<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.2\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.2\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/15.2.html\">http:\/\/localhost:9000\/fixtures\/regression\/15.2.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.3.html b\/fixtures\/regression\/15.3.html\nnew file mode 100644\nindex 0000000000..ced3559ea6\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.3.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.3<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.3\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.3\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/15.3.html\">http:\/\/localhost:9000\/fixtures\/regression\/15.3.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.4.html b\/fixtures\/regression\/15.4.html\nnew file mode 100644\nindex 0000000000..0f23cdea7d\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.4.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.4<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.4\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.4\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/15.4.html\">http:\/\/localhost:9000\/fixtures\/regression\/15.4.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.5.html b\/fixtures\/regression\/15.5.html\nnew file mode 100644\nindex 0000000000..361512d9bd\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.5.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.5<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.5\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.5\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/15.5.html\">http:\/\/localhost:9000\/fixtures\/regression\/15.5.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/15.6.html b\/fixtures\/regression\/15.6.html\nnew file mode 100644\nindex 0000000000..97ff99ccf5\n--- \/dev\/null\n+++ b\/fixtures\/regression\/15.6.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 15.6<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@15.6\/dist\/react.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@15.6\/dist\/react-dom.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/15.6.html\">http:\/\/localhost:9000\/fixtures\/regression\/15.6.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.0.html b\/fixtures\/regression\/16.0.html\nnew file mode 100644\nindex 0000000000..ea5cf812c9\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.0.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.0<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16.0\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.0\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/16.0.html\">http:\/\/localhost:9000\/fixtures\/regression\/16.0.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.1.html b\/fixtures\/regression\/16.1.html\nnew file mode 100644\nindex 0000000000..494cc97900\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.1.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.1<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16.1\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.1\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/16.1.html\">http:\/\/localhost:9000\/fixtures\/regression\/16.1.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.2.html b\/fixtures\/regression\/16.2.html\nnew file mode 100644\nindex 0000000000..b1c3186720\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.2.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.2<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16.2\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.2\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/16.2.html\">http:\/\/localhost:9000\/fixtures\/regression\/16.2.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.3.html b\/fixtures\/regression\/16.3.html\nnew file mode 100644\nindex 0000000000..76799903d8\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.3.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.3<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16.3\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.3\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/16.3.html\">http:\/\/localhost:9000\/fixtures\/regression\/16.3.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.4.html b\/fixtures\/regression\/16.4.html\nnew file mode 100644\nindex 0000000000..ca6c30dec1\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.4.html\n@@ -0,0 +1,39 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.4<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/react@16.4\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.4\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/16.4.html\">http:\/\/localhost:9000\/fixtures\/regression\/16.4.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.5.html b\/fixtures\/regression\/16.5.html\nnew file mode 100644\nindex 0000000000..48e14a457c\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.5.html\n@@ -0,0 +1,41 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.5<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/schedule@0.5.0\/umd\/schedule.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/schedule@0.5.0\/umd\/schedule-tracing.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react@16.5\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.5\/umd\/react-dom.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/16.5.html\">http:\/\/localhost:9000\/fixtures\/regression\/16.5.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.6.html b\/fixtures\/regression\/16.6.html\nnew file mode 100644\nindex 0000000000..ca32dc5b9c\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.6.html\n@@ -0,0 +1,42 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.6<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/scheduler@0.10.0\/umd\/scheduler.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/scheduler@0.10.0\/umd\/scheduler-tracing.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react@16.6\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.6\/umd\/react-dom.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-cache@2.0.0-alpha.1\/umd\/react-cache.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/16.6.html\">http:\/\/localhost:9000\/fixtures\/regression\/16.6.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/16.7.html b\/fixtures\/regression\/16.7.html\nnew file mode 100644\nindex 0000000000..2b7ec759fa\n--- \/dev\/null\n+++ b\/fixtures\/regression\/16.7.html\n@@ -0,0 +1,42 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React 16.7<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/scheduler@0.12.0\/umd\/scheduler.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/scheduler@0.12.0\/umd\/scheduler-tracing.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react@16.7\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@16.7\/umd\/react-dom.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-cache@2.0.0-alpha.1\/umd\/react-cache.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/16.7.html\">http:\/\/localhost:9000\/fixtures\/regression\/16.7.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/canary.html b\/fixtures\/regression\/canary.html\nnew file mode 100644\nindex 0000000000..cd25e6162a\n--- \/dev\/null\n+++ b\/fixtures\/regression\/canary.html\n@@ -0,0 +1,42 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React canary<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/scheduler@canary\/umd\/scheduler.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/scheduler@canary\/umd\/scheduler-tracing.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react@canary\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@canary\/umd\/react-dom.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-cache@next\/umd\/react-cache.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/canary.html\">http:\/\/localhost:9000\/fixtures\/regression\/canary.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/index.html b\/fixtures\/regression\/index.html\nnew file mode 100644\nindex 0000000000..125a8e8baf\n--- \/dev\/null\n+++ b\/fixtures\/regression\/index.html\n@@ -0,0 +1,28 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React DevTools regression test<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+ <\/head>\n+ <body>\n+ <iframe src=\"canary.html\"><\/iframe>\n+ <iframe src=\"next.html\"><\/iframe>\n+ <iframe src=\"16.7.html\"><\/iframe>\n+ <iframe src=\"16.6.html\"><\/iframe>\n+ <iframe src=\"16.5.html\"><\/iframe>\n+ <iframe src=\"16.4.html\"><\/iframe>\n+ <iframe src=\"16.3.html\"><\/iframe>\n+ <iframe src=\"16.2.html\"><\/iframe>\n+ <iframe src=\"16.1.html\"><\/iframe>\n+ <iframe src=\"16.0.html\"><\/iframe>\n+ <iframe src=\"15.6.html\"><\/iframe>\n+ <iframe src=\"15.5.html\"><\/iframe>\n+ <iframe src=\"15.4.html\"><\/iframe>\n+ <iframe src=\"15.3.html\"><\/iframe>\n+ <iframe src=\"15.2.html\"><\/iframe>\n+ <iframe src=\"15.1.html\"><\/iframe>\n+ <iframe src=\"15.0.html\"><\/iframe>\n+ <iframe src=\"14.9.html\"><\/iframe>\n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/next.html b\/fixtures\/regression\/next.html\nnew file mode 100644\nindex 0000000000..c457f03acc\n--- \/dev\/null\n+++ b\/fixtures\/regression\/next.html\n@@ -0,0 +1,42 @@\n+<!DOCTYPE html>\n+<html>\n+ <head>\n+ <meta charset=\"UTF-8\" \/>\n+ <title>React next<\/title>\n+ <link rel=\"stylesheet\" href=\"styles.css\" \/>\n+\n+ <script type=\"text\/javascript\">\n+ \/\/ Enable DevTools to inspect React inside of an <iframe>\n+ \/\/ This must run before React is loaded\n+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n+ <\/script>\n+\n+ <script src=\"https:\/\/unpkg.com\/scheduler@next\/umd\/scheduler.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/scheduler@next\/umd\/scheduler-tracing.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react@next\/umd\/react.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-dom@next\/umd\/react-dom.development.js\"><\/script>\n+ <script src=\"https:\/\/unpkg.com\/react-cache@next\/umd\/react-cache.development.js\"><\/script>\n+ \n+ \n+ <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\n+ <\/head>\n+ <body>\n+ <div id=\"root\">\n+ If you are seeing this message, you are likely viewing this file using the <code>file<\/code> protocol which does not support cross origin requests.\n+ <br\/><br\/>\n+ Use a web server like <code>serve<\/code> instead:\n+ <br\/><br\/>\n+ <code>npm install -g pushstate-server<\/code><br\/>\n+ <code>pushstate-server .<\/code><br\/>\n+ <code>open <a href=\"http:\/\/localhost:9000\/fixtures\/regression\/next.html\">http:\/\/localhost:9000\/fixtures\/regression\/next.html<\/a><\/code>\n+ <\/div>\n+\n+ <script src=\"shared.js\" type=\"text\/babel\"><\/script>\n+\n+ \n+ <\/body>\n+<\/html>\n\\ No newline at end of file\ndiff --git a\/fixtures\/regression\/shared.js b\/fixtures\/regression\/shared.js\nnew file mode 100644\nindex 0000000000..362e02e911\n--- \/dev\/null\n+++ b\/fixtures\/regression\/shared.js\n@@ -0,0 +1,330 @@\n+\/* eslint-disable no-fallthrough, react\/react-in-jsx-scope, react\/jsx-no-undef *\/\n+\/* global React ReactCache ReactDOM SchedulerTracing ScheduleTracing *\/\n+\n+const apps = [];\n+\n+const pieces = React.version.split('.');\n+const major =\n+ pieces[0] === '0' ? parseInt(pieces[1], 10) : parseInt(pieces[0], 10);\n+const minor =\n+ pieces[0] === '0' ? parseInt(pieces[2], 10) : parseInt(pieces[1], 10);\n+\n+\/\/ Convenience wrapper to organize API features in DevTools.\n+function Feature({ children, label, version }) {\n+ return (\n+ <div className=\"Feature\">\n+ <div className=\"FeatureHeader\">\n+ <code className=\"FeatureCode\">{label}<\/code>\n+ <small>{version}<\/small>\n+ <\/div>\n+ {children}\n+ <\/div>\n+ );\n+}\n+\n+\/\/ Simplify interaction tracing for tests below.\n+let trace = null;\n+if (typeof SchedulerTracing !== 'undefined') {\n+ trace = SchedulerTracing.unstable_trace;\n+} else if (typeof ScheduleTracing !== 'undefined') {\n+ trace = ScheduleTracing.unstable_trace;\n+} else {\n+ trace = (_, __, callback) => callback();\n+}\n+\n+\/\/ https:\/\/github.com\/facebook\/react\/blob\/master\/CHANGELOG.md\n+switch (major) {\n+ case 16:\n+ switch (minor) {\n+ case 7:\n+ if (typeof React.useState === 'function') {\n+ \/\/ Hooks\n+ function Hooks() {\n+ const [count, setCount] = React.useState(0);\n+ const incrementCount = React.useCallback(\n+ () => setCount(count + 1),\n+ [count]\n+ );\n+ return (\n+ <div>\n+ count: {count}{' '}\n+ <button onClick={incrementCount}>increment<\/button>\n+ <\/div>\n+ );\n+ }\n+ apps.push(\n+ <Feature key=\"Hooks\" label=\"Hooks\" version=\"16.7+\">\n+ <Hooks \/>\n+ <\/Feature>\n+ );\n+ }\n+ case 6:\n+ \/\/ memo\n+ function LabelComponent({ label }) {\n+ return <label>{label}<\/label>;\n+ }\n+ const AnonymousMemoized = React.memo(({ label }) => (\n+ <label>{label}<\/label>\n+ ));\n+ const Memoized = React.memo(LabelComponent);\n+ const CustomMemoized = React.memo(LabelComponent);\n+ CustomMemoized.displayName = 'MemoizedLabelFunction';\n+ apps.push(\n+ <Feature key=\"memo\" label=\"memo\" version=\"16.6+\">\n+ <AnonymousMemoized label=\"AnonymousMemoized\" \/>\n+ <Memoized label=\"Memoized\" \/>\n+ <CustomMemoized label=\"CustomMemoized\" \/>\n+ <\/Feature>\n+ );\n+\n+ \/\/ Suspense\n+ const loadResource = ([text, ms]) => {\n+ return new Promise((resolve, reject) => {\n+ setTimeout(() => {\n+ resolve(text);\n+ }, ms);\n+ });\n+ };\n+ const getResourceKey = ([text, ms]) => text;\n+ const Resource = ReactCache.unstable_createResource(\n+ loadResource,\n+ getResourceKey\n+ );\n+ class Suspending extends React.Component {\n+ state = { useSuspense: false };\n+ useSuspense = () => this.setState({ useSuspense: true });\n+ render() {\n+ if (this.state.useSuspense) {\n+ const text = Resource.read(['loaded', 2000]);\n+ return text;\n+ } else {\n+ return <button onClick={this.useSuspense}>load data<\/button>;\n+ }\n+ }\n+ }\n+ apps.push(\n+ <Feature key=\"Suspense\" label=\"Suspense\" version=\"16.6+\">\n+ <React.Suspense fallback={<div>loading...<\/div>}>\n+ <Suspending \/>\n+ <\/React.Suspense>\n+ <\/Feature>\n+ );\n+\n+ \/\/ lazy\n+ const LazyWithDefaultProps = React.lazy(\n+ () =>\n+ new Promise(resolve => {\n+ function FooWithDefaultProps(props) {\n+ return (\n+ <h1>\n+ {props.greeting}, {props.name}\n+ <\/h1>\n+ );\n+ }\n+ FooWithDefaultProps.defaultProps = {\n+ name: 'World',\n+ greeting: 'Bonjour',\n+ };\n+ resolve({\n+ default: FooWithDefaultProps,\n+ });\n+ })\n+ );\n+ apps.push(\n+ <Feature key=\"lazy\" label=\"lazy\" version=\"16.6+\">\n+ <React.Suspense fallback={<div>loading...<\/div>}>\n+ <LazyWithDefaultProps greeting=\"Hello\" \/>\n+ <\/React.Suspense>\n+ <\/Feature>\n+ );\n+ case 5:\n+ case 4:\n+ \/\/ unstable_Profiler\n+ class ProfilerChild extends React.Component {\n+ state = { count: 0 };\n+ incrementCount = () =>\n+ this.setState(prevState => ({ count: prevState.count + 1 }));\n+ render() {\n+ return (\n+ <div>\n+ count: {this.state.count}{' '}\n+ <button onClick={this.incrementCount}>increment<\/button>\n+ <\/div>\n+ );\n+ }\n+ }\n+ const onRender = (...args) => console.log('onRender()', ...args);\n+ const Profiler = React.unstable_Profiler || React.Profiler;\n+ apps.push(\n+ <Feature\n+ key=\"unstable_Profiler\"\n+ label=\"unstable_Profiler\"\n+ version=\"16.4+\"\n+ >\n+ <Profiler id=\"count\" onRender={onRender}>\n+ <div>\n+ <ProfilerChild \/>\n+ <\/div>\n+ <\/Profiler>\n+ <\/Feature>\n+ );\n+ case 3:\n+ \/\/ createContext()\n+ const LocaleContext = React.createContext();\n+ LocaleContext.displayName = 'LocaleContext';\n+ const ThemeContext = React.createContext();\n+ apps.push(\n+ <Feature key=\"createContext\" label=\"createContext\" version=\"16.3+\">\n+ <ThemeContext.Provider value=\"blue\">\n+ <ThemeContext.Consumer>\n+ {theme => <div>theme: {theme}<\/div>}\n+ <\/ThemeContext.Consumer>\n+ <\/ThemeContext.Provider>\n+ <LocaleContext.Provider value=\"en-US\">\n+ <LocaleContext.Consumer>\n+ {locale => <div>locale: {locale}<\/div>}\n+ <\/LocaleContext.Consumer>\n+ <\/LocaleContext.Provider>\n+ <\/Feature>\n+ );\n+\n+ \/\/ forwardRef()\n+ const AnonymousFunction = React.forwardRef((props, ref) => (\n+ <div ref={ref}>{props.children}<\/div>\n+ ));\n+ const NamedFunction = React.forwardRef(function named(props, ref) {\n+ return <div ref={ref}>{props.children}<\/div>;\n+ });\n+ const CustomName = React.forwardRef((props, ref) => (\n+ <div ref={ref}>{props.children}<\/div>\n+ ));\n+ CustomName.displayName = 'CustomNameForwardRef';\n+ apps.push(\n+ <Feature key=\"forwardRef\" label=\"forwardRef\" version=\"16.3+\">\n+ <AnonymousFunction>AnonymousFunction<\/AnonymousFunction>\n+ <NamedFunction>NamedFunction<\/NamedFunction>\n+ <CustomName>CustomName<\/CustomName>\n+ <\/Feature>\n+ );\n+\n+ \/\/ StrictMode\n+ class StrictModeChild extends React.Component {\n+ render() {\n+ return 'StrictModeChild';\n+ }\n+ }\n+ apps.push(\n+ <Feature key=\"StrictMode\" label=\"StrictMode\" version=\"16.3+\">\n+ <React.StrictMode>\n+ <StrictModeChild \/>\n+ <\/React.StrictMode>\n+ <\/Feature>\n+ );\n+\n+ \/\/ unstable_AsyncMode (later renamed to unstable_ConcurrentMode, then ConcurrentMode)\n+ const ConcurrentMode =\n+ React.ConcurrentMode ||\n+ React.unstable_ConcurrentMode ||\n+ React.unstable_AsyncMode;\n+ apps.push(\n+ <Feature\n+ key=\"AsyncMode\/ConcurrentMode\"\n+ label=\"AsyncMode\/ConcurrentMode\"\n+ version=\"16.3+\"\n+ >\n+ <ConcurrentMode>\n+ <div>\n+ unstable_AsyncMode was added in 16.3, renamed to\n+ unstable_ConcurrentMode in 16.5, and then renamed to\n+ ConcurrentMode in 16.7\n+ <\/div>\n+ <\/ConcurrentMode>\n+ <\/Feature>\n+ );\n+ case 2:\n+ \/\/ Fragment\n+ apps.push(\n+ <Feature key=\"Fragment\" label=\"Fragment\" version=\"16.4+\">\n+ <React.Fragment>\n+ <div>one<\/div>\n+ <div>two<\/div>\n+ <\/React.Fragment>\n+ <\/Feature>\n+ );\n+ case 1:\n+ case 0:\n+ default:\n+ break;\n+ }\n+ break;\n+ case 15:\n+ break;\n+ case 14:\n+ break;\n+ default:\n+ break;\n+}\n+\n+function Even() {\n+ return <small>(even)<\/small>;\n+}\n+\n+\/\/ Simple stateful app shared by all React versions\n+class SimpleApp extends React.Component {\n+ state = { count: 0 };\n+ incrementCount = () => {\n+ const updaterFn = prevState => ({ count: prevState.count + 1 });\n+ trace('Updating count', performance.now(), () => this.setState(updaterFn));\n+ };\n+ render() {\n+ const { count } = this.state;\n+ return (\n+ <div>\n+ {count % 2 === 0 ? (\n+ <span>\n+ count: {count} <Even \/>\n+ <\/span>\n+ ) : (\n+ <span>count: {count}<\/span>\n+ )}{' '}\n+ <button onClick={this.incrementCount}>increment<\/button>\n+ <\/div>\n+ );\n+ }\n+}\n+apps.push(\n+ <Feature key=\"Simple stateful app\" label=\"Simple stateful app\" version=\"any\">\n+ <SimpleApp \/>\n+ <\/Feature>\n+);\n+\n+\/\/ This component, with the version prop, helps organize DevTools at a glance.\n+function TopLevelWrapperForDevTools({ version }) {\n+ let header = <h1>React {version}<\/h1>;\n+ if (version.includes('canary')) {\n+ const commitSha = version.match(\/.+canary-(.+)\/)[1];\n+ header = (\n+ <h1>\n+ React canary{' '}\n+ <a href={`https:\/\/github.com\/facebook\/react\/commit\/${commitSha}`}>\n+ {commitSha}\n+ <\/a>\n+ <\/h1>\n+ );\n+ } else if (version.includes('alpha')) {\n+ header = <h1>React next<\/h1>;\n+ }\n+\n+ return (\n+ <div>\n+ {header}\n+ {apps}\n+ <\/div>\n+ );\n+}\n+TopLevelWrapperForDevTools.displayName = 'React';\n+\n+ReactDOM.render(\n+ <TopLevelWrapperForDevTools version={React.version} \/>,\n+ document.getElementById('root')\n+);\ndiff --git a\/fixtures\/regression\/styles.css b\/fixtures\/regression\/styles.css\nnew file mode 100644\nindex 0000000000..6cbaaa5c01\n--- \/dev\/null\n+++ b\/fixtures\/regression\/styles.css\n@@ -0,0 +1,37 @@\n+body {\n+ font-family: sans-serif;\n+ font-size: 12px;\n+}\n+\n+h1 {\n+ margin: 0;\n+ font-size: 20px;\n+}\n+\n+h2 {\n+ margin: 1rem 0 0;\n+}\n+\n+iframe {\n+ border: 1px solid #ddd;\n+ border-radius: 0.5rem;\n+}\n+\n+code {\n+ white-space: nowrap;\n+}\n+\n+.Feature {\n+ margin: 1rem 0;\n+ border-bottom: 1px solid #eee;\n+ padding-bottom: 1rem;\n+}\n+.FeatureHeader {\n+ font-size: 16px;\n+ margin-bottom: 0.5rem;\n+}\n+.FeatureCode {\n+ background-color: #eee;\n+ padding: 0.25rem;\n+ border-radius: 0.25rem;\n+}\ndiff --git a\/src\/backend\/agent.js b\/src\/backend\/agent.js\nindex f1f7532e1f..5ca5696646 100644\n--- a\/src\/backend\/agent.js\n+++ b\/src\/backend\/agent.js\n@@ -113,7 +113,7 @@ export default class Agent extends EventEmitter {\n const renderer = ((this._rendererInterfaces[\n (rendererID: any)\n ]: any): RendererInterface);\n- return renderer.getFiberIDFromNative(node, true);\n+ return renderer.getInternalIDFromNative(node, true);\n } catch (e) {}\n }\n return null;\n@@ -253,7 +253,7 @@ export default class Agent extends EventEmitter {\n \n let node: HTMLElement | null = null;\n if (renderer !== null) {\n- node = ((renderer.findNativeByFiberID(id): any): HTMLElement);\n+ node = ((renderer.getNativeFromInternal(id): any): HTMLElement);\n }\n \n if (node != null) {\ndiff --git a\/src\/backend\/index.js b\/src\/backend\/index.js\nindex 298d06a121..2df5c21154 100644\n--- a\/src\/backend\/index.js\n+++ b\/src\/backend\/index.js\n@@ -4,6 +4,7 @@ import type { DevToolsHook, ReactRenderer, RendererInterface } from '.\/types';\n import Agent from '.\/agent';\n \n import { attach } from '.\/renderer';\n+import { attach as attachLegacy } from '.\/legacy\/renderer';\n \n export function initBackend(\n hook: DevToolsHook,\n@@ -40,7 +41,11 @@ export function initBackend(\n \n \/\/ Inject any not-yet-injected renderers (if we didn't reload-and-profile)\n if (!rendererInterface) {\n- rendererInterface = attach(hook, id, renderer, global);\n+ if (typeof renderer.findFiberByHostInstance === 'function') {\n+ rendererInterface = attach(hook, id, renderer, global);\n+ } else {\n+ rendererInterface = attachLegacy(hook, id, renderer, global);\n+ }\n \n hook.rendererInterfaces.set(id, rendererInterface);\n }\ndiff --git a\/src\/backend\/legacy\/getChildren.js b\/src\/backend\/legacy\/getChildren.js\nnew file mode 100644\nindex 0000000000..1ed8b52e08\n--- \/dev\/null\n+++ b\/src\/backend\/legacy\/getChildren.js\n@@ -0,0 +1,63 @@\n+\/\/ @flow\n+\n+export default function getChildren(internalInstance: Object): Array<any> {\n+ \/\/ If the parent is a native node without rendered children, but with\n+ \/\/ multiple string children, then the `element` that gets passed in here is\n+ \/\/ a plain value -- a string or number.\n+ if (internalInstance._renderedComponent) {\n+ return [internalInstance._renderedComponent];\n+ } else if (internalInstance._renderedChildren) {\n+ return childrenToArray(internalInstance._renderedChildren);\n+ } else if (\n+ internalInstance._currentElement &&\n+ internalInstance._currentElement.props\n+ ) {\n+ \/\/ DevTools doesn't need to display primative child types,\n+ \/\/ So we can filter them out early.\n+ \/*\n+ const children = [];\n+\n+ \/\/ This is a native node without rendered children -- meaning the children\n+ \/\/ prop is the unfiltered list of children.\n+ \/\/ This may include 'null' or even other invalid values, so we need to\n+ \/\/ filter it the same way that ReactDOM does.\n+ \/\/ Instead of pulling in the whole React library, we just copied over the\n+ \/\/ 'traverseAllChildrenImpl' method.\n+ \/\/ https:\/\/github.com\/facebook\/react\/blob\/240b84ed8e1db715d759afaae85033718a0b24e1\/src\/isomorphic\/children\/ReactChildren.js#L112-L158\n+ const unfilteredChildren = internalInstance._currentElement.props.children;\n+ traverseAllChildrenImpl(\n+ unfilteredChildren,\n+ '', \/\/ nameSoFar\n+ (_traverseContext, child) => {\n+ const childType = typeof child;\n+ if (childType === 'string' || childType === 'number') {\n+ children.push(child);\n+ }\n+ }\n+ \/\/ traverseContext\n+ );\n+\n+ return children;\n+ *\/\n+ }\n+\n+ if (internalInstance._instance) {\n+ var inst = internalInstance._instance;\n+ \/\/ TODO: React ART currently falls in this bucket, but this doesn't\n+ \/\/ actually make sense and we should clean this up after stabilizing our\n+ \/\/ API for backends\n+ if (inst._renderedChildren) {\n+ return childrenToArray(inst._renderedChildren);\n+ }\n+ }\n+\n+ return [];\n+}\n+\n+function childrenToArray(children) {\n+ const array = [];\n+ for (var name in children) {\n+ array.push(children[name]);\n+ }\n+ return array;\n+}\ndiff --git a\/src\/backend\/legacy\/getData.js b\/src\/backend\/legacy\/getData.js\nnew file mode 100644\nindex 0000000000..200fd767a4\n--- \/dev\/null\n+++ b\/src\/backend\/legacy\/getData.js\n@@ -0,0 +1,46 @@\n+\/\/ @flow\n+\n+import {\n+ ElementTypeClass,\n+ ElementTypeOtherOrUnknown,\n+} from 'src\/devtools\/types';\n+import { getDisplayName } from 'src\/utils';\n+\n+import type { InternalInstance } from '.\/renderer';\n+import type { FiberData } from '..\/types';\n+\n+export default function getData(internalInstance: InternalInstance): FiberData {\n+ let displayName = null;\n+ let key = null;\n+ let type = ElementTypeOtherOrUnknown;\n+\n+ \/\/ != used deliberately here to catch undefined and null\n+ if (internalInstance._currentElement != null) {\n+ if (internalInstance._currentElement.key) {\n+ key = String(internalInstance._currentElement.key);\n+ }\n+\n+ const elementType = internalInstance._currentElement.type;\n+ if (typeof elementType === 'string') {\n+ \/\/ ...\n+ } else if (typeof elementType === 'function') {\n+ \/\/ TODO Can we differentiate between function and class component types?\n+ \/\/ Dan said _compositeType tells you PureClass, ImpureClass, StatelessFunctional but it was only added in v14\n+ \/\/ getPublicInstance() returns null for function components\n+ type = ElementTypeClass;\n+ displayName = getDisplayName(elementType);\n+ } else if (typeof internalInstance._stringText === 'string') {\n+ \/\/ ...\n+ } else {\n+ \/\/ TODO What kind of case does this cover?\n+ console.log('what is this type?');\n+ displayName = getDisplayName(elementType);\n+ }\n+ }\n+\n+ return {\n+ displayName,\n+ key,\n+ type,\n+ };\n+}\ndiff --git a\/src\/backend\/legacy\/getElementType.js b\/src\/backend\/legacy\/getElementType.js\nnew file mode 100644\nindex 0000000000..1740cfe9ad\n--- \/dev\/null\n+++ b\/src\/backend\/legacy\/getElementType.js\n@@ -0,0 +1,22 @@\n+\/\/ @flow\n+import {\n+ ElementTypeClass,\n+ ElementTypeOtherOrUnknown,\n+} from 'src\/devtools\/types';\n+\n+import type { InternalInstance } from '.\/renderer';\n+import type { ElementType } from 'src\/devtools\/types';\n+\n+export default function getElementType(\n+ internalInstance: InternalInstance\n+): ElementType {\n+ \/\/ != used deliberately here to catch undefined and null\n+ if (internalInstance._currentElement != null) {\n+ const elementType = internalInstance._currentElement.type;\n+ if (typeof elementType === 'function') {\n+ return ElementTypeClass;\n+ }\n+ }\n+\n+ return ElementTypeOtherOrUnknown;\n+}\ndiff --git a\/src\/backend\/legacy\/renderer.js b\/src\/backend\/legacy\/renderer.js\nnew file mode 100644\nindex 0000000000..5d4afa1eb5\n--- \/dev\/null\n+++ b\/src\/backend\/legacy\/renderer.js\n@@ -0,0 +1,787 @@\n+\/\/ @flow\n+\n+import {\n+ ElementTypeClass,\n+ ElementTypeFunction,\n+ ElementTypeRoot,\n+ ElementTypeOtherOrUnknown,\n+} from 'src\/devtools\/types';\n+import { getUID, utfEncodeString, operationsArrayToString } from '..\/..\/utils';\n+import { cleanForBridge, copyWithSet } from '..\/utils';\n+import {\n+ __DEBUG__,\n+ TREE_OPERATION_ADD,\n+ TREE_OPERATION_REMOVE,\n+} from '..\/..\/constants';\n+import getChildren from '.\/getChildren';\n+import getData from '.\/getData';\n+import getElementType from '.\/getElementType';\n+import {\n+ decorateResult,\n+ decorateMany,\n+ forceUpdate,\n+ restoreMany,\n+} from '.\/utils';\n+\n+import type {\n+ DevToolsHook,\n+ GetInternalIDFromNative,\n+ GetNativeFromInternal,\n+ NativeType,\n+ RendererInterface,\n+} from '..\/types';\n+import type { InspectedElement } from 'src\/devtools\/views\/Components\/types';\n+\n+export type InternalInstance = Object;\n+type LegacyRenderer = Object;\n+\n+export function attach(\n+ hook: DevToolsHook,\n+ rendererID: number,\n+ renderer: LegacyRenderer,\n+ global: Object\n+): RendererInterface {\n+ const idToInternalInstanceMap: Map<number, InternalInstance> = new Map();\n+ const idToParentIDMap: Map<number, number> = new Map();\n+ const internalInstanceToIDMap: Map<InternalInstance, number> = new Map();\n+ const mountedIDs: Set<number> = new Set();\n+ const pendingMountIDs: Set<number> = new Set();\n+ const pendingUnmountIDs: Set<number> = new Set();\n+ const rootIDs: Set<number> = new Set();\n+\n+ function getID(internalInstance: InternalInstance): number {\n+ if (!internalInstanceToIDMap.has(internalInstance)) {\n+ const id = getUID();\n+ internalInstanceToIDMap.set(internalInstance, id);\n+ idToInternalInstanceMap.set(id, internalInstance);\n+ }\n+ return ((internalInstanceToIDMap.get(internalInstance): any): number);\n+ }\n+\n+ function getChildIDs(internalInstance: InternalInstance): Array<number> {\n+ return getChildren(internalInstance).map(getID);\n+ }\n+\n+ \/\/function getParentID(internalInstance: InternalInstance): number {\n+ \/\/ return getID(internalInstance._hostParent);\n+ \/\/}\n+\n+ function findNearestAncestorInTree(\n+ internalInstance: InternalInstance\n+ ): number | null {\n+ let current = internalInstance;\n+ while (current != null) {\n+ const id = getID(current);\n+ if (\n+ rootIDs.has(id) ||\n+ getElementType(current) !== ElementTypeOtherOrUnknown\n+ ) {\n+ return id;\n+ }\n+ const parentID = idToParentIDMap.get(id);\n+ current = parentID != null ? idToInternalInstanceMap.get(parentID) : null;\n+ }\n+ return null;\n+ }\n+\n+ let getInternalIDFromNative: GetInternalIDFromNative = ((null: any): GetInternalIDFromNative);\n+ let getNativeFromInternal: (\n+ id: number\n+ ) => ?NativeType = ((null: any): GetNativeFromInternal);\n+\n+ \/\/ React Native\n+ if (renderer.Mount.findNodeHandle && renderer.Mount.nativeTagToRootNodeID) {\n+ getInternalIDFromNative = (nativeTag, findNearestUnfilteredAncestor) => {\n+ const internalInstance = renderer.Mount.nativeTagToRootNodeID(nativeTag);\n+ return findNearestAncestorInTree(internalInstance);\n+ };\n+ getNativeFromInternal = (id: number) => {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ return renderer.Mount.findNodeHandle(internalInstance);\n+ };\n+\n+ \/\/ React DOM 15+\n+ } else if (renderer.ComponentTree) {\n+ getInternalIDFromNative = (node, findNearestUnfilteredAncestor) => {\n+ const internalInstance = renderer.ComponentTree.getClosestInstanceFromNode(\n+ node\n+ );\n+ return findNearestAncestorInTree(internalInstance);\n+ };\n+ getNativeFromInternal = (id: number) => {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ return renderer.ComponentTree.getNodeFromInstance(internalInstance);\n+ };\n+\n+ \/\/ React DOM\n+ } else if (renderer.Mount.getID && renderer.Mount.getNode) {\n+ getInternalIDFromNative = (node, findNearestUnfilteredAncestor) => {\n+ let id = renderer.Mount.getID(node);\n+ while (node && node.parentNode && !id) {\n+ node = node.parentNode;\n+ id = renderer.Mount.getID(node);\n+ }\n+ return id;\n+ };\n+\n+ getNativeFromInternal = (id: number) => {\n+ try {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance != null) {\n+ return renderer.Mount.getNode(internalInstance._rootNodeID);\n+ }\n+ } catch (e) {}\n+\n+ return null;\n+ };\n+ } else {\n+ console.warn(\n+ 'Unknown React version (does not have getID), probably an unshimmed React Native'\n+ );\n+ }\n+\n+ let oldReconcilerMethods = null;\n+ let oldRenderComponent = null;\n+ let oldRenderRoot = null;\n+\n+ \/\/ React DOM\n+ if (renderer.Mount._renderNewRootComponent) {\n+ oldRenderRoot = decorateResult(\n+ renderer.Mount,\n+ '_renderNewRootComponent',\n+ internalInstance => {\n+ const id = getID(internalInstance);\n+\n+ rootIDs.add(id);\n+\n+ if (__DEBUG__) {\n+ console.log('renderer.Mount._renderNewRootComponent()', id);\n+ }\n+\n+ recordPendingMount(internalInstance);\n+\n+ \/\/ If we're mounting a root, we've just finished a batch of work,\n+ \/\/ so it's safe to synchronously flush.\n+ flushPendingEvents(id);\n+ }\n+ );\n+\n+ \/\/ React Native\n+ } else if (renderer.Mount.renderComponent) {\n+ oldRenderComponent = decorateResult(\n+ renderer.Mount,\n+ 'renderComponent',\n+ internalInstance => {\n+ const id = getID(internalInstance);\n+\n+ rootIDs.add(id);\n+\n+ if (__DEBUG__) {\n+ console.log('renderer.Mount.renderComponent()', id);\n+ }\n+\n+ recordPendingMount(internalInstance);\n+\n+ \/\/ If we're mounting a root, we've just finished a batch of work,\n+ \/\/ so it's safe to synchronously flush.\n+ flushPendingEvents(id);\n+ }\n+ );\n+ }\n+\n+ if (renderer.Reconciler) {\n+ oldReconcilerMethods = decorateMany(renderer.Reconciler, {\n+ mountComponent(internalInstance, rootID, transaction, context) {\n+ recordPendingMount(internalInstance);\n+ },\n+ performUpdateIfNecessary(\n+ internalInstance,\n+ nextChild,\n+ transaction,\n+ context\n+ ) {\n+ \/\/ TODO Check for change in order of children\n+ },\n+ receiveComponent(internalInstance, nextChild, transaction, context) {\n+ \/\/ TODO Check for change in order of children\n+ },\n+ unmountComponent(internalInstance) {\n+ recordPendingUnmount(internalInstance);\n+ },\n+ });\n+ }\n+\n+ function cleanup() {\n+ if (oldReconcilerMethods !== null) {\n+ if (renderer.Component) {\n+ restoreMany(renderer.Component.Mixin, oldReconcilerMethods);\n+ } else {\n+ restoreMany(renderer.Reconciler, oldReconcilerMethods);\n+ }\n+ }\n+ if (oldRenderRoot !== null) {\n+ renderer.Mount._renderNewRootComponent = oldRenderRoot;\n+ }\n+ if (oldRenderComponent !== null) {\n+ renderer.Mount.renderComponent = oldRenderComponent;\n+ }\n+ oldReconcilerMethods = null;\n+ oldRenderRoot = null;\n+ oldRenderComponent = null;\n+ }\n+\n+ let pendingOperations: Uint32Array = new Uint32Array(0);\n+\n+ function addOperation(\n+ newAction: Uint32Array,\n+ addToStartOfQueue: boolean = false\n+ ): void {\n+ const oldActions = pendingOperations;\n+ pendingOperations = new Uint32Array(oldActions.length + newAction.length);\n+ if (addToStartOfQueue) {\n+ pendingOperations.set(newAction);\n+ pendingOperations.set(oldActions, newAction.length);\n+ } else {\n+ pendingOperations.set(oldActions);\n+ pendingOperations.set(newAction, oldActions.length);\n+ }\n+ }\n+\n+ \/\/ TODO Rethink the below queueing mechanism.\n+ \/\/ Every mount is some parent's update (except for the root mount which we can explicitly handle)\n+ \/\/ So maybe we only need to call queueFlushPendingEvents() for updates,\n+ \/\/ and maybe we can rely on an id-to-root Map for this case, to limit the scope of what we crawl.\n+\n+ \/\/ Older React renderers did not have the concept of a commit.\n+ \/\/ The data structure was just ad-hoc mutated in place.\n+ \/\/ So except for the case of the root mounting the first time,\n+ \/\/ there is no event we can observe to signal that a render is finished.\n+ \/\/ However since older renderers were always synchronous,\n+ \/\/ we can use setTimeout to batch operations together.\n+ \/\/ In the case of a cascading update, we might batch multiple \"commits\"-\n+ \/\/ but that should be okay, since the batching is not strictly necessary.\n+ let flushPendingEventsTimeoutID: TimeoutID | null = null;\n+ function queueFlushPendingEvents() {\n+ if (flushPendingEventsTimeoutID === null) {\n+ flushPendingEventsTimeoutID = setTimeout(() => {\n+ flushPendingEventsTimeoutID = null;\n+\n+ \/\/ If there are pending operations, walk the tree and find them.\n+ \/\/ Ideally we wouldjust pluck the pending operations out of the sets directly,\n+ \/\/ but without doing a full traversal, it would be hard for us to determine the filtered parent.\n+ \/\/ It should be possible to improve this though, by maintaining a map of id-to-parent,\n+ \/\/ and crawling upward to the first non-filtered node.\n+ \/\/ TODO Revisit this and think about it more...\n+ if (pendingMountIDs.size > 0 || pendingUnmountIDs.size > 0) {\n+ rootIDs.forEach(flushPendingEvents);\n+ }\n+ }, 0);\n+ }\n+ }\n+\n+ function flushInitialOperations() {\n+ \/\/ Older versions of React do not support profiling mode, so there's nothing to flush.\n+ \/\/ Crawl roots though and register any nodes that mounted before we were injected.\n+\n+ const roots =\n+ renderer.Mount._instancesByReactRootID ||\n+ renderer.Mount._instancesByContainerID;\n+\n+ for (let key in roots) {\n+ const internalInstance = roots[key];\n+ const id = getID(internalInstance);\n+\n+ rootIDs.add(id);\n+\n+ crawlAndRecordMounts(id, 0, true);\n+\n+ \/\/ It's safe to synchronously flush for the root we just crawled.\n+ flushPendingEvents(id);\n+ }\n+ }\n+\n+ function crawlAndRecordMounts(\n+ id: number,\n+ parentID: number,\n+ isInitialMount: boolean\n+ ) {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ const shouldIncludeInTree =\n+ parentID === 0 ||\n+ getElementType(internalInstance) !== ElementTypeOtherOrUnknown;\n+\n+ \/\/ Not all nodes are mounted in the frontend DevTools tree,\n+ \/\/ but it's important to track parent info even for the unmounted ones.\n+ idToParentIDMap.set(id, parentID);\n+\n+ if (__DEBUG__) {\n+ console.group(\n+ 'crawlAndRecordMounts() id:',\n+ id,\n+ 'shouldIncludeInTree?',\n+ shouldIncludeInTree\n+ );\n+ }\n+\n+ if (shouldIncludeInTree) {\n+ const didMount = isInitialMount || pendingMountIDs.has(id);\n+ const didUnmount = pendingUnmountIDs.has(id);\n+\n+ \/\/ If this node was both mounted and unmounted in the same batch,\n+ \/\/ just skip it and don't send any update.\n+ if (didMount && didUnmount) {\n+ pendingUnmountIDs.delete(id);\n+ return;\n+ } else if (didMount) {\n+ recordMount(id, parentID);\n+ }\n+ }\n+\n+ getChildIDs(internalInstance).forEach(childID =>\n+ crawlAndRecordMounts(\n+ childID,\n+ shouldIncludeInTree ? id : parentID,\n+ isInitialMount\n+ )\n+ );\n+\n+ if (__DEBUG__) {\n+ console.groupEnd();\n+ }\n+ }\n+\n+ function flushPendingEvents(rootID: number): void {\n+ \/\/ Crawl tree and queue mounts\/updates.\n+ crawlAndRecordMounts(rootID, 0, false);\n+\n+ \/\/ Send pending deletions.\n+ pendingUnmountIDs.forEach(id => {\n+ if (mountedIDs.has(id)) {\n+ recordUnmount(id);\n+ }\n+ });\n+\n+ \/\/ Identify which renderer this update is coming from.\n+ \/\/ This enables roots to be mapped to renderers,\n+ \/\/ Which in turn enables fiber props, states, and hooks to be inspected.\n+ const idArray = new Uint32Array(2);\n+ idArray[0] = rendererID;\n+ idArray[1] = rootID;\n+ addOperation(idArray, true);\n+\n+ if (__DEBUG__) {\n+ operationsArrayToString(pendingOperations);\n+ }\n+\n+ \/\/ If we've already connected to the frontend, just pass the operations through.\n+ hook.emit('operations', pendingOperations);\n+\n+ pendingMountIDs.clear();\n+ pendingUnmountIDs.clear();\n+ pendingOperations = new Uint32Array(0);\n+ }\n+\n+ function inspectElement(id: number): InspectedElement | null {\n+ let result = inspectElementRaw(id);\n+ if (result === null) {\n+ return null;\n+ }\n+ \/\/ TODO Review sanitization approach for the below inspectable values.\n+ result.context = cleanForBridge(result.context);\n+ result.props = cleanForBridge(result.props);\n+ result.state = cleanForBridge(result.state);\n+ return result;\n+ }\n+\n+ function inspectElementRaw(id: number): InspectedElement | null {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ const data = getData(internalInstance);\n+\n+ let context = null;\n+ let owners = null;\n+ let props = null;\n+ let state = null;\n+ let source = null;\n+\n+ if (internalInstance != null) {\n+ const element = internalInstance._currentElement;\n+ if (element !== null) {\n+ props = element.props;\n+ source = element._source != null ? element._source : null;\n+\n+ let owner = element._owner;\n+ if (owner) {\n+ owners = [];\n+ while (owner != null) {\n+ owners.push({\n+ displayName: getData(owner).displayName || 'Unknown',\n+ id: getID(owner),\n+ });\n+ owner = owner.owner;\n+ }\n+ }\n+ }\n+ context = internalInstance.context || null;\n+ state = internalInstance.state || null;\n+ }\n+\n+ return {\n+ id,\n+\n+ \/\/ Hooks did not exist in legacy versions\n+ canEditHooks: false,\n+\n+ \/\/ Does the current renderer support editable function props?\n+ canEditFunctionProps: true,\n+\n+ \/\/ Suspense did not exist in legacy versions\n+ canToggleSuspense: false,\n+\n+ \/\/ Can view component source location.\n+ canViewSource:\n+ data.type === ElementTypeClass || data.type === ElementTypeFunction,\n+\n+ displayName: data.displayName,\n+\n+ \/\/ Inspectable properties.\n+ context,\n+ hooks: null,\n+ props,\n+ state,\n+\n+ \/\/ List of owners\n+ owners,\n+\n+ \/\/ Location of component in source coude.\n+ source,\n+ };\n+ }\n+\n+ function logElementToConsole(id: number): void {\n+ const result = inspectElementRaw(id);\n+ if (result === null) {\n+ console.warn(`Could not find element with id \"${id}\"`);\n+ return;\n+ }\n+\n+ const supportsGroup = typeof console.groupCollapsed === 'function';\n+ if (supportsGroup) {\n+ console.groupCollapsed(\n+ `[Click to expand] %c<${result.displayName || 'Component'} \/>`,\n+ \/\/ --dom-tag-name-color is the CSS variable Chrome styles HTML elements with in the console.\n+ 'color: var(--dom-tag-name-color); font-weight: normal;'\n+ );\n+ }\n+ if (result.props !== null) {\n+ console.log('Props:', result.props);\n+ }\n+ if (result.state !== null) {\n+ console.log('State:', result.state);\n+ }\n+ if (result.context !== null) {\n+ console.log('State:', result.context);\n+ }\n+ const nativeNode = getNativeFromInternal(id);\n+ if (nativeNode !== null) {\n+ console.log('Node:', nativeNode);\n+ }\n+ if (window.chrome || \/firefox\/i.test(navigator.userAgent)) {\n+ console.log(\n+ 'Right-click any value to save it as a global variable for further inspection.'\n+ );\n+ }\n+ if (supportsGroup) {\n+ console.groupEnd();\n+ }\n+ }\n+\n+ function prepareViewElementSource(id: number): void {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance == null) {\n+ console.warn(`Could not find instance with id \"${id}\"`);\n+ return;\n+ }\n+\n+ const element = internalInstance._currentElement;\n+ if (element == null) {\n+ console.warn(`Could not find element with id \"${id}\"`);\n+ return;\n+ }\n+\n+ global.$type = element.type;\n+ }\n+\n+ function selectElement(id: number): void {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance == null) {\n+ console.warn(`Could not find instance with id \"${id}\"`);\n+ return;\n+ }\n+\n+ switch (getElementType(internalInstance)) {\n+ case ElementTypeClass:\n+ case ElementTypeFunction:\n+ const element = internalInstance._currentElement;\n+ if (element == null) {\n+ console.warn(`Could not find element with id \"${id}\"`);\n+ return;\n+ }\n+\n+ global.$r = {\n+ props: element.props,\n+ type: element.type,\n+ };\n+ break;\n+ default:\n+ break;\n+ }\n+ }\n+\n+ function recordPendingMount(internalInstance: InternalInstance) {\n+ pendingMountIDs.add(getID(internalInstance));\n+\n+ if (__DEBUG__) {\n+ console.log(\n+ '%crecordPendingMount()',\n+ 'color: green',\n+ getID(internalInstance)\n+ );\n+ }\n+\n+ queueFlushPendingEvents();\n+ }\n+\n+ function recordPendingUnmount(internalInstance: InternalInstance) {\n+ const id = getID(internalInstance);\n+\n+ pendingUnmountIDs.add(id);\n+\n+ \/\/ Not all nodes are mounted (or unmounted) in the frontend DevTools tree,\n+ \/\/ so it's important to remove entries from this map on pending unmount.\n+ idToParentIDMap.delete(id);\n+\n+ if (__DEBUG__) {\n+ console.log(\n+ '%crecordPendingUnmount()',\n+ 'color: red',\n+ getID(internalInstance)\n+ );\n+ }\n+\n+ queueFlushPendingEvents();\n+ }\n+\n+ function recordMount(id: number, parentID: number) {\n+ const internalInstance = ((idToInternalInstanceMap.get(\n+ id\n+ ): any): InternalInstance);\n+ const isRoot = rootIDs.has(id);\n+\n+ if (__DEBUG__) {\n+ console.log(\n+ '%crecordMount()',\n+ 'color: green; font-weight: bold;',\n+ id,\n+ getData(internalInstance).displayName\n+ );\n+ }\n+\n+ mountedIDs.add(id);\n+\n+ if (isRoot) {\n+ \/\/ TODO Is this right? For all versions?\n+ const hasOwnerMetadata =\n+ internalInstance._currentElement != null &&\n+ internalInstance._currentElement._owner != null;\n+\n+ const operation = new Uint32Array(5);\n+ operation[0] = TREE_OPERATION_ADD;\n+ operation[1] = id;\n+ operation[2] = ElementTypeRoot;\n+ operation[3] = 0; \/\/ isProfilingSupported?\n+ operation[4] = hasOwnerMetadata ? 1 : 0;\n+ addOperation(operation);\n+ } else {\n+ const { displayName, key, type } = getData(internalInstance);\n+\n+ const ownerID =\n+ internalInstance._currentElement != null &&\n+ internalInstance._currentElement._owner != null\n+ ? getID(internalInstance._currentElement._owner)\n+ : 0;\n+\n+ let encodedDisplayName = ((null: any): Uint8Array);\n+ let encodedKey = ((null: any): Uint8Array);\n+\n+ if (displayName !== null) {\n+ encodedDisplayName = utfEncodeString(displayName);\n+ }\n+\n+ if (key !== null) {\n+ \/\/ React$Key supports string and number types as inputs,\n+ \/\/ But React converts numeric keys to strings, so we only have to handle that type here.\n+ \/\/ https:\/\/github.com\/facebook\/react\/blob\/0e67969cb1ad8c27a72294662e68fa5d7c2c9783\/packages\/react\/src\/ReactElement.js#L187\n+ encodedKey = utfEncodeString(((key: any): string));\n+ }\n+\n+ const encodedDisplayNameSize =\n+ displayName === null ? 0 : encodedDisplayName.length;\n+ const encodedKeySize = key === null ? 0 : encodedKey.length;\n+\n+ const operation = new Uint32Array(\n+ 7 + encodedDisplayNameSize + encodedKeySize\n+ );\n+ operation[0] = TREE_OPERATION_ADD;\n+ operation[1] = id;\n+ operation[2] = type;\n+ operation[3] = parentID;\n+ operation[4] = ownerID;\n+ operation[5] = encodedDisplayNameSize;\n+ if (displayName !== null) {\n+ operation.set(encodedDisplayName, 6);\n+ }\n+ operation[6 + encodedDisplayNameSize] = encodedKeySize;\n+ if (key !== null) {\n+ operation.set(encodedKey, 6 + encodedDisplayNameSize + 1);\n+ }\n+ addOperation(operation);\n+ }\n+ }\n+\n+ function recordUnmount(id: number) {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ const isRoot = rootIDs.has(id);\n+\n+ if (__DEBUG__) {\n+ console.log(\n+ '%crecordUnmount()',\n+ 'color: red; font-weight: bold;',\n+ id,\n+ getData(internalInstance).displayName\n+ );\n+ }\n+\n+ if (isRoot) {\n+ const operation = new Uint32Array(2);\n+ operation[0] = TREE_OPERATION_REMOVE;\n+ operation[1] = id;\n+ addOperation(operation);\n+\n+ rootIDs.delete(id);\n+ } else {\n+ const operation = new Uint32Array(2);\n+ operation[0] = TREE_OPERATION_REMOVE;\n+ operation[1] = id;\n+ addOperation(operation);\n+ }\n+\n+ idToInternalInstanceMap.delete(id);\n+ internalInstanceToIDMap.delete(internalInstance);\n+\n+ mountedIDs.delete(id);\n+ }\n+\n+ function setInProps(id: number, path: Array<string | number>, value: any) {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance != null) {\n+ const element = internalInstance._currentElement;\n+ internalInstance._currentElement = {\n+ ...element,\n+ props: copyWithSet(element.props, path, value),\n+ };\n+ forceUpdate(internalInstance._instance);\n+ }\n+ }\n+\n+ function setInState(id: number, path: Array<string | number>, value: any) {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance != null) {\n+ setIn(internalInstance.state, path, value);\n+ internalInstance.forceUpdate();\n+ }\n+ }\n+\n+ function setInContext(id: number, path: Array<string | number>, value: any) {\n+ const internalInstance = idToInternalInstanceMap.get(id);\n+ if (internalInstance != null) {\n+ setIn(internalInstance.context, path, value);\n+ forceUpdate(internalInstance);\n+ }\n+ }\n+\n+ function setIn(obj: Object, path: Array<string | number>, value: any) {\n+ const last = path.pop();\n+ const parent = path.reduce(\n+ \/\/ $FlowFixMe\n+ (reduced, attr) => (reduced ? reduced[attr] : null),\n+ obj\n+ );\n+ if (parent) {\n+ \/\/ $FlowFixMe\n+ parent[last] = value;\n+ }\n+ }\n+\n+ \/\/ v16+ only features\n+ const getCommitDetails = () => {\n+ throw new Error('getCommitDetails not supported by this renderer');\n+ };\n+ const getFiberCommits = () => {\n+ throw new Error('getFiberCommits not supported by this renderer');\n+ };\n+ const getInteractions = () => {\n+ throw new Error('getInteractions not supported by this renderer');\n+ };\n+ const getProfilingDataForDownload = () => {\n+ throw new Error(\n+ 'getProfilingDataForDownload not supported by this renderer'\n+ );\n+ };\n+ const getProfilingSummary = () => {\n+ throw new Error('getProfilingSummary not supported by this renderer');\n+ };\n+ const handleCommitFiberRoot = () => {\n+ throw new Error('handleCommitFiberRoot not supported by this renderer');\n+ };\n+ const handleCommitFiberUnmount = () => {\n+ throw new Error('handleCommitFiberUnmount not supported by this renderer');\n+ };\n+ const overrideSuspense = () => {\n+ throw new Error('overrideSuspense not supported by this renderer');\n+ };\n+ const setInHook = () => {\n+ throw new Error('setInHook not supported by this renderer');\n+ };\n+ const startProfiling = () => {\n+ throw new Error('startProfiling not supported by this renderer');\n+ };\n+ const stopProfiling = () => {\n+ throw new Error('stopProfiling not supported by this renderer');\n+ };\n+\n+ return {\n+ cleanup,\n+ flushInitialOperations,\n+ getCommitDetails,\n+ getFiberCommits,\n+ getInteractions,\n+ getInternalIDFromNative,\n+ getNativeFromInternal,\n+ getProfilingDataForDownload,\n+ getProfilingSummary,\n+ handleCommitFiberRoot,\n+ handleCommitFiberUnmount,\n+ inspectElement,\n+ logElementToConsole,\n+ overrideSuspense,\n+ prepareViewElementSource,\n+ renderer,\n+ selectElement,\n+ setInContext,\n+ setInHook,\n+ setInProps,\n+ setInState,\n+ startProfiling,\n+ stopProfiling,\n+ };\n+}\ndiff --git a\/src\/backend\/legacy\/traverseAllChildrenImpl.js b\/src\/backend\/legacy\/traverseAllChildrenImpl.js\nnew file mode 100644\nindex 0000000000..a7e1cd399c\n--- \/dev\/null\n+++ b\/src\/backend\/legacy\/traverseAllChildrenImpl.js\n@@ -0,0 +1,146 @@\n+\/\/ @flow\n+\n+const SEPARATOR = '.';\n+const SUBSEPARATOR = ':';\n+\n+const FAUX_ITERATOR_SYMBOL = '@@iterator'; \/\/ Before Symbol spec.\n+\/\/ The Symbol used to tag the ReactElement type. If there is no native Symbol\n+\/\/ nor polyfill, then a plain number is used for performance.\n+const ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;\n+const REACT_ELEMENT_TYPE =\n+ (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.element')) ||\n+ 0xeac7;\n+\n+\/**\n+ * Escape and wrap key so it is safe to use as a reactid\n+ *\n+ * @param {string} key to be escaped.\n+ * @return {string} the escaped key.\n+ *\/\n+function escape(key: string): string {\n+ const escapeRegex = \/[=:]\/g;\n+ const escaperLookup = {\n+ '=': '=0',\n+ ':': '=2',\n+ };\n+ const escapedString = ('' + key).replace(escapeRegex, function(match) {\n+ return escaperLookup[match];\n+ });\n+\n+ return '$' + escapedString;\n+}\n+\n+\/**\n+ * Generate a key string that identifies a component within a set.\n+ *\n+ * @param {*} component A component that could contain a manual key.\n+ * @param {number} index Index that is used if a manual key is not provided.\n+ * @return {string}\n+ *\/\n+function getComponentKey(component, index) {\n+ \/\/ Do some typechecking here since we call this blindly. We want to ensure\n+ \/\/ that we don't block potential future ES APIs.\n+ if (\n+ typeof component === 'object' &&\n+ component !== null &&\n+ component.key != null\n+ ) {\n+ \/\/ Explicit key\n+ return escape(component.key);\n+ }\n+ \/\/ Implicit key determined by the index in the set\n+ return index.toString(36);\n+}\n+\n+\/**\n+ * We do a copied the 'traverseAllChildrenImpl' method from\n+ * `React.Children` so that we don't pull in the whole React library.\n+ * @param {?*} children Children tree container.\n+ * @param {!string} nameSoFar Name of the key path so far.\n+ * @param {!function} callback Callback to invoke with each child found.\n+ * @param {?*} traverseContext Used to pass information throughout the traversal\n+ * process.\n+ * @return {!number} The number of children in this subtree.\n+ *\/\n+export default function traverseAllChildrenImpl(\n+ children: any,\n+ nameSoFar: string,\n+ callback: Function,\n+ traverseContext: any\n+): number {\n+ const type = typeof children;\n+\n+ if (type === 'undefined' || type === 'boolean') {\n+ \/\/ All of the above are perceived as null.\n+ children = null;\n+ }\n+\n+ if (\n+ children === null ||\n+ type === 'string' ||\n+ type === 'number' ||\n+ \/\/ The following is inlined from ReactElement. This means we can optimize\n+ \/\/ some checks. React Fiber also inlines this logic for similar purposes.\n+ (type === 'object' && children.$$typeof === REACT_ELEMENT_TYPE)\n+ ) {\n+ callback(\n+ traverseContext,\n+ children,\n+ \/\/ If it's the only child, treat the name as if it was wrapped in an array\n+ \/\/ so that it's consistent if the number of children grows.\n+ nameSoFar === '' ? SEPARATOR + getComponentKey(children, 0) : nameSoFar\n+ );\n+ return 1;\n+ }\n+\n+ let child;\n+ let nextName;\n+ let subtreeCount = 0; \/\/ Count of children found in the current subtree.\n+ let nextNamePrefix = nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR;\n+\n+ if (Array.isArray(children)) {\n+ for (let i = 0; i < children.length; i++) {\n+ child = children[i];\n+ nextName = nextNamePrefix + getComponentKey(child, i);\n+ subtreeCount += traverseAllChildrenImpl(\n+ child,\n+ nextName,\n+ callback,\n+ traverseContext\n+ );\n+ }\n+ } else {\n+ let iteratorFn =\n+ (ITERATOR_SYMBOL && children[ITERATOR_SYMBOL]) ||\n+ children[FAUX_ITERATOR_SYMBOL];\n+ if (typeof iteratorFn === 'function') {\n+ let iterator = iteratorFn.call(children);\n+ let step;\n+ let ii = 0;\n+ while (!(step = iterator.next()).done) {\n+ child = step.value;\n+ nextName = nextNamePrefix + getComponentKey(child, ii++);\n+ subtreeCount += traverseAllChildrenImpl(\n+ child,\n+ nextName,\n+ callback,\n+ traverseContext\n+ );\n+ }\n+ } else if (type === 'object') {\n+ let addendum =\n+ ' If you meant to render a collection of children, use an array ' +\n+ 'instead.';\n+ let childrenString = '' + children;\n+ throw Error(\n+ `The React Devtools cannot render an object as a child. (found: ${\n+ childrenString === '[object Object]'\n+ ? 'object with keys {' + Object.keys(children).join(', ') + '}'\n+ : childrenString\n+ }). ${addendum}`\n+ );\n+ }\n+ }\n+\n+ return subtreeCount;\n+}\ndiff --git a\/src\/backend\/legacy\/utils.js b\/src\/backend\/legacy\/utils.js\nnew file mode 100644\nindex 0000000000..49a67888a2\n--- \/dev\/null\n+++ b\/src\/backend\/legacy\/utils.js\n@@ -0,0 +1,55 @@\n+\/\/ @flow\n+\n+import type { InternalInstance } from '.\/renderer';\n+\n+export function decorateResult(\n+ object: Object,\n+ attr: string,\n+ fn: Function\n+): Function {\n+ const old = object[attr];\n+ object[attr] = function(instance: InternalInstance) {\n+ const res = old.apply(this, arguments);\n+ fn(res);\n+ return res;\n+ };\n+ return old;\n+}\n+\n+export function decorate(object: Object, attr: string, fn: Function): Function {\n+ const old = object[attr];\n+ object[attr] = function(instance: InternalInstance) {\n+ const res = old.apply(this, arguments);\n+ fn.apply(this, arguments);\n+ return res;\n+ };\n+ return old;\n+}\n+\n+export function decorateMany(\n+ source: Object,\n+ fns: { [attr: string]: Function }\n+): Object {\n+ const olds = {};\n+ for (const name in fns) {\n+ olds[name] = decorate(source, name, fns[name]);\n+ }\n+ return olds;\n+}\n+\n+export function restoreMany(source: Object, olds: Object): void {\n+ for (let name in olds) {\n+ source[name] = olds[name];\n+ }\n+}\n+\n+export function forceUpdate(instance: InternalInstance): void {\n+ if (typeof instance.forceUpdate === 'function') {\n+ instance.forceUpdate();\n+ } else if (\n+ instance.updater != null &&\n+ typeof instance.updater.enqueueForceUpdate === 'function'\n+ ) {\n+ instance.updater.enqueueForceUpdate(this, () => {}, 'forceUpdate');\n+ }\n+}\ndiff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex 7aa8b1555a..d0acd59fa5 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -14,7 +14,7 @@ import {\n ElementTypeRoot,\n ElementTypeSuspense,\n } from 'src\/devtools\/types';\n-import { getDisplayName, utfEncodeString } from '..\/utils';\n+import { getDisplayName, getUID, utfEncodeString } from '..\/utils';\n import { cleanForBridge, copyWithSet, setInObject } from '.\/utils';\n import {\n __DEBUG__,\n@@ -25,7 +25,6 @@ import {\n TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN,\n TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n } from '..\/constants';\n-import { getUID } from '..\/utils';\n import { inspectHooksOfFiber } from '.\/ReactDebugHooks';\n \n import type {\n@@ -312,8 +311,6 @@ export function attach(\n : symbolOrNumber;\n }\n \n- \/\/ TODO: we might want to change the data structure once we no longer suppport Stack versions of `getData`.\n- \/\/ TODO: Keep in sync with getElementType()\n function getDataForFiber(fiber: Fiber): FiberData {\n const { elementType, type, key, tag } = fiber;\n \n@@ -1166,7 +1163,7 @@ export function attach(\n currentRootID = -1;\n }\n \n- function findNativeByFiberID(id: number) {\n+ function getNativeFromInternal(id: number) {\n try {\n const fiber = findCurrentFiberUsingSlowPath(idToFiberMap.get(id));\n if (fiber === null) {\n@@ -1190,7 +1187,7 @@ export function attach(\n }\n }\n \n- function getFiberIDFromNative(\n+ function getInternalIDFromNative(\n hostInstance,\n findNearestUnfilteredAncestor = false\n ) {\n@@ -1441,6 +1438,14 @@ export function attach(\n case ForwardRef:\n global.$type = fiber.type.render;\n break;\n+ case MemoComponent:\n+ case SimpleMemoComponent:\n+ const { elementType, type } = fiber;\n+ global.$type =\n+ elementType != null && elementType.type != null\n+ ? elementType.type\n+ : type;\n+ break;\n default:\n global.$type = null;\n break;\n@@ -1483,7 +1488,9 @@ export function attach(\n tag === FunctionComponent ||\n tag === IncompleteClassComponent ||\n tag === IndeterminateComponent ||\n- tag === ForwardRef\n+ tag === MemoComponent ||\n+ tag === ForwardRef ||\n+ tag === SimpleMemoComponent\n ) {\n canViewSource = true;\n if (stateNode && stateNode.context != null) {\n@@ -1623,7 +1630,7 @@ export function attach(\n if (result.hooks !== null) {\n console.log('Hooks:', result.hooks);\n }\n- const nativeNode = findNativeByFiberID(id);\n+ const nativeNode = getNativeFromInternal(id);\n if (nativeNode !== null) {\n console.log('Node:', nativeNode);\n }\n@@ -1938,10 +1945,10 @@ export function attach(\n cleanup,\n flushInitialOperations,\n getCommitDetails,\n- getFiberIDFromNative,\n+ getInternalIDFromNative,\n getFiberCommits,\n getInteractions,\n- findNativeByFiberID,\n+ getNativeFromInternal,\n getProfilingDataForDownload,\n getProfilingSummary,\n handleCommitFiberRoot,\ndiff --git a\/src\/backend\/types.js b\/src\/backend\/types.js\nindex bd4562eef7..afd060bb48 100644\n--- a\/src\/backend\/types.js\n+++ b\/src\/backend\/types.js\n@@ -19,7 +19,7 @@ export type FiberData = {|\n type: ElementType,\n |};\n \n-export type NativeType = {};\n+export type NativeType = Object;\n export type RendererID = number;\n \n type Dispatcher = any;\n@@ -90,17 +90,20 @@ export type ProfilingSummary = {|\n rootID: number,\n |};\n \n+export type GetInternalIDFromNative = (\n+ component: NativeType,\n+ findNearestUnfilteredAncestor?: boolean\n+) => number | null;\n+export type GetNativeFromInternal = (id: number) => ?NativeType;\n+\n export type RendererInterface = {\n cleanup: () => void,\n- findNativeByFiberID: (id: number) => ?NativeType,\n flushInitialOperations: () => void,\n getCommitDetails: (rootID: number, commitIndex: number) => CommitDetails,\n- getFiberIDFromNative: (\n- component: NativeType,\n- findNearestUnfilteredAncestor?: boolean\n- ) => number | null,\n getFiberCommits: (rootID: number, fiberID: number) => FiberCommits,\n getInteractions: (rootID: number) => Interactions,\n+ getInternalIDFromNative: GetInternalIDFromNative,\n+ getNativeFromInternal: GetNativeFromInternal,\n getProfilingDataForDownload: (rootID: number) => Object,\n getProfilingSummary: (rootID: number) => ProfilingSummary,\n handleCommitFiberRoot: (fiber: Object) => void,\n@@ -112,14 +115,14 @@ export type RendererInterface = {\n renderer: ReactRenderer | null,\n selectElement: (id: number) => void,\n setInContext: (id: number, path: Array<string | number>, value: any) => void,\n+ setInProps: (id: number, path: Array<string | number>, value: any) => void,\n+ setInState: (id: number, path: Array<string | number>, value: any) => void,\n setInHook: (\n id: number,\n index: number,\n path: Array<string | number>,\n value: any\n ) => void,\n- setInProps: (id: number, path: Array<string | number>, value: any) => void,\n- setInState: (id: number, path: Array<string | number>, value: any) => void,\n startProfiling: () => void,\n stopProfiling: () => void,\n };\ndiff --git a\/src\/utils.js b\/src\/utils.js\nindex f085f550d5..7065a6fe3c 100644\n--- a\/src\/utils.js\n+++ b\/src\/utils.js\n@@ -1,6 +1,16 @@\n \/\/ @flow\n \n-const LRU = require('lru-cache');\n+import LRU from 'lru-cache';\n+import {\n+ TREE_OPERATION_ADD,\n+ TREE_OPERATION_REMOVE,\n+ TREE_OPERATION_RESET_CHILDREN,\n+ TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN,\n+ TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n+} from '.\/constants';\n+import { ElementTypeRoot } from 'src\/devtools\/types';\n+\n+import type { ElementType } from 'src\/devtools\/types';\n \n const FB_MODULE_RE = \/^(.*) \\[from (.*)\\]$\/;\n const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();\n@@ -76,3 +86,96 @@ export function utfEncodeString(string: string): Uint32Array {\n function toCodePoint(string: string) {\n return string.codePointAt(0);\n }\n+\n+export function operationsArrayToString(operations: Uint32Array) {\n+ const rendererID = operations[0];\n+ const rootID = operations[1];\n+\n+ console.group('rendererID:', rendererID, 'rootID:', rootID);\n+\n+ let i = 2;\n+ while (i < operations.length) {\n+ let id: number = ((null: any): number);\n+ let parentID: number = ((null: any): number);\n+ let type: ElementType = ((null: any): ElementType);\n+\n+ const operation = operations[i];\n+\n+ switch (operation) {\n+ case TREE_OPERATION_ADD:\n+ id = ((operations[i + 1]: any): number);\n+ type = ((operations[i + 2]: any): ElementType);\n+\n+ i = i + 3;\n+\n+ if (type === ElementTypeRoot) {\n+ console.log(`Add root fiber ${id}`);\n+\n+ i++; \/\/ supportsProfiling\n+ i++; \/\/ hasOwnerMetadata\n+ } else {\n+ parentID = ((operations[i]: any): number);\n+ i++;\n+\n+ i++; \/\/ ownerID\n+\n+ const displayNameLength = operations[i];\n+ i++;\n+ const displayName =\n+ displayNameLength === 0\n+ ? null\n+ : utfDecodeString(\n+ (operations.slice(i, i + displayNameLength): any)\n+ );\n+ i += displayNameLength;\n+\n+ const keyLength = operations[i];\n+ i++;\n+ i += +keyLength;\n+\n+ console.log(\n+ `Add fiber ${id} (${displayName || 'null'}) as child of ${parentID}`\n+ );\n+ }\n+ break;\n+ case TREE_OPERATION_RECURSIVE_REMOVE_CHILDREN: {\n+ id = ((operations[i + 1]: any): number);\n+\n+ i = i + 2;\n+\n+ console.log(`Recursively remove children from fiber ${id}`);\n+ break;\n+ }\n+ case TREE_OPERATION_REMOVE: {\n+ id = ((operations[i + 1]: any): number);\n+\n+ i = i + 2;\n+\n+ console.log(`Remove fiber ${id}`);\n+ break;\n+ }\n+ case TREE_OPERATION_RESET_CHILDREN:\n+ id = ((operations[i + 1]: any): number);\n+ const numChildren = ((operations[i + 2]: any): number);\n+ const children = ((operations.slice(\n+ i + 3,\n+ i + 3 + numChildren\n+ ): any): Array<number>);\n+\n+ i = i + 3 + numChildren;\n+\n+ console.log(`Re-order fiber ${id} children ${children.join(',')}`);\n+ break;\n+ case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:\n+ \/\/ Base duration updates are only sent while profiling is in progress.\n+ \/\/ We can ignore them at this point.\n+ \/\/ The profiler UI uses them lazily in order to generate the tree.\n+ i = i + 3;\n+ break;\n+ default:\n+ throw Error(`Unsupported Bridge operation ${operation}`);\n+ }\n+ }\n+\n+ console.groupEnd();\n+}\n","body":"","commit":{"shortRevision":"7ab93402a8","authorName":"Brian Vaughn","authoredAt":"2019-04-16T10:22:26-07:00","subject":"Initial support for v15+ via new legaacy renderer","revision":"7ab93402a8de30fa7e0e885ff40aae2890b901c7","authorEmail":"bvaughn@fb.com"},"parents":["0d932d770bb4328fc1e6acdb00ca5dbf43288ad4"],"files":[{"status":"M","path":".gitignore"},{"status":"A","path":"fixtures\/regression\/14.9.html"},{"status":"A","path":"fixtures\/regression\/15.0.html"},{"status":"A","path":"fixtures\/regression\/15.1.html"},{"status":"A","path":"fixtures\/regression\/15.2.html"},{"status":"A","path":"fixtures\/regression\/15.3.html"},{"status":"A","path":"fixtures\/regression\/15.4.html"},{"status":"A","path":"fixtures\/regression\/15.5.html"},{"status":"A","path":"fixtures\/regression\/15.6.html"},{"status":"A","path":"fixtures\/regression\/16.0.html"},{"status":"A","path":"fixtures\/regression\/16.1.html"},{"status":"A","path":"fixtures\/regression\/16.2.html"},{"status":"A","path":"fixtures\/regression\/16.3.html"},{"status":"A","path":"fixtures\/regression\/16.4.html"},{"status":"A","path":"fixtures\/regression\/16.5.html"},{"status":"A","path":"fixtures\/regression\/16.6.html"},{"status":"A","path":"fixtures\/regression\/16.7.html"},{"status":"A","path":"fixtures\/regression\/canary.html"},{"status":"A","path":"fixtures\/regression\/index.html"},{"status":"A","path":"fixtures\/regression\/next.html"},{"status":"A","path":"fixtures\/regression\/shared.js"},{"status":"A","path":"fixtures\/regression\/styles.css"},{"status":"M","path":"src\/backend\/agent.js"},{"status":"M","path":"src\/backend\/index.js"},{"status":"A","path":"src\/backend\/legacy\/getChildren.js"},{"status":"A","path":"src\/backend\/legacy\/getData.js"},{"status":"A","path":"src\/backend\/legacy\/getElementType.js"},{"status":"A","path":"src\/backend\/legacy\/renderer.js"},{"status":"A","path":"src\/backend\/legacy\/traverseAllChildrenImpl.js"},{"status":"A","path":"src\/backend\/legacy\/utils.js"},{"status":"M","path":"src\/backend\/renderer.js"},{"status":"M","path":"src\/backend\/types.js"},{"status":"M","path":"src\/utils.js"}]}</article></body></html>

dillon1000/react

Files changed