Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[cleanup] remove enableHostSingletons feature flag #27583

Merged
merged 1 commit into from
Nov 16, 2023
Merged

[cleanup] remove enableHostSingletons feature flag #27583

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions packages/react-dom-bindings/src/client/ReactDOMComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ import {
enableCustomElementPropertySupport,
enableClientRenderFallbackOnTextMismatch,
enableFormActions,
enableHostSingletons,
disableIEWorkarounds,
enableTrustedTypesIntegration,
enableFilterEmptyStringAttributesDOM,
Expand Down Expand Up @@ -394,16 +393,15 @@ function setProp(
// show within the <textarea> until it has been focused and blurred again.
// https://github.com/facebook/react/issues/6731#issuecomment-254874553
const canSetTextContent =
(!enableHostSingletons || tag !== 'body') &&
(tag !== 'textarea' || value !== '');
tag !== 'body' && (tag !== 'textarea' || value !== '');
if (canSetTextContent) {
setTextContent(domElement, value);
}
} else if (typeof value === 'number') {
if (__DEV__) {
validateTextNesting('' + value, tag);
}
const canSetTextContent = !enableHostSingletons || tag !== 'body';
const canSetTextContent = tag !== 'body';
if (canSetTextContent) {
setTextContent(domElement, '' + value);
}
Expand Down Expand Up @@ -2822,7 +2820,7 @@ export function diffHydratedProperties(
// we can get away with it.
// Host singletons get their children appended and don't use the text
// content mechanism.
if (!enableHostSingletons || tag !== 'body') {
if (tag !== 'body') {
domElement.textContent = (children: any);
}
}
Expand Down
10 changes: 3 additions & 7 deletions packages/react-dom-bindings/src/client/ReactDOMComponentTree.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,7 @@ import {

import {getParentSuspenseInstance} from './ReactFiberConfigDOM';

import {
enableScopeAPI,
enableFloat,
enableHostSingletons,
} from 'shared/ReactFeatureFlags';
import {enableScopeAPI, enableFloat} from 'shared/ReactFeatureFlags';

const randomKey = Math.random().toString(36).slice(2);
const internalInstanceKey = '__reactFiber$' + randomKey;
Expand Down Expand Up @@ -180,7 +176,7 @@ export function getInstanceFromNode(node: Node): Fiber | null {
tag === HostText ||
tag === SuspenseComponent ||
(enableFloat ? tag === HostHoistable : false) ||
(enableHostSingletons ? tag === HostSingleton : false) ||
tag === HostSingleton ||
tag === HostRoot
) {
return inst;
Expand All @@ -200,7 +196,7 @@ export function getNodeFromInstance(inst: Fiber): Instance | TextInstance {
if (
tag === HostComponent ||
(enableFloat ? tag === HostHoistable : false) ||
(enableHostSingletons ? tag === HostSingleton : false) ||
tag === HostSingleton ||
tag === HostText
) {
// In Fiber this, is just the state node right now. We assume it will be
Expand Down
53 changes: 18 additions & 35 deletions packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,6 @@ import {
enableCreateEventHandleAPI,
enableScopeAPI,
enableFloat,
enableHostSingletons,
enableTrustedTypesIntegration,
enableFormActions,
enableAsyncActions,
Expand Down Expand Up @@ -939,32 +938,18 @@ export function unhideTextInstance(
}

export function clearContainer(container: Container): void {
if (enableHostSingletons) {
const nodeType = container.nodeType;
if (nodeType === DOCUMENT_NODE) {
clearContainerSparingly(container);
} else if (nodeType === ELEMENT_NODE) {
switch (container.nodeName) {
case 'HEAD':
case 'HTML':
case 'BODY':
clearContainerSparingly(container);
return;
default: {
container.textContent = '';
}
}
}
} else {
if (container.nodeType === ELEMENT_NODE) {
// We have refined the container to Element type
const element: Element = (container: any);
element.textContent = '';
} else if (container.nodeType === DOCUMENT_NODE) {
// We have refined the container to Document type
const doc: Document = (container: any);
if (doc.documentElement) {
doc.removeChild(doc.documentElement);
const nodeType = container.nodeType;
if (nodeType === DOCUMENT_NODE) {
clearContainerSparingly(container);
} else if (nodeType === ELEMENT_NODE) {
switch (container.nodeName) {
case 'HEAD':
case 'HTML':
case 'BODY':
clearContainerSparingly(container);
return;
default: {
container.textContent = '';
}
}
}
Expand Down Expand Up @@ -1053,7 +1038,7 @@ export function canHydrateInstance(
const element: Element = (instance: any);
const anyProps = (props: any);
if (element.nodeName.toLowerCase() !== type.toLowerCase()) {
if (!inRootOrSingleton || !enableHostSingletons) {
if (!inRootOrSingleton) {
// Usually we error for mismatched tags.
if (
enableFormActions &&
Expand All @@ -1067,7 +1052,7 @@ export function canHydrateInstance(
}
}
// In root or singleton parents we skip past mismatched instances.
} else if (!inRootOrSingleton || !enableHostSingletons) {
} else if (!inRootOrSingleton) {
// Match
if (
enableFormActions &&
Expand Down Expand Up @@ -1212,7 +1197,7 @@ export function canHydrateTextInstance(
) {
// If we have extra hidden inputs, we don't mismatch. This allows us to
// embed extra form data in the original form.
} else if (!inRootOrSingleton || !enableHostSingletons) {
} else if (!inRootOrSingleton) {
return null;
}
const nextInstance = getNextHydratableSibling(instance);
Expand All @@ -1230,7 +1215,7 @@ export function canHydrateSuspenseInstance(
inRootOrSingleton: boolean,
): null | SuspenseInstance {
while (instance.nodeType !== COMMENT_NODE) {
if (!inRootOrSingleton || !enableHostSingletons) {
if (!inRootOrSingleton) {
return null;
}
const nextInstance = getNextHydratableSibling(instance);
Expand Down Expand Up @@ -1292,7 +1277,7 @@ export function canHydrateFormStateMarker(
inRootOrSingleton: boolean,
): null | FormStateMarkerInstance {
while (instance.nodeType !== COMMENT_NODE) {
if (!inRootOrSingleton || !enableHostSingletons) {
if (!inRootOrSingleton) {
return null;
}
const nextInstance = getNextHydratableSibling(instance);
Expand Down Expand Up @@ -1501,9 +1486,7 @@ export function shouldDeleteUnhydratedTailInstances(
parentType: string,
): boolean {
return (
(enableHostSingletons ||
(parentType !== 'head' && parentType !== 'body')) &&
(!enableFormActions || (parentType !== 'form' && parentType !== 'button'))
!enableFormActions || (parentType !== 'form' && parentType !== 'button')
);
}

Expand Down
15 changes: 5 additions & 10 deletions packages/react-dom-bindings/src/events/DOMPluginEventSystem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ import {
enableCreateEventHandleAPI,
enableScopeAPI,
enableFloat,
enableHostSingletons,
enableFormActions,
} from 'shared/ReactFeatureFlags';
import {
Expand Down Expand Up @@ -637,7 +636,7 @@ export function dispatchEventForPluginEventSystem(
parentTag === HostComponent ||
parentTag === HostText ||
(enableFloat ? parentTag === HostHoistable : false) ||
(enableHostSingletons ? parentTag === HostSingleton : false)
parentTag === HostSingleton
) {
node = ancestorInst = parentNode;
continue mainLoop;
Expand Down Expand Up @@ -695,7 +694,7 @@ export function accumulateSinglePhaseListeners(
if (
(tag === HostComponent ||
(enableFloat ? tag === HostHoistable : false) ||
(enableHostSingletons ? tag === HostSingleton : false)) &&
tag === HostSingleton) &&
stateNode !== null
) {
lastHostComponent = stateNode;
Expand Down Expand Up @@ -809,7 +808,7 @@ export function accumulateTwoPhaseListeners(
if (
(tag === HostComponent ||
(enableFloat ? tag === HostHoistable : false) ||
(enableHostSingletons ? tag === HostSingleton : false)) &&
tag === HostSingleton) &&
stateNode !== null
) {
const currentTarget = stateNode;
Expand Down Expand Up @@ -843,11 +842,7 @@ function getParent(inst: Fiber | null): Fiber | null {
// events to their parent. We could also go through parentNode on the
// host node but that wouldn't work for React Native and doesn't let us
// do the portal feature.
} while (
inst &&
inst.tag !== HostComponent &&
(!enableHostSingletons ? true : inst.tag !== HostSingleton)
);
} while (inst && inst.tag !== HostComponent && inst.tag !== HostSingleton);
if (inst) {
return inst;
}
Expand Down Expand Up @@ -916,7 +911,7 @@ function accumulateEnterLeaveListenersForEvent(
if (
(tag === HostComponent ||
(enableFloat ? tag === HostHoistable : false) ||
(enableHostSingletons ? tag === HostSingleton : false)) &&
tag === HostSingleton) &&
stateNode !== null
) {
const currentTarget = stateNode;
Expand Down
5 changes: 1 addition & 4 deletions packages/react-dom-bindings/src/events/plugins/EnterLeaveEventPlugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ import {
} from '../../client/ReactDOMComponentTree';
import {accumulateEnterLeaveTwoPhaseListeners} from '../DOMPluginEventSystem';

import {enableHostSingletons} from 'shared/ReactFeatureFlags';
import {
HostComponent,
HostSingleton,
Expand Down Expand Up @@ -110,9 +109,7 @@ function extractEvents(
const tag = to.tag;
if (
to !== nearestMounted ||
(tag !== HostComponent &&
(!enableHostSingletons ? true : tag !== HostSingleton) &&
tag !== HostText)
(tag !== HostComponent && tag !== HostSingleton && tag !== HostText)
) {
to = null;
}
Expand Down
57 changes: 3 additions & 54 deletions packages/react-dom/src/__tests__/ReactDOMFloat-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6124,7 +6124,7 @@ body {
);
});

// @gate enableFloat && enableHostSingletons && enableClientRenderFallbackOnTextMismatch
// @gate enableFloat && enableClientRenderFallbackOnTextMismatch
it('retains styles even when a new html, head, and/body mount', async () => {
await act(() => {
const {pipe} = renderToPipeableStream(
Expand Down Expand Up @@ -6176,58 +6176,7 @@ body {
);
});

// @gate enableFloat && !enableHostSingletons
it('retains styles even when a new html, head, and/body mount - without HostSingleton', async () => {
await act(() => {
const {pipe} = renderToPipeableStream(
<html>
<head />
<body>
<link rel="stylesheet" href="foo" precedence="foo" />
<link rel="stylesheet" href="bar" precedence="bar" />
server
</body>
</html>,
);
pipe(writable);
});
const errors = [];
ReactDOMClient.hydrateRoot(
document,
<html>
<head>
<link rel="stylesheet" href="qux" precedence="qux" />
<link rel="stylesheet" href="foo" precedence="foo" />
</head>
<body>client</body>
</html>,
{
onRecoverableError(error) {
errors.push(error.message);
},
},
);
await expect(async () => {
await waitForAll([]);
}).toErrorDev(
[
'Warning: Text content did not match. Server: "server" Client: "client"',
'Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.',
],
{withoutStack: 1},
);
expect(getMeaningfulChildren(document)).toEqual(
<html>
<head>
<link rel="stylesheet" href="qux" data-precedence="qux" />
<link rel="stylesheet" href="foo" data-precedence="foo" />
</head>
<body>client</body>
</html>,
);
});

// @gate enableFloat && enableHostSingletons
// @gate enableFloat
it('retains styles in head through head remounts', async () => {
const root = ReactDOMClient.createRoot(document);
root.render(
Expand Down Expand Up @@ -8036,7 +7985,7 @@ background-color: green;
]);
});

// @gate enableFloat && enableHostSingletons && (enableClientRenderFallbackOnTextMismatch || !__DEV__)
// @gate enableFloat && (enableClientRenderFallbackOnTextMismatch || !__DEV__)
it('can render a title before a singleton even if that singleton clears its contents', async () => {
await act(() => {
const {pipe} = renderToPipeableStream(
Expand Down
2 changes: 1 addition & 1 deletion packages/react-dom/src/__tests__/ReactDOMRoot-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -375,7 +375,7 @@ describe('ReactDOMRoot', () => {
await waitForAll([]);
container.innerHTML = '';

if (gate(flags => flags.enableFloat || flags.enableHostSingletons)) {
if (gate(flags => flags.enableFloat)) {
// When either of these flags are on this validation is turned off so we
// expect there to be no warnings
root.render(<div>Hi</div>);
Expand Down
Loading