fix): allow special characters in Action names (#12124)

.changeset/swift-snakes-hope.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Allows special characters in Action names

packages/astro/src/actions/runtime/virtual/get-action.ts

@@ -11,7 +11,10 @@ import type { ActionAccept, ActionClient } from './server.js';
 export async function getAction(
 	path: string,
 ): Promise<ActionClient<unknown, ActionAccept, ZodType>> {
-	const pathKeys = path.replace('/_actions/', '').split('.');
+	const pathKeys = path
+		.replace('/_actions/', '')
+		.split('.')
+		.map((key) => decodeURIComponent(key));
 	// @ts-expect-error virtual module
 	let { server: actionLookup } = await import('astro:internal-actions');
 

packages/astro/templates/actions.mjs

@@ -5,13 +5,16 @@ import {
 	getActionQueryString,
 } from 'astro:actions';
 
+const ENCODED_DOT = "%2E";
+
 function toActionProxy(actionCallback = {}, aggregatedPath = '') {
 	return new Proxy(actionCallback, {
 		get(target, objKey) {
 			if (objKey in target || typeof objKey === 'symbol') {
 				return target[objKey];
 			}
-			const path = aggregatedPath + objKey.toString();
+			// Add the key, encoding dots so they're not interpreted as nested properties.
+			const path = aggregatedPath + encodeURIComponent(objKey.toString()).replaceAll('.', ENCODED_DOT);
 			function action(param) {
 				return handleAction(param, path, this);
 			}

packages/astro/test/actions.test.js

@@ -115,6 +115,23 @@ describe('Astro Actions', () => {
 			assert.equal(data.success, true);
 			assert.equal(data.isFormData, true, 'Should receive plain FormData');
 		});
+
+		it('Handles special characters in action names', async () => {
+			for (const name of ['with%2Fslash', 'with%20space', 'with%2Edot']) {
+				const res = await fixture.fetch(`/_actions/${name}`, {
+					method: 'POST',
+					body: JSON.stringify({ name: 'ben' }),
+					headers: {
+						'Content-Type': 'application/json',
+					},
+				});
+				assert.equal(res.ok, true);
+				const text = await res.text();
+				assert.equal(res.headers.get('Content-Type'), 'application/json+devalue');
+				const data = devalue.parse(text);
+				assert.equal(data, 'Hello, ben!');
+			}
+		})
 	});
 
 	describe('build', () => {
@@ -428,6 +445,24 @@ describe('Astro Actions', () => {
 			const dataRest = devalue.parse(await resRest.text());
 			assert.equal('fake', dataRest?.uploadId);
 		});
+
+		it('Handles special characters in action names', async () => {
+			for (const name of ['with%2Fslash', 'with%20space', 'with%2Edot']) {
+				const req = new Request(`http://example.com/_actions/${name}`, {
+					method: 'POST',
+					body: JSON.stringify({ name: 'ben' }),
+					headers: {
+						'Content-Type': 'application/json',
+					},
+				});
+				const res = await app.render(req);
+				assert.equal(res.ok, true);
+				const text = await res.text();
+				assert.equal(res.headers.get('Content-Type'), 'application/json+devalue');
+				const data = devalue.parse(text);
+				assert.equal(data, 'Hello, ben!');
+			}
+		});
 	});
 });
 

packages/astro/test/fixtures/actions/src/actions/index.ts

@@ -161,4 +161,28 @@ export const server = {
 			};
 		},
 	}),
+	"with.dot": defineAction({ 
+    input: z.object({
+      name: z.string(),
+    }),
+    handler: async (input) => {
+      return `Hello, ${input.name}!`
+    }
+  }),
+  "with space": defineAction({ 
+    input: z.object({
+      name: z.string(),
+    }),
+    handler: async (input) => {
+      return `Hello, ${input.name}!`
+    }
+  }),
+	"with/slash": defineAction({ 
+		input: z.object({
+			name: z.string(),
+		}),
+		handler: async (input) => {
+			return `Hello, ${input.name}!`
+		}
+	}),
 };