evikit 2.0.0 → 2.2.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.
 
@@ -52,7 +52,7 @@ cd mysite
 npm init -y
 
 # Routing and validation.
-npm i accept-language classnames evikit express hoofd preact preact-iso valibot
+npm i accept-language classnames evikit express file-type hoofd preact preact-iso valibot
 npm i -D @preact/preset-vite cross-env vite vite-bundle-analyzer
 
 # API documentation.
@@ -688,6 +688,158 @@ form(
 ),
 ```
 
+### File upload
+
+Why not let each choice have an icon?
+
+In `src/lib/db/schema.js`:
+
+```js
+import { instance } from "valibot";
+
+// Other imports and Question schema...
+
+export const Storage = object({
+  content: instance(Uint8Array),
+  id: pipe(string(), primary()),
+});
+
+export const Choice = object({
+  iconStorageId: pipe(string(), references(Storage, "id")),
+  // The rest of the Choice schema...
+});
+```
+
+In `src/routes/api/choice/types.js`:
+
+```js
+import { file } from "valibot";
+// Other imports...
+
+export const ChoicePost = {
+  input: object({
+    icon: file(),
+// The rest of the schema...
+```
+
+In `src/routes/api/choice/server.js`:
+
+```js
+import { fileTypeFromBuffer } from "file-type";
+import { createHash } from "node:crypto";
+import { parse, picklist } from "valibot";
+
+// ...
+if (!question) {
+  return text(i18n.gettext("Question does not exist"), 400);
+}
+
+const buffer = Buffer.from(await input.icon.arrayBuffer());
+
+// Fail if user sent something else than an image.
+const fileType = await fileTypeFromBuffer(buffer);
+ok(fileType);
+const { ext } = fileType;
+parse(picklist(["gif", "jpg", "png", "webp"]), ext);
+
+// Don't save another image if hash already known.
+const iconStorageId = `${createHash("sha256").update(buffer).digest("hex")}.${ext}`;
+db.Storage.upsert({
+  content: new Uint8Array(buffer.buffer),
+  id: iconStorageId,
+});
+
+const [choice] = db.Choice.upsert({
+  iconStorageId,
+// ...
+```
+
+In `src/routes/api/question/[id]/types.js`:
+
+```js
+// ...
+question: object({
+  ...schema.Question.entries,
+  Choice: array(
+    object({
+      ...schema.Choice.entries,
+      iconUrl: string(),
+    }),
+  ),
+}),
+// ...
+```
+
+In `src/routes/api/question[id]/server.js`:
+
+```js
+import { fileTypeFromBuffer } from "file-type";
+import { ok } from "node:assert/strict";
+
+// ...
+
+const Question = db.Question.select({
+  with: { Choice: { with: { iconStorage: true } } },
+});
+
+// ...
+
+return json({
+  question: {
+    ...question,
+    Choice: await Promise.all(
+      question.Choice.map(async (choice) => {
+        ok(choice.iconStorage);
+        const buffer = Buffer.from(choice.iconStorage.content.buffer);
+        const fileType = await fileTypeFromBuffer(buffer);
+        ok(fileType);
+        return {
+          ...choice,
+          iconUrl: `data:${fileType.mime};base64,${buffer.toString("base64")}`,
+        };
+      }),
+    ),
+  },
+});
+```
+
+In `src/routes/question/[id]/page.js`:
+
+```js
+import { img } from "evikit";
+// ...
+
+form(
+  {
+    action: "/api/choice",
+    enctype: "multipart/form-data",
+    method: "POST",
+    onSubmit: suggestPost.onSubmit,
+  },
+  // ...
+  p(
+    { class: "fieldset" },
+    label({ for: "icon" }, i18n.gettext("Icon")),
+    input({ id: "icon", name: "icon", type: "file" }),
+  ),
+  // The rest of the /api/choice form...
+),
+
+form(
+  { action: "/api/vote", method: "POST", onSubmit: votePost.onSubmit },
+  // ...
+  input({
+    id: choice.id,
+    name: "choiceId",
+    type: "radio",
+    value: choice.id,
+  }),
+  label(
+    { for: choice.id },
+    img({ alt: "", height: "24", src: choice.iconUrl, width: "24" }),
+// ...
+```
+
 ### Translation
 
 For the Ukrainian language, which has the `uk` [two-letter language code](https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes), create an empty file `po/uk.po`. It will use the [gettext](https://www.gnu.org/software/gettext/) format, which is well-known to professional translators.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "evikit",
   "description": "Preact/SQLite SSR framework for small web apps",
-  "version": "2.0.0",
+  "version": "2.2.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/sqlite.js

@@ -71,7 +71,10 @@ export function sqlite({ pkg, schema }) {
             : entry.expects == "number" ||
                 entry.expects == "(number | undefined)"
               ? "INTEGER"
-              : fail(name),
+              : entry.expects == "Uint8Array" ||
+                  entry.expects == "(Uint8Array | undefined)"
+                ? "BLOB"
+                : fail(name),
       };
     }),
     foreignKeys: Object.entries(entries)

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,