From e4e41197b98bf92ffba540504fb694bc9d2d6c05 Mon Sep 17 00:00:00 2001
From: Jan Andrle <andrle.jan@centrum.cz>
Date: Wed, 20 May 2026 14:40:47 +0200
Subject: [PATCH] :bug: fixes routing

---
 src/app-episodes/:id/index.css.ts |  9 +++++++++
 src/app-episodes/:id/index.ts     | 14 ++++++++++++++
 src/app-episodes/:id/routes.ts    | 16 ++++++++++++++++
 src/app-episodes/index.ts         |  9 +++++----
 src/app-episodes/routes.ts        | 28 +++++++++++++++-------------
 src/core/route.ts                 | 13 +++++++++++++
 src/index.ts                      | 11 ++++++-----
 7 files changed, 78 insertions(+), 22 deletions(-)
 create mode 100644 src/app-episodes/:id/index.css.ts
 create mode 100644 src/app-episodes/:id/index.ts
 create mode 100644 src/app-episodes/:id/routes.ts
 create mode 100644 src/core/route.ts

diff --git a/src/app-episodes/:id/index.css.ts b/src/app-episodes/:id/index.css.ts
new file mode 100644
index 0000000..5c1060e
--- /dev/null
+++ b/src/app-episodes/:id/index.css.ts
@@ -0,0 +1,9 @@
+import { css } from "lit";
+export const styles = css`
+	:host {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: flex-start;
+	}
+`;
diff --git a/src/app-episodes/:id/index.ts b/src/app-episodes/:id/index.ts
new file mode 100644
index 0000000..a407c0a
--- /dev/null
+++ b/src/app-episodes/:id/index.ts
@@ -0,0 +1,14 @@
+import { LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { styles } from "./index.css.js";
+
+@customElement("app-episode")
+export class AppEpisode extends LitElement {
+	static override styles = styles;
+	@property({ type: String }) override id = "";
+	override render() {
+		return html`
+			Episode ${this.id}
+		`;
+	}
+}
diff --git a/src/app-episodes/:id/routes.ts b/src/app-episodes/:id/routes.ts
new file mode 100644
index 0000000..f5d5bb6
--- /dev/null
+++ b/src/app-episodes/:id/routes.ts
@@ -0,0 +1,16 @@
+import { route } from "../../core/route.js";
+import { html } from "lit";
+
+export const path = "/episodes" as const;
+export const routes = route(
+	{
+		path: "/episodes/:id",
+		async enter() {
+			await import("./index.js");
+			return true;
+		},
+		render({ id }){
+			return html`<app-episode id=${id}></app-episode>`;
+		},
+	},
+);
diff --git a/src/app-episodes/index.ts b/src/app-episodes/index.ts
index 9df57ba..6a995b6 100644
--- a/src/app-episodes/index.ts
+++ b/src/app-episodes/index.ts
@@ -1,15 +1,16 @@
 import { LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { customElement } from "lit/decorators.js";
 import { styles } from "./index.css.js";
 
-const logo = import.meta.resolve("../../../assets/logo.svg");
+const logo = new URL("../../../assets/logo.svg", import.meta.url);
 
 @customElement("app-episodes")
 export class AppEpisodes extends LitElement {
-	static styles = styles;
-	render() {
+	static override styles = styles;
+	override render() {
 		return html`
 			<div class="logo"><img alt="open-wc logo" src=${logo} /></div>
+			<a href="/episodes/1">Episode 1</a>
 		`;
 	}
 }
diff --git a/src/app-episodes/routes.ts b/src/app-episodes/routes.ts
index a0cd12f..9f98603 100644
--- a/src/app-episodes/routes.ts
+++ b/src/app-episodes/routes.ts
@@ -1,16 +1,18 @@
-import type { RouteConfig } from "@lit-labs/router";
+import { route } from "../core/route.js";
+import { routes as routeEpisode } from "./:id/routes.js";
 import { html } from "lit";
 
-export const route = {
-	path: "/episodes" as const,
-	async enter() {
-		await import("./index.js");
-		return true;
+export const path = "/episodes" as const;
+export const routes = route(
+	{
+		path,
+		async enter() {
+			await import("./index.js");
+			return true;
+		},
+		render(){
+			return html`<app-episodes></app-episodes>`;
+		},
 	},
-	render(){
-		return html`<app-episodes></app-episodes>`;
-	},
-};
-export default [
-	route,
-] as RouteConfig[];
+	routeEpisode,
+);
diff --git a/src/core/route.ts b/src/core/route.ts
new file mode 100644
index 0000000..b72d963
--- /dev/null
+++ b/src/core/route.ts
@@ -0,0 +1,13 @@
+import type { PathRouteConfig } from "@lit-labs/router";
+
+export function route(...routes: (PathRouteConfig|PathRouteConfig[])[]): PathRouteConfig[] {
+	return routes.flatMap(function process(route){
+		if (Array.isArray(route)) // already processed
+			return route;
+		const { path, ...rest }= route;
+		return [
+			{ path, ...rest },
+			{ path: path + "/", rest },
+		];
+	});
+}
diff --git a/src/index.ts b/src/index.ts
index a625ec3..34e39be 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,17 +1,18 @@
 import { LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { customElement } from "lit/decorators.js";
 import { styles } from "./index.css.js";
 import { Router } from "@lit-labs/router";
-import { default as routesEpisodes, route as routeEpisodes } from "./app-episodes/routes.js";
+import * as routeEpisodes from "./app-episodes/routes.js";
 
 @customElement("app-cfpodcasts")
 export class AppCfpodcasts extends LitElement {
-	static styles = styles;
+	static override styles = styles;
 	private _routes = new Router(this, [
 		{ path: "/", render: () => html`Hello world` },
-		...routesEpisodes
+		...routeEpisodes.routes,
 	]);
-	render() {
+	override render() {
+		console.log(this._routes);
 		return html`
 			<main>${this._routes.outlet()}</main>
 			<nav>