🐛 fixes routing

bs/start

@@ -9,15 +9,17 @@ set -eo pipefail # this can be harmful, see https://www.youtube.com/watch?v=4Jo3
 # depends on
 declare -r server='node_modules/.bin/web-dev-server'
 declare -r lint='bs/lint'
-declare -r index='index.html'
+declare -r server_config='web-dev-server.config.js'
 
 help(){
 	if ! isHelp "${@}"; then return 0; fi
 	echoReadmeInfo
 	cat <<-EOF
-	Options:
 	./src		Starts the development server (default)
 	./dist		Starts the production server
+
+	Defaults:
+	See server config file: '$server_config'
 EOF
 	$server --help
 	exit 0
@@ -26,12 +28,12 @@ main(){
 	help "${@}"
 
 	local -r target="${1:-./src}" # ./src or ./dist
-	if [[ "$target" == './dist' ]]; then
+	if [[ "$target" =~ 'dist' ]]; then
 		# console warns because of config file, use npx serve?
-		$server --root-dir "$target" --app-index $index --open
+		$server "${@}"
 	else
 		$lint --watch --preserveWatchOutput &
-		$server &
+		$server "${@}" &
 		wait
 	fi
 }

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

tsconfig.json

@@ -1,21 +1,38 @@
 {
-  "compilerOptions": {
+	"compilerOptions": {
-    "target": "es2021",
+		"verbatimModuleSyntax": true,
-    "module": "NodeNext",
+		"noEmitOnError": true,
-    "moduleResolution": "NodeNext",
+		"target": "es2021",
-    "noEmitOnError": true,
+		"skipLibCheck": true,
-    "lib": ["es2021", "dom", "DOM.Iterable"],
+		"module": "NodeNext",
-    "strict": true,
+		"moduleResolution": "NodeNext",
-    "allowSyntheticDefaultImports": true,
+		"isolatedModules": true,
-    "experimentalDecorators": true,
+
-    "importHelpers": true,
+		"strict": true,
-    "outDir": "out-tsc",
+		"strictBindCallApply": true,
-    "sourceMap": true,
+		"noUnusedLocals": true,
-    "inlineSources": true,
+		"noUnusedParameters": true,
-    "rootDir": "./",
+		"noUncheckedSideEffectImports": true,
-    "incremental": true,
+		"allowUnreachableCode": false,
-    "skipLibCheck": true,
+		"noUncheckedIndexedAccess": true,
-	"types": ["mocha"]
+		"noPropertyAccessFromIndexSignature": true,
-  },
+		"erasableSyntaxOnly": true,
-  "include": ["**/*.ts"]
+		"noImplicitOverride": true,
+		"allowSyntheticDefaultImports": true,
+		"forceConsistentCasingInFileNames": true,
+		"useDefineForClassFields": false,
+		"experimentalDecorators": true,
+		"importHelpers": true,
+
+		"noErrorTruncation": false,
+
+		"outDir": "out-tsc",
+		"sourceMap": true,
+		"inlineSources": true,
+		"rootDir": "./",
+		"incremental": true,
+		"types": ["mocha"],
+		"lib": ["es2021", "dom", "DOM.Iterable"]
+	},
+	"include": ["**/*.ts"]
 }

web-dev-server.config.js

@@ -1,21 +1,27 @@
 // import { hmrPlugin, presets } from "@open-wc/dev-server-hmr";
 
-/** Use Hot Module replacement by adding --hmr to the start command */
+/** Use Hot Module replacement by adding --watch to the start command */
-const hmr = process.argv.includes("--hmr");
+//const hmr = process.argv.includes("--watch");
+const [ mode ] = process.argv.slice(2);
+const target = mode === "src" // OR "dist"
+	? {
+		rootDir: ".",
+		appIndex: "./index.html",
+	}
+	: {
+		rootDir: "./dist",
+		appIndex: "./dist/index.html",
+	};
 
 export default /** @type {import("@web/dev-server").DevServerConfig} */ ({
-	open: "/",
+	open: "/", // SPA routing
-	watch: !hmr,
+	nodeResolve: { // Resolve bare module imports
-	/** Resolve bare module imports */
-	nodeResolve: {
 		exportConditions: ["browser", "development"],
 	},
 
-	/** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+	// esbuildTarget: "auto" // Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-	// esbuildTarget: "auto"
 
-	/** Set appIndex to enable SPA routing */
+	...target,
-	appIndex: "./index.html",
 
 	plugins: [
 		/** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */