{"parents":["5e8678a0a9378dd3583b78e52b8d1117625c66b8","6298fd424865811a5af655f01ee8e791c9298fc5"],"files":[{"status":"A","path":"shells\/dev\/app\/Hydration\/index.js"},{"status":"M","path":"shells\/dev\/app\/index.js"},{"status":"M","path":"src\/__tests__\/__snapshots__\/inspectedElementContext-test.js.snap"},{"status":"M","path":"src\/__tests__\/inspectedElementContext-test.js"},{"status":"A","path":"src\/__tests__\/legacy\/__snapshots__\/inspectElement-test.js.snap"},{"status":"A","path":"src\/__tests__\/legacy\/inspectElement-test.js"},{"status":"M","path":"src\/backend\/agent.js"},{"status":"M","path":"src\/backend\/legacy\/renderer.js"},{"status":"M","path":"src\/backend\/renderer.js"},{"status":"M","path":"src\/backend\/types.js"},{"status":"M","path":"src\/backend\/utils.js"},{"status":"M","path":"src\/bridge.js"},{"status":"M","path":"src\/devtools\/views\/Components\/ExpandCollapseToggle.js"},{"status":"M","path":"src\/devtools\/views\/Components\/HooksTree.js"},{"status":"M","path":"src\/devtools\/views\/Components\/InspectedElementContext.js"},{"status":"M","path":"src\/devtools\/views\/Components\/InspectedElementTree.js"},{"status":"M","path":"src\/devtools\/views\/Components\/KeyValue.css"},{"status":"M","path":"src\/devtools\/views\/Components\/KeyValue.js"},{"status":"M","path":"src\/devtools\/views\/Components\/SelectedElement.js"},{"status":"M","path":"src\/devtools\/views\/Components\/types.js"},{"status":"M","path":"src\/devtools\/views\/utils.js"},{"status":"M","path":"src\/hydration.js"},{"status":"M","path":"src\/utils.js"}],"patch":"diff --git a\/shells\/dev\/app\/Hydration\/index.js b\/shells\/dev\/app\/Hydration\/index.js\nnew file mode 100644\nindex 0000000000..bf0cd66a52\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/Hydration\/index.js\n@@ -0,0 +1,133 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useDebugValue, useState } from 'react';\n+\n+const div = document.createElement('div');\n+const exmapleFunction = () => {};\n+const typedArray = new Uint8Array(3);\n+typedArray[0] = 1;\n+typedArray[1] = 2;\n+typedArray[2] = 3;\n+\n+const arrayOfArrays = [\n+ [['a', 'b', 'c'], ['d', 'e', 'f'], ['h', 'i', 'j']],\n+ [['k', 'l', 'm'], ['n', 'o', 'p'], ['q', 'r', 's']],\n+ [['t', 'u', 'v'], ['w', 'x', 'y'], ['z']],\n+ [],\n+];\n+\n+const objectOfObjects = {\n+ foo: {\n+ a: 1,\n+ b: 2,\n+ c: 3,\n+ },\n+ bar: {\n+ e: 4,\n+ f: 5,\n+ g: 6,\n+ },\n+ baz: {\n+ h: 7,\n+ i: 8,\n+ j: 9,\n+ },\n+ qux: {},\n+};\n+\n+function useOuterFoo() {\n+ useDebugValue({\n+ debugA: {\n+ debugB: {\n+ debugC: 'abc',\n+ },\n+ },\n+ });\n+ useState({\n+ valueA: {\n+ valueB: {\n+ valueC: 'abc',\n+ },\n+ },\n+ });\n+ return useInnerFoo();\n+}\n+\n+function useInnerFoo() {\n+ const [value] = useState([[['a', 'b', 'c']]]);\n+ return value;\n+}\n+\n+function useOuterBar() {\n+ useDebugValue({\n+ debugA: {\n+ debugB: {\n+ debugC: 'abc',\n+ },\n+ },\n+ });\n+ return useInnerBar();\n+}\n+\n+function useInnerBar() {\n+ useDebugValue({\n+ debugA: {\n+ debugB: {\n+ debugC: 'abc',\n+ },\n+ },\n+ });\n+ const [count] = useState(123);\n+ return count;\n+}\n+\n+function useOuterBaz() {\n+ return useInnerBaz();\n+}\n+\n+function useInnerBaz() {\n+ const [count] = useState(123);\n+ return count;\n+}\n+\n+export default function Hydration() {\n+ return (\n+ \n+

Hydration<\/h1>\n+ }\n+ array_buffer={typedArray.buffer}\n+ typed_array={typedArray}\n+ date={new Date()}\n+ array={arrayOfArrays}\n+ object={objectOfObjects}\n+ \/>\n+ \n+ <\/Fragment>\n+ );\n+}\n+\n+function DehydratableProps({ array, object }: any) {\n+ return (\n+
\n+
array: {JSON.stringify(array, null, 2)}<\/li>\n+
object: {JSON.stringify(object, null, 2)}<\/li>\n+ <\/ul>\n+ );\n+}\n+\n+function DeepHooks(props: any) {\n+ const foo = useOuterFoo();\n+ const bar = useOuterBar();\n+ const baz = useOuterBaz();\n+ return (\n+
\n+
foo: {foo}<\/li>\n+
bar: {bar}<\/li>\n+
baz: {baz}<\/li>\n+ <\/ul>\n+ );\n+}\ndiff --git a\/shells\/dev\/app\/index.js b\/shells\/dev\/app\/index.js\nindex 1a2336982c..b5f0923c1b 100644\n--- a\/shells\/dev\/app\/index.js\n+++ b\/shells\/dev\/app\/index.js\n@@ -10,6 +10,7 @@ import {\n import DeeplyNestedComponents from '.\/DeeplyNestedComponents';\n import EditableProps from '.\/EditableProps';\n import ElementTypes from '.\/ElementTypes';\n+import Hydration from '.\/Hydration';\n import InspectableElements from '.\/InspectableElements';\n import InteractionTracing from '.\/InteractionTracing';\n import PriorityLevels from '.\/PriorityLevels';\n@@ -36,6 +37,7 @@ function mountTestApp() {\n mountHelper(ToDoList);\n mountHelper(InteractionTracing);\n mountHelper(InspectableElements);\n+ mountHelper(Hydration);\n mountHelper(ElementTypes);\n mountHelper(EditableProps);\n mountHelper(PriorityLevels);\ndiff --git a\/src\/tests\/snapshots\/inspectedElementContext-test.js.snap b\/src\/tests\/snapshots\/inspectedElementContext-test.js.snap\nindex 2587fed2b4..1c9be05a4f 100644\n--- a\/src\/tests\/snapshots\/inspectedElementContext-test.js.snap\n+++ b\/src\/tests\/snapshots\/inspectedElementContext-test.js.snap\n@@ -1,11 +1,101 @@\n \/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n \n-exports[`InspectedElementContext should inspect the currently selected element: 1: mount 1`] = `\n-[root]\n- \n+exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 1: Initially inspect element 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"events\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {},\n+ \"c\": {}\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 2: Inspect props.nestedObject.a 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"events\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"value\": 1,\n+ \"b\": {\n+ \"value\": 1\n+ }\n+ },\n+ \"c\": {}\n+ }\n+ },\n+ \"state\": null\n+}\n `;\n \n-exports[`InspectedElementContext should inspect the currently selected element: 2: Inspected element 2 1`] = `\n+exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 3: Inspect props.nestedObject.c 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"events\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"value\": 1,\n+ \"b\": {\n+ \"value\": 1\n+ }\n+ },\n+ \"c\": {\n+ \"value\": 1,\n+ \"d\": {\n+ \"value\": 1,\n+ \"e\": {}\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 4: update inspected element 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"events\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"value\": 2,\n+ \"b\": {\n+ \"value\": 2\n+ }\n+ },\n+ \"c\": {\n+ \"value\": 2,\n+ \"d\": {\n+ \"value\": 2,\n+ \"e\": {}\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should inspect the currently selected element: 1: Inspected element 2 1`] = `\n {\n \"id\": 2,\n \"owners\": null,\n@@ -21,20 +111,218 @@ exports[`InspectedElementContext should inspect the currently selected element:\n }\n ],\n \"props\": {\n- \"foo\": 1,\n- \"bar\": \"abc\"\n+ \"a\": 1,\n+ \"b\": \"abc\"\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 1: Initially inspect element 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"events\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": {\n+ \"foo\": {}\n+ },\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {}\n+ }\n },\n \"state\": null\n }\n `;\n \n-exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 1: mount 1`] = `\n-[root]\n- ▾ \n- \n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 2: Inspect props.nestedObject.a 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"events\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": {\n+ \"foo\": {}\n+ },\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": {}\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n `;\n \n-exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 2: initial render 1`] = `\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 3: Inspect props.nestedObject.a.b.c 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"events\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": {\n+ \"foo\": {}\n+ },\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": [\n+ {\n+ \"d\": {}\n+ }\n+ ]\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 4: Inspect props.nestedObject.a.b.c.0.d 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"events\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": {\n+ \"foo\": {}\n+ },\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": [\n+ {\n+ \"d\": {\n+ \"e\": {}\n+ }\n+ }\n+ ]\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 5: Inspect hooks.0.value 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"events\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": {\n+ \"foo\": {\n+ \"bar\": {}\n+ }\n+ },\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": [\n+ {\n+ \"d\": {\n+ \"e\": {}\n+ }\n+ }\n+ ]\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 6: Inspect hooks.0.value.foo.bar 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"events\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": {\n+ \"foo\": {\n+ \"bar\": {\n+ \"baz\": \"hi\"\n+ }\n+ }\n+ },\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": [\n+ {\n+ \"d\": {\n+ \"e\": {}\n+ }\n+ }\n+ ]\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 1: initial render 1`] = `\n {\n \"id\": 3,\n \"owners\": null,\n@@ -50,14 +338,14 @@ exports[`InspectedElementContext should not re-render a function with hooks if i\n }\n ],\n \"props\": {\n- \"foo\": 1,\n- \"bar\": \"abc\"\n+ \"a\": 1,\n+ \"b\": \"abc\"\n },\n \"state\": null\n }\n `;\n \n-exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 3: updated state 1`] = `\n+exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 2: updated state 1`] = `\n {\n \"id\": 3,\n \"owners\": null,\n@@ -73,19 +361,53 @@ exports[`InspectedElementContext should not re-render a function with hooks if i\n }\n ],\n \"props\": {\n- \"foo\": 2,\n- \"bar\": \"def\"\n+ \"a\": 2,\n+ \"b\": \"def\"\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not tear if hydration is requested after an update: 1: Initially inspect element 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"events\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"value\": 1,\n+ \"a\": {}\n+ }\n },\n \"state\": null\n }\n `;\n \n-exports[`InspectedElementContext should poll for updates for the currently selected element: 1: mount 1`] = `\n-[root]\n- \n+exports[`InspectedElementContext should not tear if hydration is requested after an update: 2: Inspect props.nestedObject.a 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"events\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"value\": 2,\n+ \"a\": {\n+ \"value\": 2,\n+ \"b\": {\n+ \"value\": 2\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+}\n `;\n \n-exports[`InspectedElementContext should poll for updates for the currently selected element: 2: initial render 1`] = `\n+exports[`InspectedElementContext should poll for updates for the currently selected element: 1: initial render 1`] = `\n {\n \"id\": 2,\n \"owners\": null,\n@@ -93,8 +415,8 @@ exports[`InspectedElementContext should poll for updates for the currently selec\n \"events\": null,\n \"hooks\": null,\n \"props\": {\n- \"foo\": 1,\n- \"bar\": \"abc\"\n+ \"a\": 1,\n+ \"b\": \"abc\"\n },\n \"state\": null\n }\n@@ -108,19 +430,34 @@ exports[`InspectedElementContext should poll for updates for the currently selec\n \"events\": null,\n \"hooks\": null,\n \"props\": {\n- \"foo\": 2,\n- \"bar\": \"def\"\n+ \"a\": 2,\n+ \"b\": \"def\"\n },\n \"state\": null\n }\n `;\n \n-exports[`InspectedElementContext should support custom objects with enumerable properties and getters: 1: mount 1`] = `\n-[root]\n- \n+exports[`InspectedElementContext should support complex data types: 1: Inspected element 2 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"events\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"html_element\": {},\n+ \"fn\": {},\n+ \"symbol\": {},\n+ \"react_element\": {},\n+ \"array_buffer\": {},\n+ \"typed_array\": {},\n+ \"date\": {}\n+ },\n+ \"state\": null\n+}\n `;\n \n-exports[`InspectedElementContext should support custom objects with enumerable properties and getters: 2: Inspected element 2 1`] = `\n+exports[`InspectedElementContext should support custom objects with enumerable properties and getters: 1: Inspected element 2 1`] = `\n {\n \"id\": 2,\n \"owners\": null,\ndiff --git a\/src\/tests\/inspectedElementContext-test.js b\/src\/tests\/inspectedElementContext-test.js\nindex 1a66f1dcd1..105a23135f 100644\n--- a\/src\/tests\/inspectedElementContext-test.js\n+++ b\/src\/tests\/inspectedElementContext-test.js\n@@ -1,7 +1,7 @@\n \/\/ @flow\n \n import typeof ReactTestRenderer from 'react-test-renderer';\n-import type { Element } from 'src\/devtools\/views\/Components\/types';\n+import type { GetInspectedElementPath } from 'src\/devtools\/views\/Components\/InspectedElementContext';\n import type Bridge from 'src\/bridge';\n import type Store from 'src\/devtools\/store';\n \n@@ -11,24 +11,29 @@ describe('InspectedElementContext', () => {\n let TestRenderer: ReactTestRenderer;\n let bridge: Bridge;\n let store: Store;\n+ let meta;\n let utils;\n \n let BridgeContext;\n let InspectedElementContext;\n let InspectedElementContextController;\n let StoreContext;\n+ let TestUtils;\n let TreeContextController;\n \n beforeEach(() => {\n utils = require('.\/utils');\n utils.beforeEachProfiling();\n \n+ meta = require('src\/hydration').meta;\n+\n bridge = global.bridge;\n store = global.store;\n store.collapseNodesByDefault = false;\n \n React = require('react');\n ReactDOM = require('react-dom');\n+ TestUtils = require('react-dom\/test-utils');\n TestRenderer = utils.requireTestRenderer();\n \n BridgeContext = require('src\/devtools\/views\/context').BridgeContext;\n@@ -68,20 +73,17 @@ describe('InspectedElementContext', () => {\n \n const container = document.createElement('div');\n await utils.actAsync(() =>\n- ReactDOM.render(, container)\n+ ReactDOM.render(, container)\n );\n- expect(store).toMatchSnapshot('1: mount');\n \n- const example = ((store.getElementAtIndex(0): any): Element);\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n \n let didFinish = false;\n \n function Suspender({ target }) {\n- const { read } = React.useContext(InspectedElementContext);\n- const inspectedElement = read(target.id);\n- expect(inspectedElement).toMatchSnapshot(\n- `2: Inspected element ${target.id}`\n- );\n+ const { getInspectedElement } = React.useContext(InspectedElementContext);\n+ const inspectedElement = getInspectedElement(id);\n+ expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);\n didFinish = true;\n return null;\n }\n@@ -90,11 +92,11 @@ describe('InspectedElementContext', () => {\n () =>\n TestRenderer.create(\n \n \n- \n+ \n <\/React.Suspense>\n <\/Contexts>\n ),\n@@ -110,18 +112,17 @@ describe('InspectedElementContext', () => {\n \n const container = document.createElement('div');\n await utils.actAsync(\n- () => ReactDOM.render(, container),\n+ () => ReactDOM.render(, container),\n false\n );\n- expect(store).toMatchSnapshot('1: mount');\n \n- const example = ((store.getElementAtIndex(0): any): Element);\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n \n let inspectedElement = null;\n \n function Suspender({ target }) {\n- const { read } = React.useContext(InspectedElementContext);\n- inspectedElement = read(target.id);\n+ const { getInspectedElement } = React.useContext(InspectedElementContext);\n+ inspectedElement = getInspectedElement(id);\n return null;\n }\n \n@@ -129,20 +130,17 @@ describe('InspectedElementContext', () => {\n \n await utils.actAsync(() => {\n renderer = TestRenderer.create(\n- \n+ \n \n- \n+ \n <\/React.Suspense>\n <\/Contexts>\n );\n }, false);\n- expect(inspectedElement).toMatchSnapshot('2: initial render');\n+ expect(inspectedElement).toMatchSnapshot('1: initial render');\n \n await utils.actAsync(\n- () => ReactDOM.render(, container),\n+ () => ReactDOM.render(, container),\n false\n );\n \n@@ -151,11 +149,11 @@ describe('InspectedElementContext', () => {\n () =>\n renderer.update(\n \n \n- \n+ \n <\/React.Suspense>\n <\/Contexts>\n ),\n@@ -180,20 +178,19 @@ describe('InspectedElementContext', () => {\n await utils.actAsync(() =>\n ReactDOM.render(\n \n- \n+ \n <\/Wrapper>,\n container\n )\n );\n- expect(store).toMatchSnapshot('1: mount');\n \n const id = ((store.getElementIDAtIndex(1): any): number);\n \n let inspectedElement = null;\n \n function Suspender({ target }) {\n- const { read } = React.useContext(InspectedElementContext);\n- inspectedElement = read(target);\n+ const { getInspectedElement } = React.useContext(InspectedElementContext);\n+ inspectedElement = getInspectedElement(target);\n return null;\n }\n \n@@ -215,7 +212,7 @@ describe('InspectedElementContext', () => {\n false\n );\n expect(targetRenderCount).toBe(1);\n- expect(inspectedElement).toMatchSnapshot('2: initial render');\n+ expect(inspectedElement).toMatchSnapshot('1: initial render');\n \n const initialInspectedElement = inspectedElement;\n \n@@ -244,7 +241,7 @@ describe('InspectedElementContext', () => {\n () =>\n ReactDOM.render(\n \n- \n+ \n <\/Wrapper>,\n container\n ),\n@@ -253,7 +250,93 @@ describe('InspectedElementContext', () => {\n \n \/\/ Target should have been rendered once (by ReactDOM) and once by DevTools for inspection.\n expect(targetRenderCount).toBe(2);\n- expect(inspectedElement).toMatchSnapshot('3: updated state');\n+ expect(inspectedElement).toMatchSnapshot('2: updated state');\n+\n+ done();\n+ });\n+\n+ it('should support complex data types', async done => {\n+ const Example = () => null;\n+\n+ const div = document.createElement('div');\n+ const exmapleFunction = () => {};\n+ const typedArray = new Uint8Array(3);\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ }\n+ array_buffer={typedArray.buffer}\n+ typed_array={typedArray}\n+ date={new Date()}\n+ \/>,\n+ container\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const { getInspectedElement } = React.useContext(InspectedElementContext);\n+ inspectedElement = getInspectedElement(id);\n+ return null;\n+ }\n+\n+ await utils.actAsync(\n+ () =>\n+ TestRenderer.create(\n+ \n+ \n+ \n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);\n+\n+ const {\n+ html_element,\n+ fn,\n+ symbol,\n+ react_element,\n+ array_buffer,\n+ typed_array,\n+ date,\n+ } = (inspectedElement: any).props;\n+ expect(html_element[meta.inspectable]).toBe(false);\n+ expect(html_element[meta.name]).toBe('DIV');\n+ expect(html_element[meta.type]).toBe('html_element');\n+ expect(fn[meta.inspectable]).toBe(false);\n+ expect(fn[meta.name]).toBe('exmapleFunction');\n+ expect(fn[meta.type]).toBe('function');\n+ expect(symbol[meta.inspectable]).toBe(false);\n+ expect(symbol[meta.name]).toBe('Symbol(symbol)');\n+ expect(symbol[meta.type]).toBe('symbol');\n+ expect(react_element[meta.inspectable]).toBe(false);\n+ expect(react_element[meta.name]).toBe('span');\n+ expect(react_element[meta.type]).toBe('react_element');\n+ expect(array_buffer[meta.size]).toBe(3);\n+ expect(array_buffer[meta.inspectable]).toBe(false);\n+ expect(array_buffer[meta.name]).toBe('ArrayBuffer');\n+ expect(array_buffer[meta.type]).toBe('array_buffer');\n+ expect(typed_array[meta.size]).toBe(3);\n+ expect(typed_array[meta.inspectable]).toBe(false);\n+ expect(typed_array[meta.name]).toBe('Uint8Array');\n+ expect(typed_array[meta.type]).toBe('typed_array');\n+ expect(date[meta.inspectable]).toBe(false);\n+ expect(date[meta.type]).toBe('date');\n \n done();\n });\n@@ -276,24 +359,21 @@ describe('InspectedElementContext', () => {\n descriptor.enumerable = true;\n Object.defineProperty(CustomData.prototype, 'number', descriptor);\n \n- const Example = ({ data }) => null;\n+ const Example = () => null;\n \n const container = document.createElement('div');\n await utils.actAsync(() =>\n ReactDOM.render(, container)\n );\n- expect(store).toMatchSnapshot('1: mount');\n \n- const example = ((store.getElementAtIndex(0): any): Element);\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n \n let didFinish = false;\n \n function Suspender({ target }) {\n- const { read } = React.useContext(InspectedElementContext);\n- const inspectedElement = read(target.id);\n- expect(inspectedElement).toMatchSnapshot(\n- `2: Inspected element ${target.id}`\n- );\n+ const { getInspectedElement } = React.useContext(InspectedElementContext);\n+ const inspectedElement = getInspectedElement(id);\n+ expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);\n didFinish = true;\n return null;\n }\n@@ -302,11 +382,11 @@ describe('InspectedElementContext', () => {\n () =>\n TestRenderer.create(\n \n \n- \n+ \n <\/React.Suspense>\n <\/Contexts>\n ),\n@@ -316,4 +396,315 @@ describe('InspectedElementContext', () => {\n \n done();\n });\n+\n+ it('should not dehydrate nested values until explicitly requested', async done => {\n+ const Example = () => {\n+ const [state] = React.useState({\n+ foo: {\n+ bar: {\n+ baz: 'hi',\n+ },\n+ },\n+ });\n+\n+ return state.foo.bar.baz;\n+ };\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ ,\n+ container\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const context = React.useContext(InspectedElementContext);\n+ getInspectedElementPath = context.getInspectedElementPath;\n+ inspectedElement = context.getInspectedElement(target);\n+ return null;\n+ }\n+\n+ await utils.actAsync(\n+ () =>\n+ TestRenderer.create(\n+ \n+ \n+ \n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+ expect(getInspectedElementPath).not.toBeNull();\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');\n+\n+ inspectedElement = null;\n+ TestUtils.act(() => {\n+ getInspectedElementPath(id, ['props', 'nestedObject', 'a']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');\n+\n+ inspectedElement = null;\n+ TestUtils.act(() => {\n+ getInspectedElementPath(id, ['props', 'nestedObject', 'a', 'b', 'c']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot(\n+ '3: Inspect props.nestedObject.a.b.c'\n+ );\n+\n+ inspectedElement = null;\n+ TestUtils.act(() => {\n+ getInspectedElementPath(id, [\n+ 'props',\n+ 'nestedObject',\n+ 'a',\n+ 'b',\n+ 'c',\n+ 0,\n+ 'd',\n+ ]);\n+ jest.runOnlyPendingTimers();\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot(\n+ '4: Inspect props.nestedObject.a.b.c.0.d'\n+ );\n+\n+ inspectedElement = null;\n+ TestUtils.act(() => {\n+ getInspectedElementPath(id, ['hooks', 0, 'value']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('5: Inspect hooks.0.value');\n+\n+ inspectedElement = null;\n+ TestUtils.act(() => {\n+ getInspectedElementPath(id, ['hooks', 0, 'value', 'foo', 'bar']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot(\n+ '6: Inspect hooks.0.value.foo.bar'\n+ );\n+\n+ done();\n+ });\n+\n+ it('should include updates for nested values that were previously hydrated', async done => {\n+ const Example = () => null;\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ ,\n+ container\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const context = React.useContext(InspectedElementContext);\n+ getInspectedElementPath = context.getInspectedElementPath;\n+ inspectedElement = context.getInspectedElement(id);\n+ return null;\n+ }\n+\n+ await utils.actAsync(\n+ () =>\n+ TestRenderer.create(\n+ \n+ \n+ \n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+ expect(getInspectedElementPath).not.toBeNull();\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');\n+\n+ inspectedElement = null;\n+ TestUtils.act(() => {\n+ getInspectedElementPath(id, ['props', 'nestedObject', 'a']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');\n+\n+ inspectedElement = null;\n+ TestUtils.act(() => {\n+ getInspectedElementPath(id, ['props', 'nestedObject', 'c']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('3: Inspect props.nestedObject.c');\n+\n+ TestUtils.act(() => {\n+ ReactDOM.render(\n+ ,\n+ container\n+ );\n+ });\n+\n+ TestUtils.act(() => {\n+ inspectedElement = null;\n+ jest.advanceTimersByTime(1000);\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('4: update inspected element');\n+ });\n+\n+ done();\n+ });\n+\n+ it('should not tear if hydration is requested after an update', async done => {\n+ const Example = () => null;\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ ,\n+ container\n+ )\n+ );\n+\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+\n+ let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const context = React.useContext(InspectedElementContext);\n+ getInspectedElementPath = context.getInspectedElementPath;\n+ inspectedElement = context.getInspectedElement(id);\n+ return null;\n+ }\n+\n+ await utils.actAsync(\n+ () =>\n+ TestRenderer.create(\n+ \n+ \n+ \n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ false\n+ );\n+ expect(getInspectedElementPath).not.toBeNull();\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');\n+\n+ TestUtils.act(() => {\n+ ReactDOM.render(\n+ ,\n+ container\n+ );\n+ });\n+\n+ inspectedElement = null;\n+ TestUtils.act(() => {\n+ getInspectedElementPath(id, ['props', 'nestedObject', 'a']);\n+ jest.runOnlyPendingTimers();\n+ });\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');\n+\n+ done();\n+ });\n });\ndiff --git a\/src\/tests\/legacy\/snapshots\/inspectElement-test.js.snap b\/src\/tests\/legacy\/snapshots\/inspectElement-test.js.snap\nnew file mode 100644\nindex 0000000000..db3aec6f29\n--- \/dev\/null\n+++ b\/src\/tests\/legacy\/snapshots\/inspectElement-test.js.snap\n@@ -0,0 +1,167 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`InspectedElementContext should inspect the currently selected element: 1: Initial inspection 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"events\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"a\": 1,\n+ \"b\": \"abc\"\n+ },\n+ \"state\": null\n+},\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 1: Initially inspect element 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"events\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {}\n+ }\n+ },\n+ \"state\": null\n+},\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 2: Inspect props.nestedObject.a 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"events\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": {}\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+},\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 3: Inspect props.nestedObject.a.b.c 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"events\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": [\n+ {\n+ \"d\": {}\n+ }\n+ ]\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+},\n+}\n+`;\n+\n+exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 4: Inspect props.nestedObject.a.b.c.0.d 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"events\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {\n+ \"b\": {\n+ \"c\": [\n+ {\n+ \"d\": {\n+ \"e\": {}\n+ }\n+ }\n+ ]\n+ }\n+ }\n+ }\n+ },\n+ \"state\": null\n+},\n+}\n+`;\n+\n+exports[`InspectedElementContext should support complex data types: 1: Initial inspection 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"events\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"html_element\": {},\n+ \"fn\": {},\n+ \"symbol\": {},\n+ \"react_element\": {},\n+ \"array_buffer\": {},\n+ \"typed_array\": {},\n+ \"date\": {}\n+ },\n+ \"state\": null\n+},\n+}\n+`;\n+\n+exports[`InspectedElementContext should support custom objects with enumerable properties and getters: 1: Initial inspection 1`] = `\n+Object {\n+ \"id\": 2,\n+ \"type\": \"full-data\",\n+ \"value\": {\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": {},\n+ \"events\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"data\": {\n+ \"_number\": 42,\n+ \"number\": 42\n+ }\n+ },\n+ \"state\": null\n+},\n+}\n+`;\ndiff --git a\/src\/tests\/legacy\/inspectElement-test.js b\/src\/tests\/legacy\/inspectElement-test.js\nnew file mode 100644\nindex 0000000000..23e384e529\n--- \/dev\/null\n+++ b\/src\/tests\/legacy\/inspectElement-test.js\n@@ -0,0 +1,240 @@\n+\/\/ @flow\n+\n+import type { InspectedElementPayload } from 'src\/backend\/types';\n+import type { DehydratedData } from 'src\/devtools\/views\/Components\/types';\n+import type Bridge from 'src\/bridge';\n+import type Store from 'src\/devtools\/store';\n+\n+describe('InspectedElementContext', () => {\n+ let React;\n+ let ReactDOM;\n+ let hydrate;\n+ let meta;\n+ let bridge: Bridge;\n+ let store: Store;\n+\n+ const act = (callback: Function) => {\n+ callback();\n+\n+ jest.runAllTimers(); \/\/ Flush Bridge operations\n+ };\n+\n+ function dehydrateHelper(\n+ dehydratedData: DehydratedData | null\n+ ): Object | null {\n+ if (dehydratedData !== null) {\n+ return hydrate(dehydratedData.data, dehydratedData.cleaned);\n+ } else {\n+ return null;\n+ }\n+ }\n+\n+ async function read(\n+ id: number,\n+ path?: Array\n+ ): Promise

dillon1000/react

Files changed