@nivaro/react 0.3.40 → 0.3.42

package/dist/shared/components/ForceReloadBanner.js

@@ -1,51 +1,58 @@
-import { jsxs as c, jsx as d, Fragment as k } from "react/jsx-runtime";
+import { jsxs as l, Fragment as g, jsx as n } from "react/jsx-runtime";
 import { PauseCircle as T, RotateCw as C } from "lucide-react";
-import { useState as p, useRef as b, useEffect as E } from "react";
-import { markReloadFor as R } from "../lib/client-version.js";
-import { shouldObeyForceReload as D, thisTabForReload as M } from "../lib/force-reload.js";
-import { subscribeUnsavedWork as O, prepareForReload as y, beginReloadForUpdate as L, unsavedWorkLabels as S } from "../lib/unsaved-work.js";
+import { useState as p, useRef as b, useEffect as k } from "react";
+import { markReloadFor as E } from "../lib/client-version.js";
+import { shouldObeyForceReload as D, thisTabForReload as I } from "../lib/force-reload.js";
+import { subscribeUnsavedWork as M, prepareForReload as y, beginReloadForUpdate as L, unsavedWorkLabels as O } from "../lib/unsaved-work.js";
+import { IdleReloadWatcher as S } from "./IdleReloadWatcher.js";
 const F = "nvr:force-refresh";
