{"parents":["17ca4b157fcba6c734583513353ba72376a7ba2d"],"commit":{"authorName":"Ricky","authoredAt":"2024-12-13T12:26:40-05:00","shortRevision":"fb12845d77","revision":"fb12845d779667b35cc7f44eee6bea47f4db72ba","authorEmail":"rickhanlonii@gmail.com","subject":"Remove disableIEWorkarounds (#31756)"},"body":"Based off https:\/\/github.com\/facebook\/react\/pull\/31755\r\n\r\nThis is landed everywhere.","patch":"diff --git a\/packages\/react-dom-bindings\/src\/client\/ReactDOMComponent.js b\/packages\/react-dom-bindings\/src\/client\/ReactDOMComponent.js\nindex 9f7b23026f..ac95c91c59 100644\n--- a\/packages\/react-dom-bindings\/src\/client\/ReactDOMComponent.js\n+++ b\/packages\/react-dom-bindings\/src\/client\/ReactDOMComponent.js\n@@ -16,7 +16,6 @@ import {\n possibleRegistrationNames,\n } from '..\/events\/EventRegistry';\n \n-import {canUseDOM} from 'shared\/ExecutionEnvironment';\n import {checkHtmlStringCoercion} from 'shared\/CheckStringCoercion';\n import {checkAttributeStringCoercion} from 'shared\/CheckStringCoercion';\n import {checkControlledValueProps} from '..\/shared\/ReactControlledValuePropTypes';\n@@ -50,7 +49,6 @@ import {\n } from '.\/ReactDOMTextarea';\n import {validateTextNesting} from '.\/validateDOMNesting';\n import {track} from '.\/inputValueTracking';\n-import setInnerHTML from '.\/setInnerHTML';\n import setTextContent from '.\/setTextContent';\n import {\n createDangerousStringForStyles,\n@@ -66,7 +64,6 @@ import {validateProperties as validateUnknownProperties} from '..\/shared\/ReactDO\n import sanitizeURL from '..\/shared\/sanitizeURL';\n \n import {\n- disableIEWorkarounds,\n enableTrustedTypesIntegration,\n enableFilterEmptyStringAttributesDOM,\n } from 'shared\/ReactFeatureFlags';\n@@ -83,19 +80,8 @@ let didWarnFormActionTarget = false;\n let didWarnFormActionMethod = false;\n let didWarnForNewBooleanPropsWithEmptyValue: {[string]: boolean};\n let didWarnPopoverTargetObject = false;\n-let canDiffStyleForHydrationWarning;\n if (__DEV__) {\n didWarnForNewBooleanPropsWithEmptyValue = {};\n- \/\/ IE 11 parses & normalizes the style attribute as opposed to other\n- \/\/ browsers. It adds spaces and sorts the properties in some\n- \/\/ non-alphabetical order. Handling that would require sorting CSS\n- \/\/ properties in the client & server versions or applying\n- \/\/ `expectedStyle` to a temporary DOM node to read its `style` attribute\n- \/\/ normalized. Since it only affects IE, we're skipping style warnings\n- \/\/ in that browser completely in favor of doing all that work.\n- \/\/ See https:\/\/github.com\/facebook\/react\/issues\/11807\n- canDiffStyleForHydrationWarning =\n- disableIEWorkarounds || (canUseDOM && !document.documentMode);\n }\n \n function validatePropertiesInDevelopment(type: string, props: any) {\n@@ -579,11 +565,7 @@ function setProp(\n 'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',\n );\n }\n- if (disableIEWorkarounds) {\n- domElement.innerHTML = nextHtml;\n- } else {\n- setInnerHTML(domElement, nextHtml);\n- }\n+ domElement.innerHTML = nextHtml;\n }\n }\n break;\n@@ -939,11 +921,7 @@ function setPropOnCustomElement(\n 'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',\n );\n }\n- if (disableIEWorkarounds) {\n- domElement.innerHTML = nextHtml;\n- } else {\n- setInnerHTML(domElement, nextHtml);\n- }\n+ domElement.innerHTML = nextHtml;\n }\n }\n break;\n@@ -1931,27 +1909,23 @@ function diffHydratedStyles(\n }\n return;\n }\n- if (canDiffStyleForHydrationWarning) {\n- \/\/ First we compare the string form and see if it's equivalent.\n- \/\/ This lets us bail out on anything that used to pass in this form.\n- \/\/ It also lets us compare anything that's not parsed by this browser.\n- const clientValue = createDangerousStringForStyles(value);\n- const serverValue = domElement.getAttribute('style');\n+ \/\/ First we compare the string form and see if it's equivalent.\n+ \/\/ This lets us bail out on anything that used to pass in this form.\n+ \/\/ It also lets us compare anything that's not parsed by this browser.\n+ const clientValue = createDangerousStringForStyles(value);\n+ const serverValue = domElement.getAttribute('style');\n \n- if (serverValue === clientValue) {\n- return;\n- }\n- const normalizedClientValue =\n- normalizeMarkupForTextOrAttribute(clientValue);\n- const normalizedServerValue =\n- normalizeMarkupForTextOrAttribute(serverValue);\n- if (normalizedServerValue === normalizedClientValue) {\n- return;\n- }\n-\n- \/\/ Otherwise, we create the object from the DOM for the diff view.\n- serverDifferences.style = getStylesObjectFromElement(domElement);\n+ if (serverValue === clientValue) {\n+ return;\n+ }\n+ const normalizedClientValue = normalizeMarkupForTextOrAttribute(clientValue);\n+ const normalizedServerValue = normalizeMarkupForTextOrAttribute(serverValue);\n+ if (normalizedServerValue === normalizedClientValue) {\n+ return;\n }\n+\n+ \/\/ Otherwise, we create the object from the DOM for the diff view.\n+ serverDifferences.style = getStylesObjectFromElement(domElement);\n }\n \n function hydrateAttribute(\ndiff --git a\/packages\/react-dom-bindings\/src\/client\/setInnerHTML.js b\/packages\/react-dom-bindings\/src\/client\/setInnerHTML.js\ndeleted file mode 100644\nindex 5f0d630fd3..0000000000\n--- a\/packages\/react-dom-bindings\/src\/client\/setInnerHTML.js\n+++ \/dev\/null\n@@ -1,82 +0,0 @@\n-\/**\n- * Copyright (c) Meta Platforms, Inc. and affiliates.\n- *\n- * This source code is licensed under the MIT license found in the\n- * LICENSE file in the root directory of this source tree.\n- *\n- * @flow\n- *\/\n-\n-\/* globals MSApp *\/\n-\n-import {SVG_NAMESPACE} from '.\/DOMNamespaces';\n-import {enableTrustedTypesIntegration} from 'shared\/ReactFeatureFlags';\n-\n-\/\/ SVG temp container for IE lacking innerHTML\n-let reusableSVGContainer: HTMLElement;\n-\n-function setInnerHTMLImpl(\n- node: Element,\n- html: {valueOf(): {toString(): string, ...}, ...},\n-): void {\n- if (node.namespaceURI === SVG_NAMESPACE) {\n- if (__DEV__) {\n- if (enableTrustedTypesIntegration) {\n- \/\/ TODO: reconsider the text of this warning and when it should show\n- \/\/ before enabling the feature flag.\n- if (typeof trustedTypes !== 'undefined') {\n- console.error(\n- \"Using 'dangerouslySetInnerHTML' in an svg element with \" +\n- 'Trusted Types enabled in an Internet Explorer will cause ' +\n- 'the trusted value to be converted to string. Assigning string ' +\n- \"to 'innerHTML' will throw an error if Trusted Types are enforced. \" +\n- \"You can try to wrap your svg element inside a div and use 'dangerouslySetInnerHTML' \" +\n- 'on the enclosing div instead.',\n- );\n- }\n- }\n- }\n- if (!('innerHTML' in node)) {\n- \/\/ IE does not have innerHTML for SVG nodes, so instead we inject the\n- \/\/ new markup in a temp node and then move the child nodes across into\n- \/\/ the target node\n- reusableSVGContainer =\n- reusableSVGContainer || document.createElement('div');\n- reusableSVGContainer.innerHTML =\n- '

Hello<\/h1>');\n });\n });\n-\n- describe('when the node does not have an innerHTML property', () => {\n- let innerHTMLDescriptor;\n-\n- \/\/ In some versions of IE (TODO: which ones?) SVG nodes don't have\n- \/\/ innerHTML. To simulate this, we will take it off the Element prototype\n- \/\/ and put it onto the HTMLDivElement prototype. We expect that the logic\n- \/\/ checks for existence of innerHTML on SVG, and if one doesn't exist, falls\n- \/\/ back to using appendChild and removeChild.\n-\n- beforeEach(() => {\n- innerHTMLDescriptor = Object.getOwnPropertyDescriptor(\n- Element.prototype,\n- 'innerHTML',\n- );\n- delete Element.prototype.innerHTML;\n- Object.defineProperty(\n- HTMLDivElement.prototype,\n- 'innerHTML',\n- innerHTMLDescriptor,\n- );\n- });\n-\n- afterEach(() => {\n- delete HTMLDivElement.prototype.innerHTML;\n- Object.defineProperty(\n- Element.prototype,\n- 'innerHTML',\n- innerHTMLDescriptor,\n- );\n- });\n-\n- \/\/ @gate !disableIEWorkarounds\n- it('sets innerHTML on it', async () => {\n- const html = '<\/circle>';\n- const container = document.createElementNS(\n- 'http:\/\/www.w3.org\/2000\/svg',\n- 'svg',\n- );\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- const circle = container.firstChild.firstChild;\n- expect(circle.tagName).toBe('circle');\n- });\n-\n- \/\/ @gate !disableIEWorkarounds\n- it('clears previous children', async () => {\n- const firstHtml = '<\/rect>';\n- const secondHtml = '<\/circle>';\n-\n- const container = document.createElementNS(\n- 'http:\/\/www.w3.org\/2000\/svg',\n- 'svg',\n- );\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- const rect = container.firstChild.firstChild;\n- expect(rect.tagName).toBe('rect');\n- await act(() => {\n- root.render();\n- });\n- const circle = container.firstChild.firstChild;\n- expect(circle.tagName).toBe('circle');\n- });\n- });\n });\ndiff --git a\/packages\/react-dom\/src\/client\/tests\/trustedTypes-test.internal.js b\/packages\/react-dom\/src\/client\/tests\/trustedTypes-test.internal.js\nindex abe707badd..923ee1f5d8 100644\n--- a\/packages\/react-dom\/src\/client\/tests\/trustedTypes-test.internal.js\n+++ b\/packages\/react-dom\/src\/client\/tests\/trustedTypes-test.internal.js\n@@ -206,56 +206,6 @@ describe('when Trusted Types are available in global object', () => {\n }\n });\n \n- describe('dangerouslySetInnerHTML in svg elements in Internet Explorer', () => {\n- let innerHTMLDescriptor;\n-\n- \/\/ simulate svg elements in Internet Explorer which don't have 'innerHTML' property\n- beforeEach(() => {\n- innerHTMLDescriptor = Object.getOwnPropertyDescriptor(\n- Element.prototype,\n- 'innerHTML',\n- );\n- delete Element.prototype.innerHTML;\n- Object.defineProperty(\n- HTMLDivElement.prototype,\n- 'innerHTML',\n- innerHTMLDescriptor,\n- );\n- });\n-\n- afterEach(() => {\n- delete HTMLDivElement.prototype.innerHTML;\n- Object.defineProperty(\n- Element.prototype,\n- 'innerHTML',\n- innerHTMLDescriptor,\n- );\n- });\n-\n- \/\/ @gate !disableIEWorkarounds\n- it('should log a warning', async () => {\n- class Component extends React.Component {\n- render() {\n- return ;\n- }\n- }\n- const root = ReactDOMClient.createRoot(container);\n- await expect(async () => {\n- await act(() => {\n- root.render();\n- });\n- }).toErrorDev(\n- \"Using 'dangerouslySetInnerHTML' in an svg element with \" +\n- 'Trusted Types enabled in an Internet Explorer will cause ' +\n- 'the trusted value to be converted to string. Assigning string ' +\n- \"to 'innerHTML' will throw an error if Trusted Types are enforced. \" +\n- \"You can try to wrap your svg element inside a div and use 'dangerouslySetInnerHTML' \" +\n- 'on the enclosing div instead.',\n- );\n- expect(container.innerHTML).toBe(' from making an unnecessary HTTP\n \/\/ request for certain browsers.\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\nindex 37991d4c8f..1ecbcfe28f 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n@@ -36,7 +36,6 @@ export const debugRenderPhaseSideEffectsForStrictMode = DEV;\n export const disableClientCache = true;\n export const disableCommentsAsDOMContainers = true;\n export const disableDefaultPropsExceptForClasses = true;\n-export const disableIEWorkarounds = true;\n export const disableInputAttributeSyncing = false;\n export const disableLegacyContext = false;\n export const disableLegacyContextForFunctionComponents = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\nindex eb40dc9123..0d97b0b68d 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n@@ -23,7 +23,6 @@ export const alwaysThrottleRetries = false;\n export const disableClientCache = true;\n export const disableCommentsAsDOMContainers = true;\n export const disableDefaultPropsExceptForClasses = true;\n-export const disableIEWorkarounds = true;\n export const disableInputAttributeSyncing = false;\n export const disableLegacyContext = true;\n export const disableLegacyContextForFunctionComponents = true;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\nindex 6673d056d9..28f96fb84e 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n@@ -29,7 +29,6 @@ export const enablePostpone = false;\n export const enableHalt = false;\n export const disableCommentsAsDOMContainers = true;\n export const disableInputAttributeSyncing = false;\n-export const disableIEWorkarounds = true;\n export const enableScopeAPI = false;\n export const enableCreateEventHandleAPI = false;\n export const enableSuspenseCallback = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native-fb.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native-fb.js\nindex 3ac8695027..fe3e2bd481 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native-fb.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native-fb.js\n@@ -15,7 +15,6 @@ export const debugRenderPhaseSideEffectsForStrictMode = false;\n export const disableClientCache = true;\n export const disableCommentsAsDOMContainers = true;\n export const disableDefaultPropsExceptForClasses = true;\n-export const disableIEWorkarounds = true;\n export const disableInputAttributeSyncing = false;\n export const disableLegacyContext = false;\n export const disableLegacyContextForFunctionComponents = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\nindex 8ebb4d0dbf..1badea3abf 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n@@ -29,7 +29,6 @@ export const enablePostpone = false;\n export const enableHalt = false;\n export const disableCommentsAsDOMContainers = true;\n export const disableInputAttributeSyncing = false;\n-export const disableIEWorkarounds = true;\n export const enableScopeAPI = true;\n export const enableCreateEventHandleAPI = false;\n export const enableSuspenseCallback = true;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\nindex 7a5761932c..2a43230563 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n@@ -53,7 +53,6 @@ export const enableFabricCompleteRootInCommitPhase = false;\n export const enableSuspenseAvoidThisFallback = true;\n export const enableSuspenseAvoidThisFallbackFizz = false;\n \n-export const disableIEWorkarounds = true;\n export const enableCPUSuspense = true;\n export const enableUseMemoCacheHook = true;\n export const enableUseEffectEventHook = true;\ndiff --git a\/scripts\/jest\/setupTests.www.js b\/scripts\/jest\/setupTests.www.js\nindex ba0ee287fd..efee213861 100644\n--- a\/scripts\/jest\/setupTests.www.js\n+++ b\/scripts\/jest\/setupTests.www.js\n@@ -15,7 +15,6 @@ jest.mock('shared\/ReactFeatureFlags', () => {\n \/\/ These are hardcoded to true for the next release,\n \/\/ but still run the tests against both variants until\n \/\/ we remove the flag.\n- actual.disableIEWorkarounds = VARIANT;\n actual.disableClientCache = VARIANT;\n \n return actual;\n","files":[{"path":"packages\/react-dom-bindings\/src\/client\/ReactDOMComponent.js","status":"M"},{"path":"packages\/react-dom-bindings\/src\/client\/setInnerHTML.js","status":"D"},{"path":"packages\/react-dom\/src\/client\/tests\/dangerouslySetInnerHTML-test.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/tests\/trustedTypes-test.internal.js","status":"M"},{"path":"packages\/shared\/ReactFeatureFlags.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.native-fb.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.native-oss.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native-fb.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.www.js","status":"M"},{"path":"scripts\/jest\/setupTests.www.js","status":"M"}]}

dillon1000/react

Files changed