refactor: replace store with createClassyStore across the codebase (#4)

* refactor: replace `store` with `createClassyStore` across the codebase

* refactor: standardize selector function parameter naming for `useStore` across codebase

Author: codeBelt

.changeset/tiny-knives-drop.md

@@ -0,0 +1,5 @@
+---
+"@codebelt/classy-store": minor
+---
+
+replace `store` with `createClassyStore` across the codebase

examples/rendering/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "bun --hot src/index.ts",
+    "dev": "bun --hot --port 3001 src/index.ts",
     "start": "NODE_ENV=production bun src/index.ts",
     "build": "bun run build.ts"
   },

examples/rendering/src/AsyncDemo.tsx

@@ -5,7 +5,7 @@ import {postStore} from './stores';
 import {useRenderCount} from './useRenderCount';
 
 function LoadingIndicator() {
-  const loading = useStore(postStore, (s) => s.loading);
+  const loading = useStore(postStore, (store) => store.loading);
   const renders = useRenderCount();
   return (
     <div className="flex items-center justify-between bg-amber-500/10 border border-amber-500/20 rounded-lg px-3 py-2.5">
@@ -51,7 +51,7 @@ function LoadingIndicator() {
 }
 
 function ErrorDisplay() {
-  const error = useStore(postStore, (s) => s.error);
+  const error = useStore(postStore, (store) => store.error);
   const renders = useRenderCount();
   return (
     <div className="flex items-center justify-between bg-red-500/10 border border-red-500/20 rounded-lg px-3 py-2.5">
@@ -71,7 +71,7 @@ function ErrorDisplay() {
 }
 
 function PostList() {
-  const posts = useStore(postStore, (s) => s.posts);
+  const posts = useStore(postStore, (store) => store.posts);
   const renders = useRenderCount();
   return (
     <div className="bg-emerald-500/10 border border-emerald-500/20 rounded-lg px-3 py-2.5">
@@ -102,7 +102,7 @@ function PostList() {
 }
 
 function PostCount() {
-  const count = useStore(postStore, (s) => s.count);
+  const count = useStore(postStore, (store) => store.count);
   const renders = useRenderCount();
   return (
     <div className="flex items-center gap-2">

examples/rendering/src/CollectionsDemo.tsx

@@ -107,8 +107,8 @@ function TagList() {
 }
 
 function CountDisplay() {
-  const userCount = useStore(collectionStore, (s) => s.userCount);
-  const tagCount = useStore(collectionStore, (s) => s.tagCount);
+  const userCount = useStore(collectionStore, (store) => store.userCount);
+  const tagCount = useStore(collectionStore, (store) => store.tagCount);
   const renders = useRenderCount();
 
   return (

examples/rendering/src/ReactiveFundamentalsDemo.tsx

@@ -1,18 +1,18 @@
-import {store} from '@codebelt/classy-store';
+import {createClassyStore} from '@codebelt/classy-store';
 import {useStore} from '@codebelt/classy-store/react';
 import {useState} from 'react';
 import {Panel} from './Panel';
 import {RenderBadge} from './RenderBadge';
 import {CounterStore, counterStore} from './stores';
 import {useRenderCount} from './useRenderCount';
 
-const batchStore = store(new CounterStore());
+const batchStore = createClassyStore(new CounterStore());
 
 const names = ['World', 'Bun', 'React', 'Store'];
 let nameIndex = 0;
 
 function CountCard() {
-  const count = useStore(counterStore, (s) => s.count);
+  const count = useStore(counterStore, (store) => store.count);
   const renders = useRenderCount();
   return (
     <div className="flex-1 flex items-center justify-between bg-indigo-500/10 border border-indigo-500/20 rounded-lg px-3 py-2.5">
@@ -30,7 +30,7 @@ function CountCard() {
 }
 
 function NameCard() {
-  const name = useStore(counterStore, (s) => s.name);
+  const name = useStore(counterStore, (store) => store.name);
   const renders = useRenderCount();
   return (
     <div className="flex-1 flex items-center justify-between bg-violet-500/10 border border-violet-500/20 rounded-lg px-3 py-2.5">
@@ -48,7 +48,7 @@ function NameCard() {
 }
 
 function BatchCard() {
-  const count = useStore(batchStore, (s) => s.count);
+  const count = useStore(batchStore, (store) => store.count);
   const renders = useRenderCount();
   return (
     <div className="flex-1 flex items-center justify-between bg-amber-500/10 border border-amber-500/20 rounded-lg px-3 py-2.5">

examples/rendering/src/StructuralSharingDemo.tsx

@@ -85,21 +85,33 @@ function SnapshotTree() {
       <div className="text-xs text-zinc-400 uppercase tracking-wide mb-3">
         Snapshot Reference Tree
       </div>
-      <TreeNode label="root" getValue={(s) => s}>
-        <TreeNode label=".metadata" getValue={(s) => s.metadata} depth={1} />
-        <TreeNode label=".content" getValue={(s) => s.content} depth={1}>
+      <TreeNode label="root" getValue={(store) => store}>
+        <TreeNode
+          label=".metadata"
+          getValue={(store) => store.metadata}
+          depth={1}
+        />
+        <TreeNode
+          label=".content"
+          getValue={(store) => store.content}
+          depth={1}
+        >
           <TreeNode
             label=".sections[0]"
-            getValue={(s) => s.content.sections[0]}
+            getValue={(store) => store.content.sections[0]}
             depth={2}
           />
           <TreeNode
             label=".sections[1]"
-            getValue={(s) => s.content.sections[1]}
+            getValue={(store) => store.content.sections[1]}
             depth={2}
           />
         </TreeNode>
-        <TreeNode label=".settings" getValue={(s) => s.settings} depth={1} />
+        <TreeNode
+          label=".settings"
+          getValue={(store) => store.settings}
+          depth={1}
+        />
       </TreeNode>
     </div>
   );

examples/rendering/src/persistStores.ts

@@ -1,4 +1,8 @@
-import {reactiveMap, reactiveSet, store} from '@codebelt/classy-store';
+import {
+  createClassyStore,
+  reactiveMap,
+  reactiveSet,
+} from '@codebelt/classy-store';
 import {persist} from '@codebelt/classy-store/utils';
 
 // ── Simple Store ────────────────────────────────────────────────────────────
@@ -43,7 +47,7 @@ export class PreferencesStore {
   }
 }
 
-export const preferencesStore = store(new PreferencesStore());
+export const preferencesStore = createClassyStore(new PreferencesStore());
 
 export const preferencesHandle = persist(preferencesStore, {
   name: 'preferences',
@@ -145,7 +149,7 @@ export class KitchenSinkStore {
   }
 }
 
-export const kitchenSinkStore = store(new KitchenSinkStore());
+export const kitchenSinkStore = createClassyStore(new KitchenSinkStore());
 
 export const kitchenSinkHandle = persist(kitchenSinkStore, {
   name: 'kitchen-sink',

examples/rendering/src/stores.ts

@@ -1,4 +1,8 @@
-import {reactiveMap, reactiveSet, store} from '@codebelt/classy-store';
+import {
+  createClassyStore,
+  reactiveMap,
+  reactiveSet,
+} from '@codebelt/classy-store';
 
 export class CounterStore {
   count = 0;
@@ -84,7 +88,7 @@ export class DocumentStore {
   }
 
   updateSectionBody(id: number, body: string) {
-    const section = this.content.sections.find((s) => s.id === id);
+    const section = this.content.sections.find((store) => store.id === id);
     if (section) section.body = body;
   }
 
@@ -145,7 +149,7 @@ export class CollectionStore {
   }
 }
 
-export const counterStore = store(new CounterStore());
-export const postStore = store(new PostStore());
-export const documentStore = store(new DocumentStore());
-export const collectionStore = store(new CollectionStore());
+export const counterStore = createClassyStore(new CounterStore());
+export const postStore = createClassyStore(new PostStore());
+export const documentStore = createClassyStore(new DocumentStore());
+export const collectionStore = createClassyStore(new CollectionStore());

src/collections/collections.test.ts

@@ -1,5 +1,5 @@
 import {describe, expect, test} from 'bun:test';
-import {store, subscribe} from '../core/core';
+import {createClassyStore, subscribe} from '../core/core';
 import {snapshot} from '../snapshot/snapshot';
 import {reactiveMap, reactiveSet} from './collections';
 
@@ -87,7 +87,7 @@ describe('reactiveMap()', () => {
   });
 
   test('triggers store subscription on set', async () => {
-    const s = store({users: reactiveMap<string, string>()});
+    const s = createClassyStore({users: reactiveMap<string, string>()});
     let count = 0;
     subscribe(s, () => count++);
 
@@ -98,7 +98,7 @@ describe('reactiveMap()', () => {
   });
 
   test('triggers store subscription on delete', async () => {
-    const s = store({
+    const s = createClassyStore({
       users: reactiveMap([['id1', 'Alice']] as [string, string][]),
     });
     let count = 0;
@@ -111,7 +111,7 @@ describe('reactiveMap()', () => {
   });
 
   test('triggers store subscription on clear', async () => {
-    const s = store({
+    const s = createClassyStore({
       users: reactiveMap([
         ['a', 1],
         ['b', 2],
@@ -127,7 +127,9 @@ describe('reactiveMap()', () => {
   });
 
   test('snapshot captures map data', async () => {
-    const s = store({m: reactiveMap([['k', 'v']] as [string, string][])});
+    const s = createClassyStore({
+      m: reactiveMap([['k', 'v']] as [string, string][]),
+    });
     const snap = snapshot(s);
     expect(snap.m._entries).toEqual([['k', 'v']]);
     // Snapshot is frozen
@@ -188,7 +190,7 @@ describe('reactiveSet()', () => {
   });
 
   test('triggers store subscription on add', async () => {
-    const s = store({tags: reactiveSet<string>()});
+    const s = createClassyStore({tags: reactiveSet<string>()});
     let count = 0;
     subscribe(s, () => count++);
 
@@ -199,7 +201,7 @@ describe('reactiveSet()', () => {
   });
 
   test('triggers store subscription on delete', async () => {
-    const s = store({tags: reactiveSet(['a', 'b'])});
+    const s = createClassyStore({tags: reactiveSet(['a', 'b'])});
     let count = 0;
     subscribe(s, () => count++);
 
@@ -210,7 +212,7 @@ describe('reactiveSet()', () => {
   });
 
   test('triggers store subscription on clear', async () => {
-    const s = store({tags: reactiveSet(['a', 'b'])});
+    const s = createClassyStore({tags: reactiveSet(['a', 'b'])});
     let count = 0;
     subscribe(s, () => count++);
 
@@ -221,7 +223,7 @@ describe('reactiveSet()', () => {
   });
 
   test('snapshot captures set data', async () => {
-    const s = store({t: reactiveSet([1, 2, 3])});
+    const s = createClassyStore({t: reactiveSet([1, 2, 3])});
     const snap = snapshot(s);
     expect(snap.t._items).toEqual([1, 2, 3]);
     expect(Object.isFrozen(snap.t)).toBe(true);
@@ -245,7 +247,7 @@ describe('collections inside class store', () => {
   }
 
   test('class methods mutate collections reactively', async () => {
-    const s = store(new ProjectStore());
+    const s = createClassyStore(new ProjectStore());
     let count = 0;
     subscribe(s, () => count++);
 

src/collections/collections.ts

@@ -3,15 +3,15 @@ import {PROXYABLE} from '../utils/internal/internal';
 // ── ReactiveMap ───────────────────────────────────────────────────────────────
 
 /**
- * A Map-like class backed by a plain array so `store()` can proxy mutations.
+ * A Map-like class backed by a plain array so `createClassyStore()` can proxy mutations.
  *
  * Native `Map` uses internal slots that ES6 Proxy can't intercept, so mutations
  * like `.set()` would be invisible to the store. `ReactiveMap` solves this by
  * storing entries in a plain array (`_entries`) that the proxy can track.
  *
  * Usage:
  * ```ts
- * const myStore = store({ users: reactiveMap<string, User>() });
+ * const myStore = createClassyStore({ users: reactiveMap<string, User>() });
  * myStore.users.set('id1', { name: 'Alice' }); // reactive
  * ```
  */
@@ -106,15 +106,15 @@ export class ReactiveMap<K, V> {
 // ── ReactiveSet ───────────────────────────────────────────────────────────────
 
 /**
- * A Set-like class backed by a plain array so `store()` can proxy mutations.
+ * A Set-like class backed by a plain array so `createClassyStore()` can proxy mutations.
  *
  * Native `Set` uses internal slots that ES6 Proxy can't intercept, so mutations
  * like `.add()` would be invisible to the store. `ReactiveSet` solves this by
  * storing items in a plain array (`_items`) that the proxy can track.
  *
  * Usage:
  * ```ts
- * const myStore = store({ tags: reactiveSet<string>(['urgent']) });
+ * const myStore = createClassyStore({ tags: reactiveSet<string>(['urgent']) });
  * myStore.tags.add('bug'); // reactive
  * ```
  */
@@ -198,7 +198,7 @@ export class ReactiveSet<T> {
 
 /**
  * Creates a reactive Map-like collection backed by a plain array.
- * Wrap the parent object with `store()` for full reactivity.
+ * Wrap the parent object with `createClassyStore()` for full reactivity.
  *
  * @param initial - Optional iterable of `[key, value]` pairs.
  */
@@ -210,7 +210,7 @@ export function reactiveMap<K, V>(
 
 /**
  * Creates a reactive Set-like collection backed by a plain array.
- * Wrap the parent object with `store()` for full reactivity.
+ * Wrap the parent object with `createClassyStore()` for full reactivity.
  *
  * @param initial - Optional iterable of values.
  */