{"parents":["fc6a9f1a1ebb5585c543126d397cc945a95f3196"],"body":"* Adds displayName to EventComponent and EventTarget","files":[{"path":"packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js","status":"M"},{"path":"packages\/react-events\/src\/Drag.js","status":"M"},{"path":"packages\/react-events\/src\/Focus.js","status":"M"},{"path":"packages\/react-events\/src\/Hover.js","status":"M"},{"path":"packages\/react-events\/src\/Press.js","status":"M"},{"path":"packages\/react-events\/src\/Swipe.js","status":"M"},{"path":"packages\/react-events\/src\/__tests__\/Press-test.internal.js","status":"M"},{"path":"packages\/react-reconciler\/src\/__tests__\/ReactFiberEvents-test-internal.js","status":"M"},{"path":"packages\/shared\/ReactTypes.js","status":"M"},{"path":"packages\/shared\/getComponentName.js","status":"M"}],"commit":{"authoredAt":"2019-04-03T12:24:25+01:00","subject":"Adds displayName to EventComponent and EventTarget (#15268)","revision":"89064fe68d1f26da78c541a9c64ee093322b9766","authorName":"Dominic Gannaway","shortRevision":"89064fe68d","authorEmail":"trueadm@users.noreply.github.com"},"patch":"diff --git a\/packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js b\/packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js\nindex 367e55ed28..af0111e4eb 100644\n--- a\/packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js\n+++ b\/packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js\n@@ -21,6 +21,7 @@ function createReactEventComponent(targetEventTypes, handleEvent) {\n \n return {\n $$typeof: Symbol.for('react.event_component'),\n+ displayName: 'TestEventComponent',\n props: null,\n responder: testEventResponder,\n };\ndiff --git a\/packages\/react-events\/src\/Drag.js b\/packages\/react-events\/src\/Drag.js\nindex cc741e29b5..54498760ff 100644\n--- a\/packages\/react-events\/src\/Drag.js\n+++ b\/packages\/react-events\/src\/Drag.js\n@@ -211,6 +211,7 @@ const DragResponder = {\n \n export default {\n $$typeof: REACT_EVENT_COMPONENT_TYPE,\n+ displayName: 'Drag',\n props: null,\n responder: DragResponder,\n };\ndiff --git a\/packages\/react-events\/src\/Focus.js b\/packages\/react-events\/src\/Focus.js\nindex c574f1e3a1..e56379f887 100644\n--- a\/packages\/react-events\/src\/Focus.js\n+++ b\/packages\/react-events\/src\/Focus.js\n@@ -122,6 +122,7 @@ const FocusResponder = {\n \n export default {\n $$typeof: REACT_EVENT_COMPONENT_TYPE,\n+ displayName: 'Focus',\n props: null,\n responder: FocusResponder,\n };\ndiff --git a\/packages\/react-events\/src\/Hover.js b\/packages\/react-events\/src\/Hover.js\nindex 75992d246a..226430b838 100644\n--- a\/packages\/react-events\/src\/Hover.js\n+++ b\/packages\/react-events\/src\/Hover.js\n@@ -204,6 +204,7 @@ const HoverResponder = {\n \n export default {\n $$typeof: REACT_EVENT_COMPONENT_TYPE,\n+ displayName: 'Hover',\n props: null,\n responder: HoverResponder,\n };\ndiff --git a\/packages\/react-events\/src\/Press.js b\/packages\/react-events\/src\/Press.js\nindex 7611d8660c..b79c38758b 100644\n--- a\/packages\/react-events\/src\/Press.js\n+++ b\/packages\/react-events\/src\/Press.js\n@@ -395,6 +395,7 @@ const PressResponder = {\n \n export default {\n $$typeof: REACT_EVENT_COMPONENT_TYPE,\n+ displayName: 'Press',\n props: null,\n responder: PressResponder,\n };\ndiff --git a\/packages\/react-events\/src\/Swipe.js b\/packages\/react-events\/src\/Swipe.js\nindex c67b502316..85df2cca3f 100644\n--- a\/packages\/react-events\/src\/Swipe.js\n+++ b\/packages\/react-events\/src\/Swipe.js\n@@ -239,6 +239,7 @@ const SwipeResponder = {\n \n export default {\n $$typeof: REACT_EVENT_COMPONENT_TYPE,\n+ displayName: 'Swipe',\n props: null,\n responder: SwipeResponder,\n };\ndiff --git a\/packages\/react-events\/src\/__tests__\/Press-test.internal.js b\/packages\/react-events\/src\/__tests__\/Press-test.internal.js\nindex 1505c1f303..af3b93239e 100644\n--- a\/packages\/react-events\/src\/__tests__\/Press-test.internal.js\n+++ b\/packages\/react-events\/src\/__tests__\/Press-test.internal.js\n@@ -394,4 +394,8 @@ describe('Event responder: Press', () => {\n expect(events).toEqual(['keydown', 'inner: onPress', 'outer: onPress']);\n });\n });\n+\n+ it('expect displayName to show up for event component', () => {\n+ expect(Press.displayName).toBe('Press');\n+ });\n });\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactFiberEvents-test-internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactFiberEvents-test-internal.js\nindex 25162397b0..73dcc8d4a0 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactFiberEvents-test-internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactFiberEvents-test-internal.js\n@@ -29,6 +29,7 @@ const noOpResponder = {\n function createReactEventComponent() {\n return {\n $$typeof: ReactSymbols.REACT_EVENT_COMPONENT_TYPE,\n+ displayName: 'TestEventComponent',\n props: null,\n responder: noOpResponder,\n };\n@@ -37,6 +38,7 @@ function createReactEventComponent() {\n function createReactEventTarget() {\n return {\n $$typeof: ReactSymbols.REACT_EVENT_TARGET_TYPE,\n+ displayName: 'TestEventTarget',\n type: Symbol.for('react.event_target.test'),\n };\n }\n@@ -392,6 +394,54 @@ describe('ReactFiberEvents', () => {\n 'Warning: validateDOMNesting: React event targets must not have event components as children.',\n );\n });\n+\n+ it('should error with a component stack contains the names of the event components and event targets', () => {\n+ let componentStackMessage;\n+\n+ function ErrorComponent() {\n+ throw new Error('Failed!');\n+ }\n+\n+ const Test = () => (\n+ \n+ \n+ \n+ \n+ <\/span>\n+ <\/EventTarget>\n+ <\/EventComponent>\n+ );\n+\n+ class Wrapper extends React.Component {\n+ state = {\n+ error: null,\n+ };\n+\n+ componentDidCatch(error, errMessage) {\n+ componentStackMessage = errMessage.componentStack;\n+ this.setState({\n+ error,\n+ });\n+ }\n+\n+ render() {\n+ if (this.state.error) {\n+ return null;\n+ }\n+ return ;\n+ }\n+ }\n+\n+ ReactNoop.render();\n+ expect(Scheduler).toFlushWithoutYielding();\n+\n+ expect(componentStackMessage.includes('ErrorComponent')).toBe(true);\n+ expect(componentStackMessage.includes('span')).toBe(true);\n+ expect(componentStackMessage.includes('TestEventTarget')).toBe(true);\n+ expect(componentStackMessage.includes('TestEventComponent')).toBe(true);\n+ expect(componentStackMessage.includes('Test')).toBe(true);\n+ expect(componentStackMessage.includes('Wrapper')).toBe(true);\n+ });\n });\n \n describe('TestRenderer', () => {\n@@ -570,7 +620,7 @@ describe('ReactFiberEvents', () => {\n error: null,\n };\n \n- componentDidCatch(error) {\n+ componentDidCatch(error, errStack) {\n this.setState({\n error,\n });\n@@ -734,6 +784,55 @@ describe('ReactFiberEvents', () => {\n 'Warning: validateDOMNesting: React event targets must not have event components as children.',\n );\n });\n+\n+ it('should error with a component stack contains the names of the event components and event targets', () => {\n+ let componentStackMessage;\n+\n+ function ErrorComponent() {\n+ throw new Error('Failed!');\n+ }\n+\n+ const Test = () => (\n+ \n+ \n+ \n+ \n+ <\/span>\n+ <\/EventTarget>\n+ <\/EventComponent>\n+ );\n+\n+ class Wrapper extends React.Component {\n+ state = {\n+ error: null,\n+ };\n+\n+ componentDidCatch(error, errMessage) {\n+ componentStackMessage = errMessage.componentStack;\n+ this.setState({\n+ error,\n+ });\n+ }\n+\n+ render() {\n+ if (this.state.error) {\n+ return null;\n+ }\n+ return ;\n+ }\n+ }\n+\n+ const root = ReactTestRenderer.create(null);\n+ root.update();\n+ expect(Scheduler).toFlushWithoutYielding();\n+\n+ expect(componentStackMessage.includes('ErrorComponent')).toBe(true);\n+ expect(componentStackMessage.includes('span')).toBe(true);\n+ expect(componentStackMessage.includes('TestEventTarget')).toBe(true);\n+ expect(componentStackMessage.includes('TestEventComponent')).toBe(true);\n+ expect(componentStackMessage.includes('Test')).toBe(true);\n+ expect(componentStackMessage.includes('Wrapper')).toBe(true);\n+ });\n });\n \n describe('ReactDOM', () => {\n@@ -1053,6 +1152,54 @@ describe('ReactFiberEvents', () => {\n 'Warning: validateDOMNesting: React event targets must not have event components as children.',\n );\n });\n+\n+ it('should error with a component stack contains the names of the event components and event targets', () => {\n+ let componentStackMessage;\n+\n+ function ErrorComponent() {\n+ throw new Error('Failed!');\n+ }\n+\n+ const Test = () => (\n+ \n+ \n+ \n+ \n+ <\/span>\n+ <\/EventTarget>\n+ <\/EventComponent>\n+ );\n+\n+ class Wrapper extends React.Component {\n+ state = {\n+ error: null,\n+ };\n+\n+ componentDidCatch(error, errMessage) {\n+ componentStackMessage = errMessage.componentStack;\n+ this.setState({\n+ error,\n+ });\n+ }\n+\n+ render() {\n+ if (this.state.error) {\n+ return null;\n+ }\n+ return ;\n+ }\n+ }\n+\n+ const container = document.createElement('div');\n+ ReactDOM.render(, container);\n+\n+ expect(componentStackMessage.includes('ErrorComponent')).toBe(true);\n+ expect(componentStackMessage.includes('span')).toBe(true);\n+ expect(componentStackMessage.includes('TestEventTarget')).toBe(true);\n+ expect(componentStackMessage.includes('TestEventComponent')).toBe(true);\n+ expect(componentStackMessage.includes('Test')).toBe(true);\n+ expect(componentStackMessage.includes('Wrapper')).toBe(true);\n+ });\n });\n \n describe('ReactDOMServer', () => {\ndiff --git a\/packages\/shared\/ReactTypes.js b\/packages\/shared\/ReactTypes.js\nindex cedd17d170..52ce27f9df 100644\n--- a\/packages\/shared\/ReactTypes.js\n+++ b\/packages\/shared\/ReactTypes.js\n@@ -93,11 +93,13 @@ export type ReactEventResponder = {\n \n export type ReactEventComponent = {|\n $$typeof: Symbol | number,\n+ displayName?: string,\n props: null | Object,\n responder: ReactEventResponder,\n |};\n \n export type ReactEventTarget = {|\n $$typeof: Symbol | number,\n+ displayName?: string,\n type: Symbol | number,\n |};\ndiff --git a\/packages\/shared\/getComponentName.js b\/packages\/shared\/getComponentName.js\nindex cbea431c8f..cfa07d91e1 100644\n--- a\/packages\/shared\/getComponentName.js\n+++ b\/packages\/shared\/getComponentName.js\n@@ -22,8 +22,12 @@ import {\n REACT_STRICT_MODE_TYPE,\n REACT_SUSPENSE_TYPE,\n REACT_LAZY_TYPE,\n+ REACT_EVENT_COMPONENT_TYPE,\n+ REACT_EVENT_TARGET_TYPE,\n+ REACT_EVENT_TARGET_TOUCH_HIT,\n } from 'shared\/ReactSymbols';\n import {refineResolvedLazyComponent} from 'shared\/ReactLazyComponent';\n+import type {ReactEventComponent, ReactEventTarget} from 'shared\/ReactTypes';\n \n function getWrappedName(\n outerType: mixed,\n@@ -87,6 +91,25 @@ function getComponentName(type: mixed): string | null {\n if (resolvedThenable) {\n return getComponentName(resolvedThenable);\n }\n+ break;\n+ }\n+ case REACT_EVENT_COMPONENT_TYPE: {\n+ const eventComponent = ((type: any): ReactEventComponent);\n+ const displayName = eventComponent.displayName;\n+ if (displayName !== undefined) {\n+ return displayName;\n+ }\n+ break;\n+ }\n+ case REACT_EVENT_TARGET_TYPE: {\n+ const eventTarget = ((type: any): ReactEventTarget);\n+ if (eventTarget.type === REACT_EVENT_TARGET_TOUCH_HIT) {\n+ return 'TouchHitTarget';\n+ }\n+ const displayName = eventTarget.displayName;\n+ if (displayName !== undefined) {\n+ return displayName;\n+ }\n }\n }\n }\n"}

dillon1000/react

Files changed