@pinnacle0/react-stack-router - npm Package Compare versions

Comparing version 0.1.3-beta.35 to 0.1.3-beta.36

dist/context.d.ts

 import type { History } from "history";
 import type { Lifecycle } from "./screen/lifecycle";
 import type { Location, Router } from "./type";
-export interface RouterContext extends Pick<Router, "push" | "replace" | "pop" | "replaceHash" | "replaceSearchParams"> {
+export interface RouterContext extends Pick<Router, "push" | "replace" | "pop" | "replaceHash" | "replaceSearchParams" | "replaceLocationState"> {
     history: History;
@@ -6,0 +6,0 @@ }

dist/createRouter.js

@@ -42,2 +42,3 @@ import { jsx as _jsx } from "react/jsx-runtime";
     const replaceSearchParams = router.replaceSearchParams.bind(router);
+    const replaceLocationState = router.replaceLocationState.bind(router);
     const Root = ({ children }) => {
@@ -50,3 +51,3 @@ const route = useMemo(() => createChildrenRoute(children, null), [children]);
         }, []);
-        return (_jsx(RouterContext.Provider, { value: { history: internalHistory, push, pop, replace, replaceHash, replaceSearchParams }, children: _jsx(Stack, { router: router }) }));
+        return (_jsx(RouterContext.Provider, { value: { history: internalHistory, push, pop, replace, replaceHash, replaceSearchParams, replaceLocationState }, children: _jsx(Stack, { router: router }) }));
     };
@@ -61,4 +62,5 @@ return {
         replaceSearchParams,
+        replaceLocationState,
     };
 }
 //# sourceMappingURL=createRouter.js.map

dist/hook.d.ts

@@ -12,5 +12,5 @@ import { RouterContext } from "./context";
 export declare const useParams: <T extends Record<string, string>>() => T;
-export declare const useLocationState: <T extends LocationState>() => Partial<T>;
+export declare const useLocationState: <T extends LocationState>() => readonly [Record<string, any>, (newState: T | ((current: T) => T)) => void];
 export declare const useHash: () => readonly [string, (hash: string) => void];
-export declare const useSearchParams: <T extends Record<string, string>>() => readonly [T, (params: T | ((current: T) => T)) => void];
+export declare const useSearchParams: <T extends Record<string, string>>() => readonly [T, (newParams: T | ((current: T) => T)) => void];
 export type LocationMatchCallback = (location: Location) => void;
@@ -17,0 +17,0 @@ export declare const useLocationMatch: (callback: LocationMatchCallback) => void;

dist/hook.js

 import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { RouteContext, RouterContext } from "./context";
 export const useNavigate = () => {
-    const { push, pop, replace, replaceHash, replaceSearchParams } = useContext(RouterContext);
-    return { push, pop, replace, replaceHash, replaceSearchParams };
+    const { push, pop, replace, replaceHash, replaceSearchParams, replaceLocationState } = useContext(RouterContext);
+    return { push, pop, replace, replaceHash, replaceSearchParams, replaceLocationState };
 };
