98 lines
1.9 KiB
Markdown
98 lines
1.9 KiB
Markdown
# zulip
|
|
|
|
A minimal, no-build web app kit using only Lit-based web components via importmaps.
|
|
|
|
|
|
## Quick Start Example
|
|
|
|
### 1. Define a Component
|
|
|
|
```javascript
|
|
// components/counter.js
|
|
import { LitElement, html, css } from 'lit'
|
|
|
|
class Counter extends LitElement {
|
|
static properties = {
|
|
count: { type: Number, state: true }
|
|
}
|
|
|
|
constructor() {
|
|
super()
|
|
this.count = 0
|
|
}
|
|
|
|
static styles = css`
|
|
button { padding: 1rem; font-size: 1.2rem; }
|
|
`
|
|
|
|
render() {
|
|
return html`
|
|
<div>
|
|
<p>Count: ${this.count}</p>
|
|
<button @click=${() => this.count++}>
|
|
Increment
|
|
</button>
|
|
</div>
|
|
`
|
|
}
|
|
}
|
|
|
|
customElements.define('my-counter', Counter)
|
|
```
|
|
|
|
### 2. Use in App root (or other composition node)
|
|
|
|
```js
|
|
import "./my-counter.js";
|
|
|
|
class AppRoot extends LitElement {
|
|
...
|
|
render() {
|
|
return html`<my-counter .count=${0}></my-counter>`;
|
|
}
|
|
}
|
|
```
|
|
|
|
### 3. Define Data Flows
|
|
|
|
#### Parent-to-Child (Props)
|
|
|
|
```javascript
|
|
// Parent passes data down
|
|
html`<child-component .items=${this.items}></child-component>`
|
|
|
|
// Child receives via properties
|
|
static properties = {
|
|
items: { type: Array }
|
|
}
|
|
```
|
|
|
|
#### Child-to-Parent (Events)
|
|
|
|
```javascript
|
|
// Child emits event
|
|
this.dispatchEvent(new CustomEvent('add-item', {
|
|
detail: { item: newItem },
|
|
bubbles: true,
|
|
composed: true
|
|
}))
|
|
|
|
// Parent listens
|
|
html`<child-component @add-item=${(e) => this.handleAdd(e.detail.item)}></child-component>`
|
|
```
|
|
|
|
## Benefits Over TSX
|
|
|
|
1. **No build step** - Edit and refresh, instant feedback
|
|
|
|
1. **Minimal dependencies** - Just Lit, nothing else
|
|
|
|
1. **Smaller bundle** - No framework runtime, just standards
|
|
|
|
1. **Better encapsulation** - Shadow DOM, scoped styles
|
|
|
|
1. **Framework agnostic** - Works anywhere, even in React apps
|
|
|
|
1. **Future-proof** - Built on web standards
|
|
|
|
1. **Easy to learn** - Simple mental model for state, with natural evolution into Zustand/IndexedDB or similar extensions
|