@1money/hooks 0.1.2 → 0.1.3

package/es/useLatest/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * A hook that returns a ref object whose `.current` property is always
  * updated to the latest value. Useful for accessing the latest value

package/es/useQueryState/index.d.ts

@@ -42,13 +42,24 @@ export declare const queryJson: Parser<unknown>;
  * parameter, so it survives refreshes and is
  * shareable via the link.
  *
- * Reads/writes go through native
- * `history.pushState/replaceState`, which keeps it
- * compatible with the Next.js App Router (it does
- * not trigger a route re-mount). Because the value
- * is reactive, using it as a SWR/React Query key
+ * Reading is reactive via Next's `useSearchParams`;
+ * writing goes through the native
+ * `history.pushState/replaceState`, which the Next.js
+ * App Router intercepts and syncs back into
+ * `useSearchParams` *without* a server round-trip (no
+ * route re-render, no scroll-to-top). Because the
+ * value is reactive, using it as a SWR/React Query key
  * makes dependent requests refetch automatically.
  *
+ * Constraints (inherited from `useSearchParams`):
+ * - Next.js App Router only; the calling component
+ *   must be a Client Component (`'use client'`).
+ * - On statically rendered routes, wrap the consumer
+ *   in `<Suspense>`; otherwise that subtree opts into
+ *   client-side rendering. During prerender the param
+ *   reads as absent, so `value` falls back to
+ *   `defaultValue ?? null`.
+ *
  * @param key The query parameter name
  * @param options Parsing, serialization and history
  *   behaviour

package/es/useQueryState/index.js

@@ -1,10 +1,6 @@
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useState, useEffect } from 'react';
+'use client';
+
+import { useSearchParams } from 'next/navigation';
 import useMemoizedFn from "../useMemoizedFn";
 
 /** Turn a raw query string into a typed value. */
@@ -32,30 +28,29 @@ export var queryJson = function queryJson(value) {
 };
 var isBrowser = typeof window !== 'undefined';
 
