feat: switch to Azure Functions v4 (#177)

* feat: switch to Azure Functions v4

* remove function.json - it is not needed anymore
* rename function path to "sk_render" since v4 does not allow the path to start with "__"

See also: https://techcommunity.microsoft.com/t5/apps-on-azure-blog/azure-functions-version-4-of-the-node-js-programming-model-is-in/ba-p/3773541

closes #159

* add @azure/functions to external esbuild options (if not already there)

* Port over changes from #179

* Fix one unit test and update docs / release notes

* fix test 'writes to custom api directory'

* convert external function to v4

* fix headers test - use fetch API

* Update comments and docs

---------

Co-authored-by: Geoff Rich <[email protected]>

Author: derkoe

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
 
@@ -240,6 +240,10 @@ This is currently only available when running in production on SWA. In addition,
 
 All server requests to your SvelteKit app are handled by an Azure function. This property contains that Azure function's [request context](https://learn.microsoft.com/en-us/azure/azure-functions/functions-reference-node#context-object).
 
+### `user`
+
+The `user` property of the Azure function's [HTTP request](https://learn.microsoft.com/en-us/azure/azure-functions/functions-reference-node?tabs=javascript%2Cwindows%2Cazure-cli&pivots=nodejs-model-v4#http-request).
+
 ## Monorepo support
 
 If you're deploying your app from a monorepo, here's what you need to know.

demo/func/HelloWorld/function.json

@@ -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/HelloWorld/index.js

@@ -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)"
 	}
 }

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

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

files/api/package.json

@@ -6,6 +6,7 @@ import {
 	getClientPrincipalFromHeaders,
 	splitCookiesFromHeaders
 } from './headers';
+import { app } from '@azure/functions';
 
 // replaced at build time
 // @ts-expect-error
@@ -17,99 +18,103 @@ 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
+ */
+function toRequest(httpRequest) {
+	// because we proxy all requests to the render function, the original URL in the request is /api/sk_render
 	// this header contains the URL the user requested
-	const originalUrl = headers['x-ms-original-url'];
+	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/entry.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-expect-error - one cookie type has a stricter sameSite type
 			resCookies.push(...set_cookie_parser.parse(cookieStrings));
 		} else {
 			resHeaders[key] = value;
 		}
 	});
 
-	return { headers: resHeaders, cookies: resCookies };
+	return { headers: new Headers(resHeaders), cookies: resCookies };
 }
 
 /**

files/headers.js

@@ -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;
 		}
 	}
 }