docs: normalize code style in examples and tutorial files

Author: codeBelt

examples/rendering/src/stores.ts

@@ -49,6 +49,10 @@ export class PostStore {
   loading = false;
   error: string | null = null;
 
+  get count() {
+    return this.posts.length;
+  }
+
   async fetchPosts() {
     this.loading = true;
     this.error = null;
@@ -67,10 +71,6 @@ export class PostStore {
     this.posts = [];
     this.error = null;
   }
-
-  get count() {
-    return this.posts.length;
-  }
 }
 
 export class DocumentStore {

website/docs/PERSIST_TUTORIAL.md

@@ -7,23 +7,23 @@
 ### 1. Create a store
 
 ```ts
-import { createClassyStore } from '@codebelt/classy-store';
+import {createClassyStore} from '@codebelt/classy-store';
 
 class TodoStore {
   todos: { text: string; done: boolean }[] = [];
   filter: 'all' | 'active' | 'done' = 'all';
 
+  get remaining() {
+    return this.todos.filter((todo) => !todo.done).length;
+  }
+
   addTodo(text: string) {
-    this.todos.push({ text, done: false });
+    this.todos.push({text, done: false});
   }
 
   toggle(index: number) {
     this.todos[index]!.done = !this.todos[index]!.done;
   }
-
-  get remaining() {
-    return this.todos.filter(t => !t.done).length;
-  }
 }
 
 export const todoStore = createClassyStore(new TodoStore());
@@ -32,7 +32,7 @@ export const todoStore = createClassyStore(new TodoStore());
 ### 2. Persist it
 
 ```ts
-import { persist } from '@codebelt/classy-store/utils';
+import {persist} from '@codebelt/classy-store/utils';
 
 const handle = persist(todoStore, {
   name: 'todo-store',
@@ -125,14 +125,14 @@ On restore, `deserialize` converts the ISO string back into a `Date` object befo
 `reactiveMap()` instances are backed by internal arrays that aren't directly JSON-serializable:
 
 ```ts
-import { createClassyStore, reactiveMap } from '@codebelt/classy-store';
-import { persist } from '@codebelt/classy-store/utils';
+import {createClassyStore, reactiveMap} from '@codebelt/classy-store';
+import {persist} from '@codebelt/classy-store/utils';
 
 class UserStore {
   users = reactiveMap<string, { name: string; role: string }>();
 
   addUser(id: string, name: string, role: string) {
-    this.users.set(id, { name, role });
+    this.users.set(id, {name, role});
   }
 }
 
@@ -212,13 +212,13 @@ persist(todoStore, {
   migrate: (state, oldVersion) => {
     if (oldVersion === 0) {
       // v0 stored todos as `items`
-      return { ...state, todos: state.items, items: undefined };
+      return {...state, todos: state.items, items: undefined};
     }
     if (oldVersion === 1) {
       // v1 todos were plain strings, v2 todos are objects
       return {
         ...state,
-        todos: (state.todos as string[]).map(text => ({ text, done: false })),
+        todos: (state.todos as string[]).map((text) => ({text, done: false})),
       };
     }
     return state;
@@ -275,13 +275,13 @@ For full control, pass a function that receives `(persistedState, currentState)`
 persist(settingsStore, {
   name: 'settings',
   merge: (persisted, current) => {
-    const merged = { ...current };
+    const merged = {...current};
     for (const key of Object.keys(persisted)) {
       const persistedValue = persisted[key];
       const currentValue = current[key];
       // Deep merge one level for nested objects
       if (persistedValue && currentValue && typeof persistedValue === 'object' && typeof currentValue === 'object') {
-        merged[key] = { ...currentValue, ...persistedValue };
+        merged[key] = {...currentValue, ...persistedValue};
       } else {
         merged[key] = persistedValue;
       }
@@ -387,7 +387,7 @@ const handle = persist(todoStore, {
 Then hydrate manually in a `useEffect` (which only runs on the client):
 
 ```tsx
-import { useEffect } from 'react';
+import {useEffect} from 'react';
 
 function App() {
   useEffect(() => {
@@ -449,7 +449,7 @@ persist(uiStore, {
 ### Stop persisting
 
 ```ts
-const handle = persist(todoStore, { name: 'todo-store' });
+const handle = persist(todoStore, {name: 'todo-store'});
 
 // Later: stop all persistence (e.g., on logout)
 handle.unsubscribe();
@@ -482,7 +482,7 @@ async function resetToDefaults() {
   todoStore.filter = 'all';
 
   // Optionally re-enable persistence:
-  const newHandle = persist(todoStore, { name: 'todo-store' });
+  const newHandle = persist(todoStore, {name: 'todo-store'});
 }
 ```
 
@@ -512,8 +512,8 @@ persist(todoStore, {
 Here's a complete example combining several features:
 
 ```ts
-import { createClassyStore, reactiveMap } from '@codebelt/classy-store';
-import { persist } from '@codebelt/classy-store/utils';
+import {createClassyStore, reactiveMap} from '@codebelt/classy-store';
+import {persist} from '@codebelt/classy-store/utils';
 
 class AppStore {
   theme: 'light' | 'dark' = 'light';
@@ -530,7 +530,7 @@ class AppStore {
   }
 
   addBookmark(id: string, title: string, url: string) {
-    this.bookmarks.set(id, { title, url });
+    this.bookmarks.set(id, {title, url});
   }
 }
 
@@ -560,7 +560,7 @@ const handle = persist(appStore, {
   migrate: (state, oldVersion) => {
     if (oldVersion === 0) {
       // v0 didn't have language
-      return { ...state, language: 'en' };
+      return {...state, language: 'en'};
     }
     return state;
   },
@@ -575,10 +575,10 @@ console.log(`Welcome back! Theme: ${appStore.theme}, Bookmarks: ${appStore.bookm
 
 | What you want | How to do it |
 |---|---|
-| Persist everything | `persist(myStore, { name: 'key' })` |
+| Persist everything | `persist(myStore, {name: 'key'})` |
 | Persist specific properties | `properties: ['count', 'name']` |
-| Handle Dates | `{ key: 'date', serialize: d => d.toISOString(), deserialize: s => new Date(s) }` |
-| Handle ReactiveMap | `{ key: 'map', serialize: m => [...m.entries()], deserialize: s => reactiveMap(s) }` |
+| Handle Dates | `{key: 'date', serialize: (date) => date.toISOString(), deserialize: (stored) => new Date(stored)}` |
+| Handle ReactiveMap | `{key: 'map', serialize: (map) => [...map.entries()], deserialize: (stored) => reactiveMap(stored)}` |
 | Debounce writes | `debounce: 500` |
 | Migrate schema changes | `version: 2, migrate: (state, old) => { ... }` |
 | SSR support | `skipHydration: true` + `handle.rehydrate()` in `useEffect` |

website/docs/TUTORIAL.md

@@ -8,7 +8,7 @@
 
 ```ts
 // stores.ts
-import { createClassyStore } from '@codebelt/classy-store';
+import {createClassyStore} from '@codebelt/classy-store';
 
 class Counter {
   count = 0;
@@ -25,8 +25,8 @@ export const counterStore = createClassyStore(new Counter());
 
 ```tsx
 // Counter.tsx
-import { useStore } from '@codebelt/classy-store/react';
-import { counterStore } from './stores';
+import {useStore} from '@codebelt/classy-store/react';
+import {counterStore} from './stores';
 
 export function Counter() {
   const count = useStore(counterStore, (store) => store.count);
@@ -41,33 +41,33 @@ That's it. No Provider wrapping your app. The store is a module-level singleton
 A store is any class instance wrapped with `createClassyStore()`. State lives as properties, mutations are plain assignments, and computed values are `get` accessors.
 
 ```ts
-import { createClassyStore } from '@codebelt/classy-store';
+import {createClassyStore} from '@codebelt/classy-store';
 
 class TodoStore {
   items: { id: number; text: string; done: boolean }[] = [];
   filter: 'all' | 'active' | 'done' = 'all';
 
   get remaining() {
-    return this.items.filter((i) => !i.done).length;
+    return this.items.filter((item) => !item.done).length;
   }
 
   get filtered() {
-    if (this.filter === 'active') return this.items.filter((i) => !i.done);
-    if (this.filter === 'done') return this.items.filter((i) => i.done);
+    if (this.filter === 'active') return this.items.filter((item) => !item.done);
+    if (this.filter === 'done') return this.items.filter((item) => item.done);
     return this.items;
   }
 
   add(text: string) {
-    this.items.push({ id: Date.now(), text, done: false });
+    this.items.push({id: Date.now(), text, done: false});
   }
 
   toggle(id: number) {
-    const item = this.items.find((i) => i.id === id);
+    const item = this.items.find((todo) => todo.id === id);
     if (item) item.done = !item.done;
   }
 
   remove(id: number) {
-    this.items = this.items.filter((i) => i.id !== id);
+    this.items = this.items.filter((todo) => todo.id !== id);
   }
 }
 
@@ -122,22 +122,22 @@ The problem shows up when your selector **derives a new value** — calling `.fi
 Without `shallowEqual` — `.filter()` creates a new array every time the snapshot updates, even if the todo items haven't changed:
 
 ```ts
-import { useStore } from '@codebelt/classy-store/react';
+import {useStore} from '@codebelt/classy-store/react';
 
 // ❌ New array reference every snapshot → unnecessary re-renders
-const active = useStore(todoStore, (store) => store.items.filter((i) => !i.done));
+const active = useStore(todoStore, (store) => store.items.filter((item) => !item.done));
 ```
 
 With `shallowEqual` — compares the array contents, not the reference:
 
 ```ts
-import { shallowEqual } from '@codebelt/classy-store';
-import { useStore } from '@codebelt/classy-store/react';
+import {shallowEqual} from '@codebelt/classy-store';
+import {useStore} from '@codebelt/classy-store/react';
 
 // ✅ Only re-renders when the filtered items actually change
 const active = useStore(
   todoStore,
-  (store) => store.items.filter((i) => !i.done),
+  (store) => store.items.filter((item) => !item.done),
   shallowEqual,
 );
 ```
@@ -196,8 +196,8 @@ Mutations separated by an `await` land in different microtasks and trigger separ
 `snapshot()` creates a deeply-frozen, immutable copy of the store's current state.
 
 ```ts
-import { snapshot } from '@codebelt/classy-store';
-import { counterStore } from './stores';
+import {snapshot} from '@codebelt/classy-store';
+import {counterStore} from './stores';
 
 const snap = snapshot(counterStore);
 console.log(snap.count); // read-only
@@ -213,8 +213,8 @@ Snapshots use structural sharing: unchanged sub-trees return the same frozen ref
 `subscribe()` registers a callback that fires once per batched mutation. It returns an unsubscribe function.
 
 ```ts
-import { subscribe, snapshot } from '@codebelt/classy-store';
-import { counterStore } from './stores';
+import {subscribe, snapshot} from '@codebelt/classy-store';
+import {counterStore} from './stores';
 
 const unsub = subscribe(counterStore, () => {
   const snap = snapshot(counterStore);
@@ -232,10 +232,10 @@ Deep objects and arrays are automatically reactive. You don't need to do anythin
 
 ```ts
 class DocStore {
-  metadata = { title: 'Untitled', author: 'Anonymous' };
+  metadata = {title: 'Untitled', author: 'Anonymous'};
   sections = [
-    { id: 1, heading: 'Intro', body: 'Hello' },
-    { id: 2, heading: 'Methods', body: 'We used proxies.' },
+    {id: 1, heading: 'Intro', body: 'Hello'},
+    {id: 2, heading: 'Methods', body: 'We used proxies.'},
   ];
 }
 
@@ -257,7 +257,7 @@ Structural sharing means that when you mutate `metadata.title`, the snapshot for
 Native `Map` and `Set` aren't plain objects — the proxy can't intercept their internal methods. Use `reactiveMap()` and `reactiveSet()` instead.
 
 ```ts
-import { createClassyStore, reactiveMap } from '@codebelt/classy-store';
+import {createClassyStore, reactiveMap} from '@codebelt/classy-store';
 
 class UserStore {
   users = reactiveMap<string, { name: string; role: string }>();
@@ -267,7 +267,7 @@ class UserStore {
   }
 
   addUser(id: string, name: string) {
-    this.users.set(id, { name, role: 'viewer' });
+    this.users.set(id, {name, role: 'viewer'});
   }
 
   removeUser(id: string) {
@@ -287,7 +287,7 @@ export const userStore = createClassyStore(new UserStore());
 Subclasses work out of the box — no special API or configuration needed. Methods, getters, and properties from all inheritance levels are fully reactive.
 
 ```ts
-import { createClassyStore } from '@codebelt/classy-store';
+import {createClassyStore} from '@codebelt/classy-store';
 
 class BaseStore {
   loading = false;
@@ -309,22 +309,22 @@ class BaseStore {
 class UserStore extends BaseStore {
   users: { id: string; name: string }[] = [];
 
+  get activeCount() {
+    return this.users.length;
+  }
+
   async fetchUsers() {
     this.setLoading(true);       // base method — reactive
     this.setError(null);
     try {
       const res = await fetch('/api/users');
       this.users = await res.json();
-    } catch (err) {
-      this.setError(err instanceof Error ? err.message : 'Failed');
+    } catch (error) {
+      this.setError(error instanceof Error ? error.message : 'Failed');
     } finally {
       this.setLoading(false);
     }
   }
-
-  get activeCount() {
-    return this.users.length;
-  }
 }
 
 export const userStore = createClassyStore(new UserStore());
@@ -356,8 +356,8 @@ class PostStore {
       const res = await fetch('/api/posts');
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       this.posts = await res.json(); // no notification yet — batched with finally
-    } catch (e) {
-      this.error = e instanceof Error ? e.message : 'Unknown error';
+    } catch (error) {
+      this.error = error instanceof Error ? error.message : 'Unknown error';
     } finally {
       this.loading = false; // notification 2: hides spinner, shows data or error
     }
@@ -389,7 +389,7 @@ Destructuring copies the primitive value at that moment and breaks the proxy con
 
 ```ts
 // ❌ Breaks reactivity — `count` is just the number 0
-const { count } = counterStore;
+const {count} = counterStore;
 
 // ✅ Always access through the proxy
 counterStore.count;
@@ -443,7 +443,7 @@ class Counter {
 Calling `snapshot()` multiple times without intervening mutations returns the same frozen object — an O(1) cache hit. There's no cost to calling it liberally.
 
 ```ts
-import { snapshot } from '@codebelt/classy-store';
+import {snapshot} from '@codebelt/classy-store';
 
 const a = snapshot(counterStore);
 const b = snapshot(counterStore);
@@ -460,7 +460,7 @@ a === c; // false — new snapshot after mutation
 `persist()` saves your store's state to `localStorage` (or any storage adapter) and restores it on page load. It's a standalone utility function — import it from `@codebelt/classy-store/utils`.
 
 ```ts
-import { persist } from '@codebelt/classy-store/utils';
+import {persist} from '@codebelt/classy-store/utils';
 
 const handle = persist(todoStore, {
   name: 'todo-store',