@@ -17,7 +17,6 @@ export const useHistory = () => {
 export const useLocationState = () => {
-    const location = useLocation();
-    if ("userState" in location.state) {
-        return location.state.userState;
-    }
-    return {};
+    const { state } = useLocation();
+    const { replaceLocationState } = useNavigate();
+    const setState = useCallback((newState) => replaceLocationState(newState), [replaceLocationState]);
+    return [state, setState];
 };
@@ -34,3 +33,3 @@ export const useHash = () => {
     const searchParams = useMemo(() => Object.fromEntries(new URLSearchParams(search)), [search]);
-    const setSearchParams = useCallback((params) => replaceSearchParams(typeof params === "function" ? params(searchParams) : params), [searchParams, replaceSearchParams]);
+    const setSearchParams = useCallback((newParams) => replaceSearchParams(newParams), [replaceSearchParams]);
     return [searchParams, setSearchParams];
@@ -37,0 +36,0 @@ };

dist/stackRouter/index.d.ts

@@ -5,3 +5,3 @@ import { Route } from "../route";
 import type { History, To } from "history";
-import type { PushOption } from "../type";
+import type { LocationState, PushOption } from "../type";
 export type Subscriber = (screens: Screen[]) => void;
@@ -34,4 +34,5 @@ export type StackRoutePattern = {
     replace(to: To, state?: Record<string, any>): void;
+    replaceSearchParams<T extends Record<string, string> = Record<string, string>>(newParam: T | ((current: T) => T)): void;
     replaceHash(hash: string): void;
-    replaceSearchParams(params: Record<string, string>): void;
+    replaceLocationState<T extends LocationState = LocationState>(newState: T | ((current: T) => T)): void;
     isSafariEdgeSwipeBackwardPop(): boolean;
@@ -38,0 +39,0 @@ private createKey;

dist/stackRouter/index.js

@@ -64,3 +64,3 @@ import { Action } from "history";
         this.pushOption.value = option ?? null;
-        this.stackHistory.push(to, { $key: this.createKey(), userState: option?.state ?? {} });
+        this.stackHistory.push(to, { $key: this.createKey(), ...(option?.state ?? {}) });
         return wait;
@@ -76,4 +76,9 @@ }
             return;
-        this.stackHistory.replace(to, { $key: this.stackHistory.location.state?.$key ?? this.createKey(), userState: state ?? {} });
+        this.stackHistory.replace(to, { $key: this.stackHistory.location.state?.$key ?? this.createKey(), ...(state ?? {}) });
     }
+    replaceSearchParams(newParam) {
+        const { pathname, search, hash, state } = this.stackHistory.location;
+        const nextSearchParam = typeof newParam === "function" ? newParam(new URLSearchParams(search)) : newParam;
+        this.stackHistory.replace({ pathname, search: new URLSearchParams(nextSearchParam).toString(), hash }, state);
+    }
     replaceHash(hash) {
@@ -83,6 +88,7 @@ const location = this.stackHistory.location;
     }
