refactor: replace s with state in useStore selectors for improved clarity across components, docs, and tests

Author: codeBelt

README.md

@@ -46,7 +46,7 @@ const cartStore = createClassyStore(new CartStore());
 
 // 3. Use in any framework — React shown here
 function CartTotal() {
-  const total = useStore(cartStore, (store) => store.total);
+  const total = useStore(cartStore, (state) => state.total);
   return <span>${total.toFixed(2)}</span>;
 }
 

biome.json

@@ -30,7 +30,7 @@
       "recommended": true,
       "style": {
         "noImplicitBoolean": "error",
-        "noInferrableTypes": "error",
+        "noInferrableTypes": "off",
         "noParameterAssign": "error",
         "noUnusedTemplateLiteral": "error",
         "noUselessElse": "error",

examples/nextjs/src/components/dashboard/DashboardOverview.tsx

@@ -64,27 +64,27 @@ const Icons = {
 export function DashboardOverview() {
   const recipeStats = useStore(
     recipeStore,
-    (s) => ({
-      count: s.recipeCount,
-      avgTime: s.averageTotalTime,
+    (state) => ({
+      count: state.recipeCount,
+      avgTime: state.averageTotalTime,
     }),
     shallowEqual,
   );
 
   const shoppingStats = useStore(
     shoppingStore,
-    (s) => ({
-      total: s.totalItems,
-      unchecked: s.uncheckedCount,
+    (state) => ({
+      total: state.totalItems,
+      unchecked: state.uncheckedCount,
     }),
     shallowEqual,
   );
 
   const plannerStats = useStore(
     plannerStore,
-    (s) => ({
-      meals: s.totalMealsPlanned,
-      pct: s.completionPercentage,
+    (state) => ({
+      meals: state.totalMealsPlanned,
+      pct: state.completionPercentage,
     }),
     shallowEqual,
   );
@@ -124,9 +124,9 @@ export function DashboardOverview() {
           minimal={true}
           apis={['useStore', 'selector', 'shallowEqual']}
           description="Reads from 3 stores using selectors with shallowEqual."
-          code={`const stats = useStore(recipeStore, (s) => ({
-  count: s.recipeCount,
-  avgTime: s.averageTotalTime,
+          code={`const stats = useStore(recipeStore, (state) => ({
+  count: state.recipeCount,
+  avgTime: state.averageTotalTime,
 }), shallowEqual);`}
         />
       </div>

examples/nextjs/src/components/dashboard/StoreInspector.tsx

@@ -121,16 +121,16 @@ export function StoreInspector() {
                 ver: versions.planner,
                 color: 'text-orange-400',
               },
-            ].map((store) => (
+            ].map((state) => (
               <div
-                key={store.label}
+                key={state.label}
                 className="flex justify-between items-center text-xs"
               >
-                <span className="text-muted-foreground">{store.label} v:</span>
+                <span className="text-muted-foreground">{state.label} v:</span>
                 <span
-                  className={`font-mono font-medium ${store.color} bg-white/5 px-2 py-0.5 rounded`}
+                  className={`font-mono font-medium ${state.color} bg-white/5 px-2 py-0.5 rounded`}
                 >
-                  {store.ver}
+                  {state.ver}
                 </span>
               </div>
             ))}

examples/nextjs/src/components/features/FeatureMap.tsx

@@ -303,7 +303,7 @@ function SectionTable({section}: {section: FeatureSection}) {
                       {row.links.map((link) => {
                         const [page, component] = link.label
                           .split(' / ')
-                          .map((s) => s.trim());
+                          .map((state) => state.trim());
                         return (
                           <Link
                             key={link.label}

examples/nextjs/src/components/nav/ThemeToggle.tsx

@@ -17,7 +17,7 @@ const next: Record<string, 'light' | 'dark' | 'system'> = {
 };
 
 export function ThemeToggle() {
-  const snap = useStore(settingsStore, (s) => s.theme);
+  const snap = useStore(settingsStore, (state) => state.theme);
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {

examples/nextjs/src/components/recipes/RecipeCard.tsx

@@ -9,11 +9,11 @@ import {recipeStore} from '@/stores/recipe-store';
 export function RecipeCard({recipeId}: {recipeId: string}) {
   const recipe = useStore(
     recipeStore,
-    (s) => {
+    (state) => {
       // Access _entries directly — snapshot freezes ReactiveMap into a plain
       // object, so prototype methods like .get() aren't available.
       const entry = (
-        s.recipes._entries as ReadonlyArray<readonly [string, Recipe]>
+        state.recipes._entries as ReadonlyArray<readonly [string, Recipe]>
       ).find(([id]) => id === recipeId);
       if (!entry) return null;
       const r = entry[1];

examples/nextjs/src/components/shopping/ShoppingStats.tsx

@@ -8,11 +8,11 @@ import {shoppingStore} from '@/stores/shopping-store';
 export function ShoppingStats() {
   const stats = useStore(
     shoppingStore,
-    (s) => ({
-      total: s.totalItems,
-      unchecked: s.uncheckedCount,
-      checked: s.checkedCount,
-      lastAction: s.lastAction,
+    (state) => ({
+      total: state.totalItems,
+      unchecked: state.uncheckedCount,
+      checked: state.checkedCount,
+      lastAction: state.lastAction,
     }),
     shallowEqual,
   );
@@ -22,11 +22,11 @@ export function ShoppingStats() {
       <ApiInfo
         apis={['useStore', 'selector', 'shallowEqual']}
         description="Selector returns an object with 4 derived values; shallowEqual compares each key to skip unnecessary renders."
-        code={`const stats = useStore(shoppingStore, (s) => ({
-  total: s.totalItems,
-  unchecked: s.uncheckedCount,
-  checked: s.checkedCount,
-  lastAction: s.lastAction,
+        code={`const stats = useStore(shoppingStore, (state) => ({
+  total: state.totalItems,
+  unchecked: state.uncheckedCount,
+  checked: state.checkedCount,
+  lastAction: state.lastAction,
 }), shallowEqual);`}
       />
       <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">

examples/react/src/demos/collections/CollectionsDemo.tsx

@@ -33,7 +33,7 @@ const users = [...snap.users.entries()];
 const tags = [...snap.tags];
 
 // Computed getters
-const userCount = useStore(collectionStore, (s) => s.userCount);`;
+const userCount = useStore(collectionStore, (state) => state.userCount);`;
 
 function UserList() {
   const snap = useStore(collectionStore);
@@ -136,8 +136,8 @@ function TagList() {
 }
 
 function CountDisplay() {
-  const userCount = useStore(collectionStore, (store) => store.userCount);
-  const tagCount = useStore(collectionStore, (store) => store.tagCount);
+  const userCount = useStore(collectionStore, (state) => state.userCount);
+  const tagCount = useStore(collectionStore, (state) => state.tagCount);
   const renders = useRenderCount();
 
   return (

examples/react/src/demos/history/UndoRedoDemo.tsx

@@ -36,7 +36,7 @@ store.setContent('New content');
 history.resume(); // single history entry`;
 
 function TitleEditor() {
-  const title = useStore(textEditorStore, (s) => s.title);
+  const title = useStore(textEditorStore, (state) => state.title);
   const renders = useRenderCount();
 
   return (
@@ -58,7 +58,7 @@ function TitleEditor() {
 }
 
 function ContentEditor() {
-  const content = useStore(textEditorStore, (s) => s.content);
+  const content = useStore(textEditorStore, (state) => state.content);
   const renders = useRenderCount();
 
   return (