netlify-cli 17.1.0 → 17.2.0

package/src/lib/images/proxy.mjs

@@ -0,0 +1,115 @@
+import express from 'express'
+import { createIPX, ipxFSStorage, ipxHttpStorage, createIPXNodeServer } from 'ipx'
+
+import { log, NETLIFYDEVERR } from '../../utils/command-helpers.mjs'
+
+export const IMAGE_URL_PATTERN = '/.netlify/images'
+
+export const parseAllDomains = function (config) {
+  const domains = config?.images?.remote_images
+  if (!domains) {
+    return { errors: [], remoteDomains: [] }
+  }
+
+  const remoteDomains = []
+  const errors = []
+
+  for (const patternString of domains) {
+    try {
+      const url = new URL(patternString)
+      if (url.hostname) {
+        remoteDomains.push(url.hostname)
+      } else {
+        errors.push(`The URL '${patternString}' does not have a valid hostname.`)
+      }
+    } catch (error) {
+      errors.push(`Invalid URL '${patternString}': ${error.message}`)
+    }
+  }
+
+  return { errors, remoteDomains }
+}
+
+const getErrorMessage = function ({ message }) {
+  return message
+}
+
+export const handleImageDomainsErrors = async function (errors) {
+  if (errors.length === 0) {
+    return
+  }
+
+  const errorMessage = await errors.map(getErrorMessage).join('\n\n')
+  log(NETLIFYDEVERR, `Image domains syntax errors:\n${errorMessage}`)
+}
+
+export const parseRemoteImageDomains = async function ({ config }) {
+  if (!config) {
+    return []
+  }
+
+  const { errors, remoteDomains } = await parseAllDomains(config)
+  await handleImageDomainsErrors(errors)
+
+  return remoteDomains
+}
+export const isImageRequest = function (req) {
+  return req.url.startsWith(IMAGE_URL_PATTERN)
+}
+
+export const transformImageParams = function (query) {
+  const params = {}
+  // eslint-disable-next-line id-length
+  params.w = query.w || query.width || null
+  // eslint-disable-next-line id-length
+  params.h = query.h || query.height || null
+  params.quality = query.q || query.quality || null
+  params.format = query.fm || null
+  params.fit = mapImgixToFitIpx(query.fit, query.crop)
+  params.position = query.crop || null
+
+  return Object.entries(params)
+    .filter(([, value]) => value !== null)
+    .map(([key, value]) => `${key}_${value}`)
+    .join(',')
+}
+
+function mapImgixToFitIpx(fit, crop) {
+  if (crop) {
+    return 'cover'
+  }
+
+  const fitMapping = {
+    // IPX doesn't have exact equivalent.
+    clamp: null,
+    clip: 'contain',
+    crop: 'cover',
+    max: 'inside',
+    min: 'outside',
+    scale: 'fill',
+  }
+
+  return fitMapping[fit] ?? 'contain'
+}
+
+export const initializeProxy = async function ({ config }) {
+  const remoteDomains = await parseRemoteImageDomains({ config })
+
+  const ipx = createIPX({
+    storage: ipxFSStorage({ dir: config?.build?.publish ?? './public' }),
+    httpStorage: ipxHttpStorage({ domains: remoteDomains }),
+  })
+
+  const handler = createIPXNodeServer(ipx)
+  const app = express()
+
+  app.use(IMAGE_URL_PATTERN, async (req, res) => {
+    const { url, ...query } = req.query
+    const modifiers = await transformImageParams(query)
+    const path = `/${modifiers}/${encodeURIComponent(url)}`
+    req.url = path
+    handler(req, res)
+  })
+
+  return app
+}

package/src/utils/lm/install.mjs

@@ -7,7 +7,7 @@ import { fileURLToPath } from 'url'
 
 import execa from 'execa'
 import hasbin from 'hasbin'
-import Listr from 'listr'
+import { Listr } from 'listr2'
 import pathKey from 'path-key'
 
 import { fetchLatestVersion, shouldFetchLatestVersion } from '../../lib/exec-fetcher.mjs'

package/src/utils/proxy-server.mjs

