From a961f387d6127175f00cf86d4c0928fea8150546 Mon Sep 17 00:00:00 2001 From: Brian Kirkpatrick Date: Wed, 4 Mar 2026 18:26:43 -0800 Subject: [PATCH] attempting to resurrect full beans --- TASKS.md | 60 +++++++++++++++++++++++++++++++++ components/app-root.js | 46 ++++++++++--------------- components/nav-bar.js | 17 +++++----- components/page-home.js | 14 ++++---- components/page-items.js | 29 +++++----------- controllers/store-controller.js | 23 +++++++++++++ index.html | 4 ++- store/idb.js | 33 ++++++++++++++++++ store/persistence.js | 9 +++++ 9 files changed, 170 insertions(+), 65 deletions(-) create mode 100644 TASKS.md create mode 100644 controllers/store-controller.js create mode 100644 store/idb.js create mode 100644 store/persistence.js diff --git a/TASKS.md b/TASKS.md new file mode 100644 index 0000000..edd6904 --- /dev/null +++ b/TASKS.md @@ -0,0 +1,60 @@ +# Tasks & Issues + +## 1. Critical Issues + +- [ ] **1.1 Fix missing `del` import in store/index.js** + - Line 3 imports `get, set` from idb-keyval but `del` is used on line 13 + - Add `del` to the import statement + - This will cause a ReferenceError when removeItem is called + +- [ ] **1.2 Fix hydration flag initialization** + - The `onRehydrateStorage` callback uses `store.setState()` before `store` is fully initialized + - Creates a circular reference issue preventing app from loading + - **Options:** + - A) Initialize `_hydrated: true` by default (simplest) + - B) Use Zustand's persist middleware built-in hydration detection + - C) Move hydration callback outside store creation + +- [ ] **1.3 Consolidate duplicate storage implementation** + - Storage is defined in both `store/index.js` AND `store/middleware/persistence.js` + - The middleware file exports `idbStorage` but it's not being used + - **Decision needed:** Use one or the other, not both + +## 2. Architectural Improvements + +- [ ] **2.1 Add error handling** + - Add try/catch blocks around IndexedDB operations + - Implement fallback if IndexedDB fails or is unavailable + - Add user feedback for errors (toast notifications?) + +- [ ] **2.2 Add partialize option to persist middleware** + - Currently saves ALL state including `_hydrated` flag and `route` + - Should use `partialize: (state) => ({ user: state.user, items: state.items })` + - Prevents unnecessary data in IndexedDB + +- [ ] **2.3 Add basic CSS reset to index.html** + - No base styles, margins, or font settings currently + - Consider adding minimal reset or normalize.css + +- [ ] **2.4 Add loading states for async operations** + - No loading indicators for add/remove item operations + - Consider adding optimistic updates + +## 3. Nice to Have + +- [ ] **3.1 Add TypeScript types** (optional) + - JSDoc comments for better IDE support + - Or migrate to .ts files with no-build setup + +- [ ] **3.2 Add cross-tab synchronization** + - README mentions optional `sync.js` middleware + - Implement BroadcastChannel for cross-tab state sync + +- [ ] **3.3 Add route history management** + - Integrate with browser history API + - Support back/forward navigation + +- [ ] **3.4 Add unit tests** + - Test store actions and selectors + - Test component rendering + - Test persistence layer diff --git a/components/app-root.js b/components/app-root.js index c5226f9..2f3147f 100644 --- a/components/app-root.js +++ b/components/app-root.js @@ -1,9 +1,12 @@ import { LitElement, html, css } from "lit"; +import { store} from "../store/index.js"; +import { StoreController } from "../controllers/store-controller.js"; import "./nav-bar.js"; import "./page-home.js"; import "./page-items.js"; class AppRoot extends LitElement { + #hydrated = new StoreController(this, store, s => s._hydrated); #user = new StoreController(this, store, s => s.user); #route = new StoreController(this, store, s => s.route); @@ -12,43 +15,30 @@ class AppRoot extends LitElement { display: block; min-height: 100vh; } + + .loading { + display: grid; + place-items: center; + height: 100vh; + opacity: 0.4; + } `; - #navigate(route) { - this.route = route; - } - - #addItem(item) { - this.items = [...this.items, item]; - } - - #removeItem(id) { - this.items = this.items.filter(i => i.id !== id); - } - render() { + if (!this.#hydrated.value) { + return html`
loading...
`; + } return html` - this.#navigate(e.detail.route)} - > +
${this.#renderRoute()}
`; } #renderRoute() { - switch (this.route) { - case "home": - return html``; - case "items": - return html` this.#addItem(e.detail.item)} - @remove-item=${(e) => this.#removeItem(e.detail.id)} - >`; - default: - return html``; + switch (this.#route.value) { + case "home": return html``; + case "items": return html``; + default: return html``; } } } diff --git a/components/nav-bar.js b/components/nav-bar.js index 6f192a1..9b44aa2 100644 --- a/components/nav-bar.js +++ b/components/nav-bar.js @@ -1,10 +1,13 @@ // components/nav-bar.js import { LitElement, html, css } from 'lit' +import { store } from '../store/index.js' +import { StoreController } from "../controllers/store-controller.js"; class NavBar extends LitElement { + #route = new StoreController(this, store, s => s.route) + static properties = { - user: { type: Object }, - route: { type: String } + user: { type: Object } } static styles = css` @@ -32,18 +35,14 @@ class NavBar extends LitElement { #navigate(route, e) { e.preventDefault() - this.dispatchEvent(new CustomEvent('navigate', { - detail: { route }, - bubbles: true, - composed: true - })) + store.getState().navigate(route) } #link(route, label) { return html` this.#navigate(route, e)} >${label} ` @@ -62,4 +61,4 @@ class NavBar extends LitElement { } } -customElements.define('nav-bar', NavBar) +customElements.define('nav-bar', NavBar) \ No newline at end of file diff --git a/components/page-home.js b/components/page-home.js index 3d5c616..f6536e7 100644 --- a/components/page-home.js +++ b/components/page-home.js @@ -1,11 +1,11 @@ // components/page-home.js import { LitElement, html, css } from 'lit' +import { store } from '../store/index.js' +import { StoreController } from "../controllers/store-controller.js"; class PageHome extends LitElement { - static properties = { - user: { type: Object }, - items: { type: Array } - } + #user = new StoreController(this, store, s => s.user) + #items = new StoreController(this, store, s => s.items) static styles = css` :host { display: block; padding: 2rem 1.5rem; } @@ -25,8 +25,8 @@ class PageHome extends LitElement { ` render() { - const name = this.user?.name ?? 'there' - const count = this.items?.length ?? 0 + const name = this.#user.value?.name ?? 'there' + const count = this.#items.value.length return html`

Hey, ${name}

@@ -41,4 +41,4 @@ class PageHome extends LitElement { } } -customElements.define('page-home', PageHome) +customElements.define('page-home', PageHome) \ No newline at end of file diff --git a/components/page-items.js b/components/page-items.js index f788396..dde3a1a 100644 --- a/components/page-items.js +++ b/components/page-items.js @@ -1,17 +1,16 @@ // components/page-items.js import { LitElement, html, css } from 'lit' +import { store } from '../store/index.js' +import { StoreController } from "../controllers/store-controller.js"; class PageItems extends LitElement { + #items = new StoreController(this, store, s => s.items) + static properties = { - items: { type: Array }, _draft: { type: String, state: true } } - constructor() { - super(); - this.items = []; - this._draft = ''; - } + _draft = '' static styles = css` :host { display: block; padding: 2rem 1.5rem; } @@ -64,22 +63,12 @@ class PageItems extends LitElement { #add() { const name = this._draft.trim() if (!name) return - - this.dispatchEvent(new CustomEvent('add-item', { - detail: { item: { id: crypto.randomUUID(), name } }, - bubbles: true, - composed: true - })) - + store.getState().addItem({ id: crypto.randomUUID(), name }) this._draft = '' } #remove(id) { - this.dispatchEvent(new CustomEvent('remove-item', { - detail: { id }, - bubbles: true, - composed: true - })) + store.getState().removeItem(id) } #onKeydown(e) { @@ -87,7 +76,7 @@ class PageItems extends LitElement { } render() { - const items = this.items ?? [] + const items = this.#items.value return html`

