memorio 4.6.6 → 4.6.8

package/examples/useObserver.tsx

@@ -1,141 +0,0 @@
-/**
- * Memorio useObserver Example
- *
- * This example demonstrates the useObserver hook for React.
- * useObserver automatically tracks state changes and triggers re-renders.
- *
- * Note: This example requires React to be present in the environment.
- * Run in a React environment.
- */
-
-import 'memorio'
-
-// ============================================
-// BASIC USEOBSERVER
-// ============================================
-
-// Example 1: Watch single value
-useObserver(callback, [state.value])
-
-function Counter() {
-  useObserver(() => {
-    console.debug('Count changed:', state.count)
-  }, [state.count])
-
-  return <div>{state.count} </div>
-}
-
-// ============================================
-// MULTIPLE DEPENDENCIES
-// ============================================
-
-// Example 2: Watch multiple values
-function UserProfile() {
-  useObserver(() => {
-    console.debug('User or theme changed')
-  }, [state.user, state.theme])
-
-  return <div>{state.user.name} </div>
-}
-
-// ============================================
-// AUTO-DISCOVERY
-// ============================================
-
-// Example 3: No dependencies - auto-discovers all state access
-function AutoDiscovery() {
-  useObserver(() => {
-    // Automatically tracks state.user, state.items, state.count
-    console.debug('Changed:', state.user.name, state.items.length, state.count)
-  })
-
-  return <div>{state.user.name} </div>
-}
-
-// ============================================
-// SYNC WITH USESTATE
-// ============================================
-
-// Example 4: Sync with useState
-function SyncedComponent() {
-  const [localData, setLocalData] = useState(null)
-
-  useObserver((newValue) => {
-    setLocalData(newValue)
-  }, [state.data])
-
-  return <div>{localData} </div>
-}
-
-// ============================================
-// PRACTICAL EXAMPLE
-// ============================================
-
-// Real-world React component example:
-import 'memorio'
-
-function TodoApp() {
-  // Track todos
-  useObserver(() => {
-    console.debug('Todos updated:', state.todos)
-    // Optionally save to store
-    store.set('todos', state.todos)
-  }, [state.todos])
-
-  // Track filter
-  useObserver(() => {
-    console.debug('Filter changed:', state.filter)
-  }, [state.filter])
-
-  const addTodo = (text) => {
-    state.todos = [...(state.todos || []), { text, done: false }]
-  }
-
-  const toggleTodo = (index) => {
-    const todos = [...state.todos]
-    todos[index].done = !todos[index].done
-    state.todos = todos
-  }
-
-  const filteredTodos = (state.todos || []).filter(t =>
-    state.filter === 'all' ||
-    (state.filter === 'done' && t.done) ||
-    (state.filter === 'todo' && !t.done)
-  )
-
-  return (
-    <div>
-      <select
-        value={state.filter}
-        onChange={e => state.filter = e.target.value}
-      >
-        <option value="all" > All </option>
-        < option value="done" > Done </option>
-        < option value="todo" > Todo </option>
-      </select>
-      <ul>
-        {
-          filteredTodos.map((todo, i) => (
-            <li
-              key={i}
-              onClick={() => toggleTodo(i)}
-              style={{ textDecoration: todo.done ? 'line-through' : 'none' }
-              }
-            >
-              {todo.text}
-            </li>
-          ))}
-      </ul>
-      < input
-        onKeyDown={e => {
-          if (e.key === 'Enter') {
-            addTodo(e.target.value)
-            e.target.value = ''
-          }
-        }}
-      />
-    </div>
-  )
-}
-
-console.debug('useObserver example - run in React environment!')