[Flare] Adds support for hydrating host components with listeners (#16304)
Dominic Gannaway committed
Aug 6, 2019 at 23:05 UTC
7c838a6450f5b80c5d645b79b9dae78864e046b9
2 files changed
+41
packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js
+29
@@ -112,6 +112,35 @@ describe('DOMEventResponderSystem', () => {
112
expect(output).toBe(`<div data-reactroot="">Hello world</div>`);
113
});
114
115
+ it('can render correctly with the ReactDOMServer hydration', () => {
116
+ const onEvent = jest.fn();
117
+ const TestResponder = createEventResponder({
118
+ targetEventTypes: ['click'],
119
+ onEvent,
120
+ });
121
+ const ref = React.createRef();
122
+
123
+ function Test() {
124
+ const listener = React.unstable_useResponder(TestResponder, {});
125
+
126
+ return (
127
+ <div>
128
+ <span listeners={listener} ref={ref}>
129
+ Hello world
130
+ </span>
131
+ </div>
132
+ );
133
+ }
134
+ const output = ReactDOMServer.renderToString(<Test />);
135
+ expect(output).toBe(
136
+ `<div data-reactroot=""><span>Hello world</span></div>`,
137
+ );
138
+ container.innerHTML = output;
139
+ ReactDOM.hydrate(<Test />, container);
140
+ dispatchClickEvent(ref.current);
141
+ expect(onEvent).toHaveBeenCalledTimes(1);
142
+ });
143
+
144
it('the event responders should fire on click event', () => {
145
let eventResponderFiredCount = 0;
146
let eventLog = [];
packages/react-reconciler/src/ReactFiberCompleteWork.js
+12
@@ -739,6 +739,18 @@ function completeWork(
739
// commit-phase we mark this as such.
740
markUpdate(workInProgress);
741
}
742
+ if (enableFlareAPI) {
743
+ const instance = workInProgress.stateNode;
744
+ const listeners = newProps.listeners;
745
+ if (listeners != null) {
746
+ updateEventListeners(
747
+ listeners,
748
+ instance,
749
+ rootContainerInstance,
750
+ workInProgress,
751
+ );
752
+ }
753
+ }
754
} else {
755
let instance = createInstance(
756
type,