`, React Native `View`) are now hidden by default, b\n \n Filter preferences are remembered between sessions.\n \n-#### No more in-line props\n+#### No more inline props\n \n-Components in the tree no longer show in-line props. This was done to [make DevTools faster](https:\/\/github.com\/bvaughn\/react-devtools-experimental\/blob\/master\/OVERVIEW.md) and to make it easier to browse larger component trees.\n+Components in the tree no longer show inline props. This was done to [make DevTools faster](https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/react-devtools\/OVERVIEW.md) and to make it easier to browse larger component trees.\n \n You can view a component's props, state, and hooks by selecting it:\n \n@@ -51,7 +75,7 @@ You can view a component's props, state, and hooks by selecting it:\n \n #### \"Rendered by\" list\n \n-In React, an element's \"owner\" refers the thing that rendered it. Sometimes an element's parent is also its owner, but usually they're different. This distinction is important because props come from owners.\n+In React, an element's \"owner\" refers to the thing that rendered it. Sometimes an element's parent is also its owner, but usually they're different. This distinction is important because props come from owners.\n \n ![Example code](https:\/\/user-images.githubusercontent.com\/29597\/62229551-bbcf1600-b374-11e9-8411-8ff411f4f847.png)\n \n@@ -101,6 +125,12 @@ Components decorated with multiple HOCs show the topmost badge and a count. Sele\n \n ![Screenshot showing a component with multiple HOC badges](https:\/\/user-images.githubusercontent.com\/29597\/62303729-7fadbb00-b431-11e9-8685-45f5ab52b30b.png)\n \n+#### Restoring selection between reloads\n+\n+DevTools now attempts to restore the previously selected element when you reload the page.\n+\n+![Video demonstrating selection persistence](https:\/\/user-images.githubusercontent.com\/810438\/63130054-2c02ac00-bfb1-11e9-92fa-382e9e433638.gif)\n+\n #### Suspense toggle\n \n React's experimental [Suspense API](https:\/\/reactjs.org\/docs\/react-api.html#suspense) lets components \"wait\" for something before rendering. `` components can be used to specify loading states when components deeper in the tree are waiting to render.\ndiff --git a\/packages\/react-devtools\/OVERVIEW.md b\/packages\/react-devtools\/OVERVIEW.md\nindex b7ec0639ca..7c82287913 100644\n--- a\/packages\/react-devtools\/OVERVIEW.md\n+++ b\/packages\/react-devtools\/OVERVIEW.md\n@@ -229,7 +229,7 @@ Even when dealing with a single component, serializing deeply nested properties\n \n Hooks present a unique challenge for the DevTools because of the concept of _custom_ hooks. (A custom hook is essentially any function that calls at least one of the built-in hooks. By convention custom hooks also have names that begin with \"use\".)\n \n-So how does DevTools identify custom functions called from within third party components? It does this by temporarily overriding React's built-in hooks and shallow rendering the component in question. Whenever one of the (overridden) built-in hooks are called, it parses the call stack to spot potential custom hooks (functions between the component itself and the built-in hook). This approach enables it to build a tree structure describing all of the calls to both the built-in _and_ custom hooks, along with the values passed to those hooks. (If you're interested in learning more about this, [here is the source code](https:\/\/github.com\/bvaughn\/react-devtools-experimental\/blob\/master\/src\/backend\/ReactDebugHooks.js).)\n+So how does DevTools identify custom functions called from within third party components? It does this by temporarily overriding React's built-in hooks and shallow rendering the component in question. Whenever one of the (overridden) built-in hooks are called, it parses the call stack to spot potential custom hooks (functions between the component itself and the built-in hook). This approach enables it to build a tree structure describing all of the calls to both the built-in _and_ custom hooks, along with the values passed to those hooks. (If you're interested in learning more about this, [here is the source code](https:\/\/github.com\/facebook\/react\/blob\/master\/packages\/react-debug-tools\/src\/ReactDebugHooks.js).)\n \n > **Note**: DevTools obtains hooks info by re-rendering a component.\n > Breakpoints will be invoked during this additional (shallow) render,\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\nindex 96381177b4..11c6ad904b 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n@@ -24,6 +24,7 @@ describe('ReactDOMServerPartialHydration', () => {\n \n ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n ReactFeatureFlags.enableSuspenseServerRenderer = true;\n+ ReactFeatureFlags.enableSuspenseCallback = true;\n \n React = require('react');\n ReactDOM = require('react-dom');\n@@ -92,6 +93,153 @@ describe('ReactDOMServerPartialHydration', () => {\n expect(ref.current).toBe(span);\n });\n \n+ it('calls the hydration callbacks after hydration or deletion', async () => {\n+ let suspend = false;\n+ let resolve;\n+ let promise = new Promise(resolvePromise => (resolve = resolvePromise));\n+ function Child() {\n+ if (suspend) {\n+ throw promise;\n+ } else {\n+ return 'Hello';\n+ }\n+ }\n+\n+ let suspend2 = false;\n+ let promise2 = new Promise(() => {});\n+ function Child2() {\n+ if (suspend2) {\n+ throw promise2;\n+ } else {\n+ return 'World';\n+ }\n+ }\n+\n+ function App({value}) {\n+ return (\n+

\n+ \n+ \n+ <\/Suspense>\n+ \n+ \n+ <\/Suspense>\n+ <\/div>\n+ );\n+ }\n+\n+ \/\/ First we render the final HTML. With the streaming renderer\n+ \/\/ this may have suspense points on the server but here we want\n+ \/\/ to test the completed HTML. Don't suspend on the server.\n+ suspend = false;\n+ suspend2 = false;\n+ let finalHTML = ReactDOMServer.renderToString();\n+\n+ let container = document.createElement('div');\n+ container.innerHTML = finalHTML;\n+\n+ let hydrated = [];\n+ let deleted = [];\n+\n+ \/\/ On the client we don't have all data yet but we want to start\n+ \/\/ hydrating anyway.\n+ suspend = true;\n+ suspend2 = true;\n+ let root = ReactDOM.unstable_createRoot(container, {\n+ hydrate: true,\n+ hydrationOptions: {\n+ onHydrated(node) {\n+ hydrated.push(node);\n+ },\n+ onDeleted(node) {\n+ deleted.push(node);\n+ },\n+ },\n+ });\n+ act(() => {\n+ root.render();\n+ });\n+\n+ expect(hydrated.length).toBe(0);\n+ expect(deleted.length).toBe(0);\n+\n+ await act(async () => {\n+ \/\/ Resolving the promise should continue hydration\n+ suspend = false;\n+ resolve();\n+ await promise;\n+ });\n+\n+ expect(hydrated.length).toBe(1);\n+ expect(deleted.length).toBe(0);\n+\n+ \/\/ Performing an update should force it to delete the boundary\n+ root.render();\n+\n+ Scheduler.unstable_flushAll();\n+ jest.runAllTimers();\n+\n+ expect(hydrated.length).toBe(1);\n+ expect(deleted.length).toBe(1);\n+ });\n+\n+ it('calls the onDeleted hydration callback if the parent gets deleted', async () => {\n+ let suspend = false;\n+ let promise = new Promise(() => {});\n+ function Child() {\n+ if (suspend) {\n+ throw promise;\n+ } else {\n+ return 'Hello';\n+ }\n+ }\n+\n+ function App({deleted}) {\n+ if (deleted) {\n+ return null;\n+ }\n+ return (\n+

\n+ \n+ \n+ <\/Suspense>\n+ <\/div>\n+ );\n+ }\n+\n+ suspend = false;\n+ let finalHTML = ReactDOMServer.renderToString();\n+\n+ let container = document.createElement('div');\n+ container.innerHTML = finalHTML;\n+\n+ let deleted = [];\n+\n+ \/\/ On the client we don't have all data yet but we want to start\n+ \/\/ hydrating anyway.\n+ suspend = true;\n+ let root = ReactDOM.unstable_createRoot(container, {\n+ hydrate: true,\n+ hydrationOptions: {\n+ onDeleted(node) {\n+ deleted.push(node);\n+ },\n+ },\n+ });\n+ act(() => {\n+ root.render();\n+ });\n+\n+ expect(deleted.length).toBe(0);\n+\n+ act(() => {\n+ root.render();\n+ });\n+\n+ \/\/ The callback should have been invoked.\n+ expect(deleted.length).toBe(1);\n+ });\n+\n it('warns and replaces the boundary content in legacy mode', async () => {\n let suspend = false;\n let resolve;\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSuspense-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSuspense-test.internal.js\nindex b5ecccca7e..742bd41565 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSuspense-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSuspense-test.internal.js\n@@ -37,9 +37,11 @@ function initModules() {\n };\n }\n \n-const {resetModules, serverRender} = ReactDOMServerIntegrationUtils(\n- initModules,\n-);\n+const {\n+ itThrowsWhenRendering,\n+ resetModules,\n+ serverRender,\n+} = ReactDOMServerIntegrationUtils(initModules);\n \n describe('ReactDOMServerSuspense', () => {\n beforeEach(() => {\n@@ -133,4 +135,86 @@ describe('ReactDOMServerSuspense', () => {\n expect(divA).toBe(divA2);\n expect(divB).toBe(divB2);\n });\n+\n+ itThrowsWhenRendering(\n+ 'a suspending component outside a Suspense node',\n+ async render => {\n+ await render(\n+

\n+ \n+ \n+ \n+ <\/div>,\n+ 1,\n+ );\n+ },\n+ 'Add a component higher in the tree',\n+ );\n+\n+ itThrowsWhenRendering(\n+ 'a suspending component without a Suspense above',\n+ async render => {\n+ await render(\n+

\n+ \n+ <\/div>,\n+ 1,\n+ );\n+ },\n+ 'Add a component higher in the tree',\n+ );\n+\n+ it('does not get confused by throwing null', () => {\n+ function Bad() {\n+ \/\/ eslint-disable-next-line no-throw-literal\n+ throw null;\n+ }\n+\n+ let didError;\n+ let error;\n+ try {\n+ ReactDOMServer.renderToString();\n+ } catch (err) {\n+ didError = true;\n+ error = err;\n+ }\n+ expect(didError).toBe(true);\n+ expect(error).toBe(null);\n+ });\n+\n+ it('does not get confused by throwing undefined', () => {\n+ function Bad() {\n+ \/\/ eslint-disable-next-line no-throw-literal\n+ throw undefined;\n+ }\n+\n+ let didError;\n+ let error;\n+ try {\n+ ReactDOMServer.renderToString();\n+ } catch (err) {\n+ didError = true;\n+ error = err;\n+ }\n+ expect(didError).toBe(true);\n+ expect(error).toBe(undefined);\n+ });\n+\n+ it('does not get confused by throwing a primitive', () => {\n+ function Bad() {\n+ \/\/ eslint-disable-next-line no-throw-literal\n+ throw 'foo';\n+ }\n+\n+ let didError;\n+ let error;\n+ try {\n+ ReactDOMServer.renderToString();\n+ } catch (err) {\n+ didError = true;\n+ error = err;\n+ }\n+ expect(didError).toBe(true);\n+ expect(error).toBe('foo');\n+ });\n });\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactServerRendering-test.js b\/packages\/react-dom\/src\/__tests__\/ReactServerRendering-test.js\nindex 4cd37d469a..bb29d665a4 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactServerRendering-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactServerRendering-test.js\n@@ -705,6 +705,70 @@ describe('ReactDOMServer', () => {\n }).toThrow('ReactDOMServer does not yet support lazy-loaded components.');\n });\n \n+ it('throws when suspending on the server', () => {\n+ function AsyncFoo() {\n+ throw new Promise(() => {});\n+ }\n+\n+ expect(() => {\n+ ReactDOMServer.renderToString();\n+ }).toThrow('ReactDOMServer does not yet support Suspense.');\n+ });\n+\n+ it('does not get confused by throwing null', () => {\n+ function Bad() {\n+ \/\/ eslint-disable-next-line no-throw-literal\n+ throw null;\n+ }\n+\n+ let didError;\n+ let error;\n+ try {\n+ ReactDOMServer.renderToString();\n+ } catch (err) {\n+ didError = true;\n+ error = err;\n+ }\n+ expect(didError).toBe(true);\n+ expect(error).toBe(null);\n+ });\n+\n+ it('does not get confused by throwing undefined', () => {\n+ function Bad() {\n+ \/\/ eslint-disable-next-line no-throw-literal\n+ throw undefined;\n+ }\n+\n+ let didError;\n+ let error;\n+ try {\n+ ReactDOMServer.renderToString();\n+ } catch (err) {\n+ didError = true;\n+ error = err;\n+ }\n+ expect(didError).toBe(true);\n+ expect(error).toBe(undefined);\n+ });\n+\n+ it('does not get confused by throwing a primitive', () => {\n+ function Bad() {\n+ \/\/ eslint-disable-next-line no-throw-literal\n+ throw 'foo';\n+ }\n+\n+ let didError;\n+ let error;\n+ try {\n+ ReactDOMServer.renderToString();\n+ } catch (err) {\n+ didError = true;\n+ error = err;\n+ }\n+ expect(didError).toBe(true);\n+ expect(error).toBe('foo');\n+ });\n+\n it('should throw (in dev) when children are mutated during render', () => {\n function Wrapper(props) {\n props.children[1] =

dillon1000/react

Files changed