-    replaceSearchParams(params) {
-        const location = this.stackHistory.location;
-        const search = new URLSearchParams(params).toString();
-        this.stackHistory.replace({ pathname: location.pathname, search, hash: location.hash }, location.state);
+    replaceLocationState(newState) {
+        const { pathname, search, hash, state } = this.stackHistory.location;
+        const $key = state?.$key;
+        const nextState = typeof newState === "function" ? newState(state) : newState;
+        this.stackHistory.replace({ pathname, search, hash }, { ...nextState, $key });
     }
@@ -89,0 +95,0 @@ isSafariEdgeSwipeBackwardPop() {

dist/type.d.ts

@@ -30,3 +30,4 @@ import type React from "react";
     replaceHash: (hash: string) => void;
-    replaceSearchParams: (params: Record<string, string>) => void;
+    replaceSearchParams: <T extends Record<string, string> = Record<string, string>>(newParam: T | ((current: T) => T)) => void;
+    replaceLocationState: <T extends LocationState = LocationState>(newState: T | ((current: T) => T)) => void;
 }
@@ -33,0 +34,0 @@ export interface RouteRenderProps<P extends Record<string, string>, S extends LocationState = LocationState> {

package.json

 {
   "name": "@pinnacle0/react-stack-router",
-  "version": "0.1.3-beta.35",
+  "version": "0.1.3-beta.36",
   "author": "Pinnacle",
@@ -5,0 +5,0 @@ "license": "MIT",

src/context.ts

@@ -6,3 +6,3 @@ import {createContext} from "react";
 
-export interface RouterContext extends Pick<Router, "push" | "replace" | "pop" | "replaceHash" | "replaceSearchParams"> {
+export interface RouterContext extends Pick<Router, "push" | "replace" | "pop" | "replaceHash" | "replaceSearchParams" | "replaceLocationState"> {
     history: History;
@@ -9,0 +9,0 @@ }

src/hook.ts

@@ -12,4 +12,4 @@ import {useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef} from "react";
 export const useNavigate = (): Navigate => {
-    const {push, pop, replace, replaceHash, replaceSearchParams} = useContext(RouterContext);
-    return {push, pop, replace, replaceHash, replaceSearchParams};
+    const {push, pop, replace, replaceHash, replaceSearchParams, replaceLocationState} = useContext(RouterContext);
+    return {push, pop, replace, replaceHash, replaceSearchParams, replaceLocationState};
 };
@@ -29,8 +29,7 @@
 
-export const useLocationState = <T extends LocationState>(): Partial<T> => {
-    const location = useLocation();
-    if ("userState" in location.state) {
-        return location.state.userState;
-    }
-    return {};
+export const useLocationState = <T extends LocationState>() => {
+    const {state} = useLocation();
+    const {replaceLocationState} = useNavigate();
+    const setState = useCallback((newState: T | ((current: T) => T)) => replaceLocationState(newState), [replaceLocationState]);
+    return [state, setState] as const;
 };
@@ -49,3 +48,3 @@
     const searchParams = useMemo(() => Object.fromEntries(new URLSearchParams(search)), [search]) as T;
-    const setSearchParams = useCallback((params: T | ((current: T) => T)) => replaceSearchParams(typeof params === "function" ? params(searchParams) : params), [searchParams, replaceSearchParams]);
+    const setSearchParams = useCallback((newParams: T | ((current: T) => T)) => replaceSearchParams(newParams), [replaceSearchParams]);
     return [searchParams, setSearchParams] as const;
@@ -52,0 +51,0 @@ };

src/stackRouter/index.ts

@@ -8,3 +8,3 @@ import {Action} from "history";
 import type React from "react";
-import type {History, Update, To} from "history";
+import type {History, Update, To, Key} from "history";
 import type {LocationState, Location, PushOption} from "../type";
@@ -18,5 +18,4 @@ import type {Match} from "../route";
 type InternalLocationState<S extends LocationState> = {
-    $key: string;
-    userState: S;
-};
+    $key: Key;
+} & S;
 
@@ -102,3 +101,3 @@ export type StackRoutePattern = {
         this.pushOption.value = option ?? null;
-        this.stackHistory.push(to, {$key: this.createKey(), userState: option?.state ?? {}});
+        this.stackHistory.push(to, {$key: this.createKey(), ...(option?.state ?? {})});
 
@@ -116,5 +115,11 @@ return wait;
         if (!this.matchRoute(to)) return;
-        this.stackHistory.replace(to, {$key: (this.stackHistory.location.state as any)?.$key ?? this.createKey(), userState: state ?? {}});
+        this.stackHistory.replace(to, {$key: (this.stackHistory.location.state as any)?.$key ?? this.createKey(), ...(state ?? {})});
     }
 
+    replaceSearchParams<T extends Record<string, string> = Record<string, string>>(newParam: T | ((current: T) => T)): void {
+        const {pathname, search, hash, state} = this.stackHistory.location;
+        const nextSearchParam = typeof newParam === "function" ? newParam(new URLSearchParams(search) as any) : newParam;
+        this.stackHistory.replace({pathname, search: new URLSearchParams(nextSearchParam).toString(), hash}, state);
+    }
+
     replaceHash(hash: string): void {
@@ -125,6 +130,7 @@ const location = this.stackHistory.location;
 
-    replaceSearchParams(params: Record<string, string>): void {
-        const location = this.stackHistory.location;
-        const search = new URLSearchParams(params).toString();
-        this.stackHistory.replace({pathname: location.pathname, search, hash: location.hash}, location.state);
+    replaceLocationState<T extends LocationState = LocationState>(newState: T | ((current: T) => T)): void {
+        const {pathname, search, hash, state} = this.stackHistory.location;
+        const $key = state?.$key;
+        const nextState = typeof newState === "function" ? newState(state as T) : newState;
+        this.stackHistory.replace({pathname, search, hash}, {...nextState, $key});
     }
@@ -131,0 +137,0 @@

src/type.ts

@@ -36,3 +36,4 @@ import type React from "react";
     replaceHash: (hash: string) => void;
-    replaceSearchParams: (params: Record<string, string>) => void;
+    replaceSearchParams: <T extends Record<string, string> = Record<string, string>>(newParam: T | ((current: T) => T)) => void;
+    replaceLocationState: <T extends LocationState = LocationState>(newState: T | ((current: T) => T)) => void;
 }
@@ -39,0 +40,0 @@

No alert changes

Improved metrics

Total package byte prevSize

156977

increased by2%

Lines of code

2450

increased by0.66%

No dependency changes