gatsby-transformer-cloudinary - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

CHANGELOG.md

@@ -0,1 +1,11 @@
+# Version Next
+
+Additions:
+
+- Added logging for each time we have to fetch a base64 image from Cloudinary to explain long query steps in the Gatsby build process.
+
+Fixes:
+
+- Fluid images use defaultBase64 images when they are provided.
+
 # Version 2.1.0
@@ -2,0 +12,0 @@

gatsby-node.js

@@ -75,3 +75,3 @@ const fs = require('fs-extra');
 
-exports.createResolvers = ({ createResolvers }) => {
+exports.createResolvers = ({ createResolvers, reporter }) => {
   const resolvers = {
@@ -101,15 +101,16 @@ CloudinaryAsset: {
           getFixedImageObject({
-            public_id,
-            version,
+            base64Transformations,
+            base64Width,
+            chained,
             cloudName,
+            defaultBase64,
+            height,
+            ignoreDefaultBase64,
             originalHeight,
             originalWidth,
-            height,
+            public_id,
+            reporter,
+            transformations,
+            version,
             width,
-            base64Width,
-            base64Transformations,
-            defaultBase64,
-            ignoreDefaultBase64,
-            transformations,
-            chained,
           }),
@@ -121,29 +122,34 @@ },
           {
-            public_id,
-            version,
+            breakpoints,
             cloudName,
+            defaultBase64,
             originalHeight,
             originalWidth,
-            breakpoints,
+            public_id,
+            version,
           },
           {
+            base64Transformations,
             base64Width,
-            base64Transformations,
+            chained,
+            ignoreDefaultBase64,
             maxWidth,
             transformations,
-            chained,
           },
         ) =>
           getFluidImageObject({
-            public_id,
-            version,
+            base64Transformations,
+            base64Width,
+            breakpoints,
+            chained,
             cloudName,
+            defaultBase64,
+            ignoreDefaultBase64,
             maxWidth,
-            breakpoints,
             originalHeight,
             originalWidth,
-            base64Width,
-            base64Transformations,
+            public_id,
+            reporter,
             transformations,
-            chained,
+            version,
           }),
@@ -150,0 +156,0 @@ },

get-image-objects.js

@@ -14,26 +14,28 @@ const { getPluginOptions } = require('./options');
 exports.getFixedImageObject = async ({
-  public_id,
+  base64Transformations = [],
+  base64Width = DEFAULT_BASE64_WIDTH,
+  chained = [],
   cloudName,
+  defaultBase64,
+  height,
+  ignoreDefaultBase64 = false,
   originalHeight,
   originalWidth,
+  public_id,
+  reporter = {},
+  transformations = [],
   version = false,
-  height,
   width,
-  base64Width = DEFAULT_BASE64_WIDTH,
-  base64Transformations = [],
-  defaultBase64,
-  ignoreDefaultBase64 = false,
-  transformations = [],
-  chained = [],
 }) => {
   const base64 = await getBase64({
+    base64Transformations,
+    base64Width,
+    chained,
+    cloudName,
     defaultBase64,
     ignoreDefaultBase64,
     public_id,
+    reporter,
+    transformations,
     version,
-    cloudName,
-    base64Transformations,
-    transformations,
-    base64Width,
-    chained,
   });
@@ -108,15 +110,16 @@
 exports.getFluidImageObject = async ({
-  public_id,
+  base64Transformations = [],
+  base64Width = DEFAULT_BASE64_WIDTH,
+  breakpoints = [200, 400, 600],
+  chained = [],
   cloudName,
-  originalWidth,
-  originalHeight,
-  breakpoints = [200, 400, 600],
-  version = false,
-  maxWidth,
-  base64Width = DEFAULT_BASE64_WIDTH,
-  base64Transformations = [],
   defaultBase64,
   ignoreDefaultBase64 = false,
+  maxWidth,
+  originalHeight,
+  originalWidth,
+  public_id,
+  reporter = {},
   transformations = [],
-  chained = [],
+  version = false,
 }) => {
@@ -131,11 +134,12 @@ const aspectRatio = getAspectRatio(
   const base64 = await getBase64({
+    base64Transformations,
+    base64Width,
+    chained,
+    cloudName,
     defaultBase64,
     ignoreDefaultBase64,
     public_id,
+    reporter,
+    transformations,
     version,
-    cloudName,
-    base64Transformations,
-    base64Width,
-    transformations,
-    chained,
   });
@@ -142,0 +146,0 @@ const src = getImageURL({

get-image-objects/get-shared-image-data.js

@@ -55,11 +55,12 @@ const axios = require('axios');
 exports.getBase64 = async ({
+  base64Transformations,
+  base64Width,
+  chained,
+  cloudName,
   defaultBase64,
   ignoreDefaultBase64,
   public_id,
+  reporter,
+  transformations,
   version,
-  cloudName,
-  base64Transformations,
-  transformations,
-  base64Width,
-  chained,
 }) => {
@@ -80,3 +81,3 @@ if (defaultBase64) {
   });
-  const base64 = await fetchBase64(base64URL);
+  const base64 = await fetchBase64(base64URL, reporter);
 
@@ -86,4 +87,5 @@ return base64;
 
-async function fetchBase64(url) {
+async function fetchBase64(url, reporter) {
   if (!base64Cache[url]) {
+    logBase64Retrieval(url, reporter);
     const result = await axios.get(url, { responseType: 'arraybuffer' });
@@ -96,1 +98,42 @@ const data = Buffer.from(result.data).toString('base64');
 }
+
+let fetchedBase64ImageCount = 0;
+
+function logBase64Retrieval(url, reporter) {
+  fetchedBase64ImageCount += 1;
+  if (typeof reporter.info === 'function') {
+    reporter.info(
+      `[gatsby-transformer-cloudinary] Fetching base64 image ` +
+        `#${fetchedBase64ImageCount} from Cloudinary: ${url}`,
+    );
+    if (fetchedBase64ImageCount == 100) {
+      reporter.info(
+        '[gatsby-transformer-cloudinary] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~',
+      );
+      reporter.info(
+        'It looks like your project has a lot of images. To improve your build times, ',
+      );
+      reporter.info(
+        'you should consider (1) using images that are already on Cloudinary, (2) ',
+      );
+      reporter.info(
+        'precomputing the base64 images and providing them to this plugin as the ',
+      );
+      reporter.info(
+        '`defaultBase64` property, and (3) setting the plugin option ',
+      );
+      reporter.info(
+        '`alwaysUseDefaultBase64` to true. Doing so will reduce the number of base64 ',
+      );
+      reporter.info(
+        'images that need to be fetched from Cloudinary and speed up your Gatsby "query" ',
+      );
+      reporter.info(
+        'build steps. (See the section "Use images already on Cloudinary" in the README.)',
+      );
+      reporter.info(
+        '[gatsby-transformer-cloudinary] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~',
+      );
+    }
+  }
+}

package.json

 {
   "name": "gatsby-transformer-cloudinary",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Transform local files into Cloudinary-managed assets for Gatsby sites.",
@@ -21,3 +21,3 @@ "main": "index.js",
   "dependencies": {
-    "axios": "^0.19.2",
+    "axios": "^0.21.1",
     "cloudinary": "^1.22.0",
@@ -24,0 +24,0 @@ "fast-json-stable-stringify": "^2.1.0",

No alert changes

Improved metrics

Total package byte prevSize

94716

increased by2.12%

Lines of code

1923

increased by2.72%

Dependency changes

• + Addedaxios@0.21.4(transitive)

• + Addedfollow-redirects@1.15.9(transitive)

• - Removedaxios@0.19.2(transitive)

• - Removedfollow-redirects@1.5.10(transitive)

• Updatedaxios@^0.21.1