Add image-diff-checker extension by yasuhiro-yamamoto · Pull Request #17275 · raycast/extensions

yasuhiro-yamamoto · 2025-02-24T07:31:42Z

Description

Screencast

Checklist

I read the extension guidelines
I read the documentation about publishing
I ran npm run build and tested this distribution build in Raycast
I checked that files in the assets folder are used by the extension itself
I checked that assets used by the README are placed outside of the metadata folder

raycastbot · 2025-02-24T07:32:06Z

Congratulations on your new Raycast extension! 🚀

Due to our current reduced availability, the initial review may take up to 10-15 business days

Once the PR is approved and merged, the extension will be available on our Store.

…y useEffect.

greptile-apps

PR Summary

Added a new Image Diff Checker extension that compares two images and highlights differences, supporting JPEG, JPG, PNG, and GIF formats.

The extension uses pixelmatch and jimp libraries to process images and generate visual diffs with a clean form-based UI
The implementation includes proper file validation with test coverage in src/hooks/use-image-form/file-validation.spec.ts
The metadata folder with screenshots is missing but required since this is a view command (https://developers.raycast.com/basics/prepare-an-extension-for-store#how-to-use-it)
The compare function in src/utils/pixelmatch.ts should be wrapped in a try-catch block since image processing operations can fail
The fileValidation function in src/hooks/use-image-form/file-validation.ts doesn't explicitly return undefined when validation passes

_{💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!}

_{12 file(s) reviewed, 8 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-03-02T07:38:06Z

extensions/image-diff-checker/src/hooks/use-image-form/file-validation.ts

+export const fileValidation = (value?: string[]) => {
+  if (!value) return "The item is required.";
+  if (value?.length === 0) return "The item is required.";
+  const isValid = checkExtension(value[0]);
+  if (!isValid) return "Invalid file type.";
+};


logic: The function doesn't return anything when validation passes. This will return undefined which might cause issues with form validation. Consider returning undefined explicitly or returning null to indicate successful validation.

Suggested change

export const fileValidation = (value?: string[]) => {

if (!value) return "The item is required.";

if (value?.length === 0) return "The item is required.";

const isValid = checkExtension(value[0]);

if (!isValid) return "Invalid file type.";

};

export const fileValidation = (value?: string[]) => {

if (!value) return "The item is required.";

if (value?.length === 0) return "The item is required.";

const isValid = checkExtension(value[0]);

if (!isValid) return "Invalid file type.";

return undefined; // Explicitly return undefined for valid files

};

greptile-apps · 2025-03-02T07:38:11Z

extensions/image-diff-checker/src/hooks/use-image-form/file-validation.spec.ts

+describe("required", () => {
+  test("should return required error for empty array", () => {
+    expect(fileValidation([])).toBe(ERRORS.required);
+  });


logic: Missing test for the undefined input case. The fileValidation function handles both empty arrays and undefined values, but only the empty array case is tested here.

greptile-apps · 2025-03-02T07:38:24Z

extensions/image-diff-checker/package.json

+    "pixelmatch": "^7.1.0",
+    "pngjs": "^7.0.0"


style: There's a version mismatch between pixelmatch v7.1.0 and the @types/pngjs v6.0.5. The pixelmatch library is using pngjs v7.0.0, but the type definitions are for v6.x

greptile-apps · 2025-03-02T07:39:50Z

extensions/image-diff-checker/src/hooks/use-image-form/index.ts

+    onSubmit(values) {
+      const diffImageSource = compare(values.actual[0], values.expected[0]);
+      createMarkdown(diffImageSource);
+    },


logic: Missing error handling for image comparison. If compare() or createMarkdown() fails, there's no error handling or feedback to the user.

greptile-apps · 2025-03-02T07:39:51Z

extensions/image-diff-checker/src/hooks/use-image-form/index.ts

+  const createMarkdown = async (
+    diffImageSource: Promise<{
+      diffBuffer: Buffer;
+      width: number;
+      height: number;
+    }>,
+  ) => {


style: Accepting a Promise as a parameter instead of awaiting it in the caller creates unnecessary complexity.

greptile-apps · 2025-03-02T07:39:55Z

extensions/image-diff-checker/src/utils/pixelmatch.ts

+  if (expectedImage.bitmap.width !== width || expectedImage.bitmap.height !== height) {
+    expectedImage.resize({ w: width, h: height });
+  }


style: Resizing only the expected image might lead to distortion if aspect ratios differ significantly. Consider maintaining aspect ratio or providing an option for different scaling strategies.

greptile-apps · 2025-03-02T07:39:55Z

extensions/image-diff-checker/src/utils/pixelmatch.ts

+  const expectedBuffer = expectedImage.bitmap.data;
+  const diffBuffer = Buffer.alloc(actualBuffer.length);
+
+  pixelmatch(actualBuffer, expectedBuffer, diffBuffer, width, height, { threshold: 0.2 });


style: The threshold value of 0.2 is hardcoded. Consider making this configurable via preferences to allow users to adjust sensitivity of the comparison.

greptile-apps · 2025-03-02T07:39:56Z

extensions/image-diff-checker/src/utils/pixelmatch.ts

+  const actualImage = await Jimp.read(actual);
+  const expectedImage = await Jimp.read(expected);


logic: Missing error handling for image loading failures. If either image can't be read, this will throw an unhandled exception.

pernielsentikaer · 2025-03-04T06:18:52Z

Is this ready for another review?

yasuhiro-yamamoto · 2025-03-04T10:54:12Z

@pernielsentikaer Yes, I have addressed the feedback and made the necessary changes. The pull request is now ready for another review.

pernielsentikaer

Hi 👋

Looks good to me, approved 🔥

github-actions · 2025-03-04T11:34:28Z

Published to the Raycast Store:
https://raycast.com/yasuhiroyamamoto/image-diff-checker

raycastbot · 2025-03-04T11:34:29Z

🎉 🎉 🎉

Such a great contribution deserves a reward, but unfortunately we couldn't find your Raycast account based on your GitHub username (@yasuhiro-yamamoto).
Please link your GitHub account to your Raycast account to receive your credits and soon be able to exchange them for some swag.

initial commit

9a5e4d2

raycastbot added the new extension Label for PRs with new extensions label Feb 24, 2025

yasuhiro-yamamoto and others added 2 commits February 25, 2025 03:59

Refactor useImagesForm by consolidating logic and removing unnecessar…

2642a56

…y useEffect.

Update image-diff-check.tsx

cc84e48

pernielsentikaer self-assigned this Mar 2, 2025

greptile-apps bot reviewed Mar 2, 2025

View reviewed changes

yasuhiro-yamamoto added 10 commits March 4, 2025 08:42

Merge branch 'raycast:main' into ext/image-diff-checker

43c3a84

fix: Return undefined on successful validation.

653faf4

test: Verify undefined is returned on successful validation.

8928b86

refactor: Remove unused dependencies: pngjs v6.

8894d9a

fix: Improve error handling and Promise handling.

c61f0ba

fix: Throw error if image sizes differ in pixelmatch comparison.

0aecf8e

feat: Expose pixelmatch threshold as a user-configurable option.

26bfbc4

feat: Add error handling for Jimp image loading failures.

35d1643

fix: lint

d4fd037

fix: Remove defaultValue from threshold field in form.

5b33fc3

pernielsentikaer approved these changes Mar 4, 2025

View reviewed changes

Update CHANGELOG.md and optimise images

7108eb6

raycastbot merged commit e7efbd1 into raycast:main Mar 4, 2025
2 checks passed

		const actualImage = await Jimp.read(actual);
		const expectedImage = await Jimp.read(expected);

Conversation

yasuhiro-yamamoto commented Feb 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screencast

Checklist

Uh oh!

raycastbot commented Feb 24, 2025

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

greptile-apps bot Mar 2, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Mar 2, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Mar 2, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Mar 2, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Mar 2, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Mar 2, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Mar 2, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Mar 2, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pernielsentikaer commented Mar 4, 2025

Uh oh!

yasuhiro-yamamoto commented Mar 4, 2025

Uh oh!

pernielsentikaer left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Mar 4, 2025

Uh oh!

raycastbot commented Mar 4, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

yasuhiro-yamamoto commented Feb 24, 2025 •

edited

Loading