fix: module imports

Author: stafyniaksacha

pnpm-lock.yaml

@@ -15,6 +15,7 @@ onMounted(() => {
   const image = new Image()
   image.onerror = async () => {
     image.onerror = null
+    // @ts-ignore
     fileStat.value = await $fetch(`/_media-viewer/stats?key=${props.assetKey}`)
     isImage.value = false
   }

src/runtime/components/MediaGalleryItem.vue

@@ -30,6 +30,7 @@ watchEffect(async () => {
     return
   }
 
+  // @ts-ignore
   previewState.stats = await $fetch(`/_media-viewer/stats?key=${selectedAssetKey.value}`)
 
   // reset preview state

src/runtime/components/MediaPreview.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 // @ts-ignore
-import { useRouter, useRoute, useAsyncData, useHead } from '#app'
+import { useRouter, useRoute, useHead, useFetch } from '#app'
 import { onKeyStroke } from '@vueuse/core'
 
 import MediaGallery from '../components/MediaGallery.vue'
@@ -15,14 +15,7 @@ const route = useRoute()
 const selectedAssetKey = computed(() => route.hash ? route.hash.substring(1) : '')
 
 // list available assets
-const { data: assets } = useAsyncData(async () => {
-  const data = await $fetch<string[]>('/_media-viewer/ls')
-
-  // sort by path/name to keep same order as in file system
-  data.sort()
-
-  return data
-})
+const { data: assets } = useFetch('/_media-viewer/ls')
 
 // extract directories/extensions filters
 const directoriesKeysPrefix = computed(() => {

src/runtime/pages/index.vue

@@ -1,6 +1,14 @@
+import { defineEventHandler } from 'h3'
+// @ts-ignore
+// eslint-disable-next-line import/named
+import { useStorage } from '#imports'
+
 export default defineEventHandler(async () => {
   const storage = useStorage()
   const keys = await storage.getKeys('root:public')
 
+  // sort by path/name to keep same order as in file system
+  keys.sort()
+
   return keys
 })

src/runtime/server/dev-routes/ls.ts

@@ -3,8 +3,11 @@ import { exec } from 'child_process'
 import { promisify } from 'util'
 import sizeOf from 'image-size'
 import { join } from 'pathe'
-import { AssetImageDimentions, AssetStats } from '../../shared'
-import { type ISizeCalculationResult, type ISize } from 'image-size/dist/types/interface'
+import { type ISize } from 'image-size/dist/types/interface'
+import { defineEventHandler, getQuery } from 'h3'
+import { AssetStats } from '../../shared'
+// @ts-ignore
+import { useRuntimeConfig } from '#imports'
 
 const execPromise = promisify(exec)
 const sizeOfPromise = promisify(sizeOf)
@@ -92,7 +95,7 @@ export default defineEventHandler(async (event) => {
   }
 
   // extract images specific informations
-  const dimensions: ISize & { mode?: 'portrait' | 'landscape' | 'square'; aspect?: string  } | undefined = mimetype.startsWith('image/') ? await sizeOfPromise(absolutePath).then(r => r) : undefined
+  const dimensions: ISize & { mode?: 'portrait' | 'landscape' | 'square'; aspect?: string } | undefined = mimetype.startsWith('image/') ? await sizeOfPromise(absolutePath).then(r => r) : undefined
   const source = mimetype.startsWith('image/svg') ? await fsp.readFile(absolutePath, 'utf-8') : undefined
 
   // compute mode and aspect ratio

src/runtime/server/dev-routes/stats.ts

@@ -3,11 +3,13 @@
 // initial goal was to not use /_ipx prefix and plug this middleware directly on public folder but seems not possible
 
 import { createIPX } from 'ipx'
-import { send, appendHeader } from 'h3'
+import { send, appendHeader, defineEventHandler, setResponseStatus, getHeader } from 'h3'
 import qs from 'qs'
 import getEtag from 'etag'
-
 // @ts-ignore
+// eslint-disable-next-line import/named
+import { useRuntimeConfig } from '#imports'
+
 const config = useRuntimeConfig()
 const dir = config.mediaViewer.publicRoot
 
@@ -18,11 +20,12 @@ const ipx = createIPX({
 
 // @ts-ignore
 export default defineEventHandler(async (event) => {
-  if (!event.req.url.startsWith('/_ipx')) {
+  const url = event.node.req.url
+  if (!url || !url.startsWith('/_ipx')) {
     return
   }
 
-  const [originalPath, query] = event.req.url.replace('/_ipx', '').split('?')
+  const [originalPath, query] = url.replace('/_ipx', '').split('?')
   const modifiers = qs.parse(query) as Record<string, string>
   const img = ipx(originalPath, modifiers, {})
 
@@ -35,9 +38,10 @@ export default defineEventHandler(async (event) => {
 
     // Caching headers
     if (src.mtime) {
-      if (event.req.headers['if-modified-since']) {
-        if (new Date(event.req.headers['if-modified-since']) >= src.mtime) {
-          event.res.statusCode = 304
+      const ifModifiedSince = getHeader(event, 'if-modified-since')
+      if (ifModifiedSince) {
+        if (new Date(ifModifiedSince) >= src.mtime) {
+          event.node.res.statusCode = 304
           return null
         }
       }
@@ -53,8 +57,8 @@ export default defineEventHandler(async (event) => {
     // ETag
     const etag = getEtag(data)
     appendHeader(event, 'ETag', etag)
-    if (etag && event.req.headers['if-none-match'] === etag) {
-      event.res.statusCode = 304
+    if (etag && event.node.req.headers['if-none-match'] === etag) {
+      setResponseStatus(event, 304)
       return null
     }
 
@@ -65,6 +69,6 @@ export default defineEventHandler(async (event) => {
     const statusMessage = error.message ? `IPX Error (${error.message})` : `IPX Error (${statusCode})`
     console.error(statusMessage)
 
-    event.res.statusCode = statusCode
+    setResponseStatus(event, statusCode)
   }
 })

src/runtime/server/middlewares/ipx.ts

@@ -1,8 +1,9 @@
+import type { PreviewState } from '../preview'
 import { generateHtmlSnippet } from './html'
 import { generateInlineSvgSnippet } from './inline'
 import { generateNuxtImageSnippet } from './nuxt-image'
 
-export function generateSnippet (previewState) {
+export function generateSnippet (previewState: PreviewState) {
   // @ts-ignore
   if (!previewState.stats || process.server) {
     return ''