react-datocms - npm Package Compare versions

Comparing version 4.0.4 to 4.0.5

dist/cjs/Image/index.js

@@ -68,3 +68,3 @@ "use strict";
 var buildSrcSet = function (src, width, candidateMultipliers) {
-    if (!src || !width) {
+    if (!(src && width)) {
         return undefined;
@@ -97,3 +97,3 @@ }
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var className = _a.className, _m = _a.fadeInDuration, fadeInDuration = _m === void 0 ? 500 : _m, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _o = _a.lazyLoad, rawLazyLoad = _o === void 0 ? true : _o, style = _a.style, pictureStyle = _a.pictureStyle, _p = _a.layout, layout = _p === void 0 ? 'intrinsic' : _p, objectFit = _a.objectFit, objectPosition = _a.objectPosition, data = _a.data, onLoad = _a.onLoad, _q = _a.usePlaceholder, usePlaceholder = _q === void 0 ? true : _q, _r = _a.priority, priority = _r === void 0 ? false : _r, sizes = _a.sizes, _s = _a.srcSetCandidates, srcSetCandidates = _s === void 0 ? [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4] : _s;
+    var className = _a.className, _m = _a.fadeInDuration, fadeInDuration = _m === void 0 ? 500 : _m, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _o = _a.lazyLoad, rawLazyLoad = _o === void 0 ? true : _o, style = _a.style, pictureStyle = _a.pictureStyle, _p = _a.layout, layout = _p === void 0 ? 'intrinsic' : _p, objectFit = _a.objectFit, objectPosition = _a.objectPosition, data = _a.data, onLoad = _a.onLoad, _q = _a.usePlaceholder, usePlaceholder = _q === void 0 ? true : _q, _r = _a.priority, priority = _r === void 0 ? false : _r, sizes = _a.sizes, _s = _a.srcSetCandidates, srcSetCandidates = _s === void 0 ? [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4] : _s, placeholderClassName = _a.placeholderClassName, placeholderStyle = _a.placeholderStyle;
     var lazyLoad = priority ? false : rawLazyLoad;
@@ -123,4 +123,5 @@ var _t = (0, react_1.useState)(false), loaded = _t[0], setLoaded = _t[1];
         viewRef(_ref);
-        if (ref)
+        if (ref) {
             ref.current = _ref;
+        }
     }, [viewRef]);
@@ -147,8 +148,3 @@ var absolutePositioning = {
     var transition = fadeInDuration > 0 ? "opacity ".concat(fadeInDuration, "ms") : undefined;
-    var placeholder = usePlaceholder && (data.bgColor || data.base64) ? (react_1["default"].createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (_e = data.base64) !== null && _e !== void 0 ? _e : undefined, style: {
-            backgroundColor: (_f = data.bgColor) !== null && _f !== void 0 ? _f : undefined,
-            objectFit: objectFit,
-            objectPosition: objectPosition,
-            transition: transition,
-            opacity: showImage ? 0 : 1,
+    var placeholder = usePlaceholder && (data.bgColor || data.base64) ? (react_1["default"].createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (_e = data.base64) !== null && _e !== void 0 ? _e : undefined, className: placeholderClassName, style: __assign({ backgroundColor: (_f = data.bgColor) !== null && _f !== void 0 ? _f : undefined, objectFit: objectFit, objectPosition: objectPosition, transition: transition, opacity: showImage ? 0 : 1, 
             // During the opacity transition of the placeholder to the definitive version,
@@ -158,8 +154,3 @@ // hardware acceleration is triggered. This results in the browser trying to render the
             // so the edges overflow the container
-            position: 'absolute',
-            left: '-5%',
-            top: '-5%',
-            width: '110%',
-            height: '110%'
-        } })) : null;
+            position: 'absolute', left: '-5%', top: '-5%', width: '110%', height: '110%' }, placeholderStyle) })) : null;
     var width = data.width, aspectRatio = data.aspectRatio;
@@ -166,0 +157,0 @@ var height = (_g = data.height) !== null && _g !== void 0 ? _g : (aspectRatio ? width / aspectRatio : 0);

dist/cjs/Seo/__tests__/index.test.js

