From ca53ae1c3a5ca1da8fdf478237bb357c13f83543 Mon Sep 17 00:00:00 2001 From: Pierre Gradelet Date: Thu, 26 Sep 2024 20:25:33 +0200 Subject: [PATCH 1/3] Fix query params for hash-history on first call --- .../example-client/src/pages/AboutPage.tsx | 14 ++++++-- src/components/Router.tsx | 12 +++++-- src/core/core.ts | 3 ++ src/tests/core.getRouteFromUrl.test.ts | 34 ++++++++++++------- 4 files changed, 47 insertions(+), 16 deletions(-) diff --git a/examples/example-client/src/pages/AboutPage.tsx b/examples/example-client/src/pages/AboutPage.tsx index f7196d72..f41f22e7 100644 --- a/examples/example-client/src/pages/AboutPage.tsx +++ b/examples/example-client/src/pages/AboutPage.tsx @@ -8,6 +8,7 @@ import { Router, useRouter, useStack, + useLang, } from "@cher-ami/router" import { transitionsHelper } from "../helper/transitionsHelper" import { routesList } from "../routes" @@ -16,6 +17,8 @@ const componentName: string = "AboutPage" const AboutPage = forwardRef((props, handleRef: ForwardedRef) => { const rootRef = useRef(null) + const [lang] = useLang() + const { currentRoute } = useRouter() useStack({ componentName, @@ -31,8 +34,15 @@ const AboutPage = forwardRef((props, handleRef: ForwardedRef) => { return (
- {componentName} - +

+ {componentName} - {lang.key} +

+ Query Params : +
    +
  • Foo : {currentRoute.queryParams?.foo}
    • +
  • Zoo : {currentRoute.queryParams?.zoo}
    • +
+ Children : handleHistory", url) + const matchingRoute = getRouteFromUrl({ pUrl: url, pRoutes: routes, @@ -307,13 +309,17 @@ function Router( const newRoute: TRoute = matchingRoute || notFoundRoute if (!newRoute) return + console.log("===================== newRoute _fullUrl", newRoute._fullUrl) + // prepare cache for new route data staticProps const cache = staticPropsCache() // check if new route data as been store in cache // the matcher will match even if the URL ends with a slash const fullUrl = removeLastCharFromString(newRoute._fullUrl, "/") + console.log("===================== newRoute fullUrl", fullUrl) const [urlWithoutHash] = fullUrl.split("#") + console.log("===================== newRoute urlWithoutHash", urlWithoutHash) /** * Request static props and cache it @@ -347,6 +353,7 @@ function Router( if (props.initialStaticProps) { log(props.id, "firstRoute > isClient > assign initialStaticProps to newRoute props & set cache"); Object.assign(newRoute.props, props.initialStaticProps?.props ?? {}); + console.log("===================== urlWithoutHash", urlWithoutHash) cache.set(urlWithoutHash, newRoute.props ?? {}); } else if (newRoute.getStaticProps) { @@ -398,9 +405,10 @@ function Router( return // client } else if (history) { - let url = window.location.pathname + window.location.search + window.location.hash + let url = + history.location.pathname + history.location.search + history.location.hash if (props.isHashHistory) { - url = history.location.pathname + window.location.search + url = history.location.pathname + history.location.search } handleHistory(url) diff --git a/src/core/core.ts b/src/core/core.ts index 93767e3a..5eab5af8 100644 --- a/src/core/core.ts +++ b/src/core/core.ts @@ -289,6 +289,8 @@ export function getRouteFromUrl({ isHashHistory, ) + console.log("======getRouteFromUrl queryParams", queryParams) + function next({ pUrl, urlWithoutHashAndQuery, @@ -402,6 +404,7 @@ export const extractQueryParamsAndHash = ( return params } + console.log(" ===========> extractQueryParamsAndHash", url) let queryParams = {} let hash = null let newUrl = url diff --git a/src/tests/core.getRouteFromUrl.test.ts b/src/tests/core.getRouteFromUrl.test.ts index cc3e21c9..ee34b928 100644 --- a/src/tests/core.getRouteFromUrl.test.ts +++ b/src/tests/core.getRouteFromUrl.test.ts @@ -114,27 +114,37 @@ describe("getRouteFromUrl", () => { children: [{ path: "/c" }, { path: "/d" }], }, ] - // only params + + // params let getRoute = getRouteFromUrl({ pRoutes, pUrl: "/b?foo=bar&lang=en", isHashHistory: true, }) + expect(getRoute.queryParams).toEqual({ foo: "bar", lang: "en" }) expect(getRoute._fullPath).toEqual("/b") - // only hash - getRoute = getRouteFromUrl({ pRoutes, pUrl: "/b/c", isHashHistory: true }) - expect(getRoute._fullPath).toEqual("/b/c") - expect(getRoute.hash).toEqual(null) - - // params and hash - getRoute = getRouteFromUrl({ pRoutes, pUrl: "/b/c?foo=bar", isHashHistory: true }) - expect(getRoute.queryParams).toEqual({ foo: "bar" }) - - // not hash and params + // no params getRoute = getRouteFromUrl({ pRoutes, pUrl: "/a", isHashHistory: true }) expect(getRoute.queryParams).toEqual({}) - expect(getRoute.hash).toEqual(null) + + // Subroutes + getRoute = getRouteFromUrl({ + pRoutes, + pUrl: "/b/c", + isHashHistory: true, + }) + expect(getRoute._fullPath).toEqual("/b/c") + expect(getRoute.queryParams).toEqual({}) + + // Subroutes with params + getRoute = getRouteFromUrl({ + pRoutes, + pUrl: "/b/c?foo=bar&lang=en", + isHashHistory: true, + }) + expect(getRoute._fullPath).toEqual("/b/c") + expect(getRoute.queryParams).toEqual({ foo: "bar", lang: "en" }) }) }) From 91f99248fa9198d9338d6231651fa6063d0e45c8 Mon Sep 17 00:00:00 2001 From: Pierre Gradelet Date: Thu, 26 Sep 2024 20:28:39 +0200 Subject: [PATCH 2/3] Remove console.log --- src/components/Router.tsx | 7 ------- src/core/core.ts | 3 --- 2 files changed, 10 deletions(-) diff --git a/src/components/Router.tsx b/src/components/Router.tsx index 8748152e..cacc189c 100644 --- a/src/components/Router.tsx +++ b/src/components/Router.tsx @@ -281,8 +281,6 @@ function Router( return } - console.log("========> handleHistory", url) - const matchingRoute = getRouteFromUrl({ pUrl: url, pRoutes: routes, @@ -309,17 +307,13 @@ function Router( const newRoute: TRoute = matchingRoute || notFoundRoute if (!newRoute) return - console.log("===================== newRoute _fullUrl", newRoute._fullUrl) - // prepare cache for new route data staticProps const cache = staticPropsCache() // check if new route data as been store in cache // the matcher will match even if the URL ends with a slash const fullUrl = removeLastCharFromString(newRoute._fullUrl, "/") - console.log("===================== newRoute fullUrl", fullUrl) const [urlWithoutHash] = fullUrl.split("#") - console.log("===================== newRoute urlWithoutHash", urlWithoutHash) /** * Request static props and cache it @@ -353,7 +347,6 @@ function Router( if (props.initialStaticProps) { log(props.id, "firstRoute > isClient > assign initialStaticProps to newRoute props & set cache"); Object.assign(newRoute.props, props.initialStaticProps?.props ?? {}); - console.log("===================== urlWithoutHash", urlWithoutHash) cache.set(urlWithoutHash, newRoute.props ?? {}); } else if (newRoute.getStaticProps) { diff --git a/src/core/core.ts b/src/core/core.ts index 5eab5af8..93767e3a 100644 --- a/src/core/core.ts +++ b/src/core/core.ts @@ -289,8 +289,6 @@ export function getRouteFromUrl({ isHashHistory, ) - console.log("======getRouteFromUrl queryParams", queryParams) - function next({ pUrl, urlWithoutHashAndQuery, @@ -404,7 +402,6 @@ export const extractQueryParamsAndHash = ( return params } - console.log(" ===========> extractQueryParamsAndHash", url) let queryParams = {} let hash = null let newUrl = url From 87f1ed916d5fccc36cdf77b00e23eea67f917190 Mon Sep 17 00:00:00 2001 From: Pierre Gradelet Date: Thu, 26 Sep 2024 20:31:36 +0200 Subject: [PATCH 3/3] Add hash history to code sandbox --- .codesandbox/ci.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 6329eb5b..d6b68b0e 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -3,7 +3,8 @@ "sandboxes": [ "/examples/example-client", "/examples/example-ssr", - "/examples/example-history-block" + "/examples/example-history-block", + "/examples/example-hash-history" ], "node": "18" }