feat(navigation): onNavigate listener

release-npm

demo/index.tsx

@@ -1,5 +1,5 @@
 import { render } from 'epic-jsx'
-import { Page, addPage, back, configure, forward, go, initial } from 'epic-router'
+import { Page, addPage, back, configure, forward, go, initial, onNavigate } from 'epic-router'
 import { connect } from 'epic-state/connect'
 import { Exmpl } from 'exmpl'
 import { Footer } from './Footer'
@@ -10,6 +10,10 @@ import { Overview } from './page/Overview'
 // TODO not working with globally registered plugin.
 // plugin(connect)
 
+onNavigate((route, parameters, initial) => {
+  console.log('onNavigate:', route, parameters.id, initial)
+})
+
 const { router } = configure<{ id: number }>('overview', undefined, undefined, connect)
 
 // TODO epic-jsx bug, link will not be removed when a Fragment is used here instead of the <div>

index.tsx

@@ -4,7 +4,7 @@ import { create } from 'logua'
 import queryString from 'query-string'
 import type { ComponentPropsWithoutRef, JSX, MouseEventHandler, ReactElement } from 'react'
 import join from 'url-join'
-import type { PageComponent, Pages, Parameters, RouterState } from './types'
+import type { NavigateListener, PageComponent, Pages, Parameters, RouterState } from './types'
 
 export const log = create('epic-router', 'yellow')
 
@@ -24,6 +24,18 @@ export const history = createHistory()
 export const getRouter = () => router
 export type WithRouter<T extends object> = { router: { route: string; parameters: T } }
 
+const navigateListeners: NavigateListener[] = []
+
+export function onNavigate(listener: NavigateListener) {
+  navigateListeners.push(listener)
+}
+
+function notifyNavigateListeners(initial = false) {
+  for (const listener of navigateListeners) {
+    listener(router.route, router.parameters, initial)
+  }
+}
+
 const removeSlashRegex = /^\/*/
 const removeLeadingSlash = (path: string) => path.replace(removeSlashRegex, '')
 
@@ -155,6 +167,8 @@ export function configure<T extends Parameters>(initialRoute?: string, homeRoute
 
   const removeListener = history.listen(router.listener)
 
+  notifyNavigateListeners(true)
+
   return { router: router as RouterState<T>, removeListener }
 }
 
@@ -194,14 +208,18 @@ export function go(route: string, parameters: Parameters = {}, historyState: obj
     },
     historyState,
   )
+
+  notifyNavigateListeners()
 }
 
 export function back() {
   history.back()
+  notifyNavigateListeners()
 }
 
 export function forward() {
   history.forward()
+  notifyNavigateListeners()
 }
 
 // <a href="/" onClick={click('overview')}>Homepage</a>
@@ -215,6 +233,7 @@ export function click(route: string, parameters?: Parameters) {
 export function initial() {
   router.route = getInitialRoute()
   history.push(writePath(router.route))
+  notifyNavigateListeners()
 }
 
 export function reset() {

types.ts

@@ -16,3 +16,5 @@ export type RouterState<T extends Parameters> = {
   plugin?: typeof preactConnect
   listener: Listener
 }
+
+export type NavigateListener = (route: string, parameters: Parameters, initial: boolean) => void