@@ -27,282 +27,282 @@ "use strict";
     {
-        "content": "Remix CMS - The easiest way to manage content with Remix",
-        "attributes": null,
-        "tag": "title"
+        content: 'Remix CMS - The easiest way to manage content with Remix',
+        attributes: null,
+        tag: 'title'
     },
     {
-        "content": null,
-        "attributes": {
-            "property": "og:title",
-            "content": "Remix CMS - The easiest way to manage content with Remix"
+        content: null,
+        attributes: {
+            property: 'og:title',
+            content: 'Remix CMS - The easiest way to manage content with Remix'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "name": "twitter:title",
-            "content": "Remix CMS - The easiest way to manage content with Remix"
+        content: null,
+        attributes: {
+            name: 'twitter:title',
+            content: 'Remix CMS - The easiest way to manage content with Remix'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "name": "description",
-            "content": "Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now."
+        content: null,
+        attributes: {
+            name: 'description',
+            content: 'Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now.'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "property": "og:description",
-            "content": "Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now."
+        content: null,
+        attributes: {
+            property: 'og:description',
+            content: 'Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now.'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "name": "twitter:description",
-            "content": "Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now."
+        content: null,
+        attributes: {
+            name: 'twitter:description',
+            content: 'Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now.'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "property": "og:image",
-            "content": "https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000"
+        content: null,
+        attributes: {
+            property: 'og:image',
+            content: 'https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "property": "og:image:width",
-            "content": "746"
+        content: null,
+        attributes: {
+            property: 'og:image:width',
+            content: '746'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "property": "og:image:height",
-            "content": "186"
+        content: null,
+        attributes: {
+            property: 'og:image:height',
+            content: '186'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "name": "twitter:image",
-            "content": "https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000"
+        content: null,
+        attributes: {
+            name: 'twitter:image',
+            content: 'https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "property": "og:locale",
-            "content": "en"
+        content: null,
+        attributes: {
+            property: 'og:locale',
+            content: 'en'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "property": "og:type",
-            "content": "article"
+        content: null,
+        attributes: {
+            property: 'og:type',
+            content: 'article'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "property": "og:site_name",
-            "content": "DatoCMS"
+        content: null,
+        attributes: {
+            property: 'og:site_name',
+            content: 'DatoCMS'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "property": "article:modified_time",
-            "content": "2022-01-18T14:02:47Z"
+        content: null,
+        attributes: {
+            property: 'article:modified_time',
+            content: '2022-01-18T14:02:47Z'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "name": "twitter:card",
-            "content": "summary_large_image"
+        content: null,
+        attributes: {
+            name: 'twitter:card',
+            content: 'summary_large_image'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "name": "twitter:site",
-            "content": "@datocms"
+        content: null,
+        attributes: {
+            name: 'twitter:site',
+            content: '@datocms'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "attributes": {
-            "sizes": "16x16",
-            "type": "image/png",
-            "rel": "icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=16&w=16"
+        attributes: {
+            sizes: '16x16',
+            type: 'image/png',
+            rel: 'icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=16&w=16'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "32x32",
-            "type": "image/png",
-            "rel": "icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=32&w=32"
+        attributes: {
+            sizes: '32x32',
+            type: 'image/png',
+            rel: 'icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=32&w=32'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "96x96",
-            "type": "image/png",
-            "rel": "icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=96&w=96"
+        attributes: {
+            sizes: '96x96',
+            type: 'image/png',
+            rel: 'icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=96&w=96'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "192x192",
-            "type": "image/png",
-            "rel": "icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=192&w=192"
+        attributes: {
+            sizes: '192x192',
+            type: 'image/png',
+            rel: 'icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=192&w=192'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "57x57",
-            "rel": "apple-touch-icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=57&w=57"
+        attributes: {
+            sizes: '57x57',
+            rel: 'apple-touch-icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=57&w=57'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "60x60",
-            "rel": "apple-touch-icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=60&w=60"
+        attributes: {
+            sizes: '60x60',
+            rel: 'apple-touch-icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=60&w=60'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "72x72",
-            "rel": "apple-touch-icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=72&w=72"
+        attributes: {
+            sizes: '72x72',
+            rel: 'apple-touch-icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=72&w=72'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "76x76",
-            "rel": "apple-touch-icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=76&w=76"
+        attributes: {
+            sizes: '76x76',
+            rel: 'apple-touch-icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=76&w=76'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "114x114",
-            "rel": "apple-touch-icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=114&w=114"
+        attributes: {
+            sizes: '114x114',
+            rel: 'apple-touch-icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=114&w=114'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "120x120",
-            "rel": "apple-touch-icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=120&w=120"
+        attributes: {
+            sizes: '120x120',
+            rel: 'apple-touch-icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=120&w=120'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "144x144",
-            "rel": "apple-touch-icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=144&w=144"
+        attributes: {
+            sizes: '144x144',
+            rel: 'apple-touch-icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=144&w=144'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "152x152",
-            "rel": "apple-touch-icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=152&w=152"
+        attributes: {
+            sizes: '152x152',
+            rel: 'apple-touch-icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=152&w=152'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "180x180",
-            "rel": "apple-touch-icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=180&w=180"
+        attributes: {
+            sizes: '180x180',
+            rel: 'apple-touch-icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=180&w=180'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "name": "msapplication-square70x70logo",
-            "content": "https://www.datocms-assets.com/205/1525789775-dato.png?h=70&w=70"
+        attributes: {
+            name: 'msapplication-square70x70logo',
+            content: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=70&w=70'
         },
-        "content": null,
-        "tag": "meta"
+        content: null,
+        tag: 'meta'
     },
     {
-        "attributes": {
-            "name": "msapplication-square150x150logo",
-            "content": "https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=150"
+        attributes: {
+            name: 'msapplication-square150x150logo',
+            content: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=150'
         },
-        "content": null,
-        "tag": "meta"
+        content: null,
+        tag: 'meta'
     },
     {
-        "attributes": {
-            "name": "msapplication-square310x310logo",
-            "content": "https://www.datocms-assets.com/205/1525789775-dato.png?h=310&w=310"
+        attributes: {
+            name: 'msapplication-square310x310logo',
+            content: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=310&w=310'
         },
-        "content": null,
-        "tag": "meta"
+        content: null,
+        tag: 'meta'
     },
     {
-        "attributes": {
-            "name": "msapplication-square310x150logo",
-            "content": "https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=310"
+        attributes: {
+            name: 'msapplication-square310x150logo',
+            content: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=310'
         },
-        "content": null,
-        "tag": "meta"
-    }
+        content: null,
+        tag: 'meta'
+    },
 ];
-describe("renderMetaTags", function () {
-    it("generates an array of meta tags", function () {
+describe('renderMetaTags', function () {
+    it('generates an array of meta tags', function () {
         var wrapper = (0, enzyme_1.shallow)(React.createElement("head", null, (0, __1.renderMetaTags)(metaTags)));
@@ -312,9 +312,9 @@ expect(wrapper).toMatchSnapshot();
 });
-describe("renderMetaTagsToString", function () {
-    it("generates an array of meta tags", function () {
+describe('renderMetaTagsToString', function () {
+    it('generates an array of meta tags', function () {
         expect((0, __1.renderMetaTagsToString)(metaTags)).toMatchSnapshot();
     });
 });
-describe("toRemixMeta", function () {
-    it("generates a meta descriptor", function () {
+describe('toRemixMeta', function () {
+    it('generates a meta descriptor', function () {
         expect((0, __1.toRemixMeta)(metaTags)).toMatchSnapshot();
@@ -321,0 +321,0 @@ });

dist/cjs/StructuredText/index.js

@@ -67,3 +67,3 @@ "use strict";
                 }
-                if (!(0, datocms_structured_text_utils_1.isStructuredText)(data) || !data.links) {
+                if (!((0, datocms_structured_text_utils_1.isStructuredText)(data) && data.links)) {
                     throw new datocms_structured_text_utils_1.RenderError("The document contains an 'itemLink' node, but the passed data prop is not a Structured Text GraphQL response, or data.links is not present!", node);
@@ -82,3 +82,3 @@ }
                 }
-                if (!(0, datocms_structured_text_utils_1.isStructuredText)(data) || !data.links) {
+                if (!((0, datocms_structured_text_utils_1.isStructuredText)(data) && data.links)) {
                     throw new datocms_structured_text_utils_1.RenderError("The document contains an 'itemLink' node, but the passed data prop is not a Structured Text GraphQL response, or data.links is not present!", node);
@@ -106,3 +106,3 @@ }
                 }
-                if (!(0, datocms_structured_text_utils_1.isStructuredText)(data) || !data.blocks) {
+                if (!((0, datocms_structured_text_utils_1.isStructuredText)(data) && data.blocks)) {
                     throw new datocms_structured_text_utils_1.RenderError("The document contains an 'block' node, but the passed data prop is not a Structured Text GraphQL response, or data.blocks is not present!", node);
@@ -109,0 +109,0 @@ }

dist/esm/Image/index.d.ts

@@ -34,2 +34,4 @@ import React, { CSSProperties } from 'react';
     pictureClassName?: string;
+    /** Additional CSS class for the placeholder image */
+    placeholderClassName?: string;
     /** Duration (in ms) of the fade-in transition effect upoad image loading */
@@ -49,2 +51,4 @@ fadeInDuration?: number;
     pictureStyle?: React.CSSProperties;
+    /** Additional CSS rules to add to the placeholder image */
+    placeholderStyle?: React.CSSProperties;
     /**
@@ -51,0 +55,0 @@ * The layout behavior of the image as the viewport changes size

dist/esm/Image/index.js

@@ -46,3 +46,3 @@ var __assign = (this && this.__assign) || function () {
 var buildSrcSet = function (src, width, candidateMultipliers) {
-    if (!src || !width) {
+    if (!(src && width)) {
         return undefined;
@@ -75,3 +75,3 @@ }
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var className = _a.className, _m = _a.fadeInDuration, fadeInDuration = _m === void 0 ? 500 : _m, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _o = _a.lazyLoad, rawLazyLoad = _o === void 0 ? true : _o, style = _a.style, pictureStyle = _a.pictureStyle, _p = _a.layout, layout = _p === void 0 ? 'intrinsic' : _p, objectFit = _a.objectFit, objectPosition = _a.objectPosition, data = _a.data, onLoad = _a.onLoad, _q = _a.usePlaceholder, usePlaceholder = _q === void 0 ? true : _q, _r = _a.priority, priority = _r === void 0 ? false : _r, sizes = _a.sizes, _s = _a.srcSetCandidates, srcSetCandidates = _s === void 0 ? [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4] : _s;
+    var className = _a.className, _m = _a.fadeInDuration, fadeInDuration = _m === void 0 ? 500 : _m, intersectionTreshold = _a.intersectionTreshold, intersectionThreshold = _a.intersectionThreshold, intersectionMargin = _a.intersectionMargin, pictureClassName = _a.pictureClassName, _o = _a.lazyLoad, rawLazyLoad = _o === void 0 ? true : _o, style = _a.style, pictureStyle = _a.pictureStyle, _p = _a.layout, layout = _p === void 0 ? 'intrinsic' : _p, objectFit = _a.objectFit, objectPosition = _a.objectPosition, data = _a.data, onLoad = _a.onLoad, _q = _a.usePlaceholder, usePlaceholder = _q === void 0 ? true : _q, _r = _a.priority, priority = _r === void 0 ? false : _r, sizes = _a.sizes, _s = _a.srcSetCandidates, srcSetCandidates = _s === void 0 ? [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4] : _s, placeholderClassName = _a.placeholderClassName, placeholderStyle = _a.placeholderStyle;
     var lazyLoad = priority ? false : rawLazyLoad;
@@ -101,4 +101,5 @@ var _t = useState(false), loaded = _t[0], setLoaded = _t[1];
         viewRef(_ref);
-        if (ref)
+        if (ref) {
             ref.current = _ref;
+        }
     }, [viewRef]);
@@ -125,8 +126,3 @@ var absolutePositioning = {
     var transition = fadeInDuration > 0 ? "opacity ".concat(fadeInDuration, "ms") : undefined;
-    var placeholder = usePlaceholder && (data.bgColor || data.base64) ? (React.createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (_e = data.base64) !== null && _e !== void 0 ? _e : undefined, style: {
-            backgroundColor: (_f = data.bgColor) !== null && _f !== void 0 ? _f : undefined,
-            objectFit: objectFit,
-            objectPosition: objectPosition,
-            transition: transition,
-            opacity: showImage ? 0 : 1,
+    var placeholder = usePlaceholder && (data.bgColor || data.base64) ? (React.createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (_e = data.base64) !== null && _e !== void 0 ? _e : undefined, className: placeholderClassName, style: __assign({ backgroundColor: (_f = data.bgColor) !== null && _f !== void 0 ? _f : undefined, objectFit: objectFit, objectPosition: objectPosition, transition: transition, opacity: showImage ? 0 : 1, 
             // During the opacity transition of the placeholder to the definitive version,
@@ -136,8 +132,3 @@ // hardware acceleration is triggered. This results in the browser trying to render the
             // so the edges overflow the container
-            position: 'absolute',
-            left: '-5%',
-            top: '-5%',
-            width: '110%',
-            height: '110%'
-        } })) : null;
+            position: 'absolute', left: '-5%', top: '-5%', width: '110%', height: '110%' }, placeholderStyle) })) : null;
     var width = data.width, aspectRatio = data.aspectRatio;
@@ -144,0 +135,0 @@ var height = (_g = data.height) !== null && _g !== void 0 ? _g : (aspectRatio ? width / aspectRatio : 0);

dist/esm/Seo/__tests__/index.test.js

@@ -1,286 +0,286 @@
-import * as React from "react";
-import { shallow } from "enzyme";
-import { renderMetaTags, renderMetaTagsToString, toRemixMeta } from "..";
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { renderMetaTags, renderMetaTagsToString, toRemixMeta } from '..';
 var metaTags = [
     {
-        "content": "Remix CMS - The easiest way to manage content with Remix",
-        "attributes": null,
-        "tag": "title"
+        content: 'Remix CMS - The easiest way to manage content with Remix',
+        attributes: null,
+        tag: 'title'
     },
     {
-        "content": null,
-        "attributes": {
-            "property": "og:title",
-            "content": "Remix CMS - The easiest way to manage content with Remix"
+        content: null,
+        attributes: {
+            property: 'og:title',
+            content: 'Remix CMS - The easiest way to manage content with Remix'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "name": "twitter:title",
-            "content": "Remix CMS - The easiest way to manage content with Remix"
+        content: null,
+        attributes: {
+            name: 'twitter:title',
+            content: 'Remix CMS - The easiest way to manage content with Remix'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "name": "description",
-            "content": "Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now."
+        content: null,
+        attributes: {
+            name: 'description',
+            content: 'Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now.'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "property": "og:description",
-            "content": "Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now."
+        content: null,
+        attributes: {
+            property: 'og:description',
+            content: 'Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now.'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "name": "twitter:description",
-            "content": "Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now."
+        content: null,
+        attributes: {
+            name: 'twitter:description',
+            content: 'Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now.'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "property": "og:image",
-            "content": "https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000"
+        content: null,
+        attributes: {
+            property: 'og:image',
+            content: 'https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "property": "og:image:width",
-            "content": "746"
+        content: null,
+        attributes: {
+            property: 'og:image:width',
+            content: '746'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "property": "og:image:height",
-            "content": "186"
+        content: null,
+        attributes: {
+            property: 'og:image:height',
+            content: '186'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "name": "twitter:image",
-            "content": "https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000"
+        content: null,
+        attributes: {
+            name: 'twitter:image',
+            content: 'https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "property": "og:locale",
-            "content": "en"
+        content: null,
+        attributes: {
+            property: 'og:locale',
+            content: 'en'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "property": "og:type",
-            "content": "article"
+        content: null,
+        attributes: {
+            property: 'og:type',
+            content: 'article'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "property": "og:site_name",
-            "content": "DatoCMS"
+        content: null,
+        attributes: {
+            property: 'og:site_name',
+            content: 'DatoCMS'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "property": "article:modified_time",
-            "content": "2022-01-18T14:02:47Z"
+        content: null,
+        attributes: {
+            property: 'article:modified_time',
+            content: '2022-01-18T14:02:47Z'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "name": "twitter:card",
-            "content": "summary_large_image"
+        content: null,
+        attributes: {
+            name: 'twitter:card',
+            content: 'summary_large_image'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "content": null,
-        "attributes": {
-            "name": "twitter:site",
-            "content": "@datocms"
+        content: null,
+        attributes: {
+            name: 'twitter:site',
+            content: '@datocms'
         },
-        "tag": "meta"
+        tag: 'meta'
     },
     {
-        "attributes": {
-            "sizes": "16x16",
-            "type": "image/png",
-            "rel": "icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=16&w=16"
+        attributes: {
+            sizes: '16x16',
+            type: 'image/png',
+            rel: 'icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=16&w=16'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "32x32",
-            "type": "image/png",
-            "rel": "icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=32&w=32"
+        attributes: {
+            sizes: '32x32',
+            type: 'image/png',
+            rel: 'icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=32&w=32'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "96x96",
-            "type": "image/png",
-            "rel": "icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=96&w=96"
+        attributes: {
+            sizes: '96x96',
+            type: 'image/png',
+            rel: 'icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=96&w=96'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "192x192",
-            "type": "image/png",
-            "rel": "icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=192&w=192"
+        attributes: {
+            sizes: '192x192',
+            type: 'image/png',
+            rel: 'icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=192&w=192'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "57x57",
-            "rel": "apple-touch-icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=57&w=57"
+        attributes: {
+            sizes: '57x57',
+            rel: 'apple-touch-icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=57&w=57'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "60x60",
-            "rel": "apple-touch-icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=60&w=60"
+        attributes: {
+            sizes: '60x60',
+            rel: 'apple-touch-icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=60&w=60'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "72x72",
-            "rel": "apple-touch-icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=72&w=72"
+        attributes: {
+            sizes: '72x72',
+            rel: 'apple-touch-icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=72&w=72'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "76x76",
-            "rel": "apple-touch-icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=76&w=76"
+        attributes: {
+            sizes: '76x76',
+            rel: 'apple-touch-icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=76&w=76'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "114x114",
-            "rel": "apple-touch-icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=114&w=114"
+        attributes: {
+            sizes: '114x114',
+            rel: 'apple-touch-icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=114&w=114'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "120x120",
-            "rel": "apple-touch-icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=120&w=120"
+        attributes: {
+            sizes: '120x120',
+            rel: 'apple-touch-icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=120&w=120'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "144x144",
-            "rel": "apple-touch-icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=144&w=144"
+        attributes: {
+            sizes: '144x144',
+            rel: 'apple-touch-icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=144&w=144'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "152x152",
-            "rel": "apple-touch-icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=152&w=152"
+        attributes: {
+            sizes: '152x152',
+            rel: 'apple-touch-icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=152&w=152'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "sizes": "180x180",
-            "rel": "apple-touch-icon",
-            "href": "https://www.datocms-assets.com/205/1525789775-dato.png?h=180&w=180"
+        attributes: {
+            sizes: '180x180',
+            rel: 'apple-touch-icon',
+            href: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=180&w=180'
         },
-        "content": null,
-        "tag": "link"
+        content: null,
+        tag: 'link'
     },
     {
-        "attributes": {
-            "name": "msapplication-square70x70logo",
-            "content": "https://www.datocms-assets.com/205/1525789775-dato.png?h=70&w=70"
+        attributes: {
+            name: 'msapplication-square70x70logo',
+            content: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=70&w=70'
         },
-        "content": null,
-        "tag": "meta"
+        content: null,
+        tag: 'meta'
     },
     {
-        "attributes": {
-            "name": "msapplication-square150x150logo",
-            "content": "https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=150"
+        attributes: {
+            name: 'msapplication-square150x150logo',
+            content: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=150'
         },
-        "content": null,
-        "tag": "meta"
+        content: null,
+        tag: 'meta'
     },
     {
-        "attributes": {
-            "name": "msapplication-square310x310logo",
-            "content": "https://www.datocms-assets.com/205/1525789775-dato.png?h=310&w=310"
+        attributes: {
+            name: 'msapplication-square310x310logo',
+            content: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=310&w=310'
         },
-        "content": null,
-        "tag": "meta"
+        content: null,
+        tag: 'meta'
     },
     {
-        "attributes": {
-            "name": "msapplication-square310x150logo",
-            "content": "https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=310"
+        attributes: {
+            name: 'msapplication-square310x150logo',
+            content: 'https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=310'
         },
-        "content": null,
-        "tag": "meta"
-    }
+        content: null,
+        tag: 'meta'
+    },
 ];
-describe("renderMetaTags", function () {
-    it("generates an array of meta tags", function () {
+describe('renderMetaTags', function () {
+    it('generates an array of meta tags', function () {
         var wrapper = shallow(React.createElement("head", null, renderMetaTags(metaTags)));
@@ -290,9 +290,9 @@ expect(wrapper).toMatchSnapshot();
 });
-describe("renderMetaTagsToString", function () {
-    it("generates an array of meta tags", function () {
+describe('renderMetaTagsToString', function () {
+    it('generates an array of meta tags', function () {
         expect(renderMetaTagsToString(metaTags)).toMatchSnapshot();
     });
 });
-describe("toRemixMeta", function () {
-    it("generates a meta descriptor", function () {
+describe('toRemixMeta', function () {
+    it('generates a meta descriptor', function () {
         expect(toRemixMeta(metaTags)).toMatchSnapshot();
@@ -299,0 +299,0 @@ });

dist/esm/StructuredText/index.js

@@ -43,3 +43,3 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
                 }
-                if (!isStructuredText(data) || !data.links) {
+                if (!(isStructuredText(data) && data.links)) {
                     throw new RenderError("The document contains an 'itemLink' node, but the passed data prop is not a Structured Text GraphQL response, or data.links is not present!", node);
@@ -58,3 +58,3 @@ }
                 }
-                if (!isStructuredText(data) || !data.links) {
+                if (!(isStructuredText(data) && data.links)) {
                     throw new RenderError("The document contains an 'itemLink' node, but the passed data prop is not a Structured Text GraphQL response, or data.links is not present!", node);
@@ -82,3 +82,3 @@ }
                 }
-                if (!isStructuredText(data) || !data.blocks) {
+                if (!(isStructuredText(data) && data.blocks)) {
                     throw new RenderError("The document contains an 'block' node, but the passed data prop is not a Structured Text GraphQL response, or data.blocks is not present!", node);
@@ -85,0 +85,0 @@ }

dist/esm/useQuerySubscription/index.js

@@ -61,3 +61,3 @@ var __assign = (this && this.__assign) || function () {
 import { subscribeToQuery, } from 'datocms-listen';
-import { useDeepCompareEffectNoCheck as useDeepCompareEffect } from 'use-deep-compare-effect';
+import { useDeepCompareEffectNoCheck as useDeepCompareEffect, } from 'use-deep-compare-effect';
 export function useQuerySubscription(options) {
@@ -64,0 +64,0 @@ var enabled = options.enabled, initialData = options.initialData, other = __rest(options, ["enabled", "initialData"]);

dist/types/Image/index.d.ts

@@ -34,2 +34,4 @@ import React, { CSSProperties } from 'react';
     pictureClassName?: string;
+    /** Additional CSS class for the placeholder image */
+    placeholderClassName?: string;
     /** Duration (in ms) of the fade-in transition effect upoad image loading */
@@ -49,2 +51,4 @@ fadeInDuration?: number;
     pictureStyle?: React.CSSProperties;
+    /** Additional CSS rules to add to the placeholder image */
+    placeholderStyle?: React.CSSProperties;
     /**
@@ -51,0 +55,0 @@ * The layout behavior of the image as the viewport changes size

package.json

 {
   "name": "react-datocms",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "types": "dist/types/index.d.ts",
@@ -38,2 +38,3 @@ "main": "dist/cjs/index.js",
     "rimraf": "^3.0.2",
+    "rome": "^10.0.1",
     "ts-jest": "^26.5.5",
@@ -44,2 +45,3 @@ "typescript": "^4.5.5"
     "build": "rimraf dist && tsc && tsc --project ./tsconfig.esnext.json",
+    "format": "rome format --write src",
     "watch": "rimraf dist && tsc --watch",
@@ -46,0 +48,0 @@ "prepare": "npm run test && npm run build",

src/Seo/index.ts

 export * from './types';
 export * from './remixUtils';
 export * from './renderMetaTags';
-export * from './renderMetaTagsToString';
+export * from './renderMetaTagsToString';

src/setupTests.ts

@@ -1,2 +0,2 @@
-import { configure } from 'enzyme'
+import { configure } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
@@ -6,2 +6,2 @@
   adapter: new Adapter(),
-})
+});

src/useQuerySubscription/index.ts

@@ -9,3 +9,5 @@ import { useState } from 'react';
 } from 'datocms-listen';
-import { useDeepCompareEffectNoCheck as useDeepCompareEffect } from 'use-deep-compare-effect';
+import {
+  useDeepCompareEffectNoCheck as useDeepCompareEffect,
+} from 'use-deep-compare-effect';
 
@@ -12,0 +14,0 @@ export type SubscribeToQueryOptions<QueryResult, QueryVariables> = Omit<

No alert changes

Improved metrics

Total package byte prevSize

344475

increased by0.04%

Lines of code

4925

increased by0.26%

Worsened metrics

Dev dependency count

21

increased by5%

No dependency changes