@samitouri / QOS-React / commits / eb510a3304

Land enableCustomElementPropertySupport for React 19 (#27450)

We've rolled out this flag internally on WWW. This PR removed flag `enableCustomElementPropertySupport` Test plan: -- `yarn test` Co-authored-by: Ricky Hanlon <rickhanlonii@gmail.com>

Andrey Lunyov committed Mar 29, 2024 at 13:06 UTC eb510a33048fabd95d272b1c0b65f941e2909240

18 files changed +63 -163

packages/react-dom-bindings/src/client/DOMPropertyOperations.js

+6 -16

@@ -8,10 +8,7 @@

8 */

10 import isAttributeNameSafe from '../shared/isAttributeNameSafe';

11 -import {

12 - enableTrustedTypesIntegration,

13 - enableCustomElementPropertySupport,

14 -} from 'shared/ReactFeatureFlags';

11 +import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';

12 import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';

13 import {getFiberCurrentPropsFromNode} from './ReactDOMComponentTree';

@@ -73,25 +70,18 @@ export function getValueForAttributeOnCustomComponent(

70 // it would be expected that they end up not having an attribute.

71 return expected;

72 case 'function':

76 - if (enableCustomElementPropertySupport) {

77 - return expected;

78 - }

79 - break;

73 + return expected;

74 case 'boolean':

81 - if (enableCustomElementPropertySupport) {

82 - if (expected === false) {

83 - return expected;

84 - }

75 + if (expected === false) {

76 + return expected;

77 }

78 }

79 return expected === undefined ? undefined : null;

80 }

81 const value = node.getAttribute(name);

91 - if (enableCustomElementPropertySupport) {

92 - if (value === '' && expected === true) {

93 - return true;

94 - }

83 + if (value === '' && expected === true) {

84 + return true;

85 }

87 if (__DEV__) {

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

+31 -44

@@ -67,7 +67,6 @@ import sanitizeURL from '../shared/sanitizeURL';

68 import {

69 enableBigIntSupport,

70 - enableCustomElementPropertySupport,

70 disableIEWorkarounds,

71 enableTrustedTypesIntegration,

72 enableFilterEmptyStringAttributesDOM,

@@ -870,9 +869,7 @@ function setProp(

869 }

870 case 'innerText':

871 case 'textContent':

873 - if (enableCustomElementPropertySupport) {

874 - break;

875 - }

872 + break;

873 // Fall through

874 default: {

875 if (

@@ -983,9 +980,7 @@ function setPropOnCustomElement(

980 }

981 case 'innerText': // Properties

982 case 'textContent':

986 - if (enableCustomElementPropertySupport) {

987 - break;

988 - }

983 + break;

984 // Fall through

985 default: {

986 if (registrationNameDependencies.hasOwnProperty(key)) {

@@ -993,15 +988,7 @@ function setPropOnCustomElement(

988 warnForInvalidEventListener(key, value);

989 }

990 } else {

996 - if (enableCustomElementPropertySupport) {

997 - setValueForPropertyOnCustomComponent(domElement, key, value);

998 - } else {

999 - if (typeof value === 'boolean') {

1000 - // Special case before the new flag is on

1001 - value = '' + (value: any);

1002 - }

1003 - setValueForAttribute(domElement, key, value);

1004 - }

991 + setValueForPropertyOnCustomComponent(domElement, key, value);

992 }

993 }

994 }

@@ -2293,35 +2280,30 @@ function diffHydratedCustomComponent(

2280 case 'isContentEditable':

2281 case 'outerText':

2282 case 'outerHTML':

2296 - if (enableCustomElementPropertySupport) {

2297 - extraAttributes.delete(propKey.toLowerCase());

2298 - if (__DEV__) {

2299 - console.error(

2300 - 'Assignment to read-only property will result in a no-op: `%s`',

2301 - propKey,

2302 - );

2303 - }

2304 - continue;

2305 - }

2306 - // Fall through

2307 - case 'className':

2308 - if (enableCustomElementPropertySupport) {

2309 - // className is a special cased property on the server to render as an attribute.

2310 - extraAttributes.delete('class');

2311 - const serverValue = getValueForAttributeOnCustomComponent(

2312 - domElement,

2313 - 'class',

2314 - value,

2315 - );

2316 - warnForPropDifference(

2317 - 'className',

2318 - serverValue,

2319 - value,

2320 - serverDifferences,

2283 + extraAttributes.delete(propKey.toLowerCase());

2284 + if (__DEV__) {

2285 + console.error(

2286 + 'Assignment to read-only property will result in a no-op: `%s`',

2287 + propKey,

2288 );

2322 - continue;

2289 }

2290 + continue;

2291 // Fall through

2292 + case 'className':

2293 + // className is a special cased property on the server to render as an attribute.

2294 + extraAttributes.delete('class');

2295 + const serverValue = getValueForAttributeOnCustomComponent(

2296 + domElement,

2297 + 'class',

2298 + value,

2299 + );

2300 + warnForPropDifference(

2301 + 'className',

2302 + serverValue,

2303 + value,

2304 + serverDifferences,

2305 + );

2306 + continue;

2307 default: {

2308 // This is a DEV-only path

2309 const hostContextDev: HostContextDev = (hostContext: any);

@@ -2335,12 +2317,17 @@ function diffHydratedCustomComponent(

2317 } else {

2318 extraAttributes.delete(propKey);

2319 }

2338 - const serverValue = getValueForAttributeOnCustomComponent(

2320 + const valueOnCustomComponent = getValueForAttributeOnCustomComponent(

2321 domElement,

2322 propKey,

2323 value,

2324 );

2343 - warnForPropDifference(propKey, serverValue, value, serverDifferences);

2325 + warnForPropDifference(

2326 + propKey,

2327 + valueOnCustomComponent,

2328 + value,

2329 + serverDifferences,

2330 + );

2331 }

2332 }

2333 }

packages/react-dom-bindings/src/events/plugins/ChangeEventPlugin.js

+1 -5

@@ -26,10 +26,7 @@ import {updateValueIfChanged} from '../../client/inputValueTracking';

26 import {setDefaultValue} from '../../client/ReactDOMInput';

27 import {enqueueStateRestore} from '../ReactDOMControlledComponent';

29 -import {

30 - disableInputAttributeSyncing,

31 - enableCustomElementPropertySupport,

32 -} from 'shared/ReactFeatureFlags';

29 +import {disableInputAttributeSyncing} from 'shared/ReactFeatureFlags';

30 import {batchedUpdates} from '../ReactDOMUpdateBatching';

31 import {

32 processDispatchQueue,

@@ -311,7 +308,6 @@ function extractEvents(

308 } else if (shouldUseClickEvent(targetNode)) {

309 getTargetInstFunc = getTargetInstForClickEvent;

310 } else if (

314 - enableCustomElementPropertySupport &&

311 targetInst &&

312 isCustomElement(targetInst.elementType, targetInst.memoizedProps)

313 ) {

packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js

+9 -14

@@ -30,7 +30,6 @@ import {Children} from 'react';

30 import {

31 enableBigIntSupport,

32 enableFilterEmptyStringAttributesDOM,

33 - enableCustomElementPropertySupport,

33 enableFizzExternalRuntime,

34 enableNewBooleanProps,

35 } from 'shared/ReactFeatureFlags';

@@ -3342,11 +3341,9 @@ function pushStartCustomElement(

3341 // Ignored. These are built-in to React on the client.

3342 break;

3343 case 'className':

3345 - if (enableCustomElementPropertySupport) {

3346 - // className gets rendered as class on the client, so it should be

3347 - // rendered as class on the server.

3348 - attributeName = 'class';

3349 - }

3344 + // className gets rendered as class on the client, so it should be

3345 + // rendered as class on the server.

3346 + attributeName = 'class';

3347 // intentional fallthrough

3348 default:

3349 if (

@@ -3354,14 +3351,12 @@ function pushStartCustomElement(

3351 typeof propValue !== 'function' &&

3352 typeof propValue !== 'symbol'

3353 ) {

3357 - if (enableCustomElementPropertySupport) {

3358 - if (propValue === false) {

3359 - continue;

3360 - } else if (propValue === true) {

3361 - propValue = '';

3362 - } else if (typeof propValue === 'object') {

3363 - continue;

3364 - }

3354 + if (propValue === false) {

3355 + continue;

3356 + } else if (propValue === true) {

3357 + propValue = '';

3358 + } else if (typeof propValue === 'object') {

3359 + continue;

3360 }

3361 target.push(

3362 attributeSeparator,

packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js

+2 -7

@@ -9,10 +9,7 @@ import {ATTRIBUTE_NAME_CHAR} from './isAttributeNameSafe';

9 import isCustomElement from './isCustomElement';

10 import possibleStandardNames from './possibleStandardNames';

11 import hasOwnProperty from 'shared/hasOwnProperty';

12 -import {

13 - enableCustomElementPropertySupport,

14 - enableNewBooleanProps,

15 -} from 'shared/ReactFeatureFlags';

12 +import {enableNewBooleanProps} from 'shared/ReactFeatureFlags';

14 const warnedProperties = {};

15 const EVENT_NAME_REGEX = /^on./;

@@ -189,9 +186,7 @@ function validateProperty(tagName, name, value, eventRegistry) {

186 }

187 case 'innerText': // Properties

188 case 'textContent':

192 - if (enableCustomElementPropertySupport) {

193 - return true;

194 - }

189 + return true;

190 }

191

192 switch (typeof value) {

packages/react-dom/src/__tests__/DOMPropertyOperations-test.js

+3 -28

@@ -10,10 +10,7 @@

10 'use strict';

12 // Set by `yarn test-fire`.

13 -const {

14 - enableCustomElementPropertySupport,

15 - disableInputAttributeSyncing,

16 -} = require('shared/ReactFeatureFlags');

13 +const {disableInputAttributeSyncing} = require('shared/ReactFeatureFlags');

15 describe('DOMPropertyOperations', () => {

16 let React;

@@ -234,7 +231,6 @@ describe('DOMPropertyOperations', () => {

231 expect(container.firstChild.hasAttribute('value')).toBe(false);

232 });

233

237 - // @gate enableCustomElementPropertySupport

234 it('custom element custom events lowercase', async () => {

235 const oncustomevent = jest.fn();

236 function Test() {

@@ -251,7 +247,6 @@ describe('DOMPropertyOperations', () => {

247 expect(oncustomevent).toHaveBeenCalledTimes(1);

248 });

249

254 - // @gate enableCustomElementPropertySupport

250 it('custom element custom events uppercase', async () => {

251 const oncustomevent = jest.fn();

252 function Test() {

@@ -268,7 +263,6 @@ describe('DOMPropertyOperations', () => {

263 expect(oncustomevent).toHaveBeenCalledTimes(1);

264 });

265

271 - // @gate enableCustomElementPropertySupport

266 it('custom element custom event with dash in name', async () => {

267 const oncustomevent = jest.fn();

268 function Test() {

@@ -285,7 +279,6 @@ describe('DOMPropertyOperations', () => {

279 expect(oncustomevent).toHaveBeenCalledTimes(1);

280 });

281

288 - // @gate enableCustomElementPropertySupport

282 it('custom element remove event handler', async () => {

283 const oncustomevent = jest.fn();

284 function Test(props) {

@@ -343,12 +336,8 @@ describe('DOMPropertyOperations', () => {

336 expect(customElement.getAttribute('onstring')).toBe('hello');

337 expect(customElement.getAttribute('onobj')).toBe('[object Object]');

338 expect(customElement.getAttribute('onarray')).toBe('one,two');

346 - expect(customElement.getAttribute('ontrue')).toBe(

347 - enableCustomElementPropertySupport ? '' : 'true',

348 - );

349 - expect(customElement.getAttribute('onfalse')).toBe(

350 - enableCustomElementPropertySupport ? null : 'false',

351 - );

339 + expect(customElement.getAttribute('ontrue')).toBe('');

340 + expect(customElement.getAttribute('onfalse')).toBe(null);

341

342 // Dispatch the corresponding event names to make sure that nothing crashes.

343 customElement.dispatchEvent(new Event('string'));

@@ -385,7 +374,6 @@ describe('DOMPropertyOperations', () => {

374 expect(syntheticClickEvent.nativeEvent).toBe(nativeClickEvent);

375 });

376

388 - // @gate enableCustomElementPropertySupport

377 it('custom elements should have working onChange event listeners', async () => {

378 let reactChangeEvent = null;

379 const eventHandler = jest.fn(event => (reactChangeEvent = event));

@@ -450,7 +438,6 @@ describe('DOMPropertyOperations', () => {

438 expect(eventHandler).toHaveBeenCalledTimes(expectedHandlerCallCount);

439 });

440

453 - // @gate enableCustomElementPropertySupport

441 it('custom elements should have separate onInput and onChange handling', async () => {

442 const container = document.createElement('div');

443 document.body.appendChild(container);

@@ -476,7 +463,6 @@ describe('DOMPropertyOperations', () => {

463 expect(changeEventHandler).toHaveBeenCalledTimes(1);

464 });

465

479 - // @gate enableCustomElementPropertySupport

466 it('custom elements should be able to remove and re-add custom event listeners', async () => {

467 const container = document.createElement('div');

468 document.body.appendChild(container);

@@ -758,7 +744,6 @@ describe('DOMPropertyOperations', () => {

744 expect(customOnClickHandler).toHaveBeenCalledTimes(0);

745 });

746

761 - // @gate enableCustomElementPropertySupport

747 it('onChange/onInput/onClick on div with various types of children', async () => {

748 const container = document.createElement('div');

749 document.body.appendChild(container);

@@ -951,7 +936,6 @@ describe('DOMPropertyOperations', () => {

936 expect(onClickHandler).toBeCalledTimes(1);

937 });

938

954 - // @gate enableCustomElementPropertySupport

939 it('custom element onChange/onInput/onClick with event target custom element child', async () => {

940 const container = document.createElement('div');

941 document.body.appendChild(container);

@@ -987,7 +971,6 @@ describe('DOMPropertyOperations', () => {

971 expect(onClickHandler).toBeCalledTimes(1);

972 });

973

990 - // @gate enableCustomElementPropertySupport

974 it('custom elements should allow custom events with capture event listeners', async () => {

975 const oncustomeventCapture = jest.fn();

976 const oncustomevent = jest.fn();

@@ -1031,7 +1014,6 @@ describe('DOMPropertyOperations', () => {

1014 expect(customElement.hasChildNodes()).toBe(false);

1015 });

1016

1034 - // @gate enableCustomElementPropertySupport

1017 it('innerText should not work on custom elements', async () => {

1018 const container = document.createElement('div');

1019 const root = ReactDOMClient.createRoot(container);

@@ -1051,7 +1033,6 @@ describe('DOMPropertyOperations', () => {

1033 expect(customElement.hasChildNodes()).toBe(false);

1034 });

1035

1054 - // @gate enableCustomElementPropertySupport

1036 it('textContent should not work on custom elements', async () => {

1037 const container = document.createElement('div');

1038 const root = ReactDOMClient.createRoot(container);

@@ -1071,7 +1052,6 @@ describe('DOMPropertyOperations', () => {

1052 expect(customElement.hasChildNodes()).toBe(false);

1053 });

1054

1074 - // @gate enableCustomElementPropertySupport

1055 it('values should not be converted to booleans when assigning into custom elements', async () => {

1056 const container = document.createElement('div');

1057 document.body.appendChild(container);

@@ -1123,7 +1103,6 @@ describe('DOMPropertyOperations', () => {

1103 expect(customElement.foo).toBe(null);

1104 });

1105

1126 - // @gate enableCustomElementPropertySupport

1106 it('boolean props should not be stringified in attributes', async () => {

1107 const container = document.createElement('div');

1108 document.body.appendChild(container);

@@ -1143,7 +1122,6 @@ describe('DOMPropertyOperations', () => {

1122 expect(customElement.getAttribute('foo')).toBe(null);

1123 });

1124

1146 - // @gate enableCustomElementPropertySupport

1125 it('custom element custom event handlers assign multiple types', async () => {

1126 const container = document.createElement('div');

1127 document.body.appendChild(container);

@@ -1197,7 +1175,6 @@ describe('DOMPropertyOperations', () => {

1175 expect(customelement.getAttribute('oncustomevent')).toBe(null);

1176 });

1177

1200 - // @gate enableCustomElementPropertySupport

1178 it('custom element custom event handlers assign multiple types with setter', async () => {

1179 const container = document.createElement('div');

1180 document.body.appendChild(container);

@@ -1257,7 +1234,6 @@ describe('DOMPropertyOperations', () => {

1234 expect(customelement.getAttribute('oncustomevent')).toBe(null);

1235 });

1236

1260 - // @gate enableCustomElementPropertySupport

1237 it('assigning to a custom element property should not remove attributes', async () => {

1238 const container = document.createElement('div');

1239 document.body.appendChild(container);

@@ -1284,7 +1260,6 @@ describe('DOMPropertyOperations', () => {

1260 expect(customElement.getAttribute('foo')).toBe('one');

1261 });

1262

1287 - // @gate enableCustomElementPropertySupport

1263 it('custom element properties should accept functions', async () => {

1264 const container = document.createElement('div');

1265 document.body.appendChild(container);

packages/react-dom/src/__tests__/ReactDOMComponent-test.js

+2 -6

@@ -3549,15 +3549,11 @@ describe('ReactDOMComponent', () => {

3549 root.render(<some-custom-element foo={true} />);

3550 });

3551 const node = container.firstChild;

3552 - expect(node.getAttribute('foo')).toBe(

3553 - ReactFeatureFlags.enableCustomElementPropertySupport ? '' : 'true',

3554 - );

3552 + expect(node.getAttribute('foo')).toBe('');

3553 await act(() => {

3554 root.render(<some-custom-element foo={false} />);

3555 });

3558 - expect(node.getAttribute('foo')).toBe(

3559 - ReactFeatureFlags.enableCustomElementPropertySupport ? null : 'false',

3560 - );

3556 + expect(node.getAttribute('foo')).toBe(null);

3557 await act(() => {

3558 root.render(<some-custom-element />);

3559 });

packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

+1 -1

@@ -3603,7 +3603,7 @@ describe('ReactDOMFizzServer', () => {

3603 );

3604 });

3605

3606 - // bugfix: https://github.com/facebook/react/issues/27286 affecting enableCustomElementPropertySupport flag

3606 + // bugfix: https://github.com/facebook/react/issues/27286

3607 it('can render custom elements with children on ther server', async () => {

3608 await act(() => {

3609 renderToPipeableStream(

packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js

+4 -17

@@ -699,13 +699,8 @@ describe('ReactDOMServerIntegration', () => {

699

700 itRenders('className for custom elements', async render => {

701 const e = await render(<custom-element className="test" />, 0);

702 - if (ReactFeatureFlags.enableCustomElementPropertySupport) {

703 - expect(e.getAttribute('className')).toBe(null);

704 - expect(e.getAttribute('class')).toBe('test');

705 - } else {

706 - expect(e.getAttribute('className')).toBe('test');

707 - expect(e.getAttribute('class')).toBe(null);

708 - }

702 + expect(e.getAttribute('className')).toBe(null);

703 + expect(e.getAttribute('class')).toBe('test');

704 });

705

706 itRenders('htmlFor property on is elements', async render => {

@@ -738,20 +733,12 @@ describe('ReactDOMServerIntegration', () => {

733

734 itRenders('unknown boolean `true` attributes as strings', async render => {

735 const e = await render(<custom-element foo={true} />);

741 - if (ReactFeatureFlags.enableCustomElementPropertySupport) {

742 - expect(e.getAttribute('foo')).toBe('');

743 - } else {

744 - expect(e.getAttribute('foo')).toBe('true');

745 - }

736 + expect(e.getAttribute('foo')).toBe('');

737 });

738

739 itRenders('unknown boolean `false` attributes as strings', async render => {

740 const e = await render(<custom-element foo={false} />);

750 - if (ReactFeatureFlags.enableCustomElementPropertySupport) {

751 - expect(e.getAttribute('foo')).toBe(null);

752 - } else {

753 - expect(e.getAttribute('foo')).toBe('false');

754 - }

741 + expect(e.getAttribute('foo')).toBe(null);

742 });

743

744 itRenders('new boolean `true` attributes', async render => {

packages/react-dom/src/__tests__/ReactServerRendering-test.js

-2

@@ -1085,7 +1085,6 @@ describe('ReactDOMServer', () => {

1085 expect(output).toBe(`<my-custom-element foo="5"></my-custom-element>`);

1086 });

1087

1088 - // @gate enableCustomElementPropertySupport

1088 it('Object properties should not be server rendered for custom elements', () => {

1089 const output = ReactDOMServer.renderToString(

1090 <my-custom-element foo={{foo: 'bar'}} />,

@@ -1093,7 +1092,6 @@ describe('ReactDOMServer', () => {

1092 expect(output).toBe(`<my-custom-element></my-custom-element>`);

1093 });

1094

1096 - // @gate enableCustomElementPropertySupport

1095 it('Array properties should not be server rendered for custom elements', () => {

1096 const output = ReactDOMServer.renderToString(

1097 <my-custom-element foo={['foo', 'bar']} />,

packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js

+4 -11

@@ -593,23 +593,16 @@ describe('ReactDOMServerHydration', () => {

593 const jsx = React.createElement('my-custom-element', props);

594 const element = document.createElement('div');

595 element.innerHTML = ReactDOMServer.renderToString(jsx);

596 - if (gate(flags => flags.enableCustomElementPropertySupport)) {

597 - await expect(async () => {

598 - await act(() => {

599 - ReactDOMClient.hydrateRoot(element, jsx);

600 - });

601 - }).toErrorDev(

602 - `Warning: Assignment to read-only property will result in a no-op: \`${readOnlyProperty}\``,

603 - );

604 - } else {

596 + await expect(async () => {

597 await act(() => {

598 ReactDOMClient.hydrateRoot(element, jsx);

599 });

608 - }

600 + }).toErrorDev(

601 + `Warning: Assignment to read-only property will result in a no-op: \`${readOnlyProperty}\``,

602 + );

603 }

604 });

605

612 - // @gate enableCustomElementPropertySupport

606 it('should not re-assign properties on hydration', async () => {

607 const container = document.createElement('div');

608 document.body.appendChild(container);

packages/shared/ReactFeatureFlags.js

-6

@@ -146,12 +146,6 @@ export const useModernStrictMode = __NEXT_MAJOR__;

146 // Remove IE and MsApp specific workarounds for innerHTML

147 export const disableIEWorkarounds = __NEXT_MAJOR__;

148

149 -// Changes the behavior for rendering custom elements in both server rendering

150 -// and client rendering, mostly to allow JSX attributes to apply to the custom

151 -// element's object properties instead of only HTML attributes.

152 -// https://github.com/facebook/react/issues/11347

153 -export const enableCustomElementPropertySupport = __NEXT_MAJOR__;

154 -

149 // Filter certain DOM attributes (e.g. src, href) if their values are empty

150 // strings. This prevents e.g. <img src=""> from making an unnecessary HTTP

151 // request for certain browsers.

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

-1

@@ -78,7 +78,6 @@ export const enableLazyContextPropagation = false;

78 export const enableLegacyHidden = false;

79 export const forceConcurrentByDefaultForTesting = false;

80 export const allowConcurrentByDefault = false;

81 -export const enableCustomElementPropertySupport = true;

81 export const enableNewBooleanProps = true;

83 export const enableTransitionTracing = false;

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

-1

@@ -53,7 +53,6 @@ export const enableTaint = __NEXT_RN_MAJOR__;

53 export const enableUnifiedSyncLane = __NEXT_RN_MAJOR__;

54 export const enableFizzExternalRuntime = __NEXT_RN_MAJOR__; // DOM-only

55 export const enableBinaryFlight = __NEXT_RN_MAJOR__; // DOM-only

56 -export const enableCustomElementPropertySupport = __NEXT_RN_MAJOR__; // DOM-only