bxo 0.0.5-dev.79 → 0.0.5-dev.80

package/README.md

@@ -273,16 +273,72 @@ app.post("/users", async (ctx) => {
 });
 ```
 
+## Multipart/Form-Data Parsing
+
+BXO automatically parses multipart/form-data into nested objects and arrays before Zod validation:
+
+### Nested Objects
+Form fields like `profile[name]` are automatically converted to nested objects:
+
+```typescript
+const UserFormSchema = z.object({
+  name: z.string(),
+  email: z.string().email(),
+  profile: z.object({
+    name: z.string()
+  })
+});
+
+app.post("/users", async (ctx) => {
+  // Form data: profile[name]="John" becomes { profile: { name: "John" } }
+  console.log(ctx.body); // { name: "...", email: "...", profile: { name: "John" } }
+  return ctx.json({ success: true, data: ctx.body });
+}, {
+  body: UserFormSchema
+});
+```
+
+### Arrays
+Form fields like `items[0]`, `items[1]` are automatically converted to arrays:
+
+```typescript
+const ItemsSchema = z.object({
+  items: z.array(z.string()),
+  tags: z.array(z.string()),
+  profile: z.object({
+    name: z.string(),
+    age: z.string().transform(val => parseInt(val, 10))
+  })
+});
+
+app.post("/items", async (ctx) => {
+  // Form data: items[0]="Apple", items[1]="Banana" becomes { items: ["Apple", "Banana"] }
+  console.log(ctx.body); // { items: ["Apple", "Banana"], tags: [...], profile: {...} }
+  return ctx.json({ success: true, data: ctx.body });
+}, {
+  body: ItemsSchema
+});
+```
+
+### Supported Patterns
+- **Nested objects**: `profile[name]`, `settings[theme]` → `{ profile: { name: "..." }, settings: { theme: "..." } }`
+- **Arrays**: `items[0]`, `items[1]` → `{ items: ["...", "..."] }`
+- **Duplicate keys**: Multiple values with same key → `{ tags: ["tag1", "tag2"] }`
+
 ## Running
 
 ```bash
 bun run ./src/index.ts
 ```
 
-Or run the CORS example:
+Or run the examples:
 
 ```bash
+# CORS example
 bun run ./example/cors-example.ts
