Skip to content

Commit fb12845

Browse files
rickhanloniirickhanlonii
authored
Remove disableIEWorkarounds (#31756)
Based off #31755 This is landed everywhere.
1 parent 17ca4b1 commit fb12845

12 files changed

+17
-255
lines changed

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

Lines changed: 17 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import {
1616
possibleRegistrationNames,
1717
} from '../events/EventRegistry';
1818

19-
import {canUseDOM} from 'shared/ExecutionEnvironment';
2019
import {checkHtmlStringCoercion} from 'shared/CheckStringCoercion';
2120
import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
2221
import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
@@ -50,7 +49,6 @@ import {
5049
} from './ReactDOMTextarea';
5150
import {validateTextNesting} from './validateDOMNesting';
5251
import {track} from './inputValueTracking';
53-
import setInnerHTML from './setInnerHTML';
5452
import setTextContent from './setTextContent';
5553
import {
5654
createDangerousStringForStyles,
@@ -66,7 +64,6 @@ import {validateProperties as validateUnknownProperties} from '../shared/ReactDO
6664
import sanitizeURL from '../shared/sanitizeURL';
6765

6866
import {
69-
disableIEWorkarounds,
7067
enableTrustedTypesIntegration,
7168
enableFilterEmptyStringAttributesDOM,
7269
} from 'shared/ReactFeatureFlags';
@@ -83,19 +80,8 @@ let didWarnFormActionTarget = false;
8380
let didWarnFormActionMethod = false;
8481
let didWarnForNewBooleanPropsWithEmptyValue: {[string]: boolean};
8582
let didWarnPopoverTargetObject = false;
86-
let canDiffStyleForHydrationWarning;
8783
if (__DEV__) {
8884
didWarnForNewBooleanPropsWithEmptyValue = {};
89-
// IE 11 parses & normalizes the style attribute as opposed to other
90-
// browsers. It adds spaces and sorts the properties in some
91-
// non-alphabetical order. Handling that would require sorting CSS
92-
// properties in the client & server versions or applying
93-
// `expectedStyle` to a temporary DOM node to read its `style` attribute
94-
// normalized. Since it only affects IE, we're skipping style warnings
95-
// in that browser completely in favor of doing all that work.
96-
// See https://github.com/facebook/react/issues/11807
97-
canDiffStyleForHydrationWarning =
98-
disableIEWorkarounds || (canUseDOM && !document.documentMode);
9985
}
10086

10187
function validatePropertiesInDevelopment(type: string, props: any) {
@@ -579,11 +565,7 @@ function setProp(
579565
'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
580566
);
581567
}
582-
if (disableIEWorkarounds) {
583-
domElement.innerHTML = nextHtml;
584-
} else {
585-
setInnerHTML(domElement, nextHtml);
586-
}
568+
domElement.innerHTML = nextHtml;
587569
}
588570
}
589571
break;
@@ -939,11 +921,7 @@ function setPropOnCustomElement(
939921
'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
940922
);
941923
}
942-
if (disableIEWorkarounds) {
943-
domElement.innerHTML = nextHtml;
944-
} else {
945-
setInnerHTML(domElement, nextHtml);
946-
}
924+
domElement.innerHTML = nextHtml;
947925
}
948926
}
949927
break;
@@ -1931,27 +1909,23 @@ function diffHydratedStyles(
19311909
}
19321910
return;
19331911
}
1934-
if (canDiffStyleForHydrationWarning) {
1935-
// First we compare the string form and see if it's equivalent.
1936-
// This lets us bail out on anything that used to pass in this form.
1937-
// It also lets us compare anything that's not parsed by this browser.
1938-
const clientValue = createDangerousStringForStyles(value);
1939-
const serverValue = domElement.getAttribute('style');
1912+
// First we compare the string form and see if it's equivalent.
1913+
// This lets us bail out on anything that used to pass in this form.
1914+
// It also lets us compare anything that's not parsed by this browser.
1915+
const clientValue = createDangerousStringForStyles(value);
1916+
const serverValue = domElement.getAttribute('style');
19401917

1941-
if (serverValue === clientValue) {
1942-
return;
1943-
}
1944-
const normalizedClientValue =
1945-
normalizeMarkupForTextOrAttribute(clientValue);
1946-
const normalizedServerValue =
1947-
normalizeMarkupForTextOrAttribute(serverValue);
1948-
if (normalizedServerValue === normalizedClientValue) {
1949-
return;
1950-
}
1951-
1952-
// Otherwise, we create the object from the DOM for the diff view.
1953-
serverDifferences.style = getStylesObjectFromElement(domElement);
1918+
if (serverValue === clientValue) {
1919+
return;
1920+
}
1921+
const normalizedClientValue = normalizeMarkupForTextOrAttribute(clientValue);
1922+
const normalizedServerValue = normalizeMarkupForTextOrAttribute(serverValue);
1923+
if (normalizedServerValue === normalizedClientValue) {
1924+
return;
19541925
}
1926+
1927+
// Otherwise, we create the object from the DOM for the diff view.
1928+
serverDifferences.style = getStylesObjectFromElement(domElement);
19551929
}
19561930

