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

Improving support for third-party hosted image services #3957

Merged
merged 6 commits into from
Jul 18, 2022

Conversation

tony-sull
Copy link
Contributor

Changes

Updating the image integration to handle a specific use case for hosted image services. When using a hosted image service like Cloudinary or Vercel, astro dev should still use the built-in sharp image service for local images

Why?

Local images may not have been published to production yet and wouldn't be available to the hosted services

Testing

All existing tests should pass - not quite sure the best way to automate a test that would use a fake hosted image service

Docs

README updated with details on how the image integration works with hosted services in astro dev

@changeset-bot
Copy link

changeset-bot bot commented Jul 18, 2022

🦋 Changeset detected

Latest commit: 582ea9b

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

This PR includes changesets to release 1 package
Name Type
@astrojs/image Patch

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

@github-actions github-actions bot added the pkg: integration Related to any renderer integration (scope) label Jul 18, 2022
import { loadImage } from '../utils.js';

export const get: APIRoute = async ({ request }) => {
const loader = globalThis.astroImage.ssrLoader;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fix pt. 1 - getImage() in dev will now only build a _image? src for local images. The endpoint can always use the ssrLoader global (currently defaults to the built-in sharp service)

const isDev = globalThis.astroImage.command === 'dev';
const isLocalImage = !isRemoteImage(resolved.src);

const _loader = isDev && isLocalImage ? globalThis.astroImage.ssrLoader : loader;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fix pt. 2 - getImage() will always use the ssrLoader for local images during development

This makes sure that we don't build a src to a third-party service like Cloudinary for local images that aren't published yet

}

declare global {
var astroImage: ImageIntegration;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Making typescript happy with a globalThis definition 🎉

@tony-sull tony-sull self-assigned this Jul 18, 2022
@tony-sull tony-sull merged commit 2a7dd04 into main Jul 18, 2022
@tony-sull tony-sull deleted the feat/hosted-image-services branch July 18, 2022 19:43
@astrobot-houston astrobot-houston mentioned this pull request Jul 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pkg: integration Related to any renderer integration (scope)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants