@1money/hooks 0.1.1 → 0.1.2

package/es/index.d.ts

@@ -9,3 +9,5 @@ export { default as useSyncState } from './useSyncState';
 export { default as useUpdateEffect } from './useUpdateEffect';
 export { default as useLayoutState, useTimeoutLock } from './useLayoutState';
 export type { Updater } from './useLayoutState';
+export { default as useQueryState, queryString, queryNumber, queryBoolean, queryJson, } from './useQueryState';
+export type { Parser, Serializer, QueryStateOptions, } from './useQueryState';

package/es/index.js

@@ -8,4 +8,5 @@ export { default as usePrevious } from "./usePrevious";
 export { default as useSafeState } from "./useSafeState";
 export { default as useSyncState } from "./useSyncState";
 export { default as useUpdateEffect } from "./useUpdateEffect";
-export { default as useLayoutState, useTimeoutLock } from "./useLayoutState";
+export { default as useLayoutState, useTimeoutLock } from "./useLayoutState";
+export { default as useQueryState, queryString, queryNumber, queryBoolean, queryJson } from "./useQueryState";

package/es/useQueryState/index.d.ts

@@ -0,0 +1,64 @@
+/** Turn a raw query string into a typed value. */
+export type Parser<T> = (value: string) => T;
+/** Turn a typed value back into a query string. */
+export type Serializer<T> = (value: T) => string;
+export interface QueryStateOptions<T> {
+    /**
+     * Parse the raw `string` read from the URL into `T`.
+     * Defaults to identity (the raw string).
+     */
+    parser?: Parser<T>;
+    /**
+     * Serialize `T` back into a `string` for the URL.
+     * Defaults to `String(value)`.
+     */
+    serializer?: Serializer<T>;
+    /**
+     * Value returned when the param is absent from
+     * the URL. When set, the hook never returns
+     * `null`.
+     */
+    defaultValue?: T;
+    /**
+     * How the URL is mutated:
+     * - `'replace'` (default) — `history.replaceState`,
+     *   does not add a history entry.
+     * - `'push'` — `history.pushState`, back/forward
+     *   navigates between values.
+     */
+    history?: 'push' | 'replace';
+}
+type SetQueryState<T> = (value: T | null | ((prev: T | null) => T | null)) => void;
+/** Identity parser used when none is supplied. */
+export declare const queryString: Parser<string>;
+/** Parse a numeric query param. `NaN` for non-numbers. */
+export declare const queryNumber: Parser<number>;
+/** Parse a boolean query param. Only `'true'` is true. */
+export declare const queryBoolean: Parser<boolean>;
+/** Parse a JSON-encoded query param. */
+export declare const queryJson: Parser<unknown>;
+/**
+ * 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
+ * makes dependent requests refetch automatically.
+ *
+ * @param key The query parameter name
+ * @param options Parsing, serialization and history
+ *   behaviour
+ * @returns A `[value, setValue]` tuple. `setValue`
+ *   accepts a value, an updater function, or `null`
+ *   to remove the param.
+ */
+declare function useQueryState(key: string): [string | null, SetQueryState<string>];
+declare function useQueryState<T>(key: string, options: QueryStateOptions<T> & {
+    defaultValue: T;
+}): [T, SetQueryState<T>];
+declare function useQueryState<T>(key: string, options: QueryStateOptions<T>): [T | null, SetQueryState<T>];
+export default useQueryState;

package/es/useQueryState/index.js

@@ -0,0 +1,133 @@
+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';
+import useMemoizedFn from "../useMemoizedFn";
+
+/** Turn a raw query string into a typed value. */
+
+/** Turn a typed value back into a query string. */
+
+/** Identity parser used when none is supplied. */
+export var queryString = function queryString(value) {
+  return value;
+};
+
+/** Parse a numeric query param. `NaN` for non-numbers. */
+export var queryNumber = function queryNumber(value) {
+  return Number(value);
+};
+
+/** Parse a boolean query param. Only `'true'` is true. */
+export var queryBoolean = function queryBoolean(value) {
+  return value === 'true';
+};
+
+/** Parse a JSON-encoded query param. */
+export var queryJson = function queryJson(value) {
+  return JSON.parse(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
+ * makes dependent requests refetch automatically.
+ *
+ * @param key The query parameter name
+ * @param options Parsing, serialization and history
+ *   behaviour
+ * @returns A `[value, setValue]` tuple. `setValue`
+ *   accepts a value, an updater function, or `null`
+ *   to remove the param.
+ */
+
+// eslint-disable-next-line no-redeclare
+
+// eslint-disable-next-line no-redeclare
+
+// eslint-disable-next-line no-redeclare
+function useQueryState(key) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var parser = options.parser,
+    _options$serializer = options.serializer,
+    serializer = _options$serializer === void 0 ? String : _options$serializer,
+    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);
+    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]);
+  var set = useMemoizedFn(function (next) {
+    if (!isBrowser) {
+      return;
+    }
+    var prev = read();
+    var resolved = typeof next === 'function' ? next(prev) : next;
+    var params = new URLSearchParams(window.location.search);
+    if (resolved === null || resolved === undefined) {
+      params.delete(key);
+    } else {
+      params.set(key, serializer(resolved));
+    }
+    var search = params.toString();
+    var url = window.location.pathname + (search ? "?".concat(search) : '') + window.location.hash;
+    if (history === 'push') {
+      window.history.pushState(null, '', url);
+    } else {
+      window.history.replaceState(null, '', url);
+    }
+    emit();
+  });
+  return [value, set];
+}
+export default useQueryState;

package/lib/index.d.ts

@@ -9,3 +9,5 @@ export { default as useSyncState } from './useSyncState';
 export { default as useUpdateEffect } from './useUpdateEffect';
 export { default as useLayoutState, useTimeoutLock } from './useLayoutState';
 export type { Updater } from './useLayoutState';
+export { default as useQueryState, queryString, queryNumber, queryBoolean, queryJson, } from './useQueryState';
+export type { Parser, Serializer, QueryStateOptions, } from './useQueryState';

package/lib/index.js

@@ -29,6 +29,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  queryBoolean: () => import_useQueryState.queryBoolean,
+  queryJson: () => import_useQueryState.queryJson,
+  queryNumber: () => import_useQueryState.queryNumber,
+  queryString: () => import_useQueryState.queryString,
   useControlledState: () => import_useControlledState.default,
   useEventCallback: () => import_useEventCallback.default,
   useLatest: () => import_useLatest.default,
