https://github.com/nmnmcc/litro
A simple router for lit.
https://github.com/nmnmcc/litro
easy-to-use javascript library lit lit-element lit-html npm router tit typescript web-components
Last synced: 2 months ago
JSON representation
A simple router for lit.
- Host: GitHub
- URL: https://github.com/nmnmcc/litro
- Owner: NMNMCC
- Created: 2024-05-08T03:48:24.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-25T14:29:09.000Z (about 2 years ago)
- Last Synced: 2025-03-22T12:29:33.917Z (about 1 year ago)
- Topics: easy-to-use, javascript, library, lit, lit-element, lit-html, npm, router, tit, typescript, web-components
- Language: TypeScript
- Homepage:
- Size: 84 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: Changelog.md
Awesome Lists containing this project
README
# litro (`lit-litro`)
A bland and boring router and styler for lit.
- [x] router
- [ ] styler
## Install
```sh
pnpm i lit-litro
```
## Usage
### Router
1. (You still need to) `import` all the pages and templates, litro can't help you with this
2. Replace `@customElement` to `@page` or `@template`
3. Add `` your entry file, for example `index.html` if you are using Vite.
#### Example
```html
import "lit-litro";
import.meta.glob("/**/*.ts", { eager: true });
```
```ts
// src/pages/my-page.ts
import { LitElement, html } from "lit";
import { page } from "lit-litro/router";
@page("/", "hello-litro")
export class MyPage extends LitElement {
// ...
}
```
```ts
// src/pages/my-template.ts
import { LitElement, html } from "lit";
import { template } from "lit-litro/router";
@template(0, (path) => path.includes("goodbye") , "are-you-joking")
export class MyTemplate extends LitElement {
// ...
}
```
### Styler
*Make lit follow CSS's scoping rules?*
*I still have no clue about this...*