WIP: [image] Fixing SSR support and improving error validation #4013
Conversation
🦋 Changeset detectedLatest commit: 56ed3e2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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
bot
added
the
pkg: integration
tony-sull
force-pushed
the
fix/image-ssr-support
branch
from
d1cd662
to
2c1b9e1
Compare
… for copying original assets
tony-sull
force-pushed
the
fix/image-ssr-support
branch
from
a03e343
to
1cf7c94
Compare
| import { isRemoteImage, loadRemoteImage, loadLocalImage } from '../utils/images.js'; | ||
| import type { SSRImageService, TransformOptions } from '../types.js'; | ||
|
|
||
| export interface SSGBuildParams { |
There was a problem hiding this comment.
build step for generating SSG images moved out of the main integration
| } | ||
|
|
||
| export async function ssrBuild({ srcDir, outDir }: SSRBuildParams) { | ||
| const images = await globImages(srcDir); |
There was a problem hiding this comment.
SSR build step moved out of the main integration
This was actually a bug uncovered while fixing the undefined error, original images weren't being copied to dist for SSR
|
|
||
| const inputBuffer = await loadRemoteImage(href.toString()); | ||
| if (isRemoteImage(transform.src)) { |
There was a problem hiding this comment.
in SSR, looking up the original files that were copied to dist during the build
| @@ -1,14 +1,15 @@ | |||
| import slash from 'slash'; | |||
| import { ROUTE_PATTERN } from './constants.js'; | |||
| import { ROUTE_PATTERN } from '../constants.js'; | |||
| import sharp from '../loaders/sharp.js'; | |||
There was a problem hiding this comment.
TEMP: avoiding another globalThis here by depending on the sharp import
When we add squoosh, this will import from a helper that checks if sharp is installed first
|
|
||
| if (!loader) { | ||
| // @ts-ignore | ||
| const { default: mod } = await import('virtual:image-loader'); |
There was a problem hiding this comment.
Lazy importing the loader so it's only imported if/when the getImage() helper is used
| @@ -84,6 +84,9 @@ class SharpService implements SSRImageService { | |||
| async transform(inputBuffer: Buffer, transform: TransformOptions) { | |||
| const sharpImage = sharp(inputBuffer, { failOnError: false }); | |||
|
|
|||
| // always call rotate to adjust for EXIF data orientation | |||
| sharpImage.rotate(); | |||
There was a problem hiding this comment.
Follow-up to #4021, sharp needs to rotate the image based on EXIF data
Changes
undefinederror hit in SSR deployments (related to the use ofglobalThis)srcweren't being copied to dist for SSR buildsTesting
Docs
Stay tuned! A follow-up PR will include README updates with much more detail on the built-in components