evikit 2.0.0 → 2.1.0

package/README.md

@@ -13,7 +13,7 @@ Vite is a good foundation for building a server-rendered monolith SPA with an JS
 - Show the language chosen by the user in browser settings
 - Have SEO meta descriptions
 - Generate API documentation with a Swagger overview
-- _TODO_ Multipart forms
+- Send multipart not urlencoded when there's a file
 
 _TODO_ Add more simple language docs near code, don't overwhelm readers.
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "evikit",
   "description": "Preact/SQLite SSR framework for small web apps",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "type": "module",
   "exports": {
     ".": "./index.js",

package/server.d.ts

@@ -91,7 +91,9 @@ export function router(
             | {
                 content: {
                   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  "application/x-www-form-urlencoded": { schema: any };
+                  "application/x-www-form-urlencoded"?: { schema: any };
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  "multipart/form-data"?: { schema: any };
                 };
               };
           responses: Record<

package/server.js

@@ -20,6 +20,7 @@ import { Po } from "./i18n.js";
 
 /** @type {import("./server-generic.js").ServerEndpoint} */
 export function endpoint({ input, outputs }, handler) {
+  const arrayOf = ArrayOf(input);
   const schema = union(
     Object.entries(outputs).map(([status, schema]) =>
       object({
@@ -34,7 +35,7 @@ export function endpoint({ input, outputs }, handler) {
   return {
     handler: async (req, res) => {
       try {
-        /** @type {Record<string, string | string[]>} */
+        /** @type {Record<string, string | File | (string | File)[]>} */
         const body = {};
         if (req.headers["content-type"]) {
           const busboy = new Busboy({
@@ -44,13 +45,39 @@ export function endpoint({ input, outputs }, handler) {
             body[name] =
               typeof body[name] == "undefined"
                 ? value
-                : [
-                    ...(typeof body[name] == "string"
-                      ? [body[name]]
-                      : body[name]),
-                    value,
-                  ];
+                : Array.isArray(body[name])
+                  ? [...body[name], value]
+                  : [body[name], value];
           });
+
+          if (
+            Object.values(input.entries).some(
+              (entry) => entry.type == "file" || arrayOf(entry, "file"),
+            )
+          ) {
+            busboy.on("file", (name, stream, filename) => {
+              const entry = input.entries[name];
+              if (entry && (entry.type == "file" || arrayOf(entry, "file"))) {
+                /** @type {ArrayBuffer[]} */
+                const buffers = [];
+                stream.on("data", (data) => {
+                  buffers.push(data);
+                });
+                stream.on("end", () => {
+                  const value = new File(buffers, filename);
+                  body[name] =
+                    typeof body[name] == "undefined"
+                      ? value
+                      : Array.isArray(body[name])
+                        ? [...body[name], value]
+                        : [body[name], value];
+                });
+              } else {
+                stream.resume();
+              }
+            });
+          }
+
           await new Promise((resolve, reject) => {
             busboy.on("error", reject).on("finish", resolve);
             req.pipe(busboy);
@@ -269,6 +296,7 @@ export function router({ pkg }, ...routes) {
         path.replace(/:(\w+)/g, "{$1}"),
         Object.fromEntries(
           Object.entries(controller).map(([method, { input, outputs }]) => {
+            const arrayOf = ArrayOf(input);
             const parameters = path
               .split("/")
               .filter((component) => /^:/.test(component))
@@ -286,7 +314,12 @@ export function router({ pkg }, ...routes) {
                   ? {
                       requestBody: {
                         content: {
-                          "application/x-www-form-urlencoded": {
+                          [Object.values(input.entries).some(
+                            (entry) =>
+                              entry.type == "file" || arrayOf(entry, "file"),
+                          )
+                            ? "multipart/form-data"
+                            : "application/x-www-form-urlencoded"]: {
                             schema: toJsonSchema(
                               object(
                                 Object.fromEntries(
@@ -295,7 +328,13 @@ export function router({ pkg }, ...routes) {
                                   ),
                                 ),
                               ),
-                              { ignoreActions: ["trim"] },
+                              {
+                                ignoreActions: ["trim"],
+                                overrideSchema: (context) =>
+                                  context.valibotSchema.type == "file"
+                                    ? { format: "binary", type: "string" }
+                                    : context.jsonSchema,
+                              },
                             ),
                           },
                         },
@@ -426,3 +465,21 @@ export function text(output, status) {
     status,
   };
 }
+
+/** @param {import("valibot").ObjectSchema<any, any>} input */
+function ArrayOf(input) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const entries = Object.values(input);
+  /**
+   * @param {typeof entries[0]} entry
+   * @param {string} type
+   */
+  return function arrayOf(entry, type) {
+    if (entry.type != "array") {
+      return false;
+    }
+    /** @type {import("valibot").ArraySchema<any, any>} */
+    const array = /** @type {any} */ (entry);
+    return array.item.type == type;
+  };
+}

package/use-enhance.js

@@ -21,14 +21,23 @@ export function useEnhance(schema, onSuccess) {
     setBusy(true);
     const form = /** @type {HTMLFormElement} */ (event.target);
     let output;
+
     try {
-      const body = new URLSearchParams();
+      const body = form.querySelector('[type="file"]')
+        ? new FormData()
+        : new URLSearchParams();
       for (const input of [...form.querySelectorAll("input")]) {
-        if (
-          !input.disabled &&
-          ((input.type != "checkbox" && input.type != "radio") || input.checked)
-        ) {
-          body.append(input.name, input.value);
+        if (!input.disabled) {
+          if (input.type == "file" && body instanceof FormData) {
+            for (const file of input.files || []) {
+              body.append(input.name, file, file.name);
+            }
+          } else if (
+            (input.type != "checkbox" && input.type != "radio") ||
+            input.checked
+          ) {
+            body.append(input.name, input.value);
+          }
         }
       }
       for (const select of [...form.querySelectorAll("select")]) {
@@ -41,11 +50,14 @@ export function useEnhance(schema, onSuccess) {
           body.append(textarea.name, textarea.value);
         }
       }
+
       const response = await fetch(form.action, {
-        body: body.toString(),
+        body: body instanceof FormData ? body : body.toString(),
         headers: {
           Accept: "application/json",
-          "Content-Type": "application/x-www-form-urlencoded",
+          ...(body instanceof FormData
+            ? {}
+            : { "Content-Type": "application/x-www-form-urlencoded" }),
           Cookie: jsdomCookie.setCookie.join("; "),
         },
         method: form.method,