feat(ipx): support nuxt layers (#1177)

package.json

@@ -52,7 +52,7 @@
     "eslint": "8.56.0",
     "globby": "^14.0.0",
     "happy-dom": "^13.1.4",
-    "ipx": "^2.0.2",
+    "ipx": "^2.1.0",
     "jiti": "1.21.0",
     "nuxt": "^3.9.2",
     "playwright-core": "^1.41.0",
@@ -63,7 +63,7 @@
     "vue-tsc": "^1.8.27"
   },
   "optionalDependencies": {
-    "ipx": "^2.0.2"
+    "ipx": "^2.1.0"
   },
   "packageManager": "[email protected]",
   "resolutions": {

playground/layers/example/nuxt.config.ts

@@ -0,0 +1 @@
+export default defineNuxtConfig({})

playground/layouts/default.vue

@@ -14,6 +14,9 @@
         <NuxtLink to="/events">
           Events
         </NuxtLink>
+        <NuxtLink to="/ipx-layers">
+          IPX Layers
+        </NuxtLink>
       </li>
       <li>
         <ProviderSelector />

playground/nuxt.config.ts

@@ -2,6 +2,7 @@ import { defineNuxtConfig } from 'nuxt/config'
 
 export default defineNuxtConfig({
   modules: ['@nuxt/image'],
+  extends: ['./layers/example'],
   image: {
     inject: true,
     domains: [

playground/pages/ipx-layers.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <h1>Original</h1>
+    <nuxt-img
+      src="/images/colors.jpg"
+      width="500"
+      height="500"
+      @load="isLoadedRoot = true"
+    />
+    <p>Received onLoad event: {{ isLoadedRoot }}</p>
+
+    <h1>Layer</h1>
+    <nuxt-img
+      src="/images/colors-layer.jpg"
+      width="500"
+      height="500"
+      @load="isLoadedLayer = true"
+    />
+    <p>Received onLoad event: {{ isLoadedLayer }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from '#imports'
+
+const isLoadedRoot = ref(false)
+const isLoadedLayer = ref(false)
+</script>

src/ipx.ts

@@ -1,3 +1,4 @@
+import { existsSync } from 'node:fs'
 import { relative, resolve } from 'pathe'
 import { useNuxt, createResolver, useNitro } from '@nuxt/kit'
 import type { NitroEventHandler } from 'nitropack'
@@ -27,7 +28,13 @@ export const ipxSetup: IPXSetupT = setupOptions => (providerOptions, moduleOptio
   }
 
   // Options
-  const absoluteDir = resolve(nuxt.options.srcDir, moduleOptions.dir || nuxt.options.dir.public)
+  const publicDirs = nuxt.options._layers.map((layer) => {
+    const isRootLayer = layer.config.rootDir === nuxt.options.rootDir
+    const layerOptions = isRootLayer ? nuxt.options : layer.config
+    const path = isRootLayer ? moduleOptions.dir : layerOptions.dir?.public || 'public'
+
+    return resolve(layerOptions.srcDir, path)
+  }).filter(dir => existsSync(dir))
   const relativeDir = relative(nitro.options.output.serverDir, nitro.options.output.publicDir)
   const ipxOptions: IPXRuntimeConfig = {
     ...providerOptions.options,
@@ -37,7 +44,7 @@ export const ipxSetup: IPXSetupT = setupOptions => (providerOptions, moduleOptio
       ...providerOptions.options?.alias
     },
     fs: (providerOptions.options?.fs !== false) && {
-      dir: nuxt.options.dev ? absoluteDir : relativeDir,
+      dir: nuxt.options.dev ? publicDirs : relativeDir,
       ...providerOptions.options?.fs
     },
     http: (providerOptions.options?.http !== false) && {
@@ -61,7 +68,7 @@ export const ipxSetup: IPXSetupT = setupOptions => (providerOptions, moduleOptio
 
   // Prerenderer
   if (!nitro.options.dev) {
-    nitro.options._config.runtimeConfig.ipx = defu({ fs: { dir: absoluteDir } }, ipxOptions)
+    nitro.options._config.runtimeConfig.ipx = defu({ fs: { dir: publicDirs } }, ipxOptions)
     nitro.options._config.handlers!.push(ipxHandler)
   }
 }

src/runtime/ipx.ts

@@ -10,7 +10,7 @@ export default lazyEventHandler(() => {
   const opts = useRuntimeConfig().ipx as NitroRuntimeConfig['ipx'] || {} as Record<string, never>
 
   // TODO: Migrate to unstorage layer
-  const fsDir = opts.fs?.dir ? isAbsolute(opts.fs.dir) ? opts.fs.dir : fileURLToPath(new URL(opts.fs.dir, import.meta.url)) : undefined
+  const fsDir = opts?.fs?.dir ? (Array.isArray(opts.fs.dir) ? opts.fs.dir : [opts.fs.dir]).map(dir => isAbsolute(dir) ? dir : fileURLToPath(new URL(dir, import.meta.url))) : undefined
 
   const fsStorage = opts.fs?.dir ? ipxFSStorage({ ...opts.fs, dir: fsDir }) : undefined
   const httpStorage = opts.http?.domains ? ipxHttpStorage({ ...opts.http }) : undefined