diff --git a/bs/build b/bs/build index 15a8875..8b43cab 100755 --- a/bs/build +++ b/bs/build @@ -5,6 +5,7 @@ set -eo pipefail # this can be harmful, see https://www.youtube.com/watch?v=4Jo3 exit 1; } # depends on +declare -r lint='bs/lint' declare -r rollup='node_modules/.bin/rollup' declare -r analyze='bs/analyze' declare -r config='rollup.config.js' @@ -20,6 +21,7 @@ help(){ main(){ help "${@}" + $lint rm -rf "$dist" $rollup -c $config "${@}" $analyze --exclude "$dist" diff --git a/bs/hooks-npm/postinstall b/bs/hooks-npm/postinstall new file mode 100755 index 0000000..2253154 --- /dev/null +++ b/bs/hooks-npm/postinstall @@ -0,0 +1,12 @@ +#!/bin/env bash +set -eo pipefail # this can be harmful, see https://www.youtube.com/watch?v=4Jo3Ml53kvc +. bs/.common || { + echo 'Please run this script from the project root directory' >&2; + exit 1; +} +declare -r tmp=/tmp/lit-router-extended +declare -r pkg=./node_modules/@lit-labs/router + +git clone git@github.com:klauss194/lit-router-extended.git --depth 1 "$tmp" +cp "$tmp"/* "$pkg" +rm -rf "$tmp" diff --git a/examples/data/podcasts.opml b/examples/data/podcasts.opml index 7ebbcca..5bd8cbf 100644 --- a/examples/data/podcasts.opml +++ b/examples/data/podcasts.opml @@ -1,13 +1,14 @@ - Tue, 21 Apr 2026 11:06:35 GMT + Fri, 24 Apr 2026 13:48:25 GMT jaa-podcasty subscriptions in CommaFeed + diff --git a/index.html b/index.html index 0f38257..ec6ed8e 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@ - + diff --git a/package-lock.json b/package-lock.json index d636e00..42cac83 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "license": "MIT", "dependencies": { + "@lit-labs/router": "^0.1.4", "lit": "~3.3" }, "devDependencies": { @@ -2201,6 +2202,15 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@lit-labs/router": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@lit-labs/router/-/router-0.1.4.tgz", + "integrity": "sha512-xURH6fOPE0MYfXa1nyl+qTIhZRVWkFa2oggTRodKAI2q/HjA2Va7HEKe7fMm8DdnFE+zEI2aUGnStawKpVh3lQ==", + "license": "BSD-3-Clause", + "dependencies": { + "lit": "^2.0.0 || ^3.0.0" + } + }, "node_modules/@lit-labs/ssr-dom-shim": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.5.1.tgz", @@ -2435,9 +2445,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2452,9 +2459,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -2469,9 +2473,6 @@ "ppc64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2486,9 +2487,6 @@ "riscv64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2503,9 +2501,6 @@ "riscv64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -2520,9 +2515,6 @@ "s390x" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2537,9 +2529,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2554,9 +2543,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -2897,9 +2883,6 @@ "arm" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2914,9 +2897,6 @@ "arm" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -2931,9 +2911,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2948,9 +2925,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -2965,9 +2939,6 @@ "loong64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2982,9 +2953,6 @@ "loong64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -2999,9 +2967,6 @@ "ppc64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -3016,9 +2981,6 @@ "ppc64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -3033,9 +2995,6 @@ "riscv64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -3050,9 +3009,6 @@ "riscv64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -3067,9 +3023,6 @@ "s390x" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -3084,9 +3037,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -3101,9 +3051,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -7961,9 +7908,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -7985,9 +7929,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -8009,9 +7950,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -8033,9 +7971,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MPL-2.0", "optional": true, "os": [ diff --git a/package.json b/package.json index d5ab964..bcb7ac9 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "start": "bs/start" }, "dependencies": { + "@lit-labs/router": "^0.1.4", "lit": "~3.3" }, "devDependencies": { diff --git a/src/app-episodes/index.css.ts b/src/app-episodes/index.css.ts new file mode 100644 index 0000000..5c1060e --- /dev/null +++ b/src/app-episodes/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/index.ts b/src/app-episodes/index.ts new file mode 100644 index 0000000..9df57ba --- /dev/null +++ b/src/app-episodes/index.ts @@ -0,0 +1,15 @@ +import { LitElement, html } from "lit"; +import { property, customElement } from "lit/decorators.js"; +import { styles } from "./index.css.js"; + +const logo = import.meta.resolve("../../../assets/logo.svg"); + +@customElement("app-episodes") +export class AppEpisodes extends LitElement { + static styles = styles; + render() { + return html` + + `; + } +} diff --git a/src/app-episodes/routes.ts b/src/app-episodes/routes.ts new file mode 100644 index 0000000..dfd3367 --- /dev/null +++ b/src/app-episodes/routes.ts @@ -0,0 +1,16 @@ +import type { RouteConfig } from "@lit-labs/router"; +import { html } from "lit"; + +export const route = { + path: "/#/episodes", + async enter() { + await import("./index.js"); + return true; + }, + render(){ + return html``; + }, +}; +export default [ + route, +] as RouteConfig[]; diff --git a/src/app-index.css.ts b/src/app-index.css.ts deleted file mode 100644 index 7534408..0000000 --- a/src/app-index.css.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { css } from "lit"; -export const styles = css` - :host { - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - font-size: calc(10px + 2vmin); - color: #1a2b42; - max-width: 960px; - margin: 0 auto; - text-align: center; - background-color: var(--app-cfpodcasts-background-color); - } - - main { - flex-grow: 1; - } - - .logo { - margin-top: 36px; - } - - .app-footer { - font-size: calc(12px + 0.5vmin); - align-items: center; - } - - .app-footer a { - margin-left: 5px; - } -`; diff --git a/src/app-index.ts b/src/app-index.ts deleted file mode 100644 index eb4797f..0000000 --- a/src/app-index.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { LitElement, html } from "lit"; -import { property, customElement } from "lit/decorators.js"; -import { styles } from "./app-index.css.js"; - -const logo = import.meta.resolve("../../assets/logo.svg"); - -@customElement("app-cfpodcasts") -export class AppCfpodcasts extends LitElement { - @property({ type: String }) header = "My app"; - static styles = styles; - render() { - return html` -
- -

