memorio 2.6.6 → 2.7.0

package/examples/react-app.tsx

@@ -0,0 +1,357 @@
+/**
+ * Memorio React App Example
+ *
+ * This example shows how to use Memorio state in a React application.
+ *
+ * Run: npx ts-node --esm examples/react-app.tsx
+ * Or copy to your React project
+ */
+
+import React, { useState, useEffect } from 'react'
+import '../index'
+
+// ============================================
+// 1. SETUP - Import once at app start
+// ============================================
+
+// In your main App.tsx or index.js:
+// import 'memorio'
+
+// ============================================
+// 2. DEFINE YOUR STATE SHAPE
+// ============================================
+
+interface AppState {
+  user: {
+    name: string
+    email: string
+    avatar?: string
+  } | null
+  theme: 'light' | 'dark'
+  notifications: Notification[]
+  cart: CartItem[]
+  isLoading: boolean
+}
+
+interface Notification {
+  id: string
+  message: string
+  read: boolean
+}
+
+interface CartItem {
+  id: number
+  name: string
+  price: number
+  quantity: number
+}
+
+// ============================================
+// 3. USE STATE IN COMPONENTS
+// ============================================
+
+// ------------------------------
+// Header Component
+// ------------------------------
+function Header() {
+  // Using useObserver to react to state changes
+  const [theme, setTheme] = useState(state.theme)
+
+  useObserver(() => {
+    setTheme(state.theme)
+  }, [state.theme])
+
+  return (
+    <header className={`header header--${theme}`}>
+      <h1>My App</h1>
+      <button onClick={() => {
+        state.theme = state.theme === 'light' ? 'dark' : 'light'
+      }}>
+        Toggle Theme
+      </button>
+    </header>
+  )
+}
+
+// ------------------------------
+// User Profile Component
+// ------------------------------
+function UserProfile() {
+  const [user, setUser] = useState(state.user)
+
+  // Auto-discover all state changes
+  useObserver(() => {
+    setUser(state.user)
+  })
+
+  if (!user) {
+    return <div>Please log in</div>
+  }
+
+  return (
+    <div className="profile">
+      <img src={user.avatar} alt={user.name} />
+      <h2>{user.name}</h2>
+      <p>{user.email}</p>
+    </div>
+  )
+}
+
+// ------------------------------
+// Login Form Component
+// ------------------------------
+function LoginForm() {
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+
+    // Set user state
+    state.user = {
+      name,
+      email,
+      avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${name}`
+    }
+
+    // Also persist to store
+    store.set('lastUser', name)
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        value={name}
+        onChange={e => setName(e.target.value)}
+        placeholder="Name"
+      />
+      <input
+        value={email}
+        onChange={e => setEmail(e.target.value)}
+        placeholder="Email"
+      />
+      <button type="submit">Login</button>
+    </form>
+  )
+}
+
+// ------------------------------
+// Shopping Cart Component
+// ------------------------------
+function Cart() {
+  const [items, setItems] = useState<CartItem[]>([])
+
+  useObserver(() => {
+    setItems(state.cart || [])
+  }, [state.cart])
+
+  const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0)
+
+  return (
+    <div className="cart">
+      <h2>Cart ({items.length})</h2>
+      {items.map(item => (
+        <div key={item.id}>
+          {item.name} - ${item.price} x {item.quantity}
+        </div>
+      ))}
+      <strong>Total: ${total}</strong>
+    </div>
+  )
+}
+
+// ------------------------------
+// Add to Cart Button
+// ------------------------------
+function AddToCartButton({ product }: { product: { id: number, name: string, price: number } }) {
+  return (
+    <button onClick={() => {
+      // Initialize cart if not exists
+      if (!state.cart) {
+        state.cart = []
+      }
+
+      // Add item or increment quantity
+      const existing = state.cart.find(item => item.id === product.id)
+      if (existing) {
+        existing.quantity++
+      } else {
+        state.cart.push({
+          id: product.id,
+          name: product.name,
+          price: product.price,
+          quantity: 1
+        })
+      }
+    }}>
+      Add to Cart
+    </button>
+  )
+}
+
+// ------------------------------
+// Notifications Component
+// ------------------------------
+function Notifications() {
+  const [notifications, setNotifications] = useState<Notification[]>([])
+
+  useObserver(() => {
+    setNotifications(state.notifications || [])
+  }, [state.notifications])
+
+  const unread = notifications.filter(n => !n.read).length
+
+  return (
+    <div className="notifications">
+      <span>🔔 {unread} unread</span>
+      {notifications.map(n => (
+        <div key={n.id} className={n.read ? 'read' : 'unread'}>
+          {n.message}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ------------------------------
+// Settings Component
+// ------------------------------
+function Settings() {
+  const [theme, setTheme] = useState(state.theme)
+  const [savedSettings, setSavedSettings] = useState<any>(null)
+
+  // Load saved settings from store
+  useEffect(() => {
+    const settings = store.get('appSettings')
+    if (settings) {
+      setSavedSettings(settings)
+    }
+  }, [])
+
+  const saveSettings = () => {
+    store.set('appSettings', { theme: state.theme })
+    alert('Settings saved!')
+  }
+
+  return (
+    <div className="settings">
+      <h2>Settings</h2>
+
+      <label>
+        Theme:
+        <select
+          value={theme}
+          onChange={e => state.theme = e.target.value as 'light' | 'dark'}
+        >
+          <option value="light">Light</option>
+          <option value="dark">Dark</option>
+        </select>
+      </label>
+
+      <button onClick={saveSettings}>Save Settings</button>
+
+      {savedSettings && (
+        <p>Saved: {savedSettings.theme}</p>
+      )}
+    </div>
+  )
+}
+
+// ============================================
+// 4. MAIN APP COMPONENT
+// ============================================
+
+function App() {
+  // Initialize default state
+  useEffect(() => {
+    // Load theme from store
+    const savedTheme = store.get('appSettings')?.theme
+    if (savedTheme) {
+      state.theme = savedTheme
+    } else {
+      state.theme = 'light'
+    }
+
+    // Initialize notifications
+    state.notifications = [
+      { id: '1', message: 'Welcome to Memorio!', read: false },
+      { id: '2', message: 'Check out our new features', read: false }
+    ]
+
+    // Check for returning user
+    const lastUser = store.get('lastUser')
+    if (lastUser) {
+      console.log('Welcome back,', lastUser)
+    }
+  }, [])
+
+  return (
+    <div className={`app app--${state.theme}`}>
+      <Header />
+      <main>
+        {state.user ? (
+          <>
+            <UserProfile />
+            <Cart />
+            <Notifications />
+            <Settings />
+
+            <button onClick={() => {
+              // Logout - clear user but keep settings
+              state.user = null
+            }}>
+              Logout
+            </button>
+          </>
+        ) : (
+          <LoginForm />
+        )}
+      </main>
+    </div>
+  )
+}
+
+export default App
+
+// ============================================
+// 5. USAGE SUMMARY
+// ============================================
+
+/*
+MEMORIO REACT USAGE GUIDE:
+
+1. IMPORT ONCE (index.js or App.tsx):
+   import 'memorio'
+
+2. SET STATE:
+   state.user = { name: 'Mario', email: 'mario@example.com' }
+   state.theme = 'dark'
+   state.cart = []
+
+3. READ STATE:
+   const value = state.user.name
+   const theme = state.theme
+
+4. REACT TO CHANGES:
+   useObserver(() => {
+     console.log('State changed!')
+   }, [state.user])
+
+5. AUTO-DISCOVERY (watch all):
+   useObserver(() => {
+     console.log(state.user, state.theme)
+   })
+
+6. PERSIST DATA:
+   store.set('settings', { theme: 'dark' })
+   const settings = store.get('settings')
+
+7. SESSION DATA (cleared on tab close):
+   session.set('token', 'abc123')
+   const token = session.get('token')
+
+8. CLEAR DATA:
+   state.removeAll()     // Clear all state
+   store.removeAll()     // Clear all persisted
+   session.removeAll()   // Clear all session
+*/

package/examples/session-advanced.ts

@@ -9,6 +9,19 @@
 
 import '../index'
 
+// ============================================
+// CHECK PERSISTENCE
+// ============================================
+
+console.log('=== Session Persistence Check ===')
+console.log('Is persistent (survives tab close):', session.isPersistent)
+// In browser: true (sessionStorage)
+// In Node.js/Deno: false (memory fallback)
+
+if (!session.isPersistent) {
+  console.log('⚠️ Warning: Using in-memory storage. Data will be lost on process restart!')
+}
+
 // ============================================
 // AUTHENTICATION
 // ============================================

package/examples/store-advanced.ts

@@ -8,6 +8,19 @@
 
 import '../index'
 
+// ============================================
+// CHECK PERSISTENCE
+// ============================================
+
+console.log('=== Store Persistence Check ===')
+console.log('Is persistent (survives restart):', store.isPersistent)
+// In browser: true (localStorage)
+// In Node.js/Deno: false (memory fallback)
+
+if (!store.isPersistent) {
+  console.log('⚠️ Warning: Using in-memory storage. Data will be lost on restart!')
+}
+
 // ============================================
 // PERSIST USER PREFERENCES
 // ============================================