diff --git a/README.md b/README.md
index b1fc940..4b5f7ff 100644
--- a/README.md
+++ b/README.md
@@ -86,16 +86,12 @@ export class StoreController {
```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 {
- static properties = {
- count: { type: Number, state: true }
- }
-
- constructor() {
- super()
- this.count = 0
- }
+ // Subscribe to store (like useSelector)
+ #count = new StoreController(this, store, s => s.count)
static styles = css`
button { padding: 1rem; font-size: 1.2rem; margin: 0.5rem; }
diff --git a/TASKS.md b/TASKS.md
deleted file mode 100644
index 7a232fe..0000000
--- a/TASKS.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# Tasks & Issues
-
-## 1. Critical Issues
-
-- [x] **1.1 Fix missing `del` import in store/index.js** ✅ COMPLETE
- - Line 3 now imports `get, set, del` from idb-keyval
- - Used in removeItem function on line 13
- - No more ReferenceError
-
-- [x] **1.2 Fix hydration flag initialization** ✅ COMPLETE
- - Implemented Option A: Initialize `_hydrated: true` by default
- - Removed problematic `onRehydrateStorage` callback
- - App now loads immediately without hanging on "loading..."
- - Persistence happens in background automatically
-
-- [x] **1.3 Consolidate duplicate storage implementation** ✅ COMPLETE
- - Single storage implementation in `store/index.js`
- - Uses idb-keyval directly with createJSONStorage
- - Clean, simple approach without extra middleware files
-
-## 2. Architectural Improvements
-
-- [x] **2.1 Add error handling** ✅ COMPLETE
- - Added try/catch blocks around all IndexedDB operations (getItem, setItem, removeItem)
- - Implemented fallback: returns null on getItem error, silently fails on setItem/removeItem
- - Added error state to store with auto-clear after 3 seconds
- - Added validation in addItem and removeItem actions
- - Created error-toast component with slide-in animation
- - Toast shows error messages and allows manual dismissal
-
-- [x] **2.2 Add partialize option to persist middleware** ✅ COMPLETE
- - Added partialize to exclude `_hydrated` flag from persistence
- - Only persists: user, items, and route
- - 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
-
-- [ ] **3.5 Add Storybook support**
- - Introduces parallel build (vite internally) but core app remains no-build
- - Storybook includes raw/native web component support
- - Ensure individual components and layouts are properly organized, documented, demonstrated, and tested
diff --git a/components/app-root.js b/components/app-root.js
index 29454ec..b9444a8 100644
--- a/components/app-root.js
+++ b/components/app-root.js
@@ -1,13 +1,11 @@
import { LitElement, html, css } from "lit";
import { store} from "../store/index.js";
-import { StoreController } from "../controllers/store-controller.js";
+import { StoreController } from "../controllers/store.js";
import "./nav-bar.js";
import "./page-home.js";
import "./page-items.js";
-import "./error-toast.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);
@@ -16,23 +14,12 @@ class AppRoot extends LitElement {
display: block;
min-height: 100vh;
}
-
- .loading {
- display: grid;
- place-items: center;
- height: 100vh;
- opacity: 0.4;
- }
`;
render() {
- if (!this.#hydrated.value) {
- return html`loading...
`;
- }
return html`
${this.#renderRoute()}
-
`;
}
diff --git a/components/error-toast.js b/components/error-toast.js
deleted file mode 100644
index 0e90eda..0000000
--- a/components/error-toast.js
+++ /dev/null
@@ -1,79 +0,0 @@
-// components/error-toast.js
-import { LitElement, html, css } from 'lit'
-import { store } from '../store/index.js'
-import { StoreController } from '../controllers/store-controller.js'
-
-class ErrorToast extends LitElement {
- #error = new StoreController(this, store, s => s.error)
-
- static styles = css`
- :host {
- position: fixed;
- top: 1rem;
- right: 1rem;
- z-index: 1000;
- }
-
- .toast {
- background: #ef4444;
- color: white;
- padding: 1rem 1.5rem;
- border-radius: 8px;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
- display: flex;
- align-items: center;
- gap: 1rem;
- min-width: 300px;
- animation: slideIn 0.3s ease-out;
- }
-
- @keyframes slideIn {
- from {
- transform: translateX(400px);
- opacity: 0;
- }
- to {
- transform: translateX(0);
- opacity: 1;
- }
- }
-
- .message {
- flex: 1;
- font-size: 0.9rem;
- }
-
- .close {
- background: none;
- border: none;
- color: white;
- cursor: pointer;
- font-size: 1.2rem;
- padding: 0;
- opacity: 0.8;
- }
-
- .close:hover {
- opacity: 1;
- }
- `
-
- render() {
- if (!this.#error.value) {
- return html``
- }
-
- return html`
-
- ${this.#error.value}
-
-
- `
- }
-}
-
-customElements.define('error-toast', ErrorToast)
diff --git a/components/nav-bar.js b/components/nav-bar.js
index 9b44aa2..1b6e241 100644
--- a/components/nav-bar.js
+++ b/components/nav-bar.js
@@ -1,7 +1,7 @@
// components/nav-bar.js
import { LitElement, html, css } from 'lit'
import { store } from '../store/index.js'
-import { StoreController } from "../controllers/store-controller.js";
+import { StoreController } from '../controllers/store.js'
class NavBar extends LitElement {
#route = new StoreController(this, store, s => s.route)
diff --git a/components/page-home.js b/components/page-home.js
index f6536e7..5d71b8a 100644
--- a/components/page-home.js
+++ b/components/page-home.js
@@ -1,7 +1,7 @@
// components/page-home.js
import { LitElement, html, css } from 'lit'
import { store } from '../store/index.js'
-import { StoreController } from "../controllers/store-controller.js";
+import { StoreController } from '../controllers/store.js'
class PageHome extends LitElement {
#user = new StoreController(this, store, s => s.user)
diff --git a/components/page-items.js b/components/page-items.js
index dde3a1a..efdcf96 100644
--- a/components/page-items.js
+++ b/components/page-items.js
@@ -1,7 +1,7 @@
// components/page-items.js
import { LitElement, html, css } from 'lit'
import { store } from '../store/index.js'
-import { StoreController } from "../controllers/store-controller.js";
+import { StoreController } from '../controllers/store.js'
class PageItems extends LitElement {
#items = new StoreController(this, store, s => s.items)
diff --git a/controllers/store-controller.js b/controllers/store.js
similarity index 100%
rename from controllers/store-controller.js
rename to controllers/store.js
diff --git a/index.html b/index.html
index 51c53cd..91255c2 100644
--- a/index.html
+++ b/index.html
@@ -9,9 +9,7 @@
"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/middleware": "https://esm.sh/zustand@5/middleware",
- "idb-keyval": "https://esm.sh/idb-keyval@6"
+ "zustand/vanilla": "https://esm.sh/zustand@5/vanilla"
}
}
diff --git a/store/idb.js b/store/idb.js
deleted file mode 100644
index e276f00..0000000
--- a/store/idb.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// 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/index.js b/store/index.js
index feaea96..3328f31 100644
--- a/store/index.js
+++ b/store/index.js
@@ -1,86 +1,13 @@
import { createStore } from 'zustand/vanilla'
-import { persist, createJSONStorage } from 'zustand/middleware'
-import { get, set, del } from 'idb-keyval'
-// Create IndexedDB storage adapter with error handling
-const storage = createJSONStorage(() => ({
- getItem: async (name) => {
- try {
- const value = await get(name)
- return value ?? null
- } catch (error) {
- console.error('IndexedDB getItem error:', error)
- return null // Fallback to null if IndexedDB fails
- }
- },
- setItem: async (name, value) => {
- try {
- await set(name, value)
- } catch (error) {
- console.error('IndexedDB setItem error:', error)
- // Silently fail - app continues to work without persistence
- }
- },
- removeItem: async (name) => {
- try {
- await del(name)
- } catch (error) {
- console.error('IndexedDB removeItem error:', error)
- // Silently fail
- }
- },
+export const store = createStore((set, get) => ({
+ user: null,
+ items: [],
+ route: 'home',
+
+ // Actions
+ setUser: (user) => set({ user }),
+ addItem: (item) => set(s => ({ items: [...s.items, item] })),
+ removeItem: (id) => set(s => ({ items: s.items.filter(i => i.id !== id) })),
+ navigate: (route) => set({ route }),
}))
-
-export const store = createStore(
- persist(
- (set, get) => ({
- _hydrated: true, // Start as true - persistence happens in background
- user: null,
- items: [],
- route: 'home',
- error: null, // For error notifications
-
- // Actions
- setUser: (user) => set({ user }),
-
- addItem: (item) => {
- try {
- if (!item || !item.name || !item.name.trim()) {
- throw new Error('Item name is required')
- }
- set(s => ({ items: [...s.items, item], error: null }))
- } catch (error) {
- console.error('addItem error:', error)
- set({ error: error.message })
- setTimeout(() => set({ error: null }), 3000) // Clear after 3s
- }
- },
-
- removeItem: (id) => {
- try {
- if (!id) {
- throw new Error('Item ID is required')
- }
- set(s => ({ items: s.items.filter(i => i.id !== id), error: null }))
- } catch (error) {
- console.error('removeItem error:', error)
- set({ error: error.message })
- setTimeout(() => set({ error: null }), 3000)
- }
- },
-
- navigate: (route) => set({ route }),
-
- clearError: () => set({ error: null }),
- }),
- {
- name: 'app-store',
- storage,
- partialize: (state) => ({
- user: state.user,
- items: state.items,
- route: state.route,
- }),
- }
- )
-)
diff --git a/store/persistence.js b/store/persistence.js
deleted file mode 100644
index bdb7dc1..0000000
--- a/store/persistence.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// 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