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

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

dist/component/Stack/index.js

@@ -20,3 +20,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
     return (_jsx("div", { className: classNames("g-stack-router", className), style: style, children: _jsx(AnimatePresence, { children: screens.map((screen, index) => {
-                const context = { location: screen.location, lifecycle: screen.lifecycle, params: screen.params };
+                const context = {
+                    location: screen.location,
+                    lifecycle: screen.lifecycle,
+                    params: screen.params,
+                    searchParams: screen.searchParams,
+                };
                 return (_jsx(Animated.div, { className: classNames("g-stack-router-screen", { overlay: index > 0 }), style: index === screens.length - 2
@@ -23,0 +28,0 @@ ? { transform: "translate3d(-100px, 0, 0)" }

dist/context.d.ts

@@ -9,6 +9,5 @@ import type { History } from "history";
 export interface RouteContext {
-    params: {
-        [key: string]: any;
-    };
     location: Location;
+    params: Record<string, string>;
+    searchParams: Record<string, string>;
     lifecycle: Lifecycle;
@@ -15,0 +14,0 @@ }

dist/createRouter.d.ts

 import type { History } from "history";
 import type { Router } from "./type";
-export declare function createRouter(history?: History): Router;
+export type CreateRouterOptions = {
+    transitionDuration?: number;
+};
+export declare function createRouter(history?: History, options?: CreateRouterOptions): Router;
 //# sourceMappingURL=createRouter.d.ts.map

dist/createRouter.js

@@ -34,5 +34,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 };
-export function createRouter(history) {
+export function createRouter(history, options) {
     const internalHistory = history ?? createBrowserHistory();
-    const router = new StackRouter(internalHistory);
+    const router = new StackRouter({ history: internalHistory, transitionDuration: options?.transitionDuration ?? 400 });
     const push = router.push.bind(router);
@@ -39,0 +39,0 @@ const pop = router.pop.bind(router);

dist/index.d.ts

@@ -1,2 +0,2 @@
-export { createRouter } from "./createRouter";
+export { createRouter, type CreateRouterOptions } from "./createRouter";
 export { Link } from "./component/Link";
@@ -3,0 +3,0 @@ export { RouterContext, RouteContext } from "./context";

dist/screen/index.d.ts

@@ -13,2 +13,9 @@ import { Lifecycle } from "./lifecycle";
 }
+type ScreenConfig = {
+    content: React.ComponentType<any>;
+    location: Location;
+    params: Record<string, string>;
+    searchParams: Record<string, string>;
+    transition: ScreenTransitionSettings;
+};
 export declare class Screen {
@@ -18,11 +25,8 @@ readonly content: React.ComponentType<any>;
     readonly params: Record<string, string>;
+    readonly searchParams: Record<string, string>;
     readonly transition: Transition;
     readonly lifecycle: Lifecycle;
-    constructor({ content, location, params, transition }: {
-        content: React.ComponentType<any>;
-        location: Location;
-        params: Record<string, string>;
-        transition: ScreenTransitionSettings;
-    });
+    constructor({ content, location, params, transition, searchParams }: ScreenConfig);
 }
+export {};
 //# sourceMappingURL=index.d.ts.map

dist/screen/index.js

@@ -7,8 +7,10 @@ import { Lifecycle } from "./lifecycle";
     params;
+    searchParams;
     transition;
     lifecycle = new Lifecycle();
-    constructor({ content, location, params, transition }) {
+    constructor({ content, location, params, transition, searchParams }) {
         this.content = content;
         this.location = location;
         this.params = params;
+        this.searchParams = searchParams;
         this.transition = new Transition(transition.type, transition.duration);
@@ -15,0 +17,0 @@ }

dist/stackRouter/index.d.ts

@@ -16,2 +16,6 @@ import { Route } from "../route";
 };
+export type StackRouterOptions = {
+    history: History;
+    transitionDuration: number;
+};
 export declare class StackRouter {
@@ -24,5 +28,6 @@ private initialized;
     private safariEdgeSwipeDetector;
+    private transitionDuration;
     private pushOption;
     private resolve;
-    constructor(history: History);
+    constructor(options: StackRouterOptions);
     initialize(): Promise<void[] | undefined>;
@@ -29,0 +34,0 @@ updateRoute(route: Route<StackRoutePayload>): void;

dist/stackRouter/index.js

@@ -14,6 +14,8 @@ import { Action } from "history";
     safariEdgeSwipeDetector = createSafariEdgeSwipeDetector();
+    transitionDuration;
     pushOption = new Snapshot();
     resolve = new Snapshot();
-    constructor(history) {
-        this.stackHistory = createStackHistory(history);
+    constructor(options) {
+        this.stackHistory = createStackHistory(options.history);
+        this.transitionDuration = options.transitionDuration;
         this.stackHistory.listen(this.handler.bind(this));
@@ -120,5 +122,6 @@ }
             params: matched.params,
+            searchParams: Object.fromEntries(new URLSearchParams(location.search)),
             transition: {
                 type: transitionType,
-                duration: 400,
+                duration: this.transitionDuration,
             },
@@ -148,3 +151,2 @@ });
     replaceScreen(location) {
-        const resolve = this.resolve.value;
         const top = this.getTopScreen();
@@ -155,6 +157,4 @@ top?.transition.update("none");
         if (!screen) {
-            resolve?.();
             return;
         }
-        resolve && screen.lifecycle.attachOnce("didEnter", resolve);
         this.screens.push(screen);
@@ -161,0 +161,0 @@ this.notify();

dist/type.d.ts

@@ -33,7 +33,8 @@ import type React from "react";
 }
-export interface RouteRenderProps<P extends Record<string, string>, S extends LocationState = LocationState> {
-    location: Location<S>;
-    params: P;
+export interface RouteRenderProps<Params extends Record<string, string>, SearchParams extends Record<string, string> = Record<string, string>, State extends LocationState = LocationState> {
+    location: Location<State>;
+    params: Params;
+    searchParams: SearchParams;
     lifecycle: Lifecycle;
 }
 //# sourceMappingURL=type.d.ts.map

package.json

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

src/context.ts

@@ -13,4 +13,5 @@ import {createContext} from "react";
 export interface RouteContext {
-    params: {[key: string]: any};
     location: Location;
+    params: Record<string, string>;
+    searchParams: Record<string, string>;
     lifecycle: Lifecycle;
@@ -17,0 +18,0 @@ }

src/index.ts

@@ -1,2 +0,2 @@
-export {createRouter} from "./createRouter";
+export {createRouter, type CreateRouterOptions} from "./createRouter";
 export {Link} from "./component/Link";
@@ -3,0 +3,0 @@ export {RouterContext, RouteContext} from "./context";

src/screen/index.ts

@@ -16,2 +16,10 @@ import {Lifecycle} from "./lifecycle";
 
+type ScreenConfig = {
+    content: React.ComponentType<any>;
+    location: Location;
+    params: Record<string, string>;
+    searchParams: Record<string, string>;
+    transition: ScreenTransitionSettings;
+};
+
 export class Screen {
@@ -21,11 +29,13 @@ readonly content: React.ComponentType<any>;
     readonly params: Record<string, string>;
+    readonly searchParams: Record<string, string>;
     readonly transition: Transition;
     readonly lifecycle = new Lifecycle();
 
-    constructor({content, location, params, transition}: {content: React.ComponentType<any>; location: Location; params: Record<string, string>; transition: ScreenTransitionSettings}) {
+    constructor({content, location, params, transition, searchParams}: ScreenConfig) {
         this.content = content;
         this.location = location;
         this.params = params;
+        this.searchParams = searchParams;
         this.transition = new Transition(transition.type, transition.duration);
     }
 }

src/stackRouter/index.ts

@@ -31,2 +31,7 @@ import {Action} from "history";
 
+export type StackRouterOptions = {
+    history: History;
+    transitionDuration: number;
+};
+
 export class StackRouter {
@@ -39,2 +44,3 @@ private initialized = false;
     private safariEdgeSwipeDetector = createSafariEdgeSwipeDetector();
+    private transitionDuration: number;
 
@@ -44,4 +50,5 @@ private pushOption = new Snapshot<PushOption>();
 
-    constructor(history: History) {
-        this.stackHistory = createStackHistory(history);
+    constructor(options: StackRouterOptions) {
+        this.stackHistory = createStackHistory(options.history);
+        this.transitionDuration = options.transitionDuration;
         this.stackHistory.listen(this.handler.bind(this));
@@ -163,2 +170,3 @@ }
         if (!matched) return null;
+
         return new Screen({
@@ -168,5 +176,6 @@ content: matched.payload.component,
             params: matched.params,
+            searchParams: Object.fromEntries(new URLSearchParams(location.search)),
             transition: {
                 type: transitionType,
-                duration: 400,
+                duration: this.transitionDuration,
             },
@@ -202,3 +211,2 @@ });
     private replaceScreen(location: Location) {
-        const resolve = this.resolve.value;
         const top = this.getTopScreen();
@@ -211,7 +219,5 @@
         if (!screen) {
-            resolve?.();
             return;
         }
 
-        resolve && screen.lifecycle.attachOnce("didEnter", resolve);
         this.screens.push(screen);
@@ -218,0 +224,0 @@ this.notify();

src/type.ts

@@ -40,6 +40,7 @@ import type React from "react";
 
-export interface RouteRenderProps<P extends Record<string, string>, S extends LocationState = LocationState> {
-    location: Location<S>;
-    params: P;
+export interface RouteRenderProps<Params extends Record<string, string>, SearchParams extends Record<string, string> = Record<string, string>, State extends LocationState = LocationState> {
+    location: Location<State>;
+    params: Params;
+    searchParams: SearchParams;
     lifecycle: Lifecycle;
 }

No alert changes

Improved metrics

Total package byte prevSize

159405

increased by1.55%

Lines of code

2491

increased by1.67%

No dependency changes