feat(demo/router): enhance demo

Alwatr · Jan 30, 2023 · 3595b83 · 3595b83
1 parent 01fa523
commit 3595b83
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/demo/router/index.html b/demo/router/index.html
@@ -15,6 +15,9 @@
   <body>
     <h3>Check the console</h3>
     <ol>
+      <ul>
+        <a href="/">Root</a>
+      </ul>
       <ul>
         <a href="/home">Home</a>
       </ul>
@@ -27,13 +30,19 @@ <h3>Check the console</h3>
       <ul>
         <a href="/product/1">Product 1</a>
       </ul>
+      <ul>
+        <a href="/product/2?color=red&size=big">Product 2 red big</a>
+      </ul>
       <ul>
         <a href="/contact">Contact</a>
       </ul>
+      <ul>
+        <a href="/junk">Junk (404)</a>
+      </ul>
     </ol>
 
     <div class="render"></div>
 
-    <textarea cols="50" rows="10"></textarea>
+    <textarea cols="70" rows="20"></textarea>
   </body>
 </html>
diff --git a/demo/router/index.ts b/demo/router/index.ts
@@ -1,13 +1,14 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import {RouteContext, routerOutlet, RoutesConfig, routeContextConsumer} from '@alwatr/router';
+import {routerOutlet, routeContextConsumer, redirect, type RouteContext, type RoutesConfig} from '@alwatr/router';
 
 const routes: RoutesConfig = {
-  routeId: (route: RouteContext): string | undefined => route.sectionList[0]?.toString(),
+  routeId: (routeContext: RouteContext): string | undefined => routeContext.sectionList[0]?.toString(),
   templates: {
     'home': () => '<h1>Home Page</h1>',
     '_404': () => '<h1>404 Not Found!</h1>',
     'about': () => '<h1>About Page</h1>',
-    'product-list': () => '<h1>Product List ...</h1>',
+    'product-list': () => '<h1>Product List</h1>',
+    'product': (routeContext) => `<h1>Product ${routeContext.sectionList[1]}</h1>`,
     'contact': () => '<h1>Product Page</h1>',
   },
 };
@@ -25,3 +26,5 @@ function render(): void {
  * Request update in route change.
  */
 routeContextConsumer.subscribe(render);
+
+redirect('/');