Opus 4.7 improvments (#25)

Author: codeBelt

.changeset/spotty-impalas-grow.md

@@ -0,0 +1,5 @@
+---
+"@codebelt/classy-store": patch
+---
+
+core improvements and tests

examples/angular/src/store.ts

@@ -36,6 +36,7 @@ export const counterStore = createClassyStore(new CounterStore());
 
 export const persistHandle = persist(counterStore, {
   name: 'classy-angular-example',
+  storage: localStorage,
   properties: ['count', 'step', 'label'],
 });
 

examples/nextjs/src/stores/_storage.ts

@@ -0,0 +1,27 @@
+/**
+ * SSR-safe storage adapter. Uses real `localStorage` in the browser; falls
+ * back to a per-process in-memory map on the server so module-init
+ * `persist()` calls never throw.
+ */
+const memory = new Map<string, string>();
+
+export const ssrSafeLocalStorage = {
+  getItem(key: string): string | null {
+    if (typeof localStorage !== 'undefined') return localStorage.getItem(key);
+    return memory.get(key) ?? null;
+  },
+  setItem(key: string, value: string): void {
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(key, value);
+      return;
+    }
+    memory.set(key, value);
+  },
+  removeItem(key: string): void {
+    if (typeof localStorage !== 'undefined') {
+      localStorage.removeItem(key);
+      return;
+    }
+    memory.delete(key);
+  },
+};

examples/nextjs/src/stores/planner-store.ts

@@ -1,5 +1,6 @@
 import {createClassyStore} from '@codebelt/classy-store';
 import {devtools, persist} from '@codebelt/classy-store/utils';
+import {ssrSafeLocalStorage} from './_storage';
 
 export type MealSlot = {
   recipeId: string | null;
@@ -82,6 +83,7 @@ export const plannerStore = createClassyStore(new PlannerStore());
 
 export const plannerPersist = persist(plannerStore, {
   name: 'classy-meal-planner',
+  storage: ssrSafeLocalStorage,
   properties: ['days'],
   debounce: 500,
   version: 2,

examples/nextjs/src/stores/settings-store.ts

@@ -1,5 +1,6 @@
 import {createClassyStore} from '@codebelt/classy-store';
 import {devtools, persist} from '@codebelt/classy-store/utils';
+import {ssrSafeLocalStorage} from './_storage';
 
 class SettingsStore {
   theme = 'system' as 'light' | 'dark' | 'system';
@@ -14,8 +15,8 @@ export const settingsStore = createClassyStore(new SettingsStore());
 
 export const settingsPersist = persist(settingsStore, {
   name: 'classy-kitchen-settings',
+  storage: ssrSafeLocalStorage,
   debounce: 300,
-  merge: 'replace',
 });
 
 devtools(settingsStore, {name: 'Settings Store'});

examples/nextjs/src/stores/shopping-store.ts

@@ -1,6 +1,7 @@
 import {createClassyStore} from '@codebelt/classy-store';
 import type {PropertyTransform} from '@codebelt/classy-store/utils';
 import {devtools, persist, subscribeKey} from '@codebelt/classy-store/utils';
+import {ssrSafeLocalStorage} from './_storage';
 
 export type ShoppingItem = {
   id: string;
@@ -84,6 +85,7 @@ const itemsTransform: PropertyTransform<ShoppingStore> = {
 
 export const shoppingPersist = persist(shoppingStore, {
   name: 'classy-shopping-list',
+  storage: ssrSafeLocalStorage,
   properties: [itemsTransform, 'lastAction'],
   merge: (persisted, current) => ({
     ...current,

examples/react/src/demos/persist/KitchenSinkPersistDemo.tsx

@@ -20,6 +20,7 @@ const STORE_CODE = `class KitchenSinkStore {
 
 persist(store, {
   name: 'kitchen-sink',
+  storage: localStorage,
   debounce: 300,
   version: 1,
   merge: 'shallow',

examples/react/src/demos/persist/SimplePersistDemo.tsx

@@ -32,7 +32,7 @@ const STORE_CODE = `class PreferencesStore {
 }
 
 const store = createClassyStore(new PreferencesStore());
-persist(store, { name: 'preferences' });`;
+persist(store, { name: 'preferences', storage: localStorage });`;
 
 function ThemeToggle() {
   const theme = useClassyStore(preferencesStore, (state) => state.theme);
@@ -183,7 +183,7 @@ export function SimplePersistDemo() {
   return (
     <DemoContainer
       title="Simple Persist"
-      description="persist(store, { name: 'preferences' }) — that's it. All properties are saved to localStorage automatically."
+      description="persist(store, { name: 'preferences', storage: localStorage }) — pass any storage adapter; properties are saved on every batched mutation."
       codeTabs={[{label: 'Store', code: STORE_CODE, language: 'typescript'}]}
     >
       <div className="flex flex-col gap-4">

examples/react/src/pages/PersistPage.tsx

@@ -23,9 +23,9 @@ export function PersistPage() {
         <SimplePersistDemo />
         <KitchenSinkPersistDemo />
         <TipBox>
-          The simplest setup is just{' '}
+          The simplest setup is{' '}
           <code className="text-xs bg-zinc-800 px-1 rounded">
-            persist(store, {'{'} name: 'key' {'}'})
+            persist(store, {'{'} name: 'key', storage: localStorage {'}'})
           </code>
           . Add{' '}
           <code className="text-xs bg-zinc-800 px-1 rounded">properties</code>{' '}

examples/react/src/stores/persistStores.ts

@@ -48,6 +48,7 @@ export const preferencesStore = createClassyStore(new PreferencesStore());
 
 export const preferencesHandle = persist(preferencesStore, {
   name: 'preferences',
+  storage: localStorage,
 });
 
 // ── Kitchen Sink Store ──────────────────────────────────────────────────────
@@ -150,6 +151,7 @@ export const kitchenSinkStore = createClassyStore(new KitchenSinkStore());
 
 export const kitchenSinkHandle = persist(kitchenSinkStore, {
   name: 'kitchen-sink',
+  storage: localStorage,
   debounce: 300,
   version: 1,
   merge: 'shallow',