feat: user-defined presets

playground/nuxt.config.ts

@@ -8,6 +8,14 @@ export default {
   ],
   image: {
     defaultProvider: 'twicpics',
+    presets: [
+      {
+        name: 's50',
+        modifiers: {
+          contain: '50x50'
+        }
+      }
+    ],
     providers: {
       local: {},
       twicpics: {

playground/pages/index.vue

@@ -5,6 +5,11 @@
       :width="300"
       :height="400"
     />
+    <nuxt-image
+      src="local+s50:images/holly-pezant-FiwHZ935FLE-unsplash.jpg"
+      :width="50"
+      :height="50"
+    />
     <span>Photo by <a href="https://unsplash.com/@sequence_studio?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Holly Pezant</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
 
     <nuxt-image

src/module.ts

@@ -9,6 +9,7 @@ async function ImageModule (moduleOptions) {
     const { nuxt, addServerMiddleware, addPlugin } = this
 
     const options: ModuleOptions = {
+        presets: [],
         ...nuxt.options.image,
         ...moduleOptions
     }
@@ -18,6 +19,16 @@ async function ImageModule (moduleOptions) {
         options.providers = { local: {} }
     }
 
+    // Add default `lqip` preset
+    if (!options.presets.some(preset => preset.name === 'lqip')) {
+        options.presets.unshift({
+            name: 'lqip',
+            modifiers: {
+              contain: '20x20'
+            }
+        })
+    }
+
     // Apply local defaults
     if (options.providers.local) {
         options.providers.local = {
@@ -66,7 +77,8 @@ async function ImageModule (moduleOptions) {
     const pluginOptions = {
         defaultProvider: options.defaultProvider,
         imports: {} as { [name: string]: string },
-        providers: [] as {  name: string, import: string, options: any }[]
+        providers: [] as {  name: string, import: string, options: any }[],
+        presets: options.presets
     }
 
     for (const p of providers) {

src/runtime/image.ts

@@ -1,35 +1,61 @@
 import { RuntimeProvider, ImageModifiers } from '../types'
 
+interface ImagePreset {
+  name: string
+  modifiers: any
+  provider?: string
+}
 interface CreateImageOptions {
   providers: {
     [name: string]: {
       defaults: any
       provider: RuntimeProvider
     }
   }
+  presets: ImagePreset[]
   defaultProvider: string
 }
 
-export function createImage({  providers, defaultProvider }: CreateImageOptions) {
+export function createImage({  providers, defaultProvider, presets }: CreateImageOptions) {
+  const presetMap = presets.reduce((map, preset) => {
+    map[preset.name] = preset
+    return map
+  }, {})
   function image(src: string, modifiers: ImageModifiers, options: any = {}) {
     if (src.includes(':')) {
-      const [srcProvider, ...rest] = src.split(':')
+      const [srcConfig, ...rest] = src.split(':')
       src = rest.join(':')
-      options.provider = srcProvider
+      const [provider, preset] = srcConfig.split('+')
+
+      options.provider = provider || options.provider
+      options.preset = preset || options.preset
     }
 
     const p = providers[options.provider || defaultProvider]
     if (!p) {
       throw new Error('Unsupported provided ' + options.provider)
     }
+
+    if (options.preset && !presetMap[options.preset]) {
+      throw new Error('Unsupported preset ' + options.preset)
+    }
+
     const { provider, defaults } = p
-    return provider.generateURL(src, modifiers, { ...defaults, ...options })
+    return provider.generateURL(
+      src,
+      presetMap[options.preset] ? presetMap[options.preset].modifiers : modifiers,
+      { ...defaults, ...options }
+    )
   }
 
-  // TODO: generalize for presets
-  image.lqip = (src) => {
-    return image(src, { contain: '20x20' })
-  }
+  presets.forEach(preset => {
+    image[preset.name] = (src) => {
+      return image(src, preset.modifiers, {
+        provider: preset.provider
+      })
+    }
+  })
+
   image.$observer = createObserver()
 
   return image

src/types.ts

@@ -1,12 +1,19 @@
 export interface ModuleOptions {
     defaultProvider: string;
+    presets: ImagePreset[],
     providers: {
       local: LocalOptions
       [name: string]: any
     }
     provider: object;
 }
 
+export interface ImagePreset {
+  name: string
+  modifiers: any
+  provider?: string
+}
+
 export type ProviderFactory = (options: any) => Provider
 
 export interface Provider {

templates/plugin.js

@@ -16,7 +16,8 @@ providers['<%= provider.name %>'] = {
 
 const image = createImage({
     providers,
-    defaultProvider: '<%= options.defaultProvider %>'
+    defaultProvider: '<%= options.defaultProvider %>',
+    presets: <%= devalue(options.presets) %>
 })