evikit 2.8.0 → 2.8.1

package/use-api.d.ts

@@ -1,12 +1,13 @@
-import { type InferOutput, type ObjectSchema } from "valibot";
-
-export function queryApi<T, U extends ObjectSchema<T, undefined>>(props: {
-  lang?: string;
-  origin: string | undefined;
-  path: string;
-  schema?: U;
-}): { queryFn: () => Promise<InferOutput<U>>; queryKey: string[] };
-
-export function useApi<T, U extends ObjectSchema<T, undefined>>(routeType: {
-  outputs: { 200: U };
-}): { data?: InferOutput<U>; error?: unknown };
+import { type InferOutput, type ObjectSchema } from "valibot";
+
+export function queryApi<T, U extends ObjectSchema<T, undefined>>(props: {
+  cookie?: string | undefined;
+  lang?: string;
+  origin: string | undefined;
+  path: string;
+  schema?: U;
+}): { queryFn: () => Promise<InferOutput<U>>; queryKey: string[] };
+
+export function useApi<T, U extends ObjectSchema<T, undefined>>(routeType: {
+  outputs: { 200: U };
+}): { data?: InferOutput<U>; error?: unknown };

package/use-api.js

@@ -1,105 +1,119 @@
-import { useRoute } from "preact-iso";
-import { useEffect, useState } from "preact/hooks";
-import { parse } from "valibot";
-
-import { jsdomCookie } from "./jsdom-cookie.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 }) {
-  const queryKey =
-    path == "/" ? ["home"] : path.split("/").slice(1).map(decodeURIComponent);
-
-  return {
-    queryFn: async () => {
-      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();
-        throw Error;
-      }
-      const json = await response.json();
-      return schema ? parse(schema, json) : json;
-    },
-    queryKey,
-  };
-}
-
-/** @param {{ outputs: { 200: any } }} routeType */
-export function useApi(routeType) {
-  const { origin } = location;
-  const { path: pathWithoutSearch, query } = useRoute();
-  const search = new URLSearchParams(query).toString();
-  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")
-  );
-}
+import { useRoute } from "preact-iso";
+import { useEffect, useState } from "preact/hooks";
+import { parse } from "valibot";
+
+import { jsdomCookie } from "./jsdom-cookie.js";
+import { SetQueryState, useQuery, useQueryClient } from "./query.js";
+
+/** @param {{ cookie?: string | undefined, lang?: string, origin: string | undefined, path: string, schema?: any }} props */
+export function queryApi({ cookie, lang, origin, path, schema }) {
+  const queryKey =
+    path == "/" ? ["home"] : path.split("/").slice(1).map(decodeURIComponent);
+
+  return {
+    queryFn: async () => {
+      const response = await fetch(ApiPath({ origin, path }), {
+        headers: {
+          ...(lang ? { "Accept-Language": lang } : {}),
+          Cookie: [...(cookie ? [cookie] : []), ...jsdomCookie.setCookie].join(
+            "; ",
+          ),
+        },
+      });
+      if (response.status >= 400) {
+        const error = new Error(await response.text());
+        error.name = response.status.toString();
+        throw Error;
+      }
+      const json = await response.json();
+      return schema ? parse(schema, json) : json;
+    },
+    queryKey,
+  };
+}
+
+/** @param {{ outputs: { 200: any } }} routeType */
+export function useApi(routeType) {
+  const { origin } = location;
+  const { path: pathWithoutSearch, query } = useRoute();
+  const search = new URLSearchParams(query).toString();
+  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 [sourceUpdatedAt, setSourceUpdatedAt] = useState(Date.now());
+  const [cookieChangedAt, setCookieChangedAt] = useState(Date.now());
+  useEffect(() => {
+    if (typeof cookieStore == "undefined") {
+      return;
+    }
+    function onCookie() {
+      queryClient.invalidateQueries({ evenIfEventSource: true, queryKey });
+      setCookieChangedAt(Date.now());
+    }
+    cookieStore.addEventListener("change", onCookie);
+    return () => cookieStore.removeEventListener("change", onCookie);
+  }, []);
+  useEffect(() => {
+    if (typeof EventSource == "undefined") {
+      return;
+    }
+    const source = new EventSource(ApiPath({ origin, path: path }));
+    source.onerror = () => {
+      setTimeout(() => {
+        setSourceUpdatedAt(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,
+      );
+    };
+  }, [cookieChangedAt, path, sourceUpdatedAt]);
+  return { data, error };
+}
+
+/** @param {{ origin: string | undefined, path: string }} props */
+function ApiPath({ origin, path }) {
+  return (
+    (origin || "") +
+    path.replace(/^\//, "/api/").replace(/^\/api\/(\?|$)/, "/api$1")
+  );
+}