dev-react-microstore 4.0.0 → 5.0.0

package/example/src/components/TodoList.tsx

@@ -0,0 +1,63 @@
+import { useState } from 'react'
+import { useStoreSelector } from '../../../src/index'
+import store from '../store'
+
+export default function TodoList() {
+  const { todos } = useStoreSelector(store, ['todos'])
+  const [todoText, setTodoText] = useState('')
+
+  const handleAddTodo = () => {
+    if (todoText.trim()) {
+      const newTodo = {
+        id: Date.now(),
+        text: todoText.trim(),
+        completed: false
+      }
+      store.set({ todos: [...todos, newTodo] })
+      setTodoText('')
+    }
+  }
+
+  const handleToggleTodo = (id: number) => {
+    const updatedTodos = todos.map(todo =>
+      todo.id === id ? { ...todo, completed: !todo.completed } : todo
+    )
+    store.set({ todos: updatedTodos })
+  }
+
+  const handleDeleteTodo = (id: number) => {
+    const updatedTodos = todos.filter(todo => todo.id !== id)
+    store.set({ todos: updatedTodos })
+  }
+
+  return (
+    <section className="section">
+      <h3>📝 Todos</h3>
+      <div className="todo-form">
+        <input
+          type="text"
+          placeholder="Add a todo..."
+          value={todoText}
+          onChange={(e) => setTodoText(e.target.value)}
+          onKeyPress={(e) => e.key === 'Enter' && handleAddTodo()}
+        />
+        <button onClick={handleAddTodo}>Add</button>
+      </div>
+      <div className="todo-list">
+        {todos.map(todo => (
+          <div key={todo.id} className={`todo-item ${todo.completed ? 'completed' : ''}`}>
+            <input
+              type="checkbox"
+              checked={todo.completed}
+              onChange={() => handleToggleTodo(todo.id)}
+            />
+            <span className="todo-text">{todo.text}</span>
+            <button onClick={() => handleDeleteTodo(todo.id)} className="delete">
+              ×
+            </button>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+} 

package/example/src/components/UserManager.tsx

@@ -0,0 +1,68 @@
+import { useState, useEffect } from 'react'
+import { useStoreSelector } from '../../../src/index'
+import store from '../store'
+
+export default function UserManager() {
+  const { userName: currentUserName, userEmail: currentUserEmail, isLoggedIn, userError } = useStoreSelector(store, ['userName', 'userEmail', 'isLoggedIn', 'userError'])
+  const [userName, setUserName] = useState('')
+  const [userEmail, setUserEmail] = useState('')
+
+  // Clear form on successful login
+  useEffect(() => {
+    if (isLoggedIn && !userError) {
+      setUserName('')
+      setUserEmail('')
+    }
+  }, [isLoggedIn, userError])
+
+  const handleUserUpdate = () => {
+    store.set({
+      userName,
+      userEmail,
+      isLoggedIn: true
+    })
+  }
+
+  const handleUserLogout = () => {
+    store.set({
+      userName: '',
+      userEmail: '',
+      isLoggedIn: false
+    })
+  }
+
+  return (
+    <section className="section">
+      <h3>👤 User Management (with persistence & transformation)</h3>
+      <div className="user-info">
+        {isLoggedIn ? (
+          <div>
+            <p><strong>Name:</strong> {currentUserName}</p>
+            <p><strong>Email:</strong> {currentUserEmail}</p>
+            <button onClick={handleUserLogout}>Logout</button>
+          </div>
+        ) : (
+          <div className="user-form">
+            <input
+              type="text"
+              placeholder="Name"
+              value={userName}
+              onChange={(e) => setUserName(e.target.value)}
+            />
+            <input
+              type="email"
+              placeholder="Email"
+              value={userEmail}
+              onChange={(e) => setUserEmail(e.target.value)}
+            />
+            <button onClick={handleUserUpdate}>Login</button>
+            {userError && <div className="error-message">{userError}</div>}
+            <p className="help-text">
+              Names are normalized and emails are validated *
+            </p>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+} 

package/example/src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/example/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/example/src/store.ts

@@ -0,0 +1,223 @@
+import { createStoreState, createPersistenceMiddleware, loadPersistedState } from '../../src/index';
+
+// Define our app state interface
+interface AppState {
+  count: number;
+  userName: string;
+  userEmail: string;
+  isLoggedIn: boolean;
+  userError: string;
+  theme: 'light' | 'dark';
+  todos: Array<{ id: number; text: string; completed: boolean }>;
+  searchResults: string[];
+  isSearching: boolean;
+  logs: Array<{ id: number; message: string; type: string; timestamp: string }>;
+  // Complex object for custom compare demo
+  gameState: {
+    player: {
+      name: string;
+      health: number;
+      mana: number;
+      level: number;
+      experience: number;
+    };
+    enemy: {
+      name: string;
+      health: number;
+      damage: number;
+      isAlive: boolean;
+    };
+    ui: {
+      showInventory: boolean;
+      showMap: boolean;
+      notifications: string[];
+    };
+    turn: 'player' | 'enemy';
+    isProcessingTurn: boolean;
+  };
+}
+
+// Load persisted state
+const persistedState = loadPersistedState<AppState>(
+  localStorage, 
+  'microstore-example', 
+  ['userName', 'userEmail', 'isLoggedIn', 'theme']
+);
+
+// Create store with initial state merged with persisted state
+const store = createStoreState<AppState>({
+  count: 0,
+  userName: '',
+  userEmail: '',
+  isLoggedIn: false,
+  userError: '',
+  theme: 'light',
+  ...persistedState, // Apply persisted state
+  todos: [],
+  searchResults: [],
+  isSearching: false,
+  logs: [],
+  // Complex object for custom compare demo
+  gameState: {
+    player: {
+      name: 'Player 1',
+      health: 100,
+      mana: 50,
+      level: 1,
+      experience: 0
+    },
+    enemy: {
+      name: 'Goblin',
+      health: 30,
+      damage: 5,
+      isAlive: true
+    },
+    ui: {
+      showInventory: false,
+      showMap: false,
+      notifications: []
+    },
+    turn: 'player',
+    isProcessingTurn: false
+  }
+});
+
+// Persistence
+store.addMiddleware(createPersistenceMiddleware(localStorage, 'microstore-example', ['userName', 'userEmail', 'isLoggedIn', 'theme']));
+
+// Block negative counts
+store.addMiddleware((state, update, next) => {
+  if (update.count !== undefined && update.count < 0) {
+    addLog(`Blocked: ${formatValue(state.count)} → ${formatValue(update.count)}`, 'error');
+    return;
+  }
+  next();
+}, ['count']);
+
+// Email validation
+store.addMiddleware((state, update, next) => {
+  if (update.userEmail && !update.userEmail.includes('@')) {
+    addLog(`Blocked: ${formatValue(state.userEmail)} → ${formatValue(update.userEmail)}`, 'error');
+    next({ userError: 'Invalid email format' });
+    return;
+  }
+  if (update.userEmail !== undefined) {
+    next({ ...update, userError: '' });
+  } else {
+    next();
+  }
+}, ['userEmail']);
+
+// Auto-normalize user data
+store.addMiddleware((_, update, next) => {
+  const mod = { ...update };
+  let changed = false;
+  
+  if (update.userName) {
+    const norm = update.userName.trim().toUpperCase();
+    if (norm !== update.userName) { mod.userName = norm; changed = true; }
+  }
+  
+  if (update.userEmail) {
+    const norm = update.userEmail.trim().toLowerCase();
+    if (norm !== update.userEmail) { mod.userEmail = norm; changed = true; }
+  }
+  
+  if (changed) addLog('Transform: name/email normalized', 'info');
+  next(mod);
+}, ['userName', 'userEmail']);
+
+// Log all changes
+store.addMiddleware((state, update, next) => {
+  Object.keys(update).filter(k => k !== 'logs').forEach(key => {
+    const before = state[key as keyof AppState];
+    const after = update[key as keyof AppState];
+    if (JSON.stringify(before) !== JSON.stringify(after)) {
+      addLog(`${key}: ${formatValue(before)} → ${formatValue(after)}`, 'info');
+    }
+  });
+  next();
+});
+
+// Helper function to format values for display
+function formatValue(value: unknown): string {
+  if (value === null) return 'null';
+  if (value === undefined) return 'undefined';
+  if (typeof value === 'string') return `"${value}"`;
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+  if (Array.isArray(value)) return `[${value.length} items]`;
+  if (typeof value === 'object') {
+    try {
+      const str = JSON.stringify(value, null, 2);
+      const lines = str.split('\n');
+      if (lines.length > 5) {
+        return lines.slice(0, 4).join('\n') + '\n  ...\n}';
+      }
+      return str;
+    } catch {
+      return '{object}';
+    }
+  }
+  return String(value);
+}
+
+// Mock search function
+function performSearch(query: string): string[] {
+  const mockData = [
+    'JavaScript', 'TypeScript', 'React', 'Vue', 'Angular', 'Node.js',
+    'Express', 'MongoDB', 'PostgreSQL', 'Redis', 'Docker', 'Kubernetes'
+  ];
+  
+  if (!query.trim()) return [];
+  
+  return mockData.filter(item => 
+    item.toLowerCase().includes(query.toLowerCase())
+  );
+}
+
+// Search functionality with debouncing
+export function updateSearchQuery(query: string) {
+  // Check current state
+  const {isSearching} = store.select(['isSearching']);
+  const results = performSearch(query);
+
+  if(!query){
+    store.set({
+      searchResults: [],
+      isSearching: false
+    });
+    return;
+  }
+
+  if(!isSearching) {
+    store.set({ 
+      isSearching: query.length > 0 
+    });
+  }
+  
+  // Debounced search execution (300ms delay)
+  store.set({
+    searchResults: results,
+    isSearching: false
+  }, 300);
+}
+
+// Helper function to add logs to store
+let logCounter = 0;
+function addLog(message: string, type: string = 'info') {
+  const currentState = store.get();
+  const newLog = {
+    id: Date.now() + (++logCounter), // Ensure unique IDs
+    message,
+    type,
+    timestamp: new Date().toLocaleTimeString()
+  };
+  
+  // Keep only last 50 logs
+  const newLogs = [...currentState.logs, newLog].slice(-50);
+  
+  // Update logs without triggering middleware (direct state update)
+  store.set({ logs: newLogs });
+}
+
+export default store; 

package/example/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/example/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/example/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/example/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/example/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

package/package.json

@@ -1,9 +1,17 @@
 {
   "name": "dev-react-microstore",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "A minimal global state manager for React with fine-grained subscriptions.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OhadBaehr/react-microstore.git"
+  },
+  "homepage": "https://github.com/OhadBaehr/react-microstore",
+  "bugs": {
+    "url": "https://github.com/OhadBaehr/react-microstore/issues"
+  },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --minify",
     "prepare": "npm run build"
@@ -21,8 +29,7 @@
   "author": "Ohad Baehr",
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=17.0.0",
-    "react-dom": ">=17.0.0"
+    "react": ">=17.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.1.2",