Skip to content

Commit 67efec9

Browse files
jackpopejackpope
committed
clean up
1 parent 1c2bbce commit 67efec9

File tree

5 files changed

+63
-50
lines changed

5 files changed

+63
-50
lines changed

‎packages/react-art/src/ReactFiberConfigART.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -311,7 +311,7 @@ export function createTextInstance(
311311
}
312312

313313
export type FragmentInstance = null | {
314-
_fragmentFiber: any,
314+
_fragmentFiber: Object,
315315
...
316316
};
317317

‎packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1582,22 +1582,25 @@ FragmentInstancePseudoElement.prototype.addEventListener = function (
15821582
if (!this._eventListeners) {
15831583
this._eventListeners = [];
15841584
}
1585+
1586+
const listeners = this._eventListeners;
15851587
// Element.addEventListener will only apply uniquely new event listeners by default. Since we
15861588
// need to collect the listeners to apply to appended children, we track them ourselves and use
15871589
// custom equality check for the options.
15881590
const isNewEventListener =
1589-
indexOfEventListener(this._eventListeners, {
1591+
indexOfEventListener(listeners, {
15901592
type,
15911593
listener,
15921594
optionsOrUseCapture,
15931595
}) === -1;
1594-
if (isNewEventListener && this._eventListeners !== undefined) {
1595-
this._eventListeners.push({type, listener, optionsOrUseCapture});
1596+
if (isNewEventListener) {
1597+
listeners.push({type, listener, optionsOrUseCapture});
15961598
const children = getFragmentInstanceChildren(this);
15971599
children.forEach(child => {
15981600
child.addEventListener(type, listener, optionsOrUseCapture);
15991601
});
16001602
}
1603+
this._eventListeners = listeners;
16011604
};
16021605
// $FlowFixMe[prop-missing]
16031606
FragmentInstancePseudoElement.prototype.removeEventListener = function (
@@ -1606,18 +1609,21 @@ FragmentInstancePseudoElement.prototype.removeEventListener = function (
16061609
listener: EventListener,
16071610
optionsOrUseCapture?: EventListenerOptionsOrUseCapture,
16081611
): void {
1609-
if (Array.isArray(this._eventListeners) && this._eventListeners.length > 0) {
1610-
const children = getFragmentInstanceChildren(this);
1611-
children.forEach(child => {
1612-
child.removeEventListener(type, listener, optionsOrUseCapture);
1613-
});
1614-
const index = indexOfEventListener(this._eventListeners || [], {
1615-
type,
1616-
listener,
1617-
optionsOrUseCapture,
1618-
});
1619-
this._eventListeners = (this._eventListeners || []).splice(index, 1);
1612+
const listeners = this._eventListeners;
1613+
if (listeners === undefined || listeners.length === 0) {
1614+
return;
16201615
}
1616+
1617+
const children = getFragmentInstanceChildren(this);
1618+
children.forEach(child => {
1619+
child.removeEventListener(type, listener, optionsOrUseCapture);
1620+
});
1621+
const index = indexOfEventListener(listeners, {
1622+
type,
1623+
listener,
1624+
optionsOrUseCapture,
1625+
});
1626+
this._eventListeners = listeners.splice(index, 1);
16211627
};
16221628
// $FlowFixMe[prop-missing]
16231629
FragmentInstancePseudoElement.prototype.focus = function (

‎packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js‎

Lines changed: 39 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,14 @@ let React;
1313
let ReactDOMClient;
1414
let act;
1515
let container;
16+
let Fragment;
1617
let Activity;
1718

1819
describe('FragmentRefs', () => {
1920
beforeEach(() => {
2021
jest.resetModules();
2122
React = require('react');
23+
Fragment = React.Fragment;
2224
Activity = React.unstable_Activity;
2325
ReactDOMClient = require('react-dom/client');
2426
act = require('internal-test-utils').act;
@@ -38,9 +40,9 @@ describe('FragmentRefs', () => {
3840
await act(() =>
3941
root.render(
4042
<div id="parent">
41-
<React.Fragment ref={fragmentRef}>
43+
<Fragment ref={fragmentRef}>
4244
<div id="child">Hi</div>
43-
</React.Fragment>
45+
</Fragment>
4446
</div>,
4547
),
4648
);
@@ -58,9 +60,9 @@ describe('FragmentRefs', () => {
5860

5961
await act(() => {
6062
root.render(
61-
<React.Fragment ref={ref => (fragmentRef = ref)}>
63+
<Fragment ref={ref => (fragmentRef = ref)}>
6264
<div id="child">Hi</div>
63-
</React.Fragment>,
65+
</Fragment>,
6466
);
6567
});
6668

@@ -78,9 +80,9 @@ describe('FragmentRefs', () => {
7880
expect(fragmentRef.current).not.toBe(null);
7981
});
8082
return (
81-
<React.Fragment ref={fragmentRef}>
83+
<Fragment ref={fragmentRef}>
8284
<div />
83-
</React.Fragment>
85+
</Fragment>
8486
);
8587
}
8688

@@ -99,13 +101,15 @@ describe('FragmentRefs', () => {
99101
function Test() {
100102
return (
101103
<div ref={parentRef}>
102-
<React.Fragment ref={fragmentRef}>
104+
<Fragment ref={fragmentRef}>
103105
<div id="child-a" />
104106
<a id="child-b" href="/">
105-
A
107+
B
106108
</a>
107-
<div tabIndex={0} id="child-c" />
108-
</React.Fragment>
109+
<a id="child-c" href="/">
110+
C
111+
</a>
112+
</Fragment>
109113
</div>
110114
);
111115
}
@@ -114,6 +118,9 @@ describe('FragmentRefs', () => {
114118
root.render(<Test />);
115119
});
116120

121+
// The test environment doesn't implement focus.
122+
// Mock it here, along with a naive focusable query so we can assert
123+
// that the first _focusable_ element is found.
117124
const focusableChildren = parentRef.current.querySelectorAll(
118125
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
119126
);
@@ -139,10 +146,10 @@ describe('FragmentRefs', () => {
139146

140147
function Test({showA, showB}) {
141148
return (
142-
<React.Fragment ref={fragmentRef}>
149+
<Fragment ref={fragmentRef}>
143150
{showA && <a id="child-a" />}
144151
{showB && <a id="child-b" />}
145-
</React.Fragment>
152+
</Fragment>
146153
);
147154
}
148155

@@ -211,10 +218,10 @@ describe('FragmentRefs', () => {
211218
}, []);
212219
return (
213220
<div ref={parentRef}>
214-
<React.Fragment ref={fragmentRef}>
221+
<Fragment ref={fragmentRef}>
215222
<div ref={childARef}>A</div>
216223
<div ref={childBRef}>B</div>
217-
</React.Fragment>
224+
</Fragment>
218225
</div>
219226
);
220227
}
@@ -270,17 +277,17 @@ describe('FragmentRefs', () => {
270277
await act(() => {
271278
root.render(
272279
<div>
273-
<React.Fragment ref={fragmentRef}>
280+
<Fragment ref={fragmentRef}>
274281
<div ref={childARef}>A</div>
275282
<div>
276-
<React.Fragment ref={nestedFragmentRef}>
283+
<Fragment ref={nestedFragmentRef}>
277284
<div ref={childBRef}>B</div>
278-
</React.Fragment>
285+
</Fragment>
279286
</div>
280-
<React.Fragment ref={nestedFragmentRef2}>
287+
<Fragment ref={nestedFragmentRef2}>
281288
<div ref={childCRef}>C</div>
282-
</React.Fragment>
283-
</React.Fragment>
289+
</Fragment>
290+
</Fragment>
284291
</div>,
285292
);
286293
});
@@ -348,14 +355,14 @@ describe('FragmentRefs', () => {
348355

349356
return (
350357
<div>
351-
<React.Fragment ref={fragmentRef}>
358+
<Fragment ref={fragmentRef}>
352359
<div id="a">A</div>
353360
{shouldShowChild && (
354361
<div ref={childRef} id="b">
355362
B
356363
</div>
357364
)}
358-
</React.Fragment>
365+
</Fragment>
359366
</div>
360367
);
361368
}
@@ -395,7 +402,7 @@ describe('FragmentRefs', () => {
395402
await act(() => {
396403
root.render(
397404
<div>
398-
<React.Fragment ref={fragmentRef}>
405+
<Fragment ref={fragmentRef}>
399406
<div ref={childRef}>Host A</div>
400407
<Wrapper>
401408
<Wrapper>
@@ -404,7 +411,7 @@ describe('FragmentRefs', () => {
404411
</Wrapper>
405412
</Wrapper>
406413
</Wrapper>
407-
</React.Fragment>
414+
</Fragment>
408415
</div>,
409416
);
410417
});
@@ -430,13 +437,13 @@ describe('FragmentRefs', () => {
430437
function Test() {
431438
return (
432439
<div ref={parentRef}>
433-
<React.Fragment ref={fragmentRef}>
440+
<Fragment ref={fragmentRef}>
434441
<div>Child 1</div>
435442
<Activity mode="hidden">
436443
<div>Child 2</div>
437444
</Activity>
438445
<div>Child 3</div>
439-
</React.Fragment>
446+
</Fragment>
440447
</div>
441448
);
442449
}
@@ -466,13 +473,13 @@ describe('FragmentRefs', () => {
466473
function Test() {
467474
return (
468475
<div ref={parentRef}>
469-
<React.Fragment ref={fragmentRef}>
476+
<Fragment ref={fragmentRef}>
470477
<div>Child 1</div>
471478
<Activity mode="visible">
472479
<div>Child 2</div>
473480
</Activity>
474481
<div>Child 3</div>
475-
</React.Fragment>
482+
</Fragment>
476483
</div>
477484
);
478485
}
@@ -503,14 +510,14 @@ describe('FragmentRefs', () => {
503510
function Test({mode}) {
504511
return (
505512
<div id="parent" ref={parentRef}>
506-
<React.Fragment ref={fragmentRef}>
513+
<Fragment ref={fragmentRef}>
507514
<Activity mode={mode}>
508515
<div id="child1">Child</div>
509-
<React.Fragment ref={fragmentRef2}>
516+
<Fragment ref={fragmentRef2}>
510517
<div id="child2">Child 2</div>
511-
</React.Fragment>
518+
</Fragment>
512519
</Activity>
513-
</React.Fragment>
520+
</Fragment>
514521
</div>
515522
);
516523
}

‎packages/react-reconciler/src/forks/ReactFiberConfig.custom.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export type ViewTransitionInstance = null | {name: string, ...};
4444
export opaque type InstanceMeasurement = mixed;
4545
export type EventResponder = any;
4646
export type GestureTimeline = any;
47-
export type FragmentInstance = null | {_fragmentFiber: any, ...};
47+
export type FragmentInstance = null | {_fragmentFiber: Object, ...};
4848

4949
export const rendererVersion = $$$config.rendererVersion;
5050
export const rendererPackageName = $$$config.rendererPackageName;

‎packages/react-test-renderer/src/ReactFiberConfigTestHost.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -384,12 +384,12 @@ export function createViewTransitionInstance(
384384
}
385385

386386
export type FragmentInstance = null | {
387-
_fragmentFiber: any,
387+
_fragmentFiber: Object,
388388
...
389389
};
390390

391391
export function createFragmentInstance(
392-
parentInstance: Instance | Container,
392+
fragmentFiber: Object,
393393
): FragmentInstance {
394394
return null;
395395
}

0 commit comments

Comments
 (0)