-function B() {
-  const [r, N] = p(null), [j, g] = p(() => Date.now()), [w, l] = p([]), n = b(!1), m = b(!1), v = b(/* @__PURE__ */ new Set());
-  E(() => {
-    const o = (s) => {
-      const e = s.detail ?? {}, t = typeof e.id == "string" && e.id ? e.id : null;
-      if (t && v.current.has(t) || !D(e, M())) return;
-      t && v.current.add(t), m.current = !1, l([]);
-      const h = Math.max(5, Number(e.seconds) || 30), i = Date.now();
-      N({ deadline: i + h * 1e3, message: String(e.message ?? ""), id: t }), g(i);
+function V({ idleReload: r = !0 } = {}) {
+  return /* @__PURE__ */ l(g, { children: [
+    r && /* @__PURE__ */ n(S, {}),
+    /* @__PURE__ */ n(U, {})
+  ] });
+}
+function U() {
+  const [r, N] = p(null), [j, w] = p(() => Date.now()), [v, c] = p([]), a = b(!1), m = b(!1), x = b(/* @__PURE__ */ new Set());
+  k(() => {
+    const s = (i) => {
+      const e = i.detail ?? {}, t = typeof e.id == "string" && e.id ? e.id : null;
+      if (t && x.current.has(t) || !D(e, I())) return;
+      t && x.current.add(t), m.current = !1, c([]);
+      const h = Math.max(5, Number(e.seconds) || 30), d = Date.now();
+      N({ deadline: d + h * 1e3, message: String(e.message ?? ""), id: t }), w(d);
     };
-    return window.addEventListener(F, o), () => window.removeEventListener(F, o);
-  }, []), E(() => {
+    return window.addEventListener(F, s), () => window.removeEventListener(F, s);
+  }, []), k(() => {
     if (!r) return;
-    const o = () => {
-      n.current || (n.current = !0, r.id && R(r.id), window.location.reload(), setTimeout(() => {
-        n.current = !1, m.current = !0, l(["unsaved changes on this page"]);
+    const s = () => {
+      a.current || (a.current = !0, r.id && E(r.id), window.location.reload(), setTimeout(() => {
+        a.current = !1, m.current = !0, c(["unsaved changes on this page"]);
       }, 1500));
     };
-    let s = !1;
+    let i = !1;
     const e = () => {
-      const i = Date.now();
-      if (g(i), !(i < r.deadline || n.current || m.current || s)) {
-        if (S().length === 0) {
-          l((a) => a.length ? [] : a), o();
+      const d = Date.now();
+      if (w(d), !(d < r.deadline || a.current || m.current || i)) {
+        if (O().length === 0) {
+          c((o) => o.length ? [] : o), s();
           return;
         }
-        s = !0, y().then((a) => {
-          l((x) => x.join("|") === a.join("|") ? x : a), a.length === 0 && (L(), o());
+        i = !0, y().then((o) => {
+          c((R) => R.join("|") === o.join("|") ? R : o), o.length === 0 && (L(), s());
         }).finally(() => {
-          s = !1;
+          i = !1;
         });
       }
     }, t = setInterval(e, 1e3);
     document.addEventListener("visibilitychange", e), window.addEventListener("focus", e), window.addEventListener("pageshow", e);
-    const h = O(() => setTimeout(e, 0));
+    const h = M(() => setTimeout(e, 0));
     return () => {
       clearInterval(t), document.removeEventListener("visibilitychange", e), window.removeEventListener("focus", e), window.removeEventListener("pageshow", e), h();
     };
   }, [r]);
-  const u = r ? Math.max(0, Math.ceil((r.deadline - j) / 1e3)) : 0, f = u === 0 && w.length > 0;
-  return r ? /* @__PURE__ */ c(
+  const u = r ? Math.max(0, Math.ceil((r.deadline - j) / 1e3)) : 0, f = u === 0 && v.length > 0;
+  return r ? /* @__PURE__ */ l(
     "div",
     {
       role: "alert",
@@ -54,27 +61,27 @@ function B() {
       "data-nvr-recording-hide": !0,
       className: "fixed inset-x-0 top-0 z-[150] flex items-center justify-center gap-3 border-b border-amber-300 bg-amber-50 px-4 py-2.5 text-[13px] text-amber-900 dark:border-amber-500/40 dark:bg-[#3a2e10] dark:text-amber-200",
       children: [
-        f ? /* @__PURE__ */ d(T, { className: "h-4 w-4 shrink-0" }) : /* @__PURE__ */ d(C, { className: "h-4 w-4 shrink-0 animate-spin" }),
-        /* @__PURE__ */ d("span", { children: f ? /* @__PURE__ */ c(k, { children: [
-          /* @__PURE__ */ d("span", { className: "font-semibold", children: "A reload is waiting" }),
+        f ? /* @__PURE__ */ n(T, { className: "h-4 w-4 shrink-0" }) : /* @__PURE__ */ n(C, { className: "h-4 w-4 shrink-0 animate-spin" }),
+        /* @__PURE__ */ n("span", { children: f ? /* @__PURE__ */ l(g, { children: [
+          /* @__PURE__ */ n("span", { className: "font-semibold", children: "A reload is waiting" }),
           " — save or discard your changes (",
-          w.join(", ").toLowerCase(),
+          v.join(", ").toLowerCase(),
           ") and the page reloads."
-        ] }) : /* @__PURE__ */ c(k, { children: [
-          /* @__PURE__ */ c("span", { className: "font-semibold", children: [
+        ] }) : /* @__PURE__ */ l(g, { children: [
+          /* @__PURE__ */ l("span", { className: "font-semibold", children: [
             "This page will reload in ",
             u,
             "s"
           ] }),
           r.message ? ` — ${r.message}` : " — an administrator pushed an update."
         ] }) }),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ n(
           "button",
           {
             type: "button",
             onClick: async () => {
-              n.current = !0, r.id && R(r.id), (await y()).length === 0 && L(), window.location.reload(), setTimeout(() => {
-                n.current = !1;
+              a.current = !0, r.id && E(r.id), (await y()).length === 0 && L(), window.location.reload(), setTimeout(() => {
+                a.current = !1;
               }, 1500);
             },
             className: "shrink-0 rounded-md border border-amber-400 bg-white px-2.5 py-1 text-[12px] font-medium text-amber-800 hover:bg-amber-100 dark:bg-transparent dark:text-amber-200",
@@ -87,5 +94,5 @@ function B() {
 }
 export {
   F as FORCE_RELOAD_EVENT,
-  B as ForceReloadBanner
+  V as ForceReloadBanner
 };

package/dist/shared/components/IdleReloadWatcher.js

@@ -0,0 +1,69 @@
+import { useEffect as f } from "react";
+import { useOptionalNivaroClient as w } from "../context.js";
+import { markReloadFor as b, reloadCountFor as h, clientVersion as g } from "../lib/client-version.js";
+import { get as I } from "../lib/commands.js";
+import { trackIdleReloadInput as k, restoreScrollAfterReload as R, decideIdleReload as L, saveScrollForReload as y, lastIdleReloadInput as E } from "../lib/idle-reload.js";
+import { reloadHoldLabels as S } from "../lib/reload-holds.js";
+import { subscribeUnsavedWork as _, unsavedWorkLabels as F } from "../lib/unsaved-work.js";
+const C = 1e4;
+function x() {
+  const r = w();
+  return f(() => (k(), R()), []), f(() => {
+    if (typeof window > "u") return;
+    let a = null, s = 0, n = !1, d = !1, i = !1, u = !0;
+    const m = async () => {
+      const e = g(), o = { tab: e.tab, loaded: String(e.loaded) };
+      e.build && (o.build = e.build), e.api && (o.api = e.api);
+      let l = null;
+      try {
+        if (r)
+          l = (await r.request(I("/realtime/build-status", o))).data;
+        else {
+          const c = await fetch(`/api/realtime/build-status?${new URLSearchParams(o)}`, {
+            credentials: "same-origin",
+            headers: { accept: "application/json" }
+          });
+          c.ok && (l = (await c.json()).data);
+        }
+      } catch {
+        l = null;
+      }
+      a = l ?? {
+        older: null,
+        target: null,
+        id: null,
+        reason: "unanswered",
+        auto_reload: { enabled: !0, idle_seconds: (a == null ? void 0 : a.auto_reload.idle_seconds) ?? 60 }
+      }, s = Date.now();
+    }, t = () => {
+      if (!u || n || i) return;
+      const e = L({
+        now: Date.now(),
+        lastInput: E(),
+        unsaved: F(),
+        holds: S(),
+        status: a,
+        statusAt: s,
+        reloadedFor: h,
+        declined: d
+      });
+      if (e.action === "check") {
+        n = !0, m().finally(() => {
+          n = !1, t();
+        });
+        return;
+      }
+      e.action === "reload" && (i = !0, b(e.id), y(), window.location.reload(), setTimeout(() => {
+        i = !1, d = !0;
+      }, 1500));
+    }, p = setInterval(t, C);
+    document.addEventListener("visibilitychange", t), window.addEventListener("pageshow", t);
+    const v = _(() => setTimeout(t, 0));
+    return () => {
+      u = !1, clearInterval(p), document.removeEventListener("visibilitychange", t), window.removeEventListener("pageshow", t), v();
+    };
+  }, [r]), null;
+}
+export {
+  x as IdleReloadWatcher
+};