Skip to content

Commit a7d07ff

Browse files
trueadmtrueadm
authored
[react-interactions] Rename Flare listeners prop to DEPRECATED_flareListeners (#17394)
1 parent 3ad0764 commit a7d07ff

32 files changed

+255
-201
lines changed

‎packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ describe('ReactHooksInspection', () => {
2929
const listener = React.unstable_useResponder(TestResponder, {
3030
preventDefault: false,
3131
});
32-
return <div listeners={listener}>Hello world</div>;
32+
return <div DEPRECATED_flareListeners={listener}>Hello world</div>;
3333
}
3434
let tree = ReactDebugTools.inspectHooks(Foo, {});
3535
expect(tree).toEqual([

‎packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1892,7 +1892,7 @@ describe('ReactDOMServerPartialHydration', () => {
18921892

18931893
function Button() {
18941894
let listener = React.unstable_useResponder(TestResponder, {});
1895-
return <a listeners={listener}>Click me</a>;
1895+
return <a DEPRECATED_flareListeners={listener}>Click me</a>;
18961896
}
18971897

18981898
function App() {
@@ -2041,7 +2041,7 @@ describe('ReactDOMServerPartialHydration', () => {
20412041

20422042
function Button() {
20432043
let listener = React.unstable_useResponder(TestResponder, {});
2044-
return <a listeners={listener}>Click me</a>;
2044+
return <a DEPRECATED_flareListeners={listener}>Click me</a>;
20452045
}
20462046

20472047
function Child() {
@@ -2408,13 +2408,13 @@ describe('ReactDOMServerPartialHydration', () => {
24082408
return (
24092409
<div>
24102410
<Suspense fallback="Loading First...">
2411-
<span listeners={listener1} />
2411+
<span DEPRECATED_flareListeners={listener1} />
24122412
{/* We suspend after to test what happens when we eager
24132413
attach the listener. */}
24142414
<First />
24152415
</Suspense>
24162416
<Suspense fallback="Loading Second...">
2417-
<span listeners={listener2}>
2417+
<span DEPRECATED_flareListeners={listener2}>
24182418
<Second />
24192419
</span>
24202420
</Suspense>

‎packages/react-dom/src/client/ReactDOMComponent.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ const AUTOFOCUS = 'autoFocus';
103103
const CHILDREN = 'children';
104104
const STYLE = 'style';
105105
const HTML = '__html';
106-
const LISTENERS = 'listeners';
106+
const DEPRECATED_flareListeners = 'DEPRECATED_flareListeners';
107107

108108
const {html: HTML_NAMESPACE} = Namespaces;
109109

@@ -346,7 +346,7 @@ function setInitialDOMProperties(
346346
setTextContent(domElement, '' + nextProp);
347347
}
348348
} else if (
349-
(enableFlareAPI && propKey === LISTENERS) ||
349+
(enableFlareAPI && propKey === DEPRECATED_flareListeners) ||
350350
propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
351351
propKey === SUPPRESS_HYDRATION_WARNING
352352
) {
@@ -715,7 +715,7 @@ export function diffProperties(
715715
} else if (propKey === DANGEROUSLY_SET_INNER_HTML || propKey === CHILDREN) {
716716
// Noop. This is handled by the clear text mechanism.
717717
} else if (
718-
(enableFlareAPI && propKey === LISTENERS) ||
718+
(enableFlareAPI && propKey === DEPRECATED_flareListeners) ||
719719
propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
720720
propKey === SUPPRESS_HYDRATION_WARNING
721721
) {
@@ -810,7 +810,7 @@ export function diffProperties(
810810
(updatePayload = updatePayload || []).push(propKey, '' + nextProp);
811811
}
812812
} else if (
813-
(enableFlareAPI && propKey === LISTENERS) ||
813+
(enableFlareAPI && propKey === DEPRECATED_flareListeners) ||
814814
propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
815815
propKey === SUPPRESS_HYDRATION_WARNING
816816
) {
@@ -1065,7 +1065,7 @@ export function diffHydratedProperties(
10651065
if (suppressHydrationWarning) {
10661066
// Don't bother comparing. We're ignoring all these warnings.
10671067
} else if (
1068-
(enableFlareAPI && propKey === LISTENERS) ||
1068+
(enableFlareAPI && propKey === DEPRECATED_flareListeners) ||
10691069
propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
10701070
propKey === SUPPRESS_HYDRATION_WARNING ||
10711071
// Controlled attributes are not validated

‎packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js‎

Lines changed: 37 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ describe('DOMEventResponderSystem', () => {
9696
function Test() {
9797
const listener = React.unstable_useResponder(TestResponder, {});
9898

99-
return <div listeners={listener}>Hello world</div>;
99+
return <div DEPRECATED_flareListeners={listener}>Hello world</div>;
100100
}
101101
const renderer = ReactTestRenderer.create(<Test />);
102102
expect(renderer).toMatchRenderedOutput(<div>Hello world</div>);
@@ -108,7 +108,7 @@ describe('DOMEventResponderSystem', () => {
108108
function Test() {
109109
const listener = React.unstable_useResponder(TestResponder, {});
110110

111-
return <div listeners={listener}>Hello world</div>;
111+
return <div DEPRECATED_flareListeners={listener}>Hello world</div>;
112112
}
113113
const output = ReactDOMServer.renderToString(<Test />);
114114
expect(output).toBe(`<div data-reactroot="">Hello world</div>`);
@@ -127,7 +127,7 @@ describe('DOMEventResponderSystem', () => {
127127

128128
return (
129129
<div>
130-
<span listeners={listener} ref={ref}>
130+
<span DEPRECATED_flareListeners={listener} ref={ref}>
131131
Hello world
132132
</span>
133133
</div>
@@ -165,7 +165,7 @@ describe('DOMEventResponderSystem', () => {
165165
const listener = React.unstable_useResponder(TestResponder, {});
166166

167167
return (
168-
<button ref={buttonRef} listeners={listener}>
168+
<button ref={buttonRef} DEPRECATED_flareListeners={listener}>
169169
Click me!
170170
</button>
171171
);
@@ -225,7 +225,7 @@ describe('DOMEventResponderSystem', () => {
225225
const listener = React.unstable_useResponder(TestResponder, {});
226226

227227
return (
228-
<button ref={buttonRef} listeners={listener}>
228+
<button ref={buttonRef} DEPRECATED_flareListeners={listener}>
229229
Click me!
230230
</button>
231231
);
@@ -270,7 +270,9 @@ describe('DOMEventResponderSystem', () => {
270270
const listener2 = React.unstable_useResponder(TestResponder, {});
271271

272272
return (
273-
<button ref={buttonRef} listeners={[listener, listener2]}>
273+
<button
274+
ref={buttonRef}
275+
DEPRECATED_flareListeners={[listener, listener2]}>
274276
Click me!
275277
</button>
276278
);
@@ -304,8 +306,8 @@ describe('DOMEventResponderSystem', () => {
304306
const listener = React.unstable_useResponder(TestResponder, {});
305307

306308
return (
307-
<div listeners={listener}>
308-
<button ref={buttonRef} listeners={listener}>
309+
<div DEPRECATED_flareListeners={listener}>
310+
<button ref={buttonRef} DEPRECATED_flareListeners={listener}>
309311
Click me!
310312
</button>
311313
</div>
@@ -353,7 +355,9 @@ describe('DOMEventResponderSystem', () => {
353355
const listener2 = React.unstable_useResponder(TestResponderB, {});
354356

355357
return (
356-
<button ref={buttonRef} listeners={[listener, listener2]}>
358+
<button
359+
ref={buttonRef}
360+
DEPRECATED_flareListeners={[listener, listener2]}>
357361
Click me!
358362
</button>
359363
);
@@ -374,8 +378,8 @@ describe('DOMEventResponderSystem', () => {
374378
const listener2 = React.unstable_useResponder(TestResponderB, {});
375379

376380
return (
377-
<div listeners={listener}>
378-
<button ref={buttonRef} listeners={listener2}>
381+
<div DEPRECATED_flareListeners={listener}>
382+
<button ref={buttonRef} DEPRECATED_flareListeners={listener2}>
379383
Click me!
380384
</button>
381385
</div>
@@ -406,8 +410,8 @@ describe('DOMEventResponderSystem', () => {
406410
const listener = React.unstable_useResponder(TestResponder, {name: 'A'});
407411
const listener2 = React.unstable_useResponder(TestResponder, {name: 'B'});
408412
return (
409-
<div listeners={listener}>
410-
<button ref={buttonRef} listeners={listener2}>
413+
<div DEPRECATED_flareListeners={listener}>
414+
<button ref={buttonRef} DEPRECATED_flareListeners={listener2}>
411415
Click me!
412416
</button>
413417
</div>
@@ -454,7 +458,7 @@ describe('DOMEventResponderSystem', () => {
454458
});
455459

456460
return (
457-
<button ref={buttonRef} listeners={listener}>
461+
<button ref={buttonRef} DEPRECATED_flareListeners={listener}>
458462
Click me!
459463
</button>
460464
);
@@ -490,9 +494,9 @@ describe('DOMEventResponderSystem', () => {
490494
const listener = React.unstable_useResponder(TestResponder, {});
491495
const listener2 = React.unstable_useResponder(TestResponder2, {});
492496
if (toggle) {
493-
return <button listeners={[listener2, listener]} />;
497+
return <button DEPRECATED_flareListeners={[listener2, listener]} />;
494498
}
495-
return <button listeners={[listener, listener2]} />;
499+
return <button DEPRECATED_flareListeners={[listener, listener2]} />;
496500
}
497501

498502
ReactDOM.render(<Test />, container);
@@ -515,15 +519,15 @@ describe('DOMEventResponderSystem', () => {
515519
function Test({test}) {
516520
const listener = React.unstable_useResponder(TestResponder, {});
517521
if (test === 0) {
518-
return <button listeners={[listener]} />;
522+
return <button DEPRECATED_flareListeners={[listener]} />;
519523
} else if (test === 1) {
520-
return <button listeners={null} />;
524+
return <button DEPRECATED_flareListeners={null} />;
521525
} else if (test === 2) {
522-
return <button listeners={[]} />;
526+
return <button DEPRECATED_flareListeners={[]} />;
523527
} else if (test === 3) {
524528
return <button />;
525529
} else if (test === 4) {
526-
return <button listeners={listener} />;
530+
return <button DEPRECATED_flareListeners={listener} />;
527531
}
528532
}
529533

@@ -563,7 +567,7 @@ describe('DOMEventResponderSystem', () => {
563567

564568
const Test = () => {
565569
const listener = React.unstable_useResponder(TestResponder, {});
566-
return <button listeners={listener} />;
570+
return <button DEPRECATED_flareListeners={listener} />;
567571
};
568572

569573
ReactDOM.render(<Test />, container);
@@ -590,7 +594,7 @@ describe('DOMEventResponderSystem', () => {
590594

591595
const Test = () => {
592596
const listener = React.unstable_useResponder(TestResponder, {});
593-
return <button listeners={listener}>Click me!</button>;
597+
return <button DEPRECATED_flareListeners={listener}>Click me!</button>;
594598
};
595599

596600
ReactDOM.render(<Test />, container);
@@ -645,8 +649,8 @@ describe('DOMEventResponderSystem', () => {
645649
const listener2 = React.unstable_useResponder(TestResponderB, {});
646650

647651
return (
648-
<div listeners={listener}>
649-
<button ref={buttonRef} listeners={listener2}>
652+
<div DEPRECATED_flareListeners={listener}>
653+
<button ref={buttonRef} DEPRECATED_flareListeners={listener2}>
650654
Click me!
651655
</button>
652656
</div>
@@ -709,8 +713,8 @@ describe('DOMEventResponderSystem', () => {
709713
const listener2 = React.unstable_useResponder(TestResponderB, {});
710714

711715
return (
712-
<div listeners={listener}>
713-
<button listeners={listener2}>Click me!</button>
716+
<div DEPRECATED_flareListeners={listener}>
717+
<button DEPRECATED_flareListeners={listener2}>Click me!</button>
714718
</div>
715719
);
716720
};
@@ -759,7 +763,7 @@ describe('DOMEventResponderSystem', () => {
759763
});
760764

761765
return (
762-
<button listeners={listener} ref={buttonRef}>
766+
<button DEPRECATED_flareListeners={listener} ref={buttonRef}>
763767
Click me!
764768
</button>
765769
);
@@ -823,7 +827,7 @@ describe('DOMEventResponderSystem', () => {
823827
onFoo: e => eventLogs.push('hook'),
824828
});
825829

826-
return <button ref={buttonRef} listeners={listener} />;
830+
return <button ref={buttonRef} DEPRECATED_flareListeners={listener} />;
827831
};
828832

829833
ReactDOM.render(<Test />, container);
@@ -838,7 +842,7 @@ describe('DOMEventResponderSystem', () => {
838842
onFoo: e => eventLogs.push('hook'),
839843
});
840844

841-
return <button ref={buttonRef} listeners={listener} />;
845+
return <button ref={buttonRef} DEPRECATED_flareListeners={listener} />;
842846
};
843847

844848
ReactDOM.render(<Test2 />, container);
@@ -859,7 +863,7 @@ describe('DOMEventResponderSystem', () => {
859863
const listener = React.unstable_useResponder(TestResponder, {counter});
860864
Scheduler.unstable_yieldValue('Test');
861865
return (
862-
<button listeners={listener} ref={ref}>
866+
<button DEPRECATED_flareListeners={listener} ref={ref}>
863867
Press me
864868
</button>
865869
);
@@ -927,7 +931,7 @@ describe('DOMEventResponderSystem', () => {
927931
const listener = React.unstable_useResponder(TestResponder, {
928932
onClick: logEvent,
929933
});
930-
return <button ref={ref} listeners={listener} />;
934+
return <button ref={ref} DEPRECATED_flareListeners={listener} />;
931935
};
932936
ReactDOM.render(<Component />, container);
933937
dispatchClickEvent(ref.current);
@@ -970,7 +974,7 @@ describe('DOMEventResponderSystem', () => {
970974
const Component = () => {
971975
const listener = React.unstable_useResponder(TestResponder, {});
972976
return (
973-
<div listeners={listener}>
977+
<div DEPRECATED_flareListeners={listener}>
974978
{ReactDOM.createPortal(<button ref={buttonRef} />, domNode)}
975979
</div>
976980
);
@@ -994,7 +998,7 @@ describe('DOMEventResponderSystem', () => {
994998
const Component = () => {
995999
const listener = React.unstable_useResponder(TestResponder, {});
9961000
return (
997-
<div listeners={listener}>
1001+
<div DEPRECATED_flareListeners={listener}>
9981002
{ReactDOM.createPortal(<button ref={buttonRef} />, domNode)}
9991003
</div>
10001004
);

‎packages/react-dom/src/server/ReactPartialRenderer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -370,7 +370,7 @@ function createOpenTagMarkup(
370370
if (!hasOwnProperty.call(props, propKey)) {
371371
continue;
372372
}
373-
if (enableFlareAPI && propKey === 'listeners') {
373+
if (enableFlareAPI && propKey === 'DEPRECATED_flareListeners') {
374374
continue;
375375
}
376376
let propValue = props[propKey];

‎packages/react-dom/src/shared/DOMProperty.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
*/
99

1010
import warning from 'shared/warning';
11+
import {enableFlareAPI} from 'shared/ReactFeatureFlags';
1112

1213
type PropertyType = 0 | 1 | 2 | 3 | 4 | 5 | 6;
1314

@@ -207,7 +208,7 @@ function PropertyInfoRecord(
207208
const properties = {};
208209

209210
// These props are reserved by React. They shouldn't be written to the DOM.
210-
[
211+
const reservedProps = [
211212
'children',
212213
'dangerouslySetInnerHTML',
213214
// TODO: This prevents the assignment of defaultValue to regular
@@ -219,7 +220,12 @@ const properties = {};
219220
'suppressContentEditableWarning',
220221
'suppressHydrationWarning',
221222
'style',
222-
].forEach(name => {
223+
];
224+
if (enableFlareAPI) {
225+
reservedProps.push('DEPRECATED_flareListeners');
226+
}
227+
228+
reservedProps.forEach(name => {
223229
properties[name] = new PropertyInfoRecord(
224230
name,
225231
RESERVED,

‎packages/react-dom/src/shared/ReactControlledValuePropTypes.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ if (__DEV__) {
3636
props.readOnly ||
3737
props.disabled ||
3838
props[propName] == null ||
39-
(enableFlareAPI && props.listeners)
39+
(enableFlareAPI && props.DEPRECATED_flareListeners)
4040
) {
4141
return null;
4242
}
@@ -53,7 +53,7 @@ if (__DEV__) {
5353
props.readOnly ||
5454
props.disabled ||
5555
props[propName] == null ||
56-
(enableFlareAPI && props.listeners)
56+
(enableFlareAPI && props.DEPRECATED_flareListeners)
5757
) {
5858
return null;
5959
}

0 commit comments

Comments
 (0)