-/**
- * Subscribers re-read the URL when any instance
- * mutates it. `history.pushState/replaceState` do
- * not emit `popstate`, so we notify manually.
- */
-var listeners = new Set();
-var emit = function emit() {
-  listeners.forEach(function (fn) {
-    return fn();
-  });
-};
-
 /**
  * Sync a piece of React state with a URL query
  * parameter, so it survives refreshes and is
  * shareable via the link.
  *
- * Reads/writes go through native
- * `history.pushState/replaceState`, which keeps it
- * compatible with the Next.js App Router (it does
- * not trigger a route re-mount). Because the value
- * is reactive, using it as a SWR/React Query key
+ * Reading is reactive via Next's `useSearchParams`;
+ * writing goes through the native
+ * `history.pushState/replaceState`, which the Next.js
+ * App Router intercepts and syncs back into
+ * `useSearchParams` *without* a server round-trip (no
+ * route re-render, no scroll-to-top). Because the
+ * value is reactive, using it as a SWR/React Query key
  * makes dependent requests refetch automatically.
  *
+ * Constraints (inherited from `useSearchParams`):
+ * - Next.js App Router only; the calling component
+ *   must be a Client Component (`'use client'`).
+ * - On statically rendered routes, wrap the consumer
+ *   in `<Suspense>`; otherwise that subtree opts into
+ *   client-side rendering. During prerender the param
+ *   reads as absent, so `value` falls back to
+ *   `defaultValue ?? null`.
+ *
  * @param key The query parameter name
  * @param options Parsing, serialization and history
  *   behaviour
@@ -77,43 +72,26 @@ function useQueryState(key) {
     defaultValue = options.defaultValue,
     _options$history = options.history,
     history = _options$history === void 0 ? 'replace' : _options$history;
-  var read = useMemoizedFn(function () {
-    if (!isBrowser) {
-      return defaultValue !== null && defaultValue !== void 0 ? defaultValue : null;
-    }
-    var params = new URLSearchParams(window.location.search);
-    var raw = params.get(key);
+  var parse = function parse(raw) {
     if (raw === null) {
       return defaultValue !== null && defaultValue !== void 0 ? defaultValue : null;
     }
     return parser ? parser(raw) : raw;
-  });
-  var _useState = useState(read),
-    _useState2 = _slicedToArray(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
-  useEffect(function () {
-    var handler = function handler() {
-      return setValue(read());
-    };
-    listeners.add(handler);
-    window.addEventListener('popstate', handler);
-    // Resync in case the URL changed between the
-    // initial render and this effect running.
-    handler();
-    return function () {
-      listeners.delete(handler);
-      window.removeEventListener('popstate', handler);
-    };
-    // `read` is stable via useMemoizedFn.
-  }, [key, read]);
+  };
+
+  // Reactive read. Next re-renders consumers when the
+  // URL changes (including our own history writes).
+  var searchParams = useSearchParams();
+  var value = parse(searchParams.get(key));
   var set = useMemoizedFn(function (next) {
     if (!isBrowser) {
       return;
     }
-    var prev = read();
-    var resolved = typeof next === 'function' ? next(prev) : next;
+    // Build from the live URL (not the captured
+    // `searchParams`) so consecutive writes in one
+    // tick see each other's result.
     var params = new URLSearchParams(window.location.search);
+    var resolved = typeof next === 'function' ? next(parse(params.get(key))) : next;
     if (resolved === null || resolved === undefined) {
       params.delete(key);
     } else {
@@ -126,7 +104,6 @@ function useQueryState(key) {
     } else {
       window.history.replaceState(null, '', url);
     }
-    emit();
   });
   return [value, set];
 }

package/lib/useLatest/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * A hook that returns a ref object whose `.current` property is always
  * updated to the latest value. Useful for accessing the latest value

package/lib/useQueryState/index.d.ts

@@ -42,13 +42,24 @@ export declare const queryJson: Parser<unknown>;
  * parameter, so it survives refreshes and is
  * shareable via the link.
  *
- * Reads/writes go through native
- * `history.pushState/replaceState`, which keeps it
- * compatible with the Next.js App Router (it does
- * not trigger a route re-mount). Because the value
- * is reactive, using it as a SWR/React Query key
+ * Reading is reactive via Next's `useSearchParams`;
+ * writing goes through the native
+ * `history.pushState/replaceState`, which the Next.js
+ * App Router intercepts and syncs back into
+ * `useSearchParams` *without* a server round-trip (no
+ * route re-render, no scroll-to-top). Because the
+ * value is reactive, using it as a SWR/React Query key
  * makes dependent requests refetch automatically.
  *
+ * Constraints (inherited from `useSearchParams`):
+ * - Next.js App Router only; the calling component
+ *   must be a Client Component (`'use client'`).
+ * - On statically rendered routes, wrap the consumer
+ *   in `<Suspense>`; otherwise that subtree opts into
+ *   client-side rendering. During prerender the param
+ *   reads as absent, so `value` falls back to
+ *   `defaultValue ?? null`.
+ *
  * @param key The query parameter name
  * @param options Parsing, serialization and history
  *   behaviour

package/lib/useQueryState/index.js

@@ -1,3 +1,4 @@
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -36,17 +37,13 @@ __export(index_exports, {
   queryString: () => queryString
 });
 module.exports = __toCommonJS(index_exports);
-var import_react = require("react");
+var import_navigation = require("next/navigation");
 var import_useMemoizedFn = __toESM(require("../useMemoizedFn"));
 var queryString = (value) => value;
 var queryNumber = (value) => Number(value);
 var queryBoolean = (value) => value === "true";
 var queryJson = (value) => JSON.parse(value);
 var isBrowser = typeof window !== "undefined";
-var listeners = /* @__PURE__ */ new Set();
-var emit = () => {
-  listeners.forEach((fn) => fn());
-};
 function useQueryState(key, options = {}) {
   const {
     parser,
@@ -54,42 +51,24 @@ function useQueryState(key, options = {}) {
     defaultValue,
     history = "replace"
   } = options;
-  const read = (0, import_useMemoizedFn.default)(() => {
-    if (!isBrowser) {
-      return defaultValue ?? null;
-    }
-    const params = new URLSearchParams(
-      window.location.search
-    );
-    const raw = params.get(key);
+  const parse = (raw) => {
     if (raw === null) {
       return defaultValue ?? null;
     }
     return parser ? parser(raw) : raw;
-  });
-  const [value, setValue] = (0, import_react.useState)(read);
-  (0, import_react.useEffect)(() => {
-    const handler = () => setValue(read());
-    listeners.add(handler);
-    window.addEventListener("popstate", handler);
-    handler();
-    return () => {
-      listeners.delete(handler);
-      window.removeEventListener(
-        "popstate",
-        handler
-      );
-    };
-  }, [key, read]);
+  };
+  const searchParams = (0, import_navigation.useSearchParams)();
+  const value = parse(searchParams.get(key));
   const set = (0, import_useMemoizedFn.default)((next) => {
     if (!isBrowser) {
       return;
     }
-    const prev = read();
-    const resolved = typeof next === "function" ? next(prev) : next;
     const params = new URLSearchParams(
       window.location.search
     );
+    const resolved = typeof next === "function" ? next(
+      parse(params.get(key))
+    ) : next;
     if (resolved === null || resolved === void 0) {
       params.delete(key);
     } else {
@@ -102,7 +81,6 @@ function useQueryState(key, options = {}) {
     } else {
       window.history.replaceState(null, "", url);
     }
-    emit();
   });
   return [value, set];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1money/hooks",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "React hooks for 1money front-end projects",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -90,8 +90,14 @@
     "url": "https://github.com/1Money-Co/1money-hooks"
   },
   "peerDependencies": {
+    "next": ">=14.0.0",
     "react": ">=16.8.0"
   },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
   "license": "MIT",
   "devDependencies": {
     "@eslint/js": "^9.39.4",
@@ -108,6 +114,7 @@
     "father": "^4.6.17",
     "globals": "^15.15.0",
     "jsdom": "^29.0.2",
+    "next": "^14.2.0",
     "prettier": "~3.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.2.4",