@@ -36,6 +40,7 @@ __export(index_exports, {
   useLayoutState: () => import_useLayoutState.default,
   useMemoizedFn: () => import_useMemoizedFn.default,
   usePrevious: () => import_usePrevious.default,
+  useQueryState: () => import_useQueryState.default,
   useSafeState: () => import_useSafeState.default,
   useSyncState: () => import_useSyncState.default,
   useTimeoutLock: () => import_useLayoutState.useTimeoutLock,
@@ -52,8 +57,13 @@ var import_useSafeState = __toESM(require("./useSafeState"));
 var import_useSyncState = __toESM(require("./useSyncState"));
 var import_useUpdateEffect = __toESM(require("./useUpdateEffect"));
 var import_useLayoutState = __toESM(require("./useLayoutState"));
+var import_useQueryState = __toESM(require("./useQueryState"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  queryBoolean,
+  queryJson,
+  queryNumber,
+  queryString,
   useControlledState,
   useEventCallback,
   useLatest,
@@ -61,6 +71,7 @@ var import_useLayoutState = __toESM(require("./useLayoutState"));
   useLayoutState,
   useMemoizedFn,
   usePrevious,
+  useQueryState,
   useSafeState,
   useSyncState,
   useTimeoutLock,

package/lib/useQueryState/index.d.ts

@@ -0,0 +1,64 @@
+/** Turn a raw query string into a typed value. */
+export type Parser<T> = (value: string) => T;
+/** Turn a typed value back into a query string. */
+export type Serializer<T> = (value: T) => string;
+export interface QueryStateOptions<T> {
+    /**
+     * Parse the raw `string` read from the URL into `T`.
+     * Defaults to identity (the raw string).
+     */
+    parser?: Parser<T>;
+    /**
+     * Serialize `T` back into a `string` for the URL.
+     * Defaults to `String(value)`.
+     */
+    serializer?: Serializer<T>;
+    /**
+     * Value returned when the param is absent from
+     * the URL. When set, the hook never returns
+     * `null`.
+     */
+    defaultValue?: T;
+    /**
+     * How the URL is mutated:
+     * - `'replace'` (default) — `history.replaceState`,
+     *   does not add a history entry.
+     * - `'push'` — `history.pushState`, back/forward
+     *   navigates between values.
+     */
+    history?: 'push' | 'replace';
+}
+type SetQueryState<T> = (value: T | null | ((prev: T | null) => T | null)) => void;
+/** Identity parser used when none is supplied. */
+export declare const queryString: Parser<string>;
+/** Parse a numeric query param. `NaN` for non-numbers. */
+export declare const queryNumber: Parser<number>;
+/** Parse a boolean query param. Only `'true'` is true. */
+export declare const queryBoolean: Parser<boolean>;
+/** Parse a JSON-encoded query param. */
+export declare const queryJson: Parser<unknown>;
+/**
+ * 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
+ * makes dependent requests refetch automatically.
+ *
+ * @param key The query parameter name
+ * @param options Parsing, serialization and history
+ *   behaviour
+ * @returns A `[value, setValue]` tuple. `setValue`
+ *   accepts a value, an updater function, or `null`
+ *   to remove the param.
+ */
+declare function useQueryState(key: string): [string | null, SetQueryState<string>];
+declare function useQueryState<T>(key: string, options: QueryStateOptions<T> & {
+    defaultValue: T;
+}): [T, SetQueryState<T>];
+declare function useQueryState<T>(key: string, options: QueryStateOptions<T>): [T | null, SetQueryState<T>];
+export default useQueryState;

package/lib/useQueryState/index.js

@@ -0,0 +1,116 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/useQueryState/index.ts
+var index_exports = {};
+__export(index_exports, {
+  default: () => index_default,
+  queryBoolean: () => queryBoolean,
+  queryJson: () => queryJson,
+  queryNumber: () => queryNumber,
+  queryString: () => queryString
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+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,
+    serializer = String,
+    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);
+    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 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
+    );
+    if (resolved === null || resolved === void 0) {
+      params.delete(key);
+    } else {
+      params.set(key, serializer(resolved));
+    }
+    const search = params.toString();
+    const url = window.location.pathname + (search ? `?${search}` : "") + window.location.hash;
+    if (history === "push") {
+      window.history.pushState(null, "", url);
+    } else {
+      window.history.replaceState(null, "", url);
+    }
+    emit();
+  });
+  return [value, set];
+}
+var index_default = useQueryState;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  queryBoolean,
+  queryJson,
+  queryNumber,
+  queryString
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1money/hooks",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "React hooks for 1money front-end projects",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -41,6 +41,11 @@
       "import": "./es/useLayoutState/index.js",
       "require": "./lib/useLayoutState/index.js"
     },
+    "./useQueryState": {
+      "types": "./es/useQueryState/index.d.ts",
+      "import": "./es/useQueryState/index.js",
+      "require": "./lib/useQueryState/index.js"
+    },
     "./useMemoizedFn": {
       "types": "./es/useMemoizedFn/index.d.ts",
       "import": "./es/useMemoizedFn/index.js",