@@ -52,6 +52,7 @@ export const generateInspectSettings = (edgeInspect, edgeInspectBrk) => {
  * @param {object} params.site
  * @param {*} params.siteInfo
  * @param {string} params.projectDir
+ * @param {string} params.repositoryRoot
  * @param {import('./state-config.mjs').default} params.state
  * @param {import('../lib/functions/registry.mjs').FunctionsRegistry=} params.functionsRegistry
  * @returns
@@ -71,6 +72,7 @@ export const startProxyServer = async ({
   inspectSettings,
   offline,
   projectDir,
+  repositoryRoot,
   settings,
   site,
   siteInfo,
@@ -94,6 +96,7 @@ export const startProxyServer = async ({
     state,
     siteInfo,
     accountId,
+    repositoryRoot,
   })
   if (!url) {
     log(NETLIFYDEVERR, `Unable to start proxy server on port '${settings.port}'`)

package/src/utils/proxy.mjs

@@ -28,6 +28,7 @@ import {
 } from '../lib/edge-functions/proxy.mjs'
 import { fileExistsAsync, isFileAsync } from '../lib/fs.mjs'
 import { DEFAULT_FUNCTION_URL_EXPRESSION } from '../lib/functions/registry.mjs'
+import { initializeProxy as initializeImageProxy, isImageRequest } from '../lib/images/proxy.mjs'
 import renderErrorTemplate from '../lib/render-error-template.mjs'
 
 import { NETLIFYDEVLOG, NETLIFYDEVWARN, log, chalk } from './command-helpers.mjs'
@@ -182,7 +183,17 @@ const alternativePathsFor = function (url) {
   return paths
 }
 
-const serveRedirect = async function ({ env, functionsRegistry, match, options, proxy, req, res, siteInfo }) {
+const serveRedirect = async function ({
+  env,
+  functionsRegistry,
+  imageProxy,
+  match,
+  options,
+  proxy,
+  req,
+  res,
+  siteInfo,
+}) {
   if (!match) return proxy.web(req, res, options)
 
   options = options || req.proxyOptions || {}
@@ -355,7 +366,9 @@ const serveRedirect = async function ({ env, functionsRegistry, match, options,
 
       return proxy.web(req, res, { headers: functionHeaders, target: options.functionsServer })
     }
-
+    if (isImageRequest(req)) {
+      return imageProxy(req, res)
+    }
     const addonUrl = getAddonUrl(options.addonsUrls, req)
     if (addonUrl) {
       return handleAddonUrl({ req, res, addonUrl })
@@ -378,7 +391,7 @@ const reqToURL = function (req, pathname) {
 
 const MILLISEC_TO_SEC = 1e3
 
-const initializeProxy = async function ({ configPath, distDir, env, host, port, projectDir, siteInfo }) {
+const initializeProxy = async function ({ configPath, distDir, env, host, imageProxy, port, projectDir, siteInfo }) {
   const proxy = httpProxy.createProxyServer({
     selfHandleResponse: true,
     target: {
@@ -386,7 +399,6 @@ const initializeProxy = async function ({ configPath, distDir, env, host, port,
       port,
     },
   })
-
   const headersFiles = [...new Set([path.resolve(projectDir, '_headers'), path.resolve(distDir, '_headers')])]
 
   let headers = await parseHeaders({ headersFiles, configPath })
@@ -466,6 +478,7 @@ const initializeProxy = async function ({ configPath, distDir, env, host, port,
           req,
           res,
           proxy: handlers,
+          imageProxy,
           match: req.proxyOptions.match,
           options: req.proxyOptions,
           siteInfo,
@@ -484,6 +497,7 @@ const initializeProxy = async function ({ configPath, distDir, env, host, port,
         req,
         res,
         proxy: handlers,
+        imageProxy,
         match: null,
         options: req.proxyOptions,
         siteInfo,
@@ -586,7 +600,18 @@ const initializeProxy = async function ({ configPath, distDir, env, host, port,
 }
 
 const onRequest = async (
-  { addonsUrls, edgeFunctionsProxy, env, functionsRegistry, functionsServer, proxy, rewriter, settings, siteInfo },
+  {
+    addonsUrls,
+    edgeFunctionsProxy,
+    env,
+    functionsRegistry,
+    functionsServer,
+    imageProxy,
+    proxy,
+    rewriter,
+    settings,
+    siteInfo,
+  },
   req,
   res,
 ) => {
@@ -642,7 +667,7 @@ const onRequest = async (
     // We don't want to generate an ETag for 3xx redirects.
     req[shouldGenerateETag] = ({ statusCode }) => statusCode < 300 || statusCode >= 400
 
-    return serveRedirect({ req, res, proxy, match, options, siteInfo, env, functionsRegistry })
+    return serveRedirect({ req, res, proxy, imageProxy, match, options, siteInfo, env, functionsRegistry })
   }
 
   // The request will be served by the framework server, which means we want to
@@ -660,6 +685,10 @@ const onRequest = async (
     return proxy.web(req, res, { target: functionsServer })
   }
 
+  if (isImageRequest(req)) {
+    return imageProxy(req, res)
+  }
+
   proxy.web(req, res, options)
 }
 
@@ -687,6 +716,7 @@ export const startProxy = async function ({
   inspectSettings,
   offline,
   projectDir,
+  repositoryRoot,
   settings,
   siteInfo,
   state,
@@ -708,10 +738,15 @@ export const startProxy = async function ({
     passthroughPort: secondaryServerPort || settings.port,
     settings,
     projectDir,
+    repositoryRoot,
     siteInfo,
     accountId,
     state,
   })
+
+  const imageProxy = await initializeImageProxy({
+    config,
+  })
   const proxy = await initializeProxy({
     env,
     host: settings.frameworkHost,
@@ -720,6 +755,7 @@ export const startProxy = async function ({
     projectDir,
     configPath,
     siteInfo,
+    imageProxy,
   })
 
   const rewriter = await createRewriter({
@@ -739,6 +775,7 @@ export const startProxy = async function ({
     functionsRegistry,
     functionsServer,
     edgeFunctionsProxy,
+    imageProxy,
     siteInfo,
     env,
   })