@cedarjs/web 7.0.1-next.333 → 7.0.1-next.466

package/dist/bundled/apollo-upload-client.js

@@ -1487,7 +1487,7 @@ var global_default = (
 );
 
 // ../../node_modules/@apollo/client/version.js
-var version = "4.3.1";
+var version = "4.3.3";
 
 // ../../node_modules/@apollo/client/utilities/internal/makeUniqueId.js
 var prefixCounts = /* @__PURE__ */ new Map();

package/dist/components/useNewVersionAvailable.d.ts

@@ -0,0 +1,49 @@
+export interface UseNewVersionAvailableOptions {
+    /**
+     * How often to check for a new version, in milliseconds.
+     *
+     * @default 60000
+     */
+    intervalMs?: number;
+}
+/**
+ * Detects that the server is serving a newer build of the app than the one
+ * running in the current tab, so you can ask the user to reload.
+ *
+ * The running build is identified by the `<script type="module" src="...">`
+ * elements in the current document, which Vite gives content-hashed file
+ * names. The hook periodically fetches the URL the tab was loaded from (and
+ * also checks when the tab becomes visible again or the browser comes back
+ * online) and compares the module scripts in the response with the running
+ * ones. The request is sent without cookies, so hosts with skew protection
+ * (like Netlify) answer with the latest deploy. Once a new version is
+ * detected the hook returns `true` and stops checking.
+ *
+ * The hook always returns `false` during server rendering, in development
+ * and when the current document has no module scripts.
+ *
+ * Components using the hook with the same options share a single polling
+ * loop.
+ *
+ * @example
+ * ```jsx
+ * import { useNewVersionAvailable } from '@cedarjs/web'
+ *
+ * const NewVersionBanner = () => {
+ *   const newVersionAvailable = useNewVersionAvailable()
+ *
+ *   if (!newVersionAvailable) {
+ *     return null
+ *   }
+ *
+ *   return (
+ *     <div role="status">
+ *       A new version of the app is available.
+ *       <button onClick={() => window.location.reload()}>Reload</button>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export declare function useNewVersionAvailable(options?: UseNewVersionAvailableOptions): boolean;
+//# sourceMappingURL=useNewVersionAvailable.d.ts.map

package/dist/components/useNewVersionAvailable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNewVersionAvailable.d.ts","sourceRoot":"","sources":["../../src/components/useNewVersionAvailable.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,6BAA6B;IAC5C;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAwPD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,GAAE,6BAAkC,GAC1C,OAAO,CAST"}

package/dist/components/useNewVersionAvailable.js

@@ -0,0 +1,169 @@
+import { useSyncExternalStore } from "react";
+const DEFAULT_INTERVAL_MS = 6e4;
+const CHECK_TIMEOUT_MS = 3e4;
+const initialDocumentUrl = typeof document === "undefined" ? void 0 : document.URL;
+let runningModuleScripts;
+const checkers = /* @__PURE__ */ new Map();
+function getModuleScriptPathnames(doc, baseUrl) {
+  const pathnames = /* @__PURE__ */ new Set();
+  doc.querySelectorAll('script[type="module"][src]').forEach((script) => {
+    const src = script.getAttribute("src");
+    if (!src) {
+      return;
+    }
+    try {
+      pathnames.add(new URL(src, baseUrl).pathname);
+    } catch {
+    }
+  });
+  return pathnames;
+}
+function setsAreEqual(a, b) {
+  if (a.size !== b.size) {
+    return false;
+  }
+  for (const value of a) {
+    if (!b.has(value)) {
+      return false;
+    }
+  }
+  return true;
+}
+function createVersionChecker(url, intervalMs, runningScripts, lifecycle) {
+  const listeners = /* @__PURE__ */ new Set();
+  let newVersionAvailable = false;
+  let checkInFlight = false;
+  let intervalId;
+  const notify = () => {
+    listeners.forEach((listener) => listener());
+  };
+  const check = async () => {
+    if (newVersionAvailable || checkInFlight) {
+      return;
+    }
+    checkInFlight = true;
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), CHECK_TIMEOUT_MS);
+    try {
+      const requestUrl = new URL(url);
+      requestUrl.hash = "";
+      const response = await fetch(requestUrl.href, {
+        cache: "no-store",
+        credentials: "omit",
+        signal: controller.signal
+      });
+      if (response.redirected) {
+        return;
+      }
+      const html = await response.text();
+      const fetchedDocument = new DOMParser().parseFromString(html, "text/html");
+      const fetchedScripts = getModuleScriptPathnames(
+        fetchedDocument,
+        response.url || requestUrl.href
+      );
+      if (fetchedScripts.size === 0) {
+        return;
+      }
+      if (!setsAreEqual(runningScripts, fetchedScripts)) {
+        newVersionAvailable = true;
+        stop();
+        notify();
+      }
+    } catch {
+    } finally {
+      clearTimeout(timeoutId);
+      checkInFlight = false;
+    }
+  };
+  const onVisibilityChange = () => {
+    if (document.visibilityState === "visible") {
+      void check();
+    }
+  };
+  const onOnline = () => {
+    void check();
+  };
+  function start() {
+    intervalId = setInterval(() => void check(), intervalMs);
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    window.addEventListener("online", onOnline);
+  }
+  function stop() {
+    if (intervalId !== void 0) {
+      clearInterval(intervalId);
+      intervalId = void 0;
+    }
+    document.removeEventListener("visibilitychange", onVisibilityChange);
+    window.removeEventListener("online", onOnline);
+  }
+  return {
+    subscribe: (listener) => {
+      listeners.add(listener);
+      if (listeners.size === 1) {
+        lifecycle.onActive();
+        if (!newVersionAvailable) {
+          start();
+        }
+      }
+      return () => {
+        listeners.delete(listener);
+        if (listeners.size === 0) {
+          stop();
+          lifecycle.onIdle();
+        }
+      };
+    },
+    getSnapshot: () => newVersionAvailable
+  };
+}
+function getVersionChecker(intervalMs) {
+  if (typeof window === "undefined" || !initialDocumentUrl) {
+    return void 0;
+  }
+  if (process.env.NODE_ENV === "development") {
+    return void 0;
+  }
+  runningModuleScripts ??= getModuleScriptPathnames(document, document.baseURI);
+  if (runningModuleScripts.size === 0) {
+    return void 0;
+  }
+  const existingChecker = checkers.get(intervalMs);
+  if (existingChecker) {
+    return existingChecker;
+  }
+  const checker = createVersionChecker(
+    initialDocumentUrl,
+    intervalMs,
+    runningModuleScripts,
+    {
+      onActive: () => {
+        checkers.set(intervalMs, checker);
+      },
+      // A checker that found a new version is kept, so components mounting
+      // later see `true` right away. Idle checkers are dropped, so intervals
+      // that are no longer used don't accumulate
+      onIdle: () => {
+        if (!checker.getSnapshot()) {
+          checkers.delete(intervalMs);
+        }
+      }
+    }
+  );
+  checkers.set(intervalMs, checker);
+  return checker;
+}
+const subscribeNoop = () => () => {
+};
+const getFalse = () => false;
+function useNewVersionAvailable(options = {}) {
+  const intervalMs = options.intervalMs ?? DEFAULT_INTERVAL_MS;
+  const checker = getVersionChecker(intervalMs);
+  return useSyncExternalStore(
+    checker?.subscribe ?? subscribeNoop,
+    checker?.getSnapshot ?? getFalse,
+    getFalse
+  );
+}
+export {
+  useNewVersionAvailable
+};

package/dist/index.d.ts

@@ -3,6 +3,8 @@ import './apollo/typeOverrides.js';
 import './config.js';
 export { FatalErrorBoundary } from './components/FatalErrorBoundary.js';
 export { FetchConfigProvider, useFetchConfig, } from './components/FetchConfigProvider.js';
+export { useNewVersionAvailable } from './components/useNewVersionAvailable.js';
+export type { UseNewVersionAvailableOptions } from './components/useNewVersionAvailable.js';
 export { useQuery, useMutation, useSubscription } from '@apollo/client/react';
 export { useFragment } from './apollo/fragmentRegistry.js';
 export type { FragmentHookOptions, FragmentHookResult, } from './apollo/fragmentRegistry.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AACrC,OAAO,2BAA2B,CAAA;AAClC,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAA;AAEvE,OAAO,EACL,mBAAmB,EACnB,cAAc,GACf,MAAM,qCAAqC,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,YAAY,EACV,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,8BAA8B,CAAA;AAErC,cAAc,uCAAuC,CAAA;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,YAAY,EACV,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,sBAAsB,EACtB,qBAAqB,EACrB,UAAU,GACX,MAAM,gCAAgC,CAAA;AAEvC,cAAc,cAAc,CAAA;AAE5B,cAAc,+BAA+B,CAAA;AAE7C,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,EAAE,CAAA;AAEjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AAErC,cAAc,8BAA8B,CAAA;AAE5C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AACrC,OAAO,2BAA2B,CAAA;AAClC,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAA;AAEvE,OAAO,EACL,mBAAmB,EACnB,cAAc,GACf,MAAM,qCAAqC,CAAA;AAC5C,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAA;AAC/E,YAAY,EAAE,6BAA6B,EAAE,MAAM,wCAAwC,CAAA;AAC3F,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,YAAY,EACV,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,8BAA8B,CAAA;AAErC,cAAc,uCAAuC,CAAA;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,YAAY,EACV,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,sBAAsB,EACtB,qBAAqB,EACrB,UAAU,GACX,MAAM,gCAAgC,CAAA;AAEvC,cAAc,cAAc,CAAA;AAE5B,cAAc,+BAA+B,CAAA;AAE7C,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,EAAE,CAAA;AAEjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AAErC,cAAc,8BAA8B,CAAA;AAE5C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/index.js

