zulip/README.md

# 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