evikit 2.3.3 → 2.5.0

package/.woodpecker/test.yaml

@@ -0,0 +1,26 @@
+when:
+  - event: push
+    branch: main
+  - event: pull_request
+
+steps:
+  - name: build
+    image: node:24-alpine
+    commands:
+      - apk add git
+      # Are types correct?
+      - npm i
+      - npm run lint
+      - npx tsc
+      # Does todo app example build?
+      - npm create evikit my-app
+      - rm -rf my-app/node_modules/evikit
+      - (cd my-app/node_modules; git clone ../.. evikit)
+      - (cd my-app; npm run build)
+      # Does real-world application pass tests?
+      - git clone https://codeberg.org/nykula/lanquiz
+      - (cd lanquiz; npm i)
+      - rm -rf lanquiz/node_modules/evikit
+      - (cd lanquiz/node_modules; git clone ../.. evikit)
+      - (cd lanquiz; npm run build)
+      - (cd lanquiz; npm test -- --test-concurrency=1)

package/README.md

@@ -14,9 +14,26 @@ Vite is a good foundation for building a server-rendered monolith SPA with an JS
 - Have SEO meta descriptions
 - Generate API documentation with a Swagger overview
 - Send multipart not urlencoded when there's a file
+- Distribute requests between listeners for each CPU core
 
 _TODO_ Add more simple language docs near code, don't overwhelm readers.
 
