cleanup
This commit is contained in:
parent
4e612cb224
commit
28d57323b6
6 changed files with 316 additions and 35 deletions
207
README.md
207
README.md
|
|
@ -1,10 +1,36 @@
|
|||
## Architecture
|
||||
# Lit + Zustand Architecture
|
||||
|
||||
* Lit-based web components
|
||||
A modern, no-build web application architecture using Lit web components with Zustand state management and IndexedDB persistence.
|
||||
|
||||
* No-build tooling (importmap only)
|
||||
## For TSX/React Developers
|
||||
|
||||
If you're coming from React/TSX, here's how this architecture maps to familiar concepts:
|
||||
|
||||
| React/TSX Pattern | This Architecture |
|
||||
|-------------------|-------------------|
|
||||
| `useState` / `useReducer` | Zustand vanilla store |
|
||||
| `useEffect` + state subscription | `StoreController` (ReactiveController) |
|
||||
| Context API | Global Zustand store |
|
||||
| `localStorage` / `sessionStorage` | IndexedDB via persist middleware |
|
||||
| JSX | Lit's `html` tagged template literals |
|
||||
| CSS-in-JS / CSS Modules | Lit's `css` tagged template literals |
|
||||
| React Router | Simple route state in store |
|
||||
| Build step (Vite/Webpack) | Import maps (no build!) |
|
||||
|
||||
### Key Differences
|
||||
|
||||
1. **No Virtual DOM**: Lit uses native Web Components with efficient DOM updates
|
||||
2. **No Build Step**: Import maps let you use npm packages directly from CDN
|
||||
3. **Reactive Controllers**: Replace hooks - attach to component lifecycle
|
||||
4. **Tagged Templates**: Instead of JSX, use `html\`<div>...</div>\``
|
||||
|
||||
## Architecture Overview
|
||||
|
||||
* **Lit-based web components** - Standards-based, framework-agnostic UI
|
||||
* **No-build tooling** - Import maps only, no bundler required
|
||||
* **Zustand state management** - Lightweight, vanilla JS store
|
||||
* **IndexedDB persistence** - Automatic state persistence with idb-keyval
|
||||
|
||||
* Zustand-moderated state management with IndexedDB storage mechanism
|
||||
|
||||
## Layout
|
||||
|
||||
|
|
@ -29,15 +55,168 @@ index.html
|
|||
importmap.json ← extracted importmap (referenced via <script src>)
|
||||
```
|
||||
|
||||
## The Complete Mental Model
|
||||
## Data Flow Diagrams
|
||||
|
||||
### Component-to-Store Pattern
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant User
|
||||
participant LitComponent
|
||||
participant StoreController
|
||||
participant ZustandStore
|
||||
participant IndexedDB
|
||||
|
||||
User->>LitComponent: Click button
|
||||
LitComponent->>ZustandStore: Call action (e.g., addItem)
|
||||
ZustandStore->>ZustandStore: Update state
|
||||
ZustandStore->>IndexedDB: Persist (via middleware)
|
||||
ZustandStore->>StoreController: Notify subscribers
|
||||
StoreController->>LitComponent: requestUpdate()
|
||||
LitComponent->>LitComponent: Re-render
|
||||
LitComponent->>User: Show updated UI
|
||||
```
|
||||
IndexedDB
|
||||
↕ (idb-keyval adapter)
|
||||
Zustand persist middleware
|
||||
↕ (vanilla store)
|
||||
StoreController (ReactiveController)
|
||||
↕ (requestUpdate → selector)
|
||||
Lit Web Components
|
||||
↕ (events / store actions)
|
||||
User
|
||||
|
||||
### Store Subscription Pattern
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[Zustand Store] -->|subscribe| B[StoreController]
|
||||
B -->|selector function| C[Extract specific state]
|
||||
C -->|value changed?| D{Compare}
|
||||
D -->|Yes| E[host.requestUpdate]
|
||||
D -->|No| F[Skip update]
|
||||
E --> G[Lit re-renders component]
|
||||
|
||||
style A fill:#f9f,stroke:#333,stroke-width:2px
|
||||
style B fill:#bbf,stroke:#333,stroke-width:2px
|
||||
style G fill:#bfb,stroke:#333,stroke-width:2px
|
||||
```
|
||||
|
||||
### Complete Mental Model
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ User Interaction │
|
||||
└──────────────┬──────────────────────────┘
|
||||
│ (events)
|
||||
▼
|
||||
┌─────────────────────────────────────────┐
|
||||
│ Lit Web Components │
|
||||
│ - html`` templates (like JSX) │
|
||||
│ - css`` styles (scoped) │
|
||||
│ - Event handlers │
|
||||
└──────────────┬──────────────────────────┘
|
||||
│ (actions)
|
||||
▼
|
||||
┌─────────────────────────────────────────┐
|
||||
│ StoreController (glue layer) │
|
||||
│ - ReactiveController interface │
|
||||
│ - Subscribes to store │
|
||||
│ - Triggers requestUpdate() │
|
||||
└──────────────┬──────────────────────────┘
|
||||
│ (selector)
|
||||
▼
|
||||
┌─────────────────────────────────────────┐
|
||||
│ Zustand Vanilla Store │
|
||||
│ - Global state (like Context) │
|
||||
│ - Actions (like reducers) │
|
||||
│ - Subscriptions │
|
||||
└──────────────┬──────────────────────────┘
|
||||
│ (persist middleware)
|
||||
▼
|
||||
┌─────────────────────────────────────────┐
|
||||
│ IndexedDB (via idb-keyval) │
|
||||
│ - Automatic persistence │
|
||||
│ - Async storage │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Quick Start Example
|
||||
|
||||
### 1. Define Store (like Redux/Zustand)
|
||||
|
||||
```javascript
|
||||
// store/index.js
|
||||
import { createStore } from 'zustand/vanilla'
|
||||
import { persist } from 'zustand/middleware'
|
||||
|
||||
export const store = createStore(
|
||||
persist(
|
||||
(set) => ({
|
||||
count: 0,
|
||||
increment: () => set(s => ({ count: s.count + 1 })),
|
||||
}),
|
||||
{ name: 'my-store' }
|
||||
)
|
||||
)
|
||||
```
|
||||
|
||||
### 2. Create Component (like React component)
|
||||
|
||||
```javascript
|
||||
// components/counter.js
|
||||
import { LitElement, html, css } from 'lit'
|
||||
import { StoreController } from '../controllers/store.js'
|
||||
import { store } from '../store/index.js'
|
||||
|
||||
class Counter extends LitElement {
|
||||
// Subscribe to store (like useSelector)
|
||||
#count = new StoreController(this, store, s => s.count)
|
||||
|
||||
static styles = css`
|
||||
button { padding: 1rem; font-size: 1.2rem; }
|
||||
`
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div>
|
||||
<p>Count: ${this.#count.value}</p>
|
||||
<button @click=${() => store.getState().increment()}>
|
||||
Increment
|
||||
</button>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('my-counter', Counter)
|
||||
```
|
||||
|
||||
### 3. Use in HTML (no build step!)
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"lit": "https://esm.sh/lit@3",
|
||||
"zustand/vanilla": "https://esm.sh/zustand@5/vanilla",
|
||||
"zustand/middleware": "https://esm.sh/zustand@5/middleware"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script type="module" src="components/counter.js"></script>
|
||||
<my-counter></my-counter>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Benefits Over React/TSX
|
||||
|
||||
✅ **No build step** - Edit and refresh, instant feedback
|
||||
✅ **Smaller bundle** - No framework runtime, just standards
|
||||
✅ **Better encapsulation** - Shadow DOM, scoped styles
|
||||
✅ **Framework agnostic** - Works anywhere, even in React apps
|
||||
✅ **Future-proof** - Built on web standards
|
||||
|
||||
## See Also
|
||||
|
||||
- [tasks.md](./tasks.md) - Current issues and improvements
|
||||
- [Lit Documentation](https://lit.dev)
|
||||
- [Zustand Documentation](https://zustand.docs.pmnd.rs)
|
||||
- [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue