@cedarjs/web 8.0.0-canary.3331 → 8.0.0-canary.3335

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";
@@ -31,6 +32,7 @@ export {
   useFetchConfig,
   useFragment,
   useMutation,
+  useNewVersionAvailable,
   useQuery,
   useSubscription
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cedarjs/web",
-  "version": "8.0.0-canary.3331",
+  "version": "8.0.0-canary.3335",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cedarjs/cedar.git",
@@ -79,7 +79,7 @@
   },
   "dependencies": {
     "@apollo/client": "4.3.1",
-    "@cedarjs/server-store": "8.0.0-canary.3331",
+    "@cedarjs/server-store": "8.0.0-canary.3335",
     "@dr.pogodin/react-helmet": "2.0.4",
     "@whatwg-node/fetch": "0.12.1",
     "apollo-upload-client": "19.0.0",
@@ -95,9 +95,9 @@
   "devDependencies": {
     "@apollo/client-react-streaming": "0.14.5",
     "@arethetypeswrong/cli": "0.18.5",
-    "@cedarjs/auth": "8.0.0-canary.3331",
-    "@cedarjs/framework-tools": "8.0.0-canary.3331",
-    "@cedarjs/internal": "8.0.0-canary.3331",
+    "@cedarjs/auth": "8.0.0-canary.3335",
+    "@cedarjs/framework-tools": "8.0.0-canary.3335",
+    "@cedarjs/internal": "8.0.0-canary.3335",
     "@testing-library/dom": "10.4.2",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.3",
@@ -106,7 +106,7 @@
     "@types/react-dom": "^19.2.0",
     "concurrently": "9.2.4",
     "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": "8.0.0-canary.3331",
+    "@cedarjs/auth": "8.0.0-canary.3335",
     "react": "19.3.0",
     "react-dom": "19.3.0"
   },