feat: switch to Azure Functions v4

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [Unreleased]
+
+### Features
+
+* **Breaking:** switch to Azure Functions v4:
+  * the function path has changed from `/api/__render` to `/api/sk_render` (v4 does not allow routes starting with underscores)
+  * see also [Migrate to version 4 of the Node.js programming model for Azure Functions](https://learn.microsoft.com/en-us/azure/azure-functions/functions-node-upgrade-v4) from the Azure docs
+
+
+
 ### [0.20.1](https://www.github.com/geoffrich/svelte-adapter-azure-swa/compare/v0.20.0...v0.20.1) (2024-07-13)
 
 

README.md

@@ -119,7 +119,7 @@ custom/
         └── index.js
 ```
 
-Also note that the adapter reserves the folder prefix `sk_render` and API route prefix `__render` for Azure functions generated by the adapter. So, if you use a custom API directory, you cannot have any other folder starting with `sk_render` or functions available at the `__render` route, since these will conflict with the adapter's Azure functions.
+Also note that the adapter reserves the folder prefix `sk_render` and API route prefix `sk_render` for Azure functions generated by the adapter. So, if you use a custom API directory, you cannot have any other folder starting with `sk_render` or functions available at the `sk_render` route, since these will conflict with the adapter's Azure functions.
 
 ### staticDir
 

demo/func/HelloWorld/index.js

@@ -1,13 +1,22 @@
-module.exports = async function (context, req) {
-	context.log('JavaScript HTTP trigger function processed a request.');
-
-	const name = req.query.name || (req.body && req.body.name);
-	const responseMessage = name
-		? 'Hello, ' + name + '. This HTTP triggered function executed successfully.'
-		: 'This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.';
-
-	context.res = {
-		// status: 200, /* Defaults to 200 */
-		body: responseMessage
-	};
-};
+const { app } = require('@azure/functions');
+
+app.http('httpTrigger1', {
+	methods: ['GET', 'POST'],
+	handler: async (req, context) => {
+		context.log('JavaScript HTTP trigger function processed a request.');
+
+		let name;
+		if (req.query.has('name')) {
+			name = req.query.get('name')
+		} else {
+			let body = await req.json();
+			name = body.name;
+		}
+
+		const responseMessage = name
+			? 'Hello, ' + name + '. This HTTP triggered function executed successfully.'
+			: 'This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.';
+
+		return { body: responseMessage };
+	}
+});

demo/func/host.json

@@ -2,6 +2,6 @@
 	"version": "2.0",
 	"extensionBundle": {
 		"id": "Microsoft.Azure.Functions.ExtensionBundle",
-		"version": "[2.*, 3.0.0)"
+		"version": "[4.0.0, 5.0.0)"
 	}
 }

files/api/host.json

@@ -2,6 +2,6 @@
 	"version": "2.0",
 	"extensionBundle": {
 		"id": "Microsoft.Azure.Functions.ExtensionBundle",
-		"version": "[2.*, 3.0.0)"
+		"version": "[4.0.0, 5.0.0)"
 	}
 }

files/api/package.json

@@ -1 +1,6 @@
-{}
+{
+	"main": "sk_render/index.js",
+	"dependencies": {
+		"@azure/functions": "^4"
+	}
+}

files/entry.js

@@ -6,6 +6,7 @@ import {
 	getClientPrincipalFromHeaders,
 	splitCookiesFromHeaders
 } from './headers';
+import { app } from '@azure/functions';
 
 // replaced at build time
 // @ts-expect-error
@@ -17,99 +18,101 @@ const server = new Server(manifest);
 const initialized = server.init({ env: process.env });
 
 /**
- * @typedef {import('@azure/functions').AzureFunction} AzureFunction
- * @typedef {import('@azure/functions').Context} Context
+ * @typedef {import('@azure/functions').InvocationContext} InvocationContext
  * @typedef {import('@azure/functions').HttpRequest} HttpRequest
+ * @typedef {import('@azure/functions').HttpResponse} HttpResponse
  */
 
-/**
- * @param {Context} context
- */
-export async function index(context) {
-	const request = toRequest(context);
-
-	if (debug) {
-		context.log(
-			'Starting request',
-			context?.req?.method,
-			context?.req?.headers?.['x-ms-original-url']
-		);
-		context.log(`Original request: ${JSON.stringify(context)}`);
-		context.log(`Request: ${JSON.stringify(request)}`);
-	}
-
-	const ipAddress = getClientIPFromHeaders(request.headers);
-	const clientPrincipal = getClientPrincipalFromHeaders(request.headers);
-
-	await initialized;
-	const rendered = await server.respond(request, {
-		getClientAddress() {
-			return ipAddress;
-		},
-		platform: {
-			clientPrincipal,
-			context
+app.http('sk_render', {
+	methods: ['HEAD', 'GET', 'POST', 'DELETE', 'PUT', 'OPTIONS'],
+	/**
+	 *
+	 * @param {HttpRequest} httpRequest
+	 * @param {InvocationContext} context
+	 */
+	handler: async (httpRequest, context) => {
+		if (debug) {
+			context.log(
+				'Starting request',
+				httpRequest.method,
+				httpRequest.headers.get('x-ms-original-url')
+			);
+			context.log(`Request: ${JSON.stringify(httpRequest)}`);
 		}
-	});
 
-	const response = await toResponse(rendered);
+		const request = toRequest(httpRequest);
+
+		const ipAddress = getClientIPFromHeaders(request.headers);
+		const clientPrincipal = getClientPrincipalFromHeaders(request.headers);
+
+		await initialized;
+		const rendered = await server.respond(request, {
+			getClientAddress() {
+				return ipAddress;
+			},
+			platform: {
+				user: httpRequest.user,
+				clientPrincipal,
+				context
+			}
+		});
+
+		if (debug) {
+			context.log(`SK headers: ${JSON.stringify(Object.fromEntries(rendered.headers.entries()))}`);
+			context.log(`Response: ${JSON.stringify(rendered)}`);
+		}
 
-	if (debug) {
-		context.log(`SK headers: ${JSON.stringify(Object.fromEntries(rendered.headers.entries()))}`);
-		context.log(`Response: ${JSON.stringify(response)}`);
+		return toResponse(rendered);
 	}
-
-	context.res = response;
-}
+});
 
 /**
- * @param {Context} context
+ * @param {HttpRequest} httpRequest
  * @returns {Request}
- * */
-function toRequest(context) {
-	const { method, headers, rawBody, body } = context.req;
-	// because we proxy all requests to the render function, the original URL in the request is /api/__render
-	// this header contains the URL the user requested
-	const originalUrl = headers['x-ms-original-url'];
+ */
+function toRequest(httpRequest) {
+	const originalUrl = httpRequest.headers.get('x-ms-original-url');
 
 	// SWA strips content-type headers from empty POST requests, but SK form actions require the header
 	// https://github.com/geoffrich/svelte-adapter-azure-swa/issues/178
-	if (method === 'POST' && !body && !headers['content-type']) {
-		headers['content-type'] = 'application/x-www-form-urlencoded';
+	if (
+		httpRequest.method === 'POST' &&
+		!httpRequest.body &&
+		!httpRequest.headers.get('content-type')
+	) {
+		httpRequest.headers.set('content-type', 'application/x-www-form-urlencoded');
 	}
 
-	/** @type {RequestInit} */
-	const init = {
-		method,
-		headers: new Headers(headers)
-	};
-
-	if (method !== 'GET' && method !== 'HEAD') {
-		init.body = Buffer.isBuffer(body)
-			? body
-			: typeof rawBody === 'string'
-				? Buffer.from(rawBody, 'utf-8')
-				: rawBody;
-	}
+	/** @type {Record<string, string>} */
+	const headers = {};
+	httpRequest.headers.forEach((value, key) => {
+		if (key !== 'x-ms-original-url') {
+			headers[key] = value;
+		}
+	});
 
-	return new Request(originalUrl, init);
+	return new Request(originalUrl, {
+		method: httpRequest.method,
+		headers: new Headers(headers),
+		// @ts-ignore
+		body: httpRequest.body,
+		duplex: 'half'
+	});
 }
 
 /**
  * @param {Response} rendered
- * @returns {Promise<Record<string, any>>}
+ * @returns {Promise<HttpResponse>}
  */
 async function toResponse(rendered) {
-	const { status } = rendered;
-	const resBody = new Uint8Array(await rendered.arrayBuffer());
-
 	const { headers, cookies } = splitCookiesFromHeaders(rendered.headers);
 
 	return {
-		status,
-		body: resBody,
+		status: rendered.status,
+		// @ts-ignore
+		body: rendered.body,
 		headers,
 		cookies,
-		isRaw: true
+		enableContentNegotiation: false
 	};
 }

files/headers.js

@@ -1,30 +1,35 @@
 import * as set_cookie_parser from 'set-cookie-parser';
 
+/**
+ * @typedef {import('@azure/functions').Cookie} Cookie
+ */
+
 /**
  * Splits 'set-cookie' headers into individual cookies
  * @param {Headers} headers
  * @returns {{
- *   headers: Record<string, string>,
- *   cookies: set_cookie_parser.Cookie[]
+ *   headers: Headers,
+ *   cookies: Cookie[]
  * }}
  */
 export function splitCookiesFromHeaders(headers) {
 	/** @type {Record<string, string>} */
 	const resHeaders = {};
 
-	/** @type {set_cookie_parser.Cookie[]} */
+	/** @type {Cookie[]} */
 	const resCookies = [];
 
 	headers.forEach((value, key) => {
 		if (key === 'set-cookie') {
 			const cookieStrings = set_cookie_parser.splitCookiesString(value);
+			// @ts-ignore
 			resCookies.push(...set_cookie_parser.parse(cookieStrings));
 		} else {
 			resHeaders[key] = value;
 		}
 	});
 
-	return { headers: resHeaders, cookies: resCookies };
+	return { headers: new Headers(resHeaders), cookies: resCookies };
 }
 
 /**

index.d.ts

@@ -1,6 +1,6 @@
 import { Adapter } from '@sveltejs/kit';
 import { ClientPrincipal, CustomStaticWebAppConfig } from './types/swa';
-import { Context } from '@azure/functions';
+import { HttpRequestUser, InvocationContext } from '@azure/functions';
 import esbuild from 'esbuild';
 
 export * from './types/swa';
@@ -37,8 +37,11 @@ declare global {
 			 *
 			 * @see The {@link https://learn.microsoft.com/en-us/azure/azure-functions/functions-reference-node#context-object Azure function documentation}
 			 */
+			context: InvocationContext;
+
+			user: HttpRequestUser;
+
 			clientPrincipal?: ClientPrincipal;
-			context: Context;
 		}
 	}
 }

index.js

@@ -7,26 +7,7 @@ import esbuild from 'esbuild';
  * @typedef {import('esbuild').BuildOptions} BuildOptions
  */
 
-const ssrFunctionRoute = '/api/__render';
-
-const functionJson = `
-{
-	"bindings": [
-		{
-			"authLevel": "anonymous",
-			"type": "httpTrigger",
-			"direction": "in",
-			"name": "req",
-			"route": "__render"
-		},
-		{
-			"type": "http",
-			"direction": "out",
-			"name": "res"
-		}
-	]
-}
-`;
+const ssrFunctionRoute = '/api/sk_render';
 
 /**
  * Validate the static web app configuration does not override the minimum config for the adapter to work correctly.
@@ -123,6 +104,11 @@ If you want to suppress this error, set allowReservedSwaRoutes to true in your a
 				})};\n`
 			);
 
+			// add @azure/functions to esbuildOptions.external if not already set - this is needed by the Azure Functiions v4 runtime
+			if (!esbuildOptions.external?.includes('@azure/functions')) {
+				esbuildOptions.external = [...(esbuildOptions.external || []), '@azure/functions'];
+			}
+
 			/** @type {BuildOptions} */
 			const default_options = {
 				entryPoints: [entry],
@@ -137,7 +123,6 @@ If you want to suppress this error, set allowReservedSwaRoutes to true in your a
 			};
 
 			await esbuild.build(default_options);
-			writeFileSync(join(functionDir, 'function.json'), functionJson);
 
 			builder.log.minor('Copying assets...');
 			builder.writeClient(staticDir);