From 0ad523957e8f84fed286fe6a24f802562e3ef069 Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Mon, 5 Feb 2024 19:20:24 -0500 Subject: [PATCH 1/3] remove sitecoreLoader --- .../src/components/NextImage.test.tsx | 46 +------------------ .../src/components/NextImage.tsx | 10 +--- 2 files changed, 2 insertions(+), 54 deletions(-) diff --git a/packages/sitecore-jss-nextjs/src/components/NextImage.test.tsx b/packages/sitecore-jss-nextjs/src/components/NextImage.test.tsx index 7b43f85f72..e3c4107916 100644 --- a/packages/sitecore-jss-nextjs/src/components/NextImage.test.tsx +++ b/packages/sitecore-jss-nextjs/src/components/NextImage.test.tsx @@ -3,7 +3,7 @@ import chai, { use } from 'chai'; import chaiString from 'chai-string'; import { mount } from 'enzyme'; import React from 'react'; -import { NextImage, sitecoreLoader } from './NextImage'; +import { NextImage } from './NextImage'; import { ImageField } from '@sitecore-jss/sitecore-jss-react'; import { ImageLoader } from 'next/image'; import { spy, match } from 'sinon'; @@ -12,50 +12,6 @@ import { SinonSpy } from 'sinon'; use(sinonChai); const expect = chai.use(chaiString).expect; -describe('sitecoreLoader', () => { - [ - { - description: 'relative URL', - root: '/assets/img/test0.png', - }, - { - description: 'absolute URL', - root: 'https://cm.jss.localhost/assets/img/test0.png', - }, - ].forEach((value) => { - describe(value.description, () => { - it('should append mw query string param', () => { - const params: Partial = { - src: value.root, - width: 100, - }; - const result = sitecoreLoader(params as ImageLoaderProps); - expect(result).to.be.a('string'); - expect(result).to.equal(`${value.root}?mw=100`); - }); - - it('should override existing mw query string param', () => { - const params: Partial = { - src: `${value.root}?mw=400`, - width: 100, - }; - const result = sitecoreLoader(params as ImageLoaderProps); - expect(result).to.be.a('string'); - expect(result).to.equal(`${value.root}?mw=100`); - }); - - it('should preserve existing query string params', () => { - const params: Partial = { - src: `${value.root}?mw=400&mh=100&q=50`, - width: 100, - }; - const result = sitecoreLoader(params as ImageLoaderProps); - expect(result).to.be.a('string'); - expect(result).to.equal(`${value.root}?mw=100&mh=100&q=50`); - }); - }); - }); -}); describe('', () => { const HOSTNAME = 'https://cm.jss.localhost'; diff --git a/packages/sitecore-jss-nextjs/src/components/NextImage.tsx b/packages/sitecore-jss-nextjs/src/components/NextImage.tsx index c3c4710d79..6d8cff2d00 100644 --- a/packages/sitecore-jss-nextjs/src/components/NextImage.tsx +++ b/packages/sitecore-jss-nextjs/src/components/NextImage.tsx @@ -10,19 +10,11 @@ import { } from '@sitecore-jss/sitecore-jss-react'; import Image, { ImageLoader, - ImageLoaderProps, ImageProps as NextImageProperties, } from 'next/image'; type NextImageProps = Omit & Partial; -export const sitecoreLoader: ImageLoader = ({ src, width }: ImageLoaderProps): string => { - const [root, paramString] = src.split('?'); - const params = new URLSearchParams(paramString); - params.set('mw', width.toString()); - return `${root}?${params}`; -}; - export const NextImage: React.FC = ({ editable, imageParams, @@ -92,7 +84,7 @@ export const NextImage: React.FC = ({ delete imageProps.height; } - const loader = (otherProps.loader ? otherProps.loader : sitecoreLoader) as ImageLoader; + const loader = (otherProps.loader ? otherProps.loader : undefined ) as ImageLoader; if (attrs) { return ; From 3431556b9f4e658e178a1a913e1e5c6770d4d843 Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Mon, 5 Feb 2024 19:34:49 -0500 Subject: [PATCH 2/3] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 261de87721..f6b4b74281 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,7 @@ Our versioning strategy is as follows: * `[templates/nextjs-sxa]` Fixed Image component when there is using Banner variant which set property background-image when image is empty. ([#1689](https://github.com/Sitecore/jss/pull/1689)) ([#1692](https://github.com/Sitecore/jss/pull/1692)) * `[templates/nextjs-sxa]` Fix feature `show Grid column` in Experience Editor. ([#1704](https://github.com/Sitecore/jss/pull/1704)) * `[sitecore-jss-nextjs] [templates/nextjs-xmcloud]` SDK initialization rejections are now correctly handled. Errors should no longer occur after getSDK() promises resolve when they shouldn't (for example, getting Events SDK in development environment) ([#1712](https://github.com/Sitecore/jss/pull/1712) [#1715](https://github.com/Sitecore/jss/pull/1715) [#1716](https://github.com/Sitecore/jss/pull/1716)) +* `[sitecore-jss-nextjs]` Remove custom loader function i.e. `sitecoreLoader` to enable NextImage to use built-in image optimization from vercel. ([#1726](https://github.com/Sitecore/jss/pull/1726)) ### 🛠 Breaking Changes From 20fda68eaf338dc91d79e6f1dcda6ddbff7369d5 Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Tue, 6 Feb 2024 11:23:00 -0500 Subject: [PATCH 3/3] remove loader prop --- .../sitecore-jss-nextjs/src/components/NextImage.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/sitecore-jss-nextjs/src/components/NextImage.tsx b/packages/sitecore-jss-nextjs/src/components/NextImage.tsx index 6d8cff2d00..2d1e8d8ad9 100644 --- a/packages/sitecore-jss-nextjs/src/components/NextImage.tsx +++ b/packages/sitecore-jss-nextjs/src/components/NextImage.tsx @@ -8,10 +8,7 @@ import { ImageField, ImageFieldValue, } from '@sitecore-jss/sitecore-jss-react'; -import Image, { - ImageLoader, - ImageProps as NextImageProperties, -} from 'next/image'; +import Image, { ImageProps as NextImageProperties } from 'next/image'; type NextImageProps = Omit & Partial; @@ -84,10 +81,8 @@ export const NextImage: React.FC = ({ delete imageProps.height; } - const loader = (otherProps.loader ? otherProps.loader : undefined ) as ImageLoader; - if (attrs) { - return ; + return ; } return null; // we can't handle the truth