feat!: typed providers + modifiers (#1802)

Author: danielroe

build.config.ts

@@ -1,11 +1,19 @@
+import { cp, readdir, rm } from 'node:fs/promises'
 import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
-  rollup: {
-    emitCJS: false,
-    cjsBridge: false,
-  },
   externals: [
     'ipx',
   ],
+  hooks: {
+    'rollup:done': async function () {
+      // temporary solution for this PR while I create fix in `mkdist` (relative module extensions not correct when referring outside)
+      for (const file of await readdir('dist')) {
+        if (file.endsWith('.mjs') || file.endsWith('.d.mts')) {
+          await cp(`dist/${file}`, `dist/${file.replace('.mjs', '.js').replace('.d.mts', '.d.ts')}`)
+          await rm(`dist/${file}`)
+        }
+      }
+    },
+  },
 })

docs/content/4.advanced/1.custom-provider.md

@@ -9,26 +9,24 @@ The runtime will receive a source, image modifiers and its provider options. It
 
 ```ts [providers/my-provider.ts]
 import { joinURL } from 'ufo'
-import type { ProviderGetImage } from '@nuxt/image'
-import { createOperationsGenerator } from '#image'
+import { createOperationsGenerator, defineProvider } from '#image'
 
 const operationsGenerator = createOperationsGenerator()
 
-export const getImage: ProviderGetImage = (
-  src,
-  { modifiers = {}, baseURL } = {}
-) => {
-  if (!baseURL) {
-    // also support runtime config 
-    baseURL = useRuntimeConfig().public.siteUrl
-  }
+export default defineProvider<{ baseURL?: string }>({
+  getImage (src, { modifiers, baseURL }) => {
+    if (!baseURL) {
+      // also support runtime config 
+      baseURL = useRuntimeConfig().public.siteUrl
+    }
 
-  const operations = operationsGenerator(modifiers)
+    const operations = operationsGenerator(modifiers)
 
-  return {
-    url: joinURL(baseURL, src + (operations ? '?' + operations : ''))
+    return {
+      url: joinURL(baseURL, src + (operations ? '?' + operations : ''))
+    }
   }
-}
+})
 ```
 
 ### Parameters

package.json

@@ -11,13 +11,13 @@
   "sideEffects": false,
   "type": "module",
   "exports": {
-    ".": "./dist/module.mjs"
+    ".": "./dist/module.js"
   },
-  "main": "./dist/module.mjs",
+  "main": "./dist/module.js",
   "typesVersions": {
     "*": {
       ".": [
-        "./dist/module.d.mts"
+        "./dist/module.d.ts"
       ]
     }
   },

playground/pages/provider/[provider].vue

@@ -9,7 +9,7 @@
           :key="sample.src"
         >
           <nuxt-img
-            :provider="provider.name"
+            :provider="provider.name as any"
             v-bind="sample"
             :preload="{ fetchPriority: 'auto' }"
           />

playground/providers.ts

@@ -1,5 +1,7 @@
+import type { ImageProviders } from '@nuxt/image'
+
 export interface Provider {
-  name: string
+  name: keyof ImageProviders
   samples: {
     src: string
     from?: string

playground/providers/custom/index.ts

@@ -1,9 +1,11 @@
 import { joinURL } from 'ufo'
-import type { ProviderGetImage } from '../../../src/types' // '@nuxt/image'
+import { defineProvider } from '#image'
 
-export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL = '/' } = {}) => {
-  const operationsString = `w_${modifiers.width}&h_${modifiers.height}`
-  return {
-    url: joinURL(baseURL, operationsString, src),
-  }
-}
+export default defineProvider<{ baseURL?: string }>({
+  getImage: (src, { modifiers, baseURL = '/' }) => {
+    const operationsString = `w_${modifiers.width}&h_${modifiers.height}`
+    return {
+      url: joinURL(baseURL, operationsString, src),
+    }
+  },
+})