Fix image related link prop warning with react 18 beta #31895
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
huozhi
changed the title
This comment has been minimized.
This comment has been minimized.
huozhi
requested review from
ijjk,
shuding,
styfle and
timneutkens
as code owners
This comment has been minimized.
This comment has been minimized.
Failing test suitesCommit: f90fd22 test/integration/react-18/test/index.test.js
Expand output● React 18 Support › Use legacy render › supported version of react in dev ● React 18 Support › Use legacy render › supported version of react in build ● React 18 Support › Use legacy render › suspense is not allowed in blocking rendering mode (prod) |
This comment has been minimized.
This comment has been minimized.
ijjk
reviewed
Nov 30, 2021
huozhi
force-pushed
the
fix/camel-case-prop
branch
from
fd2c120
to
d0e407c
Compare
This comment has been minimized.
This comment has been minimized.
ijjk
approved these changes
Nov 30, 2021
Stats from current PRDefault Build (Increase detected
|
| vercel/next.js canary | huozhi/next.js fix/camel-case-prop | Change | |
|---|---|---|---|
| buildDuration | 20.7s | 21.3s | |
| buildDurationCached | 3.9s | 3.9s | |
| nodeModulesSize | 347 MB | 347 MB |
Page Load Tests Overall decrease ⚠️
| vercel/next.js canary | huozhi/next.js fix/camel-case-prop | Change | |
|---|---|---|---|
| / failed reqs | 0 | 0 | ✓ |
| / total time (seconds) | 3.394 | 3.42 | |
| / avg req/sec | 736.58 | 730.91 | |
| /error-in-render failed reqs | 0 | 0 | ✓ |
| /error-in-render total time (seconds) | 1.574 | 1.602 | |
| /error-in-render avg req/sec | 1588.31 | 1560.07 |
Client Bundles (main, webpack, commons)
| vercel/next.js canary | huozhi/next.js fix/camel-case-prop | Change | |
|---|---|---|---|
| 450.HASH.js gzip | 179 B | 179 B | ✓ |
| framework-HASH.js gzip | 42.2 kB | 42.2 kB | ✓ |
| main-HASH.js gzip | 28.4 kB | 28.4 kB | ✓ |
| webpack-HASH.js gzip | 1.45 kB | 1.45 kB | ✓ |
| Overall change | 72.3 kB | 72.3 kB | ✓ |
Legacy Client Bundles (polyfills)
| vercel/next.js canary | huozhi/next.js fix/camel-case-prop | Change | |
|---|---|---|---|
| polyfills-HASH.js gzip | 31 kB | 31 kB | ✓ |
| Overall change | 31 kB | 31 kB | ✓ |
Client Pages Overall increase ⚠️
| vercel/next.js canary | huozhi/next.js fix/camel-case-prop | Change | |
|---|---|---|---|
| _app-HASH.js gzip | 1.37 kB | 1.37 kB | ✓ |
| _error-HASH.js gzip | 194 B | 194 B | ✓ |
| amp-HASH.js gzip | 312 B | 312 B | ✓ |
| css-HASH.js gzip | 326 B | 326 B | ✓ |
| dynamic-HASH.js gzip | 2.38 kB | 2.38 kB | ✓ |
| head-HASH.js gzip | 350 B | 350 B | ✓ |
| hooks-HASH.js gzip | 635 B | 635 B | ✓ |
| image-HASH.js gzip | 4.45 kB | 4.49 kB | |
| index-HASH.js gzip | 263 B | 263 B | ✓ |
| link-HASH.js gzip | 1.87 kB | 1.87 kB | ✓ |
| routerDirect..HASH.js gzip | 321 B | 321 B | ✓ |
| script-HASH.js gzip | 383 B | 383 B | ✓ |
| withRouter-HASH.js gzip | 318 B | 318 B | ✓ |
| 85e02e95b279..7e3.css gzip | 107 B | 107 B | ✓ |
| Overall change | 13.3 kB | 13.3 kB |
Client Build Manifests
| vercel/next.js canary | huozhi/next.js fix/camel-case-prop | Change | |
|---|---|---|---|
| _buildManifest.js gzip | 460 B | 460 B | ✓ |
| Overall change | 460 B | 460 B | ✓ |
Rendered Page Sizes
| vercel/next.js canary | huozhi/next.js fix/camel-case-prop | Change | |
|---|---|---|---|
| index.html gzip | 532 B | 532 B | ✓ |
| link.html gzip | 546 B | 546 B | ✓ |
| withRouter.html gzip | 527 B | 527 B | ✓ |
| Overall change | 1.6 kB | 1.6 kB | ✓ |
Diffs
Diff for _buildManifest.js
@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
],
"/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
"/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-ff60bc61acd2698b.js"],
- "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-91f7c5ff8695376c.js"],
+ "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-f207079640969086.js"],
"/link": ["static\u002Fchunks\u002Fpages\u002Flink-678af336607f5345.js"],
"/routerDirect": [
"static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"Diff for image-HASH.js
@@ -37,6 +37,19 @@
return arr2;
}
}
+ function _defineProperty(obj, key, value) {
+ if (key in obj) {
+ Object.defineProperty(obj, key, {
+ value: value,
+ enumerable: true,
+ configurable: true,
+ writable: true
+ });
+ } else {
+ obj[key] = value;
+ }
+ return obj;
+ }
function _iterableToArray(iter) {
if (
Symbol.iterator in Object(iter) ||
@@ -101,7 +114,7 @@
var _toBase64 = __webpack_require__(6978);
var _imageConfig = __webpack_require__(5809);
var _useIntersection = __webpack_require__(7190);
- function _defineProperty(obj, key, value) {
+ function _defineProperty1(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
@@ -137,7 +150,7 @@
);
}
ownKeys.forEach(function(key) {
- _defineProperty(target, key, source[key]);
+ _defineProperty1(target, key, source[key]);
});
};
for (var i = 1; i < arguments.length; i++) _loop(i);
@@ -403,6 +416,7 @@
img.onload = handleLoad;
}
}
+ var _obj;
function Image(_param) {
var src = _param.src,
sizes = _param.sizes,
@@ -624,6 +638,15 @@
if (false) {
var fullUrl;
}
+ var imageSrcSetPropName = "imagesrcset";
+ var imageSizesPropName = "imagesizes";
+ if (false) {
+ }
+ var linkProps =
+ ((_obj = {}), // Note: imagesrcset and imagesizes are not in the link element type with react 17.
+ _defineProperty(_obj, imageSrcSetPropName, imgAttributes.srcSet),
+ _defineProperty(_obj, imageSizesPropName, imgAttributes.sizes),
+ _obj);
return /*#__PURE__*/ _react.default.createElement(
"span",
{
@@ -711,20 +734,22 @@
/*#__PURE__*/ _react.default.createElement(
_head.default,
null,
- /*#__PURE__*/ _react.default.createElement("link", {
- key:
- "__nimg-" +
- imgAttributes.src +
- imgAttributes.srcSet +
- imgAttributes.sizes,
- rel: "preload",
- as: "image",
- href: imgAttributes.srcSet ? undefined : imgAttributes.src,
- // @ts-ignore: imagesrcset is not yet in the link element type.
- imagesrcset: imgAttributes.srcSet,
- // @ts-ignore: imagesizes is not yet in the link element type.
- imagesizes: imgAttributes.sizes
- })
+ /*#__PURE__*/ _react.default.createElement(
+ "link",
+ Object.assign(
+ {
+ key:
+ "__nimg-" +
+ imgAttributes.src +
+ imgAttributes.srcSet +
+ imgAttributes.sizes,
+ rel: "preload",
+ as: "image",
+ href: imgAttributes.srcSet ? undefined : imgAttributes.src
+ },
+ linkProps
+ )
+ )
)
: null
);Default Build with SWC (Increase detected ⚠️ )
General Overall increase ⚠️
| vercel/next.js canary | huozhi/next.js fix/camel-case-prop | Change | |
|---|---|---|---|
| buildDuration | 23.4s | 23.9s | |
| buildDurationCached | 4s | 3.9s | -131ms |
| nodeModulesSize | 347 MB | 347 MB |
Page Load Tests Overall decrease ⚠️
| vercel/next.js canary | huozhi/next.js fix/camel-case-prop | Change | |
|---|---|---|---|
| / failed reqs | 0 | 0 | ✓ |
| / total time (seconds) | 3.552 | 3.529 | -0.02 |
| / avg req/sec | 703.84 | 708.42 | +4.58 |
| /error-in-render failed reqs | 0 | 0 | ✓ |
| /error-in-render total time (seconds) | 1.606 | 1.693 | |
| /error-in-render avg req/sec | 1556.57 | 1476.28 |
Client Bundles (main, webpack, commons)
| vercel/next.js canary | huozhi/next.js fix/camel-case-prop | Change | |
|---|---|---|---|
| 450.HASH.js gzip | 179 B | 179 B | ✓ |
| framework-HASH.js gzip | 42.3 kB | 42.3 kB | ✓ |
| main-HASH.js gzip | 28.6 kB | 28.6 kB | ✓ |
| webpack-HASH.js gzip | 1.44 kB | 1.44 kB | ✓ |
| Overall change | 72.5 kB | 72.5 kB | ✓ |
Legacy Client Bundles (polyfills)
| vercel/next.js canary | huozhi/next.js fix/camel-case-prop | Change | |
|---|---|---|---|
| polyfills-HASH.js gzip | 31 kB | 31 kB | ✓ |
| Overall change | 31 kB | 31 kB | ✓ |
Client Pages Overall increase ⚠️
| vercel/next.js canary | huozhi/next.js fix/camel-case-prop | Change | |
|---|---|---|---|
| _app-HASH.js gzip | 1.35 kB | 1.35 kB | ✓ |
| _error-HASH.js gzip | 180 B | 180 B | ✓ |
| amp-HASH.js gzip | 305 B | 305 B | ✓ |
| css-HASH.js gzip | 321 B | 321 B | ✓ |
| dynamic-HASH.js gzip | 2.37 kB | 2.37 kB | ✓ |
| head-HASH.js gzip | 342 B | 342 B | ✓ |
| hooks-HASH.js gzip | 622 B | 622 B | ✓ |
| image-HASH.js gzip | 4.47 kB | 4.53 kB | |
| index-HASH.js gzip | 256 B | 256 B | ✓ |
| link-HASH.js gzip | 1.91 kB | 1.91 kB | ✓ |
| routerDirect..HASH.js gzip | 314 B | 314 B | ✓ |
| script-HASH.js gzip | 375 B | 375 B | ✓ |
| withRouter-HASH.js gzip | 309 B | 309 B | ✓ |
| 85e02e95b279..7e3.css gzip | 107 B | 107 B | ✓ |
| Overall change | 13.2 kB | 13.3 kB |
Client Build Manifests Overall decrease ✓
| vercel/next.js canary | huozhi/next.js fix/camel-case-prop | Change | |
|---|---|---|---|
| _buildManifest.js gzip | 459 B | 458 B | -1 B |
| Overall change | 459 B | 458 B | -1 B |
Rendered Page Sizes
| vercel/next.js canary | huozhi/next.js fix/camel-case-prop | Change | |
|---|---|---|---|
| index.html gzip | 533 B | 533 B | ✓ |
| link.html gzip | 545 B | 545 B | ✓ |
| withRouter.html gzip | 526 B | 526 B | ✓ |
| Overall change | 1.6 kB | 1.6 kB | ✓ |
Diffs
Diff for _buildManifest.js
@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
],
"/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
"/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-ff60bc61acd2698b.js"],
- "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-91f7c5ff8695376c.js"],
+ "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-f207079640969086.js"],
"/link": ["static\u002Fchunks\u002Fpages\u002Flink-678af336607f5345.js"],
"/routerDirect": [
"static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"Diff for image-HASH.js
@@ -37,6 +37,19 @@
return arr2;
}
}
+ function _defineProperty(obj, key, value) {
+ if (key in obj) {
+ Object.defineProperty(obj, key, {
+ value: value,
+ enumerable: true,
+ configurable: true,
+ writable: true
+ });
+ } else {
+ obj[key] = value;
+ }
+ return obj;
+ }
function _iterableToArray(iter) {
if (
Symbol.iterator in Object(iter) ||
@@ -101,7 +114,7 @@
var _toBase64 = __webpack_require__(6978);
var _imageConfig = __webpack_require__(5809);
var _useIntersection = __webpack_require__(7190);
- function _defineProperty(obj, key, value) {
+ function _defineProperty1(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
@@ -137,7 +150,7 @@
);
}
ownKeys.forEach(function(key) {
- _defineProperty(target, key, source[key]);
+ _defineProperty1(target, key, source[key]);
});
};
for (var i = 1; i < arguments.length; i++) _loop(i);
@@ -403,6 +416,7 @@
img.onload = handleLoad;
}
}
+ var _obj;
function Image(_param) {
var src = _param.src,
sizes = _param.sizes,
@@ -624,6 +638,15 @@
if (false) {
var fullUrl;
}
+ var imageSrcSetPropName = "imagesrcset";
+ var imageSizesPropName = "imagesizes";
+ if (false) {
+ }
+ var linkProps =
+ ((_obj = {}), // Note: imagesrcset and imagesizes are not in the link element type with react 17.
+ _defineProperty(_obj, imageSrcSetPropName, imgAttributes.srcSet),
+ _defineProperty(_obj, imageSizesPropName, imgAttributes.sizes),
+ _obj);
return /*#__PURE__*/ _react.default.createElement(
"span",
{
@@ -711,20 +734,22 @@
/*#__PURE__*/ _react.default.createElement(
_head.default,
null,
- /*#__PURE__*/ _react.default.createElement("link", {
- key:
- "__nimg-" +
- imgAttributes.src +
- imgAttributes.srcSet +
- imgAttributes.sizes,
- rel: "preload",
- as: "image",
- href: imgAttributes.srcSet ? undefined : imgAttributes.src,
- // @ts-ignore: imagesrcset is not yet in the link element type.
- imagesrcset: imgAttributes.srcSet,
- // @ts-ignore: imagesizes is not yet in the link element type.
- imagesizes: imgAttributes.sizes
- })
+ /*#__PURE__*/ _react.default.createElement(
+ "link",
+ Object.assign(
+ {
+ key:
+ "__nimg-" +
+ imgAttributes.src +
+ imgAttributes.srcSet +
+ imgAttributes.sizes,
+ rel: "preload",
+ as: "image",
+ href: imgAttributes.srcSet ? undefined : imgAttributes.src
+ },
+ linkProps
+ )
+ )
)
: null
);
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Bug
Fixes #31892
react 18: requires camelcase for those props
react 17: requires lowercase for those props
fixes #numbercontributing.mdUtils
yarn next-react-18 test/integration/any-react-18-app/withReact18