diff options
Diffstat (limited to 'packages/integrations/image/src/index.ts')
| -rw-r--r-- | packages/integrations/image/src/index.ts | 78 |
1 files changed, 51 insertions, 27 deletions
diff --git a/packages/integrations/image/src/index.ts b/packages/integrations/image/src/index.ts index 7f1e1b456..43cf8fd1e 100644 --- a/packages/integrations/image/src/index.ts +++ b/packages/integrations/image/src/index.ts @@ -2,10 +2,21 @@ import fs from 'fs/promises'; import path from 'path'; import { fileURLToPath } from 'url'; import slash from 'slash'; -import { ensureDir, isRemoteImage, loadLocalImage, loadRemoteImage, propsToFilename } from './utils.js'; +import { + ensureDir, + isRemoteImage, + loadLocalImage, + loadRemoteImage, + propsToFilename, +} from './utils.js'; import { createPlugin } from './vite-plugin-astro-image.js'; import type { AstroConfig, AstroIntegration } from 'astro'; -import type { ImageAttributes, IntegrationOptions, SSRImageService, TransformOptions } from './types'; +import type { + ImageAttributes, + IntegrationOptions, + SSRImageService, + TransformOptions, +} from './types'; const PKG_NAME = '@astrojs/image'; const ROUTE_PATTERN = '/_image'; @@ -13,15 +24,18 @@ const OUTPUT_DIR = '/_image'; /** * Gets the HTML attributes required to build an `<img />` for the transformed image. - * + * * @param loader @type {ImageService} The image service used for transforming images. * @param transform @type {TransformOptions} The transformations requested for the optimized image. * @returns @type {ImageAttributes} The HTML attributes to be included on the built `<img />` element. */ -export async function getImage(loader: SSRImageService, transform: TransformOptions): Promise<ImageAttributes> { +export async function getImage( + loader: SSRImageService, + transform: TransformOptions +): Promise<ImageAttributes> { (globalThis as any).loader = loader; - const attributes = await loader.getImageAttributes(transform); + const attributes = await loader.getImageAttributes(transform); // For SSR services, build URLs for the injected route if (typeof loader.transform === 'function') { @@ -32,14 +46,15 @@ export async function getImage(loader: SSRImageService, transform: TransformOpti (globalThis as any)?.addStaticImage(transform); } - const src = globalThis && (globalThis as any).filenameFormat - ? (globalThis as any).filenameFormat(transform, searchParams) - : `${ROUTE_PATTERN}?${searchParams.toString()}`; + const src = + globalThis && (globalThis as any).filenameFormat + ? (globalThis as any).filenameFormat(transform, searchParams) + : `${ROUTE_PATTERN}?${searchParams.toString()}`; - return { - ...attributes, - src: slash(src), // Windows compat - } + return { + ...attributes, + src: slash(src), // Windows compat + }; } // For hosted services, return the <img /> attributes as-is @@ -49,7 +64,7 @@ export async function getImage(loader: SSRImageService, transform: TransformOpti const createIntegration = (options: IntegrationOptions = {}): AstroIntegration => { const resolvedOptions = { serviceEntryPoint: '@astrojs/image/sharp', - ...options + ...options, }; // During SSG builds, this is used to track all transformed images required. @@ -59,10 +74,8 @@ const createIntegration = (options: IntegrationOptions = {}): AstroIntegration = function getViteConfiguration() { return { - plugins: [ - createPlugin(_config, resolvedOptions) - ] - } + plugins: [createPlugin(_config, resolvedOptions)], + }; } return { @@ -80,23 +93,31 @@ const createIntegration = (options: IntegrationOptions = {}): AstroIntegration = // Added to globalThis to share the same map in Node and Vite (globalThis as any).addStaticImage = (transform: TransformOptions) => { staticImages.set(propsToFilename(transform), transform); - } + }; // TODO: Add support for custom, user-provided filename format functions - (globalThis as any).filenameFormat = (transform: TransformOptions, searchParams: URLSearchParams) => { + (globalThis as any).filenameFormat = ( + transform: TransformOptions, + searchParams: URLSearchParams + ) => { if (mode === 'ssg') { return isRemoteImage(transform.src) ? path.join(OUTPUT_DIR, path.basename(propsToFilename(transform))) - : path.join(OUTPUT_DIR, path.dirname(transform.src), path.basename(propsToFilename(transform))); + : path.join( + OUTPUT_DIR, + path.dirname(transform.src), + path.basename(propsToFilename(transform)) + ); } else { return `${ROUTE_PATTERN}?${searchParams.toString()}`; } - } + }; if (mode === 'ssr') { injectRoute({ pattern: ROUTE_PATTERN, - entryPoint: command === 'dev' ? '@astrojs/image/endpoints/dev' : '@astrojs/image/endpoints/prod' + entryPoint: + command === 'dev' ? '@astrojs/image/endpoints/dev' : '@astrojs/image/endpoints/prod', }); } }, @@ -111,7 +132,10 @@ const createIntegration = (options: IntegrationOptions = {}): AstroIntegration = // try to load the remote image inputBuffer = await loadRemoteImage(transform.src); - const outputFileURL = new URL(path.join('./', OUTPUT_DIR, path.basename(filename)), dir); + const outputFileURL = new URL( + path.join('./', OUTPUT_DIR, path.basename(filename)), + dir + ); outputFile = fileURLToPath(outputFileURL); } else { const inputFileURL = new URL(`.${transform.src}`, _config.srcDir); @@ -131,9 +155,9 @@ const createIntegration = (options: IntegrationOptions = {}): AstroIntegration = ensureDir(path.dirname(outputFile)); await fs.writeFile(outputFile, data); } - } - } - } -} + }, + }, + }; +}; export default createIntegration; |