Items

@@ -119,4 +108,4 @@ class PageItems extends LitElement { } } -customElements.define('page-items', PageItems) +customElements.define('page-items', PageItems) \ No newline at end of file diff --git a/controllers/store-controller.js b/controllers/store-controller.js new file mode 100644 index 0000000..998294d --- /dev/null +++ b/controllers/store-controller.js @@ -0,0 +1,23 @@ +export class StoreController { + constructor(host, store, selector) { + this.host = host + this.store = store + this.selector = selector + host.addController(this) + } + + hostConnected() { + this._unsub = this.store.subscribe( + (state) => { + const next = this.selector(state) + if (next !== this.value) { + this.value = next + this.host.requestUpdate() + } + } + ) + this.value = this.selector(this.store.getState()) + } + + hostDisconnected() { this._unsub?.() } + } \ No newline at end of file diff --git a/index.html b/index.html index 91255c2..51c53cd 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,9 @@ "imports": { "lit": "https://esm.sh/lit@3", "lit/decorators.js": "https://esm.sh/lit@3/decorators.js", - "zustand/vanilla": "https://esm.sh/zustand@5/vanilla" + "zustand/vanilla": "https://esm.sh/zustand@5/vanilla", + "zustand/middleware": "https://esm.sh/zustand@5/middleware", + "idb-keyval": "https://esm.sh/idb-keyval@6" } } diff --git a/store/idb.js b/store/idb.js new file mode 100644 index 0000000..e276f00 --- /dev/null +++ b/store/idb.js @@ -0,0 +1,33 @@ +// lib/idb.js +import { createStore, get, set, del, entries, clear } from 'idb-keyval' + +// Named stores — each maps to a distinct IDBObjectStore +export const itemsStore = createStore('app-db', 'items') +export const userStore = createStore('app-db', 'user') +export const cacheStore = createStore('app-db', 'cache') + +// Typed wrappers — keeps raw idb-keyval calls out of the rest of the app +// and gives you one place to add validation, logging, or migration logic + +export const db = { + items: { + getAll: () => entries(itemsStore), + get: (id) => get(id, itemsStore), + set: (id, value) => set(id, value, itemsStore), + remove: (id) => del(id, itemsStore), + clear: () => clear(itemsStore), + }, + + user: { + get: () => get('user', userStore), + set: (value) => set('user', value, userStore), + clear: () => del('user', userStore), + }, + + cache: { + get: (key) => get(key, cacheStore), + set: (key, value) => set(key, value, cacheStore), + remove: (key) => del(key, cacheStore), + clear: () => clear(cacheStore), + } +} \ No newline at end of file diff --git a/store/persistence.js b/store/persistence.js new file mode 100644 index 0000000..bdb7dc1 --- /dev/null +++ b/store/persistence.js @@ -0,0 +1,9 @@ +// store/middleware/persistence.js +import { db } from './idb.js' + +export const makeIdbStorage = (storeName) => + createJSONStorage(() => ({ + getItem: (name) => db[storeName].get(name), + setItem: (name, value) => db[storeName].set(name, value), + removeItem: (name) => db[storeName].remove(name), + })) \ No newline at end of file