{"commit":{"authoredAt":"2019-06-16T17:32:37-07:00","subject":"Initial support for hydration added to both renderer interfaces.","authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com","shortRevision":"a6d3f30f95","revision":"a6d3f30f95f7d5d3a5c637f878b2b2cdb3fbe65b"},"body":"","patch":"diff --git a\/shells\/dev\/app\/InspectableElements\/Hydration.js b\/shells\/dev\/app\/InspectableElements\/Hydration.js\nnew file mode 100644\nindex 0000000000..04cdc50164\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/InspectableElements\/Hydration.js\n@@ -0,0 +1,54 @@\n+\/\/ @flow\n+\n+import React 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+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+};\n+\n+export default function Hydration() {\n+ return (\n+ }\n+ array_buffer={typedArray.buffer}\n+ typed_array={typedArray}\n+ date={new Date()}\n+ array={arrayOfArrays}\n+ object={objectOfObjects}\n+ \/>\n+ );\n+}\n+\n+function ChildComponent(props: any) {\n+ return null;\n+}\ndiff --git a\/shells\/dev\/app\/InspectableElements\/InspectableElements.js b\/shells\/dev\/app\/InspectableElements\/InspectableElements.js\nindex b148501ce1..6eadd15bc6 100644\n--- a\/shells\/dev\/app\/InspectableElements\/InspectableElements.js\n+++ b\/shells\/dev\/app\/InspectableElements\/InspectableElements.js\n@@ -4,6 +4,7 @@ import React, { Fragment } from 'react';\n import Contexts from '.\/Contexts';\n import CustomHooks from '.\/CustomHooks';\n import CustomObject from '.\/CustomObject';\n+import Hydration from '.\/Hydration';\n import NestedProps from '.\/NestedProps';\n \n \/\/ TODO Add Immutable JS example\n@@ -16,6 +17,7 @@ export default function InspectableElements() {\n \n \n \n+ \n <\/Fragment>\n );\n }\ndiff --git a\/src\/__tests__\/__snapshots__\/inspectedElementContext-test.js.snap b\/src\/__tests__\/__snapshots__\/inspectedElementContext-test.js.snap\nindex 2587fed2b4..450ca5fe67 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@@ -17,24 +107,104 @@ exports[`InspectedElementContext should inspect the currently selected element:\n \"isStateEditable\": true,\n \"name\": \"State\",\n \"value\": 1,\n- \"subHooks\": []\n+ \"subHooks\": {}\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\": null,\n+ \"props\": {\n+ \"nestedObject\": {\n+ \"a\": {}\n+ }\n+ },\n+ \"state\": null\n+}\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\": null,\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 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\": 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-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: 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\": 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-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 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@@ -46,18 +216,18 @@ exports[`InspectedElementContext should not re-render a function with hooks if i\n \"isStateEditable\": true,\n \"name\": \"State\",\n \"value\": 0,\n- \"subHooks\": []\n+ \"subHooks\": {}\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@@ -69,23 +239,34 @@ exports[`InspectedElementContext should not re-render a function with hooks if i\n \"isStateEditable\": true,\n \"name\": \"State\",\n \"value\": 0,\n- \"subHooks\": []\n+ \"subHooks\": {}\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 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: 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+ }\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 not tear if hydration is requested after an update: 2: Inspect props.nestedObject.a 1`] = `\n {\n \"id\": 2,\n \"owners\": null,\n@@ -93,8 +274,29 @@ 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+ \"nestedObject\": {\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: 1: initial render 1`] = `\n+{\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"events\": null,\n+ \"hooks\": null,\n+ \"props\": {\n+ \"a\": 1,\n+ \"b\": \"abc\"\n },\n \"state\": null\n }\n@@ -108,19 +310,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..64ddb50fb5 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 { GetPath } 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 inspectedElement = read(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+ inspectedElement = read(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,12 +178,11 @@ 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@@ -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,86 @@ 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 { read } = React.useContext(InspectedElementContext);\n+ inspectedElement = read(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.name]).toBe('DIV');\n+ expect(html_element[meta.type]).toBe('html_element');\n+ expect(fn[meta.name]).toBe('exmapleFunction');\n+ expect(fn[meta.type]).toBe('function');\n+ expect(symbol[meta.name]).toBe('Symbol(symbol)');\n+ expect(symbol[meta.type]).toBe('symbol');\n+ expect(react_element[meta.name]).toBe('span');\n+ expect(react_element[meta.type]).toBe('react_element');\n+ expect(array_buffer[meta.meta].length).toBe(3);\n+ expect(array_buffer[meta.name]).toBe('ArrayBuffer');\n+ expect(array_buffer[meta.type]).toBe('array_buffer');\n+ expect(typed_array[meta.meta].length).toBe(3);\n+ expect(typed_array[meta.name]).toBe('Uint8Array');\n+ expect(typed_array[meta.type]).toBe('typed_array');\n+ expect(date[meta.type]).toBe('date');\n \n done();\n });\n@@ -276,24 +352,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 inspectedElement = read(id);\n+ expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);\n didFinish = true;\n return null;\n }\n@@ -302,11 +375,11 @@ describe('InspectedElementContext', () => {\n () =>\n TestRenderer.create(\n \n \n- \n+ \n <\/React.Suspense>\n <\/Contexts>\n ),\n@@ -316,4 +389,277 @@ describe('InspectedElementContext', () => {\n \n done();\n });\n+\n+ it('should not dehydrate nested values until explicitly requested', 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 getPath: GetPath = ((null: any): GetPath);\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const context = React.useContext(InspectedElementContext);\n+ getPath = context.getPath;\n+ inspectedElement = context.read(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(getPath).not.toBeNull();\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');\n+\n+ inspectedElement = null;\n+ TestUtils.act(() => {\n+ getPath(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+ getPath(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+ getPath(id, ['props', 'nestedObject', 'a', 'b', 'c', 0, 'd']);\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+ 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 getPath: GetPath = ((null: any): GetPath);\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const context = React.useContext(InspectedElementContext);\n+ getPath = context.getPath;\n+ inspectedElement = context.read(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(getPath).not.toBeNull();\n+ expect(inspectedElement).not.toBeNull();\n+ expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');\n+\n+ inspectedElement = null;\n+ TestUtils.act(() => {\n+ getPath(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+ getPath(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.runOnlyPendingTimers();\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 getPath: GetPath = ((null: any): GetPath);\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const context = React.useContext(InspectedElementContext);\n+ getPath = context.getPath;\n+ inspectedElement = context.read(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(getPath).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+ getPath(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..7e8eb91bc9\n--- \/dev\/null\n+++ b\/src\/__tests__\/legacy\/inspectElement-test.js\n@@ -0,0 +1,233 @@\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