8000 feat: Add support for custom provider modifiers in ImageModifiers int… by nathanchase · Pull Request #1844 · nuxt/image · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

feat: Add support for custom provider modifiers in ImageModifiers int… #1844

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.

Sign up for GitHub

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: Add support for custom provider modifiers in ImageModifiers int… #1844

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4089d9c
feat: Add support for custom provider modifiers in ImageModifiers int…
nathanchase May 16, 2025
f9d90c2
feat: Enhance type safety by adding generic support for providers in …
nathanchase May 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/runtime/composables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import type { H3Event } from 'h3'
import type { $Img } from '@nuxt/image'
import type { $Img, Img, ConfiguredImageProviders } from '@nuxt/image'

import { createImage } from './image'
import { imageOptions } from '#build/image-options.mjs'
import { useNuxtApp, useRuntimeConfig } from '#imports'

export const useImage = (event?: H3Event): $Img => {
export const useImage = <Provider extends keyof ConfiguredImageProviders = keyof ConfiguredImageProviders>(event?: H3Event): $Img<Provider> => {
const config = useRuntimeConfig()
const nuxtApp = useNuxtApp()

return nuxtApp.$img as $Img || nuxtApp._img || (nuxtApp._img = createImage({
return nuxtApp.$img as $Img<Provider> || nuxtApp._img as Img<Provider> || (nuxtApp._img = createImage({

Check failure on line 12 in src/runtime/composables.ts

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest) 

Conversion of type '$Img' to type 'Img<Provider>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
...imageOptions,
event: event || nuxtApp.ssrContext?.event,
nuxt: {
baseURL: config.app.baseURL,
},
runtimeConfig: config,
}))
})) as Img<Provider> as $Img<Provider>
}
6 changes: 3 additions & 3 deletions src/runtime/server/utils/image.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import type { H3Event } from 'h3'

import type { Img } from '@nuxt/image'
import type { Img, ConfiguredImageProviders } from '@nuxt/image'
import { createImage } from '../../image'

// @ts-expect-error virtual file
import { imageOptions } from '#internal/nuxt-image'
import { useRuntimeConfig } from '#imports'

export const useImage = (event?: H3Event): Img => {
export const useImage = <Provider extends keyof ConfiguredImageProviders = keyof ConfiguredImageProviders>(event?: H3Event): Img<Provider> => {
const config = useRuntimeConfig()

return createImage({
Expand All @@ -17,5 +17,5 @@ export const useImage = (event?: H3Event): Img => {
},
event,
runtimeConfig: config,
})
}) as Img<Provider>
}
2 changes: 1 addition & 1 deletion src/runtime/utils/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export interface BaseImageProps<Provider extends keyof ConfiguredImageProviders>
}

exp 10000 ort const useImageProps = <Provider extends keyof ConfiguredImageProviders>(props: BaseImageProps<Provider>) => {
const $img = useImage()
const $img = useImage<Provider>()

const providerOptions = computed(() => ({
provider: props.provider,
Expand Down
19 changes: 10 additions & 9 deletions src/types/image.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export interface ImageModifiers {
quality: string | number
background: string
blur: number
[key: string]: string | number | undefined // Support for any custom provider modifiers
}

export interface ResolvedImageModifiers extends ImageModifiers {
Expand Down Expand Up @@ -42,7 +43,7 @@ export interface ImageProvider<T> extends ImageModifierOptions {
supportsAlias?: boolean
}

export interface CreateImageOptions {
export interface CreateImageOptions<Provider extends keyof ConfiguredImageProviders = keyof ConfiguredImageProviders> {
providers: Record<keyof ConfiguredImageProviders, {
defaults: unknown
setup: () => ImageProvider<Record<string, unknown>>
Expand All @@ -52,7 +53,7 @@ export interface CreateImageOptions {
}
event?: H3Event
presets: { [name: string]: ImageOptions }
provider: string
provider: Provider
screens: Record<string, number>
alias: Record<string, string>
domains: string[]
Expand Down Expand Up @@ -80,21 +81,21 @@ export interface ImageSizes {
src?: string
}

export interface Img {
export interface Img<Provider extends keyof ConfiguredImageProviders = keyof ConfiguredImageProviders> {
(source: string, modifiers?: ImageOptions['modifiers'], options?: ImageOptions): ResolvedImage['url']
options: CreateImageOptions
options: CreateImageOptions<Provider>
getImage: (source: string, options?: ImageOptions) => ResolvedImage
getSizes: (source: string, options?: ImageOptions, sizes?: string[]) => ImageSizes
getMeta: (source: string, options?: ImageOptions) => Promise<ImageInfo>
}

export type $Img = Img & {
[preset: string]: $Img
export type $Img<Provider extends keyof ConfiguredImageProviders = keyof ConfiguredImageProviders> = Img<Provider> & {
[preset: string]: $Img<Provider>
}

export interface ImageCTX {
options: CreateImageOptions
$img?: $Img
export interface ImageCTX<Provider extends keyof ConfiguredImageProviders = keyof ConfiguredImageProviders> {
options: CreateImageOptions<Provider>
$img?: $Img<Provider>
}

export type OperationMapper<From, To> = Record<string | Extract<From, string | number>, To> | ((key?: From) => To | From | undefined)
Expand Down
Loading
0