feat: support types for config

also remove runtime* prefix from types

playground/nuxt.config.ts

@@ -1,4 +1,7 @@
-export default {
+import type { NuxtConfig } from '@nuxt/types'
+import '../src/types'
+
+export default <NuxtConfig> {
   components: true,
   target: 'server',
   modules: [
@@ -8,7 +11,10 @@ export default {
     '@nuxt/typescript-build'
   ],
   image: {
-    accept: ['nuxtjs.org', 'unsplash.com'],
+    accept: [
+      'nuxtjs.org',
+      'unsplash.com'
+    ],
     twicpics: {
       baseURL: 'https://nuxt-demo.twic.pics'
     },

playground/tsconfig.json

@@ -24,10 +24,11 @@
     },
     "types": [
       "@types/node",
-      "@nuxt/types"
+      "@nuxt/types",
+      "../src/types"
     ]
   },
   "exclude": [
     "node_modules"
   ]
-}
+}

src/provider.ts

@@ -1,10 +1,19 @@
 import { normalize } from 'upath'
-import type { ModuleOptions, ImageProvider, ProviderFactory, InputProvider } from './types'
+import type { ModuleOptions, ProviderFactory, InputProvider } from './types'
 import { hash } from './utils'
 import * as PROVIDERS from './providers'
 
