Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(core): default to local image component #1710

Merged
merged 2 commits into from
Dec 7, 2024

Conversation

chanceaclark
Copy link
Contributor

@chanceaclark chanceaclark commented Dec 5, 2024

What/Why?

I attempted to try and use the images.loaderFile from next.config.ts but there are some internals that Next.js does with the build to replace all references to the default loader import. This causes infinite loops trying to import the defined loaderFile.

The PR makes the default image component CatalystImage which uses the default loader as a fallback. BcImage was renamed to CatalystImage.

Testing

Screenshot 2024-12-05 at 18 55 42

Copy link

changeset-bot bot commented Dec 5, 2024

🦋 Changeset detected

Latest commit: 27fcdb6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@bigcommerce/catalyst-core Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

vercel bot commented Dec 5, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
catalyst-latest ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 6, 2024 4:33pm
catalyst-soul ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 6, 2024 4:33pm
3 Skipped Deployments
Name Status Preview Comments Updated (UTC)
catalyst ⬜️ Ignored (Inspect) Dec 6, 2024 4:33pm
catalyst-au ⬜️ Ignored (Inspect) Visit Preview Dec 6, 2024 4:33pm
catalyst-uk ⬜️ Ignored (Inspect) Visit Preview Dec 6, 2024 4:33pm

Copy link
Contributor Author

@chanceaclark chanceaclark left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll need to throw a PR up for https://www.catalyst.dev/docs/cdn-and-images.

Comment on lines -14 to -16
if (height) {
url = src.replace('{:size}', `${width}x${height}`);
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Height isn't actually supported by the image loader, so opted to remove.

Comment on lines -10 to -12
interface BcImageOptions {
lossy?: boolean;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lossy is done through the API now, so we can omit this prop.

@chanceaclark chanceaclark changed the title Feat/default bc image feat(core): default to local image component Dec 5, 2024
@chanceaclark chanceaclark marked this pull request as ready for review December 5, 2024 23:56
@chanceaclark chanceaclark requested a review from a team as a code owner December 5, 2024 23:56
core/.eslintrc.cjs Outdated Show resolved Hide resolved
Copy link
Collaborator

@migueloller migueloller left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we have an ESLint rule to enforce the proper import I wonder if we should just call the component Image instead of CatalystImage since we call the link component Link, not CatalystLink 🤔

Otherwise, LGTM 👍🏻

@apledger
Copy link

apledger commented Dec 6, 2024

Do we want to merge this into soul/main first and then update all the VIBES components?

@chanceaclark
Copy link
Contributor Author

Do we want to merge this into soul/main first and then update all the VIBES components?

Can we just do a rebase onto soul/main?

Copy link
Contributor

@jorgemoya jorgemoya left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lets merge this and we can rebase for other branches. 👍

@chanceaclark chanceaclark added this pull request to the merge queue Dec 7, 2024
Merged via the queue into main with commit 15edf31 Dec 7, 2024
15 of 17 checks passed
@chanceaclark chanceaclark deleted the feat/default-bc-image branch December 7, 2024 17:34
@github-actions github-actions bot mentioned this pull request Dec 4, 2024
Copy link
Contributor

github-actions bot commented Dec 7, 2024

⚡️🏠 Lighthouse report

Lighthouse ran against https://catalyst-latest-3uaamzui1-bigcommerce-platform.vercel.app

🖥️ Desktop

We ran Lighthouse against the changes on a desktop and produced this report. Here's the summary:

Category Score
🟠 Performance 80
🟢 Accessibility 96
🟢 Best practices 100
🟠 SEO 82

📱 Mobile

We ran Lighthouse against the changes on a mobile and produced this report. Here's the summary:

Category Score
🟢 Performance 93
🟢 Accessibility 96
🟢 Best practices 100
🟠 SEO 85

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants