react-datocms - npm Package Compare versions

Comparing version 4.0.14 to 4.0.15

dist/cjs/Image/index.js

@@ -45,2 +45,16 @@ "use strict";
     : !!window.IntersectionObserver;
+function fetchPriorityProp(fetchPriority) {
+    var _a = react_1.version.split('.'), majorStr = _a[0], minorStr = _a[1];
+    var major = parseInt(majorStr, 10);
+    var minor = parseInt(minorStr, 10);
+    if (major > 18 || (major === 18 && minor >= 3)) {
+        // In React 18.3.0 or newer, we must use camelCase
+        // prop to avoid "Warning: Invalid DOM property".
+        // See https://github.com/facebook/react/pull/25927
+        return { fetchPriority: fetchPriority };
+    }
+    // In React 18.2.0 or older, we must use lowercase prop
+    // to avoid "Warning: Invalid DOM property".
+    return { fetchpriority: fetchPriority };
+}
 var imageAddStrategy = function (_a) {
@@ -175,3 +189,3 @@ var lazyLoad = _a.lazyLoad, inView = _a.inView, loaded = _a.loaded;
             regularSource,
-            data.src && (react_1["default"].createElement("img", { ref: imageRef, src: data.src, alt: (_h = data.alt) !== null && _h !== void 0 ? _h : '', title: (_j = data.title) !== null && _j !== void 0 ? _j : undefined, onLoad: handleLoad, fetchPriority: priority ? 'high' : undefined, className: pictureClassName, style: __assign(__assign(__assign({ opacity: showImage ? 1 : 0, transition: transition }, absolutePositioning), { objectFit: objectFit, objectPosition: objectPosition }), pictureStyle) })))),
+            data.src && (react_1["default"].createElement("img", __assign({ ref: imageRef, src: data.src, alt: (_h = data.alt) !== null && _h !== void 0 ? _h : '', title: (_j = data.title) !== null && _j !== void 0 ? _j : undefined, onLoad: handleLoad }, fetchPriorityProp(priority ? 'high' : undefined), { className: pictureClassName, style: __assign(__assign(__assign({ opacity: showImage ? 1 : 0, transition: transition }, absolutePositioning), { objectFit: objectFit, objectPosition: objectPosition }), pictureStyle) }))))),
         react_1["default"].createElement("noscript", null,
@@ -181,4 +195,4 @@ react_1["default"].createElement("picture", null,
                 regularSource,
-                data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_k = data.alt) !== null && _k !== void 0 ? _k : '', title: (_l = data.title) !== null && _l !== void 0 ? _l : undefined, className: pictureClassName, style: __assign(__assign(__assign({}, absolutePositioning), { objectFit: objectFit, objectPosition: objectPosition }), pictureStyle), loading: lazyLoad ? 'lazy' : undefined, fetchPriority: priority ? 'high' : undefined }))))));
+                data.src && (react_1["default"].createElement("img", __assign({ src: data.src, alt: (_k = data.alt) !== null && _k !== void 0 ? _k : '', title: (_l = data.title) !== null && _l !== void 0 ? _l : undefined, className: pictureClassName, style: __assign(__assign(__assign({}, absolutePositioning), { objectFit: objectFit, objectPosition: objectPosition }), pictureStyle), loading: lazyLoad ? 'lazy' : undefined }, fetchPriorityProp(priority ? 'high' : undefined))))))));
 });
 //# sourceMappingURL=index.js.map

dist/esm/Image/index.js

@@ -12,3 +12,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { useState, forwardRef, useCallback, useRef, useEffect, } from 'react';
+import React, { useState, forwardRef, useCallback, useRef, useEffect, version, } from 'react';
 import { useInView } from './useInView';
@@ -20,2 +20,16 @@ import { encode } from 'universal-base64';
     : !!window.IntersectionObserver;
+function fetchPriorityProp(fetchPriority) {
+    var _a = version.split('.'), majorStr = _a[0], minorStr = _a[1];
+    var major = parseInt(majorStr, 10);
+    var minor = parseInt(minorStr, 10);
+    if (major > 18 || (major === 18 && minor >= 3)) {
+        // In React 18.3.0 or newer, we must use camelCase
+        // prop to avoid "Warning: Invalid DOM property".
+        // See https://github.com/facebook/react/pull/25927
+        return { fetchPriority: fetchPriority };
+    }
+    // In React 18.2.0 or older, we must use lowercase prop
+    // to avoid "Warning: Invalid DOM property".
+    return { fetchpriority: fetchPriority };
+}
 var imageAddStrategy = function (_a) {
@@ -150,3 +164,3 @@ var lazyLoad = _a.lazyLoad, inView = _a.inView, loaded = _a.loaded;
             regularSource,
-            data.src && (React.createElement("img", { ref: imageRef, src: data.src, alt: (_h = data.alt) !== null && _h !== void 0 ? _h : '', title: (_j = data.title) !== null && _j !== void 0 ? _j : undefined, onLoad: handleLoad, fetchPriority: priority ? 'high' : undefined, className: pictureClassName, style: __assign(__assign(__assign({ opacity: showImage ? 1 : 0, transition: transition }, absolutePositioning), { objectFit: objectFit, objectPosition: objectPosition }), pictureStyle) })))),
+            data.src && (React.createElement("img", __assign({ ref: imageRef, src: data.src, alt: (_h = data.alt) !== null && _h !== void 0 ? _h : '', title: (_j = data.title) !== null && _j !== void 0 ? _j : undefined, onLoad: handleLoad }, fetchPriorityProp(priority ? 'high' : undefined), { className: pictureClassName, style: __assign(__assign(__assign({ opacity: showImage ? 1 : 0, transition: transition }, absolutePositioning), { objectFit: objectFit, objectPosition: objectPosition }), pictureStyle) }))))),
         React.createElement("noscript", null,
@@ -156,4 +170,4 @@ React.createElement("picture", null,
                 regularSource,
-                data.src && (React.createElement("img", { src: data.src, alt: (_k = data.alt) !== null && _k !== void 0 ? _k : '', title: (_l = data.title) !== null && _l !== void 0 ? _l : undefined, className: pictureClassName, style: __assign(__assign(__assign({}, absolutePositioning), { objectFit: objectFit, objectPosition: objectPosition }), pictureStyle), loading: lazyLoad ? 'lazy' : undefined, fetchPriority: priority ? 'high' : undefined }))))));
+                data.src && (React.createElement("img", __assign({ src: data.src, alt: (_k = data.alt) !== null && _k !== void 0 ? _k : '', title: (_l = data.title) !== null && _l !== void 0 ? _l : undefined, className: pictureClassName, style: __assign(__assign(__assign({}, absolutePositioning), { objectFit: objectFit, objectPosition: objectPosition }), pictureStyle), loading: lazyLoad ? 'lazy' : undefined }, fetchPriorityProp(priority ? 'high' : undefined))))))));
 });
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-datocms",
-  "version": "4.0.14",
+  "version": "4.0.15",
   "types": "dist/types/index.d.ts",
@@ -5,0 +5,0 @@ "main": "dist/cjs/index.js",

No alert changes

Improved metrics

Total package byte prevSize

370857

increased by0.81%

Lines of code

5079

increased by0.89%

No dependency changes