evikit 2.3.2 → 2.4.0

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

package/index.d.ts

@@ -1,134 +1,153 @@
-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";
-
-export interface DehydratedState {
-  queries: { queryHash: string; state: QueryState }[];
-}
-
-export interface QueryState {
-  data: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-  dataUpdatedAt: number;
-  error: null | unknown;
-  isInvalidated: boolean;
-  status: "error" | "loading" | "success";
-}
-
-type H<T extends keyof JSX.IntrinsicElements> = (
-  props: (ClassAttributes<HTMLElement> & JSX.IntrinsicElements[T]) | null,
-  ...children: ComponentChildren[]
-) => VNode<ClassAttributes<HTMLElement> & JSX.IntrinsicElements[T]>;
-
-export function dehydrate(
-  queryClient: ReturnType<typeof useQueryClient>,
-  options: {
-    shouldRedactErrors: (error: unknown) => boolean;
-  },
-): DehydratedState;
-
-export function getI18n(...langs: string[]): Promise<i18n.Gettext>;
-
-export function hydrate(
-  App: (props: {
-    dehydratedState?: DehydratedState | undefined;
-    i18n: i18n.Gettext;
-  }) => VNode<any>, // eslint-disable-line @typescript-eslint/no-explicit-any
-  renderTarget: string,
-): Promise<void>;
-
-export function Router({
-  children,
-  dehydratedState,
-  i18n,
-}: {
-  children?: ComponentChildren;
-  dehydratedState?: DehydratedState | undefined;
-  i18n: i18n.Gettext;
-}): VNode<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
-
-export function ssr(
-  App: (props: {
-    dehydratedState?: DehydratedState | undefined;
-    i18n: i18n.Gettext;
-  }) => VNode<any>, // eslint-disable-line @typescript-eslint/no-explicit-any
-  data: { lang?: string; url: string },
-): Promise<{
-  data: {
-    dehydratedState: DehydratedState;
-    lang?: string;
-    url: string;
-  };
-  head: {
-    elements: Set<{
-      props: Record<string, string>;
-      type: string;
-    }>;
-    lang: string;
-    title: string;
-  };
-  html: string;
-  links: Set<string> | undefined;
-}>;
-
-export function useI18n(): i18n.Gettext;
-
-export function useQueryClient(): {
-  invalidateQueries(): void;
-};
-
-export function useStatus(error: unknown): string;
-
-export const a: H<"a">;
-export const article: H<"article">;
-export const b: H<"b">;
-export const blockquote: H<"blockquote">;
-export const br: H<"br">;
-export const button: H<"button">;
-export const circle: H<"circle">;
-export const code: H<"code">;
-export const details: H<"details">;
-export const dialog: H<"dialog">;
-export const div: H<"div">;
-export const em: H<"em">;
-export const fieldset: H<"fieldset">;
-export const figcaption: H<"figcaption">;
-export const figure: H<"figure">;
-export const footer: H<"footer">;
-export const form: H<"form">;
-export const h1: H<"h1">;
-export const h2: H<"h2">;
-export const h3: H<"h3">;
-export const h4: H<"h4">;
-export const h5: H<"h5">;
-export const h6: H<"h6">;
-export const header: H<"header">;
-export const hr: H<"hr">;
-export const i: H<"i">;
-export const img: H<"img">;
-export const input: H<"input">;
-export const label: H<"label">;
-export const legend: H<"legend">;
-export const li: H<"li">;
-export const main: H<"main">;
-export const nav: H<"nav">;
-export const ol: H<"ol">;
-export const option: H<"option">;
-export const p: H<"p">;
-export const path: H<"path">;
-export const pre: H<"pre">;
-export const section: H<"section">;
-export const select: H<"select">;
-export const small: H<"small">;
-export const span: H<"span">;
-export const strong: H<"strong">;
-export const summary: H<"summary">;
-export const svg: H<"svg">;
-export const title: H<"title">;
-export const ul: H<"ul">;
-
-export { flatten, primary, references, relations };
-export { useApi, useEnhance };
+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";
+
+export interface DehydratedState {
+  queries: { queryHash: string; state: QueryState }[];
+}
+
+export interface QueryState {
+  data: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+  dataUpdatedAt: number;
+  error: null | unknown;
+  isInvalidated: boolean;
+  status: "error" | "loading" | "success";
+}
+
+type H<T extends keyof JSX.IntrinsicElements> = (
+  props: (ClassAttributes<HTMLElement> & JSX.IntrinsicElements[T]) | null,
+  ...children: ComponentChildren[]
+) => VNode<ClassAttributes<HTMLElement> & JSX.IntrinsicElements[T]>;
+
+export function dehydrate(
+  queryClient: ReturnType<typeof useQueryClient>,
+  options: {
+    shouldRedactErrors: (error: unknown) => boolean;
+  },
+): DehydratedState;
+
+export function getI18n(...langs: string[]): Promise<i18n.Gettext>;
+
+export function hydrate(
+  App: (props: {
+    dehydratedState?: DehydratedState | undefined;
+    i18n: i18n.Gettext;
+  }) => VNode<any>, // eslint-disable-line @typescript-eslint/no-explicit-any
+  renderTarget: string,
+): Promise<void>;
+
+export function Router({
+  children,
+  dehydratedState,
+  i18n,
+}: {
+  children?: ComponentChildren;
+  dehydratedState?: DehydratedState | undefined;
+  i18n: i18n.Gettext;
+}): VNode<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+export function ssr(
+  App: (props: {
+    dehydratedState?: DehydratedState | undefined;
+    i18n: i18n.Gettext;
+  }) => VNode<any>, // eslint-disable-line @typescript-eslint/no-explicit-any
+  data: { lang?: string; url: string },
+): Promise<{
+  data: {
+    dehydratedState: DehydratedState;
+    lang?: string;
+    url: string;
+  };
+  head: {
+    elements: Set<{
+      props: Record<string, string>;
+      type: string;
+    }>;
+    lang: string;
+    title: string;
+  };
+  html: string;
+  links: Set<string> | undefined;
+}>;
+
+export function useI18n(): i18n.Gettext;
+
+export function useQueryClient(): {
+  invalidateQueries(): void;
+};
+
+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">;
+export const em: H<"em">;
+export const fieldset: H<"fieldset">;
+export const figcaption: H<"figcaption">;
+export const figure: H<"figure">;
+export const footer: H<"footer">;
+export const form: H<"form">;
+export const h1: H<"h1">;
+export const h2: H<"h2">;
+export const h3: H<"h3">;
+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">;
+export const main: H<"main">;
+export const nav: H<"nav">;
+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 };