{"body":"","parents":["cf19916be7d3e89ddda4b65d85f82ec37b7351e9"],"files":[{"path":"src\/backend\/renderer.js","status":"M"},{"path":"src\/devtools\/views\/Components\/EventsTree.css","status":"M"},{"path":"src\/devtools\/views\/Components\/EventsTree.js","status":"M"},{"path":"src\/devtools\/views\/Components\/SelectedElement.js","status":"M"}],"commit":{"shortRevision":"a2c79f2d9e","revision":"a2c79f2d9e4ec0a631859e226ce91a824892e62c","authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com","subject":"Fixed hydration for events meta data","authoredAt":"2019-06-18T10:50:19-07:00"},"patch":"diff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex 9041160850..59a94fbe32 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -2149,25 +2149,37 @@ export function attach(\n });\n }\n \n- function createIsPathWhitelisted(isHooksPath: boolean, key: string | null) {\n+ function createIsPathWhitelisted(\n+ key: string | null,\n+ secondaryCategory: 'events' | 'hooks' | null\n+ ) {\n \/\/ This function helps prevent previously-inspected paths from being dehydrated in updates.\n \/\/ This is important to avoid a bad user experience where expanded toggles collapse on update.\n return function isPathWhitelisted(path: Array): boolean {\n- \/\/ Dehydrating the 'subHooks' property makes the HooksTree UI a lot more complicated,\n- \/\/ so it's easiest for now if we just don't break on this boundary.\n- \/\/ We can always dehydrate a level deeper (in the value object).\n- if (isHooksPath) {\n- if (path.length === 1) {\n- \/\/ Never dehydrate the hooks object at the top level.\n- return true;\n- }\n- if (\n- path[path.length - 1] === 'subHooks' ||\n- path[path.length - 2] === 'subHooks'\n- ) {\n- \/\/ Never dehydrate the subHooks array\n- return true;\n- }\n+ switch (secondaryCategory) {\n+ case 'events':\n+ if (path.length <= 2) {\n+ \/\/ Never dehydrate the \"hooks\" object at the top level (becaues it's always just an array).\n+ return true;\n+ }\n+ break;\n+ case 'hooks':\n+ if (path.length === 1) {\n+ \/\/ Never dehydrate the \"hooks\" object at the top levels.\n+ return true;\n+ }\n+ if (\n+ path[path.length - 1] === 'subHooks' ||\n+ path[path.length - 2] === 'subHooks'\n+ ) {\n+ \/\/ Dehydrating the 'subHooks' property makes the HooksTree UI a lot more complicated,\n+ \/\/ so it's easiest for now if we just don't break on this boundary.\n+ \/\/ We can always dehydrate a level deeper (in the value object).\n+ return true;\n+ }\n+ break;\n+ default:\n+ break;\n }\n \n let current =\n@@ -2195,6 +2207,13 @@ export function attach(\n if (path != null) {\n mergeInspectedPaths(path);\n \n+ let secondaryCategory = null;\n+ if (path[0] === 'events') {\n+ secondaryCategory = 'events';\n+ } else if (path[0] === 'hooks') {\n+ secondaryCategory = 'hooks';\n+ }\n+\n \/\/ If this element has not been updated since it was last inspected,\n \/\/ we can just return the subset of data in the newly-inspected path.\n return {\n@@ -2206,7 +2225,7 @@ export function attach(\n ((mostRecentlyInspectedElement: any): InspectedElement),\n path\n ),\n- createIsPathWhitelisted(path[0] === 'hooks', null),\n+ createIsPathWhitelisted(null, secondaryCategory),\n path\n ),\n };\n@@ -2246,23 +2265,23 @@ export function attach(\n const cleanedInspectedElement = { ...mostRecentlyInspectedElement };\n cleanedInspectedElement.context = cleanForBridge(\n cleanedInspectedElement.context,\n- createIsPathWhitelisted(false, 'context')\n+ createIsPathWhitelisted('context', null)\n );\n cleanedInspectedElement.events = cleanForBridge(\n cleanedInspectedElement.events,\n- createIsPathWhitelisted(false, 'events')\n+ createIsPathWhitelisted('events', 'events')\n );\n cleanedInspectedElement.hooks = cleanForBridge(\n cleanedInspectedElement.hooks,\n- createIsPathWhitelisted(true, 'hooks')\n+ createIsPathWhitelisted('hooks', 'hooks')\n );\n cleanedInspectedElement.props = cleanForBridge(\n cleanedInspectedElement.props,\n- createIsPathWhitelisted(false, 'props')\n+ createIsPathWhitelisted('props', null)\n );\n cleanedInspectedElement.state = cleanForBridge(\n cleanedInspectedElement.state,\n- createIsPathWhitelisted(false, 'state')\n+ createIsPathWhitelisted('state', null)\n );\n \n return {\ndiff --git a\/src\/devtools\/views\/Components\/EventsTree.css b\/src\/devtools\/views\/Components\/EventsTree.css\nindex 7506ba430d..686c5dc768 100644\n--- a\/src\/devtools\/views\/Components\/EventsTree.css\n+++ b\/src\/devtools\/views\/Components\/EventsTree.css\n@@ -20,6 +20,10 @@\n display: flex;\n }\n \n+.Name {\n+ user-select: none;\n+}\n+\n .Empty {\n color: var(--color-dimmer);\n font-style: italic;\ndiff --git a\/src\/devtools\/views\/Components\/EventsTree.js b\/src\/devtools\/views\/Components\/EventsTree.js\nindex 3c8635e627..eda2a54c25 100644\n--- a\/src\/devtools\/views\/Components\/EventsTree.js\n+++ b\/src\/devtools\/views\/Components\/EventsTree.js\n@@ -1,3 +1,5 @@\n+\/\/ @flow\n+\n import { copy } from 'clipboard-js';\n import React, { useCallback, useState } from 'react';\n import styles from '.\/EventsTree.css';\n@@ -7,15 +9,32 @@ import KeyValue from '.\/KeyValue';\n import ExpandCollapseToggle from '.\/ExpandCollapseToggle';\n import { serializeDataForCopy } from '..\/utils';\n \n-type Props = {|\n+import type { GetInspectedElementPath } from '.\/InspectedElementContext';\n+\n+type InspectPath = (path: Array) => void;\n+\n+type EventsTreeViewProps = {|\n events: Object,\n+ getInspectedElementPath: GetInspectedElementPath,\n+ id: number,\n |};\n \n-function EventsTreeView({ events }: Props) {\n+function EventsTreeView({\n+ events,\n+ getInspectedElementPath,\n+ id,\n+}: EventsTreeViewProps) {\n const handleCopy = useCallback(() => copy(serializeDataForCopy(events)), [\n events,\n ]);\n \n+ const inspectPath = useCallback(\n+ (path: Array) => {\n+ getInspectedElementPath(id, ['events', ...path]);\n+ },\n+ [getInspectedElementPath, id]\n+ );\n+\n return (\n

\n@@ -26,16 +45,26 @@ function EventsTreeView({ events }: Props) {\n <\/Button>\n }\n <\/div>\n- \n+ \n <\/div>\n );\n }\n \n-function InnerEventsTreeView({ events }: Props) {\n+type InnerEventsTreeViewProps = {|\n+ events: Object,\n+ inspectPath: InspectPath,\n+|};\n+\n+function InnerEventsTreeView({\n+ events,\n+ inspectPath,\n+}: InnerEventsTreeViewProps) {\n return events.map((event, index) => (\n \n ));\n@@ -43,11 +72,19 @@ function InnerEventsTreeView({ events }: Props) {\n \n type EventComponentViewProps = {|\n displayName: string,\n+ index: number,\n+ inspectPath: InspectPath,\n props: null | Object,\n |};\n \n-function EventComponentView({ displayName, props }: EventComponentViewProps) {\n+function EventComponentView({\n+ displayName,\n+ index,\n+ inspectPath,\n+ props,\n+}: EventComponentViewProps) {\n const [isOpen, setIsOpen] = useState(false);\n+\n let eventComponentProps = null;\n \/\/ eslint-disable-next-line no-unused-vars\n let children;\n@@ -74,8 +111,9 @@ function EventComponentView({ displayName, props }: EventComponentViewProps) {\n \n ))}\ndiff --git a\/src\/devtools\/views\/Components\/SelectedElement.js b\/src\/devtools\/views\/Components\/SelectedElement.js\nindex 5802d204b9..93cccda033 100644\n--- a\/src\/devtools\/views\/Components\/SelectedElement.js\n+++ b\/src\/devtools\/views\/Components\/SelectedElement.js\n@@ -336,7 +336,13 @@ function InspectedElementView({\n inspectPath={inspectContextPath}\n overrideValueFn={overrideContextFn}\n \/>\n- {events !== null && events.length > 0 && }\n+ {events !== null && events.length > 0 && (\n+ \n+ )}\n \n {ownerID === null && owners !== null && owners.length > 0 && (\n

\n"}

dillon1000/react

Files changed