${this.header}

- -

Edit src/AppCfpodcasts.ts and save to reload.

- - Code examples - -
- -

- 🚽 Made with love by - open-wc. -

- `; - } -} diff --git a/src/index.css.ts b/src/index.css.ts new file mode 100644 index 0000000..8301db1 --- /dev/null +++ b/src/index.css.ts @@ -0,0 +1,20 @@ +import { css } from "lit"; +export const styles = css` + :host { + height: 100vh; + height: 100dvh; + display: grid; + grid-template-areas: + "main" + "footer"; + grid-template-rows: auto 2.5ch; + } + + main { + grid-area: main; + } + + nav { + grid-area: footer; + } +`; diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..fe13061 --- /dev/null +++ b/src/index.ts @@ -0,0 +1,23 @@ +import { LitElement, html } from "lit"; +import { property, 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"; + +@customElement("app-cfpodcasts") +export class AppCfpodcasts extends LitElement { + static styles = styles; + private _routes = new Router(this, [ + { path: "/", render: () => html`Hello world` }, + ...routesEpisodes + ]); + render() { + return html` +
${this._routes.outlet()}
+ + `; + } +} diff --git a/test/app-cfpodcasts.test.ts b/test/app-cfpodcasts.test.ts index 6e6074e..8f9626b 100644 --- a/test/app-cfpodcasts.test.ts +++ b/test/app-cfpodcasts.test.ts @@ -1,8 +1,8 @@ import { html } from 'lit'; import { fixture, expect } from '@open-wc/testing'; -import type { AppCfpodcasts } from '../src/app-index.js'; -import '../src/app-cfpodcasts.js'; +import type { AppCfpodcasts } from '../src/index.js'; +import '../src/index.js'; describe('AppCfpodcasts', () => { let element: AppCfpodcasts; diff --git a/tsconfig.json b/tsconfig.json index 153ed62..432e895 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,7 +6,6 @@ "noEmitOnError": true, "lib": ["es2021", "dom", "DOM.Iterable"], "strict": true, - "esModuleInterop": false, "allowSyntheticDefaultImports": true, "experimentalDecorators": true, "importHelpers": true, @@ -15,7 +14,8 @@ "inlineSources": true, "rootDir": "./", "incremental": true, - "skipLibCheck": true + "skipLibCheck": true, + "types": ["mocha"] }, "include": ["**/*.ts"] }