@netlify/plugin-nextjs 4.30.4-ipx-layer.0 → 4.30.4

package/lib/helpers/edge.js

@@ -14,7 +14,7 @@ const config_1 = require("./config");
 const matchers_1 = require("./matchers");
 const maybeLoadJson = (path) => {
     if ((0, fs_1.existsSync)(path)) {
-        return (0, fs_extra_1.readJson)(path);
+        return (0, fs_extra_1.readJSON)(path);
     }
 };
 const isAppDirRoute = (route, appPathRoutesManifest) => Boolean(appPathRoutesManifest) && Object.values(appPathRoutesManifest).includes(route);
@@ -29,53 +29,6 @@ exports.loadPrerenderManifest = loadPrerenderManifest;
  * Convert the Next middleware name into a valid Edge Function name
  */
 const sanitizeName = (name) => `next_${name.replace(/\W/g, '_')}`;
-/**
- * Initialization added to the top of the edge function bundle
- */
-const preamble = /* js */ `
-import {
-  decode as _base64Decode,
-} from "https://deno.land/std@0.159.0/encoding/base64.ts";
-// Deno defines "window", but naughty libraries think this means it's a browser
-delete globalThis.window
-globalThis.process = { env: {...Deno.env.toObject(), NEXT_RUNTIME: 'edge', 'NEXT_PRIVATE_MINIMAL_MODE': '1' } }
-globalThis.EdgeRuntime = "netlify-edge"
-let _ENTRIES = {}
-
-// Next.js uses this extension to the Headers API implemented by Cloudflare workerd
-if(!('getAll' in Headers.prototype)) {
-  Headers.prototype.getAll = function getAll(name) {
-    name = name.toLowerCase();
-    if (name !== "set-cookie") {
-      throw new Error("Headers.getAll is only supported for Set-Cookie");
-    }
-    return [...this.entries()]
-      .filter(([key]) => key === name)
-      .map(([, value]) => value);
-  };
-}
-//  Next uses blob: urls to refer to local assets, so we need to intercept these
-const _fetch = globalThis.fetch
-const fetch = async (url, init) => {
-  try {
-    if (typeof url === 'object' && url.href?.startsWith('blob:')) {
-      const key = url.href.slice(5)
-      if (key in _ASSETS) {
-        return new Response(_base64Decode(_ASSETS[key]))
-      }
-    }
-    return await _fetch(url, init)
-  } catch (error) {
-    console.error(error)
-    throw error
-  }
-}
-
-// Next edge runtime uses "self" as a function-scoped global-like object, but some of the older polyfills expect it to equal globalThis
-// See https://nextjs.org/docs/basic-features/supported-browsers-features#polyfills
-const self = { ...globalThis, fetch }
-
-`;
 // Slightly different spacing in different versions!
 const IMPORT_UNSUPPORTED = [
     `Object.defineProperty(globalThis,"__import_unsupported"`,
@@ -86,7 +39,8 @@ const IMPORT_UNSUPPORTED = [
  */
 const getMiddlewareBundle = async ({ edgeFunctionDefinition, netlifyConfig, }) => {
     const { publish } = netlifyConfig.build;
-    const chunks = [preamble];
+    const shims = await fs_1.promises.readFile(getEdgeTemplatePath('shims.js'), 'utf8');
+    const chunks = [shims];
     chunks.push(`export const _DEFINITION = ${JSON.stringify(edgeFunctionDefinition)}`);
     if ('wasm' in edgeFunctionDefinition) {
         for (const { name, filePath } of edgeFunctionDefinition.wasm) {
@@ -234,7 +188,6 @@ const writeEdgeFunctions = async ({ netlifyConfig, routesManifest, }) => {
     var _a;
     const manifest = {
         functions: [],
-        layers: [],
         version: 1,
     };
     const edgeFunctionRoot = (0, path_1.resolve)('.netlify', 'edge-functions');
@@ -257,11 +210,7 @@ const writeEdgeFunctions = async ({ netlifyConfig, routesManifest, }) => {
         manifest.functions.push({
             function: 'ipx',
             name: 'next/image handler',
-            path: nextConfig.images.path || '/_next/image',
-        });
-        manifest.layers.push({
-            name: 'https://ipx-edge-function-layer.netlify.app/mod.ts',
-            flag: 'ipx-edge-function-layer-url',
+            path: '/_next/image*',
         });
     }
     if (!(0, destr_1.default)(process.env.NEXT_DISABLE_NETLIFY_EDGE)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netlify/plugin-nextjs",
-  "version": "4.30.4-ipx-layer.0",
+  "version": "4.30.4",
   "description": "Run Next.js seamlessly on Netlify",
   "main": "index.js",
   "files": [
@@ -36,12 +36,12 @@
   },
   "devDependencies": {
     "@delucis/if-env": "^1.1.2",
-    "@netlify/build": "^29.5.2",
+    "@netlify/build": "^29.5.4",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^27.4.1",
     "@types/merge-stream": "^1.1.2",
     "@types/node": "^17.0.25",
-    "next": "^13.0.7",
+    "next": "^13.1.6",
     "npm-run-all": "^4.1.5",
     "typescript": "^4.6.3"
   },

package/src/templates/edge/ipx.ts

@@ -1,5 +1,73 @@
-import { getHandler } from 'https://ipx-edge-function-layer.netlify.app/mod.ts'
-
+import { Accepts } from 'https://deno.land/x/accepts@2.1.1/mod.ts'
+import type { Context } from 'https://edge.netlify.com'
+// Available at build time
 import imageconfig from './imageconfig.json' assert { type: 'json' }
 
-export default getHandler({ formats: imageconfig?.formats })
+const defaultFormat = 'webp'
+
+interface ImageConfig extends Record<string, unknown> {
+  formats?: string[]
+}
+
+// Checks if a URL param is numeric
+const isNumeric = (value: string | null) => Number(value).toString() === value
+
+/**
+ * Implement content negotiation for images
+ */
+
+// deno-lint-ignore require-await
+const handler = async (req: Request, context: Context) => {
+  const { searchParams } = new URL(req.url)
+  const accept = new Accepts(req.headers)
+  const { formats = [defaultFormat] } = imageconfig as ImageConfig
+  if (formats.length === 0) {
+    formats.push(defaultFormat)
+  }
+  let type = accept.types(formats) || defaultFormat
+  if (Array.isArray(type)) {
+    type = type[0]
+  }
+
+  const source = searchParams.get('url')
+  const width = searchParams.get('w')
+  const quality = searchParams.get('q') ?? '75'
+
+  const errors: Array<string> = []
+
+  if (!source) {
+    errors.push('Missing "url" parameter')
+  } else if (!source.startsWith('http') && !source.startsWith('/')) {
+    errors.push('The "url" parameter must be a valid URL or path')
+  }
+
+  if (!width) {
+    errors.push('Missing "w" parameter')
+  } else if (!isNumeric(width)) {
+    errors.push('Invalid "w" parameter')
+  }
+
+  if (!isNumeric(quality)) {
+    errors.push('Invalid "q" parameter')
+  }
+
+  if (!source || errors.length > 0) {
+    return new Response(`Invalid request: \n${errors.join('\n')}`, {
+      status: 400,
+    })
+  }
+
+  const modifiers = [`w_${width}`, `q_${quality}`]
+
+  if (type) {
+    if (type.includes('/')) {
+      // If this is a mimetype, strip "image/"
+      type = type.split('/')[1]
+    }
+    modifiers.push(`f_${type}`)
+  }
+  const target = `/_ipx/${modifiers.join(',')}/${encodeURIComponent(source)}`
+  return context.rewrite(target)
+}
+
+export default handler

package/src/templates/edge/shims.js

@@ -0,0 +1,53 @@
+// @ts-check
+// deno-lint-ignore-file no-var prefer-const no-unused-vars no-explicit-any
+import { decode as _base64Decode } from 'https://deno.land/std@0.175.0/encoding/base64.ts'
+import { AsyncLocalStorage as ALSCompat } from 'https://deno.land/std@0.175.0/node/async_hooks.ts'
+
+/**
+ * These are the shims, polyfills and other kludges to make Next.js work in standards-compliant runtime.
+ * This file isn't imported, but is instead inlined along with other chunks into the edge bundle.
+ */
+
+// Deno defines "window", but naughty libraries think this means it's a browser
+// @ts-ignore
+delete globalThis.window
+globalThis.process = {
+  env: { ...Deno.env.toObject(), NEXT_RUNTIME: 'edge', NEXT_PRIVATE_MINIMAL_MODE: '1' },
+}
+globalThis.EdgeRuntime = 'netlify-edge'
+let _ENTRIES = {}
+
+// Next.js expects this as a global
+globalThis.AsyncLocalStorage = ALSCompat
+
+// Next.js uses this extension to the Headers API implemented by Cloudflare workerd
+if (!('getAll' in Headers.prototype)) {
+  // @ts-ignore
+  Headers.prototype.getAll = function getAll(name) {
+    name = name.toLowerCase()
+    if (name !== 'set-cookie') {
+      throw new Error('Headers.getAll is only supported for Set-Cookie')
+    }
+    return [...this.entries()].filter(([key]) => key === name).map(([, value]) => value)
+  }
+}
+//  Next uses blob: urls to refer to local assets, so we need to intercept these
+const _fetch = globalThis.fetch
+const fetch /* type {typeof globalThis.fetch} */ = async (url, init) => {
+  try {
+    if (url instanceof URL && url.href?.startsWith('blob:')) {
+      const key = url.href.slice(5)
+      if (key in _ASSETS) {
+        return new Response(_base64Decode(_ASSETS[key]))
+      }
+    }
+    return await _fetch(url, init)
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
+
+// Next edge runtime uses "self" as a function-scoped global-like object, but some of the older polyfills expect it to equal globalThis
+// See https://nextjs.org/docs/basic-features/supported-browsers-features#polyfills
+const self = { ...globalThis, fetch }

package/src/templates/edge/imageconfig.json

@@ -1,3 +0,0 @@
-{
-  "formats": ["webp"]
-}