@brightspace-ui/labs 2.43.1 → 2.44.1

package/package.json

@@ -114,5 +114,5 @@
     "resize-observer-polyfill": "^1",
     "webvtt-parser": "^2"
   },
-  "version": "2.43.1"
+  "version": "2.44.1"
 }

package/src/utilities/router/README.md

@@ -227,6 +227,17 @@ describe('Page Routing', () => {
 });
 ```
 
+## Router Navigation Hooks
+
+If you want to execute code that doesn't belong to a web component before or after navigation, you can use the RouterHooks class. This is helpful for data models that care about changes in navigation, like a module responsible for timing page loads.
+
+```
+import { RouterHooks } from '@brightspace-ui/labs/utilities/lit-router';
+
+RouterHooks.registerPreNavigate((context) => { console.log('this runs before we navigate', context);});
+RouterHooks.registerPostNavigate((context) => { console.log('post', context);});
+```
+
 ## Known Issues
 
 ### Route order inversion issue

package/src/utilities/router/index.js

@@ -1,2 +1,2 @@
-export { ContextReactor, redirect, navigate, registerRoutes, RouterTesting } from './router.js';
+export { ContextReactor, redirect, navigate, registerRoutes, RouterTesting, RouterHooks } from './router.js';
 export { RouteReactor } from './RouteReactor.js';

package/src/utilities/router/router.js

@@ -85,6 +85,37 @@ const _registerRoutes = routes => {
 	});
 };
 
+export class RouterHooks {
+	static registerPreNavigate = (callback) => {
+		RouterHooks.preNavigate.push(callback);
+	};
+
+	static registerPostNavigate = (callback) => {
+		RouterHooks.postNavigate.push(callback);
+	};
+
+	static reset() {
+		this.preNavigate = [];
+		this.postNavigate = [];
+	};
+}
+
+RouterHooks.reset();
+
+const _registerPreNavigateHooks = () => {
+	activePage('*', (context, next) => {
+		RouterHooks.preNavigate.forEach(h => h(context));
+		next();
+	});
+};
+
+const _registerPostNavigateHooks = () => {
+	activePage('*', (context, next) => {
+		RouterHooks.postNavigate.forEach(h => h(context));
+		next();
+	});
+};
+
 const configure = options => {
 	if (options && options.customPage) activePage = page.create();
 	if (options && options.basePath) activePage.base(options.basePath);
@@ -110,7 +141,9 @@ export const registerRoutes = (routes, options) => {
 		});
 		next();
 	});
+	_registerPreNavigateHooks();
 	_registerRoutes(routes);
+	_registerPostNavigateHooks();
 	_storeCtx();
 };
 
@@ -175,6 +208,7 @@ export const RouterTesting = {
 		activePage = page.create();
 		hasRegistered = false;
 		ContextReactor.reset();
+		RouterHooks.reset();
 	},
 
 	restart: () => {