evikit 2.9.2 → 2.10.1

package/README.md

@@ -180,7 +180,7 @@ export function ErrorPage({ children, error }) {
   useTitle(status);
 
   return main(
-    null,
+    { id: "main" },
     p({ class: "nav" }, a({ href: "/" }, i18n.gettext("Questions"))),
     h1({ class: "title" }, status),
     children,
@@ -221,9 +221,7 @@ export function api() {
 Add a Preact router at `src/app.js` (uncomment the routes one-by-one when we add them later):
 
 ```js
-import { hydrate, Router, ssr } from "evikit";
-import { h } from "preact";
-import { Route } from "preact-iso";
+import { route, ssr } from "evikit";
 
 import { acceptLanguages } from "./lib/index.js";
 import { ErrorPage } from "./routes/error.js";
@@ -232,21 +230,11 @@ import { ErrorPage } from "./routes/error.js";
 
 acceptLanguages();
 
-/** @param {import("evikit").SsrProps} props */
-export const prerender = (props) => ssr(App, props);
-
-/** @type {import("evikit").SsrApp} */
-function App(props) {
-  return h(
-    Router,
-    props,
-    // h(Route, { component: HomePage, path: "/" }),
-    // h(Route, { component: QuestionIdPage, path: "/question/:id" }),
-    h(Route, { component: ErrorPage, default: true }),
-  );
-}
-
-hydrate(App, "#app");
+export const prerender = ssr(
+  { ErrorPage },
+  // route("/", HomePage),
+  // route("/question/:id", QuestionIdPage),
+);
 ```
 
 #### HTML entry point
@@ -386,6 +374,8 @@ export const HomeGet = {
 };
 ```
 
+> 😉 Note: for live refresh to know when data changes, use columns from `schema` in `outputs`, instead of writing `string()` or `number()` anew.
+
 Code the API server endpoint in `src/routes/api/server.js`:
 
 ```js
@@ -523,6 +513,8 @@ export function QuestionIdPage() {
   }
 
   return main(
+    { id: "main" },
+
     h1({ class: "title" }, title),
 
     // VOTE_FORM: replace with form view from the "Vote for choice" section.

package/index.d.ts

@@ -14,6 +14,7 @@ export interface QueryState {
   data: any; // eslint-disable-line @typescript-eslint/no-explicit-any
   dataUpdatedAt: number;
   error: null | unknown;
+  fromEventSource: boolean;
   isInvalidated: boolean;
   status: "error" | "loading" | "success";
 }
@@ -61,6 +62,7 @@ export function dehydrate(
 
 export function getI18n(...langs: string[]): Promise<i18n.Gettext>;
 
+/** @deprecated */
 export function hydrate(
   App: (props: {
     dehydratedState?: DehydratedState | undefined;
@@ -69,6 +71,12 @@ export function hydrate(
   renderTarget: string,
 ): Promise<void>;
 
+export function route(
+  path: string,
+  component: () => VNode<any> | VNode<never>, // eslint-disable-line @typescript-eslint/no-explicit-any
+): { component: typeof component; path: string };
+
+/** @deprecated */
 export function Router({
   children,
   dehydratedState,
@@ -80,8 +88,18 @@ export function Router({
 }): VNode<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
 
 /** @deprecated */
-export function ssr(App: SsrApp): (props: SsrProps) => Promise<SsrResponse>;
 export function ssr(App: SsrApp, props: SsrProps): Promise<SsrResponse>;
+/** @deprecated */
+export function ssr(App: SsrApp): (props: SsrProps) => Promise<SsrResponse>;
+export function ssr(
+  props: {
+    ErrorPage: (props: {
+      children?: import("preact").ComponentChildren;
+      error?: unknown;
+    }) => VNode<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
+  },
+  ...routes: ReturnType<typeof route>[]
+): (props: SsrProps) => Promise<SsrResponse>;
 
 export function useI18n(): i18n.Gettext;
 

package/index.js

@@ -6,6 +6,7 @@ import {
   Router as IsoRouter,
   LocationProvider,
   prerender,
+  Route,
 } from "preact-iso";
 import { locationStub } from "preact-iso/prerender";
 import { useState } from "preact/hooks";
@@ -63,6 +64,14 @@ export async function hydrate(App, renderTarget) {
   }
 }
 
+/**
+ * @param {string | null} path
+ * @param {() => import("preact").VNode} component
+ */
+export function route(path, component) {
+  return { component, default: !path, path };
+}
+
 /** @param {{ children?: import("preact").ComponentChildren, dehydratedState?: ReturnType<import("./query.js").dehydrate> | undefined, i18n: ReturnType<import("./i18n.js").useI18n> }} props */
 export function Router({ children, dehydratedState, i18n }) {
   const [queryClient] = useState(
@@ -91,16 +100,41 @@ export function Router({ children, dehydratedState, i18n }) {
   );
 }
 
+/** @param {(import("./index.d.ts").SsrApp | import("./index.d.ts").SsrProps | { ErrorPage: () => import("preact").VNode } | ReturnType<import("./index.d.ts").route>)[]} args */
+export function ssr(...args) {
+  if (typeof args[0] == "function") {
+    const App = args[0];
+    /** @type {import("./index.d.ts").SsrProps | undefined} */
+    const props = /** @type {any} */ (args[1]);
+    if (props) {
+      return ssrInner(App, props);
+    }
+    /** @param {import("./index.d.ts").SsrProps} props */
+    return (props) => ssrInner(App, props);
+  }
+  /** @type {() => import("preact").VNode} */
+  const ErrorPage = /** @type {any} */ (args[0]).ErrorPage;
+  /** @type {ReturnType<import("./index.d.ts").route>[]} */
+  const routes = /** @type {any} */ (args.slice(1));
+  /** @type {import("./index.d.ts").SsrApp} */
+  function App(props) {
+    return h(
+      Router,
+      props,
+      ...routes.map((route) => h(Route, route)),
+      h(Route, { component: ErrorPage, default: true }),
+    );
+  }
+  hydrate(App, "#app");
+  /** @param {import("./index.d.ts").SsrProps} props */
+  return (props) => ssrInner(App, props);
+}
+
 /**
  * @param {(props: { dehydratedState?: ReturnType<import("./query.js").dehydrate> | undefined, i18n: ReturnType<import("./i18n.js").useI18n> }) => import("preact").VNode} App
- * @param {{ cookie?: string | undefined, lang?: string, url: string }} [data]
+ * @param {{ cookie?: string | undefined, lang?: string, url: string }} data
  */
-export async function ssr(App, data) {
-  if (!data) {
-    /** @param {NonNullable<typeof data>} data */
-    return (data) => ssr(App, data);
-  }
-
+async function ssrInner(App, data) {
   const i18n = await getI18n(...(data.lang ? [data.lang] : []));
 
   const queryClient = new QueryClient({

package/package.json

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