44 lines
1 KiB
Markdown
44 lines
1 KiB
Markdown
|
## Architecture
|
||
|
|
|
||
|
|
* Lit-based web components
|
||
|
|
|
||
|
|
* No-build tooling (importmap only)
|
||
|
|
|
||
|
|
* Zustand-moderated state management with IndexedDB storage mechanism
|
||
|
|
|
||
|
|
## Layout
|
||
|
|
|
||
|
|
```
|
||
|
|
src/
|
||
|
|
store/
|
||
|
|
index.js ← zustand store definition
|
||
|
|
middleware/
|
||
|
|
persistence.js ← idb-keyval persist adapter
|
||
|
|
sync.js ← optional cross-tab broadcast
|
||
|
|
components/
|
||
|
|
app-root.js
|
||
|
|
feature-a/
|
||
|
|
feature-a.js ← Lit component
|
||
|
|
feature-a.css ← adopted stylesheet or constructable
|
||
|
|
controllers/
|
||
|
|
fetch.js ← ReactiveController for API calls
|
||
|
|
3d.js ← optional Three/WebGPU controller
|
||
|
|
lib/
|
||
|
|
idb.js ← thin idb-keyval wrapper/schema
|
||
|
|
index.html
|
||
|
|
importmap.json ← extracted importmap (referenced via <script src>)
|
||
|
|
```
|
||
|
|
|
||
|
|
## The Complete Mental Model
|
||
|
|
```
|
||
|
|
IndexedDB
|
||
|
|
↕ (idb-keyval adapter)
|
||
|
|
Zustand persist middleware
|
||
|
|
↕ (vanilla store)
|
||
|
|
StoreController (ReactiveController)
|
||
|
|
↕ (requestUpdate → selector)
|
||
|
|
Lit Web Components
|
||
|
|
↕ (events / store actions)
|
||
|
|
User
|
||
|
|
```
|