evikit 2.7.3 → 2.8.0

package/README.md

@@ -6,6 +6,8 @@ Vite is a good foundation for building a server-rendered monolith SPA with an JS
 
 - For each `/path`, fetch `/api/path` and SSR the page
 - Send urlencoded forms and refresh `/api/path` without a full page reload
+- Live-refresh `/api/path` whenever its database tables update
+  - Note: added in 2.8. To opt in, pass `db` to `router`
 - Validate API input and output against your schemas
 - Input is: cookies + url params + body (each overrides previous if key exists)
   - Note: PHP [removed cookies from this list](https://stackoverflow.com/questions/51538622/php-ini-request-order-security-concerns#comment90071163_51538946) but I think it's ok if used carefully
@@ -194,6 +196,7 @@ Add an API router at `src/api.js` (uncomment the routes one by one when we add t
 import { route, router } from "evikit/server";
 
 import pkg from "../package.json" with { type: "json" };
+import { db } from "./lib/db/index.js";
 import { acceptLanguages } from "./lib/index.js";
 // import { ChoiceServer } from "./routes/api/choice/server.js";
 // import { QuestionIdServer } from "./routes/api/question/[id]/server.js";
@@ -204,7 +207,7 @@ acceptLanguages();
 
 export function api() {
   return router(
-    { pkg },
+    { db, pkg },
     // route("/api", HomeServer),
     // route("/api/choice", ChoiceServer),
     // route("/api/question/:id", QuestionIdServer),

package/db.d.ts

@@ -46,6 +46,9 @@ export type Db<
         ): InferOutput<Schema[Table]>[];
       }
     : never;
+} & {
+  schema: Schema;
+  subscribe(onMessage: ({ table }: { table: string }) => void): () => void;
 };
 
 export type Flatten<

package/package.json

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

package/query.js

@@ -6,6 +6,7 @@ import { useContext, useEffect, useState } from "preact/hooks";
  * @property {any} data
  * @property {number} dataUpdatedAt
  * @property {unknown | null} error
+ * @property {boolean} fromEventSource
  * @property {boolean} isInvalidated
  * @property {"error" | "loading" | "success"} status
  */
@@ -37,18 +38,23 @@ export class QueryClient {
       const queryHash = QueryHash(queryKey);
       this.state.setQueries((queries) =>
         queries.map((query) =>
-          query.queryHash == queryHash ||
-          query.queryHash.startsWith(queryHash + "/")
+          (query.queryHash == queryHash ||
+            query.queryHash.startsWith(queryHash + "/")) &&
+          !query.state.fromEventSource
             ? { ...query, state: { ...query.state, isInvalidated: true } }
             : query,
         ),
       );
     } else {
       this.state.setQueries((queries) =>
-        queries.map((query) => ({
-          ...query,
-          state: { ...query.state, isInvalidated: true },
-        })),
+        queries.map((query) =>
+          query.state.fromEventSource
+            ? query
+            : {
+                ...query,
+                state: { ...query.state, isInvalidated: true },
+              },
+        ),
       );
     }
   }
@@ -56,19 +62,7 @@ export class QueryClient {
   /** @param {{ queryKey: string[], queryFn: () => Promise<any> }} props */
   async prefetchQuery({ queryFn, queryKey }) {
     const queryHash = QueryHash(queryKey);
-    /** @param {(queries: Queries) => QueryState} map */
-    const setQueryState = (map) =>
-      this.state.setQueries((queries) => {
-        const state = map(queries);
-        const existing = queries.find(
-          (query) => query.queryHash == queryHash,
-        )?.state;
-        return existing
-          ? queries.map((query) =>
-              query.state == existing ? { queryHash, state } : query,
-            )
-          : [...queries, { queryHash, state }];
-      });
+    const setQueryState = SetQueryState({ queryClient: this, queryKey });
 
     const state = this.state.queries.find(
       (query) => query.queryHash == queryHash,
@@ -76,6 +70,7 @@ export class QueryClient {
     if (
       !state ||
       (state.status != "loading" &&
+        !state.fromEventSource &&
         (state.isInvalidated ||
           state.dataUpdatedAt <
             Date.now() - this.defaultOptions.queries.staleTime))
@@ -84,6 +79,7 @@ export class QueryClient {
         data: state?.data ?? null,
         dataUpdatedAt: state?.dataUpdatedAt ?? 0,
         error: state?.error ?? null,
+        fromEventSource: state?.fromEventSource ?? false,
         isInvalidated: false,
         status: "loading",
       }));
@@ -93,16 +89,16 @@ export class QueryClient {
           data,
           dataUpdatedAt: Date.now(),
           error: null,
+          fromEventSource: false,
           isInvalidated: false,
           status: "success",
         }));
       } catch (error) {
-        setQueryState((queries) => ({
-          data:
-            queries.find((query) => query.queryHash == queryHash)?.state.data ??
-            null,
+        setQueryState((existing) => ({
+          data: existing?.data ?? null,
           dataUpdatedAt: Date.now(),
           error,
+          fromEventSource: false,
           isInvalidated: false,
           status: "error",
         }));
@@ -141,6 +137,26 @@ export function dehydrate(queryClient, options) {
   };
 }
 
+/** @param {{ queryClient: QueryClient, queryKey: string[] }} props */
+export function SetQueryState({ queryClient, queryKey }) {
+  const queryHash = QueryHash(queryKey);
+  /** @param {(existing: QueryState | undefined) => QueryState | undefined} map */
+  return (map) =>
+    queryClient.state.setQueries((queries) => {
+      const existing = queries.find(
+        (query) => query.queryHash == queryHash,
+      )?.state;
+      const state = map(existing);
+      return state
+        ? existing
+          ? queries.map((query) =>
+              query.state == existing ? { queryHash, state } : query,
+            )
+          : [...queries, { queryHash, state }]
+        : queries;
+    });
+}
+
 const QueryClientContext = createContext(
   /** @type {QueryClient} */ (/** @type {any} */ (undefined)),
 );

package/server-generic.d.ts

@@ -16,7 +16,14 @@ import {
 export type MethodServer = Record<
   string,
   {
-    handler(req: IncomingMessage, res: ServerResponse<IncomingMessage>): void;
+    handler(
+      req: IncomingMessage,
+      res: {
+        end(body?: string): void;
+        setHeader(name: string, value: string): void;
+        set statusCode(code: number): void;
+      },
+    ): void;
     input: ObjectSchema<ObjectEntries, undefined>;
     outputs: Record<
       number,

package/server.d.ts

@@ -1,5 +1,6 @@
 import { IncomingMessage, ServerResponse } from "node:http";
 
+import type { Db } from "./db.d.ts";
 import type {
   MethodServer,
   ServerEndpoint,
@@ -57,10 +58,15 @@ export function route(
   pattern: URLPattern;
 };
 
-export function router(
+export function router<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Schema extends Record<string, ObjectSchema<any, any>>,
+>(
   {
+    db,
     pkg,
   }: {
+    db?: Db<Schema>;
     pkg: { name: string; version: string };
   },
   ...routes: {

package/server.js

@@ -211,8 +211,20 @@ export function listen(app) {
     Number(process.env["PARALLELISM"]) || availableParallelism();
   const port = Number(process.env["PORT"]) || 5173;
   if (cluster.isPrimary && parallelism > 1) {
+    /** @type {{ on(event: "message", callback: (message: any) => void): void, send(message: any, _: any, options: { keepOpen: boolean }): void }[]} */
+    const forks = [];
     for (let i = 0; i < parallelism; i++) {
-      cluster.fork({ i });
+      forks.push(cluster.fork({ i }));
+    }
+    for (const fork of forks) {
+      fork.on("message", (maybeMessage) => {
+        const message = /** @type {any} */ (maybeMessage);
+        for (let i = 0; i < forks.length; i++) {
+          if (i != message.i) {
+            forks[i]?.send(message, undefined, { keepOpen: true });
+          }
+        }
+      });
     }
   } else {
     const server = app.listen(port, () => {
@@ -318,10 +330,11 @@ export function route(path, controller) {
 }
 
 /**
- * @param {{ pkg: { name: string, version: string } }} props
+ * // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ * @param {{ db?: import("./db.js").Db<any>, pkg: { name: string, version: string } }} props
  * @param {ReturnType<typeof route>[]} routes
  */
-export function router({ pkg }, ...routes) {
+export function router({ db, pkg }, ...routes) {
   const openapi = {
     info: { title: pkg.name, version: pkg.version },
     openapi: "3.1.0",
@@ -423,6 +436,46 @@ export function router({ pkg }, ...routes) {
 
   const poPattern = new URLPattern(`http://*:*/po/:lang`);
 
+  /** @type {Map<(req: any, res: any) => void, string[]>} */
+  const TablesInOutput = new Map();
+  for (const { controller } of Object.values(routes)) {
+    for (const [method, { handler, outputs }] of Object.entries(controller)) {
+      if (method == "get") {
+        /** @type {string[]} */
+        let tablesInOutput = [];
+
+        /** @param {import("valibot").ArraySchema<any, any> | import("valibot").ObjectSchema<import("valibot").ObjectEntries, any> | import("valibot").StringSchema<any>} schema */
+        function walk(schema) {
+          if (schema.type == "array") {
+            walk(schema.item);
+          } else if (schema.type == "object") {
+            for (const entry of Object.values(schema.entries)) {
+              walk(/** @type {any} */ (entry));
+            }
+          } else if (db) {
+            for (const [name, table] of Object.entries(
+              /** @type {Record<string, import("valibot").ObjectSchema<import("valibot").ObjectEntries, any>>} */ (
+                db.schema
+              ),
+            )) {
+              for (const column of Object.values(table.entries)) {
+                if (column == schema) {
+                  tablesInOutput.push(name);
+                }
+              }
+            }
+          }
+        }
+        for (const schema of Object.values(outputs)) {
+          walk(schema);
+        }
+        if (tablesInOutput.length) {
+          TablesInOutput.set(handler, [...new Set(tablesInOutput)]);
+        }
+      }
+    }
+  }
+
   /**
    * @param {import("node:http").IncomingMessage} req
    * @param {import("node:http").ServerResponse<import("node:http").IncomingMessage>} res
@@ -458,6 +511,61 @@ export function router({ pkg }, ...routes) {
               }
             }
             req.url = url.pathname + (url.search || "");
+
+            if (method == "get" && req.headers.accept == "text/event-stream") {
+              res.setHeader("x-accel-buffering", "no");
+              res.setHeader("content-type", "text/event-stream");
+              res.setHeader("cache-control", "no-cache");
+              let lastData = "";
+              let lastId = 0;
+              const tablesInOutput = TablesInOutput.get(handler);
+              if (tablesInOutput && db) {
+                req.on(
+                  "close",
+                  db.subscribe(({ table }) => {
+                    if (tablesInOutput.includes(table)) {
+                      /** @type {Record<string, string>} */
+                      const headers = {};
+                      let statusCode = 200;
+                      let id = ++lastId;
+                      handler(req, {
+                        end(body) {
+                          if (id == lastId) {
+                            const data = JSON.stringify({
+                              body,
+                              headers,
+                              statusCode,
+                            });
+                            if (lastData != data) {
+                              lastData = data;
+                              res.write(`data: ${data}\n\n`);
+                              const expressCompressionResponse =
+                                /** @type {any} */ (res);
+                              if (
+                                typeof expressCompressionResponse.flush ==
+                                "function"
+                              ) {
+                                expressCompressionResponse.flush();
+                              }
+                            }
+                          }
+                        },
+                        setHeader(name, value) {
+                          headers[name] = value;
+                        },
+                        set statusCode(/** @type {number} */ value) {
+                          statusCode = value;
+                        },
+                      });
+                    }
+                  }),
+                );
+              } else {
+                res.end("data: null\n\n");
+              }
+              return;
+            }
+
             handler(req, res);
             return;
           }

package/sqlite.js

@@ -277,109 +277,153 @@ export function sqlite({ pkg, schema }) {
     database.exec(sql);
   }
 
-  return /** @type {any} */ (
-    Object.fromEntries(
-      Object.entries(schema).map(([maybeTable]) => {
-        const table = /** @type {keyof typeof schema & string} */ (maybeTable);
-
-        /** @param {{ [K in keyof (typeof schema)[typeof table]["entries"]]?: import("valibot").InferOutput<(typeof schema)[typeof table]["entries"][K]> | import("valibot").InferOutput<(typeof schema)[typeof table]["entries"][K]>[]; }} where */
-        function ensureArrayRecord(where) {
-          for (const key of Object.keys(where)) {
-            if (!Array.isArray(where[key])) {
-              Object.assign(where, { [key]: [where[key]] });
+  /** @type {(({ table }: { table: string }) => void)[]} */
+  const listeners = [];
+  if (process.env["i"]) {
+    process.on("message", (maybeMessage) => {
+      for (const onMessage of listeners) {
+        onMessage(/** @type {any} */ (maybeMessage));
+      }
+    });
+  }
+  /** @param {{ table: string }} message */
+  function publish(message) {
+    Object.assign(message, { i: process.env["i"] });
+    process.send?.(message, undefined, { keepOpen: true });
+    for (const onMessage of listeners) {
+      onMessage(message);
+    }
+  }
+
+  return {
+    .../** @type {any} */ (
+      Object.fromEntries(
+        Object.entries(schema).map(([maybeTable]) => {
+          const table = /** @type {keyof typeof schema & string} */ (
+            maybeTable
+          );
+
+          /** @param {{ [K in keyof (typeof schema)[typeof table]["entries"]]?: import("valibot").InferOutput<(typeof schema)[typeof table]["entries"][K]> | import("valibot").InferOutput<(typeof schema)[typeof table]["entries"][K]>[]; }} where */
+          function ensureArrayRecord(where) {
+            for (const key of Object.keys(where)) {
+              if (!Array.isArray(where[key])) {
+                Object.assign(where, { [key]: [where[key]] });
+              }
             }
           }
-        }
 
-        ok(schema[table]);
-        const columns = Object.entries(schema[table].entries);
-        const primaryKey = columns.find(
-          ([, column]) =>
-            /** @type {{ primary?: true }} */ (getMetadata(column)).primary,
-        );
-        ok(primaryKey);
-        const upsert = database.prepare(
-          `insert into ${table} (${columns.map(([name]) => name).join(", ")}) values\n` +
-            `(${columns.map(() => "?").join(", ")})\n` +
-            `on conflict (${primaryKey[0]}) do update set\n` +
-            columns.map(([name]) => `${name} = ?`).join(",\n"),
-        );
+          ok(schema[table]);
+          const columns = Object.entries(schema[table].entries);
+          const primaryKey = columns.find(
+            ([, column]) =>
+              /** @type {{ primary?: true }} */ (getMetadata(column)).primary,
+          );
+          ok(primaryKey);
+          const upsert = database.prepare(
+            `insert into ${table} (${columns.map(([name]) => name).join(", ")}) values\n` +
+              `(${columns.map(() => "?").join(", ")})\n` +
+              `on conflict (${primaryKey[0]}) do update set\n` +
+              columns.map(([name]) => `${name} = ?`).join(",\n"),
+          );
 
-        return [
-          table,
-          {
-            /** @param {{ [K in keyof (typeof schema)[typeof table]["entries"]]?: import("valibot").InferOutput<(typeof schema)[typeof table]["entries"][K]> | import("valibot").InferOutput<(typeof schema)[typeof table]["entries"][K]>[]; }} where */
-            delete(where) {
-              ensureArrayRecord(where);
-              database
-                .prepare(
-                  `delete from ${table} where true\n` +
-                    Object.entries(where)
-                      .map(
-                        ([name, values]) =>
-                          `and ${name} in (${values.map(() => "?").join(", ")})`,
-                      )
-                      .join("\n"),
-                )
-                .run(
-                  ...Object.values(where)
-                    .flatMap((values) => values)
-                    .map((value) => value ?? null),
-                );
-            },
+          return [
+            table,
+            {
+              /** @param {{ [K in keyof (typeof schema)[typeof table]["entries"]]?: import("valibot").InferOutput<(typeof schema)[typeof table]["entries"][K]> | import("valibot").InferOutput<(typeof schema)[typeof table]["entries"][K]>[]; }} where */
+              delete(where) {
+                ensureArrayRecord(where);
+                if (
+                  database
+                    .prepare(
+                      `delete from ${table} where true\n` +
+                        Object.entries(where)
+                          .map(
+                            ([name, values]) =>
+                              `and ${name} in (${values.map(() => "?").join(", ")})`,
+                          )
+                          .join("\n"),
+                    )
+                    .run(
+                      ...Object.values(where)
+                        .flatMap((values) => values)
+                        .map((value) => value ?? null),
+                    ).changes
+                ) {
+                  publish({ table });
+                }
+              },
 
-            /** @param {any} join */
-            select(join) {
-              if (join?.where) {
-                ensureArrayRecord(join.where);
-              }
-              return select({ database, flat, join, schema, table });
-            },
+              /** @param {any} join */
+              select(join) {
+                if (join?.where) {
+                  ensureArrayRecord(join.where);
+                }
+                return select({ database, flat, join, schema, table });
+              },
 
-            /** @param {{ set: Partial<import("valibot").InferOutput<(typeof schema)[typeof table]>>, where: { [K in keyof (typeof schema)[typeof table]["entries"]]?: import("valibot").InferOutput<(typeof schema)[typeof table]["entries"][K]> | import("valibot").InferOutput<(typeof schema)[typeof table]["entries"][K]>[]; } }} props */
-            update({ set, where }) {
-              ensureArrayRecord(where);
-              database
-                .prepare(
-                  `update ${table} set\n` +
-                    Object.keys(set)
-                      .map((name) => `${name} = ?`)
-                      .join(",\n") +
-                    `\nwhere true\n` +
-                    Object.entries(where)
-                      .map(
-                        ([name, values]) =>
-                          `and ${name} in (${values.map(() => "?").join(", ")})`,
-                      )
-                      .join("\n"),
-                )
-                .run(
-                  ...[
-                    ...Object.values(set).map((value) => value ?? null),
-                    ...Object.values(where)
-                      .flatMap((values) => values)
-                      .map((value) => value ?? null),
-                  ],
-                );
-            },
+              /** @param {{ set: Partial<import("valibot").InferOutput<(typeof schema)[typeof table]>>, where: { [K in keyof (typeof schema)[typeof table]["entries"]]?: import("valibot").InferOutput<(typeof schema)[typeof table]["entries"][K]> | import("valibot").InferOutput<(typeof schema)[typeof table]["entries"][K]>[]; } }} props */
+              update({ set, where }) {
+                ensureArrayRecord(where);
+                if (
+                  database
+                    .prepare(
+                      `update ${table} set\n` +
+                        Object.keys(set)
+                          .map((name) => `${name} = ?`)
+                          .join(",\n") +
+                        `\nwhere true\n` +
+                        Object.entries(where)
+                          .map(
+                            ([name, values]) =>
+                              `and ${name} in (${values.map(() => "?").join(", ")})`,
+                          )
+                          .join("\n"),
+                    )
+                    .run(
+                      ...[
+                        ...Object.values(set).map((value) => value ?? null),
+                        ...Object.values(where)
+                          .flatMap((values) => values)
+                          .map((value) => value ?? null),
+                      ],
+                    ).changes
+                ) {
+                  publish({ table });
+                }
+              },
 
-            /** @param {any[]} values */
-            upsert(...values) {
-              ok(schema[table]);
-              const outputs = [];
-              for (const row of values) {
-                const output = parse(schema[table], row);
-                const values = columns.map(([name]) => output[name] ?? null);
-                upsert.run(...values, ...values);
-                outputs.push(output);
-              }
-              return outputs;
+              /** @param {any[]} values */
+              upsert(...values) {
+                ok(schema[table]);
+                const outputs = [];
+                /** @type {boolean} */
+                let changes = false;
+                for (const row of values) {
+                  const output = parse(schema[table], row);
+                  const values = columns.map(([name]) => output[name] ?? null);
+                  if (upsert.run(...values, ...values).changes) {
+                    changes = true;
+                  }
+                  outputs.push(output);
+                }
+                if (changes) {
+                  publish({ table });
+                }
+                return outputs;
+              },
             },
-          },
-        ];
-      }),
-    )
-  );
+          ];
+        }),
+      )
+    ),
+    schema,
+    subscribe(onMessage) {
+      listeners.push(onMessage);
+      return () => {
+        listeners.splice(listeners.indexOf(onMessage), 1);
+      };
+    },
+  };
 }
 
 /** @type {<Schema extends Record<string, import("valibot").ObjectSchema<any, any>>, R extends import("./db.d.ts").Relations<Schema> = import("./db.d.ts").Relations<Schema>, F extends import("./db.d.ts").Flatten<Schema> = import("./db.d.ts").Flatten<Schema>, Table extends keyof F & keyof Schema = keyof F & keyof Schema >(props: { database: DatabaseSync; flat: F; join?: import("./db.d.ts").Join<R, Table> & { where?: { [K in keyof Schema[Table]["entries"]]?: import("valibot").InferOutput<Schema[Table]["entries"][K]> | import("valibot").InferOutput<Schema[Table]["entries"][K]>[]; } }; schema: Schema; table: Table; }) => any[]} */

package/use-api.js

@@ -1,8 +1,9 @@
 import { useRoute } from "preact-iso";
+import { useEffect, useState } from "preact/hooks";
 import { parse } from "valibot";
 
 import { jsdomCookie } from "./jsdom-cookie.js";
-import { useQuery } from "./query.js";
+import { SetQueryState, useQuery, useQueryClient } from "./query.js";
 
 /** @param {{ lang?: string, origin: string | undefined, path: string, schema?: any }} props */
 export function queryApi({ lang, origin, path, schema }) {
@@ -11,16 +12,12 @@ export function queryApi({ lang, origin, path, schema }) {
 
   return {
     queryFn: async () => {
-      const response = await fetch(
-        (origin || "") +
-          path.replace(/^\//, "/api/").replace(/^\/api\/(\?|$)/, "/api$1"),
-        {
-          headers: {
-            ...(lang ? { "Accept-Language": lang } : {}),
-            Cookie: jsdomCookie.setCookie.join("; "),
-          },
+      const response = await fetch(ApiPath({ origin, path }), {
+        headers: {
+          ...(lang ? { "Accept-Language": lang } : {}),
+          Cookie: jsdomCookie.setCookie.join("; "),
         },
-      );
+      });
       if (response.status >= 400) {
         const error = new Error(await response.text());
         error.name = response.status.toString();
@@ -35,13 +32,74 @@ export function queryApi({ lang, origin, path, schema }) {
 
 /** @param {{ outputs: { 200: any } }} routeType */
 export function useApi(routeType) {
-  const { path, query } = useRoute();
+  const { origin } = location;
+  const { path: pathWithoutSearch, query } = useRoute();
   const search = new URLSearchParams(query).toString();
-  const { queryFn, queryKey } = queryApi({
-    origin: location.origin,
-    path: path + (search ? `?${search}` : ""),
-    schema: routeType.outputs[200],
-  });
+  const path = pathWithoutSearch + (search ? `?${search}` : "");
+  const schema = routeType.outputs[200];
+  const { queryFn, queryKey } = queryApi({ origin, path, schema });
   const { data, error } = useQuery({ queryFn, queryKey });
+  const queryClient = useQueryClient();
+  const setQueryState = SetQueryState({ queryClient, queryKey });
+  const [sourceUpdate, setSourceUpdate] = useState(Date.now());
+  useEffect(() => {
+    if (typeof EventSource == "undefined") {
+      return;
+    }
+    const source = new EventSource(ApiPath({ origin, path: path }));
+    source.onerror = () => {
+      setTimeout(() => {
+        setSourceUpdate(Date.now());
+      }, 1e3);
+    };
+    source.onmessage = ({ data }) => {
+      data = JSON.parse(data);
+      if (!data) {
+        source.close();
+        setQueryState((existing) =>
+          existing ? { ...existing, fromEventSource: false } : undefined,
+        );
+      } else if (Number(data.statusCode) >= 400) {
+        setQueryState((existing) => ({
+          data: existing?.data ?? null,
+          dataUpdatedAt: Date.now(),
+          error,
+          fromEventSource: true,
+          isInvalidated: false,
+          /** @type {"error"} */
+          status: "error",
+        }));
+      } else {
+        setQueryState(() => ({
+          data: schema
+            ? parse(schema, JSON.parse(data.body))
+            : JSON.parse(data.body),
+          dataUpdatedAt: Date.now(),
+          error: null,
+          fromEventSource: true,
+          isInvalidated: false,
+          /** @type {"success"} */
+          status: "success",
+        }));
+      }
+    };
+    setQueryState((existing) =>
+      existing ? { ...existing, fromEventSource: true } : undefined,
+    );
+    return () => {
+      source.close();
+      setQueryState((existing) =>
+        existing ? { ...existing, fromEventSource: false } : undefined,
+      );
+    };
+  }, [path, sourceUpdate]);
   return { data, error };
 }
+
+/** @param {{ origin: string | undefined, path: string }} props */
+function ApiPath({ origin, path }) {
+  return (
+    (origin || "") +
+    path.replace(/^\//, "/api/").replace(/^\/api\/(\?|$)/, "/api$1")
+  );
+}