feat(element): router mixin

Co-authored-by: S. Amir Mohammad Najafi <[email protected]>

ui/element/src/index.ts

@@ -4,6 +4,7 @@ export * from './dummy-element.js';
 export * from './smart-element.js';
 
 export * from './mixins/localize.js';
+export * from './mixins/router.js';
 export * from './mixins/direction.js';
 export * from './mixins/logging.js';
 export * from './mixins/signal.js';

ui/element/src/mixins/localize.ts

@@ -19,7 +19,7 @@ export function LocalizeMixin<T extends Constructor<SignalMixinInterface>>(
     }
 
     /**
-     * On localization resource context updated.
+     * On localization resource context update.
      */
     protected _l18eContextUpdated(l18eContext: L18eContext): void {
       this._logger.logMethodArgs('_l18eContextUpdated', l18eContext.meta);

ui/element/src/mixins/router.ts

@@ -0,0 +1,29 @@
+import {routeContextConsumer, type RouteContext} from '@alwatr/router';
+
+import type {SignalMixinInterface} from './signal.js';
+import type {Constructor} from '@alwatr/type';
+
+export declare class RouterMixinInterface extends SignalMixinInterface {}
+
+export function RouterMixin<T extends Constructor<SignalMixinInterface>>(
+    superClass: T,
+): Constructor<RouterMixinInterface> & T {
+  class RouterMixinClass extends superClass {
+    override connectedCallback(): void {
+      super.connectedCallback();
+      this._signalListenerList.push(
+          routeContextConsumer.subscribe(this._routeContextUpdated),
+      );
+    }
+
+    /**
+     * On route context update.
+     */
+    protected _routeContextUpdated(routeContext: RouteContext): void {
+      this._logger.logMethodArgs('_routeContextUpdated', routeContext);
+      this.requestUpdate();
+    }
+  }
+
+  return RouterMixinClass as unknown as Constructor<RouterMixinInterface> & T;
+}