Skip to content

Commit 2d9cb27

Browse files
acdliteacdlite
committed
Remove deep import of getIsRendering internal
Shuffles boundary between host config and renderer so that this deep import is no longer necessary.
1 parent cd64a0f commit 2d9cb27

File tree

11 files changed

+116
-156
lines changed

11 files changed

+116
-156
lines changed

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -474,15 +474,17 @@ export function isOpaqueHydratingObject(value: mixed): boolean {
474474
throw new Error('Not yet implemented');
475475
}
476476

477-
export function makeOpaqueHydratingObject(setId): OpaqueIDType {
477+
export function makeOpaqueHydratingObject(
478+
attemptToReadValue: () => void,
479+
): OpaqueIDType {
478480
throw new Error('Not yet implemented.');
479481
}
480482

481-
export function getIsUpdatingOpaqueValueInRenderPhase(setId) {
482-
// noop
483+
export function makeClientId(): OpaqueIDType {
484+
throw new Error('Not yet implemented');
483485
}
484486

485-
export function makeClientId(): OpaqueIDType {
487+
export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
486488
throw new Error('Not yet implemented');
487489
}
488490

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -439,8 +439,7 @@ describe('ReactHooksInspectionIntegration', () => {
439439
expect(tree[0].id).toEqual(0);
440440
expect(tree[0].isStateEditable).toEqual(false);
441441
expect(tree[0].name).toEqual('OpaqueIdentifier');
442-
expect(typeof tree[0].value).toBe('string');
443-
expect(tree[0].value.startsWith('c_')).toBe(true);
442+
expect((tree[0].value + '').startsWith('c_')).toBe(true);
444443

445444
expect(tree[1]).toEqual({
446445
id: 1,
@@ -471,8 +470,7 @@ describe('ReactHooksInspectionIntegration', () => {
471470
expect(tree[0].id).toEqual(0);
472471
expect(tree[0].isStateEditable).toEqual(false);
473472
expect(tree[0].name).toEqual('OpaqueIdentifier');
474-
expect(typeof tree[0].value).toBe('string');
475-
expect(tree[0].value.startsWith('c_')).toBe(true);
473+
expect((tree[0].value + '').startsWith('c_')).toBe(true);
476474

477475
expect(tree[1]).toEqual({
478476
id: 1,

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1643,8 +1643,6 @@ describe('ReactDOMServerHooks', () => {
16431643
).toErrorDev([
16441644
'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
16451645
'Do not read the value directly.',
1646-
'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
1647-
'Do not read the value directly.',
16481646
]);
16491647
});
16501648
});
@@ -1679,8 +1677,6 @@ describe('ReactDOMServerHooks', () => {
16791677
).toErrorDev([
16801678
'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
16811679
'Do not read the value directly.',
1682-
'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
1683-
'Do not read the value directly.',
16841680
]);
16851681
});
16861682

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

Lines changed: 16 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@ import {
5757
DOCUMENT_FRAGMENT_NODE,
5858
} from '../shared/HTMLNodeType';
5959
import dangerousStyleValue from '../shared/dangerousStyleValue';
60-
import getComponentName from 'shared/getComponentName';
6160

6261
import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
6362
import {
@@ -75,7 +74,6 @@ import {
7574
enableScopeAPI,
7675
} from 'shared/ReactFeatureFlags';
7776
import {HostComponent} from 'react-reconciler/src/ReactWorkTags';
78-
import {getIsRendering} from 'react-reconciler/src/ReactCurrentFiber';
7977
import {
8078
RESPONDER_EVENT_SYSTEM,
8179
IS_PASSIVE,
@@ -167,12 +165,8 @@ type SelectionInformation = {|
167165
|};
168166

169167
let SUPPRESS_HYDRATION_WARNING;
170-
let didWarnAboutUseOpaqueIdentifier;
171-
let isUpdatingOpaqueValueInRenderPhase;
172168
if (__DEV__) {
173169
SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
174-
didWarnAboutUseOpaqueIdentifier = {};
175-
isUpdatingOpaqueValueInRenderPhase = false;
176170
}
177171

178172
const SUSPENSE_START_DATA = '$';
@@ -1163,43 +1157,28 @@ export function getInstanceFromNode(node: HTMLElement): null | Object {
11631157

11641158
let clientId: number = 0;
11651159
export function makeClientId(): OpaqueIDType {
1160+
return 'r:' + (clientId++).toString(36);
1161+
}
1162+
1163+
export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
11661164
const id = 'r:' + (clientId++).toString(36);
1167-
if (__DEV__) {
1168-
const warnOnAccess = () => {
1169-
// TODO: Should warn in effects and callbacks, too
1170-
if (getIsRendering()) {
1171-
console.error(
1172-
'The object passed back from useOpaqueIdentifier is meant to be ' +
1173-
'passed through to attributes only. Do not read the ' +
1174-
'value directly.',
1175-
);
1176-
}
1165+
return {
1166+
toString() {
1167+
warnOnAccessInDEV();
11771168
return id;
1178-
};
1179-
return {
1180-
toString: warnOnAccess,
1181-
valueOf: warnOnAccess,
1182-
};
1183-
} else {
1184-
return id;
1185-
}
1169+
},
1170+
valueOf() {
1171+
warnOnAccessInDEV();
1172+
return id;
1173+
},
1174+
};
11861175
}
11871176

11881177
let serverId: number = 0;
11891178
export function makeServerId(): OpaqueIDType {
11901179
return 'R:' + (serverId++).toString(36);
11911180
}
11921181

1193-
export function getIsUpdatingOpaqueValueInRenderPhase() {
1194-
if (__DEV__) {
1195-
return isUpdatingOpaqueValueInRenderPhase;
1196-
}
1197-
}
1198-
1199-
function setIsUpdatingOpaqueValueInRenderPhase(isUpdating: boolean) {
1200-
isUpdatingOpaqueValueInRenderPhase = isUpdating;
1201-
}
1202-
12031182
export function isOpaqueHydratingObject(value: mixed): boolean {
12041183
return (
12051184
value !== null &&
@@ -1209,51 +1188,12 @@ export function isOpaqueHydratingObject(value: mixed): boolean {
12091188
}
12101189

12111190
export function makeOpaqueHydratingObject(
1212-
setId: () => void,
1213-
fiberType: mixed,
1191+
attemptToReadValue: () => void,
12141192
): OpaqueIDType {
12151193
return {
12161194
$$typeof: REACT_OPAQUE_ID_TYPE,
1217-
toString() {
1218-
if (__DEV__) {
1219-
const name = getComponentName(fiberType) || 'Unknown';
1220-
if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {
1221-
console.error(
1222-
'The object passed back from useOpaqueIdentifier is meant to be passed through ' +
1223-
'to attributes only. Do not read the value directly.',
1224-
);
1225-
didWarnAboutUseOpaqueIdentifier[name] = true;
1226-
}
1227-
}
1228-
1229-
setIsUpdatingOpaqueValueInRenderPhase(true);
1230-
setId();
1231-
setIsUpdatingOpaqueValueInRenderPhase(false);
1232-
throw new Error(
1233-
'The object passed back from useOpaqueIdentifier is meant to be passed through ' +
1234-
'to attributes only. Do not read the value directly.',
1235-
);
1236-
},
1237-
valueOf() {
1238-
if (__DEV__) {
1239-
const name = getComponentName(fiberType) || 'Unknown';
1240-
if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {
1241-
console.error(
1242-
'The object passed back from useOpaqueIdentifier is meant to be passed through ' +
1243-
'to attributes only. Do not read the value directly.',
1244-
);
1245-
didWarnAboutUseOpaqueIdentifier[name] = true;
1246-
}
1247-
}
1248-
1249-
setIsUpdatingOpaqueValueInRenderPhase(true);
1250-
setId();
1251-
setIsUpdatingOpaqueValueInRenderPhase(false);
1252-
throw new Error(
1253-
'The object passed back from useOpaqueIdentifier is meant to be passed through ' +
1254-
'to attributes only. Do not read the value directly.',
1255-
);
1256-
},
1195+
toString: attemptToReadValue,
1196+
valueOf: attemptToReadValue,
12571197
};
12581198
}
12591199

‎packages/react-native-renderer/src/ReactFabricHostConfig.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -492,17 +492,16 @@ export function isOpaqueHydratingObject(value: mixed): boolean {
492492
}
493493

494494
export function makeOpaqueHydratingObject(
495-
setId: () => void,
496-
fiberType: mixed,
495+
attemptToReadValue: () => void,
497496
): OpaqueIDType {
498497
throw new Error('Not yet implemented.');
499498
}
500499

501-
export function getIsUpdatingOpaqueValueInRenderPhase() {
502-
// noop
500+
export function makeClientId(): OpaqueIDType {
501+
throw new Error('Not yet implemented');
503502
}
504503

505-
export function makeClientId(): OpaqueIDType {
504+
export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
506505
throw new Error('Not yet implemented');
507506
}
508507

‎packages/react-native-renderer/src/ReactNativeHostConfig.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -541,17 +541,16 @@ export function isOpaqueHydratingObject(value: mixed): boolean {
541541
}
542542

543543
export function makeOpaqueHydratingObject(
544-
setId: () => void,
545-
fiberType: mixed,
544+
attemptToReadValue: () => void,
546545
): OpaqueIDType {
547546
throw new Error('Not yet implemented.');
548547
}
549548

550-
export function getIsUpdatingOpaqueValueInRenderPhase() {
551-
// noop
549+
export function makeClientId(): OpaqueIDType {
550+
throw new Error('Not yet implemented');
552551
}
553552

554-
export function makeClientId(): OpaqueIDType {
553+
export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
555554
throw new Error('Not yet implemented');
556555
}
557556

‎packages/react-noop-renderer/src/createReactNoop.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -439,10 +439,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
439439
beforeRemoveInstance(instance: any): void {
440440
// NO-OP
441441
},
442-
443-
getIsUpdatingOpaqueValueInRenderPhase() {
444-
return false;
445-
},
446442
};
447443

448444
const hostConfig = useMutation

‎packages/react-reconciler/src/ReactFiberHooks.js‎

Lines changed: 58 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,11 @@ import {
7777
getCurrentPriorityLevel,
7878
} from './SchedulerWithReactIntegration';
7979
import {getIsHydrating} from './ReactFiberHydrationContext';
80-
import {makeClientId, makeOpaqueHydratingObject} from './ReactFiberHostConfig';
80+
import {
81+
makeClientId,
82+
makeClientIdInDEV,
83+
makeOpaqueHydratingObject,
84+
} from './ReactFiberHostConfig';
8185
import {
8286
getLastPendingExpirationTime,
8387
getWorkInProgressVersion,
@@ -87,6 +91,7 @@ import {
8791
warnAboutMultipleRenderersDEV,
8892
} from './ReactMutableSource';
8993
import {getRootHostContainer} from './ReactFiberHostContext';
94+
import {getIsRendering} from './ReactCurrentFiber';
9095

9196
const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
9297

@@ -139,11 +144,6 @@ export type Dispatcher = {|
139144
useOpaqueIdentifier(): OpaqueIDType | void,
140145
|};
141146

142-
export type IdObject = {
143-
$$typeof: Symbol | number,
144-
_setId: () => void,
145-
};
146-
147147
type Update<S, A> = {|
148148
expirationTime: ExpirationTime,
149149
suspenseConfig: null | SuspenseConfig,
@@ -180,7 +180,9 @@ export type HookType =
180180
| 'useOpaqueIdentifier';
181181

182182
let didWarnAboutMismatchedHooksForComponent;
183+
let didWarnAboutUseOpaqueIdentifier;
183184
if (__DEV__) {
185+
didWarnAboutUseOpaqueIdentifier = {};
184186
didWarnAboutMismatchedHooksForComponent = new Set();
185187
}
186188

@@ -575,6 +577,8 @@ export function resetHooksAfterThrow(): void {
575577
hookTypesUpdateIndexDev = -1;
576578

577579
currentHookNameInDev = null;
580+
581+
isUpdatingOpaqueValueInRenderPhase = false;
578582
}
579583

580584
didScheduleRenderPhaseUpdate = false;
@@ -1580,18 +1584,61 @@ function rerenderTransition(
15801584
return [start, isPending];
15811585
}
15821586

1587+
let isUpdatingOpaqueValueInRenderPhase = false;
1588+
export function getIsUpdatingOpaqueValueInRenderPhaseInDEV(): boolean | void {
1589+
if (__DEV__) {
1590+
return isUpdatingOpaqueValueInRenderPhase;
1591+
}
1592+
}
1593+
1594+
function warnOnOpaqueIdentifierAccessInDEV(fiber) {
1595+
if (__DEV__) {
1596+
// TODO: Should warn in effects and callbacks, too
1597+
const name = getComponentName(fiber.type) || 'Unknown';
1598+
if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {
1599+
console.error(
1600+
'The object passed back from useOpaqueIdentifier is meant to be ' +
1601+
'passed through to attributes only. Do not read the ' +
1602+
'value directly.',
1603+
);
1604+
didWarnAboutUseOpaqueIdentifier[name] = true;
1605+
}
1606+
}
1607+
}
1608+
15831609
function mountOpaqueIdentifier(): OpaqueIDType | void {
1610+
const makeId = __DEV__
1611+
? makeClientIdInDEV.bind(
1612+
null,
1613+
warnOnOpaqueIdentifierAccessInDEV.bind(null, currentlyRenderingFiber),
1614+
)
1615+
: makeClientId;
1616+
15841617
if (getIsHydrating()) {
15851618
let didUpgrade = false;
1586-
const id = makeOpaqueHydratingObject(() => {
1619+
const fiber = currentlyRenderingFiber;
1620+
const readValue = () => {
15871621
if (!didUpgrade) {
15881622
// Only upgrade once. This works even inside the render phase because
15891623
// the update is added to a shared queue, which outlasts the
15901624
// in-progress render.
15911625
didUpgrade = true;
1592-
setId(makeClientId());
1626+
if (__DEV__) {
1627+
isUpdatingOpaqueValueInRenderPhase = true;
1628+
setId(makeId());
1629+
isUpdatingOpaqueValueInRenderPhase = false;
1630+
warnOnOpaqueIdentifierAccessInDEV(fiber);
1631+
} else {
1632+
setId(makeId());
1633+
}
15931634
}
1594-
}, currentlyRenderingFiber.type);
1635+
invariant(
1636+
false,
1637+
'The object passed back from useOpaqueIdentifier is meant to be ' +
1638+
'passed through to attributes only. Do not read the value directly.',
1639+
);
1640+
};
1641+
const id = makeOpaqueHydratingObject(readValue);
15951642

15961643
const setId = mountState(id)[1];
15971644

@@ -1600,15 +1647,15 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
16001647
pushEffect(
16011648
HookHasEffect | HookPassive,
16021649
() => {
1603-
setId(makeClientId());
1650+
setId(makeId());
16041651
},
16051652
undefined,
16061653
null,
16071654
);
16081655
}
16091656
return id;
16101657
} else {
1611-
const id = makeClientId();
1658+
const id = makeId();
16121659
mountState(id);
16131660
return id;
16141661
}

0 commit comments

Comments
 (0)