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

Comparing version 0.1.3-beta.49 to 0.1.3-beta.50

dist/component/Animated/AnimatePresence.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { invariant } from "../../invariant";
+import { invariant } from "../../util";
 /**
@@ -5,0 +5,0 @@ * Presence exit animation of the element

dist/component/Route.js

@@ -1,2 +0,2 @@
-import { invariant } from "../invariant";
+import { invariant } from "../util";
 export const Route = () => {
@@ -3,0 +3,0 @@ invariant(false, "Route should be wrapped by <Router> and should not be render directly");

dist/createRouter.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useMemo } from "react";
 import { createBrowserHistory } from "history";
-import { invariant } from "./invariant";
+import { invariant, createKey } from "./util";
 import { Route } from "./route";
@@ -10,3 +10,3 @@ import { RouterContext } from "./context";
 import { StackRouter } from "./stackRouter";
-const createChildrenRoute = (children, parentPattern, route = new Route()) => {
+const createChildrenRoute = (children, pattern, parent, route = new Route()) => {
     React.Children.forEach(children, element => {
@@ -18,15 +18,10 @@ if (element === null || element === undefined)
         const props = element.props;
-        const patterns = [];
-        let parent = parentPattern;
-        while (parent) {
-            patterns.unshift(parent.pattern);
-            parent = parent.parent;
-        }
-        const pattern = { pattern: props.path, parent: parentPattern, hasComponent: false };
+        let nextParent = parent;
+        const nextPattern = [...pattern, props.path];
         if ("component" in props) {
-            pattern.hasComponent = true;
-            route.insert([...patterns, props.path].join("/"), { pattern, component: props.component });
+            nextParent = { id: createKey(), parent: nextParent, component: props.component };
+            route.insert(nextPattern.join("/"), nextParent);
         }
         if (props.children) {
-            createChildrenRoute(props.children, pattern, route);
+            createChildrenRoute(props.children, nextPattern, nextParent, route);
         }
@@ -46,3 +41,3 @@ });
     const Root = ({ children }) => {
-        const route = useMemo(() => createChildrenRoute(children, null), [children]);
+        const route = useMemo(() => createChildrenRoute(children, [], null), [children]);
         router.updateRoute(route);
@@ -49,0 +44,0 @@ useEffect(() => {

dist/route/index.js

@@ -1,2 +0,2 @@
-import { invariant } from "../invariant";
+import { invariant } from "../util";
 import { matchPathSegment, patternType } from "./matchPath";
@@ -3,0 +3,0 @@ /**

dist/stackRouter/index.d.ts

@@ -7,10 +7,6 @@ import { Route } from "../route";
 export type Subscriber = (screens: Screen[]) => void;
-export type StackRoutePattern = {
-    pattern: string;
-    parent: StackRoutePattern | null;
-    hasComponent: boolean;
-};
 export type StackRoutePayload = {
+    id: string;
     component: React.ComponentType<any>;
-    pattern: StackRoutePattern;
+    parent: StackRoutePayload | null;
 };
@@ -43,3 +39,2 @@ export type StackRouterOptions = {
     isSafariEdgeSwipeBackwardPop(): boolean;
-    private createKey;
     private notify;
@@ -46,0 +41,0 @@ private getTopScreen;

dist/stackRouter/index.js

 import { Action } from "history";
 import { Route, formatPath } from "../route";
 import { Screen } from "../screen";
-import { invariant } from "../invariant";
+import { createKey, invariant } from "../util";
 import { createStackHistory } from "./stackHistory";
@@ -29,18 +29,11 @@ import { createSafariEdgeSwipeDetector } from "./safariEdgeSwipeDetector";
         const matched = this.matchRoute(pathname);
-        let numOfParentComponent = 0;
-        let parentPattern = matched.payload.pattern.parent;
-        while (parentPattern) {
-            if (parentPattern.hasComponent) {
-                numOfParentComponent++;
-            }
-            parentPattern = parentPattern.parent;
-        }
         const stack = [{ pathname, hash, search }];
         const segments = ["/", ...matched.matchedSegments];
-        while (numOfParentComponent !== 0 && segments.length !== 0) {
+        let currentParent = matched.payload.parent;
+        while (currentParent !== null && segments.length >= 0) {
             const pathname = formatPath(segments.join("/"));
             const matched = this.route.lookup(pathname);
-            if (!matched?.fallback) {
+            if (matched && matched.payload.id === currentParent.id) {
                 stack.unshift(pathname.startsWith("/") ? pathname : `/${pathname}`);
-                numOfParentComponent--;
+                currentParent = currentParent.parent;
             }
@@ -51,3 +44,3 @@ segments.pop();
             // need to re-write the key of last state
-            const state = index === stack.length - 1 ? { ...defaultState, $key: this.createKey() } : {};
+            const state = index === stack.length - 1 ? { ...defaultState, $key: createKey() } : {};
             return index === 0 ? this.replace(to, { state }) : this.push(to, { transitionType: "exiting", state });
@@ -73,3 +66,3 @@ }));
         const wait = new Promise(resolve => (this.resolve.value = resolve));
-        this.stackHistory.push(to, { $key: this.createKey(), ...(option?.state ?? {}) });
+        this.stackHistory.push(to, { $key: createKey(), ...(option?.state ?? {}) });
         return wait;
@@ -93,3 +86,3 @@ }
             return;
-        this.stackHistory.replace(to, { $key: this.stackHistory.location.state?.$key ?? this.createKey(), ...(option?.state ?? {}) });
+        this.stackHistory.replace(to, { $key: this.stackHistory.location.state?.$key ?? createKey(), ...(option?.state ?? {}) });
     }
@@ -114,5 +107,2 @@ replaceSearchParams(newParam) {
     }
-    createKey() {
-        return Date.now().toString(36) + Math.random().toString(36).substring(2);
-    }
     notify() {
@@ -119,0 +109,0 @@ this.subscribers.forEach(_ => _([...this.screens]));

package.json

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

src/route/index.ts

@@ -1,2 +0,2 @@
-import {invariant} from "../invariant";
+import {invariant} from "../util";
 import {matchPathSegment, patternType} from "./matchPath";
@@ -3,0 +3,0 @@

src/stackRouter/index.ts

 import {Action} from "history";
 import {Route, formatPath} from "../route";
 import {Screen} from "../screen";
-import {invariant} from "../invariant";
+import {createKey, invariant} from "../util";
 import {createStackHistory} from "./stackHistory";
@@ -25,11 +25,6 @@ import {createSafariEdgeSwipeDetector} from "./safariEdgeSwipeDetector";
 
-export type StackRoutePattern = {
-    pattern: string;
-    parent: StackRoutePattern | null;
-    hasComponent: boolean;
-};
-
 export type StackRoutePayload = {
+    id: string;
     component: React.ComponentType<any>;
-    pattern: StackRoutePattern;
+    parent: StackRoutePayload | null;
 };
@@ -68,20 +63,12 @@
 
-        let numOfParentComponent = 0;
-        let parentPattern: StackRoutePattern | null = matched.payload.pattern.parent;
-        while (parentPattern) {
-            if (parentPattern.hasComponent) {
-                numOfParentComponent++;
-            }
-            parentPattern = parentPattern.parent;
-        }
-
         const stack: To[] = [{pathname, hash, search}];
         const segments = ["/", ...matched.matchedSegments];
 
-        while (numOfParentComponent !== 0 && segments.length !== 0) {
+        let currentParent = matched.payload.parent;
+        while (currentParent !== null && segments.length >= 0) {
             const pathname = formatPath(segments.join("/"));
             const matched = this.route.lookup(pathname);
-            if (!matched?.fallback) {
+            if (matched && matched.payload.id === currentParent.id) {
                 stack.unshift(pathname.startsWith("/") ? pathname : `/${pathname}`);
-                numOfParentComponent--;
+                currentParent = currentParent.parent;
             }
@@ -94,3 +81,3 @@ segments.pop();
                 // need to re-write the key of last state
-                const state = index === stack.length - 1 ? {...defaultState, $key: this.createKey()} : {};
+                const state = index === stack.length - 1 ? {...defaultState, $key: createKey()} : {};
                 return index === 0 ? this.replace(to, {state}) : this.push(to, {transitionType: "exiting", state});
@@ -121,3 +108,3 @@ })
         const wait = new Promise<void>(resolve => (this.resolve.value = resolve));
-        this.stackHistory.push(to, {$key: this.createKey(), ...(option?.state ?? {})});
+        this.stackHistory.push(to, {$key: createKey(), ...(option?.state ?? {})});
 
@@ -144,3 +131,3 @@ return wait;
         if (!this.matchRoute(to)) return;
-        this.stackHistory.replace(to, {$key: (this.stackHistory.location.state as any)?.$key ?? this.createKey(), ...(option?.state ?? {})});
+        this.stackHistory.replace(to, {$key: (this.stackHistory.location.state as any)?.$key ?? createKey(), ...(option?.state ?? {})});
     }
@@ -170,6 +157,2 @@
 
-    private createKey() {
-        return Date.now().toString(36) + Math.random().toString(36).substring(2);
-    }
-
     private notify() {
@@ -176,0 +159,0 @@ this.subscribers.forEach(_ => _([...this.screens]));

No alert changes

Worsened metrics

Total package byte prevSize

161857

-0.85%

Lines of code

2517

-1.26%

No dependency changes