hanzoai/react
2
0
Fork 0
mirror of https://github.com/hanzoai/react.git synced 2026-09-24 17:02:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove enableFilterEmptyStringAttributesDOM (#31765)

Browse Source 
Base off https://github.com/facebook/react/pull/31764

This has landed everywhere
This commit is contained in:
Ricky
2024-12-13 16:30:10 -05:00
committed by GitHub
parent e9535fb342
commit 83bfde6ee7
12 changed files with 227 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-dom-bindings/src/client/ReactDOMComponent.js
Vendored
+69 -75
View File
@@ -63,10 +63,7 @@ import {validateProperties as validateInputProperties} from '../shared/ReactDOMN
import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
import sanitizeURL from '../shared/sanitizeURL';
import {
enableTrustedTypesIntegration,
enableFilterEmptyStringAttributesDOM,
} from 'shared/ReactFeatureFlags';
import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';
import {
mediaEventTypes,
listenToNonDelegatedEvent,
@@ -400,35 +397,33 @@ function setProp(
// fallthrough
case 'src':
case 'href': {
if (enableFilterEmptyStringAttributesDOM) {
if (
value === '' &&
// <a href=""> is fine for "reload" links.
!(tag === 'a' && key === 'href')
) {
if (__DEV__) {
if (key === 'src') {
console.error(
'An empty string ("") was passed to the %s attribute. ' +
'This may cause the browser to download the whole page again over the network. ' +
'To fix this, either do not render the element at all ' +
'or pass null to %s instead of an empty string.',
key,
key,
);
} else {
console.error(
'An empty string ("") was passed to the %s attribute. ' +
'To fix this, either do not render the element at all ' +
'or pass null to %s instead of an empty string.',
key,
key,
);
}
if (
value === '' &&
// <a href=""> is fine for "reload" links.
!(tag === 'a' && key === 'href')
) {
if (__DEV__) {
if (key === 'src') {
console.error(
'An empty string ("") was passed to the %s attribute. ' +
'This may cause the browser to download the whole page again over the network. ' +
'To fix this, either do not render the element at all ' +
'or pass null to %s instead of an empty string.',
key,
key,
);
} else {
console.error(
'An empty string ("") was passed to the %s attribute. ' +
'To fix this, either do not render the element at all ' +
'or pass null to %s instead of an empty string.',
key,
key,
);
}
domElement.removeAttribute(key);
break;
}
domElement.removeAttribute(key);
break;
}
if (
value == null ||
@@ -2489,53 +2484,52 @@ function diffHydratedGenericElement(
// fallthrough
case 'src':
case 'href':
if (enableFilterEmptyStringAttributesDOM) {
if (
value === '' &&
// <a href=""> is fine for "reload" links.
!(tag === 'a' && propKey === 'href') &&
!(tag === 'object' && propKey === 'data')
) {
if (__DEV__) {
if (propKey === 'src') {
console.error(
'An empty string ("") was passed to the %s attribute. ' +
'This may cause the browser to download the whole page again over the network. ' +
'To fix this, either do not render the element at all ' +
'or pass null to %s instead of an empty string.',
propKey,
propKey,
);
} else {
console.error(
'An empty string ("") was passed to the %s attribute. ' +
'To fix this, either do not render the element at all ' +
'or pass null to %s instead of an empty string.',
propKey,
propKey,
);
}
if (
value === '' &&
// <a href=""> is fine for "reload" links.
!(tag === 'a' && propKey === 'href') &&
!(tag === 'object' && propKey === 'data')
) {
if (__DEV__) {
if (propKey === 'src') {
console.error(
'An empty string ("") was passed to the %s attribute. ' +
'This may cause the browser to download the whole page again over the network. ' +
'To fix this, either do not render the element at all ' +
'or pass null to %s instead of an empty string.',
propKey,
propKey,
);
} else {
console.error(
'An empty string ("") was passed to the %s attribute. ' +
'To fix this, either do not render the element at all ' +
'or pass null to %s instead of an empty string.',
propKey,
propKey,
);
}
hydrateSanitizedAttribute(
domElement,
propKey,
propKey,
null,
extraAttributes,
serverDifferences,
);
continue;
}
hydrateSanitizedAttribute(
domElement,
propKey,
propKey,
null,
extraAttributes,
serverDifferences,
);
continue;
} else {
hydrateSanitizedAttribute(
domElement,
propKey,
propKey,
value,
extraAttributes,
serverDifferences,
);
continue;
}
hydrateSanitizedAttribute(
domElement,
propKey,
propKey,
value,
extraAttributes,
serverDifferences,
);
continue;
case 'action':
case 'formAction': {
const serverValue = domElement.getAttribute(propKey);
packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
Vendored
+32 -43
View File
@@ -27,10 +27,7 @@ import {
import {Children} from 'react';
import {
enableFilterEmptyStringAttributesDOM,
enableFizzExternalRuntime,
} from 'shared/ReactFeatureFlags';
import {enableFizzExternalRuntime} from 'shared/ReactFeatureFlags';
import type {
Destination,
@@ -1210,30 +1207,28 @@ function pushAttribute(
}
case 'src':
case 'href': {
if (enableFilterEmptyStringAttributesDOM) {
if (value === '') {
if (__DEV__) {
if (name === 'src') {
console.error(
'An empty string ("") was passed to the %s attribute. ' +
'This may cause the browser to download the whole page again over the network. ' +
'To fix this, either do not render the element at all ' +
'or pass null to %s instead of an empty string.',
name,
name,
);
} else {
console.error(
'An empty string ("") was passed to the %s attribute. ' +
'To fix this, either do not render the element at all ' +
'or pass null to %s instead of an empty string.',
name,
name,
);
}
if (value === '') {
if (__DEV__) {
if (name === 'src') {
console.error(
'An empty string ("") was passed to the %s attribute. ' +
'This may cause the browser to download the whole page again over the network. ' +
'To fix this, either do not render the element at all ' +
'or pass null to %s instead of an empty string.',
name,
name,
);
} else {
console.error(
'An empty string ("") was passed to the %s attribute. ' +
'To fix this, either do not render the element at all ' +
'or pass null to %s instead of an empty string.',
name,
name,
);
}
return;
}
return;
}
}
// Fall through to the last case which shouldn't remove empty strings.
@@ -1633,19 +1628,17 @@ function pushStartObject(
checkAttributeStringCoercion(propValue, 'data');
}
const sanitizedValue = sanitizeURL('' + propValue);
if (enableFilterEmptyStringAttributesDOM) {
if (sanitizedValue === '') {
if (__DEV__) {
console.error(
'An empty string ("") was passed to the %s attribute. ' +
'To fix this, either do not render the element at all ' +
'or pass null to %s instead of an empty string.',
propKey,
propKey,
);
}
break;
if (sanitizedValue === '') {
if (__DEV__) {
console.error(
'An empty string ("") was passed to the %s attribute. ' +
'To fix this, either do not render the element at all ' +
'or pass null to %s instead of an empty string.',
propKey,
propKey,
);
}
break;
}
target.push(
attributeSeparator,
@@ -3615,11 +3608,7 @@ export function pushStartInstance(
// Fast track very common tags
break;
case 'a':
if (enableFilterEmptyStringAttributesDOM) {
return pushStartAnchor(target, props);
} else {
break;
}
return pushStartAnchor(target, props);
case 'g':
case 'p':
case 'li':
packages/react-dom/src/__tests__/ReactDOMComponent-test.js
Vendored
+121 -123
View File
@@ -587,133 +587,131 @@ describe('ReactDOMComponent', () => {
expect(node.hasAttribute('data-foo')).toBe(false);
});
if (ReactFeatureFlags.enableFilterEmptyStringAttributesDOM) {
it('should not add an empty src attribute', async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(<img src="" />);
});
}).toErrorDev(
'An empty string ("") was passed to the src attribute. ' +
'This may cause the browser to download the whole page again over the network. ' +
'To fix this, either do not render the element at all ' +
'or pass null to src instead of an empty string.',
it('should not add an empty src attribute', async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(<img src="" />);
});
}).toErrorDev(
'An empty string ("") was passed to the src attribute. ' +
'This may cause the browser to download the whole page again over the network. ' +
'To fix this, either do not render the element at all ' +
'or pass null to src instead of an empty string.',
);
const node = container.firstChild;
expect(node.hasAttribute('src')).toBe(false);
await act(() => {
root.render(<img src="abc" />);
});
expect(node.hasAttribute('src')).toBe(true);
await expect(async () => {
await act(() => {
root.render(<img src="" />);
});
}).toErrorDev(
'An empty string ("") was passed to the src attribute. ' +
'This may cause the browser to download the whole page again over the network. ' +
'To fix this, either do not render the element at all ' +
'or pass null to src instead of an empty string.',
);
expect(node.hasAttribute('src')).toBe(false);
});
it('should not add an empty href attribute', async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(<link href="" />);
});
}).toErrorDev(
'An empty string ("") was passed to the href attribute. ' +
'To fix this, either do not render the element at all ' +
'or pass null to href instead of an empty string.',
);
const node = container.firstChild;
expect(node.hasAttribute('href')).toBe(false);
await act(() => {
root.render(<link href="abc" />);
});
expect(node.hasAttribute('href')).toBe(true);
await expect(async () => {
await act(() => {
root.render(<link href="" />);
});
}).toErrorDev(
'An empty string ("") was passed to the href attribute. ' +
'To fix this, either do not render the element at all ' +
'or pass null to href instead of an empty string.',
);
expect(node.hasAttribute('href')).toBe(false);
});
it('should allow an empty href attribute on anchors', async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(<a href="" />);
});
const node = container.firstChild;
expect(node.getAttribute('href')).toBe('');
});
it('should allow an empty action attribute', async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(<form action="" />);
});
const node = container.firstChild;
expect(node.getAttribute('action')).toBe('');
await act(() => {
root.render(<form action="abc" />);
});
expect(node.hasAttribute('action')).toBe(true);
await act(() => {
root.render(<form action="" />);
});
expect(node.getAttribute('action')).toBe('');
});
it('allows empty string of a formAction to override the default of a parent', async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(
<form action="hello">
<button formAction="" />,
</form>,
);
const node = container.firstChild;
expect(node.hasAttribute('src')).toBe(false);
});
const node = container.firstChild.firstChild;
expect(node.hasAttribute('formaction')).toBe(true);
expect(node.getAttribute('formaction')).toBe('');
});
await act(() => {
root.render(<img src="abc" />);
});
expect(node.hasAttribute('src')).toBe(true);
await expect(async () => {
await act(() => {
root.render(<img src="" />);
});
}).toErrorDev(
'An empty string ("") was passed to the src attribute. ' +
'This may cause the browser to download the whole page again over the network. ' +
'To fix this, either do not render the element at all ' +
'or pass null to src instead of an empty string.',
it('should not filter attributes for custom elements', async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(
<some-custom-element action="" formAction="" href="" src="" />,
);
expect(node.hasAttribute('src')).toBe(false);
});
it('should not add an empty href attribute', async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await expect(async () => {
await act(() => {
root.render(<link href="" />);
});
}).toErrorDev(
'An empty string ("") was passed to the href attribute. ' +
'To fix this, either do not render the element at all ' +
'or pass null to href instead of an empty string.',
);
const node = container.firstChild;
expect(node.hasAttribute('href')).toBe(false);
await act(() => {
root.render(<link href="abc" />);
});
expect(node.hasAttribute('href')).toBe(true);
await expect(async () => {
await act(() => {
root.render(<link href="" />);
});
}).toErrorDev(
'An empty string ("") was passed to the href attribute. ' +
'To fix this, either do not render the element at all ' +
'or pass null to href instead of an empty string.',
);
expect(node.hasAttribute('href')).toBe(false);
});
it('should allow an empty href attribute on anchors', async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(<a href="" />);
});
const node = container.firstChild;
expect(node.getAttribute('href')).toBe('');
});
it('should allow an empty action attribute', async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(<form action="" />);
});
const node = container.firstChild;
expect(node.getAttribute('action')).toBe('');
await act(() => {
root.render(<form action="abc" />);
});
expect(node.hasAttribute('action')).toBe(true);
await act(() => {
root.render(<form action="" />);
});
expect(node.getAttribute('action')).toBe('');
});
it('allows empty string of a formAction to override the default of a parent', async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(
<form action="hello">
<button formAction="" />,
</form>,
);
});
const node = container.firstChild.firstChild;
expect(node.hasAttribute('formaction')).toBe(true);
expect(node.getAttribute('formaction')).toBe('');
});
it('should not filter attributes for custom elements', async () => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(
<some-custom-element action="" formAction="" href="" src="" />,
);
});
const node = container.firstChild;
expect(node.hasAttribute('action')).toBe(true);
expect(node.hasAttribute('formAction')).toBe(true);
expect(node.hasAttribute('href')).toBe(true);
expect(node.hasAttribute('src')).toBe(true);
});
}
const node = container.firstChild;
expect(node.hasAttribute('action')).toBe(true);
expect(node.hasAttribute('formAction')).toBe(true);
expect(node.hasAttribute('href')).toBe(true);
expect(node.hasAttribute('src')).toBe(true);
});
it('should apply React-specific aliases to HTML elements', async () => {
const container = document.createElement('div');
packages/react-dom/src/__tests__/ReactDOMFloat-test.js
Vendored
+1 -3
View File
@@ -7492,9 +7492,7 @@ body {
});
}).toErrorDev(
[
gate(flags => flags.enableFilterEmptyStringAttributesDOM)
? 'An empty string ("") was passed to the href attribute. To fix this, either do not render the element at all or pass null to href instead of an empty string.'
: undefined,
'An empty string ("") was passed to the href attribute. To fix this, either do not render the element at all or pass null to href instead of an empty string.',
'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and expected the `href` prop to be a non-empty string but ecountered `undefined` instead. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop ensure there is a non-empty string `href` prop as well, otherwise remove the `precedence` prop.',
'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and expected the `href` prop to be a non-empty string but ecountered an empty string instead. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop ensure there is a non-empty string `href` prop as well, otherwise remove the `precedence` prop.',
'React encountered a `<link rel="stylesheet" .../>` with a `precedence` prop and `onLoad` and `onError` props. The presence of loading and error handlers indicates an intent to manage the stylesheet loading state from your from your Component code and React will not hoist or deduplicate this stylesheet. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop remove the `onLoad` and `onError` props, otherwise remove the `precedence` prop.',
packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
Vendored
+4 -12
View File
@@ -11,7 +11,6 @@
'use strict';
const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
const ReactFeatureFlags = require('shared/ReactFeatureFlags');
let React;
let ReactDOM;
@@ -54,13 +53,8 @@ describe('ReactDOMServerIntegration', () => {
});
itRenders('empty src on img', async render => {
const e = await render(
<img src="" />,
ReactFeatureFlags.enableFilterEmptyStringAttributesDOM ? 1 : 0,
);
expect(e.getAttribute('src')).toBe(
ReactFeatureFlags.enableFilterEmptyStringAttributesDOM ? null : '',
);
const e = await render(<img src="" />, 1);
expect(e.getAttribute('src')).toBe(null);
});
itRenders('empty href on anchor', async render => {
@@ -78,11 +72,9 @@ describe('ReactDOMServerIntegration', () => {
// errors during hydration.
// So we use a <div> instead.
<div href="" />,
ReactFeatureFlags.enableFilterEmptyStringAttributesDOM ? 1 : 0,
);
expect(e.getAttribute('href')).toBe(
ReactFeatureFlags.enableFilterEmptyStringAttributesDOM ? null : '',
1,
);
expect(e.getAttribute('href')).toBe(null);
});
itRenders('no string prop with true value', async render => {
packages/shared/ReactFeatureFlags.js
-5
View File
@@ -201,11 +201,6 @@ export const disableLegacyContextForFunctionComponents = true;
// TODO: clean up legacy <StrictMode /> once tests pass WWW.
export const useModernStrictMode = true;
// Filter certain DOM attributes (e.g. src, href) if their values are empty
// strings. This prevents e.g. <img src=""> from making an unnecessary HTTP
// request for certain browsers.
export const enableFilterEmptyStringAttributesDOM = true;
// Enable the moveBefore() alternative to insertBefore(). This preserves states of moves.
export const enableMoveBefore = false;
packages/shared/forks/ReactFeatureFlags.native-fb.js
-1
View File
@@ -50,7 +50,6 @@ export const enableCreateEventHandleAPI = false;
export const enableDebugTracing = false;
export const enableDeferRootSchedulingToMicrotask = true;
export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
export const enableFilterEmptyStringAttributesDOM = true;
export const enableMoveBefore = true;
export const enableFizzExternalRuntime = true;
export const enableFlightReadableStream = true;
packages/shared/forks/ReactFeatureFlags.native-oss.js
-1
View File
@@ -38,7 +38,6 @@ export const enableDebugTracing = false;
export const enableDeferRootSchedulingToMicrotask = true;
export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
export const enableFabricCompleteRootInCommitPhase = false;
export const enableFilterEmptyStringAttributesDOM = true;
export const enableMoveBefore = true;
export const enableFizzExternalRuntime = true;
export const enableFlightReadableStream = true;
packages/shared/forks/ReactFeatureFlags.test-renderer.js
-1
View File
@@ -41,7 +41,6 @@ export const enableNoCloningMemoCache = false;
export const enableUseEffectEventHook = false;
export const favorSafetyOverHydrationPerf = true;
export const enableLegacyFBSupport = false;
export const enableFilterEmptyStringAttributesDOM = true;
export const enableMoveBefore = false;
export const enableGetInspectorDataForInstanceInProduction = false;
export const enableFabricCompleteRootInCommitPhase = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
-1
View File
@@ -29,7 +29,6 @@ export const enableCreateEventHandleAPI = false;
export const enableDebugTracing = false;
export const enableDeferRootSchedulingToMicrotask = true;
export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
export const enableFilterEmptyStringAttributesDOM = true;
export const enableMoveBefore = false;
export const enableFizzExternalRuntime = true;
export const enableFlightReadableStream = true;
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
-1
View File
@@ -43,7 +43,6 @@ export const enableNoCloningMemoCache = false;
export const enableUseEffectEventHook = false;
export const favorSafetyOverHydrationPerf = true;
export const enableLegacyFBSupport = false;
export const enableFilterEmptyStringAttributesDOM = true;
export const enableMoveBefore = false;
export const enableGetInspectorDataForInstanceInProduction = false;
export const enableRenderableContext = false;
packages/shared/forks/ReactFeatureFlags.www.js
-1
View File
@@ -56,7 +56,6 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
export const enableCPUSuspense = true;
export const enableUseMemoCacheHook = true;
export const enableUseEffectEventHook = true;
export const enableFilterEmptyStringAttributesDOM = true;
export const enableMoveBefore = false;
export const disableInputAttributeSyncing = false;
export const enableLegacyFBSupport = true;