Merge branch 'main' of github.com:cloudinary-community/netlify-plugin…

…-cloudinary

.all-contributorsrc

@@ -118,6 +118,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "gshel",
+      "name": "Gretchen Shelby-Dormer",
+      "avatar_url": "https://avatars.githubusercontent.com/u/35184207?v=4",
+      "profile": "https://gshel.org",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.15.0](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.14.0...v1.15.0) (2023-11-13)
+
+
+### Features
+
+* Get loadingStrategy value from netlify.toml inputs, default to 'lazy' if not provided ([#98](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/98)) ([8d68b05](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/8d68b05b35edaf641860822a6dad13989a582854))
+
 # [1.14.0](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.13.1...v1.14.0) (2023-11-10)
 
 

README.md

@@ -316,6 +316,7 @@ npm run test
       <td align="center" valign="top" width="14.28%"><a href="http://ericapisani.dev"><img src="https://avatars.githubusercontent.com/u/5655473?v=4?s=100" width="100px;" alt="Erica Pisani"/><br /><sub><b>Erica Pisani</b></sub></a><br /><a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary/commits?author=ericapisani" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://matiashernandez.dev"><img src="https://avatars.githubusercontent.com/u/282006?v=4?s=100" width="100px;" alt="Matías Hernández Arellano"/><br /><sub><b>Matías Hernández Arellano</b></sub></a><br /><a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary/commits?author=matiasfha" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/kcoderhtml"><img src="https://avatars.githubusercontent.com/u/92754843?v=4?s=100" width="100px;" alt="Kieran Klukas"/><br /><sub><b>Kieran Klukas</b></sub></a><br /><a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary/commits?author=kcoderhtml" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://gshel.org"><img src="https://avatars.githubusercontent.com/u/35184207?v=4?s=100" width="100px;" alt="Gretchen Shelby-Dormer"/><br /><sub><b>Gretchen Shelby-Dormer</b></sub></a><br /><a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary/commits?author=gshel" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

netlify-plugin-cloudinary/package.json

@@ -1,6 +1,6 @@
 {
   "name": "netlify-plugin-cloudinary",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "Supercharge images on your Netlify site with Cloudinary!",
   "main": "dist/index.js",
   "scripts": {

netlify-plugin-cloudinary/src/index.ts

@@ -277,7 +277,7 @@ export async function onBuild({
           }
 
           mediaPaths.forEach(async mediaPath => {
-            const cldAssetPath = `/${path.join(PUBLIC_ASSET_PATH, mediaPath)}`;
+            const cldAssetPath = `/${path.posix.join(PUBLIC_ASSET_PATH, mediaPath)}`;
             const cldAssetUrl = `${host}${cldAssetPath}`;
             try {
               const { cloudinaryUrl: assetRedirectUrl } = await getCloudinaryUrl({
@@ -335,6 +335,7 @@ export async function onPostBuild({
     cname,
     deliveryType,
     folder = process.env.SITE_NAME,
+    loadingStrategy = inputs.loadingStrategy || 'lazy',
     privateCdn,
     uploadPreset,
   } = inputs;
@@ -387,6 +388,7 @@ export async function onPostBuild({
         deliveryType,
         uploadPreset,
         folder,
+        loadingStrategy,
         localDir: PUBLISH_DIR,
         remoteHost: host,
         transformations

netlify-plugin-cloudinary/src/lib/cloudinary.ts

@@ -70,7 +70,7 @@ export type Assets = {
 
 type UpdateCloudinaryOptions = Omit<CloudinaryOptions, 'path'> & {
   assets: Assets;
-  loadingStrategy?: "lazy"
+  loadingStrategy: string;
 }
 
 /**
@@ -288,7 +288,7 @@ export async function updateHtmlImagesToCloudinary(html: string, options: Update
     folder,
     localDir,
     remoteHost,
-    loadingStrategy = 'lazy',
+    loadingStrategy,
     transformations
   } = options
 

netlify-plugin-cloudinary/tests/lib/cloudinary-cname.test.js

@@ -49,7 +49,8 @@ describe('lib/util', () => {
       const { html } = await updateHtmlImagesToCloudinary(sourceHtml, {
         deliveryType: 'fetch',
         localDir: 'tests',
-        remoteHost: 'https://cloudinary.netlify.app'
+        remoteHost: 'https://cloudinary.netlify.app',
+        loadingStrategy: 'lazy'
       });
 
       expect(html).toEqual(`<html><head></head><body><p><img src=\"https://${cname}/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg\" loading=\"lazy"\></p></body></html>`);

netlify-plugin-cloudinary/tests/lib/cloudinary-privatecdn.test.js

@@ -48,7 +48,8 @@ describe('lib/util', () => {
       const { html } = await updateHtmlImagesToCloudinary(sourceHtml, {
         deliveryType: 'fetch',
         localDir: 'tests',
-        remoteHost: 'https://cloudinary.netlify.app'
+        remoteHost: 'https://cloudinary.netlify.app',
+        loadingStrategy: 'lazy'
       });
 
       expect(html).toEqual(`<html><head></head><body><p><img src=\"https://${process.env.CLOUDINARY_CLOUD_NAME}-res.cloudinary.com/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg\" loading=\"lazy"\></p></body></html>`);

netlify-plugin-cloudinary/tests/lib/cloudinary.test.js

@@ -152,7 +152,8 @@ describe('lib/util', () => {
       const { html } = await updateHtmlImagesToCloudinary(sourceHtml, {
         deliveryType: 'fetch',
         localDir: 'tests',
-        remoteHost: 'https://cloudinary.netlify.app'
+        remoteHost: 'https://cloudinary.netlify.app',
+        loadingStrategy: 'lazy'
       });
 
       expect(html).toEqual(`<html><head></head><body><p><img src=\"https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg\" loading=\"lazy"\></p></body></html>`);
@@ -162,7 +163,8 @@ describe('lib/util', () => {
       const sourceHtml = '<html><head></head><body><p><img src="https://i.imgur.com/vtYmp1x.png"></p></body></html>';
 
       const { html } = await updateHtmlImagesToCloudinary(sourceHtml, {
-        deliveryType: 'fetch'
+        deliveryType: 'fetch',
+        loadingStrategy: 'lazy'
       });
 
       expect(html).toEqual(`<html><head></head><body><p><img src=\"https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://i.imgur.com/vtYmp1x.png\" loading=\"lazy"\></p></body></html>`);
@@ -176,23 +178,12 @@ describe('lib/util', () => {
         deliveryType: 'fetch',
         localDir: 'tests',
         remoteHost: 'https://cloudinary.netlify.app',
+        loadingStrategy: 'lazy'
       });
 
       expect(html).toEqual(`<html><head></head><body><p><img src=\"https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg\" srcset=\"https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg 1x, https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg 2x\" loading=\"lazy"\></p></body></html>`);
     });
 
-    it('should add lazy loading to image when no option is provided', async () => {
-      const sourceHtml = '<html><head></head><body><p><img src="https://i.imgur.com/vtYmp1x.png"></p></body></html>';
-
-      const { html } = await updateHtmlImagesToCloudinary(sourceHtml, {
-        deliveryType: 'fetch',
-        localDir: 'tests',
-        remoteHost: 'https://cloudinary.netlify.app',
-      });
-
-      expect(html).toEqual(`<html><head></head><body><p><img src=\"https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://i.imgur.com/vtYmp1x.png\" loading=\"lazy"\></p></body></html>`);
-    });
-
     it('should add eager loading to image when eager option is provided for loadingStrategy', async () => {
       const sourceHtml = '<html><head></head><body><p><img src="https://i.imgur.com/vtYmp1x.png"></p></body></html>';
 
@@ -213,6 +204,7 @@ describe('lib/util', () => {
         deliveryType: 'upload',
         localDir: 'demo/.next',
         remoteHost: 'https://main--netlify-plugin-cloudinary.netlify.app',
+        loadingStrategy: 'lazy',
         folder: 'netlify-plugin-cloudinary',
         assets: mockDemo.assets
       });

netlify-plugin-cloudinary/tests/on-post-build.test.js

@@ -6,6 +6,9 @@ import { onPostBuild } from '../src/';
 
 const mocksPath = path.join(__dirname, 'mocks/html');
 const tempPath = path.join(mocksPath, 'temp');
+// Avoid illegal characters in file paths, all operating systems
+const replaceRegEx = /[\W_]+/g
+const replaceValue = '_'
 
 async function mkdir(directoryPath) {
   let dir;
@@ -36,7 +39,7 @@ describe('onPostBuild', () => {
     process.env.CLOUDINARY_API_SECRET = 'abcd1234';
 
     const mockFiles = (await fs.readdir(mocksPath)).filter(filePath => filePath.includes('.html'));
-    const tempTestPath = path.join(tempPath, expect.getState().currentTestName.replace('/', '_'));
+    const tempTestPath = path.join(tempPath, expect.getState().currentTestName.replace(replaceRegEx, replaceValue));
     await mkdir(tempTestPath);
     await Promise.all(mockFiles.map(async file => {
       await fs.copyFile(path.join(mocksPath, file), path.join(tempTestPath, file));
@@ -46,7 +49,7 @@ describe('onPostBuild', () => {
   afterEach(async () => {
     process.env = ENV_ORIGINAL;
 
-    await fs.rm(path.join(tempPath, expect.getState().currentTestName.replace('/', '_')), { recursive: true, force: true });
+    await fs.rm(path.join(tempPath, expect.getState().currentTestName.replace(replaceRegEx, replaceValue)), { recursive: true, force: true });
   });
 
   afterAll(async () => {
@@ -66,7 +69,7 @@ describe('onPostBuild', () => {
 
       const deliveryType = 'fetch';
 
-      const tempTestPath = path.join(tempPath, expect.getState().currentTestName.replace('/', '_'));
+      const tempTestPath = path.join(tempPath, expect.getState().currentTestName.replace(replaceRegEx, replaceValue));
 
       await onPostBuild({
         constants: {
@@ -105,7 +108,7 @@ describe('onPostBuild', () => {
 
       const deliveryType = 'fetch';
 
-      const tempTestPath = path.join(tempPath, expect.getState().currentTestName.replace('/', '_'));
+      const tempTestPath = path.join(tempPath, expect.getState().currentTestName.replace(replaceRegEx, replaceValue));
 
       const maxSize = {
         width: 800,
@@ -140,4 +143,50 @@ describe('onPostBuild', () => {
 
   });
 
+  describe('loadingStrategy', () => {
+    test.each([
+      {loadingStrategy: undefined, expected: 'lazy'},
+      {loadingStrategy: 'lazy', expected: 'lazy'},
+      {loadingStrategy: 'eager', expected: 'eager'},
+    ])('should use $expected as img loading attribute when netlify.toml loadingStrategy is $loadingStrategy', async ({loadingStrategy, expected}) => {
+      process.env.CONTEXT = 'production';
+      process.env.NETLIFY_HOST = 'https://netlify-plugin-cloudinary.netlify.app';
+
+      // Tests to ensure that delivery type of fetch works without API Key and Secret as it should
+
+      delete process.env.CLOUDINARY_API_KEY;
+      delete process.env.CLOUDINARY_API_SECRET;
+
+      const deliveryType = 'fetch';
+
+      const tempTestPath = path.join(tempPath, expect.getState().currentTestName.replace(replaceRegEx, replaceValue));
+
+      const inputs = {
+        deliveryType,
+        folder: process.env.SITE_NAME
+      }
+
+      if (loadingStrategy != undefined) {
+        inputs['loadingStrategy'] = loadingStrategy
+        }
+
+      await onPostBuild({
+        constants: {
+          PUBLISH_DIR: tempTestPath
+        },
+        inputs: inputs,
+      });
+
+      const files = await fs.readdir(tempTestPath);
+
+      await Promise.all(files.map(async file => {
+        const data = await fs.readFile(path.join(tempTestPath, file), 'utf-8');
+        const dom = new JSDOM(data);
+        const images = Array.from(dom.window.document.querySelectorAll('img'));
+        images.forEach(image => {
+          expect(image.getAttribute('loading')).toMatch(expected);
+        })
+      }));
+    })
+  });
 });