+
+# Multipart form data parsing example
+bun run ./example/multipart-example.ts
 ```
 
 ## Examples
@@ -292,6 +348,7 @@ Check out the `example/` directory for more usage examples:
 - `cors-example.ts` - Demonstrates CORS plugin and lifecycle hooks
 - `openapi-example.ts` - Demonstrates OpenAPI plugin with tags and security
 - `websocket-example.ts` - Demonstrates WebSocket functionality with interactive HTML client
+- `multipart-example.ts` - Demonstrates multipart/form-data parsing with nested objects and arrays
 - `index.ts` - Basic routing example
 
 This project was created using `bun init` in bun v1.2.3. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.

package/example/multipart-example.ts

@@ -0,0 +1,203 @@
+import BXO from "../src/index";
+import { z } from "zod";
+
+const app = new BXO();
+
+// Define Zod schema for the form data structure
+const UserFormSchema = z.object({
+  name: z.string(),
+  email: z.string().email(),
+  password: z.string().min(6),
+  is_active: z.string().transform(val => val === "1"),
+  profile: z.object({
+    name: z.string()
+  }),
+  id: z.string().optional(),
+  created_at: z.string().optional(),
+  updated_at: z.string().optional(),
+  idx: z.string().transform(val => parseInt(val, 10))
+});
+
+// Route to handle multipart/form-data with nested objects
+app.post("/users", async (ctx) => {
+  // The form data is automatically parsed into nested objects
+  // ctx.body will contain the structured data based on the schema
+  console.log("Parsed form data:", ctx.body);
+  
+  return ctx.json({
+    message: "User created successfully",
+    data: ctx.body
+  });
+}, {
+  body: UserFormSchema,
+  detail: {
+    summary: "Create user with multipart/form-data",
+    description: "Handles form data with nested objects and arrays",
+    tags: ["Users"]
+  }
+});
+
+// Example with arrays
+const ArrayFormSchema = z.object({
+  items: z.array(z.string()),
+  tags: z.array(z.string()),
+  profile: z.object({
+    name: z.string(),
+    age: z.string().transform(val => parseInt(val, 10))
+  })
+});
+
+app.post("/items", async (ctx) => {
+  console.log("Parsed array form data:", ctx.body);
+  
+  return ctx.json({
+    message: "Items processed successfully",
+    data: ctx.body
+  });
+}, {
+  body: ArrayFormSchema,
+  detail: {
+    summary: "Process items with arrays",
+    description: "Handles form data with arrays like items[0], items[1]",
+    tags: ["Items"]
+  }
+});
+
+// Test route to show how the parsing works
+app.get("/test-parsing", async (ctx) => {
+  const html = `
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Multipart Form Data Test</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 40px; }
+        .form-group { margin: 20px 0; }
+        label { display: block; margin-bottom: 5px; font-weight: bold; }
+        input, textarea { width: 300px; padding: 8px; margin-bottom: 10px; }
+        button { background: #007bff; color: white; padding: 10px 20px; border: none; cursor: pointer; }
+        .result { margin-top: 20px; padding: 20px; background: #f8f9fa; border-radius: 5px; }
+    </style>
+</head>
+<body>
+    <h1>Multipart Form Data Parsing Test</h1>
+    
+    <h2>Test 1: Nested Objects (like your image example)</h2>
+    <form id="userForm" enctype="multipart/form-data">
+        <div class="form-group">
+            <label>Name:</label>
+            <input type="text" name="name" value="John Doe" required>
+        </div>
+        <div class="form-group">
+            <label>Email:</label>
+            <input type="email" name="email" value="john@example.com" required>
+        </div>
+        <div class="form-group">
+            <label>Password:</label>
+            <input type="password" name="password" value="password123" required>
+        </div>
+        <div class="form-group">
+            <label>Is Active:</label>
+            <input type="text" name="is_active" value="1">
+        </div>
+        <div class="form-group">
+            <label>Profile Name:</label>
+            <input type="text" name="profile[name]" value="John Profile" required>
+        </div>
+        <div class="form-group">
+            <label>ID:</label>
+            <input type="text" name="id" value="UUID()">
+        </div>
+        <div class="form-group">
+            <label>Created At:</label>
+            <input type="text" name="created_at" value="NOW()">
+        </div>
+        <div class="form-group">
+            <label>Updated At:</label>
+            <input type="text" name="updated_at" value="NOW()">
+        </div>
+        <div class="form-group">
+            <label>Index:</label>
+            <input type="text" name="idx" value="0">
+        </div>
+        <button type="submit">Submit User Form</button>
+    </form>
+    
+    <h2>Test 2: Arrays</h2>
+    <form id="itemsForm" enctype="multipart/form-data">
+        <div class="form-group">
+            <label>Item 1:</label>
+            <input type="text" name="items[0]" value="Apple">
+        </div>
+        <div class="form-group">
+            <label>Item 2:</label>
+            <input type="text" name="items[1]" value="Banana">
+        </div>
+        <div class="form-group">
+            <label>Item 3:</label>
+            <input type="text" name="items[2]" value="Cherry">
+        </div>
+        <div class="form-group">
+            <label>Tag 1:</label>
+            <input type="text" name="tags[0]" value="fruit">
+        </div>
+        <div class="form-group">
+            <label>Tag 2:</label>
+            <input type="text" name="tags[1]" value="healthy">
+        </div>
+        <div class="form-group">
+            <label>Profile Name:</label>
+            <input type="text" name="profile[name]" value="Test Profile">
+        </div>
+        <div class="form-group">
+            <label>Profile Age:</label>
+            <input type="text" name="profile[age]" value="25">
+        </div>
+        <button type="submit">Submit Items Form</button>
+    </form>
+    
+    <div id="result" class="result" style="display: none;">
+        <h3>Result:</h3>
+        <pre id="resultContent"></pre>
+    </div>
+
+    <script>
+        async function submitForm(form, endpoint) {
+            const formData = new FormData(form);
+            try {
+                const response = await fetch(endpoint, {
+                    method: 'POST',
+                    body: formData
+                });
+                const result = await response.json();
+                document.getElementById('result').style.display = 'block';
+                document.getElementById('resultContent').textContent = JSON.stringify(result, null, 2);
+            } catch (error) {
+                document.getElementById('result').style.display = 'block';
+                document.getElementById('resultContent').textContent = 'Error: ' + error.message;
+            }
+        }
+        
+        document.getElementById('userForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            submitForm(e.target, '/users');
+        });
+        
+        document.getElementById('itemsForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            submitForm(e.target, '/items');
+        });
+    </script>
+</body>
+</html>
+  `;
+  
+  return new Response(html, {
+    headers: { "Content-Type": "text/html" }
+  });
+});
+
+app.start();
+
+console.log("🚀 Server running at http://localhost:3000");
+console.log("📝 Test the multipart parsing at http://localhost:3000/test-parsing");

package/package.json

@@ -5,7 +5,7 @@
     ".": "./src/index.ts",
     "./plugins": "./plugins/index.ts"
   },
-  "version": "0.0.5-dev.79",
+  "version": "0.0.5-dev.80",
   "type": "module",
   "devDependencies": {
     "@types/bun": "latest"

package/src/index.ts

@@ -187,16 +187,66 @@ function parseQuery(searchParams: URLSearchParams, schema?: z.ZodTypeAny): any {
 
 function formDataToObject(fd: FormData): Record<string, any> {
     const obj: Record<string, any> = {};
+    
     for (const [key, value] of fd.entries()) {
-        if (key in obj) {
-            const existing = obj[key];
-            if (Array.isArray(existing)) obj[key] = [...existing, value];
-            else obj[key] = [existing, value];
-        } else obj[key] = value;
+        setNestedValue(obj, key, value);
     }
+    
     return obj;
 }
 
+function setNestedValue(obj: Record<string, any>, key: string, value: any): void {
+    // Handle array notation like items[0], items[1]
+    const arrayMatch = key.match(/^(.+)\[(\d+)\]$/);
+    if (arrayMatch) {
+        const [, arrayKey, index] = arrayMatch;
+        const arrayIndex = parseInt(index, 10);
+        
+        if (!obj[arrayKey]) {
+            obj[arrayKey] = [];
+        }
+        
+        // Ensure it's an array
+        if (!Array.isArray(obj[arrayKey])) {
+            obj[arrayKey] = [];
+        }
+        
+        // Set the value at the specific index
+        obj[arrayKey][arrayIndex] = value;
+        return;
+    }
+    
+    // Handle nested object notation like profile[name], profile[age]
+    const nestedMatch = key.match(/^(.+)\[([^\]]+)\]$/);
+    if (nestedMatch) {
+        const [, parentKey, nestedKey] = nestedMatch;
+        
+        if (!obj[parentKey]) {
+            obj[parentKey] = {};
+        }
+        
+        // Ensure it's an object
+        if (typeof obj[parentKey] !== 'object' || Array.isArray(obj[parentKey])) {
+            obj[parentKey] = {};
+        }
+        
+        obj[parentKey][nestedKey] = value;
+        return;
+    }
+    
+    // Handle simple keys - check for duplicates to convert to arrays
+    if (key in obj) {
+        const existing = obj[key];
+        if (Array.isArray(existing)) {
+            obj[key] = [...existing, value];
+        } else {
+            obj[key] = [existing, value];
+        }
+    } else {
+        obj[key] = value;
+    }
+}
+
 function buildMatcher(path: string): { regex: RegExp | null; names: string[] } {
     if (!path.includes(":") && !path.includes("*")) return { regex: null, names: [] };
     const names: string[] = [];

package/test-url-encoding.ts

@@ -17,3 +17,4 @@ app.get("/api/resources/:resourceType/:id", (ctx) => {
 app.start();
 console.log(`Test server running on http://localhost:${app.server?.port}`);
 console.log(`Test URL: http://localhost:${app.server?.port}/api/resources/Doctype%20Permission/01992af8-1c69-7000-9219-9b83c2feb2d6`);
+