refactor!: remove unused runtime utilities and simplify code (#1816)

Author: danielroe

knip.json

@@ -5,11 +5,15 @@
       "entry": [
         "build.config.ts",
         "src/module.ts",
-        "src/runtime/**",
+        "src/runtime/index.ts",
+        "src/runtime/components/**",
+        "src/runtime/composables/**",
+        "src/runtime/plugins/**",
+        "src/runtime/providers/**",
+        "src/runtime/server/**",
         "scripts/*"
       ],
       "ignoreUnresolved": [
-        "#app/nuxt",
         "#internal/nuxt-image"
       ],
       "ignoreDependencies": [
@@ -38,8 +42,7 @@
         "ohash",
         "@vueuse/core",
         "@vueuse/nuxt",
-        "nuxt-og-image",
-        "perfect-debounce"
+        "nuxt-og-image"
       ]
     },
     "example": {
@@ -54,9 +57,6 @@
         "{app,error}.vue",
         "layers/**",
         "*.ts"
-      ],
-      "ignoreDependencies": [
-        "@nuxt/image"
       ]
     }
   }

src/ipx.ts

@@ -63,7 +63,7 @@ export const ipxSetup: IPXSetupT = setupOptions => (providerOptions, moduleOptio
   const ipxHandler = <NitroEventHandler>{
     route: `${ipxBaseURL}/**`,
     middleware: false,
-    handler: resolver.resolve('./runtime/ipx'),
+    handler: resolver.resolve('./runtime/server/routes/_ipx'),
   }
 
   if (!setupOptions?.isStatic) {

src/module.ts

@@ -195,7 +195,7 @@ ${BuiltInProviders.map(p => `            ${JSON.stringify(p)}: ReturnType<typeof
 
     if (options.inject) {
       // Add runtime plugin
-      addPlugin({ src: resolver.resolve('./runtime/plugin') })
+      addPlugin({ src: resolver.resolve('./runtime/plugins/image') })
     }
 
     // TODO: Transform asset urls that pass to `src` attribute on image components

src/runtime/components/NuxtImg.vue

@@ -2,22 +2,14 @@
   <img
     v-if="!custom"
     ref="imgEl"
-    :class="placeholder && !placeholderLoaded ? placeholderClass : undefined"
-    v-bind="{
-      ...isServer ? { onerror: 'this.setAttribute(\'data-error\', 1)' } : {},
-      ...imgAttrs,
-      ...attrs,
-    }"
+    :class="placeholder ? placeholderClass : undefined"
+    v-bind="imgAttrs"
     :src="src"
   >
   <slot
     v-else
     v-bind="{
-      ...isServer ? { onerror: 'this.setAttribute(\'data-error\', 1)' } : {},
-      imgAttrs: {
-        ...imgAttrs,
-        ...attrs,
-      },
+      imgAttrs,
       isLoaded: placeholderLoaded,
       src,
     }"
@@ -30,11 +22,10 @@ import type { ImgHTMLAttributes } from 'vue'
 import type { ProviderDefaults, ConfiguredImageProviders } from '@nuxt/image'
 
 import { useImage } from '../composables'
-import { parseSize } from '../utils'
 import { prerenderStaticImages } from '../utils/prerender'
 import { markFeatureUsage } from '../utils/performance'
-import { useImageModifiers, useNormalisedAttrs, useProviderOptions } from './_base'
-import type { BaseImageProps } from './_base'
+import { useImageProps } from '../utils/props'
+import type { BaseImageProps } from '../utils/props'
 
 import { useHead, useNuxtApp, useRequestEvent } from '#imports'
 
@@ -44,86 +35,73 @@ export interface ImageProps<Provider extends keyof ConfiguredImageProviders> ext
   placeholderClass?: string
 }
 
-const attrs = useAttrs() as ImgHTMLAttributes
 const props = defineProps<ImageProps<Provider>>()
 
 const emit = defineEmits<{
   (event: 'load', payload: Event): unknown
   (event: 'error', payload: string | Event): unknown
 }>()
 
-defineSlots<{
-  default(props: {
-    imgAttrs: ImgHTMLAttributes
-    isLoaded: boolean
-    src?: string
-  }): any
-}>()
-
-const isServer = import.meta.server
-
-const modifiers = useImageModifiers(props)
+defineSlots<{ default(props: DefaultSlotProps): any }>()
 
 const $img = useImage()
-const providerOptions = useProviderOptions(props)
+const { providerOptions, normalizedAttrs, imageModifiers } = useImageProps(props)
 
 const sizes = computed(() => $img.getSizes(props.src!, {
   ...providerOptions.value,
   sizes: props.sizes,
   densities: props.densities,
-  modifiers: {
-    ...modifiers.value,
-    width: parseSize(props.width),
-    height: parseSize(props.height),
-  },
+  modifiers: imageModifiers.value,
 }))
 
 const placeholderLoaded = ref(false)
-const baseAttrs = useNormalisedAttrs(props)
 
+const attrs = useAttrs() as ImgHTMLAttributes
 const imgAttrs = computed(() => ({
-  ...baseAttrs.value,
+  ...normalizedAttrs.value,
   'data-nuxt-img': '',
   ...(!props.placeholder || placeholderLoaded.value)
     ? { sizes: sizes.value.sizes, srcset: sizes.value.srcset }
     : {},
+  ...import.meta.server ? { onerror: 'this.setAttribute(\'data-error\', 1)' } : {},
+  ...attrs,
 }))
 
 const placeholder = computed(() => {
-  let placeholder = props.placeholder
-
-  if (placeholder === '') {
-    placeholder = true
+  if (placeholderLoaded.value) {
+    return false
   }
 
-  if (!placeholder || placeholderLoaded.value) {
+  const placeholder = props.placeholder === '' ? [10, 10] : props.placeholder
+
+  if (!placeholder) {
     return false
   }
 
   if (typeof placeholder === 'string') {
     return placeholder
   }
 
-  const size = (Array.isArray(placeholder)
+  const [width = 10, height = width, quality = 50, blur = 3] = Array.isArray(placeholder)
     ? placeholder
-    : (typeof placeholder === 'number' ? [placeholder, placeholder] : [10, 10])) as [w: number, h: number, q: number, b: number]
+    : typeof placeholder === 'number' ? [placeholder] : []
 
   return $img(props.src!, {
-    ...modifiers.value,
-    width: size[0],
-    height: size[1],
-    quality: size[2] || 50,
-    blur: size[3] || 3,
+    ...imageModifiers.value,
+    width,
+    height,
+    quality,
+    blur,
   }, providerOptions.value)
 })
 
 const mainSrc = computed(() =>
   props.sizes
     ? sizes.value.src
-    : $img(props.src!, modifiers.value, providerOptions.value),
+    : $img(props.src!, imageModifiers.value, providerOptions.value),
 )
 
-const src = computed(() => placeholder.value ? placeholder.value : mainSrc.value)
+const src = computed(() => placeholder.value || mainSrc.value)
 
 if (import.meta.server && props.preload) {
   const isResponsive = Object.values(sizes.value).every(v => v)
@@ -203,3 +181,11 @@ onMounted(() => {
   }
 })
 </script>
+
+<script lang="ts">
+export interface DefaultSlotProps {
+  imgAttrs: ImgHTMLAttributes
+  isLoaded: boolean
+  src?: string
+}
+</script>