@@ -6,6 +6,7 @@ import {
   FetchConfigProvider,
   useFetchConfig
 } from "./components/FetchConfigProvider.js";
+import { useNewVersionAvailable } from "./components/useNewVersionAvailable.js";
 import { useQuery, useMutation, useSubscription } from "@apollo/client/react";
 import { useFragment } from "./apollo/fragmentRegistry.js";
 export * from "./components/cell/CellCacheContext.js";
@@ -19,6 +20,8 @@ import { Helmet } from "@dr.pogodin/react-helmet";
 export * from "./components/htmlTags.js";
 export * from "./routeHooks.types.js";
 export * from "./components/ServerInject.js";
+import { registerPreloadErrorReload } from "./reloadOnPreloadError.js";
+registerPreloadErrorReload();
 export {
   FatalErrorBoundary,
   FetchConfigProvider,
@@ -29,6 +32,7 @@ export {
   useFetchConfig,
   useFragment,
   useMutation,
+  useNewVersionAvailable,
   useQuery,
   useSubscription
 };

package/dist/reloadOnPreloadError.d.ts

@@ -0,0 +1,37 @@
+/**
+ * `sessionStorage` key that marks the next page load as one triggered by the
+ * `vite:preloadError` handler
+ */
+export declare const PRELOAD_ERROR_RELOAD_KEY = "cedar:preload-error-reload";
+/**
+ * On a page that the handler itself reloaded, a preload error within this many
+ * milliseconds of the page starting to load is left for the app to handle. A
+ * chunk that is missing even on the latest deploy then surfaces as an error
+ * instead of causing a reload loop, no matter how long each attempt takes to
+ * fail. After this long, the page is treated like any other, so a later deploy
+ * can reload it again.
+ */
+export declare const RELOADED_PAGE_GRACE_MS = 60000;
+/**
+ * Handles Vite's `vite:preloadError` event, which fires when a dynamically
+ * imported chunk fails to load. After a new deploy, a tab running the
+ * previous build requests hashed chunks that no longer exist on the server.
+ * Reloading the page fetches the latest build so the navigation can succeed.
+ *
+ * The handler does nothing if the event was already handled
+ * (`defaultPrevented`), if this page is the result of the handler's own
+ * reload and started loading less than `RELOADED_PAGE_GRACE_MS` ago, or if
+ * `sessionStorage` is unavailable (without it, a reload loop can't be ruled
+ * out). In those cases Vite rethrows the error and it surfaces through the
+ * app's normal error handling.
+ *
+ * See https://vite.dev/guide/build#load-error-handling
+ */
+export declare function handlePreloadError(event: Event): void;
+/**
+ * Registers `handlePreloadError` as a `vite:preloadError` listener on
+ * `window`. Runs at most once per page load, and does nothing outside the
+ * browser.
+ */
+export declare function registerPreloadErrorReload(): void;
+//# sourceMappingURL=reloadOnPreloadError.d.ts.map

package/dist/reloadOnPreloadError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reloadOnPreloadError.d.ts","sourceRoot":"","sources":["../src/reloadOnPreloadError.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,wBAAwB,+BAA+B,CAAA;AAEpE;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,QAAS,CAAA;AA2B5C;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,QAkB9C;AAED;;;;GAIG;AACH,wBAAgB,0BAA0B,SAYzC"}

package/dist/reloadOnPreloadError.js

@@ -0,0 +1,49 @@
+const PRELOAD_ERROR_RELOAD_KEY = "cedar:preload-error-reload";
+const RELOADED_PAGE_GRACE_MS = 6e4;
+let pageWasReloadedForPreloadError = false;
+function consumeReloadMarker() {
+  try {
+    pageWasReloadedForPreloadError = window.sessionStorage.getItem(PRELOAD_ERROR_RELOAD_KEY) !== null;
+    window.sessionStorage.removeItem(PRELOAD_ERROR_RELOAD_KEY);
+  } catch {
+    pageWasReloadedForPreloadError = false;
+  }
+}
+function setReloadMarker() {
+  try {
+    window.sessionStorage.setItem(PRELOAD_ERROR_RELOAD_KEY, "1");
+    return true;
+  } catch {
+    return false;
+  }
+}
+function handlePreloadError(event) {
+  if (event.defaultPrevented) {
+    return;
+  }
+  if (pageWasReloadedForPreloadError && performance.now() < RELOADED_PAGE_GRACE_MS) {
+    return;
+  }
+  if (!setReloadMarker()) {
+    return;
+  }
+  event.preventDefault();
+  window.location.reload();
+}
+function registerPreloadErrorReload() {
+  if (typeof window === "undefined") {
+    return;
+  }
+  if (globalThis.__CEDAR__PRELOAD_ERROR_RELOAD_REGISTERED) {
+    return;
+  }
+  globalThis.__CEDAR__PRELOAD_ERROR_RELOAD_REGISTERED = true;
+  consumeReloadMarker();
+  window.addEventListener("vite:preloadError", handlePreloadError);
+}
+export {
+  PRELOAD_ERROR_RELOAD_KEY,
+  RELOADED_PAGE_GRACE_MS,
+  handlePreloadError,
+  registerPreloadErrorReload
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cedarjs/web",
-  "version": "7.0.1-next.333",
+  "version": "7.0.1-next.466",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cedarjs/cedar.git",
@@ -78,14 +78,14 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@apollo/client": "4.3.1",
-    "@cedarjs/server-store": "7.0.1-next.333",
+    "@apollo/client": "4.3.3",
+    "@cedarjs/server-store": "7.0.1-next.466",
     "@dr.pogodin/react-helmet": "2.0.4",
-    "@whatwg-node/fetch": "0.12.0",
+    "@whatwg-node/fetch": "0.12.1",
     "apollo-upload-client": "19.0.0",
     "cookie": "1.1.1",
     "graphql": "16.14.2",
-    "graphql-sse": "2.6.1",
+    "graphql-sse": "2.6.2",
     "graphql-tag": "2.12.7",
     "react-hot-toast": "2.6.1",
     "rxjs": "7.8.2",
@@ -95,18 +95,18 @@
   "devDependencies": {
     "@apollo/client-react-streaming": "0.14.5",
     "@arethetypeswrong/cli": "0.18.5",
-    "@cedarjs/auth": "7.0.1-next.333",
-    "@cedarjs/framework-tools": "7.0.1-next.333",
-    "@cedarjs/internal": "7.0.1-next.333",
+    "@cedarjs/auth": "7.0.1-next.466",
+    "@cedarjs/framework-tools": "7.0.1-next.466",
+    "@cedarjs/internal": "7.0.1-next.466",
     "@testing-library/dom": "10.4.2",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.3",
     "@types/apollo-upload-client": "^19",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
-    "concurrently": "9.2.4",
+    "concurrently": "9.2.5",
     "nodemon": "3.1.14",
-    "publint": "0.3.24",
+    "publint": "0.3.25",
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "tstyche": "5.0.2",
@@ -114,7 +114,7 @@
     "vitest": "4.1.11"
   },
   "peerDependencies": {
-    "@cedarjs/auth": "7.0.1-next.333",
+    "@cedarjs/auth": "7.0.1-next.466",
     "react": "19.3.0",
     "react-dom": "19.3.0"
   },