react-datocms - npm Package Compare versions

Comparing version 1.5.6 to 1.6.0

dist/Image/__tests__/index.test.js

@@ -38,5 +38,8 @@ "use strict";
 describe("Image", function () {
+    // intersectionThreshold is an hack to make tests work
+    // we need the library to generate a different IntersectionObserver for each test
+    // otherwise the IntersectionObserver mocking won't work
     describe("not visible", function () {
         it("renders the blur-up thumb", function () {
-            var wrapper = enzyme_1.mount(React.createElement(index_1.Image, { data: data }));
+            var wrapper = enzyme_1.mount(React.createElement(index_1.Image, { data: data, intersectionThreshold: 0.1 }));
             expect(wrapper).toMatchSnapshot();
@@ -47,3 +50,3 @@ });
         it("renders the image", function () {
-            var wrapper = enzyme_1.mount(React.createElement(index_1.Image, { data: data }));
+            var wrapper = enzyme_1.mount(React.createElement(index_1.Image, { data: data, intersectionThreshold: 0.2 }));
             test_utils_1.mockAllIsIntersecting(true);
@@ -55,6 +58,6 @@ wrapper.update();
             it("shows the image", function () {
-                var wrapper = enzyme_1.mount(React.createElement(index_1.Image, { data: data }));
+                var wrapper = enzyme_1.mount(React.createElement(index_1.Image, { data: data, intersectionThreshold: 0.3 }));
                 test_utils_1.mockAllIsIntersecting(true);
                 wrapper.update();
-                wrapper.find('img').last().simulate('load');
+                wrapper.find("img").last().simulate("load");
                 wrapper.update();
@@ -61,0 +64,0 @@ expect(wrapper).toMatchSnapshot();

dist/Image/index.js

@@ -80,3 +80,3 @@ "use strict";
         triggerOnce: true
-    }), ref = _d[0], inView = _d[1], _entry = _d[2];
+    }), ref = _d.ref, inView = _d.inView;
     var absolutePositioning = {
@@ -83,0 +83,0 @@ position: "absolute",

dist/setupTests.js

@@ -7,6 +7,6 @@ "use strict";
 var enzyme_1 = require("enzyme");
-var enzyme_adapter_react_16_1 = __importDefault(require("enzyme-adapter-react-16"));
+var enzyme_adapter_react_17_1 = __importDefault(require("@wojtekmaj/enzyme-adapter-react-17"));
 enzyme_1.configure({
-    adapter: new enzyme_adapter_react_16_1["default"]()
+    adapter: new enzyme_adapter_react_17_1["default"]()
 });
 //# sourceMappingURL=setupTests.js.map

dist/useQuerySubscription/index.d.ts

 import { ChannelErrorData, ConnectionStatus, Options } from "datocms-listen";
-declare type SubscribeToQueryOptions<QueryResult, QueryVariables> = Omit<Options<QueryResult, QueryVariables>, "onStatusChange" | "onUpdate" | "onChannelError">;
-declare type EnabledQueryListenerOptions<QueryResult, QueryVariables> = {
+export declare type SubscribeToQueryOptions<QueryResult, QueryVariables> = Omit<Options<QueryResult, QueryVariables>, "onStatusChange" | "onUpdate" | "onChannelError">;
+export declare type EnabledQueryListenerOptions<QueryResult, QueryVariables> = {
     /** Whether the subscription has to be performed or not */
@@ -9,3 +9,3 @@ enabled?: true;
 } & SubscribeToQueryOptions<QueryResult, QueryVariables>;
-declare type DisabledQueryListenerOptions<QueryResult, QueryVariables> = {
+export declare type DisabledQueryListenerOptions<QueryResult, QueryVariables> = {
     /** Whether the subscription has to be performed or not */
@@ -16,3 +16,3 @@ enabled: false;
 } & Partial<SubscribeToQueryOptions<QueryResult, QueryVariables>>;
-declare type QueryListenerOptions<QueryResult, QueryVariables> = EnabledQueryListenerOptions<QueryResult, QueryVariables> | DisabledQueryListenerOptions<QueryResult, QueryVariables>;
+export declare type QueryListenerOptions<QueryResult, QueryVariables> = EnabledQueryListenerOptions<QueryResult, QueryVariables> | DisabledQueryListenerOptions<QueryResult, QueryVariables>;
 export declare function useQuerySubscription<QueryResult = any, QueryVariables = Record<string, any>>(options: QueryListenerOptions<QueryResult, QueryVariables>): {
@@ -23,2 +23,1 @@ error: ChannelErrorData | null;
 };
-export {};

package.json

 {
   "name": "react-datocms",
-  "version": "1.5.6",
+  "version": "1.6.0",
   "types": "dist/index.d.ts",
@@ -18,21 +18,20 @@ "main": "dist/index.js",
     "@types/enzyme": "^3.10.8",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/enzyme-to-json": "^1.5.4",
-    "@types/jest": "^26.0.20",
+    "@types/jest": "^26.0.22",
     "@types/raf": "^3.4.0",
-    "@types/react": "^16.9.23",
-    "@types/react-dom": "^16.9.7",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
     "@types/rimraf": "^3.0.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
     "doctoc": "^2.0.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.5",
-    "enzyme-to-json": "^3.6.1",
+    "enzyme-to-json": "^3.6.2",
     "jest": "^26.6.3",
     "np": "^7.4.0",
     "raf": "^3.4.1",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "ts-jest": "^26.4.4",
-    "typescript": "^4.2.2"
+    "ts-jest": "^26.5.4",
+    "typescript": "^4.2.4"
   },
@@ -47,3 +46,3 @@ "scripts": {
   "peerDependencies": {
-    "react": "^16.12.0"
+    "react": ">= 16.12.0"
   },
@@ -79,8 +78,8 @@ "jest": {
     "datocms-listen": "^0.1.3",
-    "datocms-structured-text-generic-html-renderer": "^1.0.12",
-    "datocms-structured-text-utils": "^1.0.12",
+    "datocms-structured-text-generic-html-renderer": "^1.0.14",
+    "datocms-structured-text-utils": "^1.0.14",
     "intersection-observer": "^0.12.0",
-    "react-intersection-observer": "^8.26.1",
-    "use-deep-compare-effect": "^1.4.0"
+    "react-intersection-observer": "^8.31.0",
+    "use-deep-compare-effect": "^1.6.1"
   }
 }

README.md

@@ -395,3 +395,3 @@ # react-datocms
 import React from "react";
-import { StructuredText } from "react-datocms";
+import { StructuredText, Image } from "react-datocms";
 
@@ -449,4 +449,3 @@ const Page = ({ data }) => {
   //       image: {
-  //         alt: "Our team at work",
-  //         url: "https://www.datocms-assets.com/205/1597757278-austin-distel-wd1lrb9oeeo-unsplash.jpg",
+  //         responsiveImage: { ... },
   //       },
@@ -485,3 +484,3 @@ //     },
             case "ImageRecord":
-              return <img src={record.image.url} alt={record.image.alt} />;
+              return <Image data={record.image.responsiveImage} />;
             default:
@@ -522,4 +521,14 @@ return null;
             image {
-              url
-              alt
+              responsiveImage(imgixParams: { fit: crop, w: 300, h: 300, auto: format }) {
+                srcSet
+                webpSrcSet
+                sizes
+                src
+                width
+                height
+                aspectRatio
+                alt
+                title
+                base64
+              }
             }
@@ -526,0 +535,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

96040

increased by0.58%

Dev dependency count

19

decreased by-5%

Lines of code

942

increased by0.21%

Number of lines in readme file

552

increased by1.66%

Dependency changes

• + Addedreact@18.3.119.0.0(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-is@16.13.1(transitive)

• Updateddatocms-structured-text-generic-html-renderer@^1.0.14

• Updateddatocms-structured-text-utils@^1.0.14

• Updatedreact-intersection-observer@^8.31.0

• Updateduse-deep-compare-effect@^1.6.1