Added RouterOutlet for displaying the correct view depending on the current route

Author: erenworld

src/index.js

@@ -1,4 +1,9 @@
+import { RouterLink } from './routing/router-component.js';
+
 export { createApp } from './app';
 export { DOM_TYPES, hString, hElement, hFragment, hSlot } from './h';
 export { defineComponent } from './components/component';
 export { nextTick } from './next-tick.js'
+export { RouterLink, RouterOutlet } from './routing/router-component.js'
+export { HashRouter } from './routing/hash-router.js'
+

src/routing/router-component.js

@@ -1,6 +1,7 @@
 import { defineComponent } from '../components/component'
 import { hElement, hSlot } from '../h'
 
+// <RouterLink to="/profil">profil</RouterLink>
 export const RouterLink = defineComponent({
     render() {
         const { to } = this.props
@@ -16,3 +17,37 @@ export const RouterLink = defineComponent({
         [hSlot()])
     }
 })
+
+export const RouterOutlet = defineComponent({
+    state() {
+        return {
+            matchedRoute: null,
+            subscription: null,
+        }
+    },
+
+    onMounted() {
+        const subscription = this.appContext.router.subscribe(({ to }) => {
+            this.handleRouteChange(to);
+        })
+
+        this.updateState({ subscription });
+    },
+
+    onUnmounted() {
+        const { subscription } = this.state;
+        this.appContext.router.unsubscribe(subscription);
+    },
+
+    handleRouteChange(matchedRoute) {
+        this.updateState({ matchedRoute });
+    },
+
+    render() {
+        const { matchedRoute } = this.state;
+
+        return hElement('div', { id: 'router-outlet' }, [
+            matchedRoute ? hElement(matchedRoute.component) : null
+        ])
+    },
+})