+## Quick start
+
+> 😉 If you are new to Preact and the concept of Virtual DOM, it is a good idea to complete the [Preact tutorial](https://preactjs.com/tutorial/) first.
+
+Run the [create-evikit](https://codeberg.org/nykula/create-evikit) initializer to start with a todo app example that you can see on the [EviKit website](https://evikit.js.org/):
+
+```sh
+npm init evikit my-app
+cd my-app
+npm run dev
+```
+
+Then open http://localhost:5173/, try editing the example routes and see changes live.
+
+The initializer automates some of the steps from this tutorial, such as installing dependencies, adding scripts to your `package.json`, and creating typical files such as `index.html` and `vite.config.js`.
+
 ## Documentation
 
 Let's see how to build a basic poll application using this framework. The application will be a site that lets people view polls, suggest their options and vote.
@@ -847,6 +864,8 @@ form(
 
 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.
 
+Install the `gettext` package from your distribution repositories or from [here for Windows](https://mlocati.github.io/articles/gettext-iconv-windows.html).
+
 Extract translatable strings from code:
 
 ```sh
@@ -913,6 +932,26 @@ Change your `index.html` like this:
 
 Style your app however you like.
 
+### Background worker
+
+You can run something repeatedly in main process, not in listeners for each CPU core. In development, it will restart whenever you edit api routes.
+
+Add to `src/lib/db/index.js`:
+
+```js
+import { daemon } from "evikit/server";
+
+// ...
+
+const unique = crypto.randomUUID();
+daemon(() => {
+  const interval = setInterval(() => {
+    console.log({ now: Date.now(), unique });
+  }, 1000);
+  return () => clearInterval(interval);
+});
+```
+
 ### Testing
 
 A practical integration test for EviKit itself is [Lanquiz](https://codeberg.org/nykula/lanquiz), an app to host quizzes in LAN from a laptop, which is built on top of EviKit.

package/index.d.ts

@@ -83,13 +83,18 @@ export function useQueryClient(): {
 export function useStatus(error: unknown): string;
 
 export const a: H<"a">;
+export const address: H<"address">;
 export const article: H<"article">;
+export const aside: H<"aside">;
+export const audio: H<"audio">;
 export const b: H<"b">;
 export const blockquote: H<"blockquote">;
 export const br: H<"br">;
 export const button: H<"button">;
+export const canvas: H<"canvas">;
 export const circle: H<"circle">;
 export const code: H<"code">;
+export const del: H<"del">;
 export const details: H<"details">;
 export const dialog: H<"dialog">;
 export const div: H<"div">;
@@ -106,10 +111,13 @@ export const h4: H<"h4">;
 export const h5: H<"h5">;
 export const h6: H<"h6">;
 export const header: H<"header">;
+export const hgroup: H<"hgroup">;
 export const hr: H<"hr">;
 export const i: H<"i">;
+export const iframe: H<"iframe">;
 export const img: H<"img">;
 export const input: H<"input">;
+export const ins: H<"ins">;
 export const label: H<"label">;
 export const legend: H<"legend">;
 export const li: H<"li">;
@@ -119,16 +127,27 @@ export const ol: H<"ol">;
 export const option: H<"option">;
 export const p: H<"p">;
 export const path: H<"path">;
+export const picture: H<"picture">;
 export const pre: H<"pre">;
 export const section: H<"section">;
 export const select: H<"select">;
 export const small: H<"small">;
+export const source: H<"source">;
 export const span: H<"span">;
 export const strong: H<"strong">;
+export const sub: H<"sub">;
 export const summary: H<"summary">;
+export const sup: H<"sup">;
 export const svg: H<"svg">;
+export const table: H<"table">;
+export const tbody: H<"tbody">;
+export const td: H<"td">;
+export const textarea: H<"textarea">;
+export const thead: H<"thead">;
 export const title: H<"title">;
+export const tr: H<"tr">;
 export const ul: H<"ul">;
+export const video: H<"video">;
 
 export { flatten, primary, references, relations };
 export { useApi, useEnhance };

package/index.js

@@ -11,55 +11,7 @@ import { locationStub } from "preact-iso/prerender";
 import { useState } from "preact/hooks";
 
 import { flatten, primary, references, relations } from "./db.js";
-import {
-  a,
-  article,
-  b,
-  blockquote,
-  br,
-  button,
-  circle,
-  code,
-  details,
-  dialog,
-  div,
-  em,
-  fieldset,
-  figcaption,
-  figure,
-  footer,
-  form,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  header,
-  hr,
-  i,
-  img,
-  input,
-  label,
-  legend,
-  li,
-  main,
-  nav,
-  ol,
-  option,
-  p,
-  path,
-  pre,
-  section,
-  select,
-  small,
-  span,
-  strong,
-  summary,
-  svg,
-  title,
-  ul,
-} from "./html.js";
+import { HTMLElement } from "./html-element.js";
 import { getI18n, Po, RawI18nProvider, useI18n } from "./i18n.js";
 import {
   dehydrate,
@@ -188,56 +140,72 @@ export async function ssr(App, data) {
   };
 }
 
-export { flatten, primary, references, relations };
+export const a = HTMLElement("a");
+export const address = HTMLElement("address");
+export const article = HTMLElement("article");
+export const aside = HTMLElement("aside");
+export const audio = HTMLElement("audio");
+export const b = HTMLElement("b");
+export const blockquote = HTMLElement("blockquote");
+export const br = HTMLElement("br");
+export const button = HTMLElement("button");
+export const canvas = HTMLElement("canvas");
+export const circle = HTMLElement("circle");
+export const code = HTMLElement("code");
+export const del = HTMLElement("del");
+export const details = HTMLElement("details");
+export const dialog = HTMLElement("dialog");
+export const div = HTMLElement("div");
+export const em = HTMLElement("em");
+export const fieldset = HTMLElement("fieldset");
+export const figcaption = HTMLElement("figcaption");
+export const figure = HTMLElement("figure");
+export const footer = HTMLElement("footer");
+export const form = HTMLElement("form");
+export const h1 = HTMLElement("h1");
+export const h2 = HTMLElement("h2");
+export const h3 = HTMLElement("h3");
+export const h4 = HTMLElement("h4");
+export const h5 = HTMLElement("h5");
+export const h6 = HTMLElement("h6");
+export const header = HTMLElement("header");
+export const hgroup = HTMLElement("hgroup");
+export const hr = HTMLElement("hr");
+export const i = HTMLElement("i");
+export const iframe = HTMLElement("iframe");
+export const img = HTMLElement("img");
+export const input = HTMLElement("input");
+export const ins = HTMLElement("ins");
+export const label = HTMLElement("label");
+export const legend = HTMLElement("legend");
+export const li = HTMLElement("li");
+export const main = HTMLElement("main");
+export const nav = HTMLElement("nav");
+export const ol = HTMLElement("ol");
+export const option = HTMLElement("option");
+export const p = HTMLElement("p");
+export const path = HTMLElement("path");
+export const picture = HTMLElement("picture");
+export const pre = HTMLElement("pre");
+export const section = HTMLElement("section");
+export const select = HTMLElement("select");
+export const small = HTMLElement("small");
+export const source = HTMLElement("source");
+export const span = HTMLElement("span");
+export const strong = HTMLElement("strong");
+export const sub = HTMLElement("sub");
+export const summary = HTMLElement("summary");
+export const sup = HTMLElement("sup");
+export const svg = HTMLElement("svg");
+export const table = HTMLElement("table");
+export const tbody = HTMLElement("tbody");
+export const td = HTMLElement("td");
+export const textarea = HTMLElement("textarea");
+export const thead = HTMLElement("thead");
+export const title = HTMLElement("title");
+export const tr = HTMLElement("tr");
+export const ul = HTMLElement("ul");
+export const video = HTMLElement("video");
 
+export { flatten, primary, references, relations };
 export { getI18n, useApi, useEnhance, useI18n, useQueryClient, useStatus };
-
-export {
-  a,
-  article,
-  b,
-  blockquote,
-  br,
-  button,
-  circle,
-  code,
-  details,
-  dialog,
-  div,
-  em,
-  fieldset,
-  figcaption,
-  figure,
-  footer,
-  form,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  header,
-  hr,
-  i,
-  img,
-  input,
-  label,
-  legend,
-  li,
-  main,
-  nav,
-  ol,
-  option,
-  p,
-  path,
-  pre,
-  section,
-  select,
-  small,
-  span,
-  strong,
-  summary,
-  svg,
-  title,
-  ul,
-};

package/package.json

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

package/server.d.ts

@@ -8,6 +8,8 @@ import type {
   ServerText,
 } from "./server-generic.js";
 
+export function daemon(callback: () => () => void): void;
+
 export const endpoint: ServerEndpoint;
 
 export const json: ServerJson;

package/server.js

@@ -2,7 +2,9 @@ import { Busboy } from "@fastify/busboy";
 import { toJsonSchema } from "@valibot/to-json-schema";
 import acceptLanguage from "accept-language";
 import { po } from "gettext-parser";
+import cluster from "node:cluster";
 import { readFile } from "node:fs/promises";
+import { availableParallelism } from "node:os";
 import { h } from "preact";
 import { renderToString } from "preact-render-to-string";
 import {
@@ -18,6 +20,21 @@ import {
 
 import { Po } from "./i18n.js";
 
+/** @param {() => () => void} callback */
+export function daemon(callback) {
+  if (
+    (process.env["npm_command"] == "start" && cluster.isPrimary) ||
+    process.env["npm_lifecycle_event"] == "dev"
+  ) {
+    /** @type {any} */
+    const self = globalThis;
+    if (self.clearDaemon) {
+      self.clearDaemon();
+    }
+    self.clearDaemon = callback();
+  }
+}
+
 /** @type {import("./server-generic.js").ServerEndpoint} */
 export function endpoint({ input, outputs }, handler) {
   const arrayOf = ArrayOf(input);
@@ -191,18 +208,26 @@ export function json(output) {
 /** @param {{ listen: (port: number, callback: () => void) => { close(): void, on(event: "error", callback: (error: unknown) => void ): void } }} app */
 export function listen(app) {
   const port = Number(process.env["PORT"]) || 5173;
-  const server = app.listen(port, () => {
-    console.log(
-      `Server started at ${process.env["ORIGIN"] || `http://localhost:${port}`}`,
-    );
-  });
-  server.on("error", (error) => {
-    console.error(error);
-    process.exitCode = 1;
-  });
-  process.on("SIGTERM", () => {
-    server.close();
-  });
+  if (cluster.isPrimary && availableParallelism() > 1) {
+    for (let i = 0; i < availableParallelism(); i++) {
+      cluster.fork({ i });
+    }
+  } else {
+    const server = app.listen(port, () => {
+      if (cluster.isPrimary || process.env["i"] == "0") {
+        console.log(
+          `Server started at ${process.env["ORIGIN"] || `http://localhost:${port}`}`,
+        );
+      }
+    });
+    server.on("error", (error) => {
+      console.error(error);
+      process.exitCode = 1;
+    });
+    process.on("SIGTERM", () => {
+      server.close();
+    });
+  }
 }
 
 /** @param {{ html: string, prerender({ lang, url }: { lang: string, url: string }): Promise<{ data: {}, head: { elements: Set<{ props: { [k: string]: string }, type: string }>, lang: string, title: string }, html: string }> }} props */

package/html.js

@@ -1,49 +0,0 @@
-import { HTMLElement } from "./html-element.js";
-
-export const a = HTMLElement("a");
-export const article = HTMLElement("article");
-export const b = HTMLElement("b");
-export const blockquote = HTMLElement("blockquote");
-export const br = HTMLElement("br");
-export const button = HTMLElement("button");
-export const circle = HTMLElement("circle");
-export const code = HTMLElement("code");
-export const details = HTMLElement("details");
-export const dialog = HTMLElement("dialog");
-export const div = HTMLElement("div");
-export const em = HTMLElement("em");
-export const fieldset = HTMLElement("fieldset");
-export const figcaption = HTMLElement("figcaption");
-export const figure = HTMLElement("figure");
-export const footer = HTMLElement("footer");
-export const form = HTMLElement("form");
-export const header = HTMLElement("header");
-export const h1 = HTMLElement("h1");
-export const h2 = HTMLElement("h2");
-export const h3 = HTMLElement("h3");
-export const h4 = HTMLElement("h4");
-export const h5 = HTMLElement("h5");
-export const h6 = HTMLElement("h6");
-export const hr = HTMLElement("hr");
-export const i = HTMLElement("i");
-export const img = HTMLElement("img");
-export const input = HTMLElement("input");
-export const label = HTMLElement("label");
-export const legend = HTMLElement("legend");
-export const li = HTMLElement("li");
-export const main = HTMLElement("main");
-export const nav = HTMLElement("nav");
-export const ol = HTMLElement("ol");
-export const option = HTMLElement("option");
-export const p = HTMLElement("p");
-export const path = HTMLElement("path");
-export const pre = HTMLElement("pre");
-export const section = HTMLElement("section");
-export const select = HTMLElement("select");
-export const small = HTMLElement("small");
-export const span = HTMLElement("span");
-export const strong = HTMLElement("strong");
-export const summary = HTMLElement("summary");
-export const svg = HTMLElement("svg");
-export const title = HTMLElement("title");
-export const ul = HTMLElement("ul");