19571931
function hydrateAttribute(

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

Lines changed: 0 additions & 82 deletions
This file was deleted.

‎packages/react-dom/src/client/__tests__/dangerouslySetInnerHTML-test.js

Lines changed: 0 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -27,73 +27,4 @@ describe('dangerouslySetInnerHTML', () => {
2727
expect(container.firstChild.innerHTML).toBe('<h1>Hello</h1>');
2828
});
2929
});
30-
31-
describe('when the node does not have an innerHTML property', () => {
32-
let innerHTMLDescriptor;
33-
34-
// In some versions of IE (TODO: which ones?) SVG nodes don't have
35-
// innerHTML. To simulate this, we will take it off the Element prototype
36-
// and put it onto the HTMLDivElement prototype. We expect that the logic
37-
// checks for existence of innerHTML on SVG, and if one doesn't exist, falls
38-
// back to using appendChild and removeChild.
39-
40-
beforeEach(() => {
41-
innerHTMLDescriptor = Object.getOwnPropertyDescriptor(
42-
Element.prototype,
43-
'innerHTML',
44-
);
45-
delete Element.prototype.innerHTML;
46-
Object.defineProperty(
47-
HTMLDivElement.prototype,
48-
'innerHTML',
49-
innerHTMLDescriptor,
50-
);
51-
});
52-
53-
afterEach(() => {
54-
delete HTMLDivElement.prototype.innerHTML;
55-
Object.defineProperty(
56-
Element.prototype,
57-
'innerHTML',
58-
innerHTMLDescriptor,
59-
);
60-
});
61-
62-
// @gate !disableIEWorkarounds
63-
it('sets innerHTML on it', async () => {
64-
const html = '<circle></circle>';
65-
const container = document.createElementNS(
66-
'http://www.w3.org/2000/svg',
67-
'svg',
68-
);
69-
const root = ReactDOMClient.createRoot(container);
70-
await act(() => {
71-
root.render(<g dangerouslySetInnerHTML={{__html: html}} />);
72-
});
73-
const circle = container.firstChild.firstChild;
74-
expect(circle.tagName).toBe('circle');
75-
});
76-
77-
// @gate !disableIEWorkarounds
78-
it('clears previous children', async () => {
79-
const firstHtml = '<rect></rect>';
80-
const secondHtml = '<circle></circle>';
81-
82-
const container = document.createElementNS(
83-
'http://www.w3.org/2000/svg',
84-
'svg',
85-
);
86-
const root = ReactDOMClient.createRoot(container);
87-
await act(() => {
88-
root.render(<g dangerouslySetInnerHTML={{__html: firstHtml}} />);
89-
});
90-
const rect = container.firstChild.firstChild;
91-
expect(rect.tagName).toBe('rect');
92-
await act(() => {
93-
root.render(<g dangerouslySetInnerHTML={{__html: secondHtml}} />);
94-
});
95-
const circle = container.firstChild.firstChild;
96-
expect(circle.tagName).toBe('circle');
97-
});
98-
});
9930
});

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

Lines changed: 0 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -206,56 +206,6 @@ describe('when Trusted Types are available in global object', () => {
206206
}
207207
});
208208