-export function resolveProviders (nuxt, options: ModuleOptions): ImageProvider[] {
-  const providers: ImageProvider[] = []
+export interface ImageModuleProvider {
+  name: string
+  importName: string
+  options: any
+  provider: ProviderFactory
+  runtime: string
+  runtimeOptions: any
+}
+
+export function resolveProviders (nuxt, options: ModuleOptions): ImageModuleProvider[] {
+  const providers: ImageModuleProvider[] = []
 
   for (const key in options) {
     if (PROVIDERS[key]) {
@@ -19,7 +28,7 @@ export function resolveProviders (nuxt, options: ModuleOptions): ImageProvider[]
   return providers
 }
 
-export function resolveProvider (nuxt: any, key: string, input: InputProvider): ImageProvider {
+export function resolveProvider (nuxt: any, key: string, input: InputProvider): ImageModuleProvider {
   if (!input.name) {
     input.name = key
   }
@@ -40,7 +49,7 @@ export function resolveProvider (nuxt: any, key: string, input: InputProvider):
 
   // TODO: Check existence of runtime
 
-  return <ImageProvider> {
+  return <ImageModuleProvider> {
     ...input,
     runtime: normalize(runtime),
     importName: `${key}Runtime$${hash(runtime, 4)}`,

src/providers/cloudinary/runtime.ts

@@ -1,4 +1,4 @@
-import type { RuntimeProviderGetImage } from 'src'
+import type { ProviderGetImage } from 'src'
 import { createOperationsGenerator } from '@nuxt/image/runtime'
 
 const convertHextoRGBFormat = (value: string) => value.startsWith('#') ? value.replace('#', 'rgb_') : value
@@ -74,7 +74,7 @@ const defaultModifiers = {
   quality: 'auto'
 }
 
-export const getImage: RuntimeProviderGetImage = (src, { modifiers, baseURL }) => {
+export const getImage: ProviderGetImage = (src, { modifiers, baseURL }) => {
   const mergeModifiers = { ...defaultModifiers, ...modifiers }
 
   const srcWithoutExtension = src.replace(/\.[^/.]+$/, '')

src/providers/fastly/runtime.ts

@@ -1,4 +1,4 @@
-import type { RuntimeProviderGetImage } from 'src'
+import type { ProviderGetImage } from 'src'
 import { createOperationsGenerator } from '@nuxt/image/runtime'
 
 const operationsGenerator = createOperationsGenerator({
@@ -15,7 +15,7 @@ const operationsGenerator = createOperationsGenerator({
   formatter: (key, value) => `${key}=${value}`
 })
 
-export const getImage: RuntimeProviderGetImage = (src, { modifiers, baseURL }) => {
+export const getImage: ProviderGetImage = (src, { modifiers, baseURL }) => {
   const operations = operationsGenerator(modifiers)
   return {
     url: baseURL + src + '?' + operations

src/providers/imagekit/runtime.ts

@@ -1,4 +1,4 @@
-import type { RuntimeProviderGetImage } from 'src'
+import type { ProviderGetImage } from 'src'
 import { createOperationsGenerator } from '@nuxt/image/runtime'
 
 const operationsGenerator = createOperationsGenerator({
@@ -29,7 +29,7 @@ const operationsGenerator = createOperationsGenerator({
   formatter: (key, value) => `${key}-${value}`
 })
 
-export const getImage: RuntimeProviderGetImage = (src, { modifiers, baseURL }) => {
+export const getImage: ProviderGetImage = (src, { modifiers, baseURL }) => {
   let operations = operationsGenerator(modifiers)
   operations = operations.replace('c-pad_resize', 'cm-pad_resize')
   return {

src/providers/imgix/runtime.ts

@@ -1,4 +1,4 @@
-import type { RuntimeProviderGetImage } from 'src'
+import type { ProviderGetImage } from 'src'
 import { createOperationsGenerator } from '@nuxt/image/runtime'
 
 const operationsGenerator = createOperationsGenerator({
@@ -20,7 +20,7 @@ const operationsGenerator = createOperationsGenerator({
   formatter: (key, value) => `${key}=${value}`
 })
 
-export const getImage: RuntimeProviderGetImage = (src, { modifiers, baseURL }) => {
+export const getImage: ProviderGetImage = (src, { modifiers, baseURL }) => {
   const operations = operationsGenerator(modifiers)
   return {
     url: baseURL + src + '?' + operations

src/providers/local/runtime.ts

@@ -1,4 +1,4 @@
-import { RuntimeProviderGetImage } from 'src'
+import { ProviderGetImage } from 'src'
 import { hasProtocol, joinURL } from 'ufo'
 import { createOperationsGenerator } from '@nuxt/image/runtime'
 
@@ -23,7 +23,7 @@ const operationsGenerator = createOperationsGenerator({
   formatter: (key, value) => `${key}_${value}`
 })
 
-export const getImage: RuntimeProviderGetImage = (src, { modifiers, baseURL }) => {
+export const getImage: ProviderGetImage = (src, { modifiers, baseURL }) => {
   const format = modifiers.format || '_'
   delete modifiers.format
 

src/providers/twicpics/runtime.ts

@@ -1,4 +1,4 @@
-import type { RuntimeProviderGetImage } from 'src'
+import type { ProviderGetImage } from 'src'
 import { createMapper, createOperationsGenerator } from '@nuxt/image/runtime'
 
 const fits = createMapper({
@@ -28,7 +28,7 @@ const operationsGenerator = createOperationsGenerator({
   formatter: (key, value) => `${key}=${value}`
 })
 
-export const getImage: RuntimeProviderGetImage = (src, { modifiers, baseURL }) => {
+export const getImage: ProviderGetImage = (src, { modifiers, baseURL }) => {
   const { width, height, fit, ...providerModifiers } = modifiers
 
   if (width || height) {

src/runtime/meta.ts

@@ -1,7 +1,7 @@
-import type { RuntimeImageInfo } from '../types/image'
+import type { ImageInfo } from '../types/image'
 import type { ImageCTX } from './image'
 
-export async function imageMeta (ctx: ImageCTX, url): Promise<RuntimeImageInfo> {
+export async function imageMeta (ctx: ImageCTX, url): Promise<ImageInfo> {
   const cache = getCache(ctx)
 
   const cacheKey = 'image:meta:' + url
@@ -23,7 +23,7 @@ export async function imageMeta (ctx: ImageCTX, url): Promise<RuntimeImageInfo>
   return meta
 }
 
-async function _imageMeta (url): Promise<RuntimeImageInfo> {
+async function _imageMeta (url): Promise<ImageInfo> {
   if (process.client) {
     if (typeof Image === 'undefined') {
       throw new TypeError('Image not supported')

src/types/global.ts

@@ -1,4 +1,5 @@
 import type { $Image } from './image'
+import { ModuleOptions } from './module'
 
 declare module '@nuxt/types' {
   interface Context {
@@ -8,10 +9,21 @@ declare module '@nuxt/types' {
   interface NuxtAppOptions {
     $img: $Image
   }
+
+  interface Configuration {
+    image?: Partial<ModuleOptions>
+  }
 }
 
 declare module 'vue/types/vue' {
   interface Vue {
     $img: $Image
   }
 }
+
+declare module 'vuex/types/index' {
+  // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
+  interface Store<S> {
+    $img: $Image
+  }
+}

src/types/image.ts

@@ -1,4 +1,4 @@
-import type { AllowlistOptions, Matcher } from 'allowlist'
+import type { AllowlistOptions } from 'allowlist'
 
 export interface ImageModifiers {
   width: number
@@ -20,11 +20,11 @@ export interface ImageOptions {
   size?: String | Partial<ImageSize>[]
   provider?: string,
   preset?: string,
-  modifiers?: ImageModifiers
+  modifiers?: Partial<ImageModifiers>
   [key: string]: any
 }
 
-export interface RuntimeImageInfo {
+export interface ImageInfo {
   width: number,
   height: number,
   placeholder?: string,
@@ -33,14 +33,21 @@ export interface RuntimeImageInfo {
 export interface RuntimeImage {
   url: string,
   isStatic?: boolean,
-  getMeta?: () => Promise<RuntimeImageInfo>
+  getMeta?: () => Promise<ImageInfo>
+}
+
+export type ProviderGetImage = (src: string, options: ImageOptions) => RuntimeImage
+
+export interface RuntimeProvider {
+  defaults?: any
+  getImage: ProviderGetImage
 }
 
 export interface CreateImageOptions {
   providers: {
     [name: string]: {
       defaults: any,
-      provider: any
+      provider: RuntimeProvider
     }
   }
   presets: { [name: string]: ImageOptions }
@@ -53,7 +60,7 @@ export interface CreateImageOptions {
 export interface ResolvedImage {
   input: string
   image: RuntimeImage
-  provider: any
+  provider: RuntimeProvider
   preset: ImageOptions
 }
 
@@ -62,19 +69,19 @@ export interface $Image {
   [preset: string]: (source: string) => any
 }
 
-export interface RuntimePlaceholder extends RuntimeImageInfo {
+export interface RuntimePlaceholder extends ImageInfo {
   url: string;
 }
 
-export type RuntimeOperationFormatter = (key: string, value: string) => string
+export type OperationFormatter = (key: string, value: string) => string
 
-export type RuntimeOperationMapper = { [key: string]: string | false } | ((key: string) => string)
+export type OperationMapper = { [key: string]: string | false } | ((key: string) => string)
 
 export interface OperationGeneratorConfig {
-  keyMap?: RuntimeOperationMapper
-  formatter?: RuntimeOperationFormatter
+  keyMap?: OperationMapper
+  formatter?: OperationFormatter
   joinWith?: string
   valueMap?: {
-    [key: string]: RuntimeOperationMapper
+    [key: string]: OperationMapper
   }
 }

src/types/index.ts

@@ -2,4 +2,3 @@ import './global'
 
 export * from './image'
 export * from './module'
-export * from './provider'

src/types/module.ts

@@ -1,9 +1,22 @@
 import type { ImageOptions } from './image'
-import type { InputProvider } from './provider'
+
+export interface Provider {
+  runtime: string
+  runtimeOptions: any
+}
+
+export type ProviderFactory = (options: any) => Provider
+
+export interface InputProvider {
+  name?: string
+  provider?: string | ProviderFactory
+  options?: any
+  baseURL?: string
+}
 
 export interface ModuleOptions {
   provider: string
-  presets: ImageOptions[]
+  presets: Partial<ImageOptions>[]
   local: {
     baseURL: string
     dir: string
@@ -17,5 +30,12 @@ export interface ModuleOptions {
   providers: { [name: string]: InputProvider }
   accept: any
   intersectOptions: object
+
+  cloudinary: InputProvider,
+  fastly: InputProvider,
+  imagekit: InputProvider,
+  imgix: InputProvider,
+  twicpics: InputProvider,
+
   [provider: string]: InputProvider | any
 }

tsconfig.json

@@ -10,7 +10,8 @@
     ],
     "types": [
       "@nuxt/types",
-      "@types/node"
+      "@types/node",
+      "./src/types"
     ],
     "paths": {
       "@nuxt/image/*": [ "src/*" ]