react-datocms - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/Image/index.d.ts

@@ -5,7 +5,9 @@ import React from "react";
     base64?: string | null;
-    height: number;
-    sizes: string;
-    src: string;
-    srcSet: string;
+    height?: number | null;
     width: number;
+    sizes?: string | null;
+    src?: string | null;
+    srcSet?: string | null;
+    webpSrcSet?: string | null;
+    bgColor?: string | null;
     alt?: string | null;
@@ -17,7 +19,9 @@ title?: string | null;
     className?: string;
+    pictureClassName?: string;
     fadeInDuration?: number;
     intersectionTreshold?: number;
     intersectionMargin?: string;
+    lazyLoad?: boolean;
 };
 export declare const Image: React.FC<ImagePropTypes>;
 export {};

dist/Image/index.js

@@ -12,3 +12,27 @@ "use strict";
 const react_intersection_observer_1 = require("react-intersection-observer");
-exports.Image = function ({ className, fadeInDuration, intersectionTreshold, intersectionMargin, data: { base64, width, aspectRatio, srcSet, sizes, alt, title, src } }) {
+const imageAddStrategy = ({ lazyLoad, isSsr, isIntersectionObserverAvailable, inView, loaded }) => {
+    if (!lazyLoad) {
+        return true;
+    }
+    if (isSsr) {
+        return false;
+    }
+    if (isIntersectionObserverAvailable) {
+        return inView || loaded;
+    }
+    return true;
+};
+const imageShowStrategy = ({ lazyLoad, isSsr, isIntersectionObserverAvailable, loaded }) => {
+    if (!lazyLoad) {
+        return true;
+    }
+    if (isSsr) {
+        return false;
+    }
+    if (isIntersectionObserverAvailable) {
+        return loaded;
+    }
+    return true;
+};
+exports.Image = function ({ className, fadeInDuration, intersectionTreshold, intersectionMargin, pictureClassName, lazyLoad = true, data }) {
     const [loaded, setLoaded] = react_1.useState(false);
@@ -21,29 +45,43 @@ const handleLoad = react_1.useCallback(() => {
         rootMargin: intersectionMargin || "0px 0px 0px 0px",
-        triggerOnce: true,
+        triggerOnce: true
     });
-    const isIntersectionObserverAvailable = typeof window !== 'undefined' ?
-        !!window.IntersectionObserver :
-        false;
+    const isSsr = typeof window === "undefined";
+    const isIntersectionObserverAvailable = isSsr
+        ? false
+        : !!window.IntersectionObserver;
+    const absolutePositioning = {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: "100%"
+    };
+    const addImage = imageAddStrategy({ lazyLoad, isSsr, isIntersectionObserverAvailable, inView, loaded });
+    const showImage = imageShowStrategy({ lazyLoad, isSsr, isIntersectionObserverAvailable, inView, loaded });
+    const webpSource = data.webpSrcSet && (react_1.default.createElement("source", { srcSet: data.webpSrcSet, sizes: data.sizes, type: "image/webp" }));
+    const regularSource = data.srcSet && (react_1.default.createElement("source", { srcSet: data.srcSet, sizes: data.sizes }));
+    const placeholder = react_1.default.createElement("div", { style: {
+            paddingTop: `${100.0 / data.aspectRatio}%`,
+            backgroundImage: data.base64 ? `url(${data.base64})` : null,
+            backgroundColor: data.bgColor,
+            backgroundSize: "cover"
+        } });
     return (react_1.default.createElement("div", { ref: ref, className: className, style: {
             position: "relative",
+            display: "block",
             overflow: "hidden",
-            display: "block",
-            maxWidth: `${width}px`
+            maxWidth: `${data.width}px`,
         } },
-        react_1.default.createElement("div", { style: {
-                paddingTop: `${100.0 / aspectRatio}%`,
-                backgroundImage: base64 ? `url(${base64})` : null,
-                backgroundSize: "cover"
-            } }),
-        (inView || loaded) && (react_1.default.createElement("img", { style: {
-                position: "absolute",
-                left: 0,
-                top: 0,
-                width: "100%",
-                opacity: loaded ? 1 : 0,
-                transition: (!fadeInDuration || fadeInDuration > 0)
+        placeholder,
+        addImage && (react_1.default.createElement("picture", { className: pictureClassName, style: Object.assign(Object.assign({}, absolutePositioning), { opacity: showImage ? 1 : 0, transition: !fadeInDuration || fadeInDuration > 0
                     ? `opacity ${fadeInDuration || 500}ms`
-                    : null
-            }, srcSet: srcSet, sizes: sizes, src: src, alt: alt, title: title, onLoad: handleLoad }))));
+                    : null }) },
+            webpSource,
+            regularSource,
+            data.src && (react_1.default.createElement("img", { src: data.src, alt: data.alt, title: data.title, onLoad: handleLoad })))),
+        react_1.default.createElement("noscript", null,
+            react_1.default.createElement("picture", { className: pictureClassName, style: absolutePositioning },
+                webpSource,
+                regularSource,
+                data.src && react_1.default.createElement("img", { src: data.src, alt: data.alt, title: data.title })))));
 };
 //# sourceMappingURL=index.js.map

dist/Seo/index.d.ts

@@ -7,3 +7,3 @@ /// <reference types="react" />
     };
-    tag: "meta";
+    tag: string;
     content: null;
@@ -16,3 +16,3 @@ };
     };
-    tag: "meta";
+    tag: string;
     content: null;
@@ -22,3 +22,3 @@ };
     attributes: null;
-    tag: "title";
+    tag: string;
     content: string;
@@ -25,0 +25,0 @@ };

dist/Seo/index.js

@@ -8,4 +8,4 @@ "use strict";
 exports.renderMetaTags = function (data) {
-    return data.map(({ tag: Tag, attributes, content }) => {
-        let key = [Tag];
+    return data.map(({ tag, attributes, content }) => {
+        let key = [tag];
         if (attributes && "property" in attributes) {
@@ -17,2 +17,3 @@ key.push(attributes.property);
         }
+        const Tag = tag;
         return (react_1.default.createElement(Tag, Object.assign({ key: key.join("-") }, attributes), content));
@@ -19,0 +20,0 @@ });

package.json

 {
   "name": "react-datocms",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "dist/index.js",
@@ -16,2 +16,3 @@ "types": "dist/index.d.ts",
     "@types/react": "^16.9.13",
+    "@types/styled-jsx": "^2.2.8",
     "doctoc": "^1.4.0",
@@ -18,0 +19,0 @@ "enzyme": "^3.10.0",

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24695

increased by15.16%

Lines of code

296

increased by17%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

17

increased by6.25%

No dependency changes