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

Author: colbyfayock

.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);
+ })
+ }));
+ })
+ });
 });