memorio 4.6.6 → 4.6.8

package/examples/react-app.tsx

@@ -1,362 +0,0 @@
-/**
- * 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 'memorio'
-
-// ============================================
-// 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 style={{ marginTop: '1rem' }}>
-        <AddToCartButton
-          product={{ id: 1, name: 'Sample Product', price: 9.99 }}
-        />
-      </div>
-    </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] = 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.debug('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.debug('State changed!')
-   }, [state.user])
-
-5. AUTO-DISCOVERY (watch all):
-   useObserver(() => {
-     console.debug(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

@@ -1,91 +0,0 @@
-/**
- * Memorio Session Advanced Example
- *
- * This example shows advanced session (sessionStorage) operations.
- * Session data is cleared when the browser tab closes.
- *
- * Run: npx ts-node examples/session-advanced.ts
- */
-
-import 'memorio'
-
-// ============================================
-// CHECK PERSISTENCE
-// ============================================
-
-console.debug('=== Session Persistence Check ===')
-console.debug('Is persistent (survives tab close):', session.isPersistent)
-// In browser: true (sessionStorage)
-// In Node.js/Deno: false (memory fallback)
-
-if (!session.isPersistent) {
-  console.debug('⚠️ Warning: Using in-memory storage. Data will be lost on process restart!')
-}
-
-// ============================================
-// AUTHENTICATION
-// ============================================
-
-// Store auth token (temporary - cleared when tab closes)
-session.set('authToken', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...')
-session.set('userId', 12345)
-
-// Check if user is logged in
-const token = session.get('authToken')
-if (token) {
-  console.debug('User is logged in, token:', token.substring(0, 20) + '...')
-}
-
-// ============================================
-// FORM PROGRESS
-// ============================================
-
-// Save form draft
-session.set('formDraft', {
-  name: 'Mario',
-  email: 'mario@example.com',
-  message: 'Hello world!'
-})
-
-// Restore on page refresh
-const draft = session.get('formDraft')
-if (draft) {
-  console.debug('Restored draft:', draft)
-}
-
-// ============================================
-// SHOPPING CART
-// ============================================
-
-// Store cart items (temporary)
-session.set('cart', [
-  { id: 1, name: 'Super Mushroom', price: 99, qty: 2 },
-  { id: 2, name: 'Fire Flower', price: 199, qty: 1 }
-])
-
-// Calculate total
-const cart = session.get('cart') || []
-const total = cart.reduce((sum, item) => sum + (item.price * item.qty), 0)
-console.debug('Cart total:', total)
-
-// ============================================
-// SESSION SIZE
-// ============================================
-
-// Get session storage size
-console.debug('Session size:', session.size(), 'bytes')
-
-// ============================================
-// CLEANUP
-// ============================================
-
-// Remove specific item
-session.remove('formDraft')
-
-// Clear all session data (logout)
-// session.removeAll()
-
-// Or use alias
-// session.clearAll()
-
-console.debug('Session advanced example complete!')

package/examples/state-advanced.ts

@@ -1,89 +0,0 @@
-/**
- * Memorio State Advanced Example
- *
- * This example shows advanced state features: locking, path tracking, and nesting.
- *
- * Run: npx ts-node examples/state-advanced.ts
- */
-
-import 'memorio'
-
-// ============================================
-// NESTED OBJECTS
-// ============================================
-
-// Create nested state
-state.user = {
-  name: 'Mario',
-  profile: {
-    email: 'mario@example.com',
-    settings: {
-      theme: 'dark',
-      notifications: true
-    }
-  }
-}
-
-// Access nested values
-console.debug('User name:', state.user.name)
-console.debug('Email:', state.user.profile.email)
-console.debug('Theme:', state.user.profile.settings.theme)
-
-// ============================================
-// ARRAYS
-// ============================================
-
-// State arrays work like regular arrays
-state.items = [1, 2, 3]
-state.items.push(4)
-console.debug('Items:', state.items) // [1, 2, 3, 4]
-
-state.users = [
-  { name: 'Mario', id: 1 },
-  { name: 'Luigi', id: 2 }
-]
-state.users.push({ name: 'Peach', id: 3 })
-console.debug('Users:', state.users)
-
-// ============================================
-// LOCKING STATE
-// ============================================
-
-// Lock a value to prevent modifications
-state.config = { maxUsers: 100, timeout: 30 }
-state.config.lock()
-
-// This will fail:
-// state.config.maxUsers = 200 // Error: state 'config' is locked
-
-console.debug('Config locked:', state.config)
-
-// ============================================
-// PATH TRACKING
-// ============================================
-
-// Get path information
-console.debug('Path:', state.user.__path) // "state.user"
-
-// Use path tracker for debugging
-const path = state.user.profile
-console.debug('Profile path:', path.email.toString()) // "state.user.profile.email"
-
-// ============================================
-// LIST ALL STATES
-// ============================================
-
-// Get all current state keys
-console.debug('All states:', state.list)
-
-// ============================================
-// REMOVE STATE
-// ============================================
-
-// Remove specific state
-state.remove('items')
-
-// Remove all states
-// state.removeAll()
-
-console.debug('State advanced example complete!')

package/examples/store-advanced.ts

@@ -1,117 +0,0 @@
-/**
- * Memorio Store Advanced Example
- *
- * This example shows advanced store (localStorage) operations.
- *
- * Run: npx ts-node examples/store-advanced.ts
- */
-
-import 'memorio'
-
-// ============================================
-// CHECK PERSISTENCE
-// ============================================
-
-console.debug('=== Store Persistence Check ===')
-console.debug('Is persistent (survives restart):', store.isPersistent)
-// In browser: true (localStorage)
-// In Node.js/Deno: false (memory fallback)
-
-if (!store.isPersistent) {
-  console.debug('⚠️ Warning: Using in-memory storage. Data will be lost on restart!')
-}
-
-// ============================================
-// PERSIST USER PREFERENCES
-// ============================================
-
-// Save user preferences
-store.set('preferences', {
-  theme: 'dark',
-  language: 'en',
-  notifications: true,
-  fontSize: 16
-})
-
-// ============================================
-// CHECK AND LOAD PREFERENCES
-// ============================================
-
-const savedPrefs = store.get('preferences')
-if (savedPrefs) {
-  console.debug('Loaded preferences:', savedPrefs)
-} else {
-  console.debug('No preferences found, using defaults')
-  store.set('preferences', { theme: 'light', language: 'en' })
-}
-
-// ============================================
-// STORAGE QUOTA
-// ============================================
-
-// Get storage size
-const currentSize = store.size()
-console.debug('Current storage size:', currentSize, 'bytes')
-
-// ============================================
-// ALIAS METHODS
-// ============================================
-
-// store.delete() is alias for store.remove()
-store.set('temp', 'value')
-store.delete('temp')
-
-// store.clearAll() is alias for store.removeAll()
-// store.clearAll()
-
-// ============================================
-// ERROR HANDLING
-// ============================================
-
-// Try-catch for large data
-try {
-  // Store large data
-  const largeData = {
-    items: Array(1000).fill(null).map((_, i) => ({ id: i, data: 'x'.repeat(100) }))
-  }
-  store.set('largeData', largeData)
-  console.debug('Large data stored successfully')
-} catch (error) {
-  console.error('Storage full:', error)
-}
-
-// ============================================
-// DATA SERIALIZATION
-// ============================================
-
-// Store supports all JSON-serializable types
-store.set('string', 'hello')
-store.set('number', 42)
-store.set('boolean', true)
-store.set('array', [1, 2, 3])
-store.set('object', { nested: { value: 'deep' } })
-store.set('null', null)
-
-// Functions are not supported (logged as error)
-store.set('function', () => { }) // logs: "It's not secure to store functions."
-
-// ============================================
-// PRACTICAL EXAMPLE: APP STATE
-// ============================================
-
-// Save app state
-const appState = {
-  lastPage: '/dashboard',
-  sidebarOpen: true,
-  recentFiles: ['file1.txt', 'file2.pdf'],
-  lastSaved: Date.now()
-}
-store.set('appState', appState)
-
-// Load on next visit
-const restored = store.get('appState')
-if (restored) {
-  console.debug('Restored app state:', restored.lastPage)
-}
-
-console.debug('Store advanced example complete!')