🐛 fixes routing

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;
+	}
+`;

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}
+		`;
+	}
+}

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>`;
+		},
+	},
+);

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;
+	static override styles = styles;
-	render() {
+	override render() {
 		return html`
 			<div class="logo"><img alt="open-wc logo" src=${logo} /></div>
+			<a href="/episodes/1">Episode 1</a>
 		`;
 	}
 }

src/app-episodes/routes.ts

@@ -1,8 +1,11 @@
-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 = {
+export const path = "/episodes" as const;
-	path: "/episodes" as const,
+export const routes = route(
+	{
+		path,
 		async enter() {
 			await import("./index.js");
 			return true;
@@ -10,7 +13,6 @@ export const route = {
 		render(){
 			return html`<app-episodes></app-episodes>`;
 		},
-};
+	},
-export default [
+	routeEpisode,
-	route,
+);
-] as RouteConfig[];

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 },
+		];
+	});
+}

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>