209-
describe('dangerouslySetInnerHTML in svg elements in Internet Explorer', () => {
210-
let innerHTMLDescriptor;
211-
212-
// simulate svg elements in Internet Explorer which don't have 'innerHTML' property
213-
beforeEach(() => {
214-
innerHTMLDescriptor = Object.getOwnPropertyDescriptor(
215-
Element.prototype,
216-
'innerHTML',
217-
);
218-
delete Element.prototype.innerHTML;
219-
Object.defineProperty(
220-
HTMLDivElement.prototype,
221-
'innerHTML',
222-
innerHTMLDescriptor,
223-
);
224-
});
225-
226-
afterEach(() => {
227-
delete HTMLDivElement.prototype.innerHTML;
228-
Object.defineProperty(
229-
Element.prototype,
230-
'innerHTML',
231-
innerHTMLDescriptor,
232-
);
233-
});
234-
235-
// @gate !disableIEWorkarounds
236-
it('should log a warning', async () => {
237-
class Component extends React.Component {
238-
render() {
239-
return <svg dangerouslySetInnerHTML={{__html: 'unsafe html'}} />;
240-
}
241-
}
242-
const root = ReactDOMClient.createRoot(container);
243-
await expect(async () => {
244-
await act(() => {
245-
root.render(<Component />);
246-
});
247-
}).toErrorDev(
248-
"Using 'dangerouslySetInnerHTML' in an svg element with " +
249-
'Trusted Types enabled in an Internet Explorer will cause ' +
250-
'the trusted value to be converted to string. Assigning string ' +
251-
"to 'innerHTML' will throw an error if Trusted Types are enforced. " +
252-
"You can try to wrap your svg element inside a div and use 'dangerouslySetInnerHTML' " +
253-
'on the enclosing div instead.',
254-
);
255-
expect(container.innerHTML).toBe('<svg>unsafe html</svg>');
256-
});
257-
});
258-
259209
it('should warn once when rendering script tag in jsx on client', async () => {
260210
const root = ReactDOMClient.createRoot(container);
261211
await expect(async () => {

‎packages/shared/ReactFeatureFlags.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -203,10 +203,6 @@ export const disableLegacyContextForFunctionComponents = true;
203203
// TODO: clean up legacy <StrictMode /> once tests pass WWW.
204204
export const useModernStrictMode = true;
205205

206-
// Not ready to break experimental yet.
207-
// Remove IE and MsApp specific workarounds for innerHTML
208-
export const disableIEWorkarounds = true;
209-
210206
// Filter certain DOM attributes (e.g. src, href) if their values are empty
211207
// strings. This prevents e.g. <img src=""> from making an unnecessary HTTP
212208
// request for certain browsers.

‎packages/shared/forks/ReactFeatureFlags.native-fb.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
3636
export const disableClientCache = true;
3737
export const disableCommentsAsDOMContainers = true;
3838
export const disableDefaultPropsExceptForClasses = true;
39-
export const disableIEWorkarounds = true;
4039
export const disableInputAttributeSyncing = false;
4140
export const disableLegacyContext = false;
4241
export const disableLegacyContextForFunctionComponents = false;

‎packages/shared/forks/ReactFeatureFlags.native-oss.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ export const alwaysThrottleRetries = false;
2323
export const disableClientCache = true;
2424
export const disableCommentsAsDOMContainers = true;
2525
export const disableDefaultPropsExceptForClasses = true;
26-
export const disableIEWorkarounds = true;
2726
export const disableInputAttributeSyncing = false;
2827
export const disableLegacyContext = true;
2928
export const disableLegacyContextForFunctionComponents = true;

‎packages/shared/forks/ReactFeatureFlags.test-renderer.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ export const enablePostpone = false;
2929
export const enableHalt = false;
3030
export const disableCommentsAsDOMContainers = true;
3131
export const disableInputAttributeSyncing = false;
32-
export const disableIEWorkarounds = true;
3332
export const enableScopeAPI = false;
3433
export const enableCreateEventHandleAPI = false;
3534
export const enableSuspenseCallback = false;

‎packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ export const debugRenderPhaseSideEffectsForStrictMode = false;
1515
export const disableClientCache = true;
1616
export const disableCommentsAsDOMContainers = true;
1717
export const disableDefaultPropsExceptForClasses = true;
18-
export const disableIEWorkarounds = true;
1918
export const disableInputAttributeSyncing = false;
2019
export const disableLegacyContext = false;
2120
export const disableLegacyContextForFunctionComponents = false;

‎packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ export const enablePostpone = false;
2929
export const enableHalt = false;
3030
export const disableCommentsAsDOMContainers = true;
3131
export const disableInputAttributeSyncing = false;
32-
export const disableIEWorkarounds = true;
3332
export const enableScopeAPI = true;
3433
export const enableCreateEventHandleAPI = false;
3534
export const enableSuspenseCallback = true;

0 commit comments

Comments
 (0)