feat: ipx production support

docs/content/en/4.providers/ipx.md

@@ -22,3 +22,32 @@ that are stored locally within your repo.
 ```
 
 This will load the image in as `/static/logo.png` and apply the IPX optimizations if applicable.
+
+
+### Using `ipx` in production
+
+**If you are using Nuxt 2.16+ this is done automatically for you.**
+
+However, if you are using Nuxt < 2.16, and you need to use the `ipx` provider at runtime, you will either need to add `@nuxt/image` to your _modules_ (instead of buildModules) or add the following code to your `nuxt.config`:
+
+```js
+import path from 'path'
+import { createIPX, createIPXMiddleware } from 'ipx'
+
+const ipx = createIPX({
+  dir: path.join(__dirname, 'static'),
+  // https://image.nuxtjs.org/api/options#domains
+  domains: [],
+  // Any options you need to pass to sharp
+  sharp: {}
+})
+
+export default {
+  serverMiddleware: [
+    {
+      path: '/_ipx',
+      handler: createIPXMiddleware(ipx)
+    }
+  ]
+}
+```

package.json

@@ -34,6 +34,7 @@
     "lru-cache": "^6.0.0",
     "node-fetch": "^2.6.1",
     "p-limit": "^3.1.0",
+    "rc9": "^1.2.0",
     "requrl": "^3.0.2",
     "ufo": "^0.7.2",
     "upath": "^2.0.1"

src/module.ts

@@ -1,16 +1,17 @@
 import { resolve } from 'upath'
+import { update as updaterc } from 'rc9'
 
 import type { Module } from '@nuxt/types'
 import defu from 'defu'
 
+import { copyFile, mkdirp } from 'fs-extra'
 import { setupStaticGeneration } from './generate'
-import { createIPXMiddleware } from './ipx'
 import { resolveProviders, detectProvider } from './provider'
 import type { ModuleOptions, CreateImageOptions } from './types'
 import { pick, pkg } from './utils'
 
 const imageModule: Module<ModuleOptions> = async function imageModule (moduleOptions) {
-  const { nuxt, addPlugin, addServerMiddleware } = this
+  const { nuxt, addPlugin, addModule } = this
 
   const defaults: ModuleOptions = {
     staticFilename: '[publicPath]/image/[hash][ext]',
@@ -75,14 +76,36 @@ const imageModule: Module<ModuleOptions> = async function imageModule (moduleOpt
     }
   })
 
-  addServerMiddleware({
-    path: '/_ipx',
-    handle: createIPXMiddleware({
+  // Only add IPX server middleware if the static/ipx provider is used
+  if (
+    ['static', 'ipx'].includes(options.provider) ||
+    ['static', 'ipx'].some(provider => Object.keys(options.providers).includes(provider))
+  ) {
+    const ipxModuleDev = resolve(runtimeDir, 'ipx.js')
+    const ipxOptions = {
       dir: options.dir,
       domains: options.domains,
       sharp: options.sharp
+    }
+
+    addModule([ipxModuleDev, ipxOptions])
+
+    // In production, add IPX module to .nuxtrc (used in Nuxt 2.16+)
+    nuxt.hook('build:done', async () => {
+      if (nuxt.options.dev) {
+        return
+      }
+
+      const distDir = resolve(this.options.buildDir, 'dist')
+      const apiDir = resolve(distDir, 'server', 'modules')
+      const apiModuleProd = resolve(apiDir, 'ipx.js')
+
+      await mkdirp(apiDir)
+      await copyFile(ipxModuleDev, apiModuleProd)
+
+      updaterc({ modules: [[apiModuleProd, ipxOptions]] }, { dir: distDir, name: '.nuxtrc' })
     })
-  })
+  }
 
   nuxt.options.build.loaders = defu({
     vue: { transformAssetUrls: { 'nuxt-img': 'src', 'nuxt-picture': 'src' } }

src/runtime/ipx.ts

@@ -0,0 +1,10 @@
+import type { Module } from '@nuxt/types/config/module'
+import { createIPX, createIPXMiddleware, IPXOptions } from 'ipx'
+
+export default <Module<IPXOptions>> function ipxModule (options) {
+  const ipx = createIPX(options)
+  this.addServerMiddleware({
+    path: '/_ipx',
+    handle: createIPXMiddleware(ipx)
+  })
+}