evikit 2.1.0 → 2.2.1

package/README.md

@@ -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.
@@ -85,7 +85,7 @@ node_modules
 Let's start by modelling a relational database schema. We have a question with multiple text choice options. Create `src/lib/db/schema.js`:
 
 ```js
-import { primary, references } from "evikit/db";
+import { primary, references } from "evikit";
 import { integer, number, object, optional, pipe, string } from "valibot";
 
 export const Question = object({
@@ -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/index.d.ts

@@ -2,6 +2,7 @@ import type { ClassAttributes, ComponentChildren, JSX, VNode } from "preact";
 
 import i18n from "gettext.js";
 
+import { flatten, primary, references, relations } from "./db.js";
 import { useApi } from "./use-api.js";
 import { useEnhance } from "./use-enhance.js";
 
@@ -113,4 +114,5 @@ export const svg: H<"svg">;
 export const title: H<"title">;
 export const ul: H<"ul">;
 
+export { flatten, primary, references, relations };
 export { useApi, useEnhance };

package/index.js

@@ -10,6 +10,7 @@ import {
 import { locationStub } from "preact-iso/prerender";
 import { useState } from "preact/hooks";
 
+import { flatten, primary, references, relations } from "./db.js";
 import {
   a,
   b,
@@ -171,6 +172,8 @@ export async function ssr(App, data) {
   };
 }
 
+export { flatten, primary, references, relations };
+
 export { getI18n, useApi, useEnhance, useI18n, useQueryClient, useStatus };
 
 export {

package/package.json

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

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)