Merge pull request #265 from kitbagjs/push-hash

docs/api/types/ResolvedRoute.md

@@ -43,6 +43,14 @@ query: ResolvedRouteQuery;
 
 Accessor for query string values from user in the current browser location. [ResolvedRouteQuery](/api/types/ResolvedRouteQuery)
 
+### hash
+
+```ts
+hash?: string;
+```
+
+Accessor for hash string value (or undefined) from user in the current browser location.
+
 ### params
 
 ```ts

docs/api/types/RouterPush.md

@@ -21,6 +21,7 @@ Push will update the URL for the browser and also add the URL into the history s
 {
   query?: Record<string, string>,
   replace?: boolean,
+  hash?: string,
 }
 ```
 

docs/api/types/RouterReplace.md

@@ -20,6 +20,7 @@ Replace has the same effect as [`RouterPush`](/api/types/RouterPush) but without
 ```ts
 {
   query?: Record<string, string>,
+  hash?: string,
 }
 ```
 

docs/api/types/RouterResolve.md

@@ -34,6 +34,7 @@ If source is `Url`, expected type for params is `never`. Else when source is `TS
 ```ts
 {
   query?: Record<string, string>,
+  hash?: string,
 }
 ```
 

src/services/createRouterResolve.spec.ts

@@ -83,4 +83,10 @@ test('when given an external route with params in host, interpolates param value
   const url = resolve('external', { 'subdomain': 'router' })
 
   expect(url).toBe('https://router.kitbag.dev/')
+})
+
+test('given a route with hash, interpolates hash value', () => {
+  const resolve = createRouterResolve(routes)
+
+  expect(resolve('parentA', { paramA: 'bar' }, { hash: 'foo' })).toBe('/parentA/bar#foo')
 })

src/services/createRouterResolve.ts

@@ -10,6 +10,7 @@ import { AllPropertiesAreOptional } from '@/types/utilities'
 
 export type RouterResolveOptions = {
   query?: Record<string, string>,
+  hash?: string,
 }
 
 type RouterResolveArgs<
@@ -51,6 +52,7 @@ export function createRouterResolve<const TRoutes extends Routes>(routes: TRoute
     const url = assembleUrl(match, {
       params,
       query: options.query,
+      hash: options.hash,
     })
 
     return url

src/services/createRouterRoute.ts

@@ -13,6 +13,7 @@ export type RouterRoute<TRoute extends ResolvedRoute = ResolvedRoute> = Readonly
   matches: TRoute['matches'],
   state: TRoute['state'],
   query: ResolvedRouteQuery,
+  hash: TRoute['hash'],
   params: Writable<TRoute['params']>,
   update: RouteUpdate<TRoute>,
 }>
@@ -40,13 +41,14 @@ export function createRouterRoute<TRoute extends ResolvedRoute>(route: TRoute, p
     return push(route.name, params, maybeOptions)
   }
 
-  const { matched, matches, name, query, params, state } = toRefs(route)
+  const { matched, matches, name, query, params, state, hash } = toRefs(route)
 
   const routerRoute: RouterRoute<TRoute> = reactive({
     matched,
     matches,
     state,
     query,
+    hash,
     params,
     name,
     update,

src/services/getResolvedRouteForUrl.browser.spec.ts

@@ -214,4 +214,15 @@ test('given state that matches state params, returns state', () => {
   const response = getResolvedRouteForUrl(routes, '/foo', { foo: 'true', bar: 'abc' })
 
   expect(response?.state).toMatchObject({ foo: true, bar: 'abc' })
+})
+
+test('given a route with hash returns hash property', () => {
+  const route = createRoute({
+    name: 'route',
+    path: '/foo',
+    component,
+  })
+  const response = getResolvedRouteForUrl([route], '/foo#bar')
+
+  expect(response?.hash).toBe('#bar')
 })

src/services/getResolvedRouteForUrl.ts

@@ -27,7 +27,7 @@ export function getResolvedRouteForUrl(routes: Routes, url: string, state?: unkn
   }
 
   const [route] = matches
-  const { search } = createMaybeRelativeUrl(url)
+  const { search, hash } = createMaybeRelativeUrl(url)
 
   return {
     matched: route.matched,
@@ -36,5 +36,6 @@ export function getResolvedRouteForUrl(routes: Routes, url: string, state?: unkn
     query: createResolvedRouteQuery(search),
     params: getRouteParamValues(route, url),
     state: getStateValues(route.state, state),
+    hash,
   }
 }

src/services/urlAssembly.spec.ts

@@ -358,4 +358,15 @@ describe('host params', () => {
 
     expect(url).toBe('ABC.kitbag.dev/')
   })
+})
+
+test('given route with hash, returns url with hash value interpolated', () => {
+  const route = createRoute({
+    name: 'simple',
+    path: '/',
+  })
+
+  const url = assembleUrl(route, { hash: 'foo' })
+
+  expect(url).toBe('/#foo')
 })

src/services/urlAssembly.ts

@@ -11,6 +11,7 @@ import { Route } from '@/types/route'
 type AssembleUrlOptions = {
   params?: Record<string, unknown>,
   query?: Record<string, string>,
+  hash?: string,
 }
 
 export function assembleUrl(route: Route, options: AssembleUrlOptions = {}): string {
@@ -20,7 +21,10 @@ export function assembleUrl(route: Route, options: AssembleUrlOptions = {}): str
   const pathWithParamsSet = assemblePathParamValues(route.path, paramValues)
   const queryWithParamsSet = assembleQueryParamValues(route.query, paramValues)
 
-  return withQuery(`${hostWithParamsSet}${pathWithParamsSet}`, queryWithParamsSet, queryValues)
+  const url = withQuery(`${hostWithParamsSet}${pathWithParamsSet}`, queryWithParamsSet, queryValues)
+  const hash = options.hash ? `#${options.hash.replace(/^#/, '')}` : ''
+
+  return `${url}${hash}`
 }
 
 function assembleHostParamValues(host: Host, paramValues: Record<string, unknown>): string {

src/types/resolved.ts

@@ -25,6 +25,10 @@ export type ResolvedRoute<TRoute extends Route = Route> = Readonly<{
    * Accessor for query string values from user in the current browser location.
   */
   query: ResolvedRouteQuery,
+  /**
+   * Hash value of the route.
+  */
+  hash?: string,
   /**
    * Key value pair for route params, values will be the user provided value from current browser location.
   */

src/types/routerPush.ts

@@ -9,6 +9,7 @@ export type RouterPushOptions<
   TState = unknown
 > = {
   query?: Record<string, string>,
+  hash?: string,
   replace?: boolean,
   state?: Partial<TState>,
 }

src/types/routerReplace.ts

@@ -9,6 +9,7 @@ export type RouterReplaceOptions<
   TState = unknown
 > = {
   query?: Record<string, string>,
+  hash?: string,
   